/* =========================================================================
   IB Brehse – Projekt & Energietechnik
   Design-System · alle Seiten nutzen ausschliesslich diese Datei
   -------------------------------------------------------------------------
   Aufbau:
    1  Schrift
    2  Tokens
    3  Reset & Basis
    4  Layout
    5  Kopfbereich & Navigation
    6  Buttons
    7  Hero
    8  Sektionsköpfe
    9  Karten
   10  Prozess-Stepper
   11  Listen (Checkliste, Spec, Tags)
   12  Textblöcke & Zitate
   13  Referenzkarte & Bildslots
   14  CTA-Band
   15  Formular
   16  Fußbereich
   17  Mobile Kontaktleiste
   18  Fließtextseiten (Impressum/Datenschutz)
   19  Einblenden & Bewegungsreduktion
   20  Druck
   ========================================================================= */


/* == 1  Schrift ==========================================================
   Die Wortmarke des Logos ist in Open Sans ExtraBold gesetzt. Seit dieser
   Fassung läuft die ganze Seite in Open Sans – dieselbe Schrift wie das Logo.

   Beide Dateien liegen LOKAL in assets/fonts/ und sind Variable Fonts: eine
   Datei deckt den gesamten Strichstärkenbereich 300–800 ab. Es wird nichts
   von Google geladen, es entsteht kein externer Request und damit auch keine
   Einwilligungspflicht.

   Die Aufteilung in zwei Dateien ist Absicht: „latin" (48 KB) trägt den
   deutschen Grundwortschatz und lädt sofort; „latin-ext" (35 KB) enthält
   osteuropäische Zeichen und wird über unicode-range nur dann geladen, wenn
   ein solches Zeichen auf der Seite tatsächlich vorkommt.

   font-display: swap – der Text ist ab der ersten Millisekunde lesbar und
   wird nachträglich ausgetauscht. Nie „block": ein unsichtbarer Text ist
   schlimmer als ein kurz umspringender.                                     */

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-latin-ext.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}


/* == 2  Tokens =========================================================== */

:root {
  /* --- Markenfarben, abgeleitet aus dem Logo ---------------------------- */
  --accent:       #87BC22;   /* Logo-Grün, vorderster Balken – nur als Fläche */
  --accent-deep:  #6E9C1B;   /* abgedunkelt für Hover/Aktiv                  */
  --accent-ink:   #4E7A0F;   /* grüne SCHRIFT auf hellem Grund (5,1:1)       */
  --accent-wash:  #F1F7E6;   /* sehr helle grüne Fläche (Hervorhebungsband)  */
  --accent-line:  #D8E7BB;   /* Begrenzung dieser Fläche                     */

  --ink:          #1E1E1E;   /* dunkles Graphit: Fließtext, dunkle Flächen   */
  --ink-soft:     #333333;
  --grey-700:     #595959;   /* Logo-Grau der Wortmarke – Sekundärtext       */
  --grey-500:     #737373;   /* Logo-Grau, mittlerer Balken – nur Grafik     */
  --grey-400:     #A6A6A6;   /* Logo-Grau, hinterer Balken – nur Grafik      */

  /* Für Fließ- und Beschriftungstext wird ausschließlich --grey-700 benutzt.
     --grey-500 erreicht auf dem Off-White nur 4,36:1 und verfehlt damit AA,
     --grey-400 sogar nur 2,4:1. Beide bleiben den Logobalken vorbehalten. */

  /* Neutrale Grauskala. Bewusst OHNE Grünstich: Das Hervorhebungsband ist
     damit die einzige grüne Fläche der Seite und fällt dadurch stärker auf. */
  --paper:        #FFFFFF;
  --paper-2:      #F4F4F4;   /* Wechselflächen, Fußbereich, Kästen           */
  --line:         #E0E0E0;
  --line-strong:  #C6C6C6;
  /* Rahmen von Bedienelementen (Eingabefelder, Schalter). Muss deutlich
     dunkler sein als --line-strong: die WCAG fordert für die Umrandung von
     Bedienelementen 3:1 gegen den Hintergrund. #8C8C8C erreicht 3,4:1,
     --line-strong käme nur auf 1,5:1 und wäre kaum erkennbar. */
  --field-line:   #8C8C8C;

  /* WICHTIG – Kontrastregel für das Grün:
     #87BC22 erreicht auf Weiß nur 2,3:1 und ist als Schriftfarbe unlesbar.
     Gegen --ink erreicht es 7,3:1.
       · grüne Flächen  -> IMMER dunkle Schrift (--ink), niemals weiß
       · grüne Schrift auf Hell -> ausschließlich --accent-ink
       · auf dunklen Flächen darf --accent als Schriftfarbe stehen           */

  /* --- Schrift ---------------------------------------------------------- */
  /* Open Sans ist die Schrift der Wortmarke. Der System-Stack bleibt als
     Rückfallebene stehen: Solange die Schriftdatei lädt – und falls sie
     einmal fehlt – bleibt die Seite vollständig lesbar. */
  --font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* Für Ziffern und Kennungen: Tabellenziffern stehen exakt untereinander.
     Das ist der Unterschied zwischen "verziert" und "notiert". */
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas,
               "Liberation Mono", monospace;

  --fs-h1:    clamp(2rem, 1.35rem + 2.7vw, 3.25rem);
  --fs-h2:    clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  --fs-h3:    clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);
  --fs-lead:  clamp(1.0625rem, 1rem + 0.45vw, 1.25rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.9375rem;
  --fs-mini:  0.8125rem;

  /* --- Abstände (4px-Raster) -------------------------------------------- */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;

  --section-y: clamp(3.5rem, 7vw, 7rem);

  /* --- Maße & Effekte --------------------------------------------------- */
  --container: 1180px;
  --measure: 68ch;
  /* 2px statt 4/6px: 6px wirkt weich und produkthaft, 0px wirkt kalt.
     2px liest sich präzise, ohne hart zu werden. */
  --radius: 2px;
  --radius-lg: 2px;
  --header-h: 4rem;
  --shadow-sm: 0 1px 2px rgba(30, 30, 30, .06), 0 2px 8px rgba(30, 30, 30, .05);
  --shadow-md: 0 2px 4px rgba(30, 30, 30, .06), 0 12px 28px rgba(30, 30, 30, .09);
  /* Nur für den Moment des Überfahrens. Bewusst weich und flach gehalten:
     Die Karte soll sich anheben, nicht schweben. */
  --shadow-lift: 0 1px 2px rgba(30, 30, 30, .05), 0 10px 24px rgba(30, 30, 30, .10);
  --ease: cubic-bezier(.2, .6, .3, 1);
  /* Eigene Kurve nur für die Navigationsschublade. Sie stammt aus dem
     iOS-Vorbild: sehr schneller Antritt, langes weiches Auslaufen. Eine
     Fläche, die von der Seite hereinfährt, wirkt damit geführt statt
     geschoben. Für kurze Übergänge wäre sie zu träge – deshalb bleibt für
     alles Übrige --ease zuständig. */
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
}

