/* =========================================================================
   SEO & GEO (seit 17.09.2026) - nur fuer suchmaschinen-optimierung-seo-sea.html.
   Praefix sg- (Suchen & Gefundenwerden), damit nichts mit style.css oder
   start.css kollidiert. Farben ausschliesslich aus dem Designsystem:
   Markenblau + Ink. Keine neue Farbe erfinden.

   Bewegung: Jede Animation haengt an html.js und endet bei
   prefers-reduced-motion. Ohne JavaScript ist alles sofort sichtbar und
   lesbar - kein Inhalt haengt an einem Effekt.

   Zusammenspiel: Die Einblendungen kommen aus main.js (.auftritt -> .da),
   Parallax und Zaehler aus start.js (data-st-parallax, data-st-zahl).
   Diese Datei bringt nur Aussehen mit, kein eigenes Skript.
   ========================================================================= */

h2.sg-gross{font-size:clamp(28px,3.6vw,38px);line-height:1.15}
#inhalt section{scroll-margin-top:var(--kopf-hoehe)}
.sg-mini{font-size:var(--text-sm);color:var(--text-muted)}
.sg-weiss-mini{font-size:var(--text-sm);color:rgba(255,255,255,.6)}

/* --- Kopf -------------------------------------------------------------- */
.sg-hero{position:relative;overflow:hidden;background:var(--ink-900);color:#fff;
  padding:var(--space-9) 0 var(--space-8)}
.sg-hero-grund{position:absolute;inset:0;overflow:hidden}
.sg-hero-grund img{position:absolute;left:0;top:-15%;width:100%;height:130%;object-fit:cover;
  opacity:.22;filter:grayscale(1) contrast(1.1);will-change:transform}
.sg-hero-glanz{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(55% 60% at 88% 15%,rgba(26,123,192,.55),rgba(26,123,192,0) 70%),
    radial-gradient(50% 50% at 5% 95%,rgba(66,149,207,.28),rgba(66,149,207,0) 70%),
    linear-gradient(180deg,rgba(35,31,32,.40) 0%,rgba(35,31,32,.88) 100%)}
.js .sg-hero-glanz{animation:sg-atmen 12s ease-in-out infinite alternate}
@keyframes sg-atmen{from{opacity:.85}to{opacity:1}}

.sg-hero-innen{position:relative;z-index:1;display:grid;gap:var(--space-8);align-items:center}
@media (min-width:1060px){ .sg-hero-innen{grid-template-columns:1.08fr .92fr} }
/* Ab 1200 px bekommt die rechte Spalte mehr Platz: dort stehen die beiden Fenster
   nebeneinander, und genau darauf beruht der Vergleich frueher/heute. Unter 1200 px
   stapelt die Buehne von selbst (auto-fit), dann ist die schmalere Spalte richtig. */
