/* ===========================================================================
   ElectroFleet — Designschicht V2
   Regeln: ElectroFleet Corporate-Design Styleguide (Update, August 2026)
   Form:   Webflow-Template "Maxero" (01_Input/ELCTROFLEET/Design_Template)
   ---------------------------------------------------------------------------
   Liegt HINTER dem originalen <style>-Block jeder Seite. Der Original-Block
   bleibt unangetastet und liefert weiterhin die Layout-Mechanik. Diese Datei
   ersetzt ausschliesslich die Gestaltung.

   Der Unterschied zu V1: V1 hat Maxeros Token uebernommen und ElectroFleets
   vier Rollenfarben behalten. V2 folgt dem Styleguide — Palette, Verteilung,
   Typo-Startwerte, Textfarbregeln und Foto-Overlays kommen von dort. Aus dem
   Template kommt weiterhin die Form, und zusaetzlich jetzt seine semantische
   Farbmodus-Architektur (.mode-light-* / .mode-dark-*): Die war in V1 nicht
   nutzbar, weil ElectroFleet keine Palettenfamilien hatte. Mit den sechs
   Markenfarben laesst sie sich 1:1 uebertragen — und ueber sie wird die
   verbindliche Verteilung 45/25/12/8/7/3 gesteuert.
   =========================================================================== */

/* Syne zeichnet die Tilde als winzigen hochgestellten Strich — "~30 Standorte"
   liest sich damit wie "·30". Nur dieses Zeichen kommt deshalb aus Inter. */
@font-face { font-family: Syne; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/inter-400-latin.woff2) format('woff2'); unicode-range: U+007E; }
@font-face { font-family: Syne; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/inter-500-latin.woff2) format('woff2'); unicode-range: U+007E; }
@font-face { font-family: Syne; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/inter-600-latin.woff2) format('woff2'); unicode-range: U+007E; }
@font-face { font-family: Syne; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/inter-700-latin.woff2) format('woff2'); unicode-range: U+007E; }

/* ======================================================= 1. Markenfarben === */
/* Styleguide, Kapitel "Farbverteilung". Die sechs Markenfarben bilden
   zusammen 100 %; Weiss und Grau sind Systemfarben und zaehlen separat. */