@media (min-width: 900px) {
  :root { --header-h: 4.75rem; }
}


/* == 3  Reset & Basis ==================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Platz für die feste Kontaktleiste am unteren Rand.
   Die Grenze muss mit der Navigation übereinstimmen (1024px), nicht mit den
   Layout-Umbrüchen (900px) – siehe Hinweis im Abschnitt Navigation. */
@media (max-width: 1023px) {
  body { padding-bottom: 4.25rem; }
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink);
  /* Deutsche Komposita wie "Betreiberorganisation" oder
     "Datenschutzerklärung" sind länger als ein 320px breites Display.
     break-word greift ausschliesslich dann, wenn das Wort sonst aus dem
     Bild laufen würde – bei normaler Breite ändert sich nichts. */
  overflow-wrap: break-word;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }

p, li, dd, address { text-wrap: pretty; overflow-wrap: break-word; }
p + p { margin-top: var(--s4); }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

ul, ol { padding-left: 1.15em; }

strong { font-weight: 700; }

::selection { background: var(--accent); color: var(--ink); }

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

/* Auf der dunklen CTA-Fläche muss der Fokusring hell sein, sonst verschwindet
   er im Hintergrund. Der Fußbereich ist hell und behält den Standardring. */
.on-dark :focus-visible,
.cta-band :focus-visible { outline-color: var(--accent); }

/* Nur für Screenreader */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sprunglink */
/* Sprunglink: für Sehende unsichtbar, bis er per Tabulator angesteuert wird.
   position: fixed statt absolute – dadurch erscheint er zuverlässig im
   sichtbaren Bereich, auch wenn die Seite bereits gescrollt ist. */
.skip-link {
  position: fixed; top: -6rem; left: var(--s4); z-index: 200;
  background: var(--accent); color: var(--ink);
  padding: var(--s3) var(--s5);
  font-weight: 700; text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top .15s var(--ease);
}
.skip-link:focus { top: 0; color: var(--ink); }


/* == 4  Layout =========================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s5);
}
@media (min-width: 640px) { .container { padding-inline: var(--s6); } }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
/* Die Wechselfläche bekommt Haarlinien an Ober- und Unterkante. Ohne sie
   franst der Farbwechsel aus und die Bänder wirken zufällig statt gesetzt. */
.section--alt {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section--line { border-top: 1px solid var(--line); }

/* Hervorhebungsband für die Positionierungs-Abschnitte.
   Bewusst hell mit dunkler Schrift: Eine grün hinterlegte Fläche hebt den
   Abschnitt genauso deutlich heraus wie eine dunkle, bleibt aber ruhig und
   ist auf jedem Bildschirm gut lesbar. */
.section--accent {
  background: var(--accent-wash);
  border-top: 1px solid var(--accent-line);
  border-bottom: 1px solid var(--accent-line);
}

main { display: block; }

/* Zweispaltiger Block: Text + Nebeninhalt */
.split {
  display: grid;
  gap: var(--s6);
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 0.95fr; gap: var(--s8); align-items: start; }
  .split--wide-left { grid-template-columns: 1.35fr 1fr; }
  /* Etwas breiter als --wide-left. Der Wert ist nicht frei gewählt: Bei den
     Standardverhältnissen läuft der Einleitungstext des Energie-Abschnitts
     über sieben Zeilen, deren rechte Kante monoton abfällt – im Satzbild
     eine „Treppe". Bei rund 640px Spaltenbreite setzt derselbe Text in fünf
     nahezu gleich langen Zeilen (Restausgleich 37px statt 231px).

     Das ist auf diesen Text abgestimmt. Wird er wesentlich geändert, muss
     der Wert nachgemessen werden – deutsche Komposita lassen sich ohne
     Silbentrennung nicht zuverlässig umbrechen, und die Browser-Trennung
     (hyphens: auto) greift hier mangels Wörterbuch nicht. */
  .split--wide-text { grid-template-columns: 1.55fr 1fr; }
  .split--sticky > :last-child { position: sticky; top: calc(var(--header-h) + var(--s5)); }
}

.grid { display: grid; gap: var(--s5); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

/* auto-FILL statt auto-fit: leere Spalten bleiben stehen.
   Nur für Raster, die sich erst über die Zeit füllen – etwa die
   Referenzübersicht. Dort liegt anfangs eine einzige Kachel; mit auto-fit
   klappen die leeren Spalten ein und die Kachel läuft über die volle
   Breite, was wie ein Fehler aussieht. Mit auto-fill behält sie ihre
   Spaltenbreite und das Raster wächst sichtbar von links nach rechts. */
.grid--fill { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }

.stack > * + * { margin-top: var(--s4); }
.stack-lg > * + * { margin-top: var(--s6); }

.measure { max-width: var(--measure); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--grey-700);
  max-width: var(--measure);
}


/* == 5  Kopfbereich & Navigation ========================================= */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s var(--ease);
}
.site-header[data-scrolled="true"] { box-shadow: var(--shadow-sm); }

.site-header__inner {
  display: flex; align-items: center; gap: var(--s5);
  min-height: var(--header-h);
}

/* --- Logo: Bildmarke als SVG + Wortmarke als echter Text ---------------- */
.brandmark {
  display: inline-flex; align-items: center; gap: .625rem;
  text-decoration: none; color: inherit; flex-shrink: 0;
}
.brandmark__mark { width: auto; height: 2.125rem; }
@media (min-width: 900px) { .brandmark__mark { height: 2.5rem; } }

.brandmark__bar-1 { fill: var(--grey-400); }
.brandmark__bar-2 { fill: var(--grey-500); }
.brandmark__bar-3 { fill: var(--accent); }

