/* ================================================================
   ENEVO Version 3 · Bausteine aus Version 1, auf das Aker-System gelegt
   Die Seiten ausserhalb der vier eigens gebauten tragen die Struktur von
   Version 1. Ihre Farb- und Schrift-Tokens werden hier auf Paper, Char,
   Mist und Ember umgelegt, dazu die Radien und die Schrift des Stilbuchs.
   Die Aussagen und Klassennamen bleiben unveraendert.
   ================================================================ */

:root {
  /* Grundfarben auf die Aker-Palette */
  --enevo-espresso:      var(--color-char);
  --enevo-espresso-soft: var(--color-iron);
  --enevo-cream:         var(--color-mist);
  --enevo-terra:         var(--color-ember);
  --enevo-taupe:         var(--color-pewter);
  --enevo-terra-text:    #8f4520;
  --enevo-ink:           var(--color-ink);
  --enevo-line:          var(--color-mist);
  --enevo-waldgruen:     var(--color-pine);
  --enevo-bg:            var(--color-paper);
  --enevo-bg-alt:        var(--color-paper);
  --enevo-font:          var(--font-sans);
  --enevo-container:     var(--page-max-width);
  --enevo-gutter:        var(--rand);
}
/* ---- uebernommen aus Version 1: enevo.css ---- */
/* ==========================================================================
   ENEVO · Design System
   Abgeleitet aus: enevo-corporate-identity-2.pdf (Version 2.0, Juli 2026)
   Jeder Wert hier hat eine Entsprechung in der CI. Keine erfundenen Werte.
   ========================================================================== */

:root {
  /* --- Grundfarben (CI S.03) ------------------------------------------- */
  /* umgelegt: --enevo-espresso */  /* Primär: Überschriften, dunkle Flächen, CTAs */
  /* umgelegt: --enevo-espresso-soft */  /* Nur Verläufe/abgesetzte Karten in Espresso  */
  /* umgelegt: --enevo-cream */  /* Hintergrund, helle Karten                    */
  /* umgelegt: --enevo-terra */  /* Akzent: Sektionsmarken, Linien, Kennzahlen  */
  /* umgelegt: --enevo-taupe */  /* Neutral: zweitrangiger Text, Meta            */

  /* Terra als TEXT auf hellem Grund: #B8825A erreicht auf Cream nur 2.92:1 und
     fällt damit auch für große Schrift durch (WCAG 2.2 AA verlangt 3:1, für
     Fließtext 4.5:1). Diese Fassung ist Terra, 28 % Richtung Espresso gemischt:
     4.56:1 auf Cream, 5.15:1 auf Weiß. Gleicher Farbton, gleiche Familie.
     Flächen, Linien und Akzente behalten das reine Terra der CI.
     Siehe docs/brand-decisions.md, BD-08. */
  /* umgelegt: --enevo-terra-text */

  /* --- Hilfsfarben (CI S.04) ------------------------------------------- */
  /* umgelegt: --enevo-ink */  /* Fließtext (Print); Web: Espresso bleibt Text */
  /* umgelegt: --enevo-line */  /* Haarlinien. Nie Fläche, nie Textfarbe        */
  /* umgelegt: --enevo-waldgruen */  /* NUR positive Auswertungen. Nie Gestaltung    */

  /* Bewertungsskala – ausschließlich Diagramme/Skalen (CI S.04) */
  --enevo-scale-1: #B0553F;
  --enevo-scale-2: #C2803F;
  --enevo-scale-3: #BCA13A;
  --enevo-scale-4: #7F9A55;
  --enevo-scale-5: #4E7A46;

  /* --- Rollen ----------------------------------------------------------- */
  /* umgelegt: --enevo-bg */
  /* umgelegt: --enevo-bg-alt */
  /* Feldrahmen: deutlich weicher als Taupe (5,7:1), mit 3,15:1 gegen Cream
     aber noch klar als Eingabefeld erkennbar. WCAG 1.4.11 fordert 3:1.   */
  --enevo-field-line:    #948674;
  --enevo-bg-dark:       var(--enevo-espresso);
  --enevo-text:          var(--enevo-espresso);
  --enevo-text-muted:    var(--enevo-taupe);
  --enevo-border:        var(--enevo-line);

  /* --- Typografie (CI S.06 + S.08) -------------------------------------- */
  /* Arial trägt das gesamte System. Kein Webfont, keine externe Abhängigkeit. */
  /* umgelegt: --enevo-font */

  --enevo-h1: clamp(2.25rem, 1.30rem + 4.05vw, 4rem);      /* 36 → 64 px, CI 56–64 */
  --enevo-h2: clamp(1.75rem, 1.32rem + 1.84vw, 2.75rem);   /* 28 → 44 px, CI 36–44 */
  --enevo-h3: clamp(1.25rem, 1.12rem + 0.54vw, 1.5rem);    /* 20 → 24 px           */
  --enevo-lede: clamp(1.0625rem, 1.01rem + 0.22vw, 1.1875rem);  /* 17 → 19 px      */
  --enevo-body: clamp(1rem, 0.98rem + 0.11vw, 1.0625rem);       /* 16 → 17 px      */
  --enevo-meta: clamp(0.8125rem, 0.80rem + 0.05vw, 0.875rem);   /* 13 → 14 px      */
  --enevo-mark: clamp(0.6875rem, 0.68rem + 0.05vw, 0.75rem);    /* 11 → 12 px      */

  --enevo-lh-h1: 1.05;
  --enevo-lh-h2: 1.15;
  --enevo-lh-h3: 1.25;
  --enevo-lh-lede: 1.5;
  --enevo-lh-body: 1.6;

  /* Arial wirkt kompakter als eine Serif → Überschriften leicht enger (CI S.08) */
  --enevo-tracking-head: -0.015em;
  --enevo-tracking-mark: 0.2em;   /* Sektionsmarke, Versalien (CI S.08)          */

  /* --- Abstände · Basis 8 px (CI S.10) ---------------------------------- */
  --enevo-space-2xs: 8px;
  --enevo-space-xs:  16px;
  --enevo-space-sm:  24px;
  --enevo-space-md:  32px;
  --enevo-space-lg:  48px;
  --enevo-space-xl:  64px;
  --enevo-space-2xl: 96px;
  --enevo-space-3xl: 128px;

  --enevo-section-y: clamp(60px, 4rem + 4vw, 128px); /* 60–80 mobil, 96–128 Desktop */

  /* --- Maße (CI S.10) --------------------------------------------------- */
  /* umgelegt: --enevo-container */
  /* Zwei Spaltenbreiten statt einer. Beide Werte sind so gesetzt, dass die
     Zeile unter 80 Zeichen bleibt; bei einer gemeinsamen Breite ergaeben
     17px und 19px sehr unterschiedliche Zeilenlaengen. */
  --enevo-measure: 700px;          /* Fließtext 17px, rund 89 Zeichen */
  --enevo-measure-lede: 740px;     /* Vorspann 19px, rund 80 Zeichen */
  /* umgelegt: --enevo-gutter */

  /* --- Komponenten (CI S.09) -------------------------------------------- */
  --enevo-accent-w: 72px;          /* Akzentlinie 64–80 px */
  --enevo-accent-h: 4px;
  --enevo-radius: 2px;             /* Nahezu rechtwinklig. Keine Pill-Buttons.  */
  --enevo-card-pad: clamp(24px, 2vw, 32px);
  --enevo-grid-gap: 32px;          /* Karten-Gap 24–32 px */

  /* Akzentfarbe für Text — dreht je nach Untergrund */
  --enevo-accent-text: var(--enevo-terra-text);

  --enevo-transition: 180ms ease;
}

/* ==========================================================================
   Reset / Basis
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--enevo-bg);
  color: var(--enevo-text);
  font-family: var(--enevo-font);
  font-size: var(--enevo-body);
  line-height: var(--enevo-lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* CI S.07 Regel 02: Unterstrichen wird nur, was ein Link ist. */
a { color: inherit; text-decoration-color: var(--enevo-terra); text-underline-offset: 0.2em; }
a:hover { color: var(--enevo-accent-text); }

/* Sichtbarer Fokus – WCAG 2.2 */
:focus-visible {
  outline: 3px solid var(--enevo-terra);
  outline-offset: 3px;
}

::selection { background: var(--enevo-terra); color: var(--enevo-cream); }

/* Skip Link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--enevo-espresso); color: var(--enevo-cream);
  padding: var(--enevo-space-xs) var(--enevo-space-sm);
  font-weight: 700;
}
.skip-link:focus { left: var(--enevo-space-xs); top: var(--enevo-space-xs); color: var(--enevo-cream); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--enevo-container);
  margin-inline: auto;
  padding-inline: var(--enevo-gutter);
}
.measure { max-width: var(--enevo-measure); }

.section { padding-block: var(--enevo-section-y); }
.section--cream    { background: var(--enevo-cream); }
.section--white    { background: var(--enevo-bg-alt); }
.section--espresso { background: var(--enevo-espresso); color: var(--enevo-cream); }
.section--espresso .lede,
.section--espresso .meta { color: rgba(245,241,232,.72); }
.section--espresso .section-mark { color: var(--enevo-terra); } /* CI S.12 */
/* Auf dunklem Grund trägt das reine Terra: 5.25:1 gegen Espresso. */
.section--espresso, .hero, .site-footer, .card--dark { --enevo-accent-text: var(--enevo-terra); }

/* ==========================================================================
   Bauprinzip einer Sektion (CI S.12)
   Sektionsmarke → Akzentlinie → Überschrift → Lede → Inhalt → CTA
   ========================================================================== */
.section-mark {
  display: block;
  font-size: var(--enevo-mark);
  font-weight: 700;
  letter-spacing: var(--enevo-tracking-mark);
  text-transform: uppercase;
  color: var(--enevo-taupe);
  margin-bottom: 10px;           /* 8–12 px Marke → Überschrift */
}
.accent-line {
  display: block;
  width: var(--enevo-accent-w);
  height: var(--enevo-accent-h);
  background: var(--enevo-terra);
  border: 0;
  margin: 0 0 var(--enevo-space-sm);
}

h1, .h1 {
  font-size: var(--enevo-h1); line-height: var(--enevo-lh-h1);
  font-weight: 700; letter-spacing: var(--enevo-tracking-head);
  text-wrap: balance;
}
h2, .h2 {
  font-size: var(--enevo-h2); line-height: var(--enevo-lh-h2);
  font-weight: 700; letter-spacing: var(--enevo-tracking-head);
  text-wrap: balance;
}
h3, .h3 {
  font-size: var(--enevo-h3); line-height: var(--enevo-lh-h3);
  font-weight: 700; letter-spacing: -0.01em;
}

/* Lange Komposita wie „Verbandspartnerschaften" passen auf schmalen Geräten
   in keine Zeile. Das Dokument ist als lang="de" ausgezeichnet, damit greifen
   die deutschen Trennmuster. break-word ist die Rückfallebene. */
h1, h2, h3, .h1, .h2, .h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}
@media (min-width: 560px) {
  h1, h2, h3, .h1, .h2, .h3 { hyphens: manual; }
}

/* CI S.07 Regel 04: Maximal eine Terra-Hervorhebung pro Überschrift. */
.hl { color: var(--enevo-accent-text); }
/* Schutzrechtszeichen im Text. In Ueberschriftgroesse liest sich ein ® sonst
   wie ein eigenes Wort. Klein und leicht angehoben ordnet es sich dem
   Markennamen unter, so wie im Lockup. Kein Sperrsatz, kein Umbruch davor. */
.reg {
  font-size: .58em; vertical-align: .62em;
  letter-spacing: 0; line-height: 1;
}
/* In Überschriftgröße wäre dasselbe Verhältnis zu wuchtig: dort sitzt das
   Zeichen kleiner und auf Versalhöhe. */
h1 .reg, h2 .reg, h3 .reg { font-size: .42em; vertical-align: .95em; }

.lede {
  font-size: var(--enevo-lede); line-height: var(--enevo-lh-lede);
  color: var(--enevo-taupe);
  max-width: var(--enevo-measure-lede);
  margin-top: var(--enevo-space-xs);   /* 16–24 px Überschrift → Lede */
}
.prose p { max-width: var(--enevo-measure); }
.prose p + p { margin-top: var(--enevo-space-xs); }
.meta { font-size: var(--enevo-meta); color: var(--enevo-taupe); }

/* ==========================================================================
   Buttons (CI S.09)
   Primär Espresso · Sekundär Outline · Terra als sparsamer Highlight-CTA
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px;
  font: inherit; font-size: var(--enevo-body); font-weight: 700;
  border: 2px solid transparent; border-radius: var(--enevo-radius);
  cursor: pointer; text-decoration: none;
  transition: background var(--enevo-transition), color var(--enevo-transition),
              border-color var(--enevo-transition);
}
.btn--primary   { background: var(--enevo-espresso); color: var(--enevo-cream); border-color: var(--enevo-espresso); }
.btn--primary:hover   { background: var(--enevo-terra); border-color: var(--enevo-terra); color: var(--enevo-cream); }
.btn--secondary { background: transparent; color: var(--enevo-espresso); border-color: var(--enevo-espresso); }
.btn--secondary:hover { background: var(--enevo-espresso); color: var(--enevo-cream); }
/* Cream auf Terra erreicht nur 2.92:1 — Espresso-Schrift ergibt 5.25:1. */
.btn--terra     { background: var(--enevo-terra); color: var(--enevo-espresso); border-color: var(--enevo-terra); }
.btn--terra:hover     { background: var(--enevo-espresso); border-color: var(--enevo-espresso); color: var(--enevo-cream); }

/* Auf dunklen Flächen drehen die Buttons (CI S.12):
   Primär in Cream mit Espresso-Schrift, Sekundär als Outline in Cream.
   Gilt für JEDE dunkle Fläche — Hero, dunkle Sektion, dunkle Karte, Footer.
   Ohne den Hero stünde dort Espresso auf Espresso: unsichtbar. */
.section--espresso .btn--primary,
.hero .btn--primary,
.card--dark .btn--primary,
.site-footer .btn--primary   { background: var(--enevo-cream); color: var(--enevo-espresso); border-color: var(--enevo-cream); }
.section--espresso .btn--primary:hover,
.hero .btn--primary:hover,
.card--dark .btn--primary:hover,
.site-footer .btn--primary:hover   { background: var(--enevo-terra); border-color: var(--enevo-terra); color: var(--enevo-espresso); }
.section--espresso .btn--secondary,
.hero .btn--secondary,
.card--dark .btn--secondary,
.site-footer .btn--secondary { color: var(--enevo-cream); border-color: rgba(245,241,232,.55); background: transparent; }
.section--espresso .btn--secondary:hover,
.hero .btn--secondary:hover,
.card--dark .btn--secondary:hover,
.site-footer .btn--secondary:hover { background: var(--enevo-cream); color: var(--enevo-espresso); border-color: var(--enevo-cream); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--enevo-space-xs); margin-top: var(--enevo-space-md); }

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; text-decoration: none; color: var(--enevo-espresso);
}
.link-arrow::after { content: "→"; transition: transform var(--enevo-transition); }
.link-arrow:hover { color: var(--enevo-accent-text); }
.link-arrow:hover::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .link-arrow:hover::after { transform: none; } }
.section--espresso .link-arrow { color: var(--enevo-cream); }
.section--espresso .link-arrow:hover { color: var(--enevo-accent-text); }

/* ==========================================================================
   Kennzahlblock (CI S.09) – Zahlen deutlich größer als das Label (S.07 Regel 05)
   ========================================================================== */
