/* Praxis-Kit: Komponenten-Stylesheet fuer alle Seiten und Kits.
   Mobil zuerst. Grundschrift 18 px (1.125rem), ab 64em 19 px. Keine Farbwerte hier: alles aus tokens.css.
   Komponenten: Kopf (.kopf, .marke, .hauptnav), Fuss (.fuss), Knopf (.knopf-haupt, .knopf-zweit),
   Held (.held), Produktbox (.produktbox, alt: .produktbox, .preisblock), Hinweis (.kasten, .hinweis-zeile, .entwurf),
   FAQ (.faq-liste > details.faq), Kachel (.kachel, .kachel-bald = In Vorbereitung), Kit-Karte (.kit-gross). */



*, *::before, *::after { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }
@media (min-width: 64em) { html { font-size: 118.75%; } }
body {
  margin: 0; background: var(--hintergrund); color: var(--text);
  font-family: var(--schrift);
  font-size: 1rem; line-height: var(--zeilenhoehe); overflow-wrap: break-word; hyphens: manual;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }

/* Ueberschriften */
h1, h2, h3, h4 { color: var(--petrol); line-height: 1.2; margin: 0 0 .6em; font-weight: 700; text-wrap: balance; }
h1 { font-size: 1.85rem; }
h2 { font-size: 1.5rem; margin-top: 0; }
h3 { font-size: 1.2rem; margin-top: 1.6em; }
@media (min-width: 48em) { h1 { font-size: 2.5rem; } h2 { font-size: 1.85rem; } h3 { font-size: 1.3rem; } }
p, ul, ol, table, dl { margin: 0 0 1em; }
ul, ol { padding-left: 1.4em; }
li { margin-bottom: .45em; }
li::marker { color: var(--petrol); }
strong { font-weight: 700; }
small, .klein { font-size: .95rem; color: var(--text-leise); }
.lead { font-size: 1.15rem; color: var(--text); max-width: var(--lesebreite); }
@media (min-width: 48em) { .lead { font-size: 1.25rem; } }

/* Links und Fokus */
a { color: var(--petrol); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--petrol-dunkel); text-decoration-thickness: .14em; }
:focus-visible { outline: var(--fokus-ring); outline-offset: 3px; box-shadow: var(--fokus-schatten); border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--petrol); color: var(--hintergrund); padding: .8rem 1.2rem; z-index: 10; font-weight: 700; }
.skip:focus { left: 1rem; top: 1rem; color: var(--hintergrund); }

/* Raster */
.wrap { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 1.1rem; }
@media (min-width: 48em) { .wrap { padding: 0 2rem; } }
.lesen { max-width: var(--lesebreite); }
.abschnitt { padding: 2.6rem 0; }
.abschnitt + .abschnitt { border-top: 1px solid var(--linie); }
.abschnitt.flaeche { background: var(--flaeche); border-top: 0; }
.abschnitt.flaeche + .abschnitt { border-top: 0; }
@media (min-width: 48em) { .abschnitt { padding: 3.6rem 0; } }
.unterzeile { font-size: 1.15rem; color: var(--text-leise); max-width: var(--lesebreite); margin-top: -.2em; }

/* Kopfzeile */
.kopf { background: var(--hintergrund); border-bottom: 4px solid var(--orange); }
.kopf-innen { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding-top: .7rem; padding-bottom: .7rem; }
.marke { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.45rem; color: var(--petrol); text-decoration: none; min-height: 48px; }
.marke-wort { display: inline-block; line-height: 1.1; padding-bottom: 9px; position: relative; }
.marke-wort::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.15em; height: 4px; border-radius: 2px; background: var(--orange); }  /* Logo A, freigegeben 22.10.2026 10:42 */
.marke:hover { color: var(--petrol-dunkel); }
.hauptnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem; }
.hauptnav li { margin: 0; }
.hauptnav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 .75rem; font-weight: 700; text-decoration: none; border-radius: 6px; }
.hauptnav a:hover { background: var(--petrol-hell); }
.hauptnav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: .35em; }
.hauptnav { margin-left: auto; }
.kopf .knopf { min-height: 48px; padding: .5rem 1rem; font-size: 1rem; }
@media (max-width: 40em) {
  .kopf-innen { padding-bottom: 0; }
  .marke { order: 1; }
  .kopf .knopf { order: 2; margin-left: auto; padding: .4rem .8rem; }
  .hauptnav { order: 3; width: 100%; margin: .3rem -1.1rem 0; width: calc(100% + 2.2rem); border-top: 1px solid var(--linie); }
  .hauptnav ul { gap: 0; }
  .hauptnav li { flex: 1; }
  .hauptnav a { width: 100%; justify-content: center; padding: 0 .3rem; }
}

