/* ==========================================================================
   Wurdinger Holzbau GmbH – Stylesheet
   Keine externen Ressourcen (DSGVO-freundlich), keine Webfonts von Dritten.
   ========================================================================== */

/* ---------- 1. Reset & Basis ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body,
h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

/* muss nach den display-Regeln unten wirken – daher !important */
[hidden] { display: none !important; }

img, picture, svg {
  max-width: 100%;
  display: block;
}

/* Gehoert zwingend zu den width- und height-Attributen im HTML.
   Die Attribute stehen dort, damit der Browser das Seitenverhaeltnis schon
   kennt, bevor das Bild geladen ist, und den Platz freihaelt – sonst springt
   der Text beim Nachladen nach unten weg. Ohne height:auto wuerde die
   Hoehenangabe aus dem Attribut aber woertlich genommen: max-width:100%
   verkleinert die Breite auf schmalen Bildschirmen, die Hoehe bliebe stehen,
   und das Bild waere verzerrt. Mit height:auto dient das Attributpaar nur
   noch als Seitenverhaeltnis.
   Regeln mit Klasse (.card__media img, .shot__btn img) sind spezifischer
   und behalten ihre height:100% – dort schneidet object-fit ohnehin zu. */
img {
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

:root {
  /* ------------------------------------------------------------------
     Design-Tokens – hier zentral anpassen.
     Grundlage ist die Farbwelt der alten Wurdinger-Website:
     das Hintergrundgrün #CEDECF sowie Grün und Braun direkt aus dem Logo
     (assets/img/logo.svg: #2F8A5D und #7E5547).
     ------------------------------------------------------------------ */
  --color-bg:            #CEDECF;   /* Original-Hintergrundgrün der alten Website */
  --color-bg-soft:       #E4EDE4;   /* aufgehellte Variante für ruhige Flächen */
  --color-primary:       #2F8A5D;   /* Wurdinger-Grün, exakt aus dem Logo */
  --color-logo-bar:      #348F5E;   /* Grün des waagerechten Balkens in logo.png */
  --color-primary-deep:  #297C52;   /* dieselbe Farbe, abgedunkelt für Text/Buttons */
  --color-secondary:     #7E5547;   /* Wurdinger-Braun, exakt aus dem Logo */
  --color-secondary-ink: #66443A;   /* abgedunkeltes Braun für kleine Texte */
  --color-text:          #202523;   /* dunkler neutraler Fließtext */
  --color-surface:       #FFFFFF;
  --color-surface-2:     #F7F8F5;   /* leicht gebrochenes Weiß */

  /* Typografie */
  --font-heading: Georgia, "Times New Roman", Times, serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ------------------------------------------------------------------
     Abgeleitete Töne. Bewusst eine kleine Palette: ein Grün, ein Braun,
     Weiß und neutrale Grautöne mit leichtem Grünstich.
     ------------------------------------------------------------------ */
  --ink:          var(--color-text);
  --ink-soft:     #4A534D;
  --ink-mute:     #77807A;

  --green-900:    #1D4A35;   /* dunkles Marken-Grün, nur Fußzeile */
  --green-800:    #24603F;
  --green-700:    var(--color-primary-deep);   /* Buttons, Links */
  --green-600:    var(--color-primary);        /* Logogrün */
  --green-300:    #A9D8BE;   /* Akzent auf dunklem Grund */
  --green-50:     var(--color-bg-soft);

  --brown:        var(--color-secondary-ink);
  --brown-logo:   var(--color-secondary);

  --paper:        var(--color-surface);
  --paper-2:      var(--color-surface-2);
  --paper-3:      #EDF1EC;
  --paper-4:      #DDE5DC;
  --line:         #DCE2DB;
  --line-strong:  #BCC7BC;

  --white:        #FFFFFF;

  /* Altnamen der Schriftvariablen bleiben als Alias erhalten */
  --font-display: var(--font-heading);
  --font-sans:    var(--font-body);

  /* Maße */
  --wrap:         1180px;
  --measure:      40rem;   /* maximale Zeilenlänge für Fließtext */
  --gutter:       clamp(1.15rem, 4vw, 2.5rem);
  --radius:       3px;

  /* Kopfbereich: wird für die Hero-Höhe und Sprungmarken gebraucht */
  /* Überstand der waagerechten Linienstücke, damit die weiche Kante
     des Balkens aus dem Bild vollständig sichtbar bleibt */
  --hb-e:              2px;

  --header-h:          140px;
  --header-h-scrolled:  96px;
  --topbar-h:           40px;

  --shadow-sm:    0 1px 2px rgba(20, 30, 25, .05);
}

body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* clip statt hidden: verhindert seitliches Scrollen, ohne position:sticky zu brechen */
  overflow-x: hidden;
  overflow-x: clip;
}

/* Überschriften in der Serifenschrift (Anlehnung an das Times der alten Seite),
   Fließtext und UI in der Sans-Serif. Mehr als diese zwei Familien gibt es nicht. */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--ink);
  line-height: 1.18;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 1.45rem + 2.6vw, 3.5rem); line-height: 1.12; }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.7vw, 2.4rem); }
h3 { font-size: clamp(1.18rem, 1.05rem + .55vw, 1.45rem); font-weight: 600; }
h4 { font-size: 1.0625rem; font-family: var(--font-body); font-weight: 700; }