.stats { display: grid; gap: var(--enevo-space-md); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Ab Tablet ein festes Dreierraster: zwei Kennzahlen dehnen sich sonst auf
   halbe Containerbreite und verlieren die Flucht mit der Partnerliste. */
@media (min-width: 700px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat__mark {
  display: block; font-size: var(--enevo-mark); font-weight: 700;
  letter-spacing: var(--enevo-tracking-mark); text-transform: uppercase;
  color: var(--enevo-taupe); margin-bottom: var(--enevo-space-2xs);
}
.stat__value {
  display: block;
  font-size: clamp(2.5rem, 1.9rem + 2.6vw, 4rem);
  line-height: 1; font-weight: 700; letter-spacing: -0.02em;
  color: var(--enevo-accent-text);
}
.stat__label { display: block; margin-top: 10px; font-size: var(--enevo-meta); color: var(--enevo-taupe); }
.section--espresso .stat__mark { color: var(--enevo-terra); }
.section--espresso .stat__label { color: rgba(245,241,232,.72); }

/* ==========================================================================
   Karten (CI S.09) – heller Kasten / dunkler Kasten
   ========================================================================== */
/* Die helle Karte setzt Textfarbe und Akzent selbst zurück. Sonst erbt sie
   in einer dunklen Sektion deren Cream-Schrift und steht hell auf hell.
   Ebenso muss der Akzent dort wieder die textsichere Terra-Fassung sein,
   das reine Terra erreicht auf Weiß nur 3.29:1. */
.card {
  background: var(--enevo-bg-alt);
  border: 1px solid var(--enevo-border);
  border-radius: var(--enevo-radius);
  padding: var(--enevo-card-pad);
  color: var(--enevo-text);
  --enevo-accent-text: var(--enevo-terra-text);
}
.card--dark { background: var(--enevo-espresso); border-color: var(--enevo-espresso); color: var(--enevo-cream); }
.card--dark .card__text { color: rgba(245,241,232,.78); }
.card__mark {
  display: block; font-size: var(--enevo-mark); font-weight: 700;
  letter-spacing: var(--enevo-tracking-mark); text-transform: uppercase;
  color: var(--enevo-accent-text); margin-bottom: 10px;
}
.card__title { font-size: var(--enevo-h3); line-height: var(--enevo-lh-h3); font-weight: 700; }
.card__text { margin-top: var(--enevo-space-2xs); color: var(--enevo-taupe); }
.grid { display: grid; gap: var(--enevo-grid-gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
/* Vier Karten sollen 2x2 stehen. Mit der 320px-Untergrenze von .grid--2
   ergaeben sich bei 1160px drei Spalten und eine allein stehende vierte. */
.grid--paar { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }

/* --- Karte mit Motiv ------------------------------------------------------
   Das Bild sitzt randlos oben, der Text bekommt sein Polster ueber einen
   inneren Behaelter. Ohne den lage das Bild sonst im Kartenpolster. */
.card--motiv { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card--motiv .card__bild { display: block; overflow: hidden; }
.card--motiv .card__bild img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1717 / 916; object-fit: cover;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.card--motiv:hover .card__bild img,
.card--motiv:focus-within .card__bild img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .card--motiv .card__bild img { transition: none; }
  .card--motiv:hover .card__bild img { transform: none; }
}
.card--motiv .card__inhalt { padding: var(--enevo-card-pad); }

/* Aufzählung mit Terra-Strich (CI S.09) */
.list-dash > li { position: relative; padding-left: 22px; margin-top: var(--enevo-space-2xs); }
.list-dash > li::before {
  content: ""; position: absolute; left: 0; top: 0.7em;
  width: 12px; height: 2px; background: var(--enevo-terra);
}

/* ==========================================================================
   Tabellen (CI S.09) – typografisch: Kopf in Taupe über Espresso-Linie
   ========================================================================== */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; font-size: var(--enevo-mark); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--enevo-taupe);
  padding: 0 var(--enevo-space-xs) var(--enevo-space-2xs) 0;
  border-bottom: 2px solid var(--enevo-espresso);
}
.table td { padding: 14px var(--enevo-space-xs) 14px 0; border-bottom: 1px solid var(--enevo-border); vertical-align: top; }
.table-scroll { overflow-x: auto; }

/* ==========================================================================
   Reveal – dezent, respektiert prefers-reduced-motion (CI S.20 Prinzip)
   ========================================================================== */
/* Ohne JavaScript ist alles sichtbar. Erst die js-Klasse blendet aus —
   sonst bliebe Inhalt bei deaktiviertem JS dauerhaft unsichtbar. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 600ms ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}


/* ---- uebernommen aus Version 1: layout.css ---- */
/* ==========================================================================
   ENEVO · Header, Navigation, Hero, Footer, Formulare
   ========================================================================== */

/* --- Markenzeichen · Lockup horizontal + Zusatzzeile --------------------
   Schriftzug in Pfade umgewandelt (Fraunces wght 400, opsz 144), ® in Arimo.
   currentColor trägt dieselbe Datei auf hellem Header und dunklem Footer.
   Bezugsgröße ist laut CI die Zeichenhöhe, Mindestgröße Bildschirm 32 px.

   Die Zusatzzeile steht laut CI S.07 unter der WORTMARKE, nicht unter dem
   ganzen Lockup. Die Wortmarke beginnt bei x=141.38 einer 100 Einheiten
   hohen Zeichenfläche — der Einzug ist daher das 1.4138-fache der Höhe.
   Versalien und Sperrung gehören zusammen (CI S.07 Regel 01).
   ---------------------------------------------------------------------- */
.brand {
  --lockup-h: 40px;
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 7px; text-decoration: none; color: var(--enevo-espresso);
}
.brand:hover { color: var(--enevo-espresso); }
.brand__lockup { display: block; }
.brand__lockup svg { display: block; height: var(--lockup-h); width: auto; }
.brand__sub {
  /* Einzug auf den Beginn der Wortmarke im offiziellen Lockup:
     Pfad beginnt bei x=183.2 einer 100 Einheiten hohen Zeichenfläche. */
  margin-left: calc(var(--lockup-h) * 1.832);
  font-size: 8px; font-weight: 400; line-height: 1;
  letter-spacing: 0.26em; text-indent: 0.26em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--enevo-taupe);
}
.brand--light,
.site-footer a.brand--light { color: var(--enevo-cream); }
.brand--light:hover,
.site-footer a.brand--light:hover { color: var(--enevo-cream); }
.brand--light .brand__sub { color: rgba(245,241,232,.66); }

/* Schutzraum: rundum mindestens die halbe Zeichenhöhe frei (CI/LIESMICH). */
.site-header__inner .brand { padding-block: 14px; }

@media (max-width: 560px) {
  .brand { --lockup-h: 30px; gap: 6px; }
  .brand__sub { font-size: 7px; letter-spacing: 0.2em; text-indent: 0.2em; }
}

/* --- Header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245,241,232,.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--enevo-border);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--enevo-space-md); min-height: 76px;
}

.nav { display: flex; align-items: center; gap: var(--enevo-space-sm); }
.nav__list { display: flex; align-items: center; gap: 20px; }
/* Ohne nowrap staucht der Flexcontainer die Eintraege unter ihre Textbreite,
   sobald es eng wird: "Das System" stand dann zweizeilig, der Aufruf
   zweizeilig und damit hoeher als die Kopfleiste selbst. */
.nav__item { flex: 0 0 auto; }
.nav__link, .nav__toggle { white-space: nowrap; }
.site-header .btn { flex: 0 0 auto; white-space: nowrap; }

.nav__link {
  display: inline-block; padding: 8px 0;
  font-size: 15px; font-weight: 700; text-decoration: none;
  color: var(--enevo-espresso);
  border-bottom: 2px solid transparent;
  transition: color var(--enevo-transition), border-color var(--enevo-transition);
}
.nav__link:hover { color: var(--enevo-accent-text); border-bottom-color: var(--enevo-terra); }
.nav__link[aria-current="page"] { border-bottom-color: var(--enevo-terra); }

/* Dropdown */
.nav__item--has-menu { position: relative; }
.nav__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--enevo-espresso);
  border-bottom: 2px solid transparent;
}
.nav__toggle:hover { color: var(--enevo-accent-text); border-bottom-color: var(--enevo-terra); }
.nav__toggle::after { content: "⌄"; font-size: 14px; transform: translateY(-3px); }
.nav__menu {
  position: absolute; top: calc(100% + 12px); left: -20px;
  min-width: 320px; padding: 12px;
  background: var(--enevo-bg-alt);
  border: 1px solid var(--enevo-border);
  box-shadow: 0 18px 40px rgba(31,26,20,.10);
  display: none;
}
/* Die 12px Abstand zum Menuepunkt sind optisch gewollt, waren aber eine
   tote Zone: beim Hinuntergleiten lag der Zeiger weder ueber dem Eintrag
   noch ueber dem Menue, mouseleave feuerte und das Menue klappte weg.
   Dieser unsichtbare Streifen ueberbrueckt die Luecke. Er gehoert zum
   Menue und damit zum Eintrag, deshalb bleibt es offen. */
.nav__menu::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: -13px; height: 13px;
}
.nav__item--has-menu.is-open .nav__menu { display: block; }
.nav__menu a {
  display: block; padding: 11px 12px; text-decoration: none;
  font-size: 15px; font-weight: 700; color: var(--enevo-espresso);
  border-left: 2px solid transparent;
}
/* Nur die Beschreibungszeile ist ein Block. Ohne :not(.reg) erwischt die
   Regel auch das ® und schiebt es in eine eigene Zeile. */
.nav__menu a > span:not(.reg) { display: block; font-size: 13px; font-weight: 400; color: var(--enevo-taupe); margin-top: 2px; }
.nav__menu a:hover { background: var(--enevo-cream); border-left-color: var(--enevo-terra); color: var(--enevo-espresso); }

/* --- Burger ------------------------------------------------------------ */
.burger {
  display: none; width: 46px; height: 46px; padding: 0;
  background: none; border: 1px solid var(--enevo-border); cursor: pointer;
  align-items: center; justify-content: center;
}
.burger span { position: relative; display: block; width: 20px; height: 2px; background: var(--enevo-espresso); }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--enevo-espresso);
  transition: transform var(--enevo-transition), top var(--enevo-transition);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* --- Mobile Navigation ------------------------------------------------- */
.mobile-nav {
  position: fixed; inset: 76px 0 0; z-index: 99;
  background: var(--enevo-cream);
  padding: var(--enevo-space-sm) 0 var(--enevo-space-2xl);
  overflow-y: auto; display: none;
}
.mobile-nav.is-open { display: block; }
body.nav-open { overflow: hidden; }
.mobile-nav__group { border-bottom: 1px solid var(--enevo-border); padding-block: 6px; }
.mobile-nav a, .mobile-nav__label {
  display: block; padding: 14px 0; text-decoration: none;
  font-size: 18px; font-weight: 700; color: var(--enevo-espresso);
}
.mobile-nav__label {
  font-size: var(--enevo-mark); letter-spacing: var(--enevo-tracking-mark);
  text-transform: uppercase; color: var(--enevo-taupe); padding-bottom: 4px;
}
.mobile-nav__sub a { font-size: 16px; padding: 11px 0 11px 16px; border-left: 2px solid var(--enevo-line); }
.mobile-nav__sub a:hover { border-left-color: var(--enevo-terra); color: var(--enevo-accent-text); }
/* .mobile-nav a setzt Farbe und Padding — für den Button zurücknehmen,
   sonst steht Espresso-Schrift auf Espresso-Fläche. */
.mobile-nav a.btn {
  width: 100%; justify-content: center; margin-top: var(--enevo-space-sm);
  padding: 16px 28px; font-size: var(--enevo-body);
}
.mobile-nav a.btn--primary { color: var(--enevo-cream); }
.mobile-nav a.btn--primary:hover { color: var(--enevo-cream); }

/* Umschaltpunkt zum Burger. Mit sechs Menuepunkten neben dem Lockup und dem
   Aufruf braucht die Leiste rund 1140px im Container; darunter liefe sie
   ueber, seit die Eintraege nicht mehr umbrechen duerfen. */
@media (max-width: 1240px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
}

/* ==========================================================================
   Hero (CI S.12: Sektionsmarke → Akzentlinie → Überschrift → Lede → CTA)

   Das Bild läuft randabfallend bis an die rechte Fensterkante. Der Hero
   verwendet deshalb NICHT .container — der Textspalte wird stattdessen der
   Containerrand als Innenabstand nachgebildet, damit sie mit dem übrigen
   Seitenraster fluchtet.

   Die Figur behält das Seitenverhältnis des Ausschnitts (0.95). Dadurch wird
   das Gebäude nie beschnitten. Ist die Textspalte höher, zentriert sich das
   Bild — abgeschnitten wird es nicht.
   ========================================================================== */
.hero { background: var(--enevo-espresso); color: var(--enevo-cream); overflow: hidden; }
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  align-items: stretch;          /* Bild schließt oben und unten bündig ab */
  gap: clamp(32px, 4vw, 72px);
}
.hero__content {
  padding-block: clamp(56px, 4rem + 3vw, 112px);
  padding-inline-start: max(var(--enevo-gutter), calc((100vw - var(--enevo-container)) / 2 + var(--enevo-gutter)));
}
.hero .section-mark { color: var(--enevo-terra); }
.hero__lede { color: rgba(245,241,232,.78); }

/* aspect-ratio gibt der Zeile ihre Mindesthöhe vor — dadurch richtet sich die
   Hero-Höhe nach dem Bild, solange der Text kürzer ist. Ist der Text länger,
   dehnt sich das Bild und object-fit gleicht die Differenz aus. */
/* width: 100% ist nötig: bei align-items: stretch würde aspect-ratio sonst
   die BREITE aus der gestreckten Höhe berechnen und die Spalte sprengen. */
.hero__figure { margin: 0; width: 100%; min-width: 0; aspect-ratio: 0.95; }
.hero__figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

/* Die Vertrauenszeile stand nur in dunklen Abschnitten und war deshalb hell
   gesetzt. Auf /benefits/ liegt sie inzwischen auf Weiss und war dort mit
   1,08:1 unsichtbar. Grundzustand ist jetzt dunkel, im Dunkeln kehrt sie um. */
.hero__trust {
  margin-top: var(--enevo-space-lg); padding-top: var(--enevo-space-sm);
  border-top: 1px solid var(--enevo-line);
  font-size: var(--enevo-meta); color: var(--enevo-taupe);
  max-width: 56ch;
}
.hero .hero__trust,
.section--espresso .hero__trust {
  border-top-color: rgba(245, 241, 232, .18);
  color: rgba(245, 241, 232, .66);
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 0; }
  .hero__content {
    order: 2;
    padding-inline: var(--enevo-gutter);
    padding-block: var(--enevo-space-xl);
  }
  .hero__figure { order: 1; aspect-ratio: 16 / 11; }
}

/* Unterseiten-Hero bleibt einspaltig und nutzt den normalen Container. */
.hero--sub { padding-block: clamp(56px, 4rem + 3vw, 104px); }
.hero--sub .container > .lede { max-width: 68ch; }

/* --- Sektionskopf ------------------------------------------------------- */
/* Ueberschriften vertragen mehr Breite als Fliesstext: sie sind kurz und
   gross gesetzt, jede zusaetzliche Zeile faellt hier staerker auf. */
.section-head { max-width: 900px; margin-bottom: var(--enevo-space-xl); }

/* --- Kernthemen ----------------------------------------------------------
   Text links vollständig unter der Überschrift, Bild rechts. Die Bildseite
   gibt der Seite Rhythmus, ohne den Lesefluss zu unterbrechen.
   Jede zweite Zeile dreht die Reihenfolge — Bild links, Text rechts.
   ---------------------------------------------------------------------- */
.strategy { border-top: 1px solid var(--enevo-border); padding-block: var(--enevo-space-xl); }
.strategy:last-child { border-bottom: 1px solid var(--enevo-border); }
.strategy__grid {
  display: grid; gap: clamp(28px, 4vw, 64px);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
}
.strategy__text > h3 { margin-top: 6px; }
/* Die Zuspitzung traegt in Textfarbe: vier Terra-Zeilen untereinander haben
   den Abschnitt unruhig gemacht. Groesse und Fettung tragen die Hierarchie,
   die Farbe muss es nicht. 'inherit' haelt sie auch auf dunklen Flaechen lesbar. */
.strategy__q {
  font-size: var(--enevo-lede); font-weight: 700;
  color: inherit;
  margin-top: var(--enevo-space-sm);
}
.strategy__text > p:not(.strategy__q):not(.strategy__link) { margin-top: var(--enevo-space-xs); max-width: 60ch; }
.strategy__link { margin-top: var(--enevo-space-sm); }

/* Zwei der vier Motive haben sehr helle Hintergründe (Fensterfront, weiße
   Wand). Ohne Kante verschwinden sie auf der weißen Sektion. Eine Haarlinie
   in Line definiert den Rand, ohne Gewicht hinzuzufügen. */
.strategy__figure { margin: 0; border: 1px solid var(--enevo-border); background: var(--enevo-cream); }
.strategy__figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Wechselseitig setzen: 2. und 4. Thema mit dem Bild links. */
.strategy:nth-of-type(even) .strategy__text   { order: 2; }
.strategy:nth-of-type(even) .strategy__figure { order: 1; }

@media (max-width: 860px) {
  .strategy { padding-block: var(--enevo-space-lg); }
  .strategy__grid { grid-template-columns: 1fr; gap: var(--enevo-space-sm); }
  /* Auf schmalen Geräten steht das Bild immer oben. */
  .strategy__text   { order: 2 !important; }
  .strategy__figure { order: 1 !important; margin-bottom: var(--enevo-space-2xs); }
}