:root {
  --ef-deep-teal:   #004E4A;   /* 45 % — primaere Basisflaeche              */
  --ef-teal-green:  #008C82;   /* 25 % — sekundaere Markenfarbe             */
  --ef-acid-yellow: #E6FF00;   /* 12 % — Akzent 1: Highlights, CTAs, Labels */
  --ef-neon-lime:   #B7FF00;   /*  8 % — Akzent 2: Hover, Badges, Status    */
  --ef-near-black:  #071C1B;   /*  7 % — Primaertext, Kontraste, Tiefe      */
  --ef-brand-teal:  #059688;   /*  3 % — nur Signet und Wortmarke           */

  /* Systemfarben — nicht Teil der 100 %-Verteilung */
  --ef-white:     #FFFFFF;
  --ef-gray:      #F2F4F5;     /* Interface Gray: Sektionen, Karten, Linien */
  --ef-text-gray: #687280;     /* Sekundaertext auf Weiss, 4,88:1           */

  /* Tonleitern je Familie — Bauart aus dem Template (100/200/400/700/800).
     Der Styleguide gibt nur die Grundfarben vor; die Abstufungen entstehen
     wie bei Maxero durch Mischung mit Weiss bzw. Near Black. */
  --ef-teal-100: color-mix(in srgb, var(--ef-deep-teal)  8%, #fff);
  --ef-teal-200: color-mix(in srgb, var(--ef-deep-teal) 16%, #fff);
  --ef-teal-400: color-mix(in srgb, var(--ef-deep-teal) 45%, #fff);
  --ef-teal-700: color-mix(in srgb, var(--ef-deep-teal) 55%, var(--ef-near-black));
  --ef-teal-800: color-mix(in srgb, var(--ef-deep-teal) 35%, var(--ef-near-black));

  --ef-green-100: color-mix(in srgb, var(--ef-teal-green)  8%, #fff);
  --ef-green-200: color-mix(in srgb, var(--ef-teal-green) 18%, #fff);
  --ef-green-400: color-mix(in srgb, var(--ef-teal-green) 50%, #fff);
  --ef-green-700: color-mix(in srgb, var(--ef-teal-green) 45%, var(--ef-near-black));

  --ef-yellow-100: color-mix(in srgb, var(--ef-acid-yellow) 14%, #fff);
  --ef-yellow-200: color-mix(in srgb, var(--ef-acid-yellow) 30%, #fff);

  --ef-lime-100: color-mix(in srgb, var(--ef-neon-lime) 14%, #fff);
  --ef-lime-200: color-mix(in srgb, var(--ef-neon-lime) 30%, #fff);

  /* ------------------------------------------- 2. Typografie (Styleguide) */
  /* Display & Headlines: Syne Medium 500. Hausschrift: Inter.
     Groessen als Bereiche aus der Tabelle "Typografische Hierarchie". */
  --ef-font-heading: Syne, "Syne Fallback", system-ui, sans-serif;
  --ef-font-text: Inter, "Inter Fallback", system-ui, -apple-system, sans-serif;

  --ef-display: clamp(56px, 3.2rem + 2.4vw, 80px);   /* Display XL 56–80 px  */
  --ef-h1:      clamp(40px, 2.4rem + 1.4vw, 56px);   /* H1        40–56 px   */
  --ef-h2:      clamp(32px, 1.9rem + 0.8vw, 40px);   /* H2        32–40 px   */
  --ef-h3:      clamp(22px, 1.3rem + 0.9vw, 32px);   /* H3 / H4   22–32 px   */
  --ef-body-l:  clamp(18px, 1.05rem + .2vw, 20px);   /* Body L    18–20 px   */
  --ef-body-m:  clamp(16px, 0.95rem + .2vw, 18px);   /* Body M    16–18 px   */
  --ef-ui:      clamp(12px, 0.75rem + .2vw, 15px);   /* Small/UI  12–15 px   */

  --ef-lh-display: 1.05;   /* 100–110 % */
  --ef-lh-h1: 1.10;        /* 105–115 % */
  --ef-lh-h2: 1.15;        /* 110–120 % */
  --ef-lh-h3: 1.20;        /* 115–125 % */
  --ef-lh-body: 1.52;      /* 145–160 % */
  --ef-lh-ui: 1.42;        /* 135–150 % */

  --ef-ls-display: -.01em; /* –1 % bis 0 */
  --ef-ls-h1: -.01em;

  /* -------------------------------------------------- 3. Mass und Form */
  /* Abstandsskala und Container aus dem Template; die Radien folgen dem
     Erscheinungsbild des Styleguide-Dokuments (gerundete Rechtecke, keine
     Pillen) statt Maxeros 5rem-Pille. */
  --ef-space-xs: .5rem;  --ef-space-s: 1rem;   --ef-space-m: 2rem;
  --ef-space-l: 3rem;    --ef-space-xl: 4rem;  --ef-space-xxl: 5rem;
  --ef-section: 5rem;
  --ef-section-lg: 8rem;
  --ef-global-padding: 2rem;
  --ef-container: 80rem;

  --ef-r-button: 8px;
  --ef-r-card: 12px;
  --ef-r-media: 16px;
  --ef-r-panel: 20px;

  --ef-shadow-10: 0 4px 8px 0 #071c1b14;
  --ef-shadow-30: 0 6px 18px 0 #071c1b26;
  /* Milder Schatten fuer die Kaesten, die keinen Rand mehr tragen: zwei
     Lagen, weit gestreut und schwach statt einer harten Kante bei 4 px. Der
     Kasten hebt sich damit von der Flaeche ab, ohne dass eine Linie ihn
     einfassen muss. */
  --ef-shadow-soft: 0 1px 2px 0 #071c1b0d, 0 14px 30px -12px #071c1b21;

  /* ------------------------------- 4. Semantik (Rollen aus dem Template) */
  --ef-bg: var(--ef-white);
  --ef-bg-2: var(--ef-gray);
  --ef-border: #dfe4e6;
  --ef-text: var(--ef-near-black);
  --ef-text-2: var(--ef-text-gray);
  --ef-heading: var(--ef-near-black);
  --ef-accent: var(--ef-acid-yellow);      /* CTA-Flaeche                    */
  --ef-on-accent: var(--ef-near-black);    /* CTA-Text — nie Weiss auf Neon  */
  --ef-marker: var(--ef-neon-lime);        /* Hover, Badges, Status          */
  --ef-link-hover: var(--ef-deep-teal);

  /* Karten als eigene Rolle — so folgt jede Box automatisch der Flaeche,
     auf der sie liegt, ohne dass Sektionstypen aufgezaehlt werden muessen.
     "plain" ist die Box ohne Bild: auf hellem Grund die Informationsbox —
     ohne eigene Flaeche, ohne Schatten, nur der 3 px starke Rand in Teal
     Green. Auf dunklem Grund bleibt sie die durchscheinende Variante, dort
     traegt eine Kontur allein nicht. Karten MIT Motiv tragen keinen Rand,
     nur den milden Schatten. */
  --ef-card-bg: var(--ef-white);
  --ef-card-border: transparent;
  --ef-card-ink: var(--ef-near-black);
  --ef-card-ink-2: var(--ef-text-gray);
  --ef-card-plain-bg: transparent;
  --ef-card-plain-border: var(--ef-teal-green);
  --ef-card-plain-border-width: 3px;
  --ef-card-plain-shadow: none;
  /* Schrift in derselben Farbe wie die Kontur — auf Wunsch, mit bekannter
     Einschraenkung: Teal Green auf Weiss ist 4,14:1, auf Interface Gray
     3,75:1. Die Boxenueberschrift (18-21 px, 600) faellt damit unter
     "grosse Schrift" und ist regelkonform, der Fliesstext in den Boxen
     (12-15 px) bleibt unter den 4,5:1 fuer normalen Text. Zurueck auf den
     sicheren Stand: diese vier Werte auf var(--ef-deep-teal) (9,60:1). */
  --ef-card-plain-ink: var(--ef-teal-green);
  --ef-card-plain-ink-2: var(--ef-teal-green);
  --ef-card-plain-link: var(--ef-teal-green);
  --ef-card-plain-link-hover: var(--ef-deep-teal);
  --ef-card-plain-cta-bg: var(--ef-deep-teal);
  --ef-card-plain-cta-ink: var(--ef-white);
}

/* ============================================ Farbmodi je Sektionsflaeche ===
   Uebertragen aus dem Template (.mode-light-* / .mode-dark-*): Ein Modus
   bindet die semantischen Rollen neu, alle Komponenten darin folgen ohne
   eigene Regel. Zuordnung ueber data-type, damit kein Markup noetig ist. */

/* Deep Teal — primaere Basisflaeche, 45 % */
.section[data-type="cta"], .section[data-type="cta_row"],
.section[data-type="cta_split"], .section[data-type="download_cta"],
.section[data-type="app_cta"], .section[data-type="app_banner"],
.section[data-type="intro"], .section[data-type="principle"],
.section[data-type="hotline"], .section[data-type="trust_band"],
.section[data-type="mission_list"], .section[data-type="gate"],
.section[data-type="support_band"], .section[data-type="newsletter"],
footer.wf-footer {
  --ef-bg: var(--ef-deep-teal);
  --ef-bg-2: var(--ef-teal-700);
  --ef-border: #ffffff2e;
  --ef-text: var(--ef-white);
  --ef-text-2: #ffffffd6;
  --ef-heading: var(--ef-white);
  --ef-link-hover: var(--ef-acid-yellow);
  --ef-card-bg: #ffffff14;
  --ef-card-border: #ffffff33;
  --ef-card-ink: var(--ef-white);
  --ef-card-ink-2: #ffffffc4;
  --ef-card-plain-bg: #ffffff14;
  --ef-card-plain-border: #ffffff33;
  --ef-card-plain-border-width: 1px;
  --ef-card-plain-shadow: none;
  --ef-card-plain-ink: var(--ef-white);
  --ef-card-plain-ink-2: #ffffffc4;
  --ef-card-plain-link: #ffffffe0;
  --ef-card-plain-link-hover: var(--ef-acid-yellow);
  --ef-card-plain-cta-bg: var(--ef-acid-yellow);
  --ef-card-plain-cta-ink: var(--ef-near-black);
  background: var(--ef-bg);
  color: var(--ef-text);
}

/* Teal Green — sekundaere Markenfarbe, 25 %.
   Weiss auf Teal Green ist 4,14:1 — laut Styleguide nur fuer grosse Schrift.
   Diese Flaechen tragen deshalb nur Schauzeile, Einleitung (Body L) und
   Button; Fliesstext in Karten steht auf Weiss. */
/* Teal Green bleibt der seltene Zweitklang. Die haeufigen Aussagebaender
   (intro, principle, promo_band, hotline, trust_band, mission_list, gate,
   support_band) stehen auf Deep Teal — der Styleguide nennt es die primaere
   Basisflaeche, und im Ergebnis traegt die Seite ruhiger. */
/* Teal Green wird nicht mehr als Flaechenfarbe verwendet — auf Wunsch
   nirgendwo. Es bleibt der Marke als Hover-Ton der Buttons auf hellen
   Flaechen und als Zeichenfarbe (FAQ-Zeichen, Kartenrahmen im Hover)
   erhalten. Alle vormals gruenen Baender stehen jetzt auf Deep Teal. */
.section[data-type="highlights"], .section[data-type="scope_note"],
.section[data-type="tco_alliance"], .section[data-type="trust_partners"],
.section[data-type="promo_band"] {
  --ef-bg: var(--ef-deep-teal);
  --ef-bg-2: var(--ef-teal-700);
  --ef-border: #ffffff2e;
  --ef-text: var(--ef-white);
  --ef-text-2: #ffffffd6;
  --ef-heading: var(--ef-white);
  --ef-link-hover: var(--ef-acid-yellow);
  --ef-card-bg: #ffffff14;
  --ef-card-border: #ffffff33;
  --ef-card-ink: var(--ef-white);
  --ef-card-ink-2: #ffffffc4;
  --ef-card-plain-bg: #ffffff14;
  --ef-card-plain-border: #ffffff33;
  --ef-card-plain-border-width: 1px;
  --ef-card-plain-shadow: none;
  --ef-card-plain-ink: var(--ef-white);
  --ef-card-plain-ink-2: #ffffffc4;
  --ef-card-plain-link: #ffffffe0;
  --ef-card-plain-link-hover: var(--ef-acid-yellow);
  --ef-card-plain-cta-bg: var(--ef-acid-yellow);
  --ef-card-plain-cta-ink: var(--ef-near-black);
  background: var(--ef-bg);
  color: var(--ef-text);
}
.section[data-type="intro"] p.body-text,
.section[data-type="principle"] p.body-text,
.section[data-type="trust_band"] p.body-text,
.section[data-type="trust_partners"] p.body-text,
.section[data-type="mission_list"] p.body-text,
.section[data-type="scope_note"] p.body-text,
.section[data-type="tco_alliance"] p.body-text,
.section[data-type="trust_partners"] p.body-text,
.section[data-type="promo_band"] p.body-text { font-size: var(--ef-body-l); }


/* Interface Gray — neutrale UI-Flaeche (Systemfarbe, ausserhalb der 100 %) */
.section[data-type="features"], .section[data-type="feature_highlight"],
.section[data-type="models"], .section[data-type="model"],
.section[data-type="offer_models"], .section[data-type="app_features"],
.section[data-type="service_grid"], .section[data-type="what_you_get"],
.section[data-type="cooperation_models"], .section[data-type="partner_types"],
.section[data-type="subtypes"], .section[data-type="criteria"],
.section[data-type="values"], .section[data-type="steps"],
.section[data-type="how"], .section[data-type="process"],
.section[data-type="about_grid"], .section[data-type="stats"],
.section[data-type="compare"], .section[data-type="requirements"],
.section[data-type="integration"] {
  --ef-bg: var(--ef-gray);
  --ef-border: #e2e7e9;
  /* Styleguide, "Nicht verwenden": Text Gray auf Gray ist mit 4,42:1 zu
     schwach. Auf grauen Flaechen traegt deshalb Near Black den Sekundaertext.
     In den Karten darin bleibt Text Gray, weil die Karte weiss ist (4,88:1). */
  --ef-text-2: var(--ef-near-black);
  background: var(--ef-bg);
}
.section[data-type="features"] p.body-text, .section[data-type="feature_highlight"] p.body-text,
.section[data-type="models"] p.body-text, .section[data-type="model"] p.body-text,
.section[data-type="offer_models"] p.body-text, .section[data-type="app_features"] p.body-text,
.section[data-type="service_grid"] p.body-text, .section[data-type="what_you_get"] p.body-text,
.section[data-type="cooperation_models"] p.body-text, .section[data-type="partner_types"] p.body-text,
.section[data-type="subtypes"] p.body-text, .section[data-type="criteria"] p.body-text,
.section[data-type="values"] p.body-text, .section[data-type="steps"] p.body-text,
.section[data-type="how"] p.body-text, .section[data-type="process"] p.body-text,
.section[data-type="about_grid"] p.body-text, .section[data-type="stats"] p.body-text,
.section[data-type="compare"] p.body-text, .section[data-type="requirements"] p.body-text,
.section[data-type="integration"] p.body-text,
.section[data-type="features"] .wf-hint, .section[data-type="feature_highlight"] .wf-hint,
.section[data-type="models"] .wf-hint, .section[data-type="model"] .wf-hint,
.section[data-type="offer_models"] .wf-hint, .section[data-type="app_features"] .wf-hint,
.section[data-type="service_grid"] .wf-hint, .section[data-type="what_you_get"] .wf-hint,
.section[data-type="cooperation_models"] .wf-hint, .section[data-type="partner_types"] .wf-hint,
.section[data-type="subtypes"] .wf-hint, .section[data-type="criteria"] .wf-hint,
.section[data-type="values"] .wf-hint, .section[data-type="steps"] .wf-hint,
.section[data-type="how"] .wf-hint, .section[data-type="process"] .wf-hint,
.section[data-type="about_grid"] .wf-hint, .section[data-type="stats"] .wf-hint,
.section[data-type="compare"] .wf-hint, .section[data-type="requirements"] .wf-hint,
.section[data-type="integration"] .wf-hint { color: var(--ef-near-black); }
/* Der Text in einer Karte folgt der Kartenrolle, nicht der Sektion. In einer
   Farbflaechen-Karte darin steht er auf dunklem Grund — graue Schrift darauf
   war der zweite Teil des Problems. */
.section .card p.body-text, .section .card .wf-hint { color: var(--ef-card-ink-2); }
.section .card .gradient-card p.body-text,
.gradient-card p.body-text { color: #ffffffdb; }
.section .card .gradient-card h3, .gradient-card h3 { color: var(--ef-white); }

/* ==================================================================== Basis */
html { scroll-behavior: smooth; }

body {
  font-family: var(--ef-font-text);
  font-size: var(--ef-body-m);
  line-height: var(--ef-lh-body);
  color: var(--ef-near-black);
  background: var(--ef-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.frame { width: 100%; max-width: none; margin: 0; }

/* =============================================================== Typografie */
h1, h2, h3, h4, h5, h6,
.ef-guesthero h1,
.overlay-scrim h1, .overlay-scrim h2, .overlay-scrim h3 {
  font-family: var(--ef-font-heading);
  font-weight: 500;                       /* Syne Medium — keine Light-Schnitte */
  color: var(--ef-heading);
  text-wrap: balance;
}
h1 { font-size: var(--ef-h1); line-height: var(--ef-lh-h1); letter-spacing: var(--ef-ls-h1); margin: 0 0 1.25rem; }
h2 { font-size: var(--ef-h2); line-height: var(--ef-lh-h2); letter-spacing: 0; margin: 0 0 1.25rem; }
h3 { font-size: var(--ef-h3); line-height: var(--ef-lh-h3); letter-spacing: 0; margin: 0 0 .75rem; }
h4 { font-size: clamp(20px, 1.2rem + .4vw, 24px); line-height: var(--ef-lh-h3); font-weight: 500; margin: 0 0 .5rem; }

p, li, summary, .body-text, .faq-a, .link-list a, .wf-hint { font-family: var(--ef-font-text); }

p.body-text {
  font-size: var(--ef-body-m);
  line-height: var(--ef-lh-body);
  color: var(--ef-text-2);
  margin: 0 0 1.25rem;
  max-width: 68ch;                        /* Styleguide: 45–75 Zeichen je Zeile */
}

/* Eyebrow — Akzenttext. Auf hellen Flaechen Deep Teal (nicht Acid Yellow:
   Gelb auf Weiss ist nicht lesbar), auf dunklen Flaechen Acid Yellow. */
.eyebrow {
  font-family: var(--ef-font-text);
  font-size: var(--ef-ui);
  line-height: var(--ef-lh-ui);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ef-deep-teal);
  margin: 0 0 1rem;
}
.section[data-type="cta"] .eyebrow, .section[data-type="cta_row"] .eyebrow,
.section[data-type="cta_split"] .eyebrow, .section[data-type="download_cta"] .eyebrow,
.section[data-type="app_cta"] .eyebrow, .section[data-type="app_banner"] .eyebrow,
.section[data-type="support_band"] .eyebrow, .section[data-type="newsletter"] .eyebrow,
.section[data-type="promo_band"] .eyebrow, .section[data-type="hotline"] .eyebrow,
.section[data-type="intro"] .eyebrow, .section[data-type="principle"] .eyebrow,
.section[data-type="trust_band"] .eyebrow, .section[data-type="trust_partners"] .eyebrow,
.section[data-type="mission_list"] .eyebrow, .section[data-type="scope_note"] .eyebrow,
.section[data-type="highlights"] .eyebrow, .section[data-type="gate"] .eyebrow,
.section[data-type="tco_alliance"] .eyebrow,
.overlay-scrim .eyebrow, .ef-guesthero .eyebrow { color: var(--ef-acid-yellow); }

strong { font-weight: 600; }

/* ================================================================ Sektionen */
.section, nav.wf-nav, .ef-rolebar {
  --ef-gutter: max(var(--ef-global-padding), (100% - var(--ef-container)) / 2);
}
.section { border-bottom: 0; padding: var(--ef-section) var(--ef-gutter); }
nav.wf-nav, .ef-rolebar { padding-left: var(--ef-gutter); padding-right: var(--ef-gutter); }

/* Wireframe-Beschriftung — im Design ausgeblendet, im Quelltext unveraendert */
.block-label, .section[data-type="hero"] .block-label,
.ef-guesthero > .block-label { display: none; }

/* ================================================================== Buttons */
/* Styleguide: CTA-Flaeche Acid Yellow, CTA-Text Near Black.
   Neon Lime uebernimmt den Hover-State ("Hover-States, Badges"). */
/* Der Styleguide gibt Acid Yellow fuer "Highlights, Labels, Icons und
   WICHTIGE CTAs" frei — nicht fuer jeden Button. Deshalb:
     hell (Weiss, Interface Gray)  -> Deep Teal, weisse Schrift  (9,60:1)
     dunkel (Deep/Teal Green, Hero)-> Acid Yellow, Near Black    (15,68:1)
   Auf hellen Flaechen ist Acid Yellow damit ganz raus; sichtbar bleibt es
   dort, wo es der Styleguide selbst zeigt: als CTA auf Deep Teal. */
.cta-button, .ef-map-reset {
  font-family: var(--ef-font-text);
  font-size: var(--ef-body-m);
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--ef-r-button);
  border: 1px solid var(--ef-deep-teal);
  background: var(--ef-deep-teal);
  color: var(--ef-white);
  padding: .85rem 1.5rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  transition: background-color .25s, border-color .25s, box-shadow .25s, color .25s;
}
.cta-button:hover, .ef-map-reset:hover {
  background: var(--ef-teal-green);
  border-color: var(--ef-teal-green);
  color: var(--ef-white);
  box-shadow: var(--ef-shadow-30);
  text-decoration: none;
}

/* Der wichtige CTA: auf Deep Teal und im Hero. Dort ist Acid Yellow die
   einzige Farbe, die traegt — und genau so zeigt es der Styleguide. */
.section[data-type="cta"] .cta-button, .section[data-type="cta_row"] .cta-button,
.section[data-type="cta_split"] .cta-button, .section[data-type="download_cta"] .cta-button,
.section[data-type="app_cta"] .cta-button, .section[data-type="app_banner"] .cta-button,
.section[data-type="intro"] .cta-button, .section[data-type="principle"] .cta-button,
.section[data-type="promo_band"] .cta-button, .section[data-type="hotline"] .cta-button,
.section[data-type="trust_band"] .cta-button, .section[data-type="mission_list"] .cta-button,
.section[data-type="gate"] .cta-button, .section[data-type="support_band"] .cta-button,
.section[data-type="newsletter"] .cta-button,
.section[data-type="highlights"] .cta-button, .section[data-type="scope_note"] .cta-button,
.section[data-type="tco_alliance"] .cta-button, .section[data-type="trust_partners"] .cta-button,
.overlay-scrim .cta-button, .ef-gh-inner .cta-button,
footer.wf-footer .cta-button {
  background: var(--ef-acid-yellow);
  border-color: var(--ef-acid-yellow);
  color: var(--ef-near-black);
}
.section[data-type="cta"] .cta-button:hover, .section[data-type="cta_row"] .cta-button:hover,
.section[data-type="cta_split"] .cta-button:hover, .section[data-type="download_cta"] .cta-button:hover,
.section[data-type="app_cta"] .cta-button:hover, .section[data-type="app_banner"] .cta-button:hover,
.section[data-type="intro"] .cta-button:hover, .section[data-type="principle"] .cta-button:hover,
.section[data-type="promo_band"] .cta-button:hover, .section[data-type="hotline"] .cta-button:hover,
.section[data-type="trust_band"] .cta-button:hover, .section[data-type="mission_list"] .cta-button:hover,
.section[data-type="gate"] .cta-button:hover, .section[data-type="support_band"] .cta-button:hover,
.section[data-type="newsletter"] .cta-button:hover,
.section[data-type="highlights"] .cta-button:hover, .section[data-type="scope_note"] .cta-button:hover,
.section[data-type="tco_alliance"] .cta-button:hover, .section[data-type="trust_partners"] .cta-button:hover,
.overlay-scrim .cta-button:hover, .ef-gh-inner .cta-button:hover,
footer.wf-footer .cta-button:hover {
  background: var(--ef-neon-lime);
  border-color: var(--ef-neon-lime);
  color: var(--ef-near-black);
}

/* Auf den dunklen Farbflaechen-Karten traegt Weiss — drei gelbe Knoepfe
   nebeneinander waeren genau die inflationaere Verwendung, die der
   Styleguide ausschliesst. */
.gradient-card .cta-button {
  background: var(--ef-white);
  border-color: var(--ef-white);
  color: var(--ef-near-black);
}
.gradient-card .cta-button:hover {
  background: var(--ef-acid-yellow);
  border-color: var(--ef-acid-yellow);
  color: var(--ef-near-black);
}
.ef-map-reset {
  background: none;
  border-color: var(--ef-border);
  color: var(--ef-text-2);
  font-weight: 500;
  padding: .55rem 1.15rem;
  font-size: var(--ef-ui);
}
.ef-map-reset:hover { background: var(--ef-gray); color: var(--ef-near-black); border-color: var(--ef-border); box-shadow: none; }

/* =================================================================== Karten */
/* Der graue Rand ist ueberall raus; die Kaesten stehen nur noch auf dem
   milden Schatten. Der Rand bleibt als transparente Linie stehen, damit
   Boxen mit und ohne sichtbaren Rand gleich breit bauen. */
.card {
  border: 1px solid var(--ef-card-border);
  border-radius: var(--ef-r-card);
  background: var(--ef-card-bg);
  box-shadow: var(--ef-shadow-soft);
  padding: 1.75rem;
  color: var(--ef-card-ink);
  position: relative;
  z-index: 1;
}
/* Ueberschriften in Boxen stehen in Inter, nicht in Syne. Syne bleibt der
   Schauzeile und den Kapitelueberschriften vorbehalten — in Boxen liest
   Inter ruhiger und ordnet sich dem Satzspiegel unter. */
.card h3, .card h4,
.ef-princard h3,
.ef-faq .faq-tile h4,
.ef-map-panel h3,
.gradient-card h3 {
  font-family: var(--ef-font-text);
  font-weight: 600;
  letter-spacing: 0;
}
.card h3 { font-size: clamp(18px, 1.05rem + .3vw, 21px); color: var(--ef-card-ink); }
.card h4 { font-size: var(--ef-body-m); }
/* Lange Komposita sind in einer schmalen Box breiter als die Spalte —
   "Genehmigungsfaehigkeit" brach sonst ohne Strich mitten im Wort. Die
   Seiten tragen lang="de|en|nl", die Trennung greift also sprachrichtig. */
.card h3, .card h4, .ef-princard h3 { hyphens: auto; -webkit-hyphens: auto; }
/* In den Boxen steht der Fliesstext eine Stufe kleiner als im Satzspiegel —
   Small/UI aus der Typo-Tabelle (12-15 px). */
.card p.body-text, .ef-princard .body-text,
.ef-faq .faq-tile .faq-a { font-size: var(--ef-ui); line-height: var(--ef-lh-body); color: var(--ef-card-ink-2); margin-bottom: 0; }
.card p.body-text + * { margin-top: 1rem; }
/* Informationsboxen — Boxen ohne Motiv. Keine eigene Flaeche, kein Schatten,
   nur eine 3 px starke Kontur in Teal Green; die Schrift bleibt Deep Teal.
   Damit sind sie Kontur statt Kasten: sie geben dem Raster Halt, ohne dass
   die Flaeche darunter unterbrochen wird. (Sie standen zwischenzeitlich
   flaechig auf Deep Teal, davor und danach weiss.) Teal Green kommt hier
   erstmals wieder vor, seit es als FLAECHENfarbe gestrichen wurde — als
   Zeichenfarbe war es der Marke ohnehin erhalten geblieben.
   Auf ohnehin dunklen Flaechen bleiben die Boxen die durchscheinende
   Variante; eine Kontur allein traegt dort nicht. Die Auswahl laeuft ueber
   :has(); wo der Browser das nicht kennt, bleibt die Box weiss. */
/* :not(:has(.gradient-card)) haelt die Traegerkarten der Farbflaechen aus der
   Regel heraus — deren Schrift steht auf Deep Teal und muss weiss bleiben. */
.card:not(:has(img)):not(:has(.ratio-box)):not(:has(.gradient-card)) {
  background: var(--ef-card-plain-bg);
  border-color: var(--ef-card-plain-border);
  border-width: var(--ef-card-plain-border-width, 1px);
  box-shadow: var(--ef-card-plain-shadow, var(--ef-shadow-soft));
  color: var(--ef-card-plain-ink);
}
.section .card:not(:has(img)):not(:has(.ratio-box)):not(:has(.gradient-card)) h3,
.section .card:not(:has(img)):not(:has(.ratio-box)):not(:has(.gradient-card)) h4 { color: var(--ef-card-plain-ink); }
.section .card:not(:has(img)):not(:has(.ratio-box)):not(:has(.gradient-card)) p.body-text,
.section .card:not(:has(img)):not(:has(.ratio-box)):not(:has(.gradient-card)) .wf-hint { color: var(--ef-card-plain-ink-2); }
.section .card:not(:has(img)):not(:has(.ratio-box)):not(:has(.gradient-card)) .link-list a { color: var(--ef-card-plain-link); }
.section .card:not(:has(img)):not(:has(.ratio-box)):not(:has(.gradient-card)) .link-list a:hover { color: var(--ef-card-plain-link-hover); }
.section .card:not(:has(img)):not(:has(.ratio-box)):not(:has(.gradient-card)) .cta-button {
  background: var(--ef-card-plain-cta-bg);
  border-color: var(--ef-card-plain-cta-bg);
  color: var(--ef-card-plain-cta-ink);
}

/* ---------------------------------------------------------- Box in der Box
   Der Bestand verschachtelt an zwei Stellen, und beide Male entstand dadurch
   ein Rahmen im Rahmen:

   (a) Die Farbflaechen-Karte steckt in einer gewoehnlichen Karte — 111 Mal
       im ganzen Bestand, immer als einziges Kind. Der aeussere Kasten hat
       dort keine eigene Aussage; er wird zum blossen Traeger, die
       Farbflaeche selbst ist die Karte.
   (b) Auf "Eignung pruefen" steht "PV in der Naehe" innerhalb von
       "Netzanschluss" — in der Quelle fehlt ein </div>. Am Markup wird
       nichts geaendert (Regel des Projekts); die innere Box legt statt
       dessen ihren Rahmen ab und wird zur abgesetzten Textgruppe.

   Dasselbe gilt fuer die Bildkachel: eine Karte, die nur eine Bildflaeche
   traegt (6 Mal im Bestand), stand als weisser Rahmen um das Motiv — neben
   den randlos laufenden Farbflaechen-Kacheln sah das aus, als fehle dort
   etwas. Das Bild ist jetzt selbst die Kachel.

   Die Selektoren beginnen mit .section, damit sie die Informationsbox-Regel
   oben (0,3,1) sicher schlagen. */
.section .card:has(> .gradient-card),
.section .card:has(> .overlay-wrap) {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.section .card > .gradient-card,
.section .card > .overlay-wrap {
  flex: 1 1 auto;
  border-radius: var(--ef-r-card);
  box-shadow: var(--ef-shadow-soft);
}
.section .card .card {
  background: none;
  border: 0;
  /* Die Trennlinie folgt der Kontur der Box, nur schwächer — so bleibt
     erkennbar, dass sie zur selben Box gehoert und keine neue aufmacht. */
  border-top: 1px solid color-mix(in srgb, var(--ef-card-plain-border) 40%, transparent);
  border-radius: 0;
  box-shadow: none;
  padding: 1.25rem 0 0;
  margin-top: 1.5rem;
}
.section .card .card h3 { font-size: var(--ef-body-m); }

/* Gleiche Kartenhoehe, und Bild wie Button sitzen auf einer Linie: die
   Karte ist eine Spalte, das Bild schiebt sich mit margin-top:auto nach
   unten. Bei ungleich langen Ueberschriften stehen die Motive dadurch
   trotzdem auf gleicher Hoehe. */
.card { display: flex; flex-direction: column; }
.card > .ratio-box:not(:first-child) { margin-top: auto; }
.card > .cta-button:last-child:not(:first-child) { align-self: flex-start; }

.card.is-link { transition: transform .3s, box-shadow .3s, border-color .3s; text-decoration: none; }
.card.is-link:hover {
  transform: translateY(-3px);
  box-shadow: var(--ef-shadow-30);
  border-color: var(--ef-teal-green);
}

/* Ein Button, der direkt auf ein Bild folgt, sass ohne Abstand an dessen
   Unterkante. Betrifft 126 Stellen im Bestand. */
.ratio-box + .cta-button,
.placeholder + .cta-button,
.overlay-wrap + .cta-button,
.ef-map-wrap + .cta-button,
img + .cta-button { margin-top: 1.5rem; }
.ratio-box + .link-list,
.placeholder + .link-list { margin-top: 1.25rem; }

/* Dieselbe Sache noch einmal, jetzt fuer Text und Boxenraster: .wf-hint,
   .items-grid und die Linklisten tragen keinen unteren Abstand, ein Button
   dahinter klebte deshalb an der letzten Zeile bzw. an der letzten Box.
   Fliesstext (p.body-text) hat seinen Abstand selbst und bleibt aussen vor. */
.wf-hint + .cta-button,
.ef-map-out + .cta-button,
.ef-map-empty + .cta-button,
.link-list + .cta-button,
ul + .cta-button { margin-top: 1.5rem; }
.items-grid + .cta-button,
.items-grid + .link-list,
.items-grid + .ef-map-wrap { margin-top: 2rem; }
/* Auf schmalen Schirmen stehen die beiden Knoepfe des Karten-Panels
   untereinander (Bestandsregel width:100 %) — dann braucht auch der zweite
   eine Fuge. */
.cta-button + .ef-map-reset { margin-top: .75rem; }

.items-grid { gap: var(--ef-space-m); }
.columns { gap: var(--ef-space-xl); }
/* Boxen, die nicht im Raster stehen, sondern direkt untereinander in einer
   Spalte: .column hat im Bestand keinen gap, die Kaesten sassen deshalb
   aufeinander. 15 Stellen auf 9 Seiten. Derselbe Abstand wie im Raster. */
.column > .card + .card { margin-top: var(--ef-space-m); }

.link-list { gap: .65rem; }
.link-list a {
  color: var(--ef-text-2);
  text-decoration: none;
  font-size: var(--ef-body-m);
  transition: color .25s;
}
.link-list a:hover { color: var(--ef-link-hover); text-decoration: none; }

/* ===================================================================== Bild */
.ratio-box, .placeholder {
  border-radius: var(--ef-r-media);
  overflow: hidden;
  background: var(--ef-gray);
}
/* Leichtes Overlay ueber den Bildern in Boxen — Styleguide, Variante 3
   "Near Black Subtle", 20 % (zulaessig 20-35 %). Hero und Gast-Hero haben
   ihren eigenen Verlauf und bleiben ausgenommen. */
.ratio-box { position: relative; }
.ratio-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(7, 28, 27, .20);
  pointer-events: none;
  z-index: 1;
}
.overlay-bg .ratio-box::after, .ef-gh-bg .ratio-box::after { display: none; }
.placeholder.is-bild > img, img.ef-bild { border-radius: inherit; }
/* Styleguide: Neon Lime fuer "Akzente, Status, Markierungen". */
.ef-bildtyp, .badge {
  border-radius: var(--ef-r-button);
  font-family: var(--ef-font-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  background: var(--ef-neon-lime);
  border-color: var(--ef-neon-lime);
  color: var(--ef-near-black);
}
.badge { padding: .3rem .85rem; }
.badge .text-block-14, .text-block-14 { color: var(--ef-near-black); }

/* ================================================== Foto-Overlays (Kapitel 5)
   Empfohlen: Primaersystem — Deep Teal Verlauf, links 100 %, Mitte 55 %,
   rechts 0 %. Flaechen ausserhalb des Hero: Variante 2, Deep Teal 45 %. */
.section[data-type="hero"] { padding: 0; background: var(--ef-deep-teal); }
.section[data-type="hero"] .overlay-wrap { border-radius: 0; min-height: min(88vh, 780px); overflow: hidden; }
.section:not([data-type="hero"]) .overlay-wrap { border-radius: var(--ef-r-panel); overflow: hidden; }
.overlay-bg .placeholder, .overlay-bg .placeholder.is-bild > img,
.ef-gh-bg .placeholder, .ef-gh-bg .placeholder.is-bild > img { border-radius: 0; }
/* Der Platzhalter-Container traegt aus dem Bestand ein padding von
   30px/18px/14px — dadurch sass das Bild in einem dunklen Rahmen statt
   flaechig im Hintergrund. */
.ef-gh-bg .placeholder, .ef-gh-bg .placeholder.is-bild,
.overlay-bg .placeholder, .overlay-bg .placeholder.is-bild { padding: 0; }

/* Rollen-Hero: Text steht links — Primaersystem, Verlauf 100/55/0 von links */
.section[data-type="hero"] .overlay-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0, 78, 74, 1) 0%,
    rgba(0, 78, 74, .55) 50%,
    rgba(0, 78, 74, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Gast-Hero: Text steht mittig, ein Verlauf von links wuerde die rechte
   Haelfte der Schauzeile im Klaren stehen lassen. Deshalb Variante 2 aus dem
   Styleguide — Deep Teal gleichmaessig, 55 % (zulaessig sind 40–65 %). */
.ef-guesthero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 78, 74, .55);
  pointer-events: none;
  z-index: 1;
}
.section:not([data-type="hero"]) .overlay-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 78, 74, .45);      /* Variante 2 — Deep Teal Standard */
  pointer-events: none;
  z-index: 1;
}
.overlay-content { position: relative; z-index: 2; }
/* Der Text sass am oberen Rand der Bildflaeche (die Seite setzt
   justify-content:flex-start inline). Er steht jetzt mittig, und der Platz
   fuer die Laufschrift wird oben und unten gleich reserviert — sonst rutscht
   die mittige Lage wieder nach oben. */
.section[data-type="hero"] .overlay-content {
  justify-content: center;
  padding-top: clamp(5rem, 8vw, 7.5rem);
  padding-bottom: clamp(5rem, 8vw, 7.5rem);
  /* Dieselbe Rinne wie Kopfleiste und Bereichsmenue — damit stehen Logo,
     Menue und Schauzeile auf breiten Schirmen auf einer Kante. */
  padding-left: var(--ef-gutter);
  padding-right: var(--ef-gutter);
}
.section:not([data-type="hero"]) .overlay-content { padding: clamp(1.5rem, 3vw, 3rem); }

.overlay-scrim { background: none; backdrop-filter: none; border-radius: 0; padding: 0; max-width: 46rem; box-shadow: none; }
.overlay-scrim h1 {
  font-size: var(--ef-display);
  line-height: var(--ef-lh-display);
  letter-spacing: var(--ef-ls-display);
  color: var(--ef-white);
}
.overlay-scrim h2, .overlay-scrim h3 { color: var(--ef-white); }
/* Textfarben auf Overlays laut Styleguide: Headline 100 %, Fliesstext 85–90 % */
.overlay-scrim p.body-text { color: #ffffffe6; font-size: var(--ef-body-l); max-width: 36rem; }
.card.is-link .overlay-scrim h3 { color: var(--ef-white); }

/* Gast-Hero */
.section.ef-guesthero { padding: 0; }
.ef-guesthero { min-height: min(88vh, 820px); }
.ef-guesthero h1 {
  font-family: var(--ef-font-heading);
  font-size: var(--ef-display);
  line-height: var(--ef-lh-display);
  letter-spacing: var(--ef-ls-display);
  font-weight: 500;
  color: var(--ef-white);
}
.ef-guesthero .eyebrow { font-size: var(--ef-ui); letter-spacing: .04em; text-transform: uppercase; }
.ef-guesthero .body-text { color: #ffffffe6; font-size: var(--ef-body-l); }
.ef-gh-inner { padding-top: clamp(5rem, 8vw, 7.5rem); padding-bottom: clamp(5rem, 8vw, 7.5rem); }

/* Farbflaechen-Karten. Die Verlaeufe stehen als Inline-Stil an der Karte;
   sie stammen aus dem Bestand und liegen teils ausserhalb der Palette (Grau
   #2a3330, Hellgruen #2bbf90). Alle Karten tragen deshalb denselben
   CI-Verlauf Deep Teal -> Teal-700. Inline-Stile lassen sich nur mit
   !important ueberschreiben, daher hier. */
.gradient-card { border-radius: var(--ef-r-panel); padding: clamp(1.75rem, 3vw, 3rem); }
.gradient-card {
  background-image: linear-gradient(163deg, var(--ef-deep-teal), var(--ef-teal-700)) !important;
}
.gradient-card h2 { color: var(--ef-white); font-family: var(--ef-font-heading); }
.gradient-card h3 { color: var(--ef-white); font-size: clamp(18px,1.05rem + .3vw,21px); }
.gradient-card p.body-text { color: #ffffffd6; }
.gradient-card .eyebrow { color: var(--ef-acid-yellow); }
.gradient-card .link-list a { color: #ffffffe0; }
.gradient-card .link-list a:hover { color: var(--ef-acid-yellow); }
.gradient-card .swatch-label { display: none; }

/* =============================================================== Rollenkopf */
/* Logo laut Styleguide: Marken-Teal auf Weiss (Variante "Primaer").
   Bildersatz statt Markup-Aenderung — der Text bleibt im Quelltext und in
   der Vorlesereihenfolge. */
.ef-rolebar {
  position: sticky; top: 0; z-index: 40;
  background: #ffffffe6;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ef-border);
  padding-top: .85rem; padding-bottom: .85rem;
  min-height: 4.5rem;
  align-items: center;
}
/* Wortmarke ohne Claim (Variante "Primaer", Marken-Teal auf Weiss).
   Seitenverhaeltnis 242,62 : 42,62 = 5,6928 — Breite und Hoehe muessen dazu
   passen, sonst schneidet der Kasten das Logo an. */
.ef-rolebar .ef-brand {
  display: block;
  height: 38px;
  width: 217px;                 /* 38 x 5,6928 = 216,3 */
  background: url(logo/logo-markenteal.svg) left center / contain no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
  flex: none;
}
.ef-rolebar .ef-lbl {
  font-family: var(--ef-font-text);
  font-size: 12px; color: var(--ef-text-gray);
  letter-spacing: 0; text-transform: none;
}
/* Die Legende vor der Sprachwahl entfaellt — DE/EN/NL und der Globus
   erklaeren sich selbst. Die Rollen-Legende bleibt. */
.ef-rolebar .ef-switch .ef-lbl { display: none; }
.ef-rolebar a.ef-role {
  font-family: var(--ef-font-text);
  font-size: var(--ef-ui); font-weight: 500;
  border-radius: var(--ef-r-button);
  border: 1px solid transparent;
  background: none;
  color: var(--ef-text-gray);
  padding: .45rem 1rem;
  text-decoration: none;
  transition: color .25s, background-color .25s, border-color .25s;
}
.ef-rolebar a.ef-role:hover { color: var(--ef-near-black); background: var(--ef-gray); }
.ef-rolebar a.ef-role.active {
  background: var(--ef-acid-yellow);
  border-color: var(--ef-acid-yellow);
  color: var(--ef-near-black);
  font-weight: 600;
}
.ef-rolebar a.ef-lang {
  font-family: var(--ef-font-text);
  font-size: 12px; font-weight: 500;
  color: var(--ef-text-gray);
  border-radius: var(--ef-r-button);
  padding: .3rem .6rem;
  text-decoration: none;
}
.ef-rolebar a.ef-lang.active { background: var(--ef-deep-teal); color: var(--ef-white); }
.ef-rolebar a.ef-lang:hover { color: var(--ef-near-black); }
/* Das Sprach-Icon war das blaue System-Emoji — die einzige Farbe auf der
   Seite ausserhalb der Palette. Der Glyph wird ausgeblendet und durch ein
   Icon in Deep Teal ersetzt; das "+" daneben bleibt. */
.ef-globe {
  border-radius: var(--ef-r-button);
  font-size: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: .3rem .45rem;
}
.ef-globe::before {
  content: "";
  width: 17px; height: 17px;
  background: url(icons/globe.svg) center / contain no-repeat;
  flex: none;
}
.ef-globe-plus {
  font-family: var(--ef-font-text);
  font-size: 12px;
  font-weight: 600;
  color: var(--ef-deep-teal);
  line-height: 1;
}
.ef-globe:hover { background: var(--ef-gray); }

/* ============================================================ Bereichsmenue */
nav.wf-nav {
  position: sticky; top: 4.5rem; z-index: 30;
  background: #ffffffe6;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ef-border);
  padding-top: .6rem; padding-bottom: .6rem;
  gap: .35rem;
}
nav.wf-nav a {
  font-family: var(--ef-font-text);
  font-size: var(--ef-ui); font-weight: 500;
  color: var(--ef-text-gray);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--ef-r-button);
  padding: .45rem 1rem;
  text-decoration: none;
  transition: color .25s, background-color .25s;
}
nav.wf-nav a:hover { color: var(--ef-deep-teal); background: var(--ef-gray); }
/* Der ausgewaehlte Punkt traegt denselben Ton wie der Hover-Zustand — die
   volle Deep-Teal-Pille war zu laut fuer eine Unternavigation. Kenntlich
   bleibt er ueber das Schriftgewicht. */
nav.wf-nav a.active {
  color: var(--ef-deep-teal);
  background: var(--ef-gray);
  border: 1px solid transparent;
  font-weight: 600;
}

/* ================================================================ Fusszeile */
/* In der Fusszeile ist .card nur eine Gruppierung, keine Box. Die
   Kartenrollen werden deshalb hier neutralisiert — sonst muesste jede
   Kartenregel einzeln zurueckgenommen werden, und das haengt am Wettlauf der
   Spezifitaeten (genau daran haben die Spalten kurzzeitig Kaesten bekommen). */
footer.wf-footer {
  --ef-card-bg: transparent;
  --ef-card-border: transparent;
  --ef-card-plain-bg: transparent;
  --ef-card-plain-border: transparent;
  --ef-card-plain-border-width: 0;
  --ef-card-plain-shadow: none;
}
/* Die Fusszeile steht auf --ef-teal-800: Deep Teal zu 35 % in Near Black,
   ergibt #052E2B. Dunkler als die Deep-Teal-Baender darueber, sodass sie sich
   absetzt statt in sie ueberzugehen — aber weiter ein Teal und nicht
   Near Black flaechig, das im Styleguide fuer Text und Kanten steht.
   Der Ton stammt aus der Tonleiter am Anfang dieser Datei, ist also keine
   neue Farbe. Weiss darauf: 14,66:1. */
footer.wf-footer {
  --ef-bg: var(--ef-teal-800);
  --ef-bg-2: var(--ef-teal-800);
  background: var(--ef-teal-800);
}
footer.wf-footer { border-top: 0; }
footer.wf-footer .section {
  background: none;
  padding-top: var(--ef-section-lg);
  padding-bottom: var(--ef-space-xl);
}
footer.wf-footer .card {
  background: none; border: 0; box-shadow: none; padding: 0;
  color: var(--ef-white);
}
footer.wf-footer h3 {
  font-family: var(--ef-font-text);
  font-size: var(--ef-ui); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ef-acid-yellow);
  margin-bottom: 1rem;
}
footer.wf-footer p.body-text { color: #ffffffd6; font-size: var(--ef-body-m); }
footer.wf-footer .link-list a { color: #ffffffe0; font-size: var(--ef-body-m); }
footer.wf-footer .link-list a:hover { color: var(--ef-acid-yellow); }
footer.wf-footer .wf-hint { color: #ffffffa3; }

/* ====================================================================== FAQ */
.ef-faq .faq-cat {
  font-family: var(--ef-font-text);
  font-size: var(--ef-ui); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ef-deep-teal);
  margin: 2.5rem 0 .75rem;
}
.ef-faq details {
  border: 1px solid transparent;
  border-radius: var(--ef-r-card);
  background: var(--ef-white);
  margin: .5rem 0;
  box-shadow: var(--ef-shadow-soft);
  transition: border-color .3s;
}
.ef-faq details:hover { border-color: var(--ef-teal-green); }
.ef-faq summary {
  font-family: var(--ef-font-text);
  font-size: var(--ef-body-m); font-weight: 600;
  color: var(--ef-near-black);
  padding: 1.15rem 1.5rem;
}
.ef-faq summary::after { color: var(--ef-teal-green); font-weight: 500; font-size: 1.4rem; }
.ef-faq details[open] > summary { border-bottom: 1px solid var(--ef-gray); }
.ef-faq details .faq-a {
  font-size: var(--ef-body-m);
  line-height: var(--ef-lh-body);
  color: var(--ef-text-gray);
  padding: 1rem 1.5rem 1.4rem;
}
.ef-faq .faq-tile h4 { font-size: var(--ef-body-m); }
.ef-faq .faq-tile .faq-a { color: var(--ef-text-gray); font-size: var(--ef-body-m); }

/* ================================================================ Karte/Map */
.ef-map, .ef-map-panel { border-radius: var(--ef-r-panel); border-color: var(--ef-border); }
/* Das Ergebnis-Panel ohne Rand, nur auf dem milden Schatten. */
.ef-map-panel { background: var(--ef-white); border: 0; box-shadow: var(--ef-shadow-soft); padding: 1.5rem; }
.ef-map-panel h3 { font-size: clamp(18px,1.05rem + .3vw,21px); }
/* Der Hinweis unter dem Ergebnis endet ohne Abstand — der Knopf sass an der
   letzten Zeile. Die Regel ist spezifischer als die Bestandsregel
   .ef-map-panel .cta-button{margin:0} aus der mobilen Media Query. */
.ef-map-panel .wf-hint + .cta-button { margin-top: 1.75rem; }
.ef-map-hint { font-family: var(--ef-font-text); font-size: var(--ef-ui); color: var(--ef-text-gray); }
.ef-map-out li { font-size: var(--ef-ui); border-color: var(--ef-gray); }

/* ============================================================ Prinzipkarte */
/* Eine Informationsbox wie die anderen: ohne Flaeche, ohne Schatten, Kontur
   in Teal Green, Schrift in Deep Teal. Der Bestand setzt hier zusaetzlich
   einen 3-px-Balken oben (border-top) — der entfaellt mit dem umlaufenden
   Rand, der jetzt ohnehin 3 px stark ist. */
.ef-princard {
  border: var(--ef-card-plain-border-width, 1px) solid var(--ef-card-plain-border);
  border-radius: var(--ef-r-card);
  background: var(--ef-card-plain-bg);
  box-shadow: var(--ef-card-plain-shadow, var(--ef-shadow-soft));
  padding: 1.75rem;
}
.ef-princard h3 { font-size: clamp(18px,1.05rem + .3vw,21px); color: var(--ef-card-plain-ink); }
.ef-princard .body-text { color: var(--ef-card-plain-ink-2); font-size: var(--ef-body-m); }

/* ================================================================ Kleinkram */
.wf-hint { font-family: var(--ef-font-text); font-size: var(--ef-ui); color: var(--ef-text-gray); line-height: var(--ef-lh-body); }
.alert-band, .note-band, .result-box {
  border-radius: var(--ef-r-card);
  border-color: var(--ef-border);
  font-family: var(--ef-font-text);
}
/* Styleguide-Beispiel: "Wichtige Benachrichtigung" steht auf Acid Yellow.
   Der Fliesstext darin stand als Text Gray auf Gelb — 4,0:1, und ausgerechnet
   auf dem Stoerungshinweis. p.body-text setzt seine Farbe direkt und schlaegt
   damit die geerbte Bandfarbe; sie muss hier eigens gesetzt werden. */
.alert-band { background: var(--ef-acid-yellow); border-color: var(--ef-acid-yellow); color: var(--ef-near-black); }
.alert-band a { color: var(--ef-near-black); }
.alert-band h2, .alert-band h3, .alert-band h4,
.alert-band p.body-text, .alert-band .wf-hint { color: var(--ef-near-black); }
/* Der interne Hinweis — eine Anmerkung des Entwurfs, ausdruecklich "nicht
   Teil der Seite". Er steht immer auf Deep Teal (data-type="scope_note"), und
   dort war der graue Kasten mit heller Schrift praktisch unlesbar.
   Jetzt Neon Lime: der Styleguide fuehrt die Farbe fuer "Akzente, Status,
   MARKIERUNGEN" — genau das ist dieser Kasten. Auf Deep Teal sind das 7,91:1.
   Keine Flaeche, 2 px Rand: So liest er sich als Randbemerkung und nicht als
   Inhalt der Seite. */
.note-band {
  background: none;
  border: 2px solid var(--ef-neon-lime);
  color: var(--ef-neon-lime);
}
.note-band h2, .note-band h3, .note-band h4,
.note-band p.body-text, .note-band .wf-hint, .note-band li { color: var(--ef-neon-lime); }
.note-band a { color: var(--ef-neon-lime); text-decoration: underline; }
/* Ergebnis-Kasten wie das Karten-Panel: kein Rand, milder Schatten. Der
   Bestand setzt hier einen gruenen Rand und einen blassgruenen Grund
   (#f0f8f5) — beides liegt ausserhalb der Palette. */
.result-box { background: var(--ef-white); border: 0; box-shadow: var(--ef-shadow-soft); }
.form-input-placeholder {
  border-radius: var(--ef-r-button);
  border-color: var(--ef-border);
  font-family: var(--ef-font-text);
  color: var(--ef-text-gray);
  font-size: var(--ef-body-m);
  max-width: 34rem;
}
/* Der Button sass direkt auf der Adresszeile. */
.form-input-placeholder + .cta-button { margin-top: 1.25rem; }

/* Sprach-Overlay */
.ef-lang-card { border-radius: var(--ef-r-panel); box-shadow: 0 24px 60px #071c1b3d; }
.ef-lang-title { font-family: var(--ef-font-heading); font-weight: 500; color: var(--ef-near-black); }
.ef-lang-group { font-family: var(--ef-font-text); font-size: var(--ef-ui); color: var(--ef-text-gray); }
.ef-lang-opt {
  font-family: var(--ef-font-text);
  border-radius: var(--ef-r-button);
  border-color: var(--ef-border);
  font-size: var(--ef-ui);
}
.ef-lang-opt.active { background: var(--ef-deep-teal); border-color: var(--ef-deep-teal); color: var(--ef-white); }

/* ================================================================== Bewegung
   Unveraendert aus V1 — nachgebaut aus den Interaktionen des Templates. */
[data-ef-anim] {
  opacity: 0;
  transform: translate3d(0, 2rem, 0);
  transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1);
  transition-delay: var(--ef-delay, 0ms);
  will-change: opacity, transform;
}
[data-ef-anim="scale"] { transform: translate3d(0, 1rem, 0) scale(.94); }
[data-ef-anim].ef-in { opacity: 1; transform: none; }

.ef-hero-load > * {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
  animation: ef-hero-in .9s cubic-bezier(.2,.6,.2,1) forwards;
}
.ef-hero-load > *:nth-child(1) { animation-delay: .15s; }
.ef-hero-load > *:nth-child(2) { animation-delay: .3s; }
.ef-hero-load > *:nth-child(3) { animation-delay: .45s; }
.ef-hero-load > *:nth-child(4) { animation-delay: .6s; }
.ef-hero-load > *:nth-child(n+5) { animation-delay: .75s; }
@keyframes ef-hero-in { to { opacity: 1; transform: none; } }

.overlay-bg, .ef-gh-bg { will-change: transform; }
.ef-sticky { position: sticky; top: 9rem; }

/* Laufschrift — Form aus dem Template, Farbe nach Styleguide:
   Weiss auf dem Deep-Teal-Overlay. */
.ef-marquee {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  overflow: hidden; pointer-events: none;
  padding-top: .9rem; padding-bottom: .9rem;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 7%, #000 93%, #0000);
          mask-image: linear-gradient(90deg, #0000, #000 7%, #000 93%, #0000);
}
.ef-marquee-track { display: flex; width: max-content; animation: ef-marquee 42s linear infinite; }
.ef-marquee-track span {
  font-family: var(--ef-font-heading);
  font-weight: 500;
  font-size: clamp(22px, 1.1rem + 2vw, 40px);
  line-height: var(--ef-lh-h2);
  letter-spacing: 0;
  color: #ffffff5e;
  white-space: nowrap;
  padding: 0 2em;
}
@keyframes ef-marquee { to { transform: translate3d(-50%, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-ef-anim] { opacity: 1 !important; transform: none !important; transition: none; }
  .ef-marquee-track { animation: none; }
  .ef-hero-load > * { opacity: 1; transform: none; animation: none; }
  .overlay-bg, .ef-gh-bg { transform: none !important; }
}

/* ===================================================================== Mobil */
@media (max-width: 960px) {
  nav.wf-nav { top: 0; }
  .ef-rolebar { position: static; }
}
@media (max-width: 760px) {
  :root { --ef-section: 3.5rem; --ef-global-padding: 1.25rem; }
  .columns { gap: var(--ef-space-m); }
  .card { padding: 1.25rem; }
  .ef-sticky { position: static; }
  footer.wf-footer .section { padding-top: var(--ef-space-xxl); }
  .ef-rolebar .ef-brand { height: 30px; width: 171px; }
}
@media (max-width: 600px) {
  :root { --ef-section: 3rem; }
  .section[data-type="hero"] .overlay-wrap { min-height: 72vh; }
  .ef-guesthero { min-height: 74vh; }
  .ef-marquee-track { animation-duration: 26s; }
  .ef-faq summary { padding: 1rem 1.15rem; }
  .ef-faq details .faq-a { padding: .85rem 1.15rem 1.15rem; }
  /* Der Verlauf laeuft auf schmalen Schirmen von oben statt von links —
     sonst steht der Text im transparenten Teil. */
  .section[data-type="hero"] .overlay-wrap::after {
    background: linear-gradient(180deg,
      rgba(0,78,74,.30) 0%, rgba(0,78,74,.75) 55%, rgba(0,78,74,.95) 100%);
  }
}

/* ================================= Aufklapper "Unternehmen" (neu in V4) ===
   Ein Menuepunkt statt sieben. Die Unternehmensseiten liegen in jedem
   Rollenordner; der Aufklapper verlinkt immer in den eigenen — deshalb kann
   er die Rolle nicht wechseln.

   Er sitzt in der Rollenleiste ganz rechts, HINTER der Sprachwahl, nicht im
   Bereichsmenue. Zwei Gruende, beide gemessen statt gewaehlt: Das Fleet-Menue
   traegt acht Punkte und fuellt die 80-rem-Spalte bereits aus — ein neunter
   waere in die zweite Zeile gerutscht. Und links der Sprachwahl stand er zu
   nah am Raum der Rollen; am aeusseren Rand ist er eindeutig Meta-Navigation.
   Die Trennlinie setzt ihn zusaetzlich von DE/EN/NL ab.

   Technik: <details>/<summary> statt Skript. Nativ, tastaturbedienbar,
   funktioniert ohne JavaScript. Das Muster steht im Bestand bereits (die
   FAQ-Aufklapper), die Gestaltung hat also einen Vorlaeufer. */
.ef-rolebar .ef-switch { gap: .5rem; }
.ef-rolebar .ef-more {
  position: relative;
  flex: 0 0 auto;
  margin-left: .55rem;
  padding-left: .8rem;
  border-left: 1px solid var(--ef-border);
}
.ef-rolebar .ef-more > summary {
  font-family: var(--ef-font-text);
  font-size: var(--ef-ui);
  font-weight: 500;
  color: var(--ef-text-gray);
  border: 1px solid transparent;
  border-radius: var(--ef-r-button);
  padding: .45rem .7rem .45rem .9rem;
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
  transition: color .25s, background-color .25s;
}
.ef-rolebar .ef-more > summary::-webkit-details-marker { display: none; }
/* Der Winkel: zwei Kanten eines Quadrats, gedreht. Kein Icon noetig. */
.ef-rolebar .ef-more > summary::after {
  content: "";
  width: .4em; height: .4em; flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.14em) rotate(45deg);
  transition: transform .25s;
}
.ef-rolebar .ef-more[open] > summary::after { transform: translateY(.08em) rotate(-135deg); }
.ef-rolebar .ef-more > summary:hover,
.ef-rolebar .ef-more[open] > summary {
  color: var(--ef-deep-teal);
  background: var(--ef-gray);
}
/* Steht man auf einer Unternehmensseite, traegt der Aufklapper den aktiven
   Zustand — genauso wie sonst der Punkt im Bereichsmenue. */
.ef-rolebar .ef-more.active > summary {
  color: var(--ef-deep-teal);
  background: var(--ef-gray);
  font-weight: 600;
}

.ef-more-panel {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  z-index: 50;
  min-width: 30rem;
  max-height: min(70vh, 32rem);
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem 2rem;
  padding: 1.35rem 1.5rem;
  background: var(--ef-white);
  border-radius: var(--ef-r-panel);
  box-shadow: 0 24px 60px #071c1b2e;
}
.ef-more-group { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.ef-more-cat {
  font-family: var(--ef-font-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ef-teal-green);
  margin-bottom: .5rem;
}
/* Die Eintraege stehen auf Small/UI wie die Menuepunkte daneben. Auf Body M
   (18 px) waren sie eine Stufe groesser als alles in der Umgebung und der
   Aufklapper wirkte wie eine eigene Seite statt wie ein Menue. */
.ef-more-panel a {
  font-family: var(--ef-font-text);
  font-size: var(--ef-ui);
  line-height: 1.45;
  color: var(--ef-near-black);
  text-decoration: none;
  padding: .3rem 0;
  transition: color .2s;
}
.ef-more-panel a:hover { color: var(--ef-deep-teal); }

/* Auf dem Telefon spannt sich das Panel ueber die volle Leistenbreite. Es
   haengt dann an der Rollenleiste (position:sticky, also ein Bezugsrahmen)
   statt am Aufklapper selbst. */
@media (max-width: 960px) {
  .ef-rolebar .ef-more { position: static; }
  .ef-more-panel {
    left: var(--ef-global-padding);
    right: var(--ef-global-padding);
    top: calc(100% + .35rem);
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 1.1rem;
    padding: 1.25rem;
  }
}

/* ============================ Rollenwechsel ohne Gegenstueck (neu in V4) ===
   Fall 3 der Regel: Die Seite gibt es in der Zielrolle nicht, der Wechsel
   fuehrt auf die Startseite. Fastneds Fehler ist nicht der Sprung, sondern
   der stille Sprung — deshalb sagt eine Zeile, was passiert ist. Das Skript
   blendet sie ein, wenn der Verweis "?ef=wechsel" getragen hat. */
.ef-wechsel-hinweis {
  --ef-gutter: max(var(--ef-global-padding), (100% - var(--ef-container)) / 2);
  padding: .9rem var(--ef-gutter);
  background: var(--ef-gray);
  border-bottom: 1px solid var(--ef-border);
  font-family: var(--ef-font-text);
  font-size: var(--ef-ui);
  line-height: var(--ef-lh-ui);
  color: var(--ef-deep-teal);
}
.ef-wechsel-hinweis[hidden] { display: none; }

/* ======================================= Anschrift in der Fusszeile (V4) ===
   Daten aus dem Webarchiv der alten Website. Sie steht als Kolophon hinter
   dem Fusszeilenraster, damit sie dessen Spaltenzahl nicht veraendert. */
footer.wf-footer .ef-anschrift {
  --ef-gutter: max(var(--ef-global-padding), (100% - var(--ef-container)) / 2);
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.75rem;
  padding: 1.5rem var(--ef-gutter) var(--ef-space-xl);
  border-top: 1px solid #ffffff24;
  margin-top: var(--ef-space-m);
  font-family: var(--ef-font-text);
  font-size: var(--ef-ui);
  line-height: var(--ef-lh-ui);
  color: #ffffffc4;
}
footer.wf-footer .ef-anschrift .ef-anschrift-firma { color: var(--ef-white); font-weight: 600; }
footer.wf-footer .ef-anschrift a { color: #ffffffe0; text-decoration: none; }
footer.wf-footer .ef-anschrift a:hover { color: var(--ef-acid-yellow); }