/* =========================================================================
   studie360.css — Neues Design für die Startseite.
   Vollständig gekapselt unter body.s3-home, damit keine andere Seite und
   kein Bootstrap-Baustein beeinflusst wird. Nur helle Variante.
   ========================================================================= */

:root {
  /* Warme Neutralen. Bewusst nicht neutralgrau, sondern leicht sandfarben,
     damit sie das Gold tragen. Die frueheren Toene waren gruenstichig. */
  --bg:        #fbf9f5;
  --surface:   #ffffff;
  --band:      #f2ede3;
  --ink:       #242019;   /* 15.4:1 auf --bg */
  --ink-soft:  #4c463c;   /*  8.9:1 auf --bg */
  --muted:     #645c4c;   /*  6.3:1 auf --bg, 5.7:1 auf --band */
  --line:      rgba(36,32,25,0.12);
  /* Rand von Bedienelementen (Eingabefelder). --line ist fuer Dekolinien
     gedacht und liegt bei 1,27:1 -- die Grenze eines Feldes war kaum zu
     sehen. 0.52 haelt 3:1 auf --surface, --bg und --band (WCAG 1.4.11). */
  --line-feld: rgba(36,32,25,0.52);
  /* Bewertungssterne: 3,7:1 bzw. 3,5:1 auch auf --band. */
  --stern:      #9a7424;
  --stern-leer: #857d6e;

  /* Statusfarben. Je Zustand Schrift, Flaeche und Rand; die Farbe traegt die
     Aussage nie allein -- dazu gehoeren immer Wort oder Symbol.
     Fehler/offen: 9,4:1 auf --surface, 8,6:1 auf der eigenen Flaeche.
     Erfuellt: 5,0:1 auf der eigenen Flaeche, 5,8:1 auf --surface.
     Neutral (nicht beantwortet, nicht erfuellt) hat keine eigenen Werte:
     --muted auf --band. Vorher standen fuer "offen" drei weitere Rottoene
     (#a5453a, #fdf6f5, #e9c9c5) fest im Code, und Erfuellt kam in vier
     Mischungen zwischen 16 und 24 % Gold vor. */
  --fehler:           #7d2b21;
  --fehler-flaeche:   #fdf3f2;
  --fehler-rand:      #e9c9c5;
  --erfuellt:         var(--gold-deep);
  --erfuellt-flaeche: var(--gold-zart);
  --erfuellt-rand:    var(--rand-gold);

  /* Markenfarbe: Gold statt Limette. Der frueher genutzte Gruenton wirkte
     wie ein Umweltsiegel; die EmpCo-Richtlinie (EU 2024/825) schraenkt
     pauschale Umweltanmutung ein. Die Werte folgen dem Siegelrand. */
  --gold:      #c9a96a;   /* Flaeche, dunkler Text darauf 7.2:1 */
  --gold-2:    #b4934f;   /* dunkles Ende von Verlauf und Hover, 5.6:1 */
  --gold-hell: #d9be86;   /* helles Ende des Verlaufs */
  --gold-deep: #7e6128;   /* als Textfarbe: 5.5:1 auf --bg, 5.0:1 auf --band */
  --on-gold:   #242019;   /* Text auf Goldflaechen */

  /* Verlauf in Richtung des Siegelrands: Champagner oben links nach Bronze
     unten rechts. Dunkler Text traegt auch am dunkelsten Ende (5.6:1). */
  --gold-verlauf:       linear-gradient(135deg, var(--gold-hell) 0%, var(--gold) 45%, var(--gold-2) 100%);

  /* Zarte Goldflaeche fuer Symbole, Plaketten und den aktuellen Schritt
     (#f4eee1 auf Weiss). --gold-deep darauf 5,0:1, --ink 14:1. */
  --gold-zart: color-mix(in srgb, var(--gold) 20%, var(--surface));
  /* Rand fuer geoeffnete und ueberfahrene Karten. Nur Schmuck: der Zustand
     ist immer auch anders sichtbar (Inhalt offen, Zeiger, Unterstreichung). */
  --rand-gold: color-mix(in srgb, var(--gold) 44%, var(--line));


  /* Schaltflaechen tragen weisse Schrift. Massgeblich ist dabei die
     HELLSTE Stelle des Verlaufs, nicht die Mitte -- eine fruehere Fassung
     begann bei #a5822a und lag dort mit 3.6:1 unter der Schwelle, obwohl
     die Mitte AA erfuellte. Jetzt durchgehend ueber 6:1. */
  --btn-verlauf:       linear-gradient(135deg, #7d5e18 0%, #6a4e12 55%, #5a410e 100%);
  --btn-verlauf-hover: linear-gradient(135deg, #6a4e12 0%, #5a410e 55%, #4b350b 100%);
  --on-btn:            #ffffff;

  /* Schrift auf dunklem Grund (Aufruf-Feld auf --ink): 14,4:1 und 10,0:1. */
  --auf-dunkel:       #f5f1e8;
  --auf-dunkel-leise: #d2cabb;

  --shadow-sm: 0 1px 2px rgba(46,38,26,.05), 0 1px 3px rgba(46,38,26,.06);
  --shadow-md: 0 10px 30px rgba(46,38,26,.09), 0 2px 8px rgba(46,38,26,.05);
  --shadow-seal: 0 30px 60px rgba(46,38,26,.14), 0 8px 20px rgba(46,38,26,.08);

  /* Eckenradien. Fuenf Stufen nach Groesse des Elements; vorher standen
     17 verschiedene Werte zwischen 5 und 999 px im Blatt.
     s  Bedienelemente: Knoepfe, Felder, Menuepunkte
     m  kleine Flaechen: Hinweise, Listenzeilen, Symbolkaesten, Vorschaubilder
     l  Karten und Tafeln
     xl grosse Flaechen: Seitenkoepfe, Anmeldekarte, Aufruf-Feld
     rund Pillen und Balken; Kreise bleiben 50 %. */
  --r-s:    8px;
  --r-m:    12px;
  --r-l:    16px;
  --r-xl:   20px;
  --r-rund: 999px;

  /* Abstaende zwischen Bloecken. Fliessend, damit Telefon und Bildschirm
     denselben Rhythmus in ihrem Massstab bekommen. Vorher 53 verschiedene
     clamp()-Werte, meist knapp nebeneinander (26/4/40, 26/4/46, 28/4/44).
     Eigene Werte behalten nur Hero, Fussleiste, Consent und Anmeldung.
     1  eng: unter Zwischentiteln, Polster ueber Trennlinien
     2  Innenabstand von Karten, Tafeln, Formularen
     3  Kopf eines Abschnitts bis zu seinem Inhalt; grosse Karten innen
     4  zwischen Bloecken einer Seite, zwischen Spalten
     5  zwischen den Abschnitten der Startseite
     Abstaende innerhalb eines Bausteins (gap: 8px, 12px ...) bleiben feste
     Werte im Baustein -- sie gehoeren zu seiner Form, nicht zum Rhythmus
     der Seite. */
  --raum-1: clamp(16px, 2.5vw, 24px);
  --raum-2: clamp(20px, 3vw, 30px);
  --raum-3: clamp(26px, 4vw, 42px);
  --raum-4: clamp(34px, 5vw, 54px);
  --raum-5: clamp(52px, 8vw, 92px);

  /* Schriften. Die Schriftfrage ist entschieden, nicht liegen geblieben:
     Fliesstext und Bedienung in der Systemschrift -- 0 KB, auf jedem Geraet
     vertraut, fuer lange deutsche Texte bestens. Ueberschriften, Titel und
     Ergebniszahlen in Fira Sans Condensed: eine humanistische, leicht
     schmale Grotesk wie die Beschriftung des Siegels ("AUSGEZEICHNET"),
     mit Tabellenziffern; lange Komposita brauchen 14 % weniger Breite als
     in Arial. Vorher stand der Systemstapel nur da, weil eine nie geladene
     Poppins still auf ihn zurueckfiel, und die Ueberschriften sprachen je
     nach Betriebssystem eine andere Sprache als das Siegel daneben.
     Selbst gehostet (fonts/fira-sans-condensed-*), keine Anfrage an Google. */
  --font-text:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fira Sans Condensed", "S3 Ersatz Arial", "S3 Ersatz Roboto", var(--font-text);

  /* Schriftgroessen. Sieben Stufen statt 60 Einzelwerten (13 davon lagen
     zwischen 14,4 und 17,3 px). Schritt mindestens 1,25; fliessend nur
     H2, H1 und Display, mit rem im Mittelwert, damit die eingestellte
     Schriftgroesse des Browsers auch dazwischen wirkt.
     meta  13 px  Datum, Legende, Hinweise, Datenetiketten
     ui    15 px  Bedienelemente und dichte Datenzeilen -- nie Absaetze
     body  17 px  jeder Fliesstext, auch Beschreibungen und Titel in Listen
     lead/h3 21 px  Einleitung und Zwischentitel (Einleitung auf dem
                  Telefon in Textgroesse, siehe unten)
     h2   27-33 px, h1 33-42 px, display 33-58 px
     Gewichte: Text 400 und Bedienung 600 in der Systemschrift, Titel 600
     und H1/Zahlen 700 in der Ueberschriftenschrift. Werte wie 640 oder 720
     gibt es in den Systemschriften nicht; Windows und Android zeigten 720
     als Black. */
  --text-meta:    .8125rem;
  --text-ui:      .9375rem;
  --text-body:    1.0625rem;
  --text-h3:      1.33rem;
  --text-lead:    var(--text-h3);
  --text-h2:      clamp(1.66rem, 1.2rem + 1.9vw, 2.08rem);
  --text-h1:      clamp(2.08rem, 1.5rem + 2.3vw, 2.6rem);
  --text-display: clamp(2.08rem, 1rem + 4.8vw, 3.6rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --s3-maxw: 1140px;
  --s3-pad: clamp(20px, 5vw, 48px);
}

/* <picture> ist nur die Huelle fuer die WebP-Variante und soll im Layout
   nicht vorkommen: mit display:contents bleibt das <img> das direkte Kind
   seines Containers. Ohne diese Zeile wuerde jede Grid-Zentrierung und jede
   Prozentbreite (etwa .s3-evu-logo img { max-width: 82% }) gegen die neue
   Zwischenbox rechnen statt gegen den Container. */
picture { display: contents; }
/* Kehrseite davon: auch <source> wird zum Kind des Containers, und der
   Browser gibt ihm keine eigene display-Regel. In einem Grid belegte es so
   eine Zelle -- beim Zitat auf Teilnehmen rutschte das Foto dadurch nach
   rechts und der Text in eine zweite Zeile darunter. */
picture > source { display: none; }

/* Nur fuer Screenreader: Tabellenbeschriftungen und Ergaenzungen, die
   sehende Nutzer aus dem Aufbau ablesen. */
.s3-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
         clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Fira Sans Condensed 600 und 700, deutsche Teilmenge ohne Hinting (je
   15 KB, Lizenz: fonts/fira-sans-condensed-LIZENZ.txt). Die 700 wird in
   index.php vorgeladen, jede Seite hat eine H1. Auch der Anbietername im
   Siegel steht jetzt in dieser Schrift; PT Sans (47 KB) entfaellt.
   Neue Dateinamen, wenn sich die Dateien aendern: .htaccess haelt Schriften
   ein Jahr im Browser-Cache. */
@font-face {
  font-family: "Fira Sans Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/fira-sans-condensed-600-de-v1.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/fira-sans-condensed-700-de-v1.woff2") format("woff2");
}
/* Ersatz, bis die Schrift geladen ist: Arial bzw. Roboto, auf Breite und
   Hoehe der Fira gebracht (gemessen an Ueberschriften der Seite), damit beim
   Wechsel nichts springt. */
@font-face {
  font-family: "S3 Ersatz Arial";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Liberation Sans Bold");
  font-weight: 600 700;
  size-adjust: 86.8%; ascent-override: 107.7%; descent-override: 30.5%; line-gap-override: 0%;
}
@font-face {
  font-family: "S3 Ersatz Roboto";
  src: local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 600 700;
  size-adjust: 92.3%; ascent-override: 101.4%; descent-override: 28.7%; line-gap-override: 0%;
}

/* ---- Grundschicht der neu gestalteten Seiten ----
   Alles in diesem Block steht in :where() und zaehlt damit nichts: jede
   Regel mit einer Klasse gewinnt, egal wo sie in der Datei steht. Vorher
   stand hier "body.s3-home img" mit (0,1,2) und schlug jede Bildregel der
   Bausteine (0,1,1) -- die Vorschaubilder im Magazin fuellten ihren Rahmen
   deshalb nie, obwohl .s3-mag-item-img img { height: 100% } es verlangte.
   css/css.css wird auf diesen Seiten nicht mehr geladen (index.php); hier
   muss nichts mehr gegen sie ankaempfen.

   height:auto: Seit alle Bilder width und height tragen (gegen den
   Layoutsprung), nimmt der Browser sonst die Hoehe aus dem Attribut als
   feste Groesse, und jedes Bild, dessen CSS nur die Breite setzt, wird
   verzerrt. So dienen die Attribute nur noch als Seitenverhaeltnis.

   Linkfarbe: stand frueher als ".s3-home a" mit (0,1,1) und schlug damit
   die Knopfregeln (0,1,0) -- Hero- und Footer-Knopf standen dunkel auf
   dunkel (1,7:1 und 1,0:1), beim Ueberfahren aber richtig, deshalb fiel es
   mit der Maus nie auf.

   Fokusring: auf allen neuen Seiten; Einzelregeln (Navigation, Consent,
   Ja/Nein-Schalter) gewinnen. Kein border-radius -- der aenderte beim
   Fokussieren die Ecken des Elements selbst. */
:where(body.s3-home, body.s3-article) img { max-width: 100%; height: auto; }
:where(body.s3-home, body.s3-article) a { color: inherit; }
:where(body.s3-home) a { text-decoration: none; }
:where(body.s3-home, body.s3-article) :focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

/* Basis-Look fuer die neu gestalteten Seiten (andere bleiben unberührt) */
body.s3-home, body.s3-article {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  /* rem statt px: die Schriftgroesse des Browsers wirkt jetzt durch. Mit 17px
     blieb der Fliesstext bei eingestellter 200-%-Schrift unveraendert. */
  font-size: var(--text-body);
  /* Deutsche Komposita und URLs duerfen umbrechen, statt aus ihrem Kasten zu
     laufen. anywhere statt break-word: greift ebenfalls nur, wenn ein Wort
     nicht passt, zaehlt aber auch bei der Mindestbreite von Flex- und
     Grid-Elementen mit. Genau daran scheiterten die Fussleiste, die
     Kriterienkarten und die Ortszeile im Verzeichnis. break-word bleibt als
     Rueckfall fuer Browser, die anywhere nicht kennen. */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  line-height: 1.6;
}
/* Einleitung auf dem Telefon in Textgroesse: 21 px auf 390 px Breite
   waeren fuenf Woerter je Zeile. */
@media (max-width: 559px) { :root { --text-lead: var(--text-body); } }

/* Globales box-sizing – uebernimmt die Rolle von Bootstraps Reset,
   nachdem Bootstrap aus dem Frontend entfernt wurde. */
*, *::before, *::after { box-sizing: border-box; }

/* ---- Layout-Grundgerüst ---- */
.s3-main { display: block; width: 100%; }
/* Ersetzt Bootstraps .container fuer verbliebene Alt-Inhalte */
.s3-legacy { max-width: var(--s3-maxw); margin-left: auto; margin-right: auto;
             padding-left: var(--s3-pad); padding-right: var(--s3-pad); }
/* Ersetzt .container-fluid.p-3 in der "Zum Seitenanfang"-Leiste */
.s3-totop { padding: 1rem; }
.s3-totop a { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px;
              color: var(--ink-soft); text-decoration: none; }
.s3-totop a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.s3-wrap { max-width: var(--s3-maxw); margin: 0 auto; padding-left: var(--s3-pad); padding-right: var(--s3-pad); }
:where(body.s3-home) section { padding: var(--raum-5) 0; }
.s3-home .s3-band { background: var(--band); }

/* ---- Typografie ---- */
/* Alle Ueberschriften in der Ueberschriftenschrift, 600, enge Zeilen,
   ausgeglichene Umbrueche -- auf allen neuen Seiten, nicht nur der
   Startseite. Vorher erbten Artikel-, Verzeichnis- und Versorgerseite die
   Systemschrift in 700 und die Zeilenhoehe des Fliesstexts (1,62). Die
   Ersatzsilbentrennung trennt nicht nach zwei Buchstaben. */
:where(body.s3-home, body.s3-article) :is(h1, h2, h3, h4) {
  font-family: var(--font-display); font-weight: 600; line-height: 1.18; font-synthesis: none;
  text-wrap: balance; hyphenate-limit-chars: 7 3 3; }
:where(body.s3-home) :is(h1, h2, h3) { margin: 0; color: var(--ink); }
.s3-display { font-size: var(--text-display); line-height: 1.08; letter-spacing: -.015em; font-weight: 700; font-family: var(--font-display); }
/* Silbentrennung fuer Ueberschriften und Fliesstext. Das html-Element traegt
   lang="de"; wo der Browser kein Woerterbuch hat, faengt overflow-wrap oben
   das Wort ab. Der Unterwert der Displaygroesse (vorher 2.3rem, auf jedem
   Telefon der eigentliche Wert) liess "Energieversorger." bei 320 px ueber
   den Rand ragen. */
:where(body.s3-home, body.s3-article) :is(h1, h2, h3, h4, p, li, dd, th, blockquote, figcaption,
  .s3-evu-name, .s3-evu-nav-name, .s3-mag-item-title, .s3-artcard-title, .s3-q-txt, .s3-kri-txt, .s3-step-lbl) {
  -webkit-hyphens: auto; hyphens: auto; }
.s3-h2 { font-size: var(--text-h2); line-height: 1.18; letter-spacing: -.01em; font-weight: 600; font-family: var(--font-display); }
.s3-lead { font-size: var(--text-lead); color: var(--ink-soft); max-width: 58ch; line-height: 1.6; }
/* Der Stempel: die einzige Zeile in Grossbuchstaben, gesetzt wie das
   "AUSGEZEICHNET" im Siegel. Nur wo er die Art des Dokuments nennt
   (Zertifikat, Pressemitteilung, Fragebogen des Jahres) oder das Publikum
   wechselt (Teilnehmen). Vorher stand er ueber 19 Seitenkoepfen und sagte
   meist nichts ("Transparenz" ueber "Unsere Methodik"). */
.s3-eyebrow { font-family: var(--font-display); font-size: var(--text-meta); font-weight: 600; letter-spacing: .08em;
              text-transform: uppercase; color: var(--gold-deep); margin: 0 0 .9rem; }
.s3-num { font-variant-numeric: tabular-nums; }

/* ---- Buttons ---- */
.s3-btn { font: inherit; font-size: var(--text-ui); font-weight: 600; border: 1px solid transparent; border-radius: var(--r-s);
          padding: .68rem 1.3rem; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; gap: .5rem;
          min-height: 44px; text-decoration: none;
          transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.s3-btn:active { transform: translateY(1px); }
.s3-btn-primary { background: var(--btn-verlauf); color: var(--on-btn); }
.s3-btn-primary:hover { background: var(--btn-verlauf-hover); color: var(--on-btn); }
.s3-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.s3-btn-ghost:hover { background: var(--band); color: var(--ink); }

/* ---- Hero ---- */
.s3-hero { padding: clamp(40px, 6vw, 76px) 0 clamp(32px, 5vw, 56px); }
.s3-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); align-items: center; }
@media (min-width: 900px) { .s3-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.s3-hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
/* Das Siegel steht frei auf dem Seitengrund. Ein Goldgrund dahinter
   (September 2026) liess die freigestellten Kanten der Grafik pixelig
   wirken und ist wieder entfernt. */
.s3-seal-wrap { display: grid; place-items: center; }
.s3-seal { width: min(330px, 72vw); height: auto;
           /* Zwei getrennte drop-shadow(): eine Funktion nimmt nur einen
              Schatten, mit der zweiteiligen Variable war der Filter
              ungueltig und wurde komplett verworfen. */
           filter: drop-shadow(0 24px 34px rgba(46,38,26,.16)) drop-shadow(0 6px 12px rgba(46,38,26,.10)); }

.s3-trustbar { border-top: 1px solid var(--line); margin-top: var(--raum-4); }
.s3-trustbar ul { list-style: none; margin: 0; padding: 22px 0 0; display: flex; flex-wrap: wrap; gap: 14px 40px; }
.s3-trustbar li { display: flex; align-items: center; gap: .6rem; color: var(--ink-soft); font-weight: 400; font-size: var(--text-ui); }
.s3-trustbar li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
                          box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 26%, transparent); }