.brandmark__text { display: flex; flex-direction: column; line-height: 1.1; }
.brandmark__name {
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--grey-700);
}
.brandmark__tag {
  font-weight: 700;
  font-size: .6875rem;
  letter-spacing: .01em;
  color: var(--grey-700);
}
@media (min-width: 900px) {
  .brandmark__name { font-size: 1.375rem; }
  .brandmark__tag  { font-size: .8125rem; }
}
/* Helle Variante für dunkle Flächen */
.brandmark--light .brandmark__bar-1 { fill: #6E6E6E; }
.brandmark--light .brandmark__bar-2 { fill: #A0A0A0; }
.brandmark--light .brandmark__name  { color: #FFFFFF; }
.brandmark--light .brandmark__tag   { color: #A9AEA3; }

/* --- Navigation --------------------------------------------------------- */
.nav { margin-left: auto; }

.nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: var(--s2);
}

.nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  font: inherit; font-size: var(--fs-small); font-weight: 600;
  color: var(--ink); text-decoration: none;
  background: none; border: 0; cursor: pointer;
  padding: var(--s2) var(--s3);
  border-radius: var(--radius);
  position: relative;
}
.nav__link:hover { color: var(--accent-ink); background: var(--paper-2); }

/* Aktive Seite: grüner Balken – greift das Logo-Motiv auf */
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: .1rem;
  height: 3px; background: var(--accent);
}

.nav__caret { width: .6rem; height: .6rem; transition: transform .2s var(--ease); }
.nav__item--has-sub[data-open="true"] .nav__caret { transform: rotate(180deg); }

.nav__sub {
  list-style: none; margin: 0; padding: var(--s2);
}

.nav__sub-link {
  display: block;
  padding: var(--s3);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  border-left: 3px solid transparent;
}
.nav__sub-link span {
  display: block;
  font-weight: 400;
  font-size: var(--fs-mini);
  color: var(--grey-700);
  margin-top: .1rem;
}
.nav__sub-link:hover,
.nav__sub-link[aria-current="page"] {
  background: var(--paper-2);
  border-left-color: var(--accent);
  color: var(--ink);
}

.nav__cta { display: none; }

/* Beide Rufe-zur-Tat sind grundsätzlich aus und werden je Breite eingeschaltet.
   Die Auswahl muss .site-header enthalten: sonst gewinnt das später notierte
   .btn { display: inline-flex } bei gleicher Spezifität. */
.site-header .header-cta { display: none; }

.nav-toggle {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--s2);
  font: inherit; font-size: var(--fs-small); font-weight: 700;
  background: none; border: 1.5px solid var(--field-line);
  color: var(--ink);
  padding: .5rem .75rem;
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 18px; height: 12px; }
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--ink); transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span    { top: 5px; }
.nav-toggle__bars::after  { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span    { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-5px) rotate(-45deg); }

/* =========================================================================
   Umschaltpunkt der Navigation: 1024px – bewusst NICHT 900px.

   Bei 900px passen die fünf Menüpunkte und die Schaltfläche „Projekt
   besprechen" nicht nebeneinander in den Kopfbereich; die Seite wurde dadurch
   927px breit und liess sich seitlich verschieben. Die Layout-Umbrüche
   (zweispaltige Blöcke, waagerechter Stepper, Fußbereich) bleiben bei 900px –
   nur die Navigation schaltet später um.

   Wer den Wert ändert, muss ihn an vier Stellen angleichen:
     · dieser Block            (max-width: 1023px)
     · der Desktop-Block       (min-width: 1024px)
     · .callbar                (min-width: 1024px)
     · body { padding-bottom } (max-width: 1023px)
     · desktop() in main.js
   ========================================================================= */

/* --- unter 1024px: Schublade --------------------------------------------- */
@media (max-width: 1023px) {
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding: var(--s5) var(--s5) var(--s8);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s var(--ease-drawer), visibility .3s;
    z-index: 99;
  }
  body.nav-open .nav { transform: translateX(0); visibility: visible; }
  body.nav-open { overflow: hidden; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .nav__item { border-bottom: 1px solid var(--line); }

  .nav__link {
    width: 100%; justify-content: space-between;
    padding: var(--s4) var(--s2);
    font-size: 1.0625rem;
  }
  .nav__link[aria-current="page"]::after { display: none; }
  .nav__link[aria-current="page"] {
    border-left: 3px solid var(--accent);
    padding-left: var(--s3);
    background: var(--accent-wash);
  }

  /* Die drei Leistungsseiten stehen auf dem Handy offen –
     sie sind der Kern der Seite und sollen nicht hinter einem Tap liegen. */
  .nav__item--has-sub > .nav__link { pointer-events: none; color: var(--grey-700); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .06em; padding-bottom: var(--s1); }
  .nav__caret { display: none; }
  .nav__sub { padding: 0 0 var(--s3) 0; }
  .nav__sub-link { padding: var(--s3) var(--s2); border-left-width: 3px; }

  .nav__cta { display: block; margin-top: var(--s6); }
  .nav__cta .btn { width: 100%; }

  .nav__contact {
    margin-top: var(--s6);
    padding-top: var(--s5);
    border-top: 1px solid var(--line);
    font-size: var(--fs-small);
  }
  .nav__contact a { display: block; padding: var(--s2) 0; font-weight: 600; }
}

/* --- ab 1024px: Leiste mit Aufklappmenü ---------------------------------- */
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .nav__contact { display: none; }

  .nav__item--has-sub { position: relative; }

  .nav__sub {
    position: absolute; top: calc(100% + .5rem); left: -.5rem;
    width: 21rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(-.35rem);
    transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  }
  .nav__item--has-sub:hover .nav__sub,
  .nav__item--has-sub:focus-within .nav__sub,
  .nav__item--has-sub[data-open="true"] .nav__sub {
    opacity: 1; visibility: visible; transform: translateY(0);
  }

  .site-header .nav__list > li:last-child { margin-left: var(--s3); }
  .site-header .header-cta { display: inline-flex; flex-shrink: 0; }
  .nav__link { white-space: nowrap; }
}


/* == 6  Buttons ========================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: var(--fs-small); font-weight: 700; line-height: 1.2;
  padding: .8125rem 1.375rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease), transform .16s var(--ease),
              box-shadow .16s var(--ease);
}
.btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* Grüne Fläche trägt IMMER dunkle Schrift (7,3:1) */
.btn--primary { background: var(--accent); color: var(--ink); border-color: var(--accent); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }

.btn--on-dark { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.4); }
.btn--on-dark:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--ink); }

.btn--lg { font-size: 1rem; padding: .9375rem 1.625rem; }

