/*
 * CNP-67: Eigene Regeln der Startseite.
 * styles.css ist fertig gebautes Tailwind ohne Build-Schritt auf dem Server; neue
 * Utility-Klassen existieren dort nicht (FK-13). Alles Neue steht deshalb hier, mit Vorsilbe st-.
 */
:root {
    --st-text: #111827;
    --st-text-2: #4b5563;
    --st-rand: #e5e7eb;
    --st-flaeche: #f9fafb;
    --st-blau: #0a6fd4;
    --st-blau-dunkel: #075fb0;
    --st-gruen: #15803d;
    --st-max: 72rem;
}

.st-huelle { max-width: var(--st-max); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .st-huelle { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .st-huelle { padding: 0 2rem; } }

.st-abschnitt { padding: 4rem 0; background: #fff; }
/* UX-5 (09.10.): Sprungziele nicht unter dem fixen Kopf verstecken. */
.st-abschnitt[id] { scroll-margin-top: 5rem; }
.st-abschnitt--grau { background: var(--st-flaeche); }
@media (min-width: 768px) { .st-abschnitt { padding: 6rem 0; } }

.st-h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.2; font-weight: 700; color: var(--st-text); margin: 0 0 1rem; }
.st-h3 { font-size: 1.25rem; line-height: 1.35; font-weight: 600; color: var(--st-text); margin: 0 0 .5rem; }
.st-text { font-size: 1.0625rem; line-height: 1.65; color: var(--st-text-2); max-width: 68ch; margin: 0 0 1rem; }
.st-klein { font-size: .95rem; line-height: 1.55; color: var(--st-text-2); }
.st-zentriert { text-align: center; margin-left: auto; margin-right: auto; }

/* Startbild, seitenfüllend (AC-1) */
.st-start { position: relative; min-height: calc(100svh - 4rem); display: flex; align-items: flex-end; background: #a99e8e; overflow: hidden; color: #fff; }
@media (min-width: 768px) { .st-start { min-height: calc(100svh - 5rem); align-items: center; } }
.st-start__bild, .st-start__bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-start__bild img { object-fit: cover; object-position: 70% center; }
.st-start::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 23, 42, .82) 0%, rgba(15, 23, 42, .68) 45%, rgba(15, 23, 42, .25) 100%); }
@media (max-width: 767px) { .st-start::after { background: linear-gradient(0deg, rgba(15, 23, 42, .9) 0%, rgba(15, 23, 42, .75) 60%, rgba(15, 23, 42, .35) 100%); } }
.st-start__inhalt { position: relative; z-index: 1; width: 100%; padding: 3rem 0; }
.st-start__kasten { max-width: 40rem; }
.st-start h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.5rem); line-height: 1.1; font-weight: 800; margin: 0 0 1.25rem; color: #fff; }
.st-start__answer { font-size: 1.125rem; line-height: 1.6; color: #f3f4f6; margin: 0 0 2rem; }
.st-start__zeile { font-size: .95rem; color: #e5e7eb; margin: 1rem 0 0; }

/* Knöpfe (Touch-Ziel >= 44 px) */
.st-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .75rem 1.5rem; border-radius: .75rem; font-weight: 600; font-size: 1.0625rem; text-decoration: none; background: var(--st-blau); color: #fff; transition: background-color .15s; }
.st-knopf:hover { background: var(--st-blau-dunkel); }
/* UX-1 (09.10.): Fokus auf hellem Grund mit 6,42:1, auf dunklem Grund (Startbild, Abschluss) weiß. */
.st-knopf:focus-visible, .st-link:focus-visible, .st-faq summary:focus-visible { outline: 3px solid var(--st-blau-dunkel); outline-offset: 3px; }
.st-start :focus-visible, .st-abschluss :focus-visible { outline-color: #fff; }
.st-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.st-link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; min-height: 2.75rem; display: inline-flex; align-items: center; }
.st-link--blau { color: var(--st-blau-dunkel); }

/* Karten */
.st-raster { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .st-raster--3 { grid-template-columns: repeat(3, 1fr); } .st-raster--2 { grid-template-columns: repeat(2, 1fr); } }
.st-karte { background: #fff; border: 1px solid var(--st-rand); border-radius: 1rem; padding: 1.5rem; }
.st-abschnitt--grau .st-karte { box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }

/* Text neben Bild */
.st-zweispaltig { display: grid; gap: 2.5rem; align-items: center; }
/* CNP-67 (09.10.): Grid-Kinder dürfen schmaler werden als ihr Inhalt, sonst zieht die Rechentabelle (min-width 30rem) bei 375 px die Seite breit. */
.st-zweispaltig > *, .st-raster > * { min-width: 0; }
@media (min-width: 1024px) { .st-zweispaltig { grid-template-columns: 1fr 1fr; gap: 4rem; } .st-zweispaltig--gedreht > :first-child { order: 2; } }
.st-bild { width: 100%; height: auto; border-radius: 1rem; display: block; background: #e5e7eb; }
.st-bildschirm { width: 100%; height: auto; display: block; border-radius: .75rem; border: 1px solid var(--st-rand); box-shadow: 0 10px 30px rgba(15, 23, 42, .12); background: #f3f4f6; }
.st-bildunterschrift { font-size: .875rem; color: var(--st-text-2); margin-top: .75rem; }

/* Rechenbeispiel K-1 */
.st-tabelle-huelle { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--st-rand); border-radius: .75rem; background: #fff; }
.st-tabelle { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 30rem; }
.st-tabelle caption { text-align: left; padding: 1rem 1rem 0; font-weight: 600; color: var(--st-text); }
.st-tabelle th, .st-tabelle td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--st-rand); }
.st-tabelle thead th { font-size: .875rem; color: var(--st-text-2); font-weight: 600; }
.st-tabelle td.st-hervor { color: var(--st-gruen); font-weight: 700; }
.st-tabelle tr:last-child th, .st-tabelle tr:last-child td { border-bottom: 0; }

/* Listen */
.st-liste { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .75rem; }
.st-liste li { position: relative; padding-left: 1.75rem; color: var(--st-text-2); line-height: 1.6; font-size: 1.0625rem; }
.st-liste li::before { content: ""; position: absolute; left: 0; top: .55rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--st-blau); }
.st-schritte { counter-reset: schritt; list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1rem; }
.st-schritte li { counter-increment: schritt; position: relative; padding: 1rem 1rem 1rem 3.75rem; background: #fff; border: 1px solid var(--st-rand); border-radius: .75rem; color: var(--st-text-2); line-height: 1.55; }
.st-schritte li::before { content: counter(schritt); position: absolute; left: 1rem; top: 1rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--st-blau); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.st-schritte strong, .st-liste strong { color: var(--st-text); }

/* Preis */
.st-preis { max-width: 28rem; margin: 2rem auto 0; text-align: left; }
.st-preis__betrag { font-size: 2.5rem; font-weight: 800; color: var(--st-text); line-height: 1; }
.st-preis__name { font-size: 1.25rem; font-weight: 700; color: var(--st-text); margin: 0 0 1rem; }

/* FAQ */
.st-faq { max-width: 48rem; margin: 2rem auto 0; display: grid; gap: .75rem; }
.st-faq details { background: #fff; border: 1px solid var(--st-rand); border-radius: .75rem; }
.st-faq summary { cursor: pointer; padding: 1rem 1.25rem; min-height: 2.75rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--st-blau); flex-shrink: 0; }
.st-faq details[open] summary::after { content: "\2212"; }
.st-faq h3 { font-size: 1.0625rem; font-weight: 600; margin: 0; color: var(--st-text); }
.st-faq p { padding: 0 1.25rem 1.25rem; margin: 0; color: var(--st-text-2); line-height: 1.65; }

/* Abschluss */
.st-abschluss { background: linear-gradient(135deg, #0a6fd4, #0d4d8f); color: #fff; text-align: center; }
.st-abschluss .st-h2 { color: #fff; }
.st-abschluss .st-text { color: #e0f2fe; margin-left: auto; margin-right: auto; }
.st-abschluss .st-knopf { background: #fff; color: var(--st-blau-dunkel); }
.st-abschluss .st-knopf:hover { background: #e0f2fe; }

/* CNP-26 (10.10.2026): Grafik „Ein Quartal, ein Paket“ statt Stockfoto im Abschnitt K-1. Inline-SVG, keine neue Utility-Klasse. */
.st-grafik { margin: 0; }
.st-grafik svg { width: 100%; height: auto; display: block; max-width: 32rem; margin: 0 auto; }