@media (min-width:1200px){
  /* 540 px Mindestbreite links, sonst brechen die beiden Knoepfe untereinander
     (gemessen: sie brauchen zusammen 536 px). Was uebrig bleibt, geht an die Buehne. */
  .sg-hero-innen{grid-template-columns:minmax(540px,1.02fr) minmax(0,1fr)}
}
.sg-hero-innen > *{min-width:0}
.sg-hero .augenmerk{color:#8ec4e8}
.sg-hero h1{color:#fff;font-size:clamp(34px,5.4vw,58px);line-height:1.06;letter-spacing:-.02em;
  margin-bottom:var(--space-5);max-width:16ch}
.sg-verlauf{display:block;background:linear-gradient(90deg,#8ec4e8,var(--blue-400) 45%,#fff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sg-hero .vorspann{color:rgba(255,255,255,.84);max-width:54ch;margin-bottom:var(--space-6)}
.sg-knopf-glas{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sg-knopf-glas:hover{background:rgba(255,255,255,.16);color:#fff}

.js .sg-einblenden{opacity:0;transform:translateY(18px);animation:sg-rein .8s var(--ease-standard) forwards}
.js .sg-v1{animation-delay:.08s} .js .sg-v2{animation-delay:.2s}
.js .sg-v3{animation-delay:.32s} .js .sg-v4{animation-delay:.44s}
@keyframes sg-rein{to{opacity:1;transform:none}}

/* Zwei Fenster im Kopf: Trefferliste und KI-Antwort ---------------------- */
/* auto-fit statt fester Media-Query: die Buehne steht ab 1060 px in der schmalen
   Hero-Spalte. Zwei feste Spalten wuerden die Fenster dort auf gut 200 px druecken.
   min(230px,100%) statt 230px, damit die Regel auch unter 230 px Platz nicht bricht. */
.sg-buehne{position:relative;display:grid;gap:var(--space-4);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.sg-fenster{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 18px 40px rgba(0,0,0,.35)}
.js .sg-fenster{opacity:0;animation:sg-rein .9s var(--ease-standard) forwards}
.js .sg-fenster-a{animation-delay:.5s} .js .sg-fenster-b{animation-delay:.8s}
.sg-fenster-kopf{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);
  background:rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.14);
  font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:rgba(255,255,255,.7)}
.sg-punkte{display:flex;gap:5px;margin-right:var(--space-2)}
.sg-punkte i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28)}
.sg-fenster-leib{padding:var(--space-4)}
.sg-suchzeile{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-pill);background:rgba(255,255,255,.12);margin-bottom:var(--space-4);
  font-size:var(--text-sm);color:#fff}
.sg-suchzeile svg{width:14px;height:14px;flex-shrink:0;opacity:.7}
.sg-treffer{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
.sg-treffer li{display:grid;gap:5px}
.sg-treffer b{font-size:var(--text-sm);color:#8ec4e8;font-weight:var(--weight-semibold)}
.sg-treffer span{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.22)}
.sg-treffer span + span{width:72%}
.sg-treffer li.sg-unser b{color:#fff}
.sg-treffer li.sg-unser span{background:rgba(255,255,255,.42)}
.js .sg-treffer li{opacity:.55}
.js .sg-treffer li.sg-unser{opacity:1}

.sg-antwort p{font-size:var(--text-sm);color:rgba(255,255,255,.88);margin:0 0 var(--space-4)}
.sg-antwort mark{background:rgba(26,123,192,.45);color:#fff;padding:1px 4px;border-radius:3px}
.sg-quellen{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none}
.sg-quellen li{font-size:var(--text-xs);padding:3px 9px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.75)}
.sg-quellen li.sg-unser{background:var(--blue-500);color:#fff}
.sg-cursor{display:inline-block;width:2px;height:1em;background:#8ec4e8;vertical-align:-2px;margin-left:2px}
.js .sg-cursor{animation:sg-blinken 1.1s steps(2,start) infinite}
@keyframes sg-blinken{to{visibility:hidden}}

/* --- Laufband mit Schlagworten ---------------------------------------- */
.sg-band{background:var(--blue-500);color:#fff;overflow:hidden;padding:var(--space-4) 0}
.sg-band-spur{display:flex;width:max-content}
.sg-band ul{display:flex;list-style:none;margin:0;padding:0;flex-shrink:0}
.sg-band li{font-size:var(--text-body-lg);font-weight:var(--weight-semibold);white-space:nowrap;
  padding:0 var(--space-5);display:flex;align-items:center;gap:var(--space-5)}
.sg-band li::after{content:"";width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}
.js .sg-band-spur{animation:sg-laufen 44s linear infinite}
@keyframes sg-laufen{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .sg-band-spur{width:auto;flex-wrap:wrap;justify-content:center}
  .sg-band ul{flex-wrap:wrap;justify-content:center}
  .sg-band ul[aria-hidden]{display:none}
}

/* --- Zweispalter -------------------------------------------------------
   align-items:start, nicht center: die beiden Spalten tragen unterschiedlich
   lange Texte. Zentriert beginnt die kuerzere Spalte auf halber Hoehe, und die
   Ueberschriften stehen nicht mehr nebeneinander. */
.sg-zwei{display:grid;gap:var(--space-8);align-items:start}
.sg-zwei > *{min-width:0}
@media (min-width:1080px){
  .sg-zwei{grid-template-columns:1fr 1fr;gap:var(--space-9)}
  .sg-zwei-gedreht > :first-child{order:2}
}

/* --- Die zwei Erklaerkarten (SEO / GEO) -------------------------------- */
.sg-erklaerung{display:grid;gap:var(--space-6);margin-top:var(--space-7)}
@media (min-width:900px){ .sg-erklaerung{grid-template-columns:1fr 1fr} }
.sg-karte{position:relative;background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-7);box-shadow:var(--shadow-sm);
  transition:transform var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard);
  min-width:0}
.sg-karte:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.sg-karte h3{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-h3)}
.sg-marke{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:12px;background:var(--blue-500);color:#fff;flex-shrink:0}
.sg-marke svg{width:24px;height:24px}
.sg-marke-ink{background:var(--ink-900)}
.sg-karte .sg-buchstaben{font-size:var(--text-xs);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:var(--space-2)}
.sg-bild-erklaerung{margin:var(--space-5) 0;background:var(--surface-alt);border-radius:var(--radius-md);
  padding:var(--space-4)}
.sg-bild-erklaerung svg{width:100%;height:auto;display:block}
.sg-kindlich{border-left:3px solid var(--blue-500);padding-left:var(--space-4);
  font-size:var(--text-body-lg);color:var(--ink-700);margin:0}
.sg-kindlich b{color:var(--ink-900)}

/* --- Gegenueberstellung als Tabelle ------------------------------------ */
.sg-tafel{width:100%;border-collapse:collapse;margin-top:var(--space-6);font-size:var(--text-base)}
.sg-tafel th,.sg-tafel td{text-align:left;padding:var(--space-4);border-bottom:1px solid var(--border-subtle);
  vertical-align:top}
.sg-tafel thead th{font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:var(--text-muted);font-weight:var(--weight-semibold);border-bottom:2px solid var(--border-strong)}
.sg-tafel tbody th{font-weight:var(--weight-semibold);width:26%}
@media (max-width:700px){
  .sg-tafel,.sg-tafel tbody,.sg-tafel tr,.sg-tafel td,.sg-tafel th{display:block;width:auto}
  .sg-tafel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sg-tafel tr{border:1px solid var(--border-subtle);border-radius:var(--radius-md);
    margin-bottom:var(--space-4);padding:var(--space-2)}
  /* Die 26 % aus der Tabellenansicht muessen hier zurueckgenommen werden, sonst
     bleibt die Zeilenueberschrift ein 26-%-Streifen und bricht Wort fuer Wort um
     ("Wer soll / Sie / finden?", gemessen bei 390 px). */
  .sg-tafel tbody th{width:auto}
  .sg-tafel td,.sg-tafel th{border-bottom:0;padding:var(--space-2) var(--space-3)}
  .sg-tafel td::before{content:attr(data-spalte);display:block;font-size:var(--text-xs);
    letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);
    margin-bottom:2px}
}

/* --- Kacheln mit Symbolen ---------------------------------------------- */
.sg-kacheln{display:grid;gap:var(--space-5);margin-top:var(--space-7)}
@media (min-width:640px){ .sg-kacheln{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .sg-kacheln{grid-template-columns:repeat(3,1fr)} }
.sg-kachel{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-6);min-width:0;
  transition:transform var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard)}
.sg-kachel:hover{transform:translateY(-4px);border-color:var(--blue-100);box-shadow:var(--shadow-md)}
.sg-kachel h3{font-size:var(--text-h4);margin-bottom:var(--space-2)}
.sg-kachel p{font-size:var(--text-base);color:var(--ink-700);margin:0}
.sg-kachel-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;background:var(--blue-50);color:var(--blue-600);margin-bottom:var(--space-4)}
.sg-kachel-icon svg{width:22px;height:22px}
.sg-kachel-ink .sg-kachel-icon{background:var(--ink-900);color:#fff}

/* Ampel: was belegt ist, was Vermutung ist ------------------------------- */
.sg-ampel{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;font-weight:var(--weight-semibold);
  margin-bottom:var(--space-3);color:var(--text-muted)}
.sg-ampel::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--border-strong)}
.sg-ampel-belegt::before{background:var(--blue-500)}
.sg-ampel-belegt{color:var(--blue-700)}
.sg-ampel-offen::before{background:var(--ink-300)}

/* --- Schaubild: Suche frueher / heute ---------------------------------- */
.sg-schaubild{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm)}
.sg-schaubild svg{width:100%;height:auto;display:block}
.js .sg-schaubild .sg-fliesst{stroke-dasharray:6 8;animation:sg-fliessen 1.6s linear infinite}
@keyframes sg-fliessen{to{stroke-dashoffset:-28}}
.js .sg-schaubild .sg-pulst{transform-origin:center;animation:sg-pulsen 3s ease-in-out infinite}
@keyframes sg-pulsen{0%,100%{opacity:.35}50%{opacity:1}}

