/* Zählerfix – „Ablesekarte“: helles Papier, App-Grün und Bernstein aus dem App-Icon, schmale DIN-artige
   Überschriften, nummerierte Zeilen wie in einem Ableseprotokoll. Keine Animationen (RULES.md §2). */
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root {
    --teal: #80CBC4; --teal-deep: #0B2723; --mint: #A7F2E4; --amber: #F5BF48; --amber-text: #F5BF48;
    --bg: #101413; --card: #1A201E; --ink: #E0E3E1; --muted: #BEC9C5; --line: #34403C;
  }
}

body { background: var(--bg); color: var(--ink); font: 1.0625rem/1.65 var(--font-body);
       font-variant-numeric: tabular-nums; display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; letter-spacing: .01em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin: 0 0 1.25rem; }
a { color: var(--teal); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* Kopf: weiße Leiste mit grüner Unterkante */
.kit-header { background: var(--card); border-bottom: 3px solid var(--teal); }
.kit-header .kit-wrap { min-height: 4rem; }
.kit-brand { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--ink); }
.kit-brand img { width: 2rem; height: 2rem; border-radius: .5rem; }
.kit-nav a { color: var(--muted); text-decoration: none; font-weight: 600; padding-block: .35rem;
             border-bottom: 2px solid transparent; }
.kit-nav a:hover { color: var(--teal); border-bottom-color: var(--amber); }

/* Abschnitte */
.s { padding-block: 4rem; }
.s-intro { color: var(--muted); margin-top: -.5rem; margin-bottom: 2rem; }

/* Start: grünes Band, Text links, Zählerkasten rechts */
.s-hero.v-band { background: var(--teal); color: #FFFFFF; padding-block: 3.5rem 4rem; }
.s-hero.v-band > * { margin-inline: auto; }
.s-hero .s-media img { width: 100%; max-width: 30rem; margin-inline: auto; }
@media (min-width: 52rem) {
  .s-hero.v-band { display: grid; align-items: center; column-gap: 3rem;
                   grid-template-columns: 1fr minmax(0, 36rem) minmax(0, 28rem) 1fr; }
  .s-hero.v-band > * { max-width: none; margin-inline: 0; }
  .s-hero .s-body { grid-column: 2; padding-right: 0; }
  .s-hero .s-media { grid-column: 3; padding-left: 0; }
}
@media (max-width: 51.99rem) { .s-hero .s-media { margin-top: 2.5rem; } }
.s-eyebrow { display: inline-block; margin: 0 0 1rem; padding: .2rem .65rem; background: var(--teal-deep);
             color: var(--mint); font-size: .9rem; font-weight: 600; letter-spacing: .03em; }
.s-hero h1 { font-size: clamp(2.2rem, 5.2vw, 3.5rem); margin: 0 0 1.25rem; }
.s-lead { font-size: 1.2rem; margin: 0 0 2rem; max-width: 34rem; }
.s-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.kit-btn { padding: .8rem 1.35rem; font-weight: 700; border-radius: .25rem; border: 2px solid transparent; }
.kit-btn-primary { background: var(--amber); color: #2B1D00; }
.kit-btn-secondary { border-color: currentColor; color: inherit; }
.kit-btn-primary:hover { background: #FFFFFF; }
.kit-btn-secondary:hover { background: rgba(255, 255, 255, .12); }

/* Funktionen: nummerierte Zeilen wie im Ableseprotokoll */
.s-features.v-ledger .s-items { counter-reset: zeile; margin-block: 0; }
.s-features.v-ledger li:first-child { border-top: 2px solid var(--ink); }
.s-features.v-ledger li { counter-increment: zeile; display: grid; gap: .25rem 1.5rem; padding: 1.4rem 0;
                          border-bottom: 1px solid var(--line); grid-template-columns: 3rem 1fr; }
.s-features.v-ledger li::before { content: counter(zeile, decimal-leading-zero); grid-row: span 2;
                                  font: 700 1.5rem/1.2 var(--font-head); color: var(--amber-text); }
.s-features.v-ledger h3 { font-size: 1.3rem; margin: 0; }
.s-features.v-ledger li p { margin: 0; color: var(--muted); }
@media (min-width: 52rem) {
  .s-features.v-ledger li { grid-template-columns: 4rem minmax(0, 18rem) 1fr; align-items: baseline; }
  .s-features.v-ledger li::before { grid-row: auto; }
}

/* Gratis oder Pro: zwei Karten, Pro dunkelgrün */
.s-features.v-plans { background: var(--card); border-block: 1px solid var(--line); }
.s-features.v-plans .s-items { display: grid; gap: 1.25rem; margin-block: 0;
                               grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.s-features.v-plans li { padding: 1.75rem; border: 1px solid var(--line); border-top: 6px solid var(--teal);
                         background: var(--bg); }
.s-features.v-plans li:nth-child(2) { background: var(--teal-deep); color: #FFFFFF; border-color: var(--teal-deep);
                                      border-top-color: var(--amber); }
.s-features.v-plans h3 { font-size: 1.6rem; margin: 0 0 .75rem; }
.s-features.v-plans li p { margin: 0; }

/* Fragen: Linien, geöffnete Frage mit grüner Kante */
.s-faq details:first-child { border-top: 2px solid var(--ink); }
.s-faq details { border-bottom: 1px solid var(--line); padding: 1rem 0 1rem 1rem; border-left: 4px solid transparent; }
.s-faq details[open] { border-left-color: var(--teal); }
.s-faq summary { font-weight: 700; font-size: 1.1rem; }
.s-faq details p { margin: .6rem 0 0; color: var(--muted); max-width: var(--measure); }

/* Verfügbarkeit: gestrichelter Kasten */
.s-text.v-status { padding-block: 0 4rem; }
.s-text.v-status > h2, .s-text.v-status > p { max-width: calc(var(--max-width) - 2 * var(--gutter)); }
.s-text.v-status > h2 { border: 2px dashed var(--teal); border-bottom: 0; padding: 1.5rem 1.5rem 0; margin-bottom: 0; }
.s-text.v-status > p { border: 2px dashed var(--teal); border-top: 0; padding: .75rem 1.5rem 1.5rem; margin-top: 0; }
@media (max-width: 70rem) {
  .s-text.v-status > h2, .s-text.v-status > p { margin-inline: var(--gutter); max-width: none; }
}

.s-contact { padding-block: 0 4rem; }
.s-contact h2 { font-size: 1.4rem; margin-bottom: .5rem; }

/* Fuß: dunkelgrün */
.kit-footer { background: var(--teal-deep); color: #D7E9E5; padding-block: 2rem; font-size: .95rem; }
.kit-footer a { color: #FFFFFF; }
.kit-langs a[aria-current="page"] { text-decoration: none; font-weight: 700; }
.kit-ident { margin: 0; flex-basis: 100%; }
.kit-ident a { color: #D7E9E5; }

/* Rechtsseiten: Karte auf Papier */
.kit-legal-page { background: var(--card); border: 1px solid var(--line); border-top: 6px solid var(--teal);
                  margin-block: 2.5rem; padding: 2rem clamp(1.25rem, 4vw, 3rem); }
.kit-legal-page h1 { font-size: clamp(2rem, 4vw, 2.6rem); margin-top: 0; }
.kit-legal-page h2 { font-size: 1.35rem; margin: 2.25rem 0 .6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.kit-toc { columns: 2 16rem; column-gap: 2rem; }
.kit-binding { background: var(--bg); border-left: 4px solid var(--amber); padding: .75rem 1rem; }
.page-404 main .kit-wrap { padding-block: 4rem; }