/* app-to-go – „Datenblatt“: weißes Papier, Graphit und Türkis aus dem Signet, Lato (selbst gehostet),
   Abschnitte zweispaltig wie ein technisches Datenblatt (Überschrift links mit Nummer, Inhalt rechts),
   Code in Graphit. Bewusst nur hell, keine Animationen (RULES.md §2). */
:root { color-scheme: light; counter-reset: abschnitt; }

body { background: var(--paper); color: var(--ink); font: 1.0625rem/1.65 var(--font-text);
       display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
h1, h2, h3 { line-height: 1.15; color: var(--graphite); }
h1 { font-weight: 900; letter-spacing: -.015em; }
h2 { font-weight: 900; font-size: clamp(1.5rem, 2.6vw, 1.9rem); letter-spacing: -.01em; margin: 0 0 1rem; }
h3 { font-weight: 700; font-size: 1.05rem; margin: 0 0 .35rem; }
a { color: var(--tuerkis-ink); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--tuerkis); outline-offset: 2px; }
code, pre { font-family: var(--font-code); font-size: .9em; }
strong { font-weight: 700; color: var(--graphite); }

/* Kopf: Graphit-Leiste mit türkiser Unterkante */
.kit-header { background: var(--graphite); border-bottom: 4px solid var(--tuerkis); }
.kit-header .kit-wrap { min-height: 4.25rem; }
.kit-brand { color: #FFFFFF; font-weight: 700; font-size: 1.2rem; letter-spacing: .01em; }
.kit-brand img { width: 2.25rem; height: 2.25rem; }
.kit-nav { gap: .25rem 1.75rem; }
.kit-nav a { color: #E4E4E7; text-decoration: none; font-size: .95rem; padding-block: .4rem; }
.kit-nav a:hover { color: #FFFFFF; text-decoration: underline; text-decoration-color: var(--tuerkis); }

/* Abschnitte: Datenblatt-Zeilen mit Nummer */
.s { padding-block: 3.5rem; border-top: 1px solid var(--line); }
.s > * { margin-inline: auto; }
.s:not(.s-hero) > h2::before { counter-increment: abschnitt; content: counter(abschnitt, decimal-leading-zero);
  display: block; font: 700 .85rem/1 var(--font-code); color: var(--tuerkis-ink); letter-spacing: .08em;
  margin-bottom: .6rem; }
.s-intro { color: var(--grey); }
@media (min-width: 60rem) {
  .s:not(.s-hero) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem) minmax(0, 46rem) minmax(0, 1fr);
                    column-gap: 3rem; align-items: start; }
  .s:not(.s-hero) > * { grid-column: 3; max-width: none; margin-inline: 0; padding-inline: 0; }
  .s:not(.s-hero) > h2 { grid-column: 2; grid-row: 1 / span 9; padding-left: var(--gutter); }
  .s:not(.s-hero) > :last-child { margin-bottom: 0; }
  .s-intro { margin-top: .2rem; }
}

/* Start: weiß, Text links, Zeichnung rechts unten bündig */
.s-hero { border-top: 0; padding-block: 4rem 3.5rem; }
.s-hero .s-media img { width: 100%; max-width: 35rem; }
@media (min-width: 60rem) {
  .s-hero { display: grid; align-items: end; column-gap: 3.5rem;
            grid-template-columns: minmax(0, 1fr) minmax(0, 37rem) minmax(0, 31rem) minmax(0, 1fr); }
  .s-hero > * { 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: 59.99rem) { .s-hero .s-media { margin-top: 2.5rem; } }
.s-eyebrow { margin: 0 0 1.25rem; font: 700 .85rem/1.4 var(--font-code); text-transform: uppercase;
             letter-spacing: .1em; color: var(--tuerkis-ink); }
.s-eyebrow::before { content: ""; display: inline-block; width: 2rem; height: 3px; margin-right: .75rem;
                     vertical-align: middle; background: var(--tuerkis); }
.s-hero h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); margin: 0 0 1.5rem; }
.s-lead { font-size: 1.2rem; color: var(--graphite-soft); margin: 0 0 2rem; }
.s-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.kit-btn { padding: .8rem 1.4rem; font-weight: 700; border: 2px solid var(--graphite); }
.kit-btn-primary { background: var(--graphite); color: #FFFFFF; }
.kit-btn-primary:hover { background: var(--tuerkis-ink); border-color: var(--tuerkis-ink); }
.kit-btn-secondary { color: var(--graphite); }
.kit-btn-secondary:hover { background: var(--mist); }

/* Prüfumfang: Matrix mit Rasterlinien */
.s-features.v-matrix .s-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 0; padding: 0; border-top: 2px solid var(--graphite); border-left: 1px solid var(--line); }
.s-features.v-matrix li { padding: 1.25rem 1.25rem 1.4rem; border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.s-features.v-matrix h3 { font-family: var(--font-code); font-size: .95rem; }
.s-features.v-matrix p { margin: 0; color: var(--grey); }

/* Text-Abschnitte */
.s-text ul { padding-left: 1.2rem; }
.s-text li { margin-bottom: .45rem; }
.s-text li::marker { color: var(--tuerkis-ink); }

/* Beispiel: Graphit-Block */
.s-text.v-code { background: var(--mist); }
.s-text figure { margin: 1.5rem 0 0; }
.kit-code { margin: 0; padding: 1.25rem 1.4rem; overflow-x: auto; background: var(--graphite); color: #E4E4E7;
            border-left: 6px solid var(--tuerkis); line-height: 1.55; white-space: pre; }
.s-text figcaption { margin-top: .6rem; font-size: .9rem; color: var(--grey); }

/* Verfügbarkeit: Hinweiskasten */
.s-text.v-status > p:first-of-type { padding: 1rem 1.25rem; border: 2px solid var(--graphite);
  font-weight: 700; color: var(--graphite); }
.s-text.v-status > p:last-of-type { font-size: .9rem; color: var(--grey); }

/* Fragen: Linien statt Karten */
.s-faq details { border-bottom: 1px solid var(--line); }
.s-faq details:first-child { border-top: 2px solid var(--graphite); }
.s-faq summary { padding: 1rem 0; font-weight: 700; color: var(--graphite); }
.s-faq summary::marker { color: var(--tuerkis-ink); }
.s-faq details p { margin: 0 0 1.25rem; color: var(--grey); }
.s-faq .s-items { padding: 0; }

/* Kontakt */
.s-contact.v-band { background: var(--graphite); color: #E4E4E7; border-top: 0; }
.s-contact.v-band h2 { color: #FFFFFF; }
.s-contact.v-band h2::before { color: var(--tuerkis); }
.s-contact.v-band a { color: #FFFFFF; font-weight: 700; text-decoration-color: var(--tuerkis); }

/* Rechtsseiten */
.kit-legal-page { padding-block: 3rem 4rem; }
.kit-legal-page h1 { font-size: clamp(2rem, 4vw, 2.6rem); margin: 0 0 1.5rem; }
.kit-legal-page h2 { font-size: 1.3rem; margin: 2.5rem 0 .75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.kit-legal-page nav { padding: 1rem 1.25rem; background: var(--mist); border-left: 4px solid var(--tuerkis); }
.kit-legal-page li { margin-bottom: .35rem; }

/* Fuß: hell, Linie oben */
.kit-footer { border-top: 4px solid var(--graphite); background: var(--mist); padding-block: 1.75rem; font-size: .95rem; }
.kit-footer a { color: var(--graphite); }
.kit-ident { margin: 0; color: var(--grey); }
.kit-ident a { color: var(--grey); }