/* --- Zitat -------------------------------------------------------------- */
.quote { border-left: 4px solid var(--enevo-terra); padding-left: var(--enevo-space-md); max-width: 860px; }
.quote__text { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); line-height: 1.35; font-weight: 700; }
.quote__by { margin-top: var(--enevo-space-xs); font-size: var(--enevo-meta); color: var(--enevo-taupe); }
.section--espresso .quote__by { color: rgba(245,241,232,.66); }

/* --- Prozess-Schritte --------------------------------------------------- */
.steps { display: grid; gap: var(--enevo-space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); counter-reset: step; }
.step { border-top: 2px solid var(--enevo-terra); padding-top: var(--enevo-space-xs); }
.step__mark { display: block; font-size: var(--enevo-mark); font-weight: 700; letter-spacing: var(--enevo-tracking-mark); text-transform: uppercase; color: var(--enevo-taupe); }
.step__title { margin-top: 6px; font-size: var(--enevo-h3); font-weight: 700; line-height: var(--enevo-lh-h3); }
.step__text { margin-top: var(--enevo-space-2xs); color: var(--enevo-taupe); font-size: var(--enevo-meta); line-height: 1.6; }
.section--espresso .step__text { color: rgba(245,241,232,.72); }
/* Taupe auf Espresso ergibt nur 2.78:1. Auf dunklem Grund steht die
   Sektionsmarke laut CI S.12 ohnehin in Terra — dort 5.25:1. */
.section--espresso .step__mark,
.hero .step__mark,
.card--dark .step__mark { color: var(--enevo-terra); }

/* --- Partner -------------------------------------------------------------
   Neun Innungen als ruhiges Raster statt als Aufzählung in einer Reihe.
   Haarlinie über jedem Eintrag, keine Punkte, keine Kästen (CI: visuelle Ruhe).
   ---------------------------------------------------------------------- */
.partners {
  display: grid; gap: 0 var(--enevo-space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-top: var(--enevo-space-sm);
}
.partners li {
  padding: 13px 0;
  border-top: 1px solid var(--enevo-border);
  font-size: var(--enevo-meta); font-weight: 700;
  letter-spacing: 0.02em; color: var(--enevo-text);
}
.section--espresso .partners li,
.hero .partners li { border-top-color: rgba(245,241,232,.18); color: var(--enevo-cream); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--enevo-espresso); color: var(--enevo-cream); padding-block: var(--enevo-space-2xl) var(--enevo-space-lg); }
.site-footer__grid { display: grid; gap: var(--enevo-space-lg); grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.site-footer h2 {
  font-size: var(--enevo-mark); font-weight: 700; letter-spacing: var(--enevo-tracking-mark);
  text-transform: uppercase; color: var(--enevo-terra); margin-bottom: var(--enevo-space-xs);
}
.site-footer a { color: rgba(245,241,232,.80); text-decoration: none; }
.site-footer a:hover { color: var(--enevo-terra); }
.site-footer li + li { margin-top: 10px; }
.site-footer__text { color: rgba(245,241,232,.70); font-size: var(--enevo-meta); max-width: 40ch; margin-top: var(--enevo-space-xs); }
.site-footer__bottom {
  margin-top: var(--enevo-space-2xl); padding-top: var(--enevo-space-sm);
  border-top: 1px solid rgba(245,241,232,.16);
  display: flex; flex-wrap: wrap; gap: var(--enevo-space-xs) var(--enevo-space-sm);
  justify-content: space-between; font-size: var(--enevo-meta); color: rgba(245,241,232,.60);
}
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--enevo-space-sm); }
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Formular
   ========================================================================== */
.form { max-width: 720px; }
.field { margin-bottom: var(--enevo-space-sm); }
.field label { display: block; font-size: var(--enevo-meta); font-weight: 700; margin-bottom: 8px; }
.field .req { color: var(--enevo-terra); }
/* Felder ohne Kasten. Die Website arbeitet durchgehend mit Haarlinien
   statt mit Rahmen, das Formular folgt jetzt derselben Sprache: weiße
   Fläche, eine Linie unten, sonst nichts. Die Linie ist die
   Feldbegrenzung im Sinne von WCAG 1.4.11 und hält mit 3,15:1 gegen
   Cream die geforderten 3:1. Beim Fokus wandert sie auf Terra und wird
   über einen Innenschatten doppelt so kräftig, ohne dass das Feld
   springt. */
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 14px 13px;
  font: inherit; font-size: var(--enevo-body); color: var(--enevo-espresso);
  background: var(--enevo-bg-alt);
  border: 0;
  border-bottom: 1px solid var(--enevo-field-line);
  border-radius: 3px 3px 0 0;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--enevo-taupe); }
.field input:hover, .field textarea:hover, .field select:hover { border-bottom-color: var(--enevo-taupe); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-bottom-color: var(--enevo-terra);
  box-shadow: inset 0 -1px 0 0 var(--enevo-terra);
}
.field textarea { min-height: 170px; resize: vertical; }
.field__hint { font-size: var(--enevo-meta); color: var(--enevo-taupe); margin-top: 6px; }
.field__error { display: none; font-size: var(--enevo-meta); color: var(--enevo-scale-1); font-weight: 700; margin-top: 6px; }
.field.has-error input, .field.has-error textarea { border-bottom-color: var(--enevo-scale-1); box-shadow: inset 0 -1px 0 0 var(--enevo-scale-1); }
.field.has-error .field__error { display: block; }
.field--check { display: flex; gap: 12px; align-items: flex-start; }
.field--check input { width: 20px; height: 20px; flex: none; margin-top: 2px; border-radius: 3px; accent-color: var(--enevo-terra); }
.field--check label { font-weight: 400; font-size: var(--enevo-meta); line-height: 1.5; margin: 0; }
/* Honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { padding: var(--enevo-card-pad); border-left: 4px solid var(--enevo-terra); background: var(--enevo-bg-alt); margin-bottom: var(--enevo-space-md); }
.form-note--ok { border-left-color: var(--enevo-waldgruen); }
.form-note--error { border-left-color: var(--enevo-scale-1); }

/* --- Kontaktangaben ----------------------------------------------------- */
.contact-list dt { font-size: var(--enevo-mark); font-weight: 700; letter-spacing: var(--enevo-tracking-mark); text-transform: uppercase; color: var(--enevo-taupe); margin-top: var(--enevo-space-sm); }
.contact-list dd { margin: 6px 0 0; font-size: var(--enevo-lede); font-weight: 700; }

/* --- Rechtstexte -------------------------------------------------------- */
.legal { max-width: var(--enevo-measure); }
.legal h2 { font-size: var(--enevo-h3); margin-top: var(--enevo-space-lg); }
.legal h3 { font-size: var(--enevo-body); margin-top: var(--enevo-space-md); }
.legal p, .legal ul { margin-top: var(--enevo-space-xs); }
.legal ul li { position: relative; padding-left: 22px; margin-top: 6px; }
.legal ul li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 12px; height: 2px; background: var(--enevo-terra); }
.legal a { color: var(--enevo-accent-text); }
/* Redaktionsmarker. Espresso statt Bewertungsrot: die Bewertungsskala ist
   laut CI S.04 ausschließlich für Auswertungen reserviert. 15.32:1. */
.todo {
  display: inline-block; padding: 3px 9px; margin-left: 6px;
  background: var(--enevo-espresso); color: var(--enevo-cream);
  border-left: 3px solid var(--enevo-terra);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  vertical-align: middle;
}

/* --- Hero-Kennzahlpanel (statt Stockfoto) ------------------------------- */
.hero__panel {
  border: 1px solid rgba(245,241,232,.20);
  background: var(--enevo-espresso-soft);   /* CI S.03: abgesetzte dunkle Karte */
  padding: clamp(28px, 3vw, 44px);
}
.hero__panel .section-mark { color: var(--enevo-terra); }
.hero__stats { display: grid; gap: var(--enevo-space-sm); margin: 0; }
.hero__stats > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--enevo-space-xs); padding-bottom: var(--enevo-space-sm); border-bottom: 1px solid rgba(245,241,232,.14); }
.hero__stats > div:last-child { border-bottom: 0; padding-bottom: 0; }
.hero__stats dt { font-size: var(--enevo-mark); font-weight: 700; letter-spacing: var(--enevo-tracking-mark); text-transform: uppercase; color: rgba(245,241,232,.66); }
.hero__stats dd { margin: 0; font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem); line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--enevo-terra); }
.hero__panel-note { margin-top: var(--enevo-space-sm); color: rgba(245,241,232,.60); }

/* --- Partnerblock -------------------------------------------------------- */
.partner-block { margin-top: var(--enevo-space-2xl); padding-top: var(--enevo-space-md); border-top: 2px solid var(--enevo-terra); }
.partner-block__note {
  margin-top: var(--enevo-space-md); padding-top: var(--enevo-space-sm);
  border-top: 1px solid var(--enevo-border);
  font-size: var(--enevo-meta); color: var(--enevo-taupe); max-width: 72ch;
}


/* --- Systemablauf -------------------------------------------------------- */
.system-flow {
  display: grid; gap: 0; margin-top: var(--enevo-space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  border-top: 2px solid var(--enevo-terra);
}
.system-flow__item { padding: var(--enevo-space-sm) var(--enevo-space-xs) var(--enevo-space-sm) 0; border-right: 1px solid var(--enevo-border); }
.system-flow__item:last-child { border-right: 0; }
/* Kleines Themenbild ueber jedem Punkt, verlinkt auf die Strategieseite. */
.system-flow__bild { display: block; overflow: hidden; margin-bottom: var(--enevo-space-xs); }
.system-flow__bild img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.system-flow__item:hover .system-flow__bild img,
.system-flow__item:focus-within .system-flow__bild img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .system-flow__bild img { transition: none; }
  .system-flow__item:hover .system-flow__bild img { transform: none; }
}
/* Fuenf Spalten lassen je rund 216px Textbreite. In der H3-Groesse braucht
   "Pensionsmanagement" 251px und bräche um; bei 19px sind es 199px und die
   Bezeichnungen bleiben einzeilig. */
.system-flow__item h3 {
  margin-top: 6px; font-size: 19px; line-height: 1.25;
}
.system-flow__item h3 a { color: inherit; text-decoration: none; border-bottom: 2px solid transparent; }
.system-flow__item h3 a:hover { color: var(--enevo-accent-text); border-bottom-color: var(--enevo-terra); }
.section--espresso .system-flow { border-top-color: var(--enevo-terra); }
.section--espresso .system-flow__item { border-right-color: rgba(245, 241, 232, .18); }
.section--espresso .system-flow__item h3 a:hover { color: var(--dia-terra-45); }
@media (max-width: 700px) {
  .section--espresso .system-flow__item { border-bottom-color: rgba(245, 241, 232, .18); }
}
.system-flow__item .card__text { margin-top: var(--enevo-space-2xs); }
@media (max-width: 700px) {
  .system-flow__item { border-right: 0; border-bottom: 1px solid var(--enevo-border); padding-right: 0; }
  .system-flow__item:last-child { border-bottom: 0; }
}

/* --- Kontakt-Layout ------------------------------------------------------ */
.contact-layout { display: grid; gap: var(--enevo-space-2xl); grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: start; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; gap: var(--enevo-space-xl); } }

code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: var(--enevo-cream); padding: 2px 6px; }

/* --- Bildband ------------------------------------------------------------ */
.image-band { margin: 0; background: var(--enevo-espresso); }
.image-band img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.image-band--wide img { aspect-ratio: 34 / 10; }
/* Motivstreifen der Initiativen: alle drei Vorlagen liegen bei rund 1,87,
   das Verhaeltnis ist deshalb fest, damit die Seiten gleich rhythmisiert sind. */
.image-band--motiv img { aspect-ratio: 1717 / 916; }
/* Breiter Streifen fuer die Mitarbeiterseite: die drei Motive liegen bei
   rund 2:1 und werden so nicht beschnitten. */
.image-band--breit img { aspect-ratio: 2 / 1; }
@media (max-width: 700px) { .image-band--breit img { aspect-ratio: 4 / 3; } }
/* Die Cleanup-Karte traegt Titel und Legende; ein erzwungenes 3:2 haette
   beides angeschnitten. Sie behaelt ihr eigenes Verhaeltnis. */
.image-band--karte img { aspect-ratio: 2626 / 1506; }
@media (max-width: 700px) { .image-band--motiv img { aspect-ratio: 4 / 3; } }
/* Beleg: eine Abbildung im Textfluss mit Quellenangabe darunter. */
.beleg { margin: 0; max-width: 560px; }
.beleg img { display: block; width: 100%; height: auto; border: 1px solid var(--enevo-line); }
.beleg figcaption { margin-top: var(--enevo-space-2xs); font-size: var(--enevo-meta); color: var(--enevo-taupe); }
.beleg--breit { max-width: 100%; }
.image-band figcaption {
  padding-block: var(--enevo-space-xs);
  font-size: var(--enevo-meta); color: rgba(245,241,232,.62);
}
@media (max-width: 700px) { .image-band--wide img { aspect-ratio: 16 / 9; } }

/* Einleitung ueber dem Mosaik. */
.team-einleitung { margin-bottom: var(--enevo-space-lg); }

/* --- Beitraege: Liste mit Vignetten --------------------------------------
   Vier Zeilen untereinander, links ein Quadrat, rechts Bezeichnung und Satz.
   Zurueckhaltender als Karten und braucht deutlich weniger Hoehe. */
.beitraege { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--enevo-line); }
.beitrag {
  display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--enevo-space-sm); align-items: center;
  padding: var(--enevo-space-sm) 0;
  border-bottom: 1px solid var(--enevo-line);
}
.beitrag__bild { display: block; }
.beitrag__bild img { display: block; width: 96px; height: 96px; object-fit: cover; }
.beitrag__label {
  display: block; font-size: var(--enevo-mark); font-weight: 700;
  letter-spacing: var(--enevo-tracking-mark); text-transform: uppercase;
  color: var(--enevo-accent-text); margin-bottom: 6px;
}
.beitrag__text p { max-width: var(--enevo-measure); }
.beitraege__mehr { margin-top: var(--enevo-space-md); }

@media (max-width: 560px) {
  .beitrag { grid-template-columns: 64px minmax(0, 1fr); gap: var(--enevo-space-xs); align-items: start; }
  .beitrag__bild img { width: 64px; height: 64px; }
}

/* --- Team: Mosaik --------------------------------------------------------- */
/* Vier verschieden breite Spalten mit gestapelten Kacheln. Das erzeugt die
   Groessenunterschiede zuverlaessig: eine Dichtepackung ueber Zeilenspannen
   liess am Ende grosse Loecher, weil grosse Kacheln nicht mehr in die
   verbliebenen Luecken passten. */
.team-mosaik {
  display: grid;
  grid-template-columns: 1.15fr 1.5fr 1fr 1.3fr;
  gap: 6px; align-items: start;
}
.team-spalte { display: flex; flex-direction: column; gap: 6px; }

.person { position: relative; margin: 0; overflow: hidden; background: var(--enevo-line); }
.person img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.person--quer img { aspect-ratio: 3 / 2; }
.person--quadrat img { aspect-ratio: 1 / 1; }
.person--band img { aspect-ratio: 2 / 1; }

/* Ruhige Vergroesserung beim Ueberfahren: das Mosaik soll leben, ohne dass
   die Kachel ihren Platz im Raster veraendert. */