/* --- Anheben beim Überfahren ---------------------------------------------
   Nur auf Geräten mit echtem Zeigegerät. Auf einem Touchscreen löst das
   Antippen ebenfalls :hover aus – und der Zustand bleibt danach hängen, bis
   irgendwo anders hingetippt wird. Eine dauerhaft angehobene Schaltfläche
   sieht aus wie ein Fehler.

   Farbwechsel (--ghost, --on-dark) stehen bewusst NICHT in diesem Block:
   Eine kurz andersfarbige Fläche nach dem Antippen ist unauffällig und
   bestätigt sogar die Berührung.                                          */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    background: var(--accent-deep); border-color: var(--accent-deep); color: var(--ink);
    transform: translateY(-1px);
    /* Der Schatten trägt die Signalfarbe statt Schwarz: Die Schaltfläche wirkt
       dadurch angehoben, ohne dass ein grauer Rand unter ihr entsteht. */
    box-shadow: 0 4px 14px rgba(110, 156, 27, .30);
  }

  /* Der Pfeil wandert ein Stück nach rechts – dieselbe Bewegung wie beim
     Textlink, damit „weiter" überall gleich aussieht. */
  .btn svg { transition: transform .16s var(--ease); }
  .btn:hover svg { transform: translateX(2px); }
}

/* --- Druckreaktion -------------------------------------------------------
   MUSS nach allen :hover-Regeln stehen. .btn:active und .btn--primary:hover
   haben dieselbe Spezifität (0,2,0); bei Gleichstand gewinnt die zuletzt
   notierte Regel. Stand :active vorher, hob :hover die Schaltfläche beim
   Drücken weiter an – die wichtigste Schaltfläche der Seite reagierte am
   Rechner also überhaupt nicht auf den Klick.

   scale statt translateY: Ein Stauchen liest sich als „gedrückt", ein
   Versatz nach unten als Verrutschen. 0.97 ist die kleinste Stufe, die man
   noch bemerkt.                                                           */
.btn:active,
.btn--primary:active {
  transform: scale(.97);
  box-shadow: none;
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
@media (max-width: 480px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

/* Textlink mit Pfeil */
.arrow-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: var(--fs-small);
  text-decoration: none;
  color: var(--accent-ink);
}
.arrow-link svg { width: 1rem; height: 1rem; transition: transform .16s var(--ease); }
.arrow-link:hover { color: var(--ink); }
/* Bewegung nur mit echtem Zeigegerät – siehe Begründung bei den Schaltflächen. */
@media (hover: hover) and (pointer: fine) {
  .arrow-link:hover svg { transform: translateX(3px); }
}


/* == 7  Hero ============================================================= */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 5rem);
}

/* Ebene 1: Farbfläche. Ein sehr flacher grüner Anlauf von oben links, der
   nach rechts in neutrales Grau kippt. Er gibt dem Kopf der Seite Wärme,
   ohne dass eine erkennbar „bunte" Fläche entsteht. */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 0% 0%, var(--accent-wash) 0%, rgba(241,247,230,0) 58%),
    linear-gradient(90deg, rgba(255,255,255,0) 50%, var(--paper-2) 100%);
  pointer-events: none;
}

.hero > * { position: relative; z-index: 1; }

.hero__motif {
  position: absolute; right: -2rem; bottom: -1rem;
  width: min(22rem, 34vw); height: auto;
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 1099px) { .hero__motif { display: none; } }

.hero__inner { max-width: 54rem; }

.hero h1 { margin-bottom: var(--s5); }

.hero__lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-soft); max-width: 46rem; }
.hero__lead + .hero__lead { margin-top: var(--s4); }

.hero .btn-row { margin-top: var(--s6); }

/* --- Abschlussband des Hero ---------------------------------------------
   Schwerpunkte links, Zulassungszeichen rechts, dazwischen der freie Raum.
   Die Trennlinie sitzt auf dem Band selbst und nicht mehr auf der
   Schwerpunktzeile – sonst liefe sie nur über die halbe Breite.

   Umbruch bei 40rem statt an einem der üblichen Haltepunkte: Genau dort
   wird es für Schwerpunkte und Zeichen nebeneinander zu eng. Ein Wert, der
   sich am Inhalt orientiert, nicht am Gerät.                              */
.hero__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  gap: var(--s5) var(--s6);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.hero__pillars {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
  list-style: none; padding-left: 0; margin: 0;
  font-size: var(--fs-small); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--grey-700);
}
.hero__pillars li { display: flex; align-items: center; gap: var(--s4); }
.hero__pillars li:not(:last-child)::after {
  content: ""; width: 5px; height: 5px; background: var(--accent);
}

/* Die Zeichen stehen hier ohne Kasten – der Hero ist bereits eine Fläche,
   ein Rahmen darin würde sie zum Aufkleber machen. Die Trennlinie zwischen
   den beiden Zeichen bleibt: Ohne sie verschmelzen zwei fremde Logos. */
.hero__seals { display: flex; align-items: center; gap: var(--s4); }
.hero__seals img { width: auto; height: 2.5rem; flex-shrink: 0; }
.hero__seals img + img {
  padding-left: var(--s4);
  border-left: 1px solid var(--line-strong);
}

@media (max-width: 40rem) {
  .hero__foot { justify-content: flex-start; }
}


/* Zulassungszeichen (Energieeffizienz-Experten des Bundes).
   Ein amtlich vergebenes Zeichen ist das stärkste Vertrauensmerkmal, das
   diese Seite besitzt. Es steht deshalb immer abgesetzt und nie mitten in
   einer Aufzählung, wo es wie ein weiterer Stichpunkt wirken würde.

   Eigene Klasse, weil dasselbe Zeichen an mehreren Stellen gebraucht wird:
   auf der Energieseite und auf „Über IB Brehse". Im Hero steht es dagegen
   ohne Kasten – dort greift .hero__seals. */