/* ---- Section-Kopf ---- */
.s3-sec-head { max-width: 60ch; margin-bottom: var(--raum-3); }
/* Steht der Kopf allein in seinem Abschnitt (Teilnehmen, "Nutzen Sie das
   Siegel"), traegt der Abschnitt den Abstand nach unten selbst. */
.s3-sec-head:last-child { margin-bottom: 0; }
.s3-sec-head--mitte { margin-left: auto; margin-right: auto; text-align: center; }
/* Frueher Inline-Stile in den Vorlagen */
.s3-hero-lead { margin-top: 1.4rem; }
.s3-sec-lead { margin-top: 1rem; }
.s3-cta-aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.7rem; }
.s3-signup-text { margin: 1rem 0 0; color: var(--ink-soft); line-height: 1.7; }

/* ---- Sieben Bereiche (Startseite, Teilnehmen) ----
   Links Einleitung, rechts die Gewichtung. Vorher ein Raster aus sieben
   gleichen Karten mit Symbolkasten und Plakette; jetzt ein Anteilsbalken
   mit einer Liste nach Gewicht (Startseite) bzw. eine Tabelle nach Herkunft
   (Teilnehmen). Die Einleitung bleibt beim Lesen der Liste stehen. */
.s3-crit-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); align-items: start; }
@media (min-width: 900px) {
  .s3-crit-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .s3-crit-intro { position: sticky; top: 104px; }
}
.s3-crit-lead { margin-top: 1.1rem; }
.s3-crit-note { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
                color: var(--ink-soft); font-size: var(--text-body); max-width: 34ch; }
.s3-crit-note a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }

/* Anteilsbalken: s3_methodik_balken() in seiten/inc_methodik-daten.php.
   Jeder Abschnitt so breit wie seine Punkte (flex-grow), beschriftet mit
   dem gerundeten Anteil. Farbe nach Herkunft der Bewertung; die Legende
   nennt sie in Worten, die Liste darunter in derselben Reihenfolge. */
.s3-anteile { margin: 0 0 var(--raum-2); }
.s3-anteile-balken { display: flex; gap: 3px; height: 36px; }
.s3-anteil { flex: var(--a) 1 0%; min-width: 0; display: flex; align-items: center; justify-content: center;
             font-size: var(--text-ui); font-weight: 600; font-variant-numeric: tabular-nums;
             background: var(--gold); color: var(--on-gold); font-family: var(--font-display); }
.s3-anteil:first-child { border-radius: var(--r-s) 0 0 var(--r-s); }
.s3-anteil:last-child  { border-radius: 0 var(--r-s) var(--r-s) 0; }
/* Weiss auf --gold-deep 5,8:1, --on-gold auf --gold 7,2:1 */
.s3-anteil.is-redaktion { background: var(--gold-deep); color: #fff; }
.s3-anteile-legende { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px;
                      font-size: var(--text-meta); line-height: 1.4; color: var(--ink-soft); }
.s3-anteile-legende li { display: inline-flex; align-items: center; gap: .5em; }
.s3-anteile-legende li::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--gold); }
.s3-anteile-legende .is-redaktion::before { background: var(--gold-deep); }
.s3-anteile-legende b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Liste nach Gewicht (Startseite): vorne der Anteil als Zahl, dahinter
   Bereich und Satz. Linien statt Karten. */
.s3-gewicht { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.s3-gewicht li { display: grid; grid-template-columns: 4.3rem minmax(0, 1fr); gap: 0 14px; align-items: baseline;
                 padding: 14px 0; border-bottom: 1px solid var(--line); }
.s3-gewicht-zahl { font-size: var(--text-h3); font-weight: 700; line-height: 1.18;
                   font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.s3-gewicht-zahl span { font-size: var(--text-meta); font-weight: 600; letter-spacing: 0; color: var(--muted); }
.s3-gewicht h3 { font-size: var(--text-body); font-weight: 600; font-family: var(--font-display); }
.s3-gewicht p { margin: .2rem 0 0; font-size: var(--text-body); line-height: 1.5; color: var(--muted); }
@media (max-width: 559px) {
  .s3-gewicht li { grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0 10px; }
  .s3-gewicht-zahl { }
}

/* Tabelle nach Herkunft (Teilnehmen). Gruppenzeilen tragen die Summe, die
   Farbmarke entspricht dem Anteilsbalken der Methodik. */
.s3-gewicht-tab { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.s3-gewicht-tab th, .s3-gewicht-tab td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.s3-gewicht-tab td { text-align: right; padding-left: 16px; white-space: nowrap; color: var(--ink-soft); }
.s3-gewicht-tab thead th { padding-top: 0; font-size: var(--text-meta); font-weight: 600; color: var(--muted); border-bottom: 2px solid var(--ink); }
/* Kopfzeile ungetrennt, wo Platz ist. In em, damit sie bei grosser Schrift
   wieder umbrechen darf -- bei 200 % lief die Tabelle sonst 67 px ueber. */
@media (min-width: 25em) { .s3-gewicht-tab thead th { white-space: nowrap; } }
.s3-gewicht-tab thead th + th { text-align: right; padding-left: 16px; }
.s3-gewicht-tab tr:not(.s3-gewicht-gruppe) > th { padding-left: 24px; font-weight: 400; color: var(--ink-soft); }
.s3-gewicht-gruppe th, .s3-gewicht-gruppe td { padding-top: 22px; font-weight: 700; color: var(--ink); }
.s3-gewicht-tab tbody:first-of-type .s3-gewicht-gruppe :is(th, td) { padding-top: 14px; }
/* Haengender Einzug: die Farbmarke steht links, der Titel -- auch
   zweizeilig auf dem Telefon -- buendig mit den Bereichen darunter. */
.s3-gewicht-gruppe th { position: relative; padding-left: 24px; }
.s3-gewicht-gruppe th::before { content: ""; position: absolute; left: 0; top: calc(22px + .35em);
                                width: 12px; height: 12px; border-radius: 3px; background: var(--gold); }
.s3-gewicht-tab tbody:first-of-type .s3-gewicht-gruppe th::before { top: calc(14px + .35em); }
.is-redaktion .s3-gewicht-gruppe th::before { background: var(--gold-deep); }

/* ---- Was hinter dem Siegel steckt (Startseite) ----
   Text links in Lesebreite, die drei Grundsaetze rechts als Randspalte.
   Vorher standen Ueberschrift links und Text mittig -- 195 px versetzt. */
.s3-ueber-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); align-items: start; }
@media (min-width: 900px) { .s3-ueber-layout { grid-template-columns: minmax(0, 65ch) minmax(15rem, 1fr); } }
.s3-ueber p { margin: 0 0 1.15em; }
.s3-ueber p:last-child { margin-bottom: 0; }
.s3-grundsaetze { padding-top: var(--raum-1); border-top: 2px solid var(--ink); }
@media (min-width: 900px) { .s3-grundsaetze { margin-top: .35rem; } }
.s3-grundsaetze h3 { font-size: var(--text-h3); line-height: 1.18; font-weight: 600; font-family: var(--font-display); }
.s3-grundsaetze dl { margin: var(--raum-1) 0 0; }
.s3-grundsaetze dt { padding-top: 14px; border-top: 1px solid var(--line); font-weight: 600; color: var(--ink); }
.s3-grundsaetze dd { margin: .25rem 0 14px; font-size: var(--text-body); line-height: 1.55; color: var(--ink-soft); }
.s3-grundsaetze dd:last-child { margin-bottom: 0; }
.s3-grundsaetze a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Ausgezeichnete Versorger (Logo-Wand) ---- */
.s3-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: .6rem 1.5rem;
               flex-wrap: wrap; margin-bottom: var(--raum-3); }
/* Darf umbrechen: mit nowrap lief "Alle ausgezeichneten Versorger" bei
   grosser Schrift aus dem Bild. Die Zeile bricht ohnehin unter die
   Ueberschrift um (.s3-head-row wrap). */
.s3-seemore { display: inline-flex; align-items: center; min-height: 44px;
               color: var(--gold-deep); font-weight: 600; font-size: var(--text-ui); text-wrap: balance; }