.person img { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.person:hover img, .person:focus-within img { transform: scale(1.045); }

.person figcaption {
  position: absolute; inset: auto 0 0 0;
  /* Der Verlauf deckt bis 78 Prozent voll; das Polster oben sorgt dafuer,
     dass der Name unterhalb der Ausblendung beginnt. Sonst saesse er auf
     hellen Portraets auf fast durchsichtigem Grund. */
  padding: var(--enevo-space-md) var(--enevo-space-xs) var(--enevo-space-xs);
  color: var(--enevo-cream);
  background: linear-gradient(to top, rgba(31, 26, 20, .94) 0%, rgba(31, 26, 20, .88) 78%, rgba(31, 26, 20, 0) 100%);
  opacity: 0; transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
}
.person:hover figcaption,
.person:focus-within figcaption { opacity: 1; transform: none; }

/* Die Vorlage blendet die Beschriftung nur beim Ueberfahren ein. Auf
   Touchgeraeten gibt es kein Hover, dort bliebe sie unerreichbar. */
@media (hover: none), (max-width: 900px) {
  .person figcaption { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .person figcaption, .person img { transition: none; }
  .person:hover img, .person:focus-within img { transform: none; }
}

.person figcaption strong { display: block; font-size: clamp(.9375rem, 0.9rem + 0.18vw, 1.0625rem); line-height: 1.3; }
.person figcaption span { display: block; margin-top: 3px; font-size: var(--enevo-meta); line-height: 1.45; color: var(--dia-terra-45); }

/* Ab hier tragen die Spalten nicht mehr: sie wuerden zu schmal. Die
   Spaltenbehaelter treten mit display:contents aus dem Layout, ihre Kacheln
   werden direkte Rasterfelder. */
@media (max-width: 900px) {
  .team-mosaik { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team-spalte { display: contents; }
  .person--quer, .person--band { grid-column: span 2; }
}

/* Unter 560px schnitte die Auflage lange Komposita wie
   "Firmenkundenbetreuung" seitlich ab und verdeckte fast das ganze
   Portraet. Deshalb tritt die Beschriftung wieder unter das Bild. */
@media (max-width: 560px) {
  .team-mosaik { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--enevo-space-xs); }
  .person { overflow: visible; background: none; }
  .person figcaption {
    position: static; opacity: 1; transform: none;
    margin-top: var(--enevo-space-2xs); padding: var(--enevo-space-2xs) 0 var(--enevo-space-xs);
    background: none; color: var(--enevo-espresso);
    border-top: 2px solid var(--enevo-terra);
    hyphens: auto;
  }
  .person figcaption span { color: var(--enevo-taupe); }
}

/* --- Partnermarken auf eigenem Grund -------------------------------------
   Wortmarke und Zeichen von everwave sind weiss und tragen nur auf dunklem
   Grund. Sie behalten deshalb ihr Markenblau und stehen als Flaeche, statt
   auf unserem Cream freigestellt zu werden. */
.marken {
  display: grid; gap: var(--enevo-space-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: center; margin-top: var(--enevo-space-lg);
  max-width: 760px;
}
.marke { margin: 0; }
.marke img { display: block; width: 100%; height: auto; }

/* --- Logowand: Foerderpartner mit Namen ----------------------------------
   Anders als das ruhige Partnerband auf /unternehmen/ zeigt diese Wand die
   Zeichen gross und mit Beschriftung. Die Innungen sind hier das Thema der
   Seite, nicht eine Fussnote. */
.logowand {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
/* Trennung ueber Rahmen statt ueber eingefaerbte Rasterfugen: bei neun
   Zeichen in vier Spalten bleibt die letzte Reihe unvollstaendig, und
   eingefaerbte Fugen haetten dort graue Leerfelder gezeigt. */
.logowand__feld { border: 1px solid var(--enevo-line); margin: -1px 0 0 -1px; }
.logowand--zwei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.logowand__feld {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--enevo-space-sm);
  padding: var(--enevo-space-lg) var(--enevo-space-sm);
  background: var(--enevo-bg-alt);
  transition: background .25s ease;
}
.logowand__feld:hover { background: var(--enevo-cream); }
@media (prefers-reduced-motion: reduce) { .logowand__feld { transition: none; } }

/* Die Zeichen kommen in sehr unterschiedlichen Seitenverhaeltnissen. Eine
   feste Hoehe je Feld bringt sie auf ein gemeinsames optisches Gewicht. */
.logowand__feld img {
  height: 82px; width: auto; max-width: 100%; object-fit: contain;
}
.logowand__feld figcaption {
  font-size: var(--enevo-meta); line-height: 1.4; color: var(--enevo-taupe);
  text-align: center; text-wrap: balance;
}

/* --- Partnerlogos · ruhig, nicht als Logo-Wall (CI S.09) ------------------ */
.partner-logos {
  display: grid; gap: var(--enevo-space-lg);
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  align-items: center; margin-top: var(--enevo-space-xl);
  padding-top: var(--enevo-space-lg); border-top: 1px solid var(--enevo-border);
}
.partner-logos img { max-height: 56px; width: auto; margin-inline: auto; opacity: .85; }

/* Rechtstexte enthalten nicht umbrechbare Ketten (Registernummern,
   E-Mail-Adressen, URLs). Auf sehr schmalen Geräten müssen sie brechen
   dürfen, sonst läuft die Seite waagrecht über. */
.legal { overflow-wrap: anywhere; }
.legal a { word-break: break-word; }

/* ==========================================================================
   Videos · Zwei-Klick-Lösung
   Beim Seitenaufruf wird ausschließlich das lokale Vorschaubild geladen.
   Erst der Klick bindet YouTube ein (youtube-nocookie.com). Ohne Klick
   entsteht keine Verbindung zu Google und kein Cookie.
   ========================================================================== */
.video-grid {
  display: grid; gap: var(--enevo-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.video { margin: 0; }
.video__start {
  position: relative; display: block; width: 100%; padding: 0;
  border: 1px solid var(--enevo-border); background: var(--enevo-espresso);
  cursor: pointer; overflow: hidden;
}
.video__start img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: opacity var(--enevo-transition); }
.video__start:hover img { opacity: .82; }
.video__play {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.video__play::before {
  content: ""; width: 66px; height: 66px; border-radius: 50%;
  background: var(--enevo-cream);
  box-shadow: 0 6px 26px rgba(31,26,20,.35);
  transition: background var(--enevo-transition), transform var(--enevo-transition);
}
.video__play::after {
  content: ""; position: absolute;
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--enevo-espresso);
  transform: translateX(3px);
  transition: border-color var(--enevo-transition);
}
.video__start:hover .video__play::before { background: var(--enevo-terra); transform: scale(1.06); }
.video__start:hover .video__play::after  { border-left-color: var(--enevo-cream); }
@media (prefers-reduced-motion: reduce) {
  .video__start:hover .video__play::before { transform: none; }
}
.video__frame { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--enevo-border); background: var(--enevo-espresso); }
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video figcaption { margin-top: var(--enevo-space-xs); padding-top: var(--enevo-space-2xs); border-top: 2px solid var(--enevo-terra); }
.video__mark {
  display: block; font-size: var(--enevo-mark); font-weight: 700;
  letter-spacing: var(--enevo-tracking-mark); text-transform: uppercase;
  color: var(--enevo-taupe);
}
.video figcaption strong { display: block; margin-top: 5px; font-size: var(--enevo-h3); line-height: var(--enevo-lh-h3); }
.section--espresso .video__mark { color: var(--enevo-terra); }
.section--espresso .video figcaption strong { color: var(--enevo-cream); }

.video-hinweis {
  margin-top: var(--enevo-space-lg); padding-top: var(--enevo-space-sm);
  border-top: 1px solid var(--enevo-border);
  font-size: var(--enevo-meta); color: var(--enevo-taupe); max-width: 78ch;
}
.section--espresso .video-hinweis { border-top-color: rgba(245,241,232,.18); color: rgba(245,241,232,.66); }

/* ==========================================================================
   Stufen · nummerierte Abfolge
   Ein zusammenhängendes System wird als Abfolge dargestellt, nicht als
   sieben gleich aussehende Karten nebeneinander. Die durchlaufende Linie
   links macht sichtbar, dass die Schritte aufeinander aufbauen.
   ========================================================================== */
.stufen { list-style: none; margin: 0; padding: 0; counter-reset: stufe; }
.stufe {
  display: grid;
  grid-template-columns: minmax(72px, 96px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  padding-block: var(--enevo-space-md);
  border-top: 1px solid var(--enevo-border);
  position: relative;
}
.stufe:last-child { border-bottom: 1px solid var(--enevo-border); }
.stufe__nr {
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  line-height: 1; font-weight: 700; letter-spacing: -0.02em;
  color: var(--enevo-terra);
}
.stufe__name { font-size: var(--enevo-h3); line-height: var(--enevo-lh-h3); font-weight: 700; }
.stufe__claim, .leistung__claim {
  margin-top: 4px;
  font-size: var(--enevo-mark); font-weight: 700;
  letter-spacing: var(--enevo-tracking-mark); text-transform: uppercase;
  color: var(--enevo-taupe);
}
.stufe__text { margin-top: var(--enevo-space-xs); max-width: 62ch; color: var(--enevo-text); }

.section--espresso .stufe { border-top-color: rgba(245,241,232,.18); }
.section--espresso .stufe:last-child { border-bottom-color: rgba(245,241,232,.18); }
.section--espresso .stufe__claim { color: var(--enevo-terra); }
.section--espresso .stufe__text { color: rgba(245,241,232,.80); }

@media (max-width: 620px) {
  .stufe { grid-template-columns: 1fr; gap: var(--enevo-space-2xs); }
  .stufe__nr { font-size: 1.5rem; }
}

/* --- Zusage ---------------------------------------------------------------
   Zentrale Aussage in einer dunklen Sektion. Der helle Kasten trägt laut
   CI S.09 die positiven Inhalte, hier die Entlastungszusage.
   -------------------------------------------------------------------- */
.zusage {
  max-width: var(--enevo-measure);
  margin-top: var(--enevo-space-lg);
  border-left: 4px solid var(--enevo-terra);
  padding-left: var(--enevo-space-sm);
}
/* Mehrere Absaetze im Kasten brauchen einen Abstand, sonst laufen sie
   ineinander. */
.zusage p + p { margin-top: var(--enevo-space-xs); }

/* --- Markenzeichen einer Untermarke --------------------------------------
   Das Pensiona-Lockup führt eigene Farben (Terra und Espresso) und braucht
   deshalb einen hellen Untergrund. Nur auf .section--white oder --cream.
   -------------------------------------------------------------------- */
/* Pensiona-Wortmarke im dunklen Hero, oben rechts. Cream mit Terra-Zusatz,
   deshalb ausschließlich auf Espresso-Flächen.
   Sie steht im Quelltext vor der Sektionsmarke, damit sie auf schmalen
   Geräten ohne Positionierung an der richtigen Stelle landet. */
.hero--marke .container { position: relative; }
.hero__marke { display: block; }
.hero__marke svg { display: block; width: min(210px, 58vw); height: auto; }
/* Das vertikale Lockup ist nahezu quadratisch. Bei der Breite des flachen
   Pensiona-Zeichens (210x60) waere es 210x214 und damit dreimal so hoch.
   Es bekommt deshalb eine eigene, kleinere Breite. */
.hero__marke--hoch svg { width: min(124px, 32vw); }

@media (min-width: 821px) {
  .hero__marke {
    position: absolute;
    top: 0;
    right: var(--enevo-gutter);
  }
  /* Platz für die Wortmarke freihalten. Ohne das lief die Überschrift
     zwischen 821 und 1024 px unter das Logo. */
  .hero--marke h1,
  .hero--marke .hero__lede { max-width: calc(100% - 210px - var(--enevo-space-lg)); }
  /* Das schmalere Lockup braucht weniger Freiraum. */
  .hero--marke:has(.hero__marke--hoch) h1,
  .hero--marke:has(.hero__marke--hoch) .hero__lede { max-width: calc(100% - 124px - var(--enevo-space-lg)); }
}
@media (max-width: 820px) {
  .hero__marke { margin-bottom: var(--enevo-space-lg); }
}

/* ==========================================================================
   Diagramm · Bewertungsebenen
   Die Bandfarben sind Abstufungen von Terra und Taupe über Cream, damit
   nichts außerhalb der Palette liegt. Waldgrün markiert die Rückdeckung,
   also den gedeckten Anteil — laut CI S.04 ist Waldgrün für positive Werte
   in Diagrammen vorgesehen.
   ========================================================================== */
:root {
  --dia-terra-45: #DABFA8;   /* Terra 45 % über Cream — Handelsbilanz     */
  --dia-terra-18: #EADDCE;   /* Terra 18 % über Cream — Schraffur         */
  --dia-taupe-70: #948B7E;   /* Taupe 70 % über Cream — Steuerbilanz      */
}

.diagramm { margin: 0 0 var(--enevo-space-2xl); }
/* Das Diagramm braucht Breite. Auf schmalen Geräten scrollt es waagrecht
   in seinem eigenen Rahmen, die Seite selbst bleibt ruhig. */
.diagramm__flaeche {
  overflow-x: auto;
  border: 1px solid var(--enevo-border);
  background: var(--enevo-cream);
  padding: clamp(12px, 2vw, 28px);
  -webkit-overflow-scrolling: touch;
}
.diagramm__flaeche svg { display: block; width: 100%; min-width: 720px; height: auto; }
.diagramm figcaption {
  margin-top: var(--enevo-space-sm);
  font-size: var(--enevo-meta); line-height: 1.6;
  color: var(--enevo-taupe); max-width: var(--enevo-measure);
}
.diagramm__hinweis { margin-top: var(--enevo-space-lg); max-width: var(--enevo-measure); }
#bewertungsebenen .stufen { margin-bottom: var(--enevo-space-xl); }

/* ==========================================================================
   Leistungen · gruppierte Liste
   Zwölf Punkte in drei Gruppen. Bewusst keine Kacheln: zwölf gleich
   aussehende Karten wären genau die Wand, die die CI vermeiden will.
   Gruppentitel über einer Terra-Linie, Punkte in zwei Spalten mit Haarlinie.
   ========================================================================== */
.leistungsgruppe + .leistungsgruppe { margin-top: var(--enevo-space-2xl); }
.leistungsgruppe__titel {
  font-size: var(--enevo-mark); font-weight: 700;
  letter-spacing: var(--enevo-tracking-mark); text-transform: uppercase;
  color: var(--enevo-taupe);
  padding-bottom: var(--enevo-space-2xs);
  border-bottom: 2px solid var(--enevo-terra);
}
.leistungen {
  display: grid; gap: 0 var(--enevo-space-2xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.leistung { padding: var(--enevo-space-sm) 0; border-bottom: 1px solid var(--enevo-border); }
.leistung__titel { font-size: var(--enevo-h3); line-height: var(--enevo-lh-h3); font-weight: 700; }
.leistung__claim { margin-top: var(--enevo-space-2xs); }
.leistung__text { margin-top: var(--enevo-space-2xs); color: var(--enevo-taupe); max-width: 56ch; }


/* ==========================================================================
   Karriere
   ========================================================================== */

/* Bildband zwischen Hero und erstem Abschnitt. Randlos über die volle
   Breite, damit der Sprung von der dunklen Hero-Fläche in den hellen
   Inhalt eine Zäsur bekommt und nicht nur eine Farbkante ist. */
.bandbild { margin: 0; }
.bandbild img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
}
@media (min-width: 900px) {
  .bandbild img { aspect-ratio: 21 / 7; }
}

/* Stellen als Ausklapper. <details> trägt das Auf- und Zuklappen selbst,
   damit die Liste auch ohne JavaScript vollständig bedienbar bleibt. */
.stellen { border-top: 1px solid var(--enevo-border); }
.stelle { border-bottom: 1px solid var(--enevo-border); }
.stelle__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--enevo-space-2xs) var(--enevo-space-sm);
  padding: var(--enevo-space-sm) 40px var(--enevo-space-sm) 0;
  position: relative; cursor: pointer; list-style: none;
}
.stelle__kopf::-webkit-details-marker { display: none; }
.stelle__titel {
  font-size: var(--enevo-h3); line-height: var(--enevo-lh-h3);
  font-weight: 700; flex: 1 1 320px; min-width: 0;
}
/* Eigenes Zeichen statt des Dreiecks: zwei Striche, die zum Plus werden.
   Der senkrechte verschwindet beim Öffnen, das Minus bleibt stehen. */
.stelle__kopf::before,
.stelle__kopf::after {
  content: ""; position: absolute; right: 4px; top: calc(var(--enevo-space-sm) + 0.62em);
  width: 18px; height: 2px; background: var(--enevo-terra-text);
  transition: transform .18s ease, opacity .18s ease;
}
.stelle__kopf::after { transform: rotate(90deg); }
.stelle[open] .stelle__kopf::after { transform: rotate(0deg); opacity: 0; }
.stelle__kopf:hover .stelle__titel { color: var(--enevo-terra-text); }
.stelle__kopf:focus-visible { outline: 2px solid var(--enevo-terra); outline-offset: 4px; }

.stelle__tags { display: flex; flex-wrap: wrap; gap: var(--enevo-space-2xs); }
.tag {
  font-size: var(--enevo-mark); font-weight: 700;
  letter-spacing: var(--enevo-tracking-mark); text-transform: uppercase;
  color: var(--enevo-taupe);
  padding: 4px 10px; border: 1px solid var(--enevo-border);
  border-radius: var(--enevo-radius); white-space: nowrap;
}

.stelle__inhalt { padding: 0 0 var(--enevo-space-lg); max-width: var(--enevo-measure); }
.stelle__inhalt h4 {
  font-size: var(--enevo-mark); font-weight: 700;
  letter-spacing: var(--enevo-tracking-mark); text-transform: uppercase;
  color: var(--enevo-taupe); margin-top: var(--enevo-space-sm);
}
.stelle__inhalt ul { margin: var(--enevo-space-2xs) 0 0; padding-left: 0; list-style: none; }
.stelle__inhalt li { padding: 6px 0 6px 22px; position: relative; }
.stelle__inhalt li::before {
  content: ""; position: absolute; left: 0; top: 0.82em;
  width: 8px; height: 1px; background: var(--enevo-terra);
}
.stelle__cta { margin-top: var(--enevo-space-md); }

.stellen__note {
  margin-top: var(--enevo-space-lg); max-width: var(--enevo-measure);
  color: var(--enevo-taupe);
}

/* ==========================================================================
   Direktvergleich zweier Quoten
   Zwei Balken statt zweier Zahlen: der Abstand soll sichtbar sein, ohne
   dass jemand im Kopf rechnet. Die schwächere Quote läuft gedämpft, damit
   die Aussage in eine Richtung zeigt.
   ========================================================================== */
.vergleich {
  max-width: var(--enevo-measure);
  margin-top: var(--enevo-space-2xl);
  padding-top: var(--enevo-space-lg);
  border-top: 1px solid var(--enevo-border);
}
.vergleich__titel {
  font-size: var(--enevo-mark); font-weight: 700;
  letter-spacing: var(--enevo-tracking-mark); text-transform: uppercase;
  color: var(--enevo-taupe); margin-bottom: var(--enevo-space-md);
}
.vergleich__zeile + .vergleich__zeile { margin-top: var(--enevo-space-md); }
.vergleich__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 4px var(--enevo-space-sm);
  margin-bottom: 10px;
}
.vergleich__name { font-weight: 700; }
.vergleich__wert {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1;
  font-weight: 700; letter-spacing: -0.02em; color: var(--enevo-accent-text);
}
.vergleich__spur { height: 10px; background: var(--enevo-line); }
.vergleich__balken { height: 100%; background: var(--enevo-terra); }
.vergleich__zeile--gedaempft .vergleich__wert { color: var(--enevo-taupe); }
.vergleich__zeile--gedaempft .vergleich__balken { background: var(--dia-terra-45); }
/* Die CSP der Website erlaubt style-src 'self'. Inline-style-Attribute
   greifen in der Produktion nicht, Breiten und Abstaende gehoeren
   deshalb ins Stylesheet. */
.vergleich__balken--dienstrad { width: 10%; }
.vergleich__balken--bav { width: 47.7%; }
.vergleich__note {
  margin-top: var(--enevo-space-md); color: var(--enevo-taupe);
}


/* --- Hero: Fließtext und die zwei Strategien ------------------------------
   Die beiden Strategien stehen als Liste statt im Fließtext: sie sind die
   eigentliche Aussage des Aufmachers und führen direkt auf ihre Seiten.
   -------------------------------------------------------------------- */
.hero__text {
  margin-top: var(--enevo-space-sm);
  max-width: 46ch;
  color: rgba(245,241,232,.78);
}
.hero__strategien {
  list-style: none;
  margin: var(--enevo-space-sm) 0 0;
  padding: 0;
  max-width: 46ch;
}
.hero__strategien li + li { margin-top: 2px; }
.hero__strategien a {
  display: flex;
  align-items: baseline;
  gap: var(--enevo-space-xs);
  padding: 12px 0;
  border-top: 1px solid rgba(245,241,232,.14);
  font-size: var(--enevo-h3);
  line-height: var(--enevo-lh-h3);
  font-weight: 700;
  color: var(--enevo-cream);
  text-decoration: none;
  transition: color .18s ease, padding-left .18s ease;
}
.hero__strategien li:last-child a { border-bottom: 1px solid rgba(245,241,232,.14); }
.hero__strategien a:hover,
.hero__strategien a:focus-visible { color: var(--enevo-terra); padding-left: 4px; }
.hero__nr {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--enevo-terra);
  flex-shrink: 0;
  min-width: 2.1em;      /* hält die Titel in einer Flucht */
}

/* Die Startseiten-Überschrift ist länger als eine Schlagzeile und steht in
   der schmaleren linken Spalte. Eine Stufe kleiner als die Unterseiten hält
   sie bei drei Zeilen, statt den Aufmacher unter den Bildschirmrand zu
   drücken. */
.hero:not(.hero--sub) h1 { font-size: clamp(2rem, 1.35rem + 2.4vw, 3.25rem); }

/* ==========================================================================
   Standortkarte
   Zwei-Klick-Lösung wie bei den Filmen: vor dem Klick liegt nur eine
   Textfläche auf der Seite, das Kartenmaterial von OpenStreetMap wird erst
   danach geladen. Ohne JavaScript bleibt die Fläche mit dem Hinweis stehen,
   die Adressen darunter tragen die Seite auch allein.
   ========================================================================== */
.karte {
  position: relative;
  margin: 0;
  border: 1px solid var(--enevo-border);
  background: var(--enevo-cream);
}
.karte__flaeche { height: clamp(340px, 46vw, 560px); width: 100%; background: var(--enevo-cream); }
.karte__start {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: var(--enevo-space-2xs);
  padding: clamp(24px, 5vw, 56px);
  background: var(--enevo-cream);
  border: 0; text-align: left; cursor: pointer;
}
.karte__start:hover .karte__titel { color: var(--enevo-terra-text); }
.karte__start:focus-visible { outline: 2px solid var(--enevo-terra); outline-offset: -4px; }
.karte__mark {
  font-size: var(--enevo-mark); font-weight: 700;
  letter-spacing: var(--enevo-tracking-mark); text-transform: uppercase;
  color: var(--enevo-taupe);
}
.karte__titel {
  font-size: var(--enevo-h3); line-height: var(--enevo-lh-h3); font-weight: 700;
  color: var(--enevo-text); transition: color .18s ease;
}
.karte__titel::after { content: " →"; color: var(--enevo-terra); }
.karte__text { max-width: 52ch; color: var(--enevo-taupe); font-size: var(--enevo-meta); line-height: 1.6; }
/* Die Quellenangabe erscheint erst mit dem Kartenmaterial. Vorher gibt es
   nichts zu belegen, und sie läge sonst unter der Startfläche. */
.karte__quelle { display: none; }
.karte--aktiv .karte__quelle {
  display: block;
  padding: 10px var(--enevo-space-sm);
  border-top: 1px solid var(--enevo-border);
  font-size: var(--enevo-meta); color: var(--enevo-taupe);
}
.karte--aktiv .karte__start { display: none; }

.karte__legende {
  display: flex; flex-wrap: wrap; gap: var(--enevo-space-sm) var(--enevo-space-lg);
  list-style: none; margin: var(--enevo-space-sm) 0 0; padding: 0;
  font-size: var(--enevo-meta); color: var(--enevo-taupe);
}
.karte__legende li { display: flex; align-items: center; gap: var(--enevo-space-2xs); }
.karte__punkt { width: 12px; height: 12px; display: inline-block; }
.karte__punkt--terra { background: var(--enevo-terra); }
.karte__punkt--espresso { background: var(--enevo-espresso); }

/* Leaflet an das CI angleichen. Die Kacheln laufen entsättigt und leicht
   warm, damit die Karte neben Cream und Espresso nicht als Fremdkörper
   sitzt und die beiden Stecknadeln die einzigen Farbpunkte bleiben. */
.karte .leaflet-container { font-family: var(--enevo-font); background: var(--enevo-cream); }
.karte .leaflet-tile-pane { filter: grayscale(1) sepia(.18) contrast(.92) brightness(1.06); }
.karte .leaflet-bar a, .karte .leaflet-bar a:hover {
  background: #fff; color: var(--enevo-espresso); border-bottom-color: var(--enevo-border);
}
.karte .leaflet-bar a:focus-visible { outline: 2px solid var(--enevo-terra); outline-offset: 2px; }
.karte .leaflet-control-attribution {
  background: rgba(245,241,232,.92); color: var(--enevo-taupe); font-size: 11px;
}
.karte .leaflet-control-attribution a { color: var(--enevo-taupe); }
.karte .leaflet-popup-content-wrapper {
  background: var(--enevo-cream); color: var(--enevo-text);
  border-radius: var(--enevo-radius); border: 1px solid var(--enevo-border); box-shadow: none;
}
.karte .leaflet-popup-tip { background: var(--enevo-cream); border: 1px solid var(--enevo-border); box-shadow: none; }
.karte .leaflet-popup-content { margin: 16px; font-size: var(--enevo-meta); line-height: 1.5; }
.karte .leaflet-container a.leaflet-popup-close-button { color: var(--enevo-taupe); }
.karte .popup-marke {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: var(--enevo-tracking-mark); text-transform: uppercase;
  color: var(--enevo-terra-text); margin-bottom: 8px;
}
.karte .popup-name { display: block; font-weight: 700; color: var(--enevo-espresso); margin-bottom: 4px; }
.karte .pin svg { display: block; }

.standorte {
  display: grid; gap: var(--enevo-space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  margin-top: var(--enevo-space-lg);
}
.card__meta { margin-top: var(--enevo-space-2xs); font-size: var(--enevo-meta); color: var(--enevo-taupe); }
.card__cta { margin-top: var(--enevo-space-sm); }

/* Ersatz für zwei Inline-Abstände: die CSP der Seite erlaubt keine
   style-Attribute, die Regeln standen dort also wirkungslos. */
.card--abstand { margin-top: var(--enevo-space-lg); }
.field__hint--abstand { margin-top: var(--enevo-space-xs); }


/* ---- Abstands-Utilities ------------------------------------------------ */
.abstand-md { margin-top: var(--enevo-space-md); }
.abstand-lg { margin-top: var(--enevo-space-lg); }
.abstand-xl { margin-top: var(--enevo-space-xl); }


/* ---- uebernommen aus Version 1: landing.css ---- */
/* ==========================================================================
   Landingpage "Strategie Mittelstand"
   Eigenstaendiges Layout fuer die Kaltakquise. Typografie und Akzentfarben
   folgen der CI der Website: Arial statt Fraunces und Inter, keine
   Kursivauszeichnung, Ueberschriften fett. Alles uebrige stammt aus der
   Vorlage. Jede Regel haengt an .gc-root und kann den Rest der Website
   nicht beeinflussen.
   ========================================================================== */

/* Auf .gc-root beschraenkt: die Vorlage setzte diese Namen global
   und ueberschrieb damit gleichnamige Tokens der neuen Fassung. */
.gc-root {
  /* Schrift und Akzent kommen aus der CI der Website: Arial, und auf
     dunklem Grund der aufgehellte Terra-Ton, damit die Ueberschriften
     denselben Klang haben wie auf den uebrigen Seiten. */
  --gc-font: Arial, Helvetica, sans-serif;
  --terra-hell: #DABFA8;
  --espresso: #1F1A14;
  --espresso-soft: #2A241D;
  --ink: #3A342C;
  --cream: #F5F1E8;
  --cream-warm: #EFEAE0;
  --white: #FFFFFF;
  --terra: #B8825A;
  --terra-dark: #9C6C48;
  --terra-text: #8D6546;
  --taupe: #6B5F50;
  --line: #DCD5C7;
  --wald: #3E5F45;
  --line-dark: rgba(245, 241, 232, 0.14);
}

.gc-root *, .gc-root { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

.gc-root {
  font-family: var(--gc-font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--espresso);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.gc-root .gc-serif {
  font-family: var(--gc-font);
  font-weight: 700;
  letter-spacing: -0.018em;
}

.gc-root .gc-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.gc-root .gc-narrow { max-width: 880px; }

.gc-root .gc-eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--terra);
  display: block;
  margin-bottom: 20px;
}
.gc-root .gc-eyebrow-light { color: rgba(184, 130, 90, 0.95); }

.gc-root h2.gc-h2 {
  font-family: var(--gc-font);
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.022em;
  margin-bottom: 20px;
}
.gc-root .gc-h2 .gc-acc { color: var(--terra-text); }
.gc-root .gc-dark .gc-h2 .gc-acc { color: var(--terra-hell); }

.gc-root .gc-lede {
  font-size: 18px;
  line-height: 1.62;
  color: var(--taupe);
  max-width: 720px;
}
.gc-root .gc-dark .gc-lede { color: rgba(245, 241, 232, 0.72); }

.gc-root .gc-sec { padding: 110px 0; }
.gc-root .gc-sec-tight { padding: 80px 0; }
.gc-root .gc-dark { background: var(--espresso); color: var(--cream); }
.gc-root .gc-light { background: var(--cream); }
.gc-root .gc-warm { background: var(--cream-warm); }

.gc-root .gc-head { max-width: 760px; margin-bottom: 56px; }

/* ---------- LESEFORTSCHRITT ---------- */
.gc-root .gc-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--terra); z-index: 200; transition: width 0.1s linear;
}

