/* Fliesstext-Links (.tl) — interne Verlinkung der Leistungsseiten.
   Der Inline-Style setzt `#lx-sg a{color:inherit;text-decoration:none}` und laedt
   NACH dieser Datei; die Klasse hebt die Spezifitaet, damit sie trotzdem gewinnt.
   Bewusst dezent: Textfarbe bleibt, nur die Unterstreichung traegt die CI-Farbe —
   erst beim Hover faerbt sich der Text. So bleibt der Lesefluss ruhig. */
#lx-sg a.tl{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:rgba(22,123,252,.42);
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  transition:color .18s ease,text-decoration-color .18s ease;
}
#lx-sg a.tl:hover,#lx-sg a.tl:focus-visible{
  color:var(--blue);
  text-decoration-color:var(--blue);
}
#lx-sg a.tl:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px;}
/* Auf dunklem Grund (Ergebnis-Balken, Fussbereich) waere Blau zu dunkel. */
#lx-sg .ergebnis a.tl,#lx-sg .signoff a.tl{
  text-decoration-color:rgba(255,255,255,.5);
}
#lx-sg .ergebnis a.tl:hover,#lx-sg .signoff a.tl:hover{
  color:#fff;text-decoration-color:#fff;
}

/* --gut: Gutter-Token fuer den Duell-Scroller aus mobil.css (dort genutzt, nie definiert).
   Werte an die wrap-Paddings angeglichen. */
#lx-sg{--gut:20px;}
@media (max-width:520px){#lx-sg{--gut:16px;}}
@media (max-width:400px){#lx-sg{--gut:14px;}}

/* Responsive-Stufen unterhalb 640px.

   AUFGERAEUMT 06.08.2026: Alles, was _design/mobil.css (laedt danach, Selektoren
   mit `html #lx-sg` = hoehere Spezifitaet) ohnehin ueberschreibt, wurde entfernt —
   von Codex und Kimi unabhaengig als vollstaendig wirkungslos bestaetigt.
   Betraf: .stats-grid/.stat/.stat .big/.u, .steps-body(+h2), .panel-photo(+.grad/.ticker),
   die komplette .step-Familie, .pass-card/.pass-figure .big/.pass-meta, .ergebnis(+h3),
   .wig4-card(+--accent), .wig4-term font-size sowie .cta-box (Markup seit 03.08. entfernt).
   Wer hier etwas vermisst: es steht in mobil.css und wird DORT gepflegt.

   Was hier steht, ist geprueft AKTIV — mobil.css fasst diese Properties nicht an. */

@media (max-width:520px){
  #lx-sg .wrap,#lx-sg .wrap-narrow{padding-inline:16px;}

  /* Leistungszeilen: Marker schmaler, Überschrift darf umbrechen statt zu schieben */
  #lx-sg .svc-row{grid-template-columns:38px minmax(0,1fr);gap:0 12px;}
  #lx-sg .svc-row .mk{font-size:24px;}
  /* Bei exakt 321px lief die Überschrift um 1px über — die Zeile darf brechen. */
  #lx-sg .boutique-head .h{font-size:clamp(26px,8vw,42px);overflow-wrap:break-word;hyphens:auto;}
  #lx-sg .svc-row .stt{font-size:clamp(30px,8.4vw,42px);overflow-wrap:break-word;hyphens:auto;}
  #lx-sg .svc-row .smt{font-size:14px;margin-top:10px;}

  /* Mehrspaltige Container gegen min-content-Overflow absichern.
     (.kosten-inner/.case-grid/.ergebnis/.duell-row hier entfernt — mobil.css setzt
     sie auf block/flex, das Grid waere wirkungslos.) */
  #lx-sg .panel-steps,#lx-sg .vergleich .lead{grid-template-columns:minmax(0,1fr);}

  #lx-sg .vergleich h2{font-size:34px;}

  /* Hero: Der Inhalt lag absolut in einem Kasten fester Höhe und ist bei 320px
     oben herausgelaufen — die H1 war nicht mehr sichtbar und der Fließtext lag
     über dem Eyebrow. Auf schmalen Viewports steht er deshalb im normalen Fluss
     und die Höhe richtet sich nach dem Inhalt. Das Bild ist ein background-image
     und bleibt davon unberührt. */
  #lx-sg .hero-img{height:auto;}
  #lx-sg .hero-body{position:relative;left:auto;right:auto;bottom:auto;padding:174px 18px 26px;}
  #lx-sg .hero-corners{top:18px;left:18px;right:18px;gap:10px;}
  #lx-sg .hero-body .eyebrow{margin-bottom:14px;}
  #lx-sg .hero-h1{font-size:clamp(44px,13.5vw,62px);}
  #lx-sg .hero-lead{margin-top:18px;font-size:16px;line-height:1.5;}
  #lx-sg .hero-cta{margin-top:22px;gap:12px;}

  /* Die Karten schrumpfen, die 26px-Begriffe nicht: „Unkostenpauschale" ist ein
     einzelnes Wort und lief bei 320px um 71px über seine Box hinaus, wo es vom
     Kartenrand abgeschnitten wurde. Silbentrennung (lang="de" ist gesetzt) plus
     harter Notumbruch für den Fall, dass die Trennung nicht greift.
     (font-size hier entfernt — mobil.css setzt sie per clamp.) */
  #lx-sg .wig-v4 .wig4-term{hyphens:auto;overflow-wrap:break-word;}
  #lx-sg .wig-v4 .wig4-tag,#lx-sg .wig-v4 .wig4-desc{hyphens:auto;overflow-wrap:break-word;}
}

@media (max-width:400px){
  #lx-sg .wrap,#lx-sg .wrap-narrow{padding-inline:14px;}
  #lx-sg .svc-row{grid-template-columns:30px minmax(0,1fr);}
  #lx-sg .svc-row .stt{font-size:clamp(27px,8vw,34px);}
  #lx-sg .hero-body{padding:160px 14px 22px;}
  /* Beide Hero-Badges brauchten bei 320px zusammen 268px, verfügbar waren 248 —
     das rechte wurde vom overflow:hidden des Heros abgeschnitten. Enger gesetzt
     statt umgebrochen, damit die Kopfzeile eine Zeile bleibt. */
  #lx-sg .hero-corners{top:14px;left:14px;right:14px;gap:8px;}
  #lx-sg .hero-corners .eyebrow{font-size:10px;letter-spacing:.1em;padding:6px 9px;}
}