.seal {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Mehrere Zeichen stehen in einer eigenen Reihe nebeneinander und werden
   durch eine Haarlinie getrennt. Ohne die Linie verschmelzen zwei fremde
   Logos zu einer einzigen unleserlichen Grafik.

   Alle Zeichen laufen auf dieselbe Höhe (2.5rem), nicht auf dieselbe
   Breite: Fremdlogos haben sehr verschiedene Seitenverhältnisse, und nur
   gleiche Höhe lässt sie als gleichwertige Reihe erscheinen. */
.seal__marks {
  display: flex; align-items: center; gap: var(--s4);
  flex-shrink: 0;
}
.seal__marks img { width: auto; height: 2.5rem; flex-shrink: 0; }
.seal__marks img + img {
  padding-left: var(--s4);
  border-left: 1px solid var(--line);
}

/* Optischer Ausgleich für runde Zeichen.
   Ein Kreis von 40px wirkt neben einem 40px hohen Rechteck deutlich
   kleiner – seine Fläche läuft an allen vier Ecken aus. 52px stellen die
   beiden Zeichen auf dieselbe gefühlte Größe. Das ist keine Willkür,
   sondern dieselbe Korrektur, die Schriftgestalter zwischen „O" und „H"
   anwenden. */
.seal__mark--round { height: 3.25rem !important; }

.seal > img { width: auto; height: 2.5rem; flex-shrink: 0; }
.seal span { font-size: var(--fs-mini); line-height: 1.45; color: var(--grey-700); }

/* Kompakter Kopf für Unterseiten.
   Dieselbe Bildsprache wie der Hero der Startseite, nur flacher: grüner
   Anlauf von links oben. Dadurch erkennt man beim Seitenwechsel sofort,
   dass man dieselbe Website nicht verlassen hat. */
.pagehead {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.pagehead::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(110% 120% at 0% 0%, var(--accent-wash) 0%, rgba(241,247,230,0) 62%);
  pointer-events: none;
}
.pagehead > * { position: relative; z-index: 1; }

.pagehead__inner { max-width: 52rem; }
.pagehead h1 { margin-bottom: var(--s5); }

.breadcrumb {
  font-family: var(--font-mono);
  display: flex; flex-wrap: wrap; gap: .4rem;
  list-style: none; padding: 0; margin: 0 0 var(--s4);
  font-size: var(--fs-mini); color: var(--grey-700);
}
.breadcrumb a { color: var(--grey-700); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-ink); text-decoration: underline; }
.breadcrumb li::after { content: "›"; margin-left: .4rem; color: var(--line-strong); }
.breadcrumb li:last-child::after { content: none; }


/* == 8  Sektionsköpfe ==================================================== */

.section-head { max-width: var(--measure); margin-bottom: var(--s7); }
.section-head--wide { max-width: 58rem; }
.section-head > * + * { margin-top: var(--s4); }

/* Ab 1000px rutscht die Beschriftung in eine eigene linke Spalte. Dadurch
   bekommt der Blick eine feste Kante und die Seite wirkt sortiert statt
   gestapelt. Braucht keine Änderung am HTML – der Kicker ist bereits das
   erste Kind und wird per Raster nach links gesetzt. */
@media (min-width: 1000px) {
  .section-head,
  .section-head--wide {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    column-gap: var(--s7);
    max-width: 64rem;
  }
  .section-head .kicker {
    grid-column: 1;
    grid-row: 1 / span 20;
    align-self: start;
    margin-bottom: 0 !important;
    /* Der Balken steht jetzt über der Beschriftung statt daneben */
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    line-height: 1.4;
  }
  .section-head > :not(.kicker) { grid-column: 2; }
  .section-head > :not(.kicker) + :not(.kicker) { margin-top: var(--s4); }
}

.kicker {
  display: flex; align-items: center; gap: .6rem;
  font-size: var(--fs-mini); font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--s3) !important;
}
.kicker::before {
  content: ""; width: 1.5rem; height: 3px; background: var(--accent); flex-shrink: 0;
}

/* Aufsteigendes Balkenmotiv als Trenner */
.motif {
  display: block; width: 2.75rem; height: auto; margin-bottom: var(--s5);
}
.motif .motif__b1 { fill: var(--grey-400); }
.motif .motif__b2 { fill: var(--grey-500); }
.motif .motif__b3 { fill: var(--accent); }


/* == 9  Karten =========================================================== */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  /* Mehr Innenabstand: lässt den Text atmen, ohne die Karte zu vergrössern */
  padding: var(--s6) var(--s6) var(--s7);
  display: flex; flex-direction: column;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.section--alt .card { background: var(--paper); }

.card > * + * { margin-top: var(--s3); }
.card p { color: var(--grey-700); font-size: var(--fs-small); }
.card .arrow-link { margin-top: auto; padding-top: var(--s5); }

/* Leistungskarte mit Nummer.
   Die Karte hebt sich beim Überfahren um 3px an und bekommt einen weichen
   Schatten. Das ist die einzige Stelle mit einer solchen Bewegung – sie
   markiert genau die drei Elemente, die tatsächlich weiterführen. */
.card--service {
  position: relative;
  border-top: 3px solid var(--line-strong);
  transition: border-color .16s var(--ease), background-color .16s var(--ease),
              transform .18s var(--ease), box-shadow .18s var(--ease);
}
/* :focus-within steht bewusst AUSSERHALB des Zeigegerät-Filters: Wer die
   Seite mit der Tastatur bedient, muss auf jedem Gerät sehen, wo er steht.
   Nur der Mauszeiger-Zustand wird gefiltert – auf dem Touchscreen bliebe er
   nach dem Antippen sonst hängen. */
.card--service:focus-within {
  border-color: var(--line-strong);
  border-top-color: var(--accent);
  background: var(--paper);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
@media (hover: hover) and (pointer: fine) {
  .card--service:hover {
    border-color: var(--line-strong);
    border-top-color: var(--accent);
    background: var(--paper);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
  }
}

.card__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-mini); font-weight: 800;
  letter-spacing: .12em;
  color: var(--grey-700);
  margin-bottom: var(--s2) !important;
}
.card--service:focus-within .card__num { color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) {
  .card--service:hover .card__num { color: var(--accent-ink); }
}

/* Kopfzeile der Leistungskarte: Nummer links, Sinnbild rechts.
   Die drei Sinnbilder sind im selben Duktus gezeichnet wie die übrigen
   Zeichen der Seite (20×20, Strichstärke 1.6, runde Enden) – deshalb
   eigene SVG statt einer fremden Icon-Familie, die sich sichtbar anders
   verhält. Sie sind rein schmückend und für Screenreader ausgeblendet;
   die Karte trägt ihre Bedeutung im Titel. */
/* margin-bottom bleibt klein: Die Karte bringt über `.card > * + *` bereits
   12px mit. Zusammen ergibt das 20px zum Titel – etwas mehr Luft als
   zwischen Titel und Fließtext (12px), damit die Kopfzeile als eigene
   Einheit liest. */
.card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s2);
}
.card__head .card__num { margin-bottom: 0 !important; padding-top: .55rem; }

.card__icon {
  flex-shrink: 0;
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  color: var(--accent-ink);
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease);
}
/* 26 von 48 px Kantenlänge. Bei 24 px wirkt das Zeichen im Feld verloren,
   ab 30 px klebt es am Rahmen. */
.card__icon svg { width: 1.625rem; height: 1.625rem; }
/* Beim Überfahren kippt das Feld auf die volle Signalfarbe. Dunkle Zeichnung
   auf Grün – nie die helle Variante, die auf #87BC22 nur 2,3:1 erreicht.
   Genau dieser Zustand blieb auf dem Handy nach dem Antippen stehen: ein
   dauerhaft grün gefülltes Feld auf einer von drei Karten. */