/* --- Band mit Parallax ------------------------------------------------- */
.sg-parallax{position:relative;overflow:hidden;background:var(--ink-900);color:#fff;
  padding:var(--space-10) 0}
.sg-parallax-grund{position:absolute;inset:0;overflow:hidden}
.sg-parallax-grund img{position:absolute;left:0;top:-20%;width:100%;height:140%;object-fit:cover;
  opacity:.30;filter:grayscale(1);will-change:transform}
.sg-parallax::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(35,31,32,.86),rgba(18,85,127,.78))}
.sg-parallax .huelle{position:relative;z-index:1}
.sg-parallax h2,.sg-parallax p{color:#fff}
.sg-parallax .vorspann{color:rgba(255,255,255,.86)}

/* --- Fallstudie eoda ---------------------------------------------------- */
.sg-fall{background:linear-gradient(180deg,#fff 0%,var(--blue-50) 100%)}
.sg-fall-kopf{display:grid;gap:var(--space-6);align-items:end;margin-bottom:var(--space-7)}
@media (min-width:900px){ .sg-fall-kopf{grid-template-columns:1.4fr .6fr} }
.sg-fall-bild{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);
  max-width:500px;width:100%}
.sg-fall-bild img{width:100%;height:auto}

.sg-zahlen{display:grid;gap:var(--space-4);margin:var(--space-7) 0}
@media (min-width:520px){ .sg-zahlen{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .sg-zahlen{grid-template-columns:repeat(4,1fr)} }
.sg-zahlfeld{background:var(--surface-card);border:1px solid var(--blue-100);
  border-radius:var(--radius-lg);padding:var(--space-5);text-align:center;min-width:0}
.sg-zahlwert{display:block;font-size:clamp(30px,4.4vw,42px);font-weight:var(--weight-semibold);
  line-height:1;color:var(--blue-600);font-variant-numeric:tabular-nums;margin-bottom:var(--space-2)}
.sg-zahlwert small{font-size:.55em;margin-left:2px}
.sg-zahltext{font-size:var(--text-sm);color:var(--ink-700);display:block}

/* Nachsendeauftrag: drei Zustaende einer Adresse */
.sg-umzug{display:grid;gap:var(--space-5);margin-top:var(--space-6)}
@media (min-width:860px){ .sg-umzug{grid-template-columns:repeat(3,1fr)} }
.sg-adresse{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-5);min-width:0;position:relative;overflow:hidden}
.sg-adresse code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--text-sm);background:var(--gray-50);border-radius:var(--radius-sm);
  padding:var(--space-2) var(--space-3);margin-bottom:var(--space-3);overflow-wrap:anywhere}