/* Knoepfe: mindestens 48 px hoch, klar beschriftet */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; padding: .7rem 1.4rem; border-radius: var(--radius);
  font: inherit; font-weight: 700; font-size: 1.05rem; line-height: 1.25; text-decoration: none; cursor: pointer;
  border: 2px solid transparent;
}
.knopf-haupt { background: var(--orange); color: var(--auf-akzent); border-color: var(--akzent-rand); }   /* Kontrast Text/Orange ca. 5,7:1 */
.knopf-haupt:hover { background: var(--akzent-hover); color: var(--text); }
.knopf-zweit { background: var(--hintergrund); color: var(--petrol); border-color: var(--petrol); }
.knopf-zweit:hover { background: var(--petrol-hell); color: var(--petrol-dunkel); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.4rem 0 1rem; }
@media (max-width: 30em) { .knopfreihe .knopf { width: 100%; } }

/* Platzhalter: vor Veroeffentlichung ersetzen. Absichtlich auffaellig. */
.ph { background: var(--gelb); color: var(--text); outline: 2px dashed var(--gelb-rand); outline-offset: 1px; padding: 0 .25em; border-radius: 3px; font-weight: 700; }
.ph-box { background: var(--gelb-hell); border: 2px dashed var(--gelb-rand); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1rem 0; }
.ph-box > :last-child { margin-bottom: 0; }

/* Startseite */
.held { background: var(--petrol-hell); padding: 2.4rem 0 2.6rem; }
@media (min-width: 48em) { .held { padding: 4rem 0 4.2rem; } }
.held h1 { max-width: 22em; }
.held-raster { display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 60em) { .held-raster { grid-template-columns: 1.15fr .85fr; gap: 3rem; } }
.held-bild img { border-radius: var(--radius); box-shadow: var(--schatten); }
.hinweis-zeile { font-size: .95rem; color: var(--text-leise); margin-top: .6rem; }

.merkmale { list-style: none; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 48em) { .merkmale { grid-template-columns: 1fr 1fr; gap: 1.2rem 2rem; } }
.merkmale li { margin: 0; padding-left: 1.1rem; border-left: 4px solid var(--orange); }

.kit-gross { display: grid; gap: 1.4rem; background: var(--hintergrund); border: 2px solid var(--petrol); border-radius: var(--radius); padding: 1.2rem; margin-bottom: 2rem; }
@media (min-width: 48em) { .kit-gross { grid-template-columns: 300px 1fr; padding: 1.8rem; gap: 2rem; align-items: center; } }
.kit-gross h3 { margin-top: 0; font-size: 1.45rem; }
.kit-gross img { border-radius: 6px; }
.kit-preis { font-weight: 700; color: var(--petrol); }
.status { display: inline-block; font-size: .9rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; margin-bottom: .6rem; }
.status-live { background: var(--petrol); color: var(--hintergrund); }
.status-bald { background: var(--hintergrund); color: var(--text-leise); border: 2px solid var(--linie); }