.s3-seemore:hover { text-decoration: underline; }

.s3-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.s3-logo-card { background: var(--surface); border-radius: var(--r-m); aspect-ratio: 16 / 10;
                display: grid; place-items: center; padding: 18px; box-shadow: var(--shadow-sm);
                transition: box-shadow .25s var(--ease); }
.s3-logo-card:hover { box-shadow: var(--shadow-md); }
.s3-logo-card img { max-height: 46px; max-width: 82%; width: auto; object-fit: contain;
                    filter: grayscale(1); opacity: .66; transition: filter .3s var(--ease), opacity .3s var(--ease); }
.s3-logo-card:hover img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .s3-logo-card img { transition: none; } }

/* ---- Magazin — redaktionelles Layout: Leitmeldung + Liste ---- */
.s3-mag { display: grid; grid-template-columns: 1fr; gap: var(--raum-3); }
@media (min-width: 900px) { .s3-mag { grid-template-columns: 1.12fr 1fr; align-items: start; } }
.s3-mag-date { font-size: var(--text-meta); font-weight: 700; color: var(--gold-deep); }

.s3-mag-feat { position: relative; display: block; background: var(--surface); border-radius: var(--r-xl);
               overflow: hidden; box-shadow: var(--shadow-sm);
               transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.s3-mag-feat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.s3-mag-feat-title a { color: inherit; text-decoration: none; }
.s3-mag-feat-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.s3-mag-feat:hover .s3-mag-feat-title a { color: var(--gold-deep); }
.s3-mag-feat-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--band); }
.s3-mag-feat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.s3-mag-feat:hover .s3-mag-feat-img img { transform: scale(1.03); }
.s3-mag-feat-body { padding: var(--raum-2); }
.s3-mag-feat-title { font-size: var(--text-h3); line-height: 1.18; margin-top: 8px; color: var(--ink); font-weight: 600; font-family: var(--font-display); }
.s3-mag-excerpt { color: var(--muted); margin: .6rem 0 0; line-height: 1.55;
                  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.s3-mag-more { display: inline-block; margin-top: 1rem; color: var(--gold-deep); font-weight: 600; font-size: var(--text-ui); }

.s3-mag-list { display: flex; flex-direction: column; }
/* Vorschaubild schrumpft mit, die Titelspalte darf unter ihre Mindestbreite:
   104px fest plus ein langes Titelwort ergaben bei 320 px 60 px Ueberlauf. */
.s3-mag-item { position: relative; display: grid; grid-template-columns: clamp(72px, 24vw, 104px) minmax(0, 1fr); gap: clamp(12px, 3vw, 16px); align-items: center;
               padding: 15px 0; border-top: 1px solid var(--line); }
.s3-mag-item:first-child { border-top: 0; padding-top: 0; }
.s3-mag-item-title a { color: inherit; text-decoration: none; }
.s3-mag-item-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.s3-mag-item-img { aspect-ratio: 4 / 3; border-radius: var(--r-m); overflow: hidden; background: var(--band); }
.s3-mag-item-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.s3-mag-item:hover .s3-mag-item-img img { transform: scale(1.04); }
.s3-mag-item-title { font-weight: 600; margin-top: 5px; color: var(--ink); line-height: 1.32; font-size: var(--text-body);
                     display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-display); }
.s3-mag-item:hover .s3-mag-item-title { color: var(--gold-deep); }

/* ---- CTA ---- */
.s3-cta { -webkit-font-smoothing: antialiased; background: var(--ink); color: var(--auf-dunkel); border-radius: var(--r-xl); padding: var(--raum-4); text-align: center; }
.s3-cta h2 { color: #fff; margin-bottom: .7rem; }
.s3-cta p { color: var(--auf-dunkel-leise); max-width: 46ch; margin: 0 auto; }
/* Der Ghost-Knopf ist fuer helle Flaechen gemacht: .s3-btn-ghost setzt
   color: var(--ink) und einen Rand aus --line, beides auf dem dunklen
   CTA-Feld unbrauchbar. Solange ".s3-home a" die Farbe pauschal an sich zog,
   erbte der Knopf hier die helle Schrift der Box und das fiel nicht auf; seit
   die Farbe ohne Gewicht in :where() steht, gewinnt .s3-btn-ghost und der
   Knopf stuende dunkel auf dunkel. Deshalb an dieser einen Stelle eigene
   Werte. Der Rand aus --line war auf dem dunklen Grund ohnehin nie zu sehen,
   er bekommt sie gleich mit: --auf-dunkel zu 42 % ergibt ueber --ink
   gerechnet 3,7:1 und erfuellt damit 1.4.11. */
.s3-cta .s3-btn-ghost { color: var(--auf-dunkel); border-color: color-mix(in srgb, var(--auf-dunkel) 42%, transparent); }
.s3-cta .s3-btn-ghost:hover { background: color-mix(in srgb, var(--auf-dunkel) 14%, transparent); color: #fff;
                              border-color: color-mix(in srgb, var(--auf-dunkel) 60%, transparent); }

/* ---- Motion: dezenter Hero-Eingang, transform-only (Inhalt IMMER sichtbar,
       kann nie leer rendern - kein Sichtbarkeits-Gating ueber JS/Transition) ---- */
@media (prefers-reduced-motion: no-preference) {
  .s3-home .s3-hero .s3-reveal { animation: s3-rise .7s var(--ease) both; }
  .s3-home .s3-hero .s3-d1 { animation-delay: .07s; }
  .s3-home .s3-hero .s3-d2 { animation-delay: .14s; }
  .s3-home .s3-hero .s3-d3 { animation-delay: .21s; }
  .s3-home .s3-hero .s3-seal.s3-reveal { animation-name: s3-rise-seal; animation-duration: .85s; }
}
@keyframes s3-rise { from { transform: translateY(12px); } to { transform: none; } }
@keyframes s3-rise-seal { from { transform: translateY(12px) scale(.99); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .s3-logo-card:hover, .s3-mag-feat:hover { transform: none; }
  .s3-mag-feat:hover .s3-mag-feat-img img, .s3-mag-item:hover .s3-mag-item-img img { transform: none; }
}

/* =========================================================================
   Globale Navigation — einzeilig, custom, ohne Bootstrap (auf allen Seiten)
   ========================================================================= */
.s3-nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.88);
          -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
          border-bottom: 1px solid var(--line); font-family: var(--font-text); }
.s3-nav-in { max-width: var(--s3-maxw); margin: 0 auto; padding: 0 var(--s3-pad); min-height: 64px;
             display: flex; align-items: center; gap: 1.4rem; }
.s3-nav-brand { display: inline-flex; align-items: center; min-height: 44px; }
.s3-nav-brand img { height: 22px; width: auto; display: block; }
.s3-nav a { text-decoration: none; }

.s3-nav-burger { margin-left: auto; display: none; align-items: center; justify-content: center;
                 width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-s);
                 background: transparent; color: var(--ink); cursor: pointer; }
.s3-nav-burger:active { transform: translateY(1px); }

.s3-nav-menu { margin-left: auto; display: flex; align-items: center; gap: 1.7rem; }
.s3-nav-links { display: flex; align-items: center; gap: 1.6rem; }
.s3-nav a:focus-visible, .s3-nav button:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: var(--r-s); }
.s3-nav-links a { color: var(--ink-soft); font-weight: 400; font-size: var(--text-ui); white-space: nowrap;
                  padding: .3rem 0; border-bottom: 2px solid transparent; transition: color .2s var(--ease); }
.s3-nav-links a:hover { color: var(--ink); }
.s3-nav-links a.active { color: var(--gold-deep); font-weight: 600; border-bottom-color: var(--gold); }

.s3-nav-actions { display: flex; align-items: center; gap: .7rem; }
.s3-nav-login { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--text-ui); font-weight: 600;
                color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-s); padding: .5rem .95rem;
                transition: background .2s var(--ease); }
.s3-nav-login:hover { background: var(--band); }
.s3-nav-login.active { border-color: var(--gold); color: var(--gold-deep); }

/* Dropdown (nur eingeloggt) */
.s3-nav-drop { position: relative; }
.s3-nav-dropbtn { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: var(--text-ui);
                  font-weight: 600; color: var(--on-btn); background: var(--btn-verlauf); border: 0; border-radius: var(--r-s);
                  padding: .55rem 1rem; cursor: pointer; }
.s3-nav-dropbtn svg { transition: transform .2s var(--ease); }
.s3-nav-drop.open .s3-nav-dropbtn svg { transform: rotate(180deg); }
.s3-nav-dropmenu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 250px; background: var(--surface);
                   border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-md); padding: 8px; display: none; }
.s3-nav-drop.open .s3-nav-dropmenu { display: block; }
.s3-nav-dropmenu a { display: block; padding: .5rem .7rem; border-radius: var(--r-s); color: var(--ink); font-size: var(--text-ui); }
.s3-nav-dropmenu a:hover { background: var(--band); color: var(--gold-deep); }
.s3-nav-drophead { display: block; padding: .5rem .7rem .2rem; font-size: var(--text-meta); color: var(--muted); font-weight: 600; }
.s3-nav-dropmenu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }

/* Burger bis 1023px: die Leiste braucht mit langen deutschen Labels 940px,
   eingeloggt 967px. Bei 880px schob sie den Login-Knopf zwischen 881 und
   967px aus dem Bild. In em (63.9375em = 1023px bei 16px), damit der
   Haltepunkt mit der Schriftgroesse des Browsers mitwandert: bei 200 %
   wurden die Labels doppelt so breit, der Pixel-Haltepunkt blieb stehen,
   und die Leiste lief bei 1280px um bis zu 384px aus dem Bild. */
@media (max-width: 63.9375em) {
  .s3-nav-burger { display: inline-flex; }
  .s3-nav-menu { position: absolute; left: 0; right: 0; top: 100%; margin: 0; flex-direction: column;
                 align-items: stretch; gap: .2rem; background: var(--surface); border-bottom: 1px solid var(--line);
                 box-shadow: var(--shadow-md); padding: 12px var(--s3-pad) 18px; display: none; }
  .s3-nav.open .s3-nav-menu { display: flex; }
  .s3-nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .s3-nav-links a { padding: .75rem 0; border-bottom: 1px solid var(--line); border-top: 0; }
  .s3-nav-links a.active { border-bottom-color: var(--line); }
  .s3-nav-actions { margin-top: 12px; }
  .s3-nav-drop { width: 100%; }
  .s3-nav-dropbtn { width: 100%; justify-content: center; }
  .s3-nav-dropmenu { position: static; box-shadow: none; border: 0; padding: 6px 0 0; min-width: 0; }
  .s3-nav-login { justify-content: center; }
}

/* =========================================================================
   Globaler Footer — custom, ohne Bootstrap/FontAwesome (auf allen Seiten)
   ========================================================================= */
.s3-footer { background: var(--band); border-top: 1px solid var(--line); margin-top: 0;
             font-family: var(--font-text); color: var(--ink-soft); }
.s3-footer *, .s3-footer *::before, .s3-footer *::after { box-sizing: border-box; }
/* Der CTA ist ein Knopf, kein Footer-Link. Ohne :not() gewinnt diese
   Regel gegen .s3-footer-cta und faerbt die weisse Schrift um. */
.s3-footer a:not(.s3-footer-cta) { color: var(--ink-soft); text-decoration: none;
                                   transition: color .2s var(--ease); }
.s3-footer a:not(.s3-footer-cta):hover { color: var(--gold-deep); }
.s3-footer-cta { text-decoration: none; }

/* padding-block statt der Kurzform: .s3-wrap liefert das seitliche Mass,
   und "padding: x 0 y" haette es auf 0 gesetzt. Auf Desktop kaschiert
   die zentrierende max-width das, darunter klebt der Inhalt am Rand. */
.s3-footer-grid { display: grid; grid-template-columns: 1fr; gap: 34px 40px;
                  padding-block: clamp(44px, 6vw, 64px) 40px; }
@media (min-width: 620px) { .s3-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .s3-footer-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); } }

/* Dieselbe Bildmarke wie in der Navigation. Vorher ein nachgebauter
   Schriftzug in der Systemschrift -- die Seite zeigte zwei Wortmarken. */
.s3-footer-logo { display: block; height: 22px; width: auto; }
.s3-footer-tag { margin: .8rem 0 1.3rem; color: var(--muted); max-width: 32ch; font-size: var(--text-ui); line-height: 1.5; }
.s3-footer-contact { display: flex; flex-direction: column; gap: .55rem; font-size: var(--text-ui); }
.s3-footer-contact > * { display: flex; align-items: flex-start; gap: .6rem; color: var(--ink-soft); }
.s3-footer-contact svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--gold-deep); }
.s3-footer-cta { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem; background: var(--btn-verlauf);
                 color: var(--on-btn); font-weight: 600; font-size: var(--text-ui); padding: .62rem 1.15rem; border-radius: var(--r-s);
                 transition: background .2s var(--ease); }
.s3-footer-cta:hover { background: var(--btn-verlauf-hover); color: var(--on-btn); }

/* h2 statt h4: die Spalten des Seitenfusses folgen auf die H2 der Seite,
   dazwischen fehlte die dritte Ebene. */
.s3-footer-col h2 { font-size: var(--text-ui); color: var(--muted);
                    font-weight: 600; margin: 0 0 1.1rem; font-family: var(--font-display); }
.s3-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .62rem; }
.s3-footer-col li { font-size: var(--text-ui); line-height: 1.4; }
.s3-footer-col button { background: none; border: 0; padding: 0; font: inherit; font-size: var(--text-ui);
                        color: var(--ink-soft); cursor: pointer; transition: color .2s var(--ease); text-align: left; }
.s3-footer-col button:hover { color: var(--gold-deep); }
/* Zwei Zeilen statt hartem Abschneiden: deutsche Schlagzeilen werden
   auf einer Zeile zu Stummeln, und auf Mobil ist die Breite da. */
.s3-footer-titel { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.s3-footer-more { color: var(--gold-deep); font-weight: 600; }

.s3-footer-bar { border-top: 1px solid var(--line); }
.s3-footer-bar .s3-wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
                          align-items: center; padding-top: 20px; padding-bottom: 30px; font-size: var(--text-meta); color: var(--muted); }