.sg-status{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);
  font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);border-radius:var(--radius-pill);
  padding:3px 10px;margin-bottom:var(--space-3)}
.sg-status-gut{background:var(--blue-50);color:var(--blue-700)}
.sg-status-schlecht{background:#fdecec;color:#a02c2c}
.sg-status-halb{background:var(--gray-100);color:var(--ink-700)}
.sg-adresse p{font-size:var(--text-sm);color:var(--ink-700);margin:0}
.sg-adresse::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--border-strong)}
.sg-adresse-gut::after{background:var(--blue-500)}
.sg-adresse-schlecht::after{background:#c0392b}

.sg-befunde{list-style:none;margin:var(--space-6) 0 0;padding:0;display:grid;gap:var(--space-3)}
.sg-befunde li{display:flex;gap:var(--space-3);align-items:flex-start;background:var(--surface-card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-4);
  font-size:var(--text-base)}
.sg-befunde svg{width:20px;height:20px;flex-shrink:0;color:var(--blue-500);margin-top:2px}
.sg-befunde b{font-weight:var(--weight-semibold)}

/* --- Fragen und Antworten ---------------------------------------------- */
.sg-fragen{margin-top:var(--space-6);border-top:1px solid var(--border-subtle)}
.sg-frage{border-bottom:1px solid var(--border-subtle)}
.sg-frage summary{cursor:pointer;list-style:none;padding:var(--space-5) var(--space-7) var(--space-5) 0;
  font-size:var(--text-h4);font-weight:var(--weight-semibold);color:var(--ink-900);position:relative}
.sg-frage summary::-webkit-details-marker{display:none}
.sg-frage summary::after{content:"";position:absolute;right:var(--space-2);top:50%;width:10px;height:10px;
  margin-top:-7px;border-right:2px solid var(--blue-500);border-bottom:2px solid var(--blue-500);
  transform:rotate(45deg);transition:transform var(--duration-base) var(--ease-standard)}
.sg-frage[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.sg-frage summary:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px;border-radius:var(--radius-sm)}
.sg-frage-text{padding:0 0 var(--space-5);color:var(--ink-700);max-width:70ch}
.sg-frage-text p:last-child{margin-bottom:0}

/* --- Schlagwortwolke ---------------------------------------------------- */
.sg-wolke{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6);justify-content:center}
.sg-wolke span{display:inline-block;padding:6px 14px;border-radius:var(--radius-pill);
  background:var(--surface-card);border:1px solid var(--border-subtle);font-size:var(--text-sm);
  color:var(--ink-700)}