.card--service:focus-within .card__icon {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .card--service:hover .card__icon {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink);
  }
}

/* Ganze Karte klickbar, ohne den Link zu verstecken */
.card__link::after { content: ""; position: absolute; inset: 0; }

/* Der Kartentitel bleibt dunkel und ohne Unterstreichung.
   Als grüner Link geschrieben stünde er in derselben Farbe und Stärke wie
   der Pfeil-Link am Fuß der Karte – zwei gleich aussehende Wege in dieselbe
   Seite. Die Karte ist ohnehin vollflächig anklickbar; den Hinweis darauf
   trägt der Pfeil. Beim Überfahren und bei Tastaturfokus wird der Titel
   unterstrichen, damit erkennbar bleibt, dass es sich um einen Link
   handelt. */
.card__link { color: var(--ink); text-decoration: none; }
.card__link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .card--service:hover .card__link { text-decoration: underline; text-underline-offset: 3px; }
}

.card--flat {
  background: var(--paper-2);
  border-color: transparent;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s5);
}

.card--outline { background: transparent; }


/* == 10  Prozess-Stepper ================================================= */

.stepper { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }

.step {
  position: relative;
  padding-left: var(--s7);
  padding-bottom: var(--s6);
}
.step:last-child { padding-bottom: 0; }

/* Verbindungslinie */
.step::before {
  content: "";
  position: absolute; left: 1.0625rem; top: 2.25rem; bottom: 0;
  width: 2px; background: var(--line);
}
.step:last-child::before { display: none; }

/* Quadrat statt Kreis: Der Kreis ist Dekoration, das Quadrat mit
   Tabellenziffern liest sich wie eine Positionsnummer. */
.step__num {
  position: absolute; left: 0; top: 0;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--ink);              /* dunkle Schrift auf Grün */
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-mini); font-weight: 800;
  letter-spacing: .02em;
}
.step h3 { margin-bottom: var(--s2); padding-top: .3rem; }
.step p { color: var(--grey-700); font-size: var(--fs-small); max-width: 44ch; }


@media (min-width: 900px) {
  .stepper--horizontal {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s5);
  }
  .stepper--horizontal .step { padding-left: 0; padding-bottom: 0; padding-top: var(--s7); }
  .stepper--horizontal .step::before {
    left: 2.25rem; right: 0; top: 1.0625rem; bottom: auto;
    width: auto; height: 2px;
  }
  .stepper--horizontal .step:last-child::before { display: block; right: auto; width: 0; }
  .stepper--horizontal .step__num { top: 0; }
  .stepper--horizontal .step h3 { padding-top: 0; font-size: 1.0625rem; }
  .stepper--horizontal .step p { font-size: var(--fs-mini); line-height: 1.55; }
}


/* == 11  Listen ========================================================== */

/* Aufzählung mit dem Balkenzeichen der Marke.
   Bewusst kein Häkchen im Kasten: Zwei aufsteigende Striche greifen das
   Logo auf, wirken technisch statt dekorativ und lassen die Liste ruhiger
   erscheinen als eine Reihe gleicher Symbole. */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); }
/* Zweispaltig über echten Spaltensatz, NICHT über ein Raster.
   Ein Raster richtet Zeilen aneinander aus: Läuft ein Punkt rechts über
   zwei Zeilen, wird die ganze Zeile höher und links bleibt sichtbar Luft
   unter dem kürzeren Punkt stehen. Beim Spaltensatz fließen die Punkte
   dagegen fortlaufend – erst die linke Spalte, dann die rechte – und es
   entstehen keine Lücken, egal wie lang die einzelnen Punkte sind.

   Abstand über margin-bottom statt gap: Ein margin-top würde den ersten
   Punkt der zweiten Spalte nach unten schieben, die Spalten begännen dann
   auf unterschiedlicher Höhe. Der überzählige Abstand unter der letzten
   Zeile wird am Block wieder abgezogen. */
.checklist--cols {
  display: block;
  columns: 2 20rem;
  column-gap: var(--s6);
  margin-bottom: calc(var(--s4) * -1);
}
.checklist--cols li {
  break-inside: avoid;
  margin-bottom: var(--s4);
}

.checklist li {
  position: relative;
  padding-left: 1.75rem;
  line-height: 1.55;
}
/* hinterer, niedriger Balken */
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 3px; height: .5em;
  background: var(--grey-400);
}
/* vorderer, hoher Balken in der Signalfarbe */
.checklist li::after {
  content: "";
  position: absolute; left: 7px; top: .38em;
  width: 3px; height: .85em;
  background: var(--accent);
}

/* Schlichte Aufzählung mit Balken */
.barlist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.barlist--cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--s3) var(--s6); }
.barlist li {
  position: relative; padding-left: var(--s5);
  font-size: var(--fs-small); line-height: 1.5;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.barlist li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: .625rem; height: 2px; background: var(--accent);
}

/* Qualifikationen */
.spec-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.spec-list li {
  display: flex; align-items: baseline; gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
}
.spec-list li:first-child { border-top: 1px solid var(--line); }
.spec-list li::before {
  content: ""; width: .5rem; height: .5rem; background: var(--accent); flex-shrink: 0;
  transform: translateY(-.1rem);
}

/* Zielbranchen */
.tag-grid { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line-strong); }
.tag-grid li {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: var(--s4) var(--s5) var(--s4) var(--s5);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
  position: relative;
}
.tag-grid li::before {
  content: ""; position: absolute; left: 0; top: 1.55em;
  width: .625rem; height: 2px; background: var(--accent);
}


/* == 12  Textblöcke & Zitate ============================================= */

.prose-block > * + * { margin-top: var(--s4); }
.prose-block p { max-width: var(--measure); }

/* Hervorgehobene Kernaussage */
.statement {
  border-left: 4px solid var(--accent);
  padding: var(--s2) 0 var(--s2) var(--s5);
  font-size: var(--fs-lead);
  line-height: 1.5;
  font-weight: 600;
  max-width: 44rem;
}
.statement strong { font-weight: 800; }

/* Typische Kundenaussagen */
.quote-card {
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  font-size: var(--fs-small);
  line-height: 1.55;
  position: relative;
  border: 1px solid var(--line);
}
.quote-card::before {
  content: "„";
  display: block;
  font-size: 2.75rem; line-height: .8;
  color: var(--accent);
  font-weight: 800;
  margin-bottom: var(--s2);
}