/* Unterhalb des Zweispalters sind die Listen die Haupt-Tippziele. Dort
   bekommen die Zeilen volle Hoehe, dafuer entfaellt fast der Zeilenabstand
   -- die Hoehe traegt die Trennung. Auf breiten Schirmen bleibt die
   kompakte Setzung, weil dort mit der Maus gezielt wird. */
/* Tippziele der Fussleiste: bis zur Burger-Grenze und auf jedem
   Touch-Geraet. Vorher nur unter 620px -- auf Tablets waren die Links 16px
   hoch. */
@media (max-width: 63.9375em), (pointer: coarse) {
  .s3-footer-col ul { gap: .15rem; }
  .s3-footer-col li a,
  .s3-footer-col li button { display: flex; align-items: center; min-height: 44px; }
  .s3-footer-mag li a { padding-block: .55rem; }
  .s3-footer-contact { gap: .2rem; }
  .s3-footer-contact a { min-height: 44px; align-items: center; }
  .s3-footer-contact a svg { margin-top: 0; }
  .s3-footer-cta { min-height: 48px; padding-inline: 1.35rem; }
}
@media (max-width: 619px) {
  /* Vier zweizeilige Schlagzeilen sind auf einem Telefon rund 380 px
     Footer, den kaum jemand liest. Zwei bleiben stehen, der Rest ist
     einen Tipp entfernt -- "Alle Nachrichten" wird nicht ausgeblendet. */
  .s3-footer-mag li:nth-child(n+3):not(:last-child) { display: none; }
  /* Die Anschrift steht auf einem Telefon zweimal auf demselben Schirm:
     oben im Kontaktblock und hier noch einmal. Auf breiten Schirmen traegt
     sie die rechte Seite der Leiste, dort bleibt sie stehen. */
  .s3-footer-bar .s3-wrap span + span { display: none; }
}

/* =========================================================================
   Artikel-/Magazinseite (body.s3-article)
   ========================================================================= */
.s3-article-page { padding: var(--raum-3) 0 var(--raum-5); }
.s3-article-head { max-width: 800px; margin: 0 auto; text-align: center; }
.s3-article-back { display: inline-block; color: var(--gold-deep); font-weight: 600; font-size: var(--text-ui); margin-bottom: 1.4rem; }
.s3-article-back:hover { text-decoration: underline; }
.s3-article-meta { font-size: var(--text-meta); font-weight: 700; color: var(--muted); margin-bottom: .9rem; }
.s3-article-title { font-size: var(--text-h1); line-height: 1.08; letter-spacing: -.01em; color: var(--ink); font-weight: 700; font-family: var(--font-display); }
.s3-article-lead { font-size: var(--text-lead); line-height: 1.5; color: var(--ink-soft); margin: 1.1rem auto 0; max-width: 62ch; }

/* Verfasserangabe unter der Ueberschrift */
.s3-article-autor { display: inline-flex; align-items: center; gap: .55rem; margin: 1rem 0 0;
                    font-size: var(--text-ui); color: var(--muted); }
.s3-article-autor strong { color: var(--ink); font-weight: 600; }
.s3-article-autor-fn { color: var(--muted); }
.s3-article-autor-ic { display: inline-flex; width: 26px; height: 26px; border-radius: var(--r-rund); flex: 0 0 auto;
                       align-items: center; justify-content: center; background: var(--band); color: var(--gold-deep); }
.s3-article-autor-ic svg { width: 15px; height: 15px; }

.s3-article-hero { margin: var(--raum-3) auto 0; max-width: 960px; border-radius: var(--r-xl); overflow: hidden; background: var(--band); }
.s3-article-hero img { width: 100%; height: auto; display: block; }

.s3-article-body { display: grid; grid-template-columns: 1fr; gap: var(--raum-4);
                   max-width: 1040px; margin: var(--raum-4) auto 0; }
.s3-article-body:not(.s3-has-aside) { max-width: 720px; }
@media (min-width: 920px) { .s3-article-body.s3-has-aside { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }

/* Fliesstext */
.s3-prose { color: var(--ink-soft); font-size: var(--text-body); line-height: 1.72; max-width: 65ch; }
.s3-prose > *:first-child { margin-top: 0; }
.s3-prose p { margin: 0 0 1.25em; }
.s3-prose h2 { font-size: var(--text-h2); color: var(--ink); letter-spacing: -.01em; line-height: 1.18; margin: 1.9em 0 .55em; font-weight: 600; font-family: var(--font-display); }
.s3-prose h3 { font-size: var(--text-h3); color: var(--ink); margin: 1.6em 0 .5em; font-weight: 600; line-height: 1.18; font-family: var(--font-display); }
.s3-prose h4 { color: var(--ink); }
.s3-prose a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.s3-prose a:hover { text-decoration: none; }
.s3-prose ul, .s3-prose ol { margin: 0 0 1.25em; padding-left: 1.3em; }
.s3-prose li { margin: .4em 0; }
.s3-prose li::marker { color: var(--gold-deep); }
.s3-prose img { max-width: 100%; height: auto; border-radius: var(--r-m); margin: 1.6em 0; }
.s3-prose blockquote { margin: 1.6em 0; padding: 1.1em 1.3em; background: var(--band); border-radius: var(--r-m); color: var(--ink); font-size: var(--text-body); font-style: italic; }
.s3-prose strong, .s3-prose b { color: var(--ink); font-weight: 700; }
.s3-prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: var(--text-ui); }
.s3-prose th, .s3-prose td { text-align: left; padding: .6em .8em; border-bottom: 1px solid var(--line); }

/* Teilen */
/* Haeufige Fragen. <details> statt eigenem Skript: das Aufklappen kann der
   Browser selbst, und der Text steht auch ohne JavaScript im Dokument. */
.s3-faq { margin: 2.6rem 0 0; }
.s3-faq h2 { margin-bottom: .8em; }
.s3-faq-item { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface);
               margin: 0 0 .6rem; overflow: hidden; }
.s3-faq-item summary { cursor: pointer; list-style: none; padding: .85rem 2.6rem .85rem 1rem; position: relative;
                       font-weight: 600; color: var(--ink); line-height: 1.4; }
.s3-faq-item summary::-webkit-details-marker { display: none; }
.s3-faq-item summary::after { content: ""; position: absolute; right: 1rem; top: 1.15rem; width: 9px; height: 9px;
                              border-right: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep);
                              transform: rotate(45deg); transition: transform .18s ease; }
.s3-faq-item[open] summary::after { transform: rotate(-135deg); top: 1.35rem; }
.s3-faq-item summary:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -2px; }
.s3-faq-antwort { padding: 0 1rem 1rem; }
.s3-faq-antwort > *:last-child { margin-bottom: 0; }

/* Belege */
.s3-quellen { margin: 2.6rem 0 0; }
.s3-quellen h2 { margin-bottom: .7em; }
.s3-quellen ol { margin: 0; padding-left: 1.4em; font-size: var(--text-ui); }
.s3-quellen li { margin: .5em 0; }
.s3-quellen a { overflow-wrap: anywhere; }
.s3-quellen-domain { display: block; font-size: var(--text-meta); color: var(--muted); }

/* Kurzbiografie am Artikelende */
.s3-autorbox { display: flex; gap: 1rem; align-items: flex-start; margin: 2.6rem 0 0;
               padding: 1.1rem 1.2rem; border-radius: var(--r-l); background: var(--band); }
.s3-autorbox-ic { display: inline-flex; width: 42px; height: 42px; border-radius: var(--r-rund); flex: 0 0 auto;
                  align-items: center; justify-content: center; background: var(--surface); color: var(--gold-deep); }
.s3-autorbox-ic svg { width: 22px; height: 22px; }
.s3-autorbox p { margin: 0 0 .35em; }
.s3-autorbox p:last-child { margin-bottom: 0; }
.s3-autorbox-name { font-weight: 600; color: var(--ink); }
.s3-autorbox-name span { font-weight: 400; color: var(--muted); }
.s3-autorbox-bio { font-size: var(--text-body); }
.s3-autorbox-exp { font-size: var(--text-meta); color: var(--muted); }
.s3-autorbox-exp span { font-weight: 600; color: var(--ink-soft); }