p { text-wrap: pretty; }

a { color: var(--green-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-900); }

strong { color: var(--ink); font-weight: 650; }

:focus-visible {
  outline: 3px solid var(--green-300);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- 2. Layout-Helfer ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 820px; }

/* Abschnitte dürfen atmen: großzügige Abstände statt dichter Packung. */
.section { padding-block: clamp(4.5rem, 2.5rem + 7.5vw, 9rem); }
.section--tight { padding-block: clamp(3rem, 1.8rem + 4.5vw, 5.5rem); }
.section--muted { background: var(--paper-2); }
.section--tint { background: var(--paper-3); }

/* Ruhiger Abschnitt im Original-Grün der alten Website */
.section--sage { background: var(--color-bg); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green-700);
  color: #fff;
  padding: .75rem 1.25rem;
  z-index: 999;
}
.skip-link:focus { left: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brown);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--brown);
  flex: none;
}

.lead {
  font-size: clamp(1.06rem, 1rem + .35vw, 1.24rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.section-head { max-width: var(--measure); margin-bottom: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head p { margin-top: 1rem; }

/* ---------- 3. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: .98rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  text-align: center;
}


.btn--primary { background: var(--green-700); color: #fff; }
.btn--primary:hover { background: var(--green-900); color: #fff; }

.btn--dark { background: var(--green-700); color: #fff; }
.btn--dark:hover { background: var(--green-900); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--paper-3); color: var(--ink); border-color: var(--ink-mute); }

.btn--ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.4);
}
.btn--ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.btn--light { background: #fff; color: var(--green-900); }
.btn--light:hover { background: var(--paper-3); color: var(--green-900); }

.btn--lg { padding: 1.1rem 2rem; font-size: 1.03rem; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2rem;
}

.btn-row--inline { align-items: center; gap: 1.6rem; }
.section-more { margin-top: clamp(2rem, 1.2rem + 1.6vw, 3rem); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 650;
  font-size: .95rem;
  text-decoration: none;
  color: var(--green-700);
}
.link-arrow::after { content: "→"; transition: transform .18s ease; }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- 4. Kopfzeile ---------- */
/* Die schmale Infozeile trägt das Original-Grün der alten Website. */
.topbar {
  background: var(--color-bg);
  color: var(--ink-soft);
  font-size: .84rem;
}
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .35rem 1.5rem;
  min-height: var(--topbar-h);
  padding-block: .45rem;
}
.topbar a { color: var(--green-900); text-decoration: none; font-weight: 600; }
.topbar a:hover { color: var(--green-700); text-decoration: underline; }
.topbar__list { display: flex; flex-wrap: wrap; gap: .35rem 1.6rem; }
.topbar__item { display: inline-flex; align-items: center; gap: .45rem; }
.topbar__icon { width: 15px; height: 15px; flex: none; color: var(--green-700); opacity: .9; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
  transition: min-height .22s ease;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
/* Das Originallogo wird unverändert dargestellt, nur in der Größe gefasst. */
/* Das Logo ist die Originaldatei assets/img/logo.png. Sie wird ausschließlich
   skaliert: feste Höhe, width:auto – dadurch immer proportional und unverzerrt.
   Die Datei ist 1536x1024 groß, die Marke selbst liegt darin bei x 241-1297 und
   y 155-728, ringsum ist transparenter Rand. Die negativen Außenabstände ziehen
   nur diesen unsichtbaren Rand aus dem Layout, damit die Marke bündig am Raster
   sitzt. Die Bilddatei bleibt unangetastet.

   --logo-h ist die Höhe der ganzen Datei. Sichtbar davon sind 55,96 Prozent,
   das ist die eigentliche Marke. Die Werte unten sind so gewählt, dass die
   Marke genauso groß erscheint wie in der früheren Fassung:
   164 x 0,5596 = 92 Pixel hoch, wie zuvor. */
/* --logo-h wird angemeldet, damit der Browser den Wert weich überblenden kann.
   Das ist hier keine Spielerei, sondern notwendig: Höhe UND negative Ränder des
   Logos werden aus --logo-h berechnet. Wird stattdessen height übergangen,
   läuft die Höhe weich, die Ränder springen aber sofort auf den neuen Wert –
   der Kasten des Logos ist dann für die Dauer des Übergangs geometrisch falsch
   und schießt kurz über (gemessen 91,8 auf 113,4 statt gleichmäßig kleiner zu
   werden). Die grüne Linie wird aus genau diesem Kasten berechnet und kann
   dann nicht passen: am Übergang wird für einen Moment eine Lücke sichtbar.

   Über --logo-h laufen Höhe und Ränder gemeinsam, der Kasten bleibt in jedem
   Bild stimmig. Browser ohne @property übernehmen die neue Größe ohne
   Übergang – auch das ist stimmig, nur eben ohne Animation. */
@property --logo-h {
  syntax: "<length>";
  inherits: false;
  initial-value: 164px;
}

.brand__logo {
  --logo-h: 164px;
  height: var(--logo-h);
  width: auto;
  /* Die globale Regel img { max-width: 100% } würde zusammen mit den negativen
     Rändern unten die Breite erneut beschneiden und das Logo verkleinern.
     Deshalb hier ausgehebelt; die Größe steuert allein --logo-h. */
  max-width: none;
  /* Schutz vor Verzerrung, falls der Platz doch einmal knapp wird */
  object-fit: contain;
  display: block;
  /* Die vier Werte sind der transparente Rand der Datei, geteilt durch ihre
     Höhe 1024: oben 155, unten 296, links 241, rechts 239 Pixel. Dadurch
     entspricht der Kasten des Logos exakt der sichtbaren Marke – die grüne
     Linie kann direkt an seiner rechten Kante ansetzen. */
  margin-top:    calc(var(--logo-h) * -0.15137);
  margin-bottom: calc(var(--logo-h) * -0.28906);
  margin-left:   calc(var(--logo-h) * -0.23535);
  margin-right:  calc(var(--logo-h) * -0.23340);
  /* Nicht height übergehen, sondern --logo-h: daraus werden Höhe und Ränder
     gemeinsam berechnet. Dauer und Kurve müssen zu .site-header .wrap oben und
     zu HEADER_TRANSITION_MS in assets/js/main.js passen. */
  transition: --logo-h .22s ease;
}

/* Beim Scrollen wird der Kopfbereich kompakt, damit er nicht zu viel Platz nimmt */
.site-header.is-scrolled .brand__logo { --logo-h: 107px; }
.site-header.is-scrolled .wrap { min-height: var(--header-h-scrolled); }

/* In der dunklen Fußzeile steht das Originallogo auf einer hellen Fläche,
   sonst wäre der Kontrast zu gering. Das Logo bleibt unverändert. */
.footer-brand .brand {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.15rem 1.4rem;
}
.brand__logo--footer { --logo-h: 172px; transition: none; }

.nav {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-left: auto;
  margin-right: 0;
  /* Hebt die Menüpunkte so weit an, dass der hochgesetzte Teil der grünen
     Linie darunter Platz findet. Der Wert wird in main.js aus der Lage des
     Balkens im Logo berechnet. */
  padding-bottom: calc(var(--nav-lift, 0px) * 2);
}
.nav__cta { display: none; }
.nav__link {
  display: inline-block;
  padding: .55rem .2rem;
  font-size: .95rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease;
}
.nav__link + .nav__link { margin-left: 1.4rem; }
.nav__link:hover { color: var(--green-700); }
/* Der hochgesetzte Abschnitt der grünen Linie markiert die aktive Seite.
   Deshalb hier bewusst keine zweite Unterstreichung. */
.nav__link[aria-current="page"] { color: var(--green-700); }

/* ---------- Grüne Linie im Kopfbereich ----------
   Der waagerechte grüne Balken des Logos läuft als durchgehende Linie weiter
   bis zum rechten Rand des Kopfbereichs. Die Maße setzt main.js, gemessen an
   der tatsächlichen Größe des Logos. */
.headerbar {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* Über dem Logo, damit die Linie dessen leicht dunklere Abschlusskante
     überdeckt und der Übergang nahtlos wirkt. Sie überlappt nur die Spitze
     des ohnehin gleichfarbigen Balkens, das Logo selbst bleibt unberührt.
     pointer-events: none lässt alle Klicks durch. */
  z-index: 2;
}

/* Die Linie ist keine einfarbige Fläche, sondern ein Stück des Balkens aus
   logo.png selbst: senkrecht in derselben Größe wie das Logo, waagerecht
   gekachelt. Dadurch hat sie exakt dieselbe weiche Ober- und Unterkante und
   dieselbe Färbung wie der Balken im Bild – der Übergang ist so nicht mehr
   auffindbar. Eine reine CSS-Fläche hat immer eine harte Kante, das Bild
   dagegen eine über etwa ein Pixel verlaufende.
   assets/img/headerbar.png ist der Ausschnitt x 1150-1165 und y 455-544 aus
   logo.png, dort verläuft der Balken durchgehend und es liegt nichts anderes
   darüber oder darunter. Das Logo selbst bleibt unberührt. */
.headerbar__line {
  position: absolute;
  display: none;
  left:   var(--hb-x0);
  width:  var(--hb-w);
  top:    var(--hb-seg-top);
  height: var(--hb-seg-h);
  background-color: transparent;
  background-image: url("../img/headerbar.png");
  background-repeat: repeat-x;
  background-size: var(--hb-bg-w) var(--hb-bg-h);
  background-position: 0 var(--hb-bg-y);
}
/* Erst zeichnen, wenn die Maße berechnet sind – sonst blitzt die Linie auf */
.headerbar.is-ready .headerbar__line { display: block; }

/* Der Inhalt liegt über der Linie, damit die Menüpunkte anklickbar bleiben */
.site-header .wrap { position: relative; z-index: 1; }

.header-actions { display: none; align-items: center; gap: .6rem; flex: none; }
.header-actions .btn { padding: .72rem 1.15rem; font-size: .92rem; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  background: transparent;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  padding: .55rem .8rem;
  font-size: .9rem;
  font-weight: 650;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle__bars { display: block; width: 18px; height: 12px; position: relative; }
.nav-toggle__bars span,
.nav-toggle__bars span::before,
.nav-toggle__bars span::after {
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle__bars span { top: 5px; }
.nav-toggle__bars span::before { content: ""; top: -5px; }
.nav-toggle__bars span::after { content: ""; top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span::after { transform: translateY(-5px) rotate(-45deg); }

/* ---------- 5. Hero ----------
   Der Hero füllt ungefähr eine Bildschirmhöhe abzüglich Kopfbereich.
   So sieht der Besucher beim Öffnen nur eine Botschaft, ein Bild und
   eine Handlungsmöglichkeit – alles Weitere kommt beim Scrollen. */
.hero {
  position: relative;
  background: var(--color-bg);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-h) - var(--topbar-h));
  min-height: calc(100svh - var(--header-h) - var(--topbar-h));
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.hero .wrap { position: relative; z-index: 1; width: 100%; }

.hero__grid {
  display: grid;
  /* Die Bildspalte ist die breitere: das Hero-Foto ist quer, in einer schmalen
     Spalte wuerde es neben der Schlagzeile verschwinden. */
  /* Die Textspalte hat eine Untergrenze von 28rem. Darunter passen Knopf und
     "oder anrufen" nicht mehr nebeneinander und die Telefonnummer rutscht auf
     eine eigene Zeile. Erst wenn kein Platz mehr da ist, gibt die Bildspalte
     nach – unter 960px steht ohnehin alles untereinander. */
  grid-template-columns: minmax(28rem, 1fr) minmax(0, 1.35fr);
  gap: clamp(2.5rem, 1rem + 3vw, 3.75rem);
  align-items: center;
}
.hero__sub {
  margin-top: 1.6rem;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 30rem;
  line-height: 1.7;
}
.hero .btn-row { margin-top: clamp(2.25rem, 1.5rem + 2vw, 3.25rem); }

/* Die Telefonnummer bleibt erreichbar, tritt aber bewusst zurück. */
.hero__tel {
  display: inline-flex;
  align-items: center;
  color: var(--ink-mute);
  font-weight: 500;
  font-size: .95rem;
  text-decoration: none;
}
.hero__tel:hover { color: var(--green-700); text-decoration: underline; }

/* Ein großzügiges Hauptbild statt einer Collage. */
.hero__media { margin: 0; }

/* Das Bild darf nach rechts ueber den Satzspiegel hinauslaufen und wird dadurch
   rund 24 % groesser. Der Weg ueber einen negativen rechten Aussenabstand ist
   bewusst gewaehlt: die Spaltenbreiten des Rasters bleiben unveraendert, die
   Textspalte links steht auf den Pixel genau wie vorher.

   Wie weit es hinauslaufen darf, rechnet clamp() aus dem Platz, der neben dem
   .wrap tatsaechlich frei ist: die Haelfte dessen, was das Fenster breiter ist
   als --wrap, plus der rechte Innenabstand des .wrap, minus 1rem Sicherheit.
   Damit entsteht in keiner Fensterbreite ein waagerechter Rollbalken. Unter
   rund 1130px Fensterbreite ergibt die Rechnung 0 – auf Tablet und Handy
   passiert also nichts. */
.hero__media {
  margin-right: calc(-1 * clamp(0px,
                       (100vw - var(--wrap)) / 2 + var(--gutter) - 1rem,
                       8.5rem));
}
/* Das Foto behaelt sein eigenes Seitenverhaeltnis: kein aspect-ratio, kein
   object-fit. Das Gebaeude ist breit und niedrig, jeder feste Rahmen wuerde es
   anschneiden. Die Hoehe ergibt sich aus width/height im <img> zusammen mit
   der globalen Regel img { height: auto }. */
.hero__media img {
  width: 100%;
  display: block;
  /* Kein border-radius: das Foto ist freigestellt, es gibt keine sichtbare
     Bildkante mehr. Der Radius wuerde nur unten die Pflasterflaeche anrunden. */
}

/* Das Foto soll nicht als Rechteck im Hero stehen, sondern aus dem gruenen
   Hintergrund heraustreten. Zwei Verlaufsmasken blenden die Aussenkanten weich
   aus. Sie liegen absichtlich auf zwei verschiedenen Elementen: die waagerechte
   auf der figure, die senkrechte auf dem img. Beide multiplizieren sich dabei
   von selbst. Zwei Maskenebenen auf einem Element wuerden dagegen
   mask-composite: intersect brauchen, und dafuer haben aeltere Safari-Versionen
   eine abweichende Syntax (-webkit-mask-composite: source-in) – der Umweg ueber
   zwei Elemente laeuft ueberall gleich.

   Es wird keine gruene Farbe ueber das Bild gelegt, die Maske macht echte
   Transparenz. Eine Aenderung an --color-bg wirkt damit von allein.

   Die Prozentwerte stammen aus dem Motiv (gemessen an hero.webp, 1534x861):
   die Bodenlinie liegt bei 88 % der Hoehe, darunter folgt nur noch Schatten.
   Beide Verlaeufe sind bewusst nicht linear, sondern ueber Zwischenstopps
   gekruemmt. Ein linearer Verlauf ueber dieselbe Strecke faellt als weicher
   Streifen auf; hier steigt die Deckung sofort steil an und laeuft nur noch
   flach aus. So verschwindet die harte Kante, ohne dass man eine Ausblendung
   sieht.

   Links: bei 1 % schon 45 %, bei 3,4 % schon 95 %, ab 4,5 % voll deckend.
   Unten: voll deckend bis 88 %, dann aus. Das Gebaeude endet bei 87 %,
   darunter liegt nur das Bodenband, das bei rund 92 % ohnehin ausgeht – der
   Verlauf legt sich also genau darueber und laesst Hallentor und Holzstapel
   unberuehrt. Rechts gibt es keinen Verlauf, damit das Holzregal bis zur
   Silhouette scharf bleibt, oben ebenfalls nicht. */
.hero__media,
.hero__media img {
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.hero__media {
  -webkit-mask-image: linear-gradient(to right,
                        rgba(0, 0, 0,   0)    0%,
                        rgba(0, 0, 0, .45)    1%,
                        rgba(0, 0, 0,  .8)  2.2%,
                        rgba(0, 0, 0, .95)  3.4%,
                        rgba(0, 0, 0,   1)  4.5%,
                        rgba(0, 0, 0,   1)  100%);
          mask-image: linear-gradient(to right,
                        rgba(0, 0, 0,   0)    0%,
                        rgba(0, 0, 0, .45)    1%,
                        rgba(0, 0, 0,  .8)  2.2%,
                        rgba(0, 0, 0, .95)  3.4%,
                        rgba(0, 0, 0,   1)  4.5%,
                        rgba(0, 0, 0,   1)  100%);
}
/* Oben bewusst kein Verlauf: der Gradient startet voll deckend, damit Dachkante
   und Schornstein scharf stehen. Nur die Unterkante loest sich auf. */
.hero__media img {
  -webkit-mask-image: linear-gradient(to bottom,
                        rgba(0, 0, 0,   1)    0%,
                        rgba(0, 0, 0,   1)   88%,
                        rgba(0, 0, 0, .85)   90%,
                        rgba(0, 0, 0, .45)   92%,
                        rgba(0, 0, 0,   0)   94%,
                        rgba(0, 0, 0,   0)  100%);
          mask-image: linear-gradient(to bottom,
                        rgba(0, 0, 0,   1)    0%,
                        rgba(0, 0, 0,   1)   88%,
                        rgba(0, 0, 0, .85)   90%,
                        rgba(0, 0, 0, .45)   92%,
                        rgba(0, 0, 0,   0)   94%,
                        rgba(0, 0, 0,   0)  100%);
}
.hero__placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  object-fit: cover;
  display: block;
}
.hero__placeholder {
  display: grid;
  place-content: center;
  gap: .75rem;
  justify-items: center;
  background: var(--color-bg-soft);
  border: 1px solid var(--line-strong);
  color: var(--ink-mute);
  text-align: center;
  padding: 1.5rem;
}
.hero__placeholder svg { width: 46px; height: 46px; opacity: .5; }
.hero__placeholder span {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Seiten-Hero (Unterseiten) */
.page-hero {
  background: var(--color-bg);
  color: var(--ink-soft);
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  position: relative;
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { max-width: 22ch; }
.page-hero p { margin-top: 1.2rem; max-width: var(--measure); font-size: 1.08rem; }

/* Hero mit Grafik daneben (Leistungen) */
.page-hero--split .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.page-hero--split .breadcrumb { margin-top: 0; }
.page-hero__text > p:first-of-type { margin-top: 0; }

/* ---------- Animierter Dachaufbau (assets/js/dachstuhl.js) ----------
   Isometrische Explosionszeichnung: Fußpfetten, Pfetten, Sparren, Kehlbalken,
   Dämmung, Unterdeckplatte, Lattung, Eindeckung. */
.dachstuhl__svg {
  width: 100%;
  height: auto;
  display: block;
}
.dachstuhl__part polygon {
  stroke: rgba(38, 30, 22, .22);
  stroke-width: .6;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
}

@media (max-width: 960px) {
  .page-hero--split .wrap { grid-template-columns: 1fr; }
  .page-hero__figure { max-width: 620px; }
}

.breadcrumb {
  font-size: .85rem;
  color: var(--ink-mute);
  margin-bottom: 1.2rem;
}
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--green-700); text-decoration: underline; }
.breadcrumb span { margin-inline: .45rem; }

/* ---------- 6. Kennzahlen ----------
   Eigener Abschnitt unter dem Hero, erst beim Scrollen sichtbar. */
.stats {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.stats__grid {
  --stat-gap: clamp(2rem, 1rem + 2.5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--stat-gap);
  padding-block: clamp(3.25rem, 2rem + 4vw, 5.5rem);
}
.stat { text-align: left; position: relative; }
.stat + .stat::before {
  content: "";
  position: absolute;
  left: calc(var(--stat-gap) / -2);
  top: .35rem;
  bottom: .35rem;
  width: 1px;
  background: var(--line);
}
.stat__value {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem);
  font-weight: 400;
  color: var(--green-700);
  line-height: 1.2;
}
.stat__label {
  margin-top: .7rem;
  font-size: .89rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ---------- 7. Karten & Raster ---------- */
.grid { display: grid; gap: clamp(1.75rem, 1rem + 1.8vw, 2.75rem) clamp(1rem, .6rem + 1.2vw, 1.8rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Bewusst ohne Rahmen und Schatten: das Bild trägt, die Fläche bleibt ruhig. */
.card {
  display: flex;
  flex-direction: column;
  background: transparent;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-4);
  border-radius: 3px;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
a.card:hover .card__media img { transform: scale(1.02); }
.card__body { padding: 1.05rem 0 0; display: flex; flex-direction: column; flex: 1; }
.card__title {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.card__title::after {
  content: "→";
  font-family: var(--font-sans);
  font-size: .9em;
  color: var(--green-700);
  margin-left: .45em;
  opacity: 0;
  display: inline-block;
  transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
a.card:hover .card__title::after,
a.card:focus-visible .card__title::after { opacity: 1; transform: translateX(0); }
.card__text { margin-top: .45rem; font-size: .95rem; color: var(--ink-soft); flex: 1; }

/* Leistungsgruppe */
.group-label {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: .9rem;
  margin-bottom: 1.6rem;
  border-bottom: 2px solid var(--line);
}
.group-label h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
.group-label p { font-size: .95rem; color: var(--ink-mute); margin-left: auto; text-align: right; }

.group + .group { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

/* ---------- 8. Ablauf / Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, .5rem + 1.5vw, 2rem);
  counter-reset: step;
}
/* Die Ziffer steht ueber der Trennlinie, die Ueberschrift darunter. Der
   Abstand zwischen Ziffer und Linie war mit gut zwei Pixeln zu knapp, die
   Zahl klebte am Strich. padding-top und die Lage der Linie wandern deshalb
   gemeinsam nach unten, damit der Abstand unter der Linie gleich bleibt. */
.step { position: relative; padding-top: 2.55rem; }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brown);
  letter-spacing: .05em;
}
.step::after {
  content: "";
  position: absolute;
  top: 2.15rem;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--line);
}
.section--sage .step::after { background: rgba(32,37,35,.14); }
.step h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.step p { font-size: .95rem; }

/* Auf breiten Bildschirmen bleiben Textspalten schmal genug zum Lesen */
.split > div > p,
.split > div > .lead,
.service > div > p,
.checklist { max-width: var(--measure); }

/* ---------- 9. Split-Bereich (Text + Bild) ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 1rem + 4vw, 4rem);
  align-items: center;
}
.split--wide-text { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.split__media { position: relative; }
.split__media img {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  border-radius: 3px;
}
.split__media figcaption {
  margin-top: .7rem;
  font-size: .84rem;
  color: var(--ink-mute);
}

.checklist { display: grid; gap: .7rem; margin-top: 1.5rem; }
.checklist li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .98rem;
}
.checklist li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: .2rem;
  border-radius: 50%;
  background: var(--paper-4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23297C52' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.section--sage .checklist li::before { background-color: var(--white); }

/* ---------- 10. Leistungs-Detail ---------- */
.service {
  scroll-margin-top: 100px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
  border-top: 1px solid var(--line);
}
.service:first-of-type { border-top: 0; }
.service:nth-child(even) .service__media { order: -1; }
.service__media img {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
}
.service h3 { margin-bottom: .75rem; }
.service p { font-size: 1rem; }
/* Stichworte als ruhige Aufzählung statt Pillen */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .6rem;
  margin-top: 1.15rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--line);
}
.tag {
  font-size: .89rem;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
}
.tag:not(:last-child)::after {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line-strong);
  margin-left: .6rem;
}
.service__cta { margin-top: 1.35rem; }

/* ---------- 11. Galerie / Referenzen ---------- */
/* Filter als ruhige Textzeile statt bunter Buttons */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.35rem;
  align-items: baseline;
  margin-bottom: 1.75rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.filter {
  font-size: .96rem;
  font-weight: 500;
  color: var(--ink-mute);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: .15rem 0;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}
.filter:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.filter[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 700;
  border-bottom-color: var(--green-700);
}

.gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 860px) { .gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 520px) { .gallery--3 { grid-template-columns: 1fr !important; } }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(1.5rem, 1rem + 1.6vw, 2.6rem) clamp(1rem, .6rem + 1.2vw, 1.8rem);
}
.shot {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.shot__btn {
  display: block;
  padding: 0;
  border: 0;
  background: var(--paper-4);
  cursor: zoom-in;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
}
.shot__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}
.shot__btn:hover img { transform: scale(1.02); }
.shot figcaption { padding: .75rem 0 0; font-size: .9rem; }
.shot__place {
  display: block;
  font-weight: 700;
  color: var(--green-700);
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: .2rem;
}
.shot__desc { color: var(--ink-soft); line-height: 1.45; }
.gallery-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--ink-mute);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10,20,15,.93);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 3rem);
}
.lightbox[open],
.lightbox.is-open { display: flex; }
.lightbox__inner { max-width: min(900px, 100%); text-align: center; }
.lightbox__img {
  max-width: 100%;
  max-height: 72vh;
  margin-inline: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  object-fit: contain;
}
.lightbox__caption {
  margin-top: 1rem;
  color: rgba(255,255,255,.9);
  font-size: .95rem;
}
.lightbox__caption strong { color: #fff; display: block; margin-bottom: .2rem; }
.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255,255,255,.24); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ---------- 12. Zitat ---------- */
.quote {
  border-left: 3px solid var(--green-700);
  padding-left: clamp(1.25rem, .8rem + 1.5vw, 2rem);
}
.quote p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.4;
  color: var(--ink);
}
.quote cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: .92rem;
  font-weight: 650;
  color: var(--ink-mute);
}