.kacheln { list-style: none; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 40em) { .kacheln { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .kacheln { grid-template-columns: 1fr 1fr 1fr; } }
.kachel { margin: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.kachel h4 { font-size: 1.15rem; margin: .1rem 0 .4rem; color: var(--text); }
.kachel p { margin: 0; color: var(--text-leise); }

.schritte { counter-reset: s; list-style: none; padding: 0; max-width: var(--lesebreite); }
.schritte li { counter-increment: s; position: relative; padding-left: 3.2rem; min-height: 2.4rem; margin-bottom: 1rem; }
.schritte li::before { content: counter(s); position: absolute; left: 0; top: -.1rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--petrol); color: var(--hintergrund); font-weight: 700; display: flex; align-items: center; justify-content: center; }

.kasten { background: var(--orange-hell); border-left: 6px solid var(--orange); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.1rem 1.3rem; max-width: var(--lesebreite); }
.kasten > :last-child { margin-bottom: 0; }
.kasten h2, .kasten h3 { margin-top: 0; }

/* Themenseite */
.brotkrumen { font-size: .95rem; padding-top: .8rem; }
.brotkrumen ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.brotkrumen li { margin: 0; }
.brotkrumen li + li::before { content: "›"; padding: 0 .5rem; color: var(--text-leise); }
.brotkrumen a { display: inline-block; padding: .3rem 0; }

.sprungleiste { background: var(--petrol); }
.sprungleiste ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 .2rem; }
.sprungleiste li { margin: 0; }
.sprungleiste a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 .8rem; color: var(--hintergrund); font-weight: 700; text-decoration: none; }
.sprungleiste a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; }
.sprungleiste a:focus-visible { box-shadow: 0 0 0 6px var(--hintergrund); }
.sprungleiste .wrap { padding-left: .5rem; padding-right: .5rem; }
@media (min-width: 48em) { .sprungleiste .wrap { padding-left: 1.2rem; } }

.haken { list-style: none; padding: 0; }
.haken li { position: relative; padding-left: 2rem; }
.haken li::before { content: ""; position: absolute; left: .2rem; top: .35em; width: .55rem; height: 1rem; border: solid var(--orange); border-width: 0 4px 4px 0; transform: rotate(45deg); }

.figur { margin: 1.6rem 0 2rem; }
.figur img { border: 1px solid var(--linie); border-radius: var(--radius); }
.figur figcaption { font-size: .95rem; color: var(--text-leise); margin-top: .5rem; }

.modulblock { max-width: var(--lesebreite); }
.modulblock h3 { display: flex; gap: .7rem; align-items: baseline; }
.modulblock h3 .nr { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--orange); color: var(--auf-akzent); font-size: 1.05rem; }

.tabelle-rahmen { overflow-x: auto; max-width: var(--lesebreite); }
table { border-collapse: collapse; width: 100%; font-size: .97rem; }
caption { text-align: left; font-weight: 700; color: var(--petrol); padding-bottom: .5rem; font-size: 1.05rem; }
th, td { text-align: left; vertical-align: top; padding: .65rem .7rem; border-bottom: 1px solid var(--linie); }
thead th { background: var(--petrol); color: var(--hintergrund); }
tbody th { font-weight: 700; color: var(--petrol); white-space: nowrap; }

.zwei-spalten { display: grid; gap: 1.4rem; }
@media (min-width: 56em) { .zwei-spalten { grid-template-columns: 1fr 1fr; gap: 2.4rem; } }
.passt, .passt-nicht { border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.passt { background: var(--petrol-hell); }
.passt-nicht { background: var(--flaeche); border: 1px solid var(--linie); }
.passt h3, .passt-nicht h3 { margin-top: 0; }
.passt ul, .passt-nicht ul { margin-bottom: 0; }

.produktbox { background: var(--hintergrund); border: 2px solid var(--petrol); border-top: 8px solid var(--orange); border-radius: var(--radius); padding: 1.3rem 1.2rem; max-width: 36rem; }
@media (min-width: 48em) { .preisblock { padding: 1.8rem 2rem; } }
.produktbox h3 { margin-top: 0; font-size: 1.4rem; }
.preis { font-size: 2.6rem; font-weight: 700; color: var(--petrol); line-height: 1; margin: .2rem 0 .3rem; }
.preis-zusatz { font-weight: 700; margin-bottom: 1rem; }
.produktbox .knopf { width: 100%; font-size: 1.15rem; min-height: 56px; }
.preis-raster { display: grid; gap: 1.6rem; }
@media (min-width: 60em) { .preis-raster { grid-template-columns: minmax(0, 36rem) 1fr; gap: 3rem; align-items: start; } }

.fragen-liste { max-width: var(--lesebreite); }
.fragen-liste h3 { font-size: 1.15rem; margin: 1.8em 0 .4em; }
.fragen-liste h3:first-child { margin-top: 0; }
.fragen-liste p { margin-bottom: .5em; }

.vorschau { list-style: none; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 56em) { .vorschau { grid-template-columns: repeat(4, 1fr); } }
.vorschau li { margin: 0; }
.vorschau img { border: 1px solid var(--linie); border-radius: 4px; box-shadow: 0 2px 8px rgba(20,56,68,.12); }
.vorschau figure { margin: 0; }
.vorschau figcaption { font-size: .92rem; margin-top: .45rem; color: var(--text-leise); }

.kontakt-karte { background: var(--petrol-hell); border-radius: var(--radius); padding: 1.3rem; max-width: var(--lesebreite); font-size: 1.1rem; }
.rechtstext { max-width: var(--lesebreite); }
.rechtstext h2 { font-size: 1.35rem; margin-top: 2rem; }
.rechtstext h3 { font-size: 1.12rem; }
.entwurf { background: var(--gelb-hell); border: 2px dashed var(--gelb-rand); border-radius: var(--radius); padding: .9rem 1.1rem; font-weight: 700; max-width: var(--lesebreite); }
address { font-style: normal; }

/* Fusszeile */
.fuss { background: var(--petrol-dunkel); color: var(--hintergrund); padding: 2rem 0 2.4rem; margin-top: 0; border-top: 4px solid var(--orange); }
.fuss a { color: var(--hintergrund); }
.fuss ul { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .2rem 0; }
.fuss li { margin: 0; }
.fuss li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem 0 0; font-weight: 700; }
.fuss p { margin: 0 0 .4rem; color: var(--text-hell); font-size: .95rem; }
.fuss :focus-visible { outline-color: var(--orange); box-shadow: 0 0 0 6px var(--hintergrund); }