.s3-share { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.s3-share-label { font-weight: 600; font-size: var(--text-ui); color: var(--ink); margin-right: .3rem; }
.s3-share a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-rund);
              border: 1px solid var(--line); color: var(--muted); background: var(--surface);
              transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.s3-share a:hover { color: #fff; transform: translateY(-2px); }
.s3-share a svg { width: 18px; height: 18px; }
.s3-share a.fb:hover { background: #1877f2; border-color: #1877f2; }
.s3-share a.x:hover  { background: #000; border-color: #000; }
.s3-share a.li:hover { background: #0a66c2; border-color: #0a66c2; }
.s3-share a.wa:hover { background: #25d366; border-color: #25d366; }
.s3-share a.mail:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }

/* Sidebar: Versorger-Bewertung */
.s3-aside { position: sticky; top: 84px; }
@media (max-width: 919px) { .s3-aside { position: static; } }
.s3-aside-card { background: var(--surface); border-radius: var(--r-l); padding: var(--raum-2); box-shadow: var(--shadow-sm); }
.s3-aside-card h4 { font-size: var(--text-body); color: var(--ink); margin: 0 0 .3rem; line-height: 1.3; font-weight: 600; font-family: var(--font-display); }
.s3-aside-card p { color: var(--muted); font-size: var(--text-ui); }
.s3-aside-card a { color: var(--gold-deep); }
.s3-aside-card .table { width: 100%; margin: 14px 0 0; border-collapse: collapse; font-size: var(--text-ui); }
.s3-aside-card .table thead th { text-align: left; font-size: var(--text-meta);
                                 color: var(--muted); padding: 0 0 8px; border: 0; background: none; font-weight: 600; }
.s3-aside-card .table td { padding: 9px 0; border: 0; border-top: 1px solid var(--line); color: var(--ink-soft); vertical-align: middle; }
.s3-aside-card .table tbody tr:first-child td { border-top: 0; }

/* Fuss der Artikelseite */
.s3-article-foot { max-width: 1040px; margin: var(--raum-4) auto 0; padding-top: var(--raum-2);
                   border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }

/* ---- Magazin-Uebersicht (Artikel-Raster mit Leitartikel) ---- */
.s3-mag-hero { text-align: center; max-width: 640px; margin: 0 auto var(--raum-3); }
.s3-mag-hero h1 { font-size: var(--text-h1); letter-spacing: -.01em; color: var(--ink); line-height: 1.08; font-weight: 700; font-family: var(--font-display); }
.s3-mag-hero p { color: var(--ink-soft); font-size: var(--text-lead); margin-top: .8rem; }

/* "Passende Beitraege" am Fuss der Artikelseite */
.s3-verwandt { max-width: 1040px; margin: var(--raum-4) auto 0;
               padding-top: var(--raum-3); border-top: 1px solid var(--line); }
.s3-verwandt > h2 { font-size: var(--text-h3); color: var(--ink);
                    margin: 0 0 1.1rem; font-weight: 600; line-height: 1.18; font-family: var(--font-display); }
.s3-verwandt .s3-artgrid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 18px; }

/* Rubriken als zweite Ebene ueber der Uebersicht. */
.s3-mag-rubriken { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
                   margin: 0 auto var(--raum-3); }
.s3-mag-rubriken a, .s3-blaettern a { text-decoration: none; }
.s3-mag-rubriken a { display: inline-flex; align-items: center; gap: .45em; min-height: 44px;
                     padding: .45rem .95rem; border-radius: var(--r-rund); border: 1px solid var(--line);
                     background: var(--surface); color: var(--ink-soft); font-size: var(--text-ui); font-weight: 600; }
.s3-mag-rubriken a span { font-weight: 400; font-size: var(--text-meta); color: var(--muted); }
.s3-mag-rubriken a:hover { border-color: var(--gold-2); color: var(--ink); }
.s3-mag-rubriken a.is-aktiv { background: var(--band); border-color: var(--gold-2); color: var(--ink); }
.s3-mag-rubriken a.is-aktiv span { color: var(--gold-deep); }

/* Blaetterleiste */
.s3-blaettern { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
                background: none; margin: var(--raum-4) 0 0; }
.s3-blaettern-liste { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.s3-blaettern a, .s3-blaettern .is-aktiv, .s3-blaettern-luecke {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 .7rem; border-radius: var(--r-m);
  font-size: var(--text-ui); font-weight: 600; }
.s3-blaettern a { border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); }
.s3-blaettern a:hover { border-color: var(--gold-2); color: var(--ink); }
.s3-blaettern .is-aktiv { background: var(--band); border: 1px solid var(--gold-2); color: var(--ink); }
.s3-blaettern-luecke { color: var(--muted); min-width: 24px; padding: 0; }
.s3-blaettern-pfeil { gap: .4em; }
.s3-blaettern-info { text-align: center; color: var(--muted); font-size: var(--text-meta); margin: .9rem 0 0; }
/* Schmale Schirme: die Ziffern in die erste Zeile, die beiden Pfeile
   darunter nebeneinander. Ohne das landet "Zurück" ueber und "Weiter"
   unter der Ziffernreihe -- zwei Zeilen mit je einem einsamen Pfeil. */
@media (max-width: 559px) {
  .s3-blaettern-liste { order: -1; flex-basis: 100%; justify-content: center; flex-wrap: wrap; }
  .s3-blaettern a, .s3-blaettern .is-aktiv { min-width: 44px; padding: 0 .5rem; }
  .s3-blaettern-pfeil { padding: 0 .9rem; }
}

.s3-artgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 22px; }
.s3-artcard { position: relative; display: flex; flex-direction: column; background: var(--surface);
              border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none;
              transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.s3-artcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* Link nur auf dem Titel; ganze Karte klickbar via Stretched-Link (gut fuer SEO) */
.s3-artcard-title a { color: inherit; text-decoration: none; }
.s3-artcard-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.s3-artcard:hover .s3-artcard-title a { color: var(--gold-deep); }
.s3-artcard-img { aspect-ratio: 16/9; overflow: hidden; background: var(--band); }
.s3-artcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.s3-artcard:hover .s3-artcard-img img { transform: scale(1.03); }
.s3-artcard-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.s3-artcard-date { font-size: var(--text-meta); font-weight: 700; color: var(--gold-deep); }
.s3-artcard-title { font-size: var(--text-body); line-height: 1.3; margin: 8px 0 0; color: var(--ink); font-weight: 600; font-family: var(--font-display); }
.s3-artcard-excerpt { color: var(--muted); font-size: var(--text-body); line-height: 1.55; margin: .6rem 0 0;
                      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.s3-artcard-more { margin-top: auto; padding-top: 1rem; color: var(--gold-deep); font-weight: 600; font-size: var(--text-ui); }

.s3-artcard--feat { grid-column: 1 / -1; }
@media (min-width: 820px) {
  .s3-artcard--feat { flex-direction: row; }
  .s3-artcard--feat .s3-artcard-img { flex: 1.1; aspect-ratio: auto; min-height: 320px; }
  .s3-artcard--feat .s3-artcard-body { flex: 1; justify-content: center; padding: var(--raum-3); }
  .s3-artcard--feat .s3-artcard-title { font-size: var(--text-h2); line-height: 1.18; margin-top: 10px; font-weight: 600; letter-spacing: -.01em; font-family: var(--font-display); }
  .s3-artcard--feat .s3-artcard-excerpt { -webkit-line-clamp: 4; font-size: var(--text-body); margin-top: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .s3-artcard:hover { transform: none; }
  .s3-artcard:hover .s3-artcard-img img { transform: none; }
}

/* Bewertungssterne (Inline-SVG statt FontAwesome) */
.s3-star { display: inline-block; vertical-align: -2px; }
.s3-sterne { display: inline-flex; align-items: center; gap: 1px; vertical-align: -2px; }
.s3-star.is-voll { fill: var(--stern); }
.s3-star.is-leer { stroke: var(--stern-leer); }
/* Allgemeine Inline-Icons aus s3Icon() – ersetzt FontAwesome */
.s3-ic { display: inline-block; vertical-align: -3px; }
.s3-ic.iconBewertung { color: var(--gold-deep); margin-right: .35rem; }

/* ---- Versorger-Verzeichnis (dichtes, durchsuchbares Raster) ---- */
.s3-evu-hero { text-align: center; max-width: 720px; margin: 0 auto var(--raum-3); }
.s3-evu-hero h1 { font-size: var(--text-h1); letter-spacing: -.01em; color: var(--ink); line-height: 1.08; font-weight: 700; font-family: var(--font-display); }
.s3-evu-lead { color: var(--ink-soft); font-size: var(--text-lead); margin-top: .8rem; line-height: 1.55; }
.s3-evu-count { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.6rem; background: var(--surface);
                border: 1px solid var(--line); border-radius: var(--r-rund); padding: .42rem 1.1rem .42rem .5rem;
                font-size: var(--text-ui); color: var(--ink-soft); box-shadow: var(--shadow-sm); }
.s3-evu-count-ic { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%;
                   background: var(--gold); color: var(--on-gold); flex: none; }
.s3-evu-count-ic svg { width: 15px; height: 15px; }
.s3-evu-count strong { color: var(--gold-deep); font-size: var(--text-body); font-variant-numeric: tabular-nums; font-weight: 700; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.s3-evu-search { position: relative; max-width: 460px; margin: 1.5rem auto 0; }
.s3-evu-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.s3-evu-search input { width: 100%; padding: .82rem 1rem .82rem 2.9rem; border: 1px solid var(--line-feld); border-radius: var(--r-rund);
                       font: inherit; font-size: var(--text-body); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm);
                       transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.s3-evu-search input:focus { border-color: var(--gold-deep); outline: 2px solid var(--gold-deep); outline-offset: 2px; box-shadow: var(--shadow-sm); }

/* Raster bewusst dicht (bis ~5 Spalten), damit es nach sehr vielen Versorgern aussieht */
.s3-evu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(198px, 1fr)); gap: 12px; }
.s3-evu { position: relative; display: flex; flex-direction: column; background: var(--surface);
          border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow-sm);
          transition: box-shadow .25s var(--ease), transform .2s var(--ease); }
.s3-evu:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.s3-evu:active { transform: translateY(-1px) scale(.99); transition-duration: .1s; }
/* Einheitliches Logo-Regal – hauchzarter Verlauf, damit Logos & Monogramme gleich sitzen */
.s3-evu-logo { height: 88px; display: grid; place-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line);
               background: linear-gradient(180deg, #fff, #fdfbf7); }
.s3-evu-logo img { max-height: 46px; max-width: 82%; object-fit: contain; filter: saturate(.9); opacity: .96;
                   transition: filter .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease); }
.s3-evu:hover .s3-evu-logo img { filter: saturate(1); opacity: 1; transform: scale(1.04); }
.s3-evu-mono { width: 60px; height: 60px; border-radius: var(--r-l); display: grid; place-items: center;
               background: linear-gradient(150deg, color-mix(in srgb, var(--gold) 34%, #fff), color-mix(in srgb, var(--gold) 15%, #fff));
               border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
               color: var(--gold-deep); font-weight: 700; font-size: var(--text-h3); font-family: var(--font-display);
               box-shadow: inset 0 1px 0 rgba(255,255,255,.75); transition: transform .3s var(--ease); }
.s3-evu:hover .s3-evu-mono { transform: scale(1.04); }
.s3-evu-body { display: flex; flex-direction: column; gap: 4px; padding: 13px 14px 15px; flex: 1; }
/* Der Name ist das, wonach gesucht wird: er steht ganz da. Vorher auf zwei
   Zeilen gekappt ("Energieversorgungsge sellschaft ..."). */
.s3-evu-name { font-weight: 600; color: var(--ink); line-height: 1.25; font-size: var(--text-body); font-family: var(--font-display); }
.s3-evu-name a { color: inherit; text-decoration: none; }
.s3-evu-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.s3-evu:hover .s3-evu-name a { color: var(--gold-deep); }
.s3-evu-loc { font-size: var(--text-meta); color: var(--muted); display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; }
.s3-evu-loc svg { width: 12px; height: 12px; flex: none; opacity: .8; }
/* Ergebnisbalken statt Sterne, ohne Zahl -- die steht auf der Ergebnisseite.
   Ohne Zahl traegt die Laenge die ganze Aussage: das Ende der Fuellung
   (--gold-deep) steht deshalb mit 5,0:1 gegen die Spur, --gold-2 wie auf
   der Ergebnisseite kaeme nur auf 2,5:1. */
.s3-evu-ergebnis { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; }
.s3-evu-ergebnis-lbl { flex: none; font-size: var(--text-meta); color: var(--muted); }
.s3-evu-bar { flex: 1; min-width: 0; height: 6px; border-radius: var(--r-rund); background: var(--band); overflow: hidden; }
.s3-evu-bar-fill { display: block; height: 100%; border-radius: var(--r-rund); width: var(--w, 0%);
                   background: linear-gradient(90deg, var(--gold), var(--gold-deep)); }
@media (prefers-reduced-motion: reduce) {
  .s3-evu:hover, .s3-evu:active { transform: none; }
  .s3-evu-logo img, .s3-evu:hover .s3-evu-logo img, .s3-evu:hover .s3-evu-mono { transition: none; transform: none; }
}
/* Auf dem Smartphone bewusst zwei Spalten – dichter, weniger Scrollen, wirkt nach vielen Anbietern */
@media (max-width: 560px) {
  .s3-evu-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .s3-evu-logo { height: 74px; padding: 12px 14px; }
  .s3-evu-logo img { max-height: 38px; }
  .s3-evu-mono { width: 52px; height: 52px; border-radius: var(--r-m); font-size: var(--text-body); }
  .s3-evu-body { padding: 11px 12px 13px; }
  .s3-evu-name { font-size: var(--text-ui); }
}
.s3-evu-empty { text-align: center; color: var(--muted); padding: 44px 0; }

.s3-evu-intro { max-width: 65ch; margin: var(--raum-5) auto 0; }
.s3-evu-intro h2 { font-size: var(--text-h2); color: var(--ink); letter-spacing: -.01em; margin-bottom: .7rem; font-weight: 600; line-height: 1.18; font-family: var(--font-display); }
.s3-evu-intro p { color: var(--ink-soft); line-height: 1.7; margin: 0 0 1em; }

/* =========================================================================
   Consent (eigene Loesung statt Usercentrics) – bewusst domainunabhaengig,
   damit sie auch auf der Alt-Domain (Bootstrap) sauber sitzt.
   ========================================================================= */
.s3-cc-banner, .s3-cc-banner *, .s3-cc-modal, .s3-cc-modal * { box-sizing: border-box; }
.s3-cc-lock { overflow: hidden; }

/* ---- Banner (erste Ebene) ---- */
.s3-cc-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000;
                padding: 0 clamp(12px, 3vw, 24px) clamp(12px, 3vw, 24px);
                font-family: var(--font-text); pointer-events: none;
                opacity: 0; transform: translateY(14px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.s3-cc-banner.is-open { opacity: 1; transform: none; }
.s3-cc-banner-inner { pointer-events: auto; max-width: 960px; margin: 0 auto;
                      display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 3vw, 28px);
                      background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
                      border: 1px solid var(--line); border-radius: var(--r-l);
                      box-shadow: 0 18px 48px rgba(46,38,26,.18), 0 4px 12px rgba(46,38,26,.08);
                      padding: clamp(16px, 2.4vw, 22px) clamp(18px, 2.6vw, 26px); }
.s3-cc-banner-text { color: var(--ink-soft); font-size: var(--text-ui); line-height: 1.55; flex: 1 1 20rem; min-width: 0; }
.s3-cc-banner-text strong { color: var(--ink); font-weight: 600; }
.s3-cc-banner-text a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
/* Vorher flex: none -- bei grosser Schrift liefen die Knoepfe, auch
   "Akzeptieren", rechts aus dem Bild. Jetzt rutscht die Gruppe unter den
   Text, und die Knoepfe duerfen untereinander umbrechen. */
.s3-cc-banner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 0 1 auto; max-width: 100%; }

/* ---- Buttons ---- */
.s3-cc-btn { font: inherit; font-size: var(--text-ui); font-weight: 600; cursor: pointer;
             border: 1px solid transparent; border-radius: var(--r-s); padding: .72rem 1.15rem; min-height: 44px; max-width: 100%;
             line-height: 1.2; text-align: center;
             transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .1s var(--ease); }
.s3-cc-btn:active { transform: translateY(1px); }
.s3-cc-btn:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.s3-cc-btn-accept { background: var(--btn-verlauf); color: var(--on-btn); border-color: transparent; }
.s3-cc-btn-accept:hover { background: var(--btn-verlauf-hover); border-color: transparent; }
.s3-cc-btn-neutral { background: var(--surface); color: var(--ink); border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); }
.s3-cc-btn-neutral:hover { background: var(--band); }
.s3-cc-btn-ghost { background: transparent; color: var(--ink-soft); border-color: transparent; padding-left: .6rem; padding-right: .6rem; }
.s3-cc-btn-ghost:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Einstellungen (zweite Ebene) ---- */
.s3-cc-modal { position: fixed; inset: 0; z-index: 2147483001; font-family: var(--font-text);
               display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 24px); }
.s3-cc-scrim { position: absolute; inset: 0; background: rgba(30,25,16,.45);
               -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
               opacity: 0; transition: opacity .3s var(--ease); }
.s3-cc-modal.is-open .s3-cc-scrim { opacity: 1; }
.s3-cc-dialog { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto;
                background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
                box-shadow: var(--shadow-seal); padding: var(--raum-2);
                opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.s3-cc-modal.is-open .s3-cc-dialog { opacity: 1; transform: none; }
.s3-cc-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center;
           background: var(--band); color: var(--ink-soft); border: 0; border-radius: var(--r-s); cursor: pointer;
           transition: background .18s var(--ease), color .18s var(--ease); }
.s3-cc-x:hover { background: color-mix(in srgb, var(--ink) 10%, var(--band)); color: var(--ink); }
.s3-cc-x:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.s3-cc-title { margin: 0 0 .5rem; font-size: var(--text-h3); font-weight: 600; color: var(--ink); padding-right: 32px; line-height: 1.18; font-family: var(--font-display); }
.s3-cc-intro { margin: 0 0 1.3rem; color: var(--ink-soft); font-size: var(--text-ui); line-height: 1.6; }
.s3-cc-cat { border: 1px solid var(--line); border-radius: var(--r-m); padding: 15px 16px; margin-bottom: 12px; background: var(--bg); }
.s3-cc-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.s3-cc-cat-name { font-weight: 600; color: var(--ink); font-size: var(--text-body); font-family: var(--font-display); }
.s3-cc-cat-desc { margin: 0; color: var(--muted); font-size: var(--text-meta); line-height: 1.55; }
.s3-cc-badge { font-size: var(--text-meta); font-weight: 600; color: var(--gold-deep); background: var(--band);
               border: 1px solid var(--line); border-radius: var(--r-rund); padding: .28rem .7rem; white-space: nowrap; }

/* ---- Schalter (iOS-Stil) ---- */
.s3-cc-switch { position: relative; display: inline-block; width: 46px; height: 27px; flex: none; }
.s3-cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.s3-cc-slider { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 20%, #fff); border-radius: var(--r-rund);
                transition: background .2s var(--ease); }
.s3-cc-slider::before { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%;
                        background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ease); }
.s3-cc-switch input:checked + .s3-cc-slider { background: var(--gold-2); }
.s3-cc-switch input:checked + .s3-cc-slider::before { transform: translateX(19px); }
.s3-cc-switch input:focus-visible + .s3-cc-slider { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.s3-cc-dialog-actions { display: flex; gap: 10px; margin-top: 20px; }
.s3-cc-dialog-actions .s3-cc-btn { flex: 1; text-align: center; justify-content: center; }

/* ---- Responsive & Reduced Motion ---- */
@media (max-width: 640px) {
  .s3-cc-banner-inner { flex-direction: column; align-items: stretch; }
  .s3-cc-banner-actions { flex-wrap: wrap; }
  .s3-cc-banner-actions .s3-cc-btn-neutral, .s3-cc-banner-actions .s3-cc-btn-accept { flex: 1; text-align: center; justify-content: center; }
  .s3-cc-btn-ghost { flex-basis: 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .s3-cc-banner, .s3-cc-scrim, .s3-cc-dialog { transition: opacity .2s linear; transform: none; }
  .s3-cc-banner.is-open, .s3-cc-modal.is-open .s3-cc-dialog { transform: none; }
  .s3-cc-slider, .s3-cc-slider::before, .s3-cc-btn { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .s3-cc-banner-inner { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* =========================================================================
   Teilnehmen-Seite (B2B-Konversion) – Featurettes, Testimonial, FAQ, Formular
   ========================================================================= */

/* ---- Testimonial (Lime-Band) ---- */
.s3-quote-section { background: var(--gold-verlauf); }
.s3-quote { display: grid; grid-template-columns: 1fr; gap: var(--raum-3); align-items: center; margin: 0; max-width: 940px; }
@media (min-width: 720px) { .s3-quote { grid-template-columns: auto 1fr; } }
/* max-width: none: die Grundregel max-width: 100% bezog sich in der
   Spalte "auto" auf eine Breite, die erst vom Bild abhaengt -- der Browser
   loeste das mit 0 auf, und vom Portraet blieb der 5-px-Rahmen (10 x 10 px).
   Die Breite steht hier ohnehin fest. */
.s3-quote-photo { width: clamp(120px, 20vw, 172px); max-width: none; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
                  border: 5px solid rgba(255,255,255,.55); box-shadow: 0 10px 30px rgba(46,38,26,.18); justify-self: center; }
.s3-quote-text { margin: 0; font-size: var(--text-h3); line-height: 1.4; font-weight: 600;
                 color: var(--on-gold); text-wrap: pretty; font-family: var(--font-display); }
.s3-quote-text::before { content: "\201E"; }
.s3-quote-text::after { content: "\201C"; }
.s3-quote figcaption { margin-top: 1.3rem; }
.s3-quote-name { display: block; font-weight: 600; color: var(--ink); font-size: var(--text-body); font-family: var(--font-display); }
/* Volle Schriftfarbe: halbtransparent lag sie auf dem Goldverlauf bei
   3,2 bis 4,2:1. --on-gold haelt auch an der dunkelsten Stelle 5,6:1. */
.s3-quote-role { display: block; margin-top: .2rem; font-size: var(--text-ui); color: var(--on-gold); }

/* ---- FAQ (natives details/summary, kein Bootstrap) ---- */
/* FAQ der Teilnahmeseite. Hiess frueher ebenfalls .s3-faq und ueberschrieb
   damit die FAQ der Artikelseite (Abstand oben weg, doppelter Abstand
   zwischen den Fragen). */
.s3-faq-liste { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.s3-faq-liste details { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); overflow: hidden;
                  transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.s3-faq-liste details[open] { border-color: var(--rand-gold); box-shadow: var(--shadow-sm); }
.s3-faq-liste summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
                  gap: 16px; padding: 17px 20px; font-weight: 600; color: var(--ink); font-size: var(--text-body); font-family: var(--font-display); line-height: 1.4; }
.s3-faq-liste summary::-webkit-details-marker { display: none; }
.s3-faq-liste summary:hover { color: var(--gold-deep); }
.s3-faq-ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; color: var(--muted); transition: transform .25s var(--ease); }
.s3-faq-ic svg { width: 18px; height: 18px; }
.s3-faq-liste details[open] .s3-faq-ic { transform: rotate(180deg); color: var(--gold-deep); }
.s3-faq-body { padding: 0 20px 18px; color: var(--ink-soft); font-size: var(--text-body); line-height: 1.65; }
.s3-faq-body a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Teilnahme-Formular ---- */
.s3-signup { display: grid; grid-template-columns: 1fr; gap: var(--raum-4); align-items: start; }
@media (min-width: 860px) { .s3-signup { grid-template-columns: 1fr 1fr; } }
.s3-signup-points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.s3-signup-points li { position: relative; padding-left: 30px; color: var(--ink-soft); font-weight: 400; }
.s3-signup-points li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%;
                               background: var(--gold); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23242019' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
                               background-size: 13px; background-position: center; background-repeat: no-repeat; }
.s3-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--raum-2); box-shadow: var(--shadow-sm); }
.s3-field { margin-bottom: 14px; }
.s3-field label { display: block; font-size: var(--text-ui); font-weight: 600; color: var(--ink-soft); margin-bottom: .4rem; }
.s3-field input { width: 100%; padding: .8rem .95rem; border: 1px solid var(--line-feld); border-radius: var(--r-s); font: inherit; font-size: var(--text-body);
                  background: var(--bg); color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); }
/* Platzhalter deckend: das halbtransparente Grau lag unter 4,5:1. */
.s3-field input::placeholder, .s3-q-field::placeholder, .s3-evu-search input::placeholder { color: var(--muted); opacity: 1; }
/* Fokus: der Ring des Designsystems statt eines Scheins. Der alte
   box-shadow mass 1,20:1 -- auf keinem Feld der Seite war zu sehen, wo der
   Fokus steht. --gold-deep: 5,8:1 auf --surface, 5,0:1 auf --band. */
.s3-field input:focus { border-color: var(--gold-deep); background: var(--surface);
                        outline: 2px solid var(--gold-deep); outline-offset: 2px; }
/* Fehlerzustand: Rand und Meldung am Feld, verknuepft ueber
   aria-describedby; die Farbe allein traegt die Aussage nicht. */
.s3-field input[aria-invalid="true"] { border-color: var(--fehler); border-width: 2px; padding: calc(.8rem - 1px) calc(.95rem - 1px); }
.s3-feld-fehler { display: flex; gap: .4rem; align-items: flex-start; margin: .45rem 0 0; font-size: var(--text-ui); line-height: 1.45; color: var(--fehler); font-weight: 600; }
.s3-feld-fehler::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-top: .05rem;
                          border-radius: 50%; background: var(--fehler); color: #fff; font-size: .72rem; font-weight: 700; }
.s3-check.is-fehler { color: var(--fehler); }
.s3-check + .s3-feld-fehler { margin: -8px 0 14px; }
.s3-fehler-liste { margin: .5rem 0 0; padding-left: 1.15rem; }
.s3-fehler-liste li + li { margin-top: .2rem; }
.s3-check.is-fehler input { outline: 2px solid var(--fehler); outline-offset: 2px; }
.s3-check { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: 14px; font-size: var(--text-ui); color: var(--ink-soft); line-height: 1.5; cursor: pointer; }
.s3-check input { flex: none; margin-top: .15rem; width: 18px; height: 18px; accent-color: var(--gold-2); cursor: pointer; }
.s3-check a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.s3-form .wdh { display: none; } /* Honeypot – robust versteckt, unabhaengig von css.css */
.s3-form .s3-btn { width: 100%; justify-content: center; margin-top: 6px; font-size: var(--text-body); padding-top: .85rem; padding-bottom: .85rem; }
.s3-note { border-radius: var(--r-m); padding: 15px 18px; font-size: var(--text-ui); line-height: 1.5; margin-bottom: 16px; }
.s3-note-success { background: var(--erfuellt-flaeche); border: 1px solid var(--erfuellt-rand); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .s3-faq-liste details, .s3-faq-ic, .s3-field input { transition: none; }
}

/* =========================================================================
   Rechtstexte / Impressum (body.s3-article)
   ========================================================================= */
.s3-legal { max-width: 880px; margin: 0 auto; }
.s3-legal-hero { max-width: 1040px; margin: 0 auto var(--raum-4); border-radius: var(--r-xl); overflow: hidden;
                 border: 1px solid var(--line); box-shadow: var(--shadow-md); background: var(--band); }
.s3-legal-hero img { display: block; width: 100%; height: auto; }
.s3-legal-head { margin-bottom: var(--raum-3); }
.s3-legal-head h1 { font-size: var(--text-h1); line-height: 1.08; letter-spacing: -.01em; color: var(--ink); font-weight: 700; margin: 0; font-family: var(--font-display); }
.s3-legal-sub { color: var(--ink-soft); font-size: var(--text-lead); margin: .6rem 0 0; }

/* Angabenliste: Begriff und Wert, mit Linien getrennt, ab 560 px
   nebeneinander. Fuer Impressum, Pressekontakt und Stellenanzeige --
   vorher je drei Karten mit Symbolkasten und Grossbuchstaben-Etikett. */
.s3-angaben { margin: 0; border-top: 1px solid var(--line); }
.s3-angaben > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 560px) {
  .s3-angaben > div { grid-template-columns: 12rem minmax(0, 1fr); gap: 0 var(--raum-2); align-items: baseline; }
}
.s3-angaben dt { font-size: var(--text-ui); font-weight: 600; color: var(--muted); }
.s3-angaben dd { margin: 0; color: var(--ink); line-height: 1.55; }
.s3-angaben a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.s3-angaben a:hover { text-decoration: none; }
.s3-impressum { margin: 0 0 var(--raum-3); }
.s3-legal-logo { display: block; height: 30px; width: auto; margin-bottom: var(--raum-1); }
.s3-evu-h2.s3-pm-kontakt { margin-top: var(--raum-4); }
.s3-job-cta + .s3-angaben { margin-top: var(--raum-2); }