/* Faktenzeile */
.factline {
  font-family: var(--font-mono);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  list-style: none; padding: 0; margin: 0;
  font-size: var(--fs-mini);
  letter-spacing: .04em; text-transform: uppercase; font-weight: 700;
  color: var(--grey-700);
}
.factline li { display: flex; align-items: center; gap: var(--s5); }
.factline li:not(:last-child)::after { content: ""; width: 4px; height: 4px; background: var(--accent); }


/* == 13  Referenzkarte & Bildslots ======================================= */

.case-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s6) var(--s5);
}
@media (min-width: 900px) { .case-card { padding: var(--s7); } }
.case-card > * + * { margin-top: var(--s5); }
.case-card h2, .case-card h3 { margin: 0; }

.case-card__meta {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  padding: var(--s5) 0;
  border-block: 1px solid var(--line);
}
.case-card__meta dt {
  font-family: var(--font-mono);
  font-size: var(--fs-mini); font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--grey-700);
  margin-bottom: var(--s1);
}
.case-card__meta dd { margin: 0; font-size: var(--fs-small); font-weight: 600; }

/* Platzhalter für spätere Fotos */
.media-slot {
  margin: 0;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  display: grid; place-items: center;
  min-height: 12rem;
  padding: var(--s5);
  text-align: center;
}
.media-slot__hint {
  font-size: var(--fs-mini);
  color: var(--grey-700);
  max-width: 22rem;
  line-height: 1.5;
}
.media-slot__hint strong { display: block; color: var(--grey-700); margin-bottom: var(--s1); }
.media-slot img { border-radius: var(--radius); }

.media-slot--portrait { aspect-ratio: 4 / 5; min-height: 0; }


/* == 14  CTA-Band ======================================================== */

.cta-band {
  background: var(--ink);
  color: #EDEDED;
  padding-block: clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}
/* Ein schwacher grüner Schein aus der oberen rechten Ecke – dieselbe Geste
   wie im Hero, dort hell, hier dunkel. Er nimmt der grossen dunklen Fläche
   die Schwere, ohne dass eine erkennbare Form entsteht. */
.cta-band::after {
  content: "";
  position: absolute; top: -30%; right: -10%;
  width: 40rem; height: 40rem;
  background: radial-gradient(circle, rgba(135,188,34,.13) 0%, rgba(135,188,34,0) 65%);
  pointer-events: none;
}
/* Kein grüner Abschluss mehr an dieser Stelle: Der helle Fußbereich bringt
   direkt darunter bereits seine eigene grüne Oberkante mit. */
.cta-band__inner { max-width: 46rem; position: relative; z-index: 1; }
.cta-band h2 { color: #FFFFFF; margin-bottom: var(--s4); }
.cta-band p { color: #C9CEC2; font-size: var(--fs-lead); line-height: 1.55; }
.cta-band .btn-row { margin-top: var(--s6); }

.cta-band__contact {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: var(--fs-small);
}
.cta-band__contact a {
  display: inline-flex; align-items: center; gap: .5rem;
  color: #FFFFFF; text-decoration: none; font-weight: 600;
}
.cta-band__contact a:hover { color: var(--accent); }
.cta-band__contact svg { width: 1.0625rem; height: 1.0625rem; color: var(--accent); }


/* == 15  Formular ======================================================== */

.form { display: grid; gap: var(--s5); }

.form__row { display: grid; gap: var(--s5); }
@media (min-width: 640px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
}

.field { display: grid; gap: var(--s2); }

.field > label {
  font-size: var(--fs-small);
  font-weight: 700;
}
.field__opt { font-weight: 400; color: var(--grey-700); }

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: var(--fs-body);
  width: 100%;
  padding: .75rem .875rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--field-line);
  border-radius: var(--radius);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { resize: vertical; min-height: 9rem; line-height: 1.6; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23595959' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  background-size: .75rem;
  padding-right: 2.5rem;
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink-soft); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px rgba(78, 122, 15, .16);
}

.field [aria-invalid="true"] { border-color: #B3261E; }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .15); }

.field__error {
  font-size: var(--fs-mini);
  color: #B3261E;
  font-weight: 600;
  min-height: 0;
}
.field__error:empty { display: none; }

/* Einwilligung */
.field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3);
  align-items: start;
}
.field--check input[type="checkbox"] {
  width: 1.25rem; height: 1.25rem;
  margin-top: .15rem;
  accent-color: var(--accent-ink);
  flex-shrink: 0;
}
.field--check label { font-weight: 400; font-size: var(--fs-small); line-height: 1.5; }
.field--check .field__error { grid-column: 1 / -1; }

/* Honeypot – für Menschen unsichtbar, für Bots verlockend */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form__note { font-size: var(--fs-mini); color: var(--grey-700); line-height: 1.5; }

/* Rückmeldung nach dem Absenden */
.form__status {
  padding: var(--s4) var(--s5);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  line-height: 1.5;
  border-left: 4px solid;
}
.form__status:empty { display: none; }
.form__status[data-state="ok"] {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--ink);
}
.form__status[data-state="error"] {
  background: #FCEEEE;
  border-color: #B3261E;
  color: #7A1B15;
}

.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* Direktkontakt neben dem Formular */
.contact-panel {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s6) var(--s5);
}
.contact-panel > * + * { margin-top: var(--s5); }

.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s5); }
.contact-list li { display: flex; gap: var(--s4); align-items: flex-start; }
.contact-list svg { width: 1.25rem; height: 1.25rem; color: var(--accent-ink); flex-shrink: 0; margin-top: .2rem; }
.contact-list dt,
.contact-list .contact-list__label {
  font-size: var(--fs-mini); font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--grey-700);
  margin-bottom: .1rem;
}
.contact-list a { font-weight: 700; text-decoration: none; color: var(--ink); }
.contact-list a:hover { color: var(--accent-ink); text-decoration: underline; }
.contact-list address { font-style: normal; font-size: var(--fs-small); line-height: 1.5; }

.trust-note {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s4);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--grey-700);
}


/* == 16  Fußbereich ====================================================== */

/* Heller Fußbereich. Die kräftige grüne Oberkante trennt ihn deutlich vom
   Inhalt – ohne sie würde er bei hellem Hintergrund mit der Seite
   verschwimmen. */
.site-footer {
  background: var(--paper-2);
  color: var(--grey-700);
  border-top: 4px solid var(--accent);
  padding-block: var(--s8) var(--s6);
  font-size: var(--fs-small);
}

.site-footer__grid {
  display: grid;
  gap: var(--s7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
@media (min-width: 900px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s6); }
}

.site-footer h2 {
  font-size: var(--fs-mini);
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s4);
}