/* ---------- NAV ---------- */
.gc-root .gc-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  padding: 18px 0;
  transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
.gc-root .gc-nav.gc-scrolled {
  background: rgba(31, 26, 20, 0.94);
  backdrop-filter: blur(14px);
  padding: 11px 0;
  box-shadow: 0 1px 0 rgba(245,241,232,0.08);
}
.gc-root .gc-nav-inner { display: flex; justify-content: space-between; align-items: center; }

/* Statt Zeichen und gesetztem Schriftzug steht hier das Lockup der Website.
   Es ist 456 zu 100 breit und wird deshalb ueber die Hoehe gesteuert. */
.gc-root .gc-logo {
  display: flex; flex-direction: column; gap: 5px;
  text-decoration: none; color: var(--cream); line-height: 1;
}
.gc-root .gc-logo svg {
  display: block; height: 38px; width: auto; flex-shrink: 0;
  transition: height 0.3s ease;
}
.gc-root .gc-nav.gc-scrolled .gc-logo svg { height: 30px; }
.gc-root .gc-logo-sub {
  font-size: 8.5px; letter-spacing: 0.19em; text-transform: uppercase;
  color: rgba(245,241,232,0.55); font-weight: 700;
  margin-left: 68px; transition: opacity 0.3s ease;
}
.gc-root .gc-nav.gc-scrolled .gc-logo-sub { opacity: 0; }

.gc-root .gc-nav-links { display: flex; gap: 28px; align-items: center; }
.gc-root .gc-nav-links a {
  color: rgba(245,241,232,0.72); text-decoration: none;
  font-size: 13.5px; transition: color 0.2s;
}
.gc-root .gc-nav-links a:hover { color: var(--cream); }
.gc-root .gc-nav-cta {
  background: var(--terra); color: var(--cream) !important;
  padding: 10px 20px; font-size: 13px; font-weight: 700;
  border-radius: 2px; transition: background 0.2s;
}
.gc-root .gc-nav-cta:hover { background: var(--terra-dark); }
.gc-root .gc-burger { display: none; background: none; border: 0; color: var(--cream); cursor: pointer; padding: 6px; }

/* ---------- BUTTONS ---------- */
.gc-root .gc-btn {
  display: inline-block; background: var(--terra); color: var(--cream);
  padding: 16px 30px; font-size: 14.5px; font-weight: 700; letter-spacing: 0.01em;
  text-decoration: none; border-radius: 2px; border: 0; cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.gc-root .gc-btn:hover { background: var(--terra-dark); transform: translateY(-1px); }
.gc-root .gc-btn-ghost {
  display: inline-block; color: inherit; text-decoration: none; font-size: 14.5px;
  border-bottom: 1px solid currentColor; padding-bottom: 3px; opacity: 0.75;
  transition: opacity 0.2s;
}
.gc-root .gc-btn-ghost:hover { opacity: 1; }
.gc-root .gc-btn-ghost::after { content: " →"; }

/* ---------- HERO ---------- */
.gc-root .gc-hero {
  background: var(--espresso); color: var(--cream);
  padding: 150px 0 0; position: relative; overflow: hidden;
}
.gc-root .gc-hero-grid {
  display: grid; grid-template-columns: 1.08fr 0.92fr;
  gap: 64px; align-items: center;
}
.gc-root .gc-hero-bar { width: 56px; height: 3px; background: var(--terra); margin-bottom: 30px; }
.gc-root .gc-hero-eyebrow {
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245,241,232,0.55); font-weight: 700; margin-bottom: 26px;
}
.gc-root .gc-hero h1 {
  font-family: var(--gc-font);
  /* Arial laeuft breiter als die Serifenschrift der Vorlage. Eine Stufe
     kleiner haelt die dreisaetzige Ueberschrift bei vier Zeilen. */
  font-size: clamp(30px, 3.3vw, 44px);
  line-height: 1.12; font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.gc-root .gc-hero h1 .gc-acc { color: var(--terra-hell); }
.gc-root .gc-hero-sub {
  font-size: 17.5px; line-height: 1.6; color: rgba(245,241,232,0.76);
  margin-bottom: 34px; max-width: 560px;
}
.gc-root .gc-hero-sub strong { color: var(--cream); font-weight: 600; }
.gc-root .gc-hero-actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }

.gc-root .gc-hero-img-wrap { position: relative; }
.gc-root .gc-hero-img {
  width: 100%; height: auto; display: block; border-radius: 3px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}