/* Stellenanzeige */
.s3-job-title { font-size: var(--text-h2); line-height: 1.18; letter-spacing: -.01em; color: var(--ink); font-weight: 600; margin: 0 0 .9rem; font-family: var(--font-display); }
.s3-job-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--raum-2); }
.s3-badge { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--text-meta); font-weight: 600;
            color: var(--gold-deep); background: var(--band); border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--line));
            border-radius: var(--r-rund); padding: .42rem .9rem; }
.s3-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }
.s3-job-cta { margin: var(--raum-3) 0; }
.s3-job-cta .s3-btn { font-size: var(--text-body); padding: .85rem 1.6rem; }

/* =========================================================================
   Energieversorger-Detailseite (Zertifikat)
   ========================================================================= */
.s3-evu-hd { display: grid; grid-template-columns: 1fr; gap: var(--raum-3); align-items: center; margin-bottom: var(--raum-3); }
@media (min-width: 780px) { .s3-evu-hd { grid-template-columns: 1.4fr .9fr; } }
.s3-evu-hd-name { font-size: var(--text-h1); line-height: 1.08; letter-spacing: -.01em; color: var(--ink); font-weight: 700; margin: 0; font-family: var(--font-display); }
.s3-evu-hd-loc { display: flex; align-items: center; gap: .4rem; color: var(--muted); margin: .7rem 0 0; font-size: var(--text-body); }
.s3-evu-hd-loc svg { width: 16px; height: 16px; }
.s3-evu-award { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.1rem; background: var(--gold); color: var(--on-gold);
                font-weight: 600; font-size: var(--text-ui); padding: .5rem 1rem; border-radius: var(--r-rund); }
.s3-evu-award svg { width: 16px; height: 16px; }
/* Weitere Jahrgaenge unter dem Abzeichen: Beleg, keine zweite Auszeichnung,
   deshalb zurueckhaltend gesetzt. */
.s3-evu-hd-jahre { margin: .5rem 0 0; font-size: var(--text-meta); color: var(--muted); }
.s3-evu-hd--solo { grid-template-columns: 1fr; }
.s3-evu-hd-score { margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line); max-width: 400px; }
.s3-evu-hd-score-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: .6rem; }
.s3-evu-hd-scorelbl { font-size: var(--text-ui); color: var(--muted); font-weight: 600; }
.s3-evu-hd-pct { font-size: var(--text-h1); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.s3-evu-hd-bar { height: 10px; border-radius: var(--r-rund); background: var(--band); overflow: hidden; }
.s3-evu-hd-bar-fill { display: block; height: 100%; border-radius: var(--r-rund); width: var(--w, 0%); background: linear-gradient(90deg, var(--gold-hell), var(--gold-2)); }
.s3-evu-hd-visual { display: flex; align-items: center; justify-content: center; }
.s3-evu-hd-seal { width: min(220px, 58vw); height: auto;
                  /* wie bei .s3-seal: zwei getrennte Funktionen statt der
                     zweiteiligen Variable, sonst ist der Filter ungueltig */
                  filter: drop-shadow(0 12px 22px rgba(46,38,26,.13)) drop-shadow(0 3px 7px rgba(46,38,26,.08)); }

/* Stammdaten als Leiste zwischen zwei Linien, ab 620 px in drei Spalten
   mit senkrechten Trennern. Vorher drei Karten -- die Hotline-Karte trug
   zwei Zeilen auf 270 px Hoehe. */
.s3-evu-facts { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: var(--raum-2);
                border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 620px) { .s3-evu-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.s3-fact { padding: 16px 0; }
.s3-fact + .s3-fact { border-top: 1px solid var(--line); }
@media (min-width: 620px) {
  .s3-fact { padding: 18px 20px; }
  .s3-fact:first-child { padding-left: 0; }
  .s3-fact + .s3-fact { border-top: 0; border-left: 1px solid var(--line); }
}
.s3-fact-lbl { font-size: var(--text-ui); font-weight: 600; color: var(--muted); margin-bottom: .5rem; }
.s3-fact-val { color: var(--ink); line-height: 1.55; }
.s3-fact-val a { color: var(--gold-deep); text-decoration: none; word-break: break-word; }
.s3-fact-val a:hover { text-decoration: underline; text-underline-offset: 2px; }
.s3-fact--logo { display: flex; align-items: center; justify-content: flex-start; }
.s3-fact--logo img { max-height: 64px; max-width: 100%; object-fit: contain; }
.s3-fact-addr { color: var(--ink); line-height: 1.5; }
.s3-fact-val a + .s3-fact-addr { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line); }

/* ---- Login (Energieversorger) ---- */
.s3-login { max-width: 520px; margin: clamp(10px, 3vw, 30px) auto 0; }
.s3-login-head { text-align: center; margin-bottom: var(--raum-2); }
.s3-login-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: var(--r-l);
               background: var(--gold); color: var(--on-gold); margin: 0 auto 1.2rem; box-shadow: var(--shadow-sm); }
.s3-login-ic svg { width: 30px; height: 30px; }
.s3-login-head h1 { font-size: var(--text-h1); line-height: 1.08; letter-spacing: -.01em; color: var(--ink); font-weight: 700; margin: 0; font-family: var(--font-display); }
.s3-login-sub { color: var(--muted); line-height: 1.6; margin: .9rem auto 0; max-width: 46ch; }
.s3-login-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
                 padding: var(--raum-2); box-shadow: var(--shadow-md); }
.s3-login-card .s3-form { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.s3-note-error { background: var(--fehler-flaeche); border: 1px solid var(--fehler-rand); color: var(--fehler); }
/* Rueckmeldungen nach dem Absenden bekommen den Fokus (s3-hinweis.js),
   damit Screenreader sie vorlesen; der Ring zeigt sehenden Nutzern, wo sie
   stehen. */
.s3-note:focus { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.s3-note-error:focus { outline-color: var(--fehler); }
.s3-note-error a, .s3-note-success a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.s3-login-reset { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); overflow: hidden; }
.s3-login-reset[open] { border-color: var(--rand-gold); }
.s3-login-reset summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
                          gap: 14px; padding: 16px 20px; font-weight: 600; color: var(--ink); }