.site-footer__brand > * + * { margin-top: var(--s4); }
.site-footer__brand p { color: var(--grey-700); font-size: var(--fs-small); line-height: 1.55; max-width: 24rem; }

.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--accent-ink); text-decoration: underline; }

.site-footer address { font-style: normal; line-height: 1.7; }

/* 2.75rem = 44px: die Mindestgröße für eine sicher treffbare Schaltfläche.
   Vorher waren es 36px – auf dem Handy zu klein, um zuverlässig zu treffen. */
.site-footer__social { display: flex; gap: var(--s3); margin-top: var(--s4); }
.site-footer__social a {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--grey-700);
  transition: border-color .16s var(--ease), background-color .16s var(--ease),
              color .16s var(--ease);
}
.site-footer__social a:hover {
  border-color: var(--accent); background: var(--accent-wash); color: var(--ink);
}
.site-footer__social svg { width: 1.25rem; height: 1.25rem; }

.site-footer__bottom {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-mini);
  color: var(--grey-700);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s5); list-style: none; padding: 0; margin: 0; }


/* == 17  Mobile Kontaktleiste ============================================ */

.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 98;
  display: grid; grid-template-columns: 1fr 1.35fr;
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 12px rgba(30,30,30,.1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.callbar__item {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem .75rem;
  font-size: var(--fs-small); font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  border: 0;
}
.callbar__item svg { width: 1.0625rem; height: 1.0625rem; }
.callbar__item--primary { background: var(--accent); color: var(--ink); }
.callbar__item--primary:active { background: var(--accent-deep); }

/* Muss mit dem Umschaltpunkt der Navigation übereinstimmen: Solange der
   Kopf-Button verborgen ist, trägt die Leiste den Weg zur Kontaktaufnahme. */
@media (min-width: 1024px) { .callbar { display: none; } }
body.nav-open .callbar { display: none; }


/* == 18  Fließtextseiten ================================================= */

.prose { max-width: 44rem; }
.prose > * + * { margin-top: var(--s4); }
.prose h2 {
  font-size: 1.25rem;
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1.0625rem; margin-top: var(--s5); }
.prose ul, .prose ol { display: grid; gap: var(--s2); }
.prose li { font-size: var(--fs-small); line-height: 1.6; }
.prose p { font-size: var(--fs-small); line-height: 1.7; }
.prose address { font-style: normal; line-height: 1.7; font-size: var(--fs-small); }

.notice {
  background: var(--accent-wash);
  border-left: 4px solid var(--accent);
  padding: var(--s4) var(--s5);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-small);
  line-height: 1.6;
}

/* 404 */
.notfound { text-align: center; padding-block: clamp(4rem, 12vw, 9rem); }
.notfound .btn-row { justify-content: center; }
.notfound__code {
  font-size: clamp(3.5rem, 12vw, 6rem);
  font-weight: 800;
  line-height: 1;
  /* --accent käme auf Weiß nur auf 2,3:1 und wäre selbst in dieser Größe
     schlecht lesbar; --accent-ink erreicht 5,1:1. */
  color: var(--accent-ink);
  letter-spacing: -.04em;
}


/* == 19  Scroll-Effekte & Bewegungsreduktion =============================
   Grundsatz: Der Effekt darf nie den Eindruck erwecken, die Seite lade noch.
   Deshalb kurze Dauer, kleiner Weg, sanfte Kurve – und alles ohne JavaScript
   sofort sichtbar (die .js-Klasse setzt main.js als Allererstes).
   ======================================================================== */

/* --- Fortschrittsleiste im Kopfbereich ---------------------------------- */
.scroll-progress {
  position: absolute; left: 0; bottom: -1px;
  height: 3px; width: 100%;
  background: var(--accent);
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  transition: transform .1s linear;
  pointer-events: none;
}

/* --- Sanftes Einblenden beim Scrollen ----------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="right"] { transform: translateX(-16px); }

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Versetztes Erscheinen von Karten und Listen: erzeugt einen ruhigen,
   gerichteten Blickverlauf statt eines gleichzeitigen Aufblitzens. */
.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
/* Staffelung in 60-ms-Schritten. Vorher waren es 80 ms bei 550 ms Dauer –
   zusammen brauchte die letzte Karte fast eine Sekunde, bis sie stand, und
   das liest sich als Ladeverzögerung statt als Gestaltung. */
.js [data-reveal-group].is-visible > * { opacity: 1; transform: none; }
.js [data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; }
.js [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 60ms; }
.js [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 120ms; }
.js [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 180ms; }
.js [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 240ms; }
.js [data-reveal-group].is-visible > *:nth-child(n+6) { transition-delay: 300ms; }

/* --- Prozesslinie zeichnet sich beim Scrollen ---------------------------- */
.js .stepper .step::before { transform: scaleY(0); transform-origin: 50% 0; transition: transform .5s var(--ease); }
.js .stepper.is-visible .step::before { transform: scaleY(1); }
.js .stepper.is-visible .step:nth-child(2)::before { transition-delay: .12s; }
.js .stepper.is-visible .step:nth-child(3)::before { transition-delay: .24s; }
.js .stepper.is-visible .step:nth-child(4)::before { transition-delay: .36s; }
@media (min-width: 900px) {
  .js .stepper--horizontal .step::before { transform: scaleX(0); transform-origin: 0 50%; }
  .js .stepper--horizontal.is-visible .step::before { transform: scaleX(1); }
}

/* --- Hero-Motiv läuft beim Scrollen leicht mit --------------------------- */
.hero__motif {
  transform: translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}

/* --- Kopfbereich rückt beim Scrollen zusammen ---------------------------- */
.site-header { transition: box-shadow .2s var(--ease), background-color .2s var(--ease); }
.site-header[data-scrolled="true"] .brandmark__mark {
  height: 1.875rem;
  transition: height .2s var(--ease);
}
@media (min-width: 900px) {
  .site-header[data-scrolled="true"] .brandmark__mark { height: 2.125rem; }
}

/* --- Bewegungsreduktion: alles aus, nichts bleibt unsichtbar ------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal],
  .js [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
  .js .stepper .step::before { transform: none !important; }
  .hero__motif { transform: none !important; }
  .scroll-progress { display: none; }
}


/* == 20  Druck =========================================================== */

@media print {
  .site-header, .callbar, .cta-band, .nav, .btn-row, .skip-link { display: none !important; }
  body { padding-bottom: 0; color: #000; }
  .site-footer { background: none; color: #000; padding-block: 1rem; }
  .site-footer a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
  .section, .hero, .pagehead { padding-block: 1rem; }
}