.gc-root .gc-hero-img-cap {
  position: absolute; bottom: 18px; left: 18px; right: 18px;
  background: rgba(31,26,20,0.82); backdrop-filter: blur(8px);
  padding: 12px 16px; border-radius: 2px;
  font-size: 12.5px; color: rgba(245,241,232,0.9); letter-spacing: 0.02em;
}

.gc-root .gc-hero-trust {
  margin-top: 72px; border-top: 1px solid var(--line-dark);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; padding: 26px 0 34px;
}
.gc-root .gc-trust-item { font-size: 13px; color: rgba(245,241,232,0.62); line-height: 1.45; }
.gc-root .gc-trust-item strong {
  display: block; color: var(--cream); font-size: 21px; font-weight: 700;
  font-family: var(--gc-font); margin-bottom: 3px; letter-spacing: -0.01em;
}

/* ---------- PROBLEM-KARTEN ---------- */
.gc-root .gc-prob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gc-root .gc-prob {
  background: var(--white); border: 1px solid var(--line);
  border-top: 3px solid var(--terra);
  padding: 34px 30px 30px; border-radius: 2px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gc-root .gc-prob:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(31,26,20,0.09); }
.gc-root .gc-prob-num {
  font-family: var(--gc-font);
  font-size: clamp(40px, 4.4vw, 56px); line-height: 1;
  letter-spacing: -0.035em; margin-bottom: 6px; color: var(--espresso);
}
.gc-root .gc-prob-num .gc-u { font-size: 0.46em; color: var(--taupe); margin-left: 3px; }
.gc-root .gc-prob-lbl {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--terra); font-weight: 600; margin-bottom: 16px;
}
.gc-root .gc-prob p { font-size: 15.5px; line-height: 1.55; color: var(--ink); margin-bottom: 14px; }
.gc-root .gc-prob-src { font-size: 11.5px; color: var(--taupe); }

.gc-root .gc-prob-fazit {
  margin-top: 36px; padding: 30px 34px;
  background: var(--espresso); color: var(--cream); border-radius: 2px;
  font-family: var(--gc-font); font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.4; letter-spacing: -0.015em;
}
.gc-root .gc-prob-fazit .gc-acc { color: var(--terra-hell); }

/* ---------- ZIEL / ERGEBNISSE ---------- */
.gc-root .gc-ziel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-dark); }
.gc-root .gc-ziel {
  padding: 44px 34px 44px 0; border-right: 1px solid var(--line-dark);
}
.gc-root .gc-ziel:not(:first-child) { padding-left: 34px; }
.gc-root .gc-ziel:last-child { border-right: 0; padding-right: 0; }
.gc-root .gc-ziel-num {
  font-size: 12px; font-weight: 600; letter-spacing: 0.15em;
  color: var(--terra); margin-bottom: 18px;
}
.gc-root .gc-ziel h3 {
  font-family: var(--gc-font); font-size: 26px; font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: 14px; line-height: 1.2;
}
.gc-root .gc-ziel p { font-size: 15.5px; line-height: 1.6; color: rgba(245,241,232,0.72); margin-bottom: 16px; }
.gc-root .gc-ziel-proof {
  font-size: 13px; color: var(--terra-hell); padding-top: 14px;
  border-top: 1px solid var(--line-dark);
}
.gc-root .gc-ziel-proof strong { font-family: var(--gc-font); font-size: 17px; font-weight: 700; }

/* ---------- VERWALTUNG / EINWAND ---------- */
.gc-root .gc-verw-split { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 72px; align-items: start; }
.gc-root .gc-verw-zahl {
  font-family: var(--gc-font); font-size: clamp(80px, 10vw, 132px);
  line-height: 0.88; letter-spacing: -0.045em; color: var(--terra); margin-bottom: 20px;
}
.gc-root .gc-verw-zahl .gc-u { font-size: 0.42em; }
.gc-root .gc-verw-claim {
  font-family: var(--gc-font); font-size: 23px; line-height: 1.35;
  letter-spacing: -0.015em; margin-bottom: 14px;
}
.gc-root .gc-verw-src { font-size: 12px; color: var(--taupe); }
.gc-root .gc-dark .gc-verw-src { color: rgba(245,241,232,0.45); }

.gc-root .gc-verw-list { display: flex; flex-direction: column; gap: 4px; }
.gc-root .gc-verw-item {
  display: grid; grid-template-columns: 42px 1fr; gap: 20px;
  padding: 22px 0; border-bottom: 1px solid var(--line-dark); align-items: start;
}
.gc-root .gc-verw-item:last-child { border-bottom: 0; }
.gc-root .gc-verw-item-num {
  font-family: var(--gc-font); font-size: 15px;
  color: var(--terra); padding-top: 3px;
}
.gc-root .gc-verw-item h4 {
  font-family: var(--gc-font); font-size: 20px; font-weight: 700;
  letter-spacing: -0.015em; margin-bottom: 7px;
}
.gc-root .gc-verw-item p { font-size: 15.5px; line-height: 1.58; color: rgba(245,241,232,0.72); }
.gc-root .gc-verw-item p strong { color: var(--cream); font-weight: 600; }

.gc-root .gc-verw-quote {
  margin-top: 48px; padding: 32px 36px; border-left: 3px solid var(--terra);
  background: rgba(245,241,232,0.045);
  font-family: var(--gc-font); font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.42; letter-spacing: -0.015em;
}
.gc-root .gc-verw-quote .gc-acc { color: var(--terra-hell); }
.gc-root .gc-verw-quote-attr {
  display: block; margin-top: 16px; font-family: var(--gc-font);
  font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(245,241,232,0.45); font-style: normal;
}

/* ---------- ABLAUF / TIMELINE ---------- */
.gc-root .gc-ablauf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.gc-root .gc-ablauf::before {
  content: ''; position: absolute; top: 15px; left: 8%; right: 8%;
  height: 1px; background: var(--line);
}
.gc-root .gc-schritt { position: relative; padding: 0 22px 0 0; }
.gc-root .gc-schritt:not(:first-child) { padding-left: 22px; }
.gc-root .gc-schritt-dot {
  width: 31px; height: 31px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--terra);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--terra);
  position: relative; z-index: 2; margin-bottom: 22px;
}
.gc-root .gc-schritt.gc-schritt-on .gc-schritt-dot { background: var(--terra); color: var(--cream); }
.gc-root .gc-schritt-zeit {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--terra); font-weight: 600; margin-bottom: 9px;
}
.gc-root .gc-schritt h4 {
  font-family: var(--gc-font); font-size: 21px; font-weight: 700;
  letter-spacing: -0.018em; margin-bottom: 10px; line-height: 1.2;
}
.gc-root .gc-schritt p { font-size: 15px; line-height: 1.55; color: var(--ink); }
.gc-root .gc-schritt-wer {
  display: inline-block; margin-top: 12px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.09em; font-weight: 600;
  padding: 4px 9px; border-radius: 20px;
  background: rgba(62, 95, 69, 0.1); color: var(--wald);
}

/* ---------- RECHNER ---------- */
.gc-root .gc-rechner-bar {
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 3px; padding: 32px 36px; margin-bottom: 20px; position: relative;
}
.gc-root .gc-rechner-bar::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: var(--terra); border-radius: 3px 3px 0 0;
}
.gc-root .gc-sl-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--taupe); margin-bottom: 12px; font-weight: 600;
}
.gc-root .gc-sl-val { display: flex; align-items: baseline; gap: 7px; margin-bottom: 16px; }
.gc-root .gc-sl-num {
  font-family: var(--gc-font); font-size: 42px; line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.gc-root .gc-sl-unit { font-family: var(--gc-font); font-size: 19px; color: var(--taupe); }
.gc-root .gc-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  background: rgba(31,26,20,0.12); border-radius: 2px; outline: none;
}
.gc-root .gc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
  background: var(--espresso); border-radius: 50%; cursor: pointer;
  border: 3px solid var(--white); box-shadow: 0 2px 7px rgba(31,26,20,0.24);
  transition: transform 0.15s, background 0.15s;
}
.gc-root .gc-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.gc-root .gc-slider::-webkit-slider-thumb:active { background: var(--terra); }
.gc-root .gc-slider::-moz-range-thumb {
  width: 22px; height: 22px; background: var(--espresso); border-radius: 50%;
  cursor: pointer; border: 3px solid var(--white); box-shadow: 0 2px 7px rgba(31,26,20,0.24);
}
.gc-root .gc-sl-hint { display: flex; justify-content: space-between; font-size: 11px; color: var(--taupe); margin-top: 8px; }

.gc-root .gc-kosten-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; }
.gc-root .gc-kosten {
  background: var(--white); border: 1px solid var(--line);
  padding: 34px; border-radius: 2px;
}
.gc-root .gc-kosten.gc-empf { background: var(--espresso); color: var(--cream); border-color: var(--espresso); }
.gc-root .gc-kosten-top {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.13em; color: var(--taupe);
}
.gc-root .gc-kosten.gc-empf .gc-kosten-top { color: rgba(245,241,232,0.55); }
.gc-root .gc-badge {
  background: var(--terra); color: var(--cream); padding: 4px 11px;
  border-radius: 20px; font-size: 10.5px; letter-spacing: 0.08em;
}
.gc-root .gc-kosten h3 {
  font-family: var(--gc-font); font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 24px;
}
.gc-root .gc-zeile {
  display: flex; justify-content: space-between; padding: 12px 0;
  border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.gc-root .gc-kosten.gc-empf .gc-zeile { border-bottom-color: var(--line-dark); }
.gc-root .gc-zeile:last-of-type { border-bottom: 0; }
.gc-root .gc-zeile .gc-lab { color: var(--taupe); }
.gc-root .gc-kosten.gc-empf .gc-zeile .gc-lab { color: rgba(245,241,232,0.6); }
.gc-root .gc-zeile .gc-wert { font-weight: 600; font-variant-numeric: tabular-nums; }
.gc-root .gc-kosten.gc-empf .gc-zeile .gc-wert { color: var(--terra); }
.gc-root .gc-jahr { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 18px; }
.gc-root .gc-kosten.gc-empf .gc-jahr { border-top-color: var(--line-dark); }
.gc-root .gc-jahr-lbl {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--taupe); margin-bottom: 7px;
}
.gc-root .gc-kosten.gc-empf .gc-jahr-lbl { color: rgba(245,241,232,0.55); }
.gc-root .gc-jahr-num {
  font-family: var(--gc-font); font-size: 40px; font-weight: 700;
  letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
}
.gc-root .gc-jahr-num .gc-euro { font-size: 0.58em; color: var(--taupe); margin-left: 4px; }
.gc-root .gc-kosten.gc-empf .gc-jahr-num { color: var(--terra); }
.gc-root .gc-kosten.gc-empf .gc-jahr-num .gc-euro { color: rgba(184,130,90,0.7); }

.gc-root .gc-fazit {
  display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: center;
  border-top: 1px solid var(--line); padding-top: 44px;
}
.gc-root .gc-fazit-num {
  font-family: var(--gc-font); font-size: clamp(76px, 9vw, 118px);
  line-height: 0.86; letter-spacing: -0.045em;
}
.gc-root .gc-fazit-num .gc-pct { font-size: 0.48em; color: var(--taupe); }
.gc-root .gc-fazit p { font-size: 16.5px; line-height: 1.6; }
.gc-root .gc-fazit-hl { color: var(--terra); font-weight: 600; }
.gc-root .gc-fazit-hl .gc-serif { font-size: 1.18em; }

/* ---------- SYSTEM / BAUSTEINE ---------- */
.gc-root .gc-concept {
  background: var(--espresso); color: var(--cream); padding: 40px 42px;
  border-radius: 2px; margin-bottom: 20px;
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 36px; align-items: center;
}
.gc-root .gc-concept h3 {
  font-family: var(--gc-font); font-size: 44px; font-weight: 700;
  line-height: 1; letter-spacing: -0.025em; margin: 12px 0 8px;
}
.gc-root .gc-concept .gc-sub { font-family: var(--gc-font); font-size: 16.5px; color: rgba(245,241,232,0.62); }
.gc-root .gc-concept p { font-size: 16px; line-height: 1.6; color: rgba(245,241,232,0.84); }
.gc-root .gc-pill {
  display: inline-block; padding: 5px 12px; border-radius: 20px;
  font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600;
  background: var(--terra); color: var(--cream);
}

.gc-root .gc-bau-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gc-root .gc-bau {
  background: var(--white); border: 1px solid var(--line);
  padding: 28px 26px; border-radius: 2px; display: flex; flex-direction: column;
  transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.gc-root .gc-bau:hover { transform: translateY(-3px); border-color: var(--terra); box-shadow: 0 12px 30px rgba(31,26,20,0.08); }
.gc-root .gc-bau-num { font-family: var(--gc-font); font-size: 12.5px; color: var(--taupe); margin-bottom: 22px; letter-spacing: 0.06em; }
.gc-root .gc-bau h4 { font-family: var(--gc-font); font-size: 25px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; line-height: 1.1; }
.gc-root .gc-bau .gc-bau-sub { font-family: var(--gc-font); color: var(--taupe); font-size: 14.5px; margin-bottom: 13px; }
.gc-root .gc-bau p { font-size: 14.5px; line-height: 1.55; color: var(--ink); margin-bottom: 18px; flex-grow: 1; }
.gc-root .gc-bau-tag {
  align-self: flex-start; font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600; padding: 4px 10px; border-radius: 20px;
  background: rgba(184,130,90,0.13); color: var(--terra-dark);
}

/* ---------- TEAM / VERTRAUEN ---------- */
.gc-root .gc-team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 44px; }
.gc-root .gc-team-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 3px;
  overflow: hidden; display: flex; flex-direction: column;
}
.gc-root .gc-team-img { width: 100%; height: 300px; object-fit: cover; display: block; }
.gc-root .gc-team-img-hoch { object-position: center 30%; }
.gc-root .gc-team-img-quer { object-position: center 18%; }
.gc-root .gc-team-body { padding: 26px 28px 28px; }
.gc-root .gc-team-body .gc-eyebrow { margin-bottom: 12px; }
.gc-root .gc-team-body h4 { font-family: var(--gc-font); font-size: 21px; font-weight: 700; letter-spacing: -0.018em; margin-bottom: 10px; line-height: 1.25; }
.gc-root .gc-team-body p { font-size: 15px; line-height: 1.58; color: var(--ink); }

.gc-root .gc-substanz {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
  border-top: 1px solid var(--line); padding-top: 40px; margin-bottom: 40px;
}
.gc-root .gc-substanz-item .gc-s-num {
  font-family: var(--gc-font); font-size: 40px; line-height: 1;
  letter-spacing: -0.03em; margin-bottom: 9px;
}
.gc-root .gc-substanz-item .gc-s-num .gc-plus { color: var(--terra); }
.gc-root .gc-substanz-item .gc-s-lbl { font-size: 13.5px; line-height: 1.45; color: var(--taupe); }

.gc-root .gc-innung-wrap { border-top: 1px solid var(--line); padding-top: 32px; }
.gc-root .gc-innung-lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--taupe); font-weight: 600; margin-bottom: 16px;
}
.gc-root .gc-innung-list { display: flex; flex-wrap: wrap; gap: 8px; }
.gc-root .gc-innung {
  display: inline-block; padding: 7px 14px; border: 1px solid var(--line);
  border-radius: 20px; font-size: 12.5px; color: var(--ink);
  text-decoration: none; background: var(--white); transition: border-color 0.2s, color 0.2s;
}
.gc-root .gc-innung:hover { border-color: var(--terra); color: var(--terra-dark); }
.gc-root .gc-innung-strong { border-color: var(--terra); color: var(--terra-dark); font-weight: 600; }