/* ---------- 13. Zeitstrahl ---------- */
.timeline { display: grid; gap: 0; margin-top: 1rem; }
.tl-item {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: clamp(1rem, .6rem + 1vw, 2rem);
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
}
.tl-item:first-child { border-top: 0; padding-top: 0; }
.tl-year {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--brown);
  line-height: 1.2;
}
.tl-item h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.tl-item p { font-size: .98rem; }

/* ---------- 14. Kontakt ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}

.info-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 1rem + 1vw, 2rem);
}
.info-card + .info-card { margin-top: 1.25rem; }
.info-card h3 { font-size: 1.2rem; margin-bottom: 1rem; }

.info-list { display: grid; gap: 1.05rem; }
.info-list li { display: flex; gap: .85rem; align-items: flex-start; }
.info-list__icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green-700);
  display: grid;
  place-items: center;
}
.info-list__icon svg { width: 17px; height: 17px; color: #fff; }
.info-list__label {
  display: block;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
  margin-bottom: .1rem;
}
.info-list__value { font-size: 1.05rem; color: var(--ink); font-weight: 600; }
.info-list__value a { color: var(--ink); text-decoration: none; }
.info-list__value a:hover { color: var(--green-700); text-decoration: underline; }
.info-list small { display: block; font-weight: 400; font-size: .88rem; color: var(--ink-mute); }

.person {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-block: .85rem;
  border-top: 1px solid var(--line);
}
.person:first-of-type { border-top: 0; }
.person__avatar {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--green-700);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
}
.person__name { font-weight: 700; color: var(--ink); }
.person__role { font-size: .89rem; color: var(--ink-mute); }
.person__mail { font-size: .89rem; }

/* Formular */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 1rem + 1.5vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .88rem; font-weight: 650; color: var(--ink); }
.field .req { color: var(--green-700); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .75rem .85rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-2);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .15s ease, background-color .15s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--green-600);
  background: #fff;
  outline: none;
}
.field input::placeholder,
.field textarea::placeholder { color: #9AA39C; }

.consent {
  grid-column: 1 / -1;
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .92rem;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem 1rem;
}
.consent input { width: 18px; height: 18px; margin-top: .18rem; flex: none; accent-color: var(--green-700); }

.form-note {
  grid-column: 1 / -1;
  font-size: .85rem;
  color: var(--ink-mute);
}

/* Fehlermeldung über dem Formular.
   Standardmäßig ausgeblendet. kontakt.php leitet bei einem Fehler auf
   kontakt.html?fehler=1#fehler zurück – die Raute macht den Kasten über
   :target sichtbar, ganz ohne JavaScript. main.js blendet ihn zusätzlich
   ein, falls der Anker beim Zurückspringen verloren geht.
   Rot ist die einzige Farbe außerhalb der Palette: eine Fehlermeldung in
   Hausgrün würde als normaler Hinweis gelesen. */
.form-alert {
  display: none;
  margin-bottom: 1.75rem;
  padding: .95rem 1.1rem;
  border: 1.5px solid #C2453B;
  border-left-width: 4px;
  border-radius: var(--radius);
  background: #FCF2F1;
  color: #8E2F27;
  font-size: .95rem;
  scroll-margin-top: 110px;
}
.form-alert:target,
.form-alert.is-visible { display: block; }
.form-alert strong { display: block; margin-bottom: .2rem; color: #7A2822; }
.form-alert a { color: inherit; }

/* Honeypot: für Menschen unsichtbar, für Bots ein ganz normales Feld.
   Kein display:none – manche Bots überspringen genau das. Stattdessen aus
   dem sichtbaren Bereich geschoben; screenreader-tauglich muss es nicht
   sein, das Feld trägt aria-hidden und tabindex="-1". */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Karte */
.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  /* Die Skizze ist 1536 px breit, darüber hinaus wird sie nicht vergrößert */
  max-width: 1000px;
  margin-inline: auto;
}
.map-frame img {
  width: 100%;
  height: auto;
  display: block;
}
/* Die Skizze lässt sich antippen und öffnet sich groß in der Lightbox.
   Auf dem Handy sind die Straßennamen sonst zu klein. */
.map-frame__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.map-frame__bar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: #fff;
  border-top: 1px solid var(--line);
  font-size: .95rem;
}