.s3-login-reset summary::-webkit-details-marker { display: none; }
.s3-login-reset summary:hover { color: var(--gold-deep); }
.s3-login-reset[open] .s3-faq-ic { transform: rotate(180deg); color: var(--gold-deep); }
.s3-login-reset-body { padding: 0 20px 20px; }
.s3-login-reset-body p { color: var(--muted); font-size: var(--text-body); line-height: 1.6; margin: 0 0 1rem; }
.s3-login-reset-body a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.s3-login-reset-body .s3-form { background: none; border: 0; padding: 0; box-shadow: none; }
.s3-login-foot { text-align: center; margin-top: 1.8rem; color: var(--muted); font-size: var(--text-ui); }
.s3-login-foot a { color: var(--gold-deep); font-weight: 600; text-decoration: none; }
.s3-login-foot a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================================
   Fragebogen (Login-Bereich der Energieversorger)
   ========================================================================= */
.s3-survey { max-width: 860px; margin: 0 auto; }
.s3-survey-head { margin-bottom: var(--raum-2); }
.s3-survey-head h1 { font-size: var(--text-h1); line-height: 1.08; letter-spacing: -.01em; color: var(--ink); font-weight: 700; margin: 0; font-family: var(--font-display); }

/* Schritt-Navigation */
.s3-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--raum-2);
            padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-sm); }
.s3-step { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-m);
           text-decoration: none; color: var(--ink-soft); transition: background .18s var(--ease), color .18s var(--ease); }
.s3-step:hover { background: var(--band); color: var(--ink); }
.s3-step-dot { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
               background: var(--band); color: var(--muted); font-weight: 700; font-size: var(--text-ui);
               border: 1px solid var(--line); transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
.s3-step-lbl { font-size: var(--text-ui); font-weight: 600; line-height: 1.2; }
.s3-step.is-current { background: var(--gold-zart); color: var(--ink); }
.s3-step.is-current .s3-step-dot { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.s3-step--final .s3-step-dot { background: var(--ink); color: #fff; border-color: var(--ink); }
.s3-step--final.is-current .s3-step-dot { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
/* Breit: jeder Schritt so breit wie sein Name, lieber eine zweite Reihe
   als "Vertrag|skompo|nenten" -- mit fester Grundbreite von 120 px blieben
   dem Namen 54 px. Schmal: ein Schritt je Zeile, dort darf getrennt werden. */
@media (min-width: 621px) { .s3-step-lbl { white-space: nowrap; } }
@media (max-width: 620px) { .s3-step-lbl { font-size: var(--text-meta); } .s3-step { flex-basis: 100%; } }

.s3-survey-intro { background: var(--band); border: 1px solid var(--line); border-radius: var(--r-l);
                   padding: 16px 20px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 var(--raum-2); font-size: var(--text-body); max-width: 65ch; }
.s3-survey-list { display: flex; flex-direction: column; gap: 8px; }
.s3-survey-sec { font-size: var(--text-h3); font-weight: 600; color: var(--ink);
                 margin: var(--raum-2) 0 4px; padding-bottom: .5rem; border-bottom: 2px solid var(--gold); line-height: 1.18; font-family: var(--font-display); }

/* Frage-Zeile */
.s3-q { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 13px 16px; }
/* flex 1 1 14rem: die Frage nimmt den Platz, der Ja/Nein-Schalter rutscht
   unter sie, sobald beides nicht mehr nebeneinander passt -- statt ueber
   den Rand hinaus (vorher +11 px bei 320 px). */
.s3-q-txt { color: var(--ink-soft); line-height: 1.4; font-size: var(--text-body); flex: 1 1 14rem; min-width: 0; }
.s3-q--input { flex-direction: column; align-items: stretch; gap: 8px; }
.s3-q--input .s3-q-txt { font-weight: 600; color: var(--ink); }
.s3-q-field { width: 100%; padding: .7rem .9rem; border: 1px solid var(--line-feld); border-radius: var(--r-s); font: inherit; font-size: var(--text-body);
              background: var(--bg); color: var(--ink); resize: vertical;
              transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); }
.s3-q-field:focus { border-color: var(--gold-deep); background: var(--surface);
                    outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* Ja/Nein-Schalter (ohne Bootstrap-JS) */
.s3-seg { flex: none; display: inline-flex; background: var(--band); border: 1px solid var(--line); border-radius: var(--r-rund); padding: 3px; }
.s3-seg-opt { position: relative; cursor: pointer; }
.s3-seg-opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.s3-seg-opt span { display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 clamp(.6rem, 3vw, 1.2rem); border-radius: var(--r-rund); font-size: var(--text-ui); font-weight: 600;
                   color: var(--muted); transition: background .18s var(--ease), color .18s var(--ease); }
/* Gewaehlt: --gold-deep mit weisser Schrift. Das helle Gold hob sich mit
   1,92:1 kaum von der Spur ab; jetzt 4,96:1, die Schrift darauf 5,79:1. */
.s3-seg-opt input:checked + span { background: var(--gold-deep); color: #fff; box-shadow: var(--shadow-sm); }
.s3-seg-opt input:focus-visible + span { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* Nur-Anzeige-Zeilen (Schritt "Absenden") */
/* Umbrechen statt ueberlaufen: der Wert stand mit flex: none daneben, eine
   Unternehmensbeschreibung oder E-Mail-Adresse schob die Seite um bis zu
   2.000 px zur Seite. Jetzt rutscht ein langer Wert unter die Frage und
   bricht dort um; "Ja", "Nein" und kurze Angaben bleiben rechts daneben. */
.s3-chk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
          background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 16px; }
.s3-chk-txt { color: var(--ink-soft); font-size: var(--text-ui); line-height: 1.4; }
.s3-chk-val { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--ink);
              overflow-wrap: anywhere; }
.s3-chk.is-ok .s3-chk-val { color: var(--erfuellt); }
.s3-chk.is-no .s3-chk-val { color: var(--muted); }
.s3-chk.is-open { border-color: var(--fehler-rand); background: var(--fehler-flaeche); }
.s3-chk.is-open .s3-chk-val { color: var(--fehler); }

.s3-survey-intro a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.s3-survey-note { color: var(--muted); font-size: var(--text-ui); line-height: 1.6; margin: 0 0 4px; }
.s3-q-hint { font-size: var(--text-meta); color: var(--muted); line-height: 1.45; }
.s3-q-row { display: flex; gap: 10px; flex-wrap: wrap; }
.s3-q-row .s3-q-field { flex: 1 1 160px; }
.s3-q-field--plz { flex: 0 0 120px; }
.s3-q-logo { display: inline-block; align-self: flex-start; background: var(--band); border: 1px solid var(--line);
             border-radius: var(--r-m); padding: 10px 14px; margin-bottom: 4px; }
.s3-q-logo img { max-height: 70px; width: auto; display: block; }
/* Benutzerverwaltung */
.s3-users { display: flex; flex-direction: column; gap: 8px; }
.s3-user { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line);
           border-radius: var(--r-m); padding: 13px 16px; }
.s3-user.is-locked { background: var(--band); }
.s3-user-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
              background: var(--band); color: var(--gold-deep); }
.s3-user.is-locked .s3-user-ic { background: var(--surface); color: var(--muted); }
.s3-user-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.s3-user-name { font-weight: 600; color: var(--ink); line-height: 1.3; }
.s3-user-mail { font-size: var(--text-meta); color: var(--muted); word-break: break-word; }
.s3-user-hint { flex: none; font-size: var(--text-meta); color: var(--muted); font-style: italic; }
.s3-user-del { flex: none; margin: 0; }
.s3-user-delbtn { font: inherit; font-size: var(--text-ui); font-weight: 600; cursor: pointer; color: var(--muted);
                  background: none; border: 1px solid var(--line); border-radius: var(--r-s); padding: .4rem .85rem;
                  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); }
.s3-user-delbtn:hover { color: var(--fehler); border-color: var(--fehler-rand); background: var(--fehler-flaeche); }
.s3-userform-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
@media (min-width: 700px) { .s3-userform-grid { grid-template-columns: 140px 1fr 1fr; }
  .s3-userform-grid .s3-field:last-child { grid-column: 1 / -1; } }
.s3-userform .s3-field { margin-bottom: 0; }
.s3-userform .s3-field label { display: block; font-size: var(--text-ui); font-weight: 600; color: var(--ink-soft); margin-bottom: .4rem; }
.s3-userform select.s3-q-field { appearance: auto; }
@media (max-width: 560px) { .s3-user { flex-wrap: wrap; } .s3-user-hint, .s3-user-del { width: 100%; text-align: right; } }

.s3-survey-foot { margin-top: var(--raum-2); padding-top: var(--raum-1); border-top: 1px solid var(--line); }
.s3-survey-foot p { color: var(--muted); font-size: var(--text-ui); margin: 0 0 1rem; line-height: 1.6; }
.s3-survey-foot a { color: var(--gold-deep); }

/* ---- Pressemitteilung ---- */
.s3-pm-title { font-size: var(--text-h1); line-height: 1.08; letter-spacing: -.01em; color: var(--ink); font-weight: 700; margin: 0; text-wrap: balance; font-family: var(--font-display); }
.s3-pm-dateline { margin: 1rem 0 0; font-size: var(--text-meta); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.s3-pm-hero { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: var(--band);
              margin: 0 0 var(--raum-3); box-shadow: var(--shadow-sm); }
.s3-pm-hero img { display: block; width: 100%; height: auto; }
.s3-pm-lead { font-size: var(--text-lead); font-weight: 600; color: var(--ink); line-height: 1.55; }
.s3-pm-result { display: flex; align-items: center; gap: 16px; margin-top: var(--raum-2);
                background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px 20px;
                text-decoration: none; box-shadow: var(--shadow-sm);
                transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease); }
.s3-pm-result:hover { border-color: var(--rand-gold); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.s3-pm-result-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-m); background: var(--gold); color: var(--on-gold); }
.s3-pm-result-ic svg { width: 22px; height: 22px; }
.s3-pm-result-txt { flex: 1; min-width: 0; }
.s3-pm-result-lbl { display: block; font-size: var(--text-meta); font-weight: 700; color: var(--muted); }
.s3-pm-result-name { display: block; margin-top: 2px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.s3-pm-result:hover .s3-pm-result-name { color: var(--gold-deep); }
.s3-pm-result-arr { flex: none; color: var(--gold-deep); }
@media (prefers-reduced-motion: reduce) { .s3-pm-result:hover { transform: none; } }

/* Kein Ergebnis / nicht teilgenommen (< 50 %) */
.s3-evu-none { max-width: 620px; margin: clamp(30px, 8vw, 90px) auto; text-align: center; }
.s3-evu-none-ic { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: var(--r-xl);
                  background: var(--band); color: var(--muted); margin-bottom: 1.4rem; }
.s3-evu-none-ic svg { width: 34px; height: 34px; }
.s3-evu-none h1 { font-size: var(--text-h1); line-height: 1.08; letter-spacing: -.01em; color: var(--ink); font-weight: 700; margin: 0; font-family: var(--font-display); }
.s3-evu-none-lead { font-size: var(--text-lead); color: var(--ink-soft); margin: 1rem 0 0; font-weight: 400; }
.s3-evu-none-text { color: var(--muted); line-height: 1.65; margin: 1rem auto 0; max-width: 52ch; }
.s3-evu-none-cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }
.s3-evu-desc { max-width: 65ch; color: var(--ink-soft); line-height: 1.7; }
.s3-evu-desc p { margin: 0 0 1em; }
.s3-evu-desc p:last-child { margin-bottom: 0; }

.s3-evu-sec { margin-top: var(--raum-4); }
.s3-evu-h2 { font-size: var(--text-h2); letter-spacing: -.01em; color: var(--ink); font-weight: 600;
             padding-bottom: .55rem; border-bottom: 2px solid var(--gold); display: inline-block; margin: 0 0 1.3rem; line-height: 1.18; font-family: var(--font-display); }
.s3-evu-h3 { font-size: var(--text-body); color: var(--ink-soft); font-weight: 600; margin: 1.6rem 0 .8rem; font-family: var(--font-display); }

/* SVG-Donut (aus donutPie/donutPieReturn – z.B. Energiequiz) */
.donut .donut-hole { fill: var(--surface); }
.donut .donut-ring { stroke: var(--line); }
.donut .donut-segment { stroke: var(--gold); }
.donut .chart-label { fill: var(--ink); font-size: 8px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }

/* Kriterien-Raster */
/* Kriterien als Zeilen mit Linien, ab 640 px zweispaltig. Vorher je eine
   Kachel mit Rahmen -- 55 Kacheln wirkten gedraengt, obwohl es an Platz
   nicht fehlte. Das Symbol traegt den Befund und bleibt. */
.s3-kri-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--raum-3); border-top: 1px solid var(--line); }
@media (min-width: 640px) { .s3-kri-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.s3-kri { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--text-ui); }
.s3-kri-ic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.s3-kri-ic svg { width: 15px; height: 15px; }
.s3-kri.is-ok .s3-kri-ic { background: var(--erfuellt-flaeche); color: var(--erfuellt); }
.s3-kri.is-no .s3-kri-ic { background: var(--band); color: var(--muted); }
.s3-kri.is-un .s3-kri-ic { background: var(--band); color: var(--muted); }
.s3-kri-txt { color: var(--ink-soft); line-height: 1.4; flex: 1; }
.s3-kri.is-no .s3-kri-txt, .s3-kri.is-un .s3-kri-txt { color: var(--muted); }
/* Das Ergebnis in Worten. Traegt die Aussage, die vorher nur im Symbol und
   in der CSS-Klasse steckte -- lesbar fuer Screenreader und Suchmaschinen. */
.s3-kri-wort { flex: none; font-size: var(--text-ui); font-weight: 600; white-space: nowrap; }
.s3-kri.is-ok .s3-kri-wort { color: var(--erfuellt); }
.s3-kri.is-no .s3-kri-wort { color: var(--muted); }
/* Deckend statt halbtransparent (vorher 3,30:1). Die offene Frage ist bei
   einem Transparenzsiegel gerade die Information, die lesbar sein muss;
   unterschieden wird sie durch Kursive und Symbol, nicht durch Blaesse. */