/* ---------- VIDEOS ---------- */
.gc-root .gc-vid-hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; margin-bottom: 44px; }
.gc-root .gc-vid-main {
  position: relative; display: block; aspect-ratio: 16/9; border-radius: 3px;
  overflow: hidden; text-decoration: none; cursor: pointer;
  background: linear-gradient(135deg, #2A241D 0%, #1F1A14 55%, #3A2E22 100%) center/cover no-repeat;
}
.gc-root .gc-vid-main::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31,26,20,0.15) 0%, rgba(31,26,20,0.72) 100%);
  transition: background 0.25s;
}
.gc-root .gc-vid-main:hover::after { background: linear-gradient(180deg, rgba(31,26,20,0.05) 0%, rgba(31,26,20,0.62) 100%); }
.gc-root .gc-vid-main-inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; }
.gc-root .gc-play {
  width: 62px; height: 62px; border-radius: 50%; background: var(--terra);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; transition: transform 0.25s, background 0.25s;
}
.gc-root .gc-vid-main:hover .gc-play { transform: scale(1.08); background: var(--terra-dark); }
.gc-root .gc-play svg { width: 24px; height: 24px; fill: var(--cream); margin-left: 3px; }
.gc-root .gc-vid-main-tag { color: var(--cream); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.gc-root .gc-vid-rating { position: absolute; top: 20px; right: 20px; z-index: 3; display: flex; align-items: center; gap: 8px; background: rgba(31,26,20,0.7); backdrop-filter: blur(6px); padding: 7px 13px; border-radius: 20px; }
.gc-root .gc-vid-rating .gc-stars { color: var(--terra); font-size: 13px; letter-spacing: 0.06em; }
.gc-root .gc-vid-rating .gc-rnum { color: var(--cream); font-size: 13px; font-weight: 600; }

.gc-root .gc-vid-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.gc-root .gc-vid-grid-4 { grid-template-columns: repeat(4, 1fr); }
.gc-root .gc-vidcard {
  position: relative; display: block; aspect-ratio: 3/4; border-radius: 3px;
  overflow: hidden; text-decoration: none; background: var(--espresso);
  transition: transform 0.22s;
}
.gc-root .gc-vidcard:hover { transform: translateY(-3px); }
.gc-root .gc-vidcard-thumb { position: absolute; inset: 0;
  background: linear-gradient(150deg, #2A241D 0%, #1F1A14 60%, #382C21 100%) center/cover no-repeat; }
.gc-root .gc-vidcard-thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31,26,20,0.1) 30%, rgba(31,26,20,0.85) 100%);
}
.gc-root .gc-vidcard-body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; }
.gc-root .gc-play-sm {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(184,130,90,0.92);
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
  transition: transform 0.22s;
}
.gc-root .gc-vidcard:hover .gc-play-sm { transform: scale(1.1); }
.gc-root .gc-play-sm svg { width: 16px; height: 16px; fill: var(--cream); margin-left: 2px; }
.gc-root .gc-vidcard-name { color: var(--cream); font-family: var(--gc-font); font-size: 16px; line-height: 1.15; margin-bottom: 3px; }
.gc-root .gc-vidcard-branche { color: rgba(245,241,232,0.68); font-size: 12px; }
.gc-root .gc-vidcard-tag {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 600;
  padding: 4px 8px; border-radius: 20px; background: rgba(245,241,232,0.16);
  color: var(--cream); backdrop-filter: blur(4px);
}
.gc-root .gc-vidcard.is-playing { aspect-ratio: 16/9; }
.gc-root .gc-vid-iframe { position: absolute; inset: 0; z-index: 10; background: #000; }
.gc-root .gc-vid-iframe iframe { width: 100%; height: 100%; border: 0; }
.gc-root .gc-vid-close {
  position: absolute; top: 8px; right: 8px; z-index: 12;
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(31,26,20,0.75); color: var(--cream); font-size: 20px; line-height: 1;
}
.gc-root .gc-vid-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--taupe); font-weight: 600; margin: 40px 0 16px;
}
.gc-root .gc-dark .gc-vid-label { color: rgba(245,241,232,0.5); }

/* ---------- FAQ ---------- */
.gc-root .gc-faq { border-top: 1px solid var(--line); }
.gc-root .gc-faq-item { border-bottom: 1px solid var(--line); }
.gc-root .gc-faq-item summary {
  list-style: none; cursor: pointer; padding: 24px 44px 24px 0;
  font-family: var(--gc-font); font-size: clamp(18px, 2vw, 22px);
  letter-spacing: -0.015em; line-height: 1.32; position: relative;
  transition: color 0.2s;
}
.gc-root .gc-faq-item summary::-webkit-details-marker { display: none; }
.gc-root .gc-faq-item summary:hover { color: var(--terra-dark); }
.gc-root .gc-faq-item summary::after {
  content: ''; position: absolute; right: 6px; top: 50%;
  width: 11px; height: 11px; margin-top: -8px;
  border-right: 1.5px solid var(--terra); border-bottom: 1.5px solid var(--terra);
  transform: rotate(45deg); transition: transform 0.25s;
}
.gc-root .gc-faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.gc-root .gc-faq-a { padding: 0 60px 26px 0; font-size: 16px; line-height: 1.65; color: var(--ink); }
.gc-root .gc-faq-a strong { font-weight: 600; }
.gc-root .gc-faq-a p + p { margin-top: 12px; }

/* ---------- KONTAKT ---------- */
.gc-root .gc-kontakt { background: var(--espresso); color: var(--cream); padding: 110px 0 90px; }
.gc-root .gc-kontakt-bar { width: 56px; height: 3px; background: var(--terra); margin-bottom: 30px; }
.gc-root .gc-kontakt h2 {
  font-family: var(--gc-font); font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.12; font-weight: 700; letter-spacing: -0.022em; margin-bottom: 20px; max-width: 860px;
}
.gc-root .gc-kontakt h2 .gc-acc { color: var(--terra-hell); }
.gc-root .gc-kontakt-sub { font-size: 17.5px; line-height: 1.6; color: rgba(245,241,232,0.74); max-width: 720px; margin-bottom: 48px; }

.gc-root .gc-kontakt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 32px 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); margin-bottom: 56px; }
.gc-root .gc-kb .gc-lab { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(245,241,232,0.5); margin-bottom: 9px; font-weight: 600; }
.gc-root .gc-kb .gc-val { font-family: var(--gc-font); font-size: 19px; line-height: 1.35; }
.gc-root .gc-kb .gc-val a { color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(245,241,232,0.3); }
.gc-root .gc-kb .gc-val a:hover { border-color: var(--terra); }

.gc-root .gc-formwrap { background: rgba(245,241,232,0.05); border: 1px solid var(--line-dark); border-radius: 3px; padding: 44px 48px; }
.gc-root .gc-form-h { font-family: var(--gc-font); font-size: clamp(24px, 2.8vw, 34px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; line-height: 1.18; }
.gc-root .gc-form-h .gc-acc { color: var(--terra-hell); }
.gc-root .gc-form-lede { font-size: 16px; line-height: 1.6; color: rgba(245,241,232,0.72); margin-bottom: 32px; max-width: 640px; }
.gc-root .gc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.gc-root .gc-field { display: flex; flex-direction: column; }
.gc-root .gc-field.gc-full { grid-column: 1 / -1; }
.gc-root .gc-field label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.11em; color: rgba(245,241,232,0.6); margin-bottom: 9px; font-weight: 600; }
.gc-root .gc-req { color: var(--terra); }
.gc-root .gc-field input, .gc-root .gc-field select, .gc-root .gc-field textarea {
  background: rgba(245,241,232,0.07); border: 1px solid var(--line-dark);
  border-radius: 2px; padding: 13px 15px; color: var(--cream);
  font-family: inherit; font-size: 15.5px; transition: border-color 0.2s, background 0.2s;
}
.gc-root .gc-field input::placeholder, .gc-root .gc-field textarea::placeholder { color: rgba(245,241,232,0.35); }
.gc-root .gc-field input:focus, .gc-root .gc-field select:focus, .gc-root .gc-field textarea:focus {
  outline: none; border-color: var(--terra); background: rgba(245,241,232,0.1);
}
.gc-root .gc-field select option { background: var(--espresso); color: var(--cream); }
.gc-root .gc-field textarea { resize: vertical; min-height: 90px; }

.gc-root .gc-unterlagen { margin-bottom: 24px; border: 1px solid var(--line-dark); border-radius: 2px; }
.gc-root .gc-unterlagen summary {
  list-style: none; cursor: pointer; padding: 16px 20px;
  font-size: 14.5px; display: flex; justify-content: space-between; align-items: center;
  color: rgba(245,241,232,0.85);
}
.gc-root .gc-unterlagen summary::-webkit-details-marker { display: none; }
.gc-root .gc-unterlagen summary::after { content: '+'; color: var(--terra); font-size: 20px; line-height: 1; }
.gc-root .gc-unterlagen[open] summary::after { content: '−'; }
.gc-root .gc-unterlagen-body { padding: 4px 20px 18px; }
.gc-root .gc-cbrow {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 2px; cursor: pointer; font-size: 14.5px;
  color: rgba(245,241,232,0.82); transition: background 0.2s;
}
.gc-root .gc-cbrow:hover { background: rgba(245,241,232,0.05); }
.gc-root .gc-cbrow input { accent-color: var(--terra); width: 16px; height: 16px; flex-shrink: 0; }
.gc-root .gc-cbrow .gc-cbmeta { margin-left: auto; font-size: 11.5px; color: rgba(245,241,232,0.45); white-space: nowrap; }

.gc-root .gc-form-foot { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 8px; }
.gc-root .gc-disclaimer { font-size: 12.5px; line-height: 1.5; color: rgba(245,241,232,0.5); max-width: 460px; }
.gc-root .gc-form.gc-submitted { display: none; }
.gc-root .gc-success { display: none; text-align: center; padding: 40px 20px; }
.gc-root .gc-success.gc-show { display: block; }
.gc-root .gc-success-icon {
  width: 54px; height: 54px; border-radius: 50%; background: var(--wald);
  color: var(--cream); font-size: 26px; display: flex; align-items: center;
  justify-content: center; margin: 0 auto 20px;
}
.gc-root .gc-success h4 { font-family: var(--gc-font); font-size: 26px; font-weight: 700; margin-bottom: 12px; }
.gc-root .gc-success p { color: rgba(245,241,232,0.72); font-size: 16px; }

/* ---------- STICKY MOBILE CTA ---------- */
.gc-root .gc-sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 140;
  background: rgba(31,26,20,0.96); backdrop-filter: blur(12px);
  padding: 12px 16px; display: none; gap: 12px; align-items: center;
  border-top: 1px solid rgba(245,241,232,0.1);
  transform: translateY(110%); transition: transform 0.3s ease;
}
.gc-root .gc-sticky-cta.gc-on { transform: translateY(0); }
.gc-root .gc-sticky-txt { color: rgba(245,241,232,0.72); font-size: 12.5px; line-height: 1.3; flex: 1; }
.gc-root .gc-sticky-cta .gc-btn { padding: 12px 18px; font-size: 13.5px; white-space: nowrap; }

/* ---------- FOOTER ---------- */
.gc-root .gc-footer { background: var(--espresso); color: rgba(245,241,232,0.5); padding: 34px 0; border-top: 1px solid var(--line-dark); font-size: 13px; }
.gc-root .gc-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.gc-root .gc-footer a { color: rgba(245,241,232,0.6); text-decoration: none; margin-left: 22px; }
.gc-root .gc-footer a:hover { color: var(--cream); }

/* ---------- REVEAL ---------- */
.gc-root .gc-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.gc-root .gc-reveal.gc-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .gc-root .gc-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .gc-root .gc-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .gc-root .gc-hero-img-wrap { max-width: 620px; }
  .gc-root .gc-ablauf { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
  .gc-root .gc-ablauf::before { display: none; }
  .gc-root .gc-vid-grid { grid-template-columns: repeat(3, 1fr); }
  .gc-root .gc-substanz { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
}
@media (max-width: 900px) {
  .gc-root { font-size: 16px; }
  .gc-root .gc-container { padding: 0 22px; }
  .gc-root .gc-sec { padding: 72px 0; }
  .gc-root .gc-hero { padding-top: 120px; }
  .gc-root .gc-nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(31,26,20,0.98); backdrop-filter: blur(14px);
    flex-direction: column; gap: 0; padding: 12px 22px 22px;
  }
  .gc-root .gc-nav-links.gc-open { display: flex; }
  .gc-root .gc-nav-links a { padding: 12px 0; width: 100%; font-size: 15px; }
  .gc-root .gc-nav-cta { text-align: center; margin-top: 8px; }
  .gc-root .gc-burger { display: block; }
  .gc-root .gc-nav { background: rgba(31,26,20,0.94); backdrop-filter: blur(14px); padding: 11px 0; }
  .gc-root .gc-hero-trust { grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 48px; }
  .gc-root .gc-prob-grid, .gc-root .gc-bau-grid, .gc-root .gc-kosten-grid,
  .gc-root .gc-team-grid, .gc-root .gc-kontakt-grid, .gc-root .gc-form-row { grid-template-columns: 1fr; gap: 16px; }
  .gc-root .gc-ziel-grid { grid-template-columns: 1fr; border-top: 0; }
  .gc-root .gc-ziel { border-right: 0; border-top: 1px solid var(--line-dark); padding: 30px 0 !important; }
  .gc-root .gc-verw-split, .gc-root .gc-vid-hero, .gc-root .gc-concept { grid-template-columns: 1fr; gap: 32px; }
  .gc-root .gc-rechner-bar { grid-template-columns: 1fr; gap: 28px; padding: 26px 22px; }
  .gc-root .gc-fazit { grid-template-columns: 1fr; gap: 18px; }
  .gc-root .gc-ablauf { grid-template-columns: 1fr; gap: 32px; }
  .gc-root .gc-schritt { padding: 0 !important; }
  .gc-root .gc-vid-grid, .gc-root .gc-vid-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .gc-root .gc-formwrap { padding: 30px 22px; }
  .gc-root .gc-faq-a { padding-right: 20px; }
  .gc-root .gc-faq-item summary { padding-right: 34px; }
  .gc-root .gc-sticky-cta { display: flex; }
  .gc-root .gc-team-img { height: 240px; }
  .gc-root .gc-verw-quote { padding: 24px 22px; }
  .gc-root .gc-prob-fazit { padding: 24px 22px; }
  body.gc-root { padding-bottom: 0; }
}
@media (max-width: 560px) {
  .gc-root .gc-substanz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gc-root .gc-substanz-item .gc-s-num { font-size: 30px; }
  .gc-root .gc-hero-actions { flex-direction: column; align-items: flex-start; gap: 18px; }
  .gc-root .gc-form-foot { flex-direction: column; align-items: stretch; }
  .gc-root .gc-form-foot .gc-btn { width: 100%; text-align: center; }
}

/* Nachträge */
.gc-root .gc-verw-sticky { position: sticky; top: 110px; }
.gc-root .gc-schritt-zeit { min-height: 17px; }
.gc-root .gc-faq { max-width: 920px; }
.gc-root .gc-team-card { height: 100%; }
@media (max-width: 900px) {
  .gc-root .gc-verw-sticky { position: static; }
}

@media (max-width: 560px) {
  .gc-root .gc-hero h1 { font-size: 30px; margin-bottom: 22px; }
  .gc-root .gc-hero-sub { font-size: 16px; margin-bottom: 28px; }
  .gc-root .gc-hero { padding-top: 105px; }
  .gc-root .gc-hero-trust { margin-top: 40px; }
  .gc-root .gc-sec { padding: 60px 0; }
}

/* Hero: Ergebnis-Satz unter der Headline */
.gc-root .gc-hero-claim {
  font-family: var(--gc-font);
  font-size: clamp(17px, 1.75vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--terra-hell);
  max-width: 600px;
  margin: -12px 0 30px;
  padding-left: 16px;
  border-left: 2px solid var(--terra);
}
@media (max-width: 560px) {
  .gc-root .gc-hero-claim { font-size: 16.5px; margin: -6px 0 24px; padding-left: 13px; }
}

/* Ablauf: fünf Schritte */
.gc-root .gc-ablauf { grid-template-columns: repeat(5, 1fr); }
.gc-root .gc-schritt { padding-right: 18px; }
.gc-root .gc-schritt:not(:first-child) { padding-left: 18px; }
.gc-root .gc-schritt h4 { font-size: 19px; }
.gc-root .gc-schritt p { font-size: 14.5px; line-height: 1.5; }
.gc-root .gc-ablauf::before { left: 5%; right: 5%; }
@media (max-width: 1180px) {
  .gc-root .gc-ablauf { grid-template-columns: repeat(3, 1fr); gap: 44px 0; }
  .gc-root .gc-ablauf::before { display: none; }
}
@media (max-width: 900px) {
  .gc-root .gc-ablauf { grid-template-columns: 1fr; gap: 34px; }
  .gc-root .gc-schritt { padding: 0 !important; }
  .gc-root .gc-schritt h4 { font-size: 21px; }
  .gc-root .gc-schritt p { font-size: 15.5px; }
}

/* Team-Bilder: mehr Bildausschnitt, weniger Anschnitt */
.gc-root .gc-team-img { height: 420px; }
.gc-root .gc-team-img-hoch { object-position: center 26%; }
.gc-root .gc-team-img-quer { object-position: center 26%; }
@media (max-width: 900px) {
  .gc-root .gc-team-img { height: 330px; }
}
@media (max-width: 560px) {
  .gc-root .gc-team-img { height: 300px; }
}