.sg-wolke span.sg-dick{background:var(--blue-500);border-color:var(--blue-500);color:#fff;
  font-weight:var(--weight-semibold)}
.sg-wolke span.sg-halb{background:var(--blue-50);border-color:var(--blue-100);color:var(--blue-700)}

/* --- Schritte ----------------------------------------------------------- */
.sg-schritte{display:grid;gap:var(--space-6);margin-top:var(--space-7);counter-reset:sg}
@media (min-width:900px){ .sg-schritte{grid-template-columns:repeat(3,1fr)} }
.sg-schritt{position:relative;padding-top:var(--space-6);min-width:0}
.sg-schritt::before{counter-increment:sg;content:counter(sg);position:absolute;top:0;left:0;
  font-size:var(--text-h2);font-weight:var(--weight-semibold);color:var(--blue-100);line-height:1}
.sg-schritt h3{font-size:var(--text-h4)}
.sg-schritt p{font-size:var(--text-base);color:var(--ink-700)}

/* --- Selbstversuch-Kasten ----------------------------------------------- */
.sg-probe{background:var(--ink-900);color:#fff;border-radius:var(--radius-lg);padding:var(--space-7);
  margin-top:var(--space-7)}
.sg-probe h3{color:#fff}
.sg-probe p{color:rgba(255,255,255,.82)}
.sg-probe ol{margin:0;padding-left:1.3em;color:rgba(255,255,255,.82);font-size:var(--text-base)}
.sg-probe li{margin-bottom:var(--space-2)}
.sg-probe li::marker{color:#8ec4e8;font-weight:var(--weight-semibold)}

/* Zahlenfelder: der Zaehler in start.js schreibt nur in das Element mit data-st-zahl,
   ein Zusatz wie "rund" muss deshalb daneben stehen und darf nicht mitgezaehlt werden. */
.sg-zahlwert .sg-ca{font-size:.42em;font-weight:var(--weight-regular);color:var(--ink-500);
  margin-right:4px;vertical-align:.45em;letter-spacing:0}

/* --- Belegte Zahlen auf dunklem Grund ---------------------------------- */
.sg-belege{display:grid;gap:var(--space-5);margin-top:var(--space-8);padding-top:var(--space-7);
  border-top:1px solid rgba(255,255,255,.18);text-align:left}
@media (min-width:640px){ .sg-belege{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .sg-belege{grid-template-columns:repeat(4,1fr)} }
.sg-beleg{min-width:0}
.sg-beleg b{display:block;font-size:clamp(26px,3.4vw,34px);font-weight:var(--weight-semibold);
  line-height:1.1;color:#fff;margin-bottom:var(--space-2);font-variant-numeric:tabular-nums}
.sg-beleg span{display:block;font-size:var(--text-sm);color:rgba(255,255,255,.82)}
.sg-beleg cite{display:block;font-style:normal;font-size:var(--text-xs);color:rgba(255,255,255,.55);
  margin-top:var(--space-2)}
.sg-schluss{margin-top:var(--space-7);font-size:var(--text-body-lg);color:#fff;
  border-left:3px solid var(--blue-400);padding-left:var(--space-4);text-align:left}

/* --- Zitat eines Anbieters --------------------------------------------- */
.sg-zitat{margin:var(--space-7) 0 0;padding:var(--space-6);background:var(--surface-card);
  border:1px solid var(--border-subtle);border-left:4px solid var(--blue-500);
  border-radius:var(--radius-md)}
.sg-zitat p{font-size:var(--text-lead);line-height:var(--leading-snug);color:var(--ink-900);
  margin-bottom:var(--space-3)}
.sg-zitat footer{font-size:var(--text-sm);color:var(--text-muted)}