/* ---------- 15. CTA-Band ---------- */
.cta-band {
  /* derselbe Grünton wie die Linie im Kopfbereich, aus dem Logo */
  background: var(--color-logo-bar);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta-band .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  align-items: center;
  padding-block: clamp(3.25rem, 2.2rem + 3.5vw, 5rem);
}
.cta-band h2 { color: #fff; }
.cta-band p { margin-top: .85rem; color: rgba(255,255,255,.95); max-width: 40rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- 16. Fußzeile ---------- */
.site-footer {
  /* derselbe Grünton wie die Linie im Kopfbereich, aus dem Logo.
     Weil dieser Ton heller ist als das frühere Dunkelgrün, sind die
     Textfarben hier bewusst kräftiger gesetzt. */
  background: var(--color-logo-bar);
  color: rgba(255,255,255,.92);
  font-size: .95rem;
  padding-top: clamp(2.75rem, 2rem + 3vw, 4.25rem);
}
.site-footer h4 {
  color: #fff;
  font-size: .82rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  font-weight: 700;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 1rem + 3vw, 3rem);
  padding-bottom: 2.75rem;
}
.footer-grid ul { display: grid; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.footer-bottom ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: rgba(255,255,255,.95); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-brand p { margin-top: 1rem; max-width: 26rem; font-size: .95rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.3);
  padding-block: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: .87rem;
  color: rgba(255,255,255,.85);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* ---------- 17. Mobile Aktionsleiste ---------- */
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(20,30,25,.1);
}
.action-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem .5rem;
  padding-bottom: max(.9rem, env(safe-area-inset-bottom));
  font-size: .95rem;
  font-weight: 650;
  text-decoration: none;
  background: #fff;
  color: var(--green-900);
}
.action-bar a.is-primary { background: var(--green-700); color: #fff; }
.action-bar svg { width: 17px; height: 17px; flex: none; }

/* ---------- 18. Rechtstexte ---------- */
.prose { max-width: 44rem; }
.prose h2 {
  font-size: clamp(1.3rem, 1.15rem + .7vw, 1.65rem);
  margin-top: 2.5rem;
  margin-bottom: .8rem;
}
.prose h3 { margin-top: 1.75rem; margin-bottom: .5rem; font-size: 1.15rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { margin-bottom: 1rem; }
.prose ul { margin: 0 0 1rem 1.15rem; }
.prose li { margin-bottom: .35rem; }
.prose address { font-style: normal; line-height: 1.8; }

/* ---------- 19. Responsive ---------- */
@media (max-width: 1180px) {
  .nav__link { font-size: .92rem; }
  .nav__link + .nav__link { margin-left: 1rem; }
  .brand__logo { --logo-h: 147px; }
  .header-actions .btn--phone { display: none; }
}

@media (max-width: 960px) {
  html { scroll-padding-top: 80px; }

  :root {
    --header-h:          96px;
    --header-h-scrolled: 80px;
    --topbar-h:          36px;
  }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    padding: .5rem var(--gutter) 1.25rem;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
  }
  .nav.is-open { display: flex; }
  .nav__link {
    padding: .9rem .25rem;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--line);
  }
  .nav__link + .nav__link { margin-left: 0; }
  .nav__link[aria-current="page"] { color: var(--green-700); }
  /* Mobil bleibt das Menue eine reine Seitenliste: der Angebots-Knopf
     entfaellt hier, damit die Liste nicht in den Inhalt darunter laeuft. */
  .nav__cta { display: none; }

  .site-header .wrap { position: relative; }
  .brand__logo { --logo-h: 111px; }
  .brand__logo--footer { --logo-h: 150px; }
  .site-header.is-scrolled .brand__logo { --logo-h: 89px; }
  .header-actions { display: flex; }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn--desktop { display: none; }

  /* Mobil steht zuerst die Botschaft, das Bild folgt darunter. Der
     Knopfbereich entfaellt: auf dem kleinen Schirm sollen Spruch und Bild
     ohne Ablenkung zusammen im Blick stehen. */
  .hero { padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
  .hero .btn-row { display: none; }
  .hero__grid { grid-template-columns: 1fr; gap: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); }
  .hero__placeholder { aspect-ratio: 4 / 3; }

  .split,
  .split--wide-text,
  .service,
  .contact-grid { grid-template-columns: 1fr; }
  .service:nth-child(even) .service__media { order: 0; }
  .service__media { max-width: 560px; }

  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); --stat-gap: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
  /* Trennlinie nur zwischen den Spalten, nicht am Zeilenanfang */
  .stat:nth-child(even) + .stat::before { content: none; }

  .cta-band .wrap { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Die feste Leiste am unteren Rand wird nicht mehr eingeblendet. Die
     Auszeichnung bleibt in den Seiten stehen, damit sie sich mit dieser
     einen Regel wieder aktivieren laesst. */

  .topbar__list--secondary { display: none; }
}

@media (max-width: 680px) {
  body { font-size: 1.02rem; }

  .hero__placeholder { aspect-ratio: 16 / 11; }

  .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .shot figcaption { padding: .65rem .75rem .85rem; font-size: .85rem; }
  .steps { grid-template-columns: 1fr; }
  .step { padding-top: 2.35rem; }
  .form-grid { grid-template-columns: 1fr; }
  .tl-item { grid-template-columns: 1fr; gap: .35rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .group-label { flex-direction: column; gap: .3rem; }
  .group-label p { margin-left: 0; text-align: left; }
  .btn-row .btn { width: 100%; }
  .brand__logo { --logo-h: 104px; }
  .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__nav--prev { left: .35rem; }
  .lightbox__nav--next { right: .35rem; }
  .map-frame__bar { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .brand__logo { --logo-h: 92px; }
  .stats__grid { grid-template-columns: 1fr; }
  .stat + .stat::before { content: none !important; }
  .stat + .stat { padding-top: 1.5rem; border-top: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .site-header, .topbar, .action-bar, .cta-band, .lightbox { display: none !important; }
  body { color: #000; }
}