/* Team: Name und Funktion */
.gc-root .gc-team-person {
  display: flex; flex-direction: column; gap: 4px;
  padding-bottom: 18px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.gc-root .gc-team-name {
  font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--espresso); line-height: 1.15;
}
.gc-root .gc-team-rolle {
  font-size: 13px; letter-spacing: 0.02em; color: var(--taupe);
}

/* Bausteine: Claim und Ziel-Zeile */
.gc-root .gc-concept { align-items: start; }
.gc-root .gc-concept-num {
  font-family: var(--gc-font); font-size: 13px;
  color: rgba(245,241,232,0.5); letter-spacing: 0.08em; margin: 18px 0 4px;
}
.gc-root .gc-concept h3 { margin: 0; }
.gc-root .gc-concept p.gc-concept-claim {
  font-family: var(--gc-font); font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.28; letter-spacing: -0.018em; color: var(--cream);
  margin-bottom: 14px;
}
.gc-root .gc-bau p.gc-bau-claim {
  font-family: var(--gc-font); font-size: 13.5px; line-height: 1.5;
  letter-spacing: 0; font-weight: 600; color: var(--espresso);
  margin-bottom: 14px !important; flex-grow: 0 !important;
}
.gc-root .gc-bau-ziel {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.5; color: var(--ink);
}
.gc-root .gc-bau-ziel-lbl {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.14em; font-weight: 600; color: var(--terra); margin-bottom: 6px;
}
.gc-root .gc-bau-ziel-dark {
  border-top-color: rgba(245,241,232,0.18); color: rgba(245,241,232,0.82);
  margin-top: 20px; font-size: 14.5px;
}
.gc-root .gc-bau-ziel-dark .gc-bau-ziel-lbl { color: var(--terra-hell); }
.gc-root .gc-bau h4 { margin-bottom: 8px; }
@media (max-width: 900px) {
  .gc-root .gc-concept-num { margin-top: 14px; }
}

/* ==========================================================================
   Ergaenzungen fuer den Betrieb auf der Website
   ========================================================================== */

/* Die CSP der Website laesst keine style-Attribute zu. Was in der Vorlage
   inline stand, steht deshalb hier als Klasse. */
.gc-root .gc-abstand-unten { margin-bottom: 38px; }
.gc-root .gc-head-breit { max-width: 820px; }
.gc-root .gc-vid-hero-titel {
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.18; letter-spacing: -0.02em; margin-bottom: 16px;
}
.gc-root .gc-vid-hero-text {
  color: rgba(245, 241, 232, 0.74); font-size: 16.5px; line-height: 1.62;
}
.gc-root .gc-form-row-abstand { margin-bottom: 18px; }
.gc-root .gc-unterlagen-lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.13em;
  color: rgba(245, 241, 232, 0.5); font-weight: 700; margin-bottom: 8px;
}

/* Filme: Zwei-Klick-Loesung. Vor dem Klick liegt nur das lokale
   Vorschaubild auf der Seite, keine Verbindung zu YouTube. */
.gc-root .gc-vid-bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Die Verlaufsblende der Vorlage haengt an .gc-vidcard-thumb. Das
   Vorschaubild sitzt darin, damit die Beschriftung lesbar bleibt. */
.gc-root .gc-vidcard-thumb { display: block; }
.gc-root .gc-vidcard-thumb picture { display: block; }
.gc-root .gc-vid-main,
.gc-root .gc-vidcard { border: 0; padding: 0; text-align: left; width: 100%; }
.gc-root .gc-vid-main-inner { text-align: left; }
.gc-root .gc-vidcard-name,
.gc-root .gc-vidcard-branche,
.gc-root .gc-vid-main-tag { display: block; }
.gc-root .gc-play,
.gc-root .gc-play-sm { flex-shrink: 0; }

/* Formularmeldungen des eigenen PHP-Handlers */
.gc-root .gc-form-meldung {
  padding: 20px 24px; border-left: 3px solid var(--terra);
  background: rgba(245, 241, 232, 0.05); margin-bottom: 28px; border-radius: 2px;
}
.gc-root .gc-form-meldung h4 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--cream); margin-bottom: 8px;
}
.gc-root .gc-form-meldung p { font-size: 15px; color: rgba(245, 241, 232, 0.78); line-height: 1.6; }
.gc-root .gc-form-meldung--fehler { border-left-color: #C8705A; }
.gc-root .gc-feld-fehler input,
.gc-root .gc-feld-fehler textarea { border-color: #C8705A; }
.gc-root .gc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Bilder und Grundzustaende */
.gc-root img { max-width: 100%; height: auto; }
.gc-root a { color: inherit; text-decoration: none; }
.gc-root button { font-family: inherit; }
.gc-root a:focus-visible,
.gc-root button:focus-visible,
.gc-root summary:focus-visible,
.gc-root input:focus-visible {
  outline: 2px solid var(--terra); outline-offset: 3px;
}

/* Sehr schmale Geraete: Arial bricht lange Komposita sonst aus dem Bild. */
@media (max-width: 560px) {
  .gc-root h1, .gc-root h2, .gc-root h3, .gc-root h4 {
    overflow-wrap: break-word; hyphens: auto;
  }
}


/* --- Wo Version 3 anders arbeitet ---------------------------------- */

/* Ueberschriften im Gewicht 300, Montserrat, mit den Groessen des Stilbuchs. */
.hero__text h1, .section h2, .section h3, h1, h2, h3 { font-weight: 300; }
h1 { font-size: clamp(38px, 5.6vw, var(--text-heading-lg)); line-height: var(--leading-heading-lg); letter-spacing: -0.025em; }
h2 { font-size: clamp(28px, 3.4vw, var(--text-heading)); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
h3 { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading-sm); font-weight: 400; }

/* Sektionsmarken werden zur Overline des Stilbuchs. */
.section-mark, .sektionsmarke, .gc-eyebrow {
  font-size: var(--spacing-12); letter-spacing: 0.12px; text-transform: none;
  color: var(--color-pewter); font-weight: 400;
}
.section--espresso .section-mark, .gc-dark .gc-eyebrow, .gc-eyebrow-light { color: var(--color-mist); }

/* Radien nach Stilbuch: 8px an Flaechen und Bildern, 80px an Schaltflaechen. */
.card, .stat, .stelle, .leistung, .video, .beleg, .gc-team-card, .gc-vidcard, .karte__flaeche { border-radius: var(--radius-cards); }
.card img, .video img, .beleg img, .person img, .gc-team-img { border-radius: var(--radius-images); }
.btn, .gc-btn, .gc-btn-ghost, .gc-form-submit { border-radius: var(--radius-buttons); }
.tag, .gc-pill, .gc-badge { border-radius: var(--radius-badges); }

/* Keine Schatten: Tiefe entsteht ueber Fotografie und Flaechenfarbe. */
.card, .stat, .stelle, .video, .gc-team-card, .gc-vidcard, .gc-formwrap { box-shadow: none; }

/* Der gefuellte dunkle Knopf ist die Ausnahme, der Textknopf mit Pfeil
   die Voreinstellung. */
.btn--primary, .gc-btn { background: var(--color-char); color: var(--color-paper); border-color: var(--color-char); }
.btn--primary:hover, .gc-btn:hover { background: var(--color-primary-action-fill); border-color: var(--color-primary-action-fill); }
.btn--secondary, .gc-btn-ghost { background: transparent; border: 1px solid currentColor; }

/* Ember ist der einzige warme Akzent. */
.link-arrow, .strategy__link, .accent-line { color: var(--color-ember); }

/* Zahlen in Tabellenbreite. */
table, .stat__value, .gc-val, .gc-euro { font-variant-numeric: tabular-nums; }

/* --- Kontrast: zwei Stellen, an denen die Umlegung nicht traegt -------
   Version 1 hatte fuer beide eigene, auf ihre Palette gerechnete Werte. */

/* Die Rollenbezeichnungen im Team standen in einer aufgehellten
   Terra-Fassung. Auf Mist ergibt sie 1,38:1 und ist praktisch
   unsichtbar. Sie tragen jetzt Pewter, die Sekundaerfarbe des Stilbuchs. */
:root { --dia-terra-45: var(--color-pewter); }

/* Ember als kleiner Text auf dunklem Grund erreicht nur 3,63:1. Fuer
   Flaechen und Linien bleibt das reine Ember; als Schrift auf Char
   greift diese aufgehellte Fassung mit 6,3:1. */
.section--espresso .stat__mark,
.section--espresso .section-mark,
.section--espresso .accent-line,
.gc-dark .gc-eyebrow,
.abschnitt--dunkel .overline { color: #d98a5a; }

/* Ember als kleiner Text auf hellem Grund erreicht nur 3,63:1. Diese
   dunklere Fassung desselben Farbtons liegt bei 6,4:1 auf Paper. */
.section-mark, .step__mark, .stat__mark, .reg, .req,
.stufe__nr, .karte__titel, .video__mark, .card__mark,
.gc-s-num, .gc-prob-num, .gc-bau-num, .gc-concept-num, .gc-fazit-num,
.gc-rnum, .gc-verw-item-num, .gc-jahr-num, .gc-lab { color: #8f4520; }

/* Auf dunklem Grund umgekehrt: dort traegt die aufgehellte Fassung. */
.section--espresso .section-mark, .section--espresso .step__mark,
.section--espresso .stat__mark, .section--espresso .reg,
.section--espresso .stufe__nr, .section--espresso .video__mark,
.gc-dark .gc-eyebrow, .gc-dark .gc-s-num, .gc-dark .gc-lab,
.gc-hero .gc-eyebrow, .gc-hero .gc-lab { color: #d98a5a; }

/* Die helle Overline der Landingpage stand auf 2,72:1 und stellenweise
   auf 1,27:1. Sie traegt jetzt Mist, wie jede Overline auf Dunkel. */
.gc-eyebrow-light { color: var(--color-mist); }

/* Die drei folgenden Stellen tragen in Version 1 spezifischere Regeln.
   Der doppelte Klassenname hebt die Spezifitaet, ohne !important. */

/* Pflichtfeld-Sternchen: reines Ember auf Mist ergibt 3,7:1. */
.req.req { color: #8f4520; }

/* Die helle Overline der Landingpage steht auf Paper, nicht auf Dunkel:
   dort erreicht die aufgehellte Fassung nur 2,72:1. */
.gc-eyebrow.gc-eyebrow-light { color: #8f4520; }
.gc-dark .gc-eyebrow.gc-eyebrow-light,
.gc-hero .gc-eyebrow.gc-eyebrow-light { color: var(--color-mist); }

/* --- Landingpage Mittelstand ----------------------------------------
   Sie bringt einen eigenen Variablensatz mit, der unter .gc-root haengt.
   Ohne Umlegung bliebe die Seite als einzige in der Palette von
   Version 1 stehen. */
.gc-root {
  --gc-font: var(--font-sans);
  --terra-hell: #d98a5a;
  --espresso: var(--color-char);
  --espresso-soft: var(--color-iron);
  --ink: var(--color-ink);
  --cream: var(--color-paper);
  --cream-warm: var(--color-mist);
  --white: var(--color-paper);
  --terra: var(--color-ember);
  --terra-dark: #8f4520;
  --terra-text: #8f4520;
  --taupe: var(--color-pewter);
  --line: var(--color-mist);
  --wald: var(--color-pine);
  --line-dark: rgba(229, 228, 228, 0.18);
}

/* Die Landingpage setzt ihre Akzentschrift unter .gc-root; dort greift
   reines Ember mit 3,6:1. Auf hellem Grund die dunkle Fassung, auf
   dunklem die aufgehellte. */
.gc-root .gc-eyebrow, .gc-root .gc-wert, .gc-root .gc-pct,
.gc-root .gc-euro, .gc-root .gc-acc, .gc-root .gc-hl,
.gc-root .gc-fazit-hl, .gc-root .gc-verw-zahl { color: #8f4520; }
.gc-root .gc-dark .gc-eyebrow, .gc-root .gc-dark .gc-wert,
.gc-root .gc-dark .gc-pct, .gc-root .gc-dark .gc-euro,
.gc-root .gc-dark .gc-acc, .gc-root .gc-dark .gc-hl,
.gc-root .gc-dark .gc-fazit-hl, .gc-root .gc-dark .gc-verw-zahl,
.gc-root .gc-hero .gc-eyebrow { color: #d98a5a; }

/* Die empfohlene Kostenkarte und der Fazit-Block tragen einen dunklen
   Grund, ohne die Klasse .gc-dark zu fuehren. Dort greift die
   aufgehellte Fassung (6,3:1), nicht die dunkle. */
.gc-root .gc-kosten.gc-empf .gc-zeile .gc-wert,
.gc-root .gc-kosten.gc-empf .gc-eyebrow,
.gc-root .gc-verw-quote .gc-acc,
.gc-root .gc-prob-fazit .gc-acc { color: #d98a5a; }

/* --- Akzentschrift, vollstaendig -------------------------------------
   Der erste Durchgang hatte .hl und einige Marken uebersehen. Reines
   Ember als Schrift traegt auf keinem der beiden Gruende. */
:root { --v3-akzent: #8f4520; --v3-akzent-hell: #d98a5a; }

.hl, .hl.hl, .reg, .reg.reg,
.karte__titel, .leistungsgruppe__titel, .zusage b,
.link-arrow, .strategy__link { color: var(--v3-akzent); }

.section--espresso .hl, .section--espresso .reg,
.section--espresso .link-arrow, .section--espresso .card__mark,
.hero .hl, .hero .reg,
.abschnitt--dunkel .hl, .abschnitt--dunkel .reg { color: var(--v3-akzent-hell); }

.gc-root .gc-nav-cta, .gc-root .gc-hero-claim { color: var(--v3-akzent-hell); }
.gc-root .gc-nav-cta, .gc-root .gc-btn { color: var(--color-paper); }

/* --- Das eingetragene Zeichen ----------------------------------------
   In Version 1 trug das ® die Akzentfarbe. Bei 7 bis 9px erreicht keine
   Akzentfassung verlaesslich 4,5:1, und typografisch gehoert das Zeichen
   ohnehin zum Wort: es erbt jetzt die Farbe des umgebenden Textes und
   bleibt allein durch seine Groesse zurueckgenommen. */
.reg, .reg.reg,
.section--espresso .reg, .hero .reg, .wald .reg,
.abschnitt--dunkel .reg, .schluss .reg { color: currentColor; }

/* Restliche Marken und Zaehler der uebernommenen Seiten. */
.step__mark, .step__mark.step__mark, .mark, .n, .lab, .prog { color: #8f4520; }
.section--espresso .step__mark, .section--espresso .mark,
.section--espresso .n, .section--espresso .lab { color: #d98a5a; }
/* Sekundaertext lag bei 4,19:1 und damit knapp unter der Schwelle. */
.step__text, .stelle__tags, .stellen__note { color: #4C4C4C; }

/* Das Etikett der Zielspalte auf der Landingpage. */
.gc-root .gc-bau-ziel-lbl { color: #8f4520; }
.gc-root .gc-bau-ziel-dark .gc-bau-ziel-lbl { color: #d98a5a; }

/* Die Sektionsmarke traegt in Version 1 eine spezifischere Regel. */
.section-mark.section-mark { color: #8f4520; }
.section--espresso .section-mark.section-mark { color: #d98a5a; }
.gc-root .gc-cbmeta, .gc-root .gc-req { color: #8f4520; }
.gc-root .gc-dark .gc-cbmeta, .gc-root .gc-dark .gc-req { color: #d98a5a; }

/* --- Uebernommener Hero mit Bild dahinter -----------------------------
   Die Arbeitgeberstrategie behaelt ihren Text und bekommt das Motiv als
   Grund. Der Schleier folgt dem Muster des Video-Heros: er dunkelt dort
   ab, wo Schrift steht, und laesst das Bild rechts frei. */
.hero--bild { position: relative; overflow: hidden; }
.hero--bild > .container { position: relative; z-index: 1; }
.hero__hintergrund { position: absolute; inset: 0; }
.hero__hintergrund img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__hintergrund-schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(7,7,7,.78) 0%, rgba(7,7,7,.55) 38%, rgba(7,7,7,.18) 68%, rgba(7,7,7,.18) 100%),
    linear-gradient(to top, rgba(7,7,7,.45) 0%, rgba(7,7,7,0) 42%);
}
/* Die Schrift steht jetzt auf dem Bild und wechselt auf hell. */
.hero--bild h1, .hero--bild .lede, .hero--bild .hero__lede { color: var(--color-paper); }
.hero--bild .section-mark { color: #d98a5a; }
.hero--bild .accent-line { border-color: #d98a5a; background: #d98a5a; }
.hero--bild .btn--primary { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-paper); }
.hero--bild .btn--primary:hover { background: var(--color-mist); border-color: var(--color-mist); }