/* Fehlerseite */
.fehler { padding: 3rem 0 4rem; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

@media print {
  .kopf .kopf-rechts, .sprungleiste, .skip, .knopfreihe, .fuss nav { display: none !important; }
  body { font-size: 12pt; }
  a { color: var(--text); }
  .abschnitt { padding: 1rem 0; }
}
main:focus { outline: none; }
.sr-hinweis { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
dl dt { margin-top: 1rem; color: var(--petrol); }
dl dd { margin: .3rem 0 0; }
/* .wrap.lesen: linksbuendig im Raster, Text in Lesebreite */
.wrap.lesen { max-width: var(--breite); }
.wrap.lesen > * { max-width: var(--lesebreite); }
.nw { white-space: nowrap; }
.wrap.rechtstext { max-width: var(--breite); }
.wrap.rechtstext > * { max-width: var(--lesebreite); }
/* Interne Hinweise im Entwurf: vor Veroeffentlichung loeschen */
.entwurf-hinweis { font-size: .95rem; background: var(--gelb-hell); border-left: 4px dashed var(--gelb-rand); padding: .4rem .8rem; color: var(--gelb-text); }
/* Abstandshilfen statt Inline-Stile */
.oben { margin-top: 0; }
.abstand-oben { margin-top: var(--abstand-5); }

/* Kachel "In Vorbereitung": bewusst zurueckhaltend, kein Link */
.kachel-bald { background: var(--hintergrund); border-style: dashed; }

/* FAQ: natives <details>, ohne JavaScript, per Tastatur bedienbar */
.faq-liste { max-width: var(--lesebreite); border-top: 1px solid var(--linie); }
.faq { border-bottom: 1px solid var(--linie); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--abstand-4);
  align-items: center; min-height: var(--ziel-min); padding: var(--abstand-3) 0; font-weight: 700; color: var(--petrol); font-size: 1.1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--petrol);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; line-height: 1; }
.faq[open] summary::after { content: "\2212"; background: var(--petrol); color: var(--hintergrund); }
.faq summary:hover { color: var(--petrol-dunkel); text-decoration: underline; text-decoration-color: var(--akzent); text-decoration-thickness: 3px; }
.faq-antwort { padding: 0 0 var(--abstand-4); }
.faq-antwort > :last-child { margin-bottom: 0; }
@media print { .faq-antwort { display: block !important; } }
/* Akzentlinie ueber dem Seitentitel (aus Canva Social/Mockup uebernommen: kurze Akzentlinie als Gliederung) */
.held h1::before { content: ""; display: block; width: 3.2rem; height: 4px; border-radius: 2px; background: var(--akzent); margin-bottom: var(--abstand-4); }

/* Livegang ohne Shop: nicht klickbarer Hinweis statt Bestellknopf */
.bald-hinweis { display: inline-block; margin: .5rem 0 1rem; padding: .8rem 1.2rem; border: 2px dashed var(--akzent-rand); border-radius: var(--radius); background: #fff; color: inherit; }