.s3-kri.is-un .s3-kri-wort { color: var(--muted); font-weight: 400; font-style: italic; }
@media (max-width: 419px) { .s3-kri-wort { font-size: var(--text-meta); } }

.s3-kri-pts { flex: none; font-size: var(--text-meta); font-weight: 700; color: var(--muted); background: var(--band);
              border-radius: var(--r-rund); padding: .2rem .55rem; font-variant-numeric: tabular-nums; }
.s3-kri-pts.is-ok { color: var(--erfuellt); background: var(--erfuellt-flaeche); }
.s3-kri--txt .s3-kri-txt { color: var(--muted); font-weight: 600; }
.s3-kri-val { flex: none; max-width: 55%; color: var(--ink); font-weight: 600; text-align: right; line-height: 1.4; }

/* Ergebnis je Bereich: eine Zeile je Bereich mit Balken und Wert. Vorher
   eine Karte mit Symbolkaesten und einem Kreis, der die Gesamtzahl aus dem
   Kopf ein drittes Mal zeigte. */
.s3-score { max-width: 760px; }
.s3-score-rows { display: flex; flex-direction: column; }
.s3-score-row { display: flex; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.s3-score-cat { color: var(--ink); font-weight: 600; font-size: var(--text-body); width: 42%; flex: none; font-family: var(--font-display); }
.s3-score-meter { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.s3-score-bar { flex: 1; height: 9px; border-radius: var(--r-rund); background: var(--band); overflow: hidden; }
.s3-score-bar-fill { display: block; height: 100%; border-radius: var(--r-rund); width: var(--w, 0%); background: linear-gradient(90deg, var(--gold-hell), var(--gold-2)); }
.s3-score-pct { flex: none; min-width: 3.4em; text-align: right; font-weight: 700; font-size: var(--text-body); color: var(--ink); font-variant-numeric: tabular-nums; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .s3-score-row { flex-direction: column; align-items: stretch; gap: 9px; }
  .s3-score-cat { width: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .s3-score-bar-fill, .s3-evu-hd-bar-fill { animation: s3-bar-grow 1s var(--ease) both; }
  @keyframes s3-bar-grow { from { width: 0; } to { width: var(--w, 0%); } }
}

/* Neuigkeiten: dieselbe kompakte Zeile wie im Magazin der Startseite
   (.s3-mag-item), ab 720 px zweispaltig. */
.s3-evu-news { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--raum-3); }
@media (min-width: 720px) { .s3-evu-news { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.s3-evu-news .s3-mag-item, .s3-evu-news .s3-mag-item:first-child { padding: 15px 0; border-top: 0; border-bottom: 1px solid var(--line); }
.s3-evu-news .s3-mag-item-title { margin: 5px 0 0; }

/* Vorheriger / naechster Anbieter */
/* Schmal: die Karten untereinander ueber die volle Breite. Ab 560px
   nebeneinander, je halb so breit. Vorher max-width:48% nebeneinander auf
   jeder Breite -- lange Firmennamen ("Walter Fritz Deutsche Gesellschaft
   fuer Energieversorgung mbH") drueckten die Leiste bei 320px 128px ueber
   den Rand. */
.s3-evu-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: var(--raum-4);
              padding-top: var(--raum-2); border-top: 1px solid var(--line); background: transparent; }
.s3-evu-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line);
                border-radius: var(--r-m); background: var(--surface); color: var(--ink); text-decoration: none;
                flex: 1 1 100%; min-width: 0; min-height: 44px;
                transition: border-color .2s var(--ease), background .2s var(--ease); }
.s3-evu-nav a:hover { border-color: var(--rand-gold); background: var(--band); }
.s3-evu-nav-next { text-align: right; justify-content: flex-end; }
.s3-evu-nav a > span { min-width: 0; }
@media (min-width: 560px) { .s3-evu-nav a { flex: 0 1 calc(50% - 6px); } }
.s3-evu-nav a svg { flex: none; color: var(--gold-deep); }
.s3-evu-nav-lbl { display: block; font-size: var(--text-meta); color: var(--muted); font-weight: 700; }
.s3-evu-nav-name { display: block; font-weight: 600; color: var(--ink); font-size: var(--text-ui); margin-top: 2px; line-height: 1.35; font-family: var(--font-display); }


/* ============================================================
   Methodik-Seite
   ============================================================ */
.s3-meth-stand { margin: .9rem 0 0; font-size: var(--text-meta); font-weight: 600; color: var(--muted); }

/* Weiterfuehrende Links am Fuss der Methodik: Liste mit Linien, der Pfeil
   zeigt die Richtung. Vorher drei Karten mit Grossbuchstaben-Etikett. */
.s3-meth-weiter { display: flex; flex-direction: column; margin: var(--raum-3) 0 0; border-top: 1px solid var(--line); }
.s3-meth-weiter a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px;
                    padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600;
                    text-decoration: none; }
.s3-meth-weiter a span { flex: none; color: var(--gold-deep); transition: transform .2s var(--ease); }
.s3-meth-weiter a:hover { color: var(--gold-deep); }
.s3-meth-weiter a:hover span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .s3-meth-weiter a:hover span { transform: none; } }

/* Kurzfassung: Begriff und Satz, mit Linien getrennt; ab 720 px nebeneinander */
.s3-meth-quick-head { font-size: var(--text-h2); color: var(--ink);
                      letter-spacing: -.01em; line-height: 1.18; font-weight: 600; margin: 0 0 .8em; }
.s3-meth-kurz { margin: 0 0 var(--raum-3); border-top: 2px solid var(--ink); }
.s3-meth-kurz > div, .s3-meth-schwellen > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.s3-meth-kurz dt { font-weight: 600; color: var(--ink); line-height: 1.35; }
.s3-meth-kurz dd, .s3-meth-schwellen dd { margin: .3rem 0 0; font-size: var(--text-body); line-height: 1.6; color: var(--ink-soft); max-width: 65ch; }
@media (min-width: 720px) {
  .s3-meth-kurz > div, .s3-meth-schwellen > div { display: grid; grid-template-columns: 15rem minmax(0, 1fr);
                                                   gap: 0 var(--raum-2); align-items: baseline; }
  .s3-meth-kurz dd, .s3-meth-schwellen dd { margin: 0; }
}

/* Gewichtung der Bereiche: oben der Anteilsbalken (s3_methodik_balken),
   darunter eine Zeile je Bereich und die Summe wie unter einer Rechnung. */
.s3-meth-gewicht { margin: var(--raum-2) 0 0; }
.s3-meth-table { border-top: 2px solid var(--ink); }
.s3-meth-row { padding: 18px 0; border-bottom: 1px solid var(--line); }
.s3-meth-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.s3-meth-name { min-width: 0; margin: 0; font-size: var(--text-h3); font-weight: 600; line-height: 1.18; color: var(--ink); font-family: var(--font-display); }
.s3-meth-pts { flex: none; font-size: var(--text-h3); font-weight: 700; color: var(--ink);
               font-variant-numeric: tabular-nums; line-height: 1.18; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.s3-meth-pts span { font-size: var(--text-meta); font-weight: 600; color: var(--muted); letter-spacing: 0; }
.s3-meth-summe { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 16px;
                 padding: 14px 0 0; border-top: 2px solid var(--ink); }
/* Rundungshinweis unter der Summe, eigene Zeile ueber die volle Breite. */
.s3-meth-rund { flex: 1 0 100%; margin: 6px 0 0; font-size: var(--text-meta); line-height: 1.5; color: var(--muted); }
.s3-meth-text { margin: .4rem 0 0; font-size: var(--text-body); line-height: 1.65; color: var(--ink-soft); max-width: 65ch; }

.s3-meth-bsp { margin-top: 6px; }
.s3-meth-bsp summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
                       min-height: 44px; font-size: var(--text-ui); font-weight: 600; color: var(--gold-deep); }
.s3-meth-bsp summary::-webkit-details-marker { display: none; }
.s3-meth-bsp summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.s3-meth-bsp[open] .s3-faq-ic { transform: rotate(180deg); }
.s3-meth-bsp ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.s3-meth-bsp li { font-size: var(--text-ui); line-height: 1.35; color: var(--ink-soft); background: var(--band);
                  border-radius: var(--r-rund); padding: 6px 13px; }
.s3-meth-note { margin: var(--raum-2) 0 0; padding: var(--raum-2); background: var(--band); border-radius: var(--r-l);
                font-size: var(--text-body); line-height: 1.65; color: var(--ink-soft); max-width: 65ch; }
.s3-meth-note strong { color: var(--ink); }

/* Luft zwischen den grossen Abschnitten */
.s3-meth-kurz + .s3-prose, .s3-meth-note + .s3-prose,
.s3-meth-schwellen + .s3-prose, .s3-meth-steps + .s3-prose { margin-top: var(--raum-4); }
.s3-meth-kurz + .s3-prose > h2, .s3-meth-note + .s3-prose > h2,
.s3-meth-schwellen + .s3-prose > h2, .s3-meth-steps + .s3-prose > h2 { margin-top: 0; }

/* Schwellenwerte: Skala 0-100 mit beiden Marken, darunter die Erklaerung
   je Schwelle in aufsteigender Reihenfolge. */
.s3-skala { margin: var(--raum-1) 0 0; }
.s3-skala-band { position: relative; height: 14px; border-radius: var(--r-rund); background: var(--band); overflow: hidden; }
.s3-skala-zone { position: absolute; top: 0; bottom: 0; left: calc(var(--von) * 1%); width: calc((var(--bis) - var(--von)) * 1%); }
.s3-skala-zone + .s3-skala-zone { border-left: 2px solid var(--bg); }
.s3-skala-zone.is-kein     { background: var(--line); }
.s3-skala-zone.is-ergebnis { background: var(--gold-hell); }
.s3-skala-zone.is-siegel   { background: var(--gold); }
.s3-skala-marken { position: relative; height: 1.5em; margin-top: 8px; font-size: var(--text-meta); font-weight: 600;
                   color: var(--muted); font-variant-numeric: tabular-nums; }
.s3-skala-marken span { position: absolute; top: 0; left: calc(var(--pos) * 1%); transform: translateX(-50%); white-space: nowrap; }
.s3-skala-marken span:first-child { transform: none; }
.s3-skala-marken span:last-child { transform: translateX(-100%); }
.s3-skala-marken span:not(:first-child):not(:last-child) { color: var(--ink); font-weight: 700; }
.s3-meth-schwellen { margin: var(--raum-1) 0 0; border-top: 1px solid var(--line); }
.s3-meth-schwellen dt { font-weight: 600; color: var(--ink); line-height: 1.3; }
.s3-meth-schwelle-val { display: block; font-size: var(--text-h2); font-weight: 700; letter-spacing: -.01em; line-height: 1.18;
                        font-variant-numeric: tabular-nums; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.s3-meth-schwellen .is-siegel .s3-meth-schwelle-val { color: var(--gold-deep); }

/* Ablauf der Pruefung */
.s3-meth-steps { list-style: none; counter-reset: s3meth; margin: var(--raum-1) 0 0; padding: 0;
                 display: flex; flex-direction: column; gap: 0; }
.s3-meth-steps li { counter-increment: s3meth; position: relative; padding: 0 0 26px 56px; }
.s3-meth-steps li::before { content: counter(s3meth); position: absolute; left: 0; top: 0; width: 34px; height: 34px;
                            border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--on-gold);
                            font-size: var(--text-ui); font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.s3-meth-steps li::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: 6px; width: 2px; background: var(--line); }
.s3-meth-steps li:last-child { padding-bottom: 0; }
.s3-meth-steps li:last-child::after { display: none; }
.s3-meth-steps h3 { margin: 5px 0 .35rem; font-size: var(--text-body); font-weight: 600; color: var(--ink); font-family: var(--font-display); }
.s3-meth-steps p { margin: 0; font-size: var(--text-body); line-height: 1.65; color: var(--ink-soft); max-width: 65ch; }

/* Fassungen */
.s3-meth-versionen { margin-top: var(--raum-3); padding-top: var(--raum-2); border-top: 1px solid var(--line); }
.s3-meth-versionen h3 { margin: 0 0 .7rem; font-size: var(--text-body); font-weight: 600; color: var(--muted); font-family: var(--font-display); }
.s3-meth-versionen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.s3-meth-versionen li { font-size: var(--text-ui); line-height: 1.6; color: var(--ink-soft); }
.s3-meth-versionen strong { color: var(--ink); }
.s3-evu-methodik { margin: 18px 0 0; font-size: var(--text-ui); color: var(--muted); }
.s3-evu-methodik a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.s3-evu-methodik a:hover { text-decoration: none; }

/* ============================================================
   KI-Transparenzhinweis (Art. 50 Abs. 4 KI-VO)
   ============================================================ */

/* Hinweis direkt unter der Ueberschrift der Artikelseite, vor dem ersten
   Fliesstext -- die Angabe muss zum Zeitpunkt der ersten Exposition da sein. */
.s3-ki-hinweis { display: flex; align-items: flex-start; gap: 10px; max-width: 960px;
                 margin: 18px 0 0; padding: 12px 16px; background: var(--band);
                 border-radius: var(--r-m); font-size: var(--text-ui); line-height: 1.55; color: var(--ink-soft); }
.s3-ki-hinweis-ic { flex: none; display: grid; place-items: center; width: 20px; height: 20px;
                    margin-top: 1px; color: var(--gold-deep); }
.s3-ki-hinweis-ic svg { width: 18px; height: 18px; }
/* Verweis auf die Transparenzseite. Steht im Fluss hinter dem Hinweistext,
   nicht darunter -- er gehoert zur Aussage, nicht als eigener Absatz. */
.s3-ki-hinweis-mehr { white-space: nowrap; color: var(--gold-deep); font-weight: 600;
                      text-decoration: underline; text-underline-offset: 2px; }
.s3-ki-hinweis-mehr:hover { text-decoration: none; }
/* Redaktionell freigegeben: gleiche Aussage, etwas ruhiger gesetzt. */
.s3-ki-hinweis.is-geprueft { background: transparent; padding: 10px 0 0;
                             border-top: 1px solid var(--line); border-radius: 0; }

/* Bildhinweis unter dem Beitragsbild. Die Motive tragen die Kennzeichnung
   der Redaktion bereits eingebrannt; das hier ist die Textfassung dazu. */
.s3-article-hero-cap { margin: 8px 2px 0; font-size: var(--text-meta); line-height: 1.5;
                       color: var(--ink-soft); }