/* Klarstufe – Markenvariablen für das West-Labs-Design-Kit (Stil: stil-lernen).
   Farben aus dem bisherigen Auftritt (logo.svg, style.css): Tinte #1d3557, Grün #2a7f62, Orange #d9822b.
   Kontraste gemessen mit: node infra/design/kontrast.js (Werte in DESIGN.md). */
:root {
  --marke: #1d3557;         /* Tinte: Knöpfe, Links – 12,4:1 auf Weiß */
  --marke-dunkel: #142640;
  --marke-hell: #e8eef6;
  --akzent: #c4701f;        /* Orange, leicht abgedunkelt: Fokusrahmen ≥ 3:1 auf Weiß, Fläche und Tinte */
  --flaeche: #f6f4ef;       /* warmes Papierweiß wie bisher */
  --text: #1f2328;
  --text-leise: #4f555d;
  --linie: #e3e0d8;
  --erfolg: #2a7f62;        /* Markengrün */
  --radius: 12px;
}

/* ---- Seitenspezifisch (wenige Zeilen, begründet in DESIGN.md) ---- */
/* Wortmarke im Kopf: „Klar“ in Tinte, „stufe“ in Grün wie im Logo */
.logo .logo-gruen { color: var(--erfolg); }
/* Niveaustufen-Kennzeichen auf der Startseite (Farben wie im Logo) */
.stufe { display: inline-block; font-size: .85rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; color: #fff; background: var(--erfolg); }
.stufe-einfach { background: #fbe7d3; color: #1f2328; }
.stufe-bild { background: var(--marke); }
/* Arbeitsblatt der Gratisprobe: Übungskästen, Beitrags-Kasten, Schreiblinien, Druck */
.uebung { border: 2px dashed #d9822b; border-radius: var(--radius-klein); padding: .75rem 1rem; background: #fff; margin: 1rem 0; max-width: var(--lesebreite); }
.uebung .label { font-weight: 700; color: #8a4b0e; font-size: .85rem; letter-spacing: .03em; text-transform: uppercase; }
.post { border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: .75rem 1rem; background: var(--flaeche); margin-top: .5rem; }
.post .acc { font-weight: 700; }
.lines { border-bottom: 1px solid #999; height: 1.8rem; }
/* Gratisprobe Fassung 2: Merkkasten, Quellenkarten (Satz 2 und 3 nur im Druck), Download-Zeile */
.merkkasten { border-left: 5px solid var(--erfolg); background: #f1f7f4; padding: .75rem 1rem; margin: 1rem 0; max-width: var(--lesebreite); }
.merkkasten p:last-child { margin-bottom: 0; }
.quellenkarten { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: var(--lesebreite); margin-bottom: 1.5rem; }
@media (min-width: 700px) { .quellenkarten { grid-template-columns: 1fr 1fr; } }
.quellenkarte { border: 1px dashed #999; border-radius: var(--radius-klein); padding: .75rem 1rem; }
.quellenkarte p:last-child { margin-bottom: 0; }
.quellenkarte .nr { font-weight: 700; color: var(--marke); }
.nur-druck { display: none; }
.probe-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
@media print {
  .nur-druck { display: block; }
  .quellenkarten { grid-template-columns: 1fr 1fr; gap: 0; }
  .merkkasten, .zusammen, .quellenkarte { break-inside: avoid; }
  .noprint { display: none !important; }
  .abschnitt { padding-block: 0; }
  .wrap { width: 100%; }
  .uebung, tr { break-inside: avoid; }
  h2, h3, h4 { break-after: avoid; }
  .neueseite { break-before: page; }
}
/* Abstände ohne Inline-Stile */
.abstand-oben { margin-top: var(--abstand); }
.abstand-oben-klein { margin-top: 2rem; }
.ohne-abstand-oben { padding-top: 0; }
/* Lange Textseiten (Rechtstexte, Ratgeber, Gratisprobe): Abstand vor Zwischenüberschriften und nach Tabellen */
.fliesstext h2 { margin-top: 2.2rem; }
.fliesstext h3 { margin-top: 1.6rem; }
.fliesstext h1 + h2, .fliesstext h2 + h3 { margin-top: .75rem; }
.fliesstext table, .fliesstext .tabelle-scroll { margin-bottom: 1.5rem; }
.fliesstext .tabelle-scroll table { margin-bottom: 0; }
/* Startseite 23.10.2026 (Auftrag Master): Überschriften ohne automatische Trennung, Unterzeile unter dem h1 */
h1, h2, h3 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; text-wrap: balance; }
.hero .unterzeile { font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); font-weight: 700; color: var(--marke); margin: -.2em 0 .8em; text-wrap: balance; }
.vorschau-link { text-align: center; margin-top: 1.25rem; }
/* Beispiel-Register: aktiver Reiter fett und mit Balken (Zustand nicht nur über Farbe) */
.register { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.1rem; min-width: 0; }
.register .register-titel { font-size: 1.35rem; margin-bottom: .25rem; }
.register-hinweis { color: var(--text-leise); font-size: .95rem; }
.register-leiste { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 2px solid var(--linie); margin-bottom: 1rem; }
.register-leiste[hidden] { display: none; }
.register-leiste [role=tab] { font: inherit; font-size: 1rem; color: var(--text); background: none; border: 0; border-bottom: 4px solid transparent; margin-bottom: -2px; padding: .6rem .35rem; min-height: 44px; cursor: pointer; }
@media (min-width: 480px) { .register-leiste [role=tab] { padding-inline: .8rem; } }
.register-leiste [role=tab][aria-selected=true] { font-weight: 700; color: var(--marke); border-bottom-color: var(--marke); }
.register-leiste [role=tab]:not([aria-selected=true]):hover { border-bottom-color: var(--linie); }
.register:not(.register-aktiv) .register-seite + .register-seite { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.register:not(.register-aktiv) .lupe-knopf { display: none; }
.register-kopf { font-size: .85rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-leise); }
.register-seite table { font-size: .95rem; }
.register-seite .uebung { margin: .75rem 0 1rem; }
.register-fragen { font-weight: 700; margin-top: .75rem; }
.register-loesung { margin: 0 0 1rem; }
.register-loesung dt { font-weight: 700; margin-top: .6rem; }
.register-loesung dd { margin: 0; }
.lupe { border: 0; padding: 1rem; width: min(94vw, 900px); max-height: 94vh; border-radius: var(--radius); }
.lupe::backdrop { background: rgb(0 0 0 / .7); }
.lupe form { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
.lupe img { width: 100%; height: auto; display: block; border: 1px solid var(--linie); }
/* Auftrag Master 04.11.2026 (Website-Design und Bedienung) */
/* Startseite: mobil ein lesbarer Aufgabenausschnitt als Text statt der stark verkleinerten ganzen Seite */
.ausschnitt-mobil { display: none; }
@media (max-width: 599px) {
  .vorschau-ganz { display: none; }
  .ausschnitt-mobil { display: block; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--schatten); }
  .ausschnitt-mobil .uebung { margin: .5rem 0 1rem; }
}
/* Lizenzwahl in Kurzform über den Preiskarten */
.lizenzwahl-kurz { margin: 1rem 0 0; padding-left: 1.2rem; }
.lizenzwahl-kurz li { margin-bottom: .35rem; }
.lizenzwahl-kurz a { display: inline-block; padding-block: .35rem; font-weight: 700; }
/* Gratisprobe: Sprungnavigation, Sprungziele unter dem festen Kopf, Lizenzwahl */
.sprung { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem 0 0; }
.sprung span { font-weight: 700; margin-right: .25rem; }
.sprung a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--linie); border-radius: 999px; background: #fff; color: var(--marke); font-weight: 700; text-decoration: none; }
.sprung a:hover { border-color: var(--marke); }
#lehrkraft, #arbeitsblatt, #lernstand, #loesungen, #lizenz { scroll-margin-top: 5.5rem; }
/* Sprungziele bekommen beim Sprung den Fokus (tabindex="-1"), damit Tab im Ziel weitergeht; kein Rahmen um den ganzen Abschnitt */
section[tabindex="-1"]:focus { outline: none; }
.lizenzwahl { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); max-width: var(--lesebreite); margin: 1rem 0 1.5rem; }
.lizenzwahl .karte { padding: 1rem 1.1rem; }
.lizenzwahl h3 { margin-top: 0; }
.lizenzwahl .preis-klein { font-size: 1.35rem; font-weight: 700; color: var(--marke); margin: .25rem 0 .5rem; }
@media print {
  /* „Nur Arbeitsblatt drucken“: Lehrkraftteil, Lösungen und alle Bildschirm-Hinweise fallen weg */
  html[data-druck=arbeitsblatt] .lehrkraft,
  html[data-druck=arbeitsblatt] .loesungen { display: none !important; }
}
/* Auftrag Master 04.11.2026 (Benutzerführung, 05.11.): Seitenart der Vorschauen, Steckbrief, Weg, Lizenzvergleich */
/* Seitenart: Text + Symbol + Randfarbe wie die Kopfzeilen im PDF (Kopiervorlage braun, Lösungen grün) – nicht nur Farbe */
.seitenart { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .6rem; padding: .3rem .7rem .3rem .6rem; border-left: 5px solid var(--marke); background: var(--marke-hell); color: var(--marke-dunkel); font-size: .9rem; font-weight: 700; border-radius: 0 var(--radius-klein) var(--radius-klein) 0; }
.seitenart::before { content: "▤"; font-weight: 400; }
.seitenart-arbeitsblatt { border-left-color: #d9822b; background: #fdf1e4; color: #6f3c0b; }
.seitenart-arbeitsblatt::before { content: "✎"; }
.seitenart-loesung { border-left-color: var(--erfolg); background: #e6f2ed; color: #1d5a45; }
.seitenart-loesung::before { content: "✓"; }
.seitenart:empty { display: none; }
.vorschau > .seitenart { display: flex; width: fit-content; margin-inline: auto; }
#reg-loesung { border-left: 4px solid var(--erfolg); padding-left: .9rem; }
.lupe form { align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.lupe .lupe-art { margin: 0; }
/* Steckbrief: fünf Angaben kompakt, mobil zweispaltig */
.steckbrief { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .75rem; margin: 0 0 2rem; padding: 0; }
.steckbrief div { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: .7rem .9rem; }
.steckbrief dt { font-size: .85rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-leise); }
.steckbrief dd { margin: .2rem 0 0; font-weight: 700; color: var(--text); }
/* Weg: jeder Schritt mit eigener Aktion */
.weg-links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .5rem 0 0; }
.weg-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
/* Lizenzvergleich: gleiche Zeilen in allen Karten, am Desktop zeilengleich nebeneinander (subgrid) */
.lizenz-raster { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin-top: 1.5rem; }
.lizenz-raster .karte { display: flex; flex-direction: column; }
.lizenz-raster .btn { align-self: flex-start; justify-self: start; margin-top: .75rem; }
.fakt { margin: .6rem 0 0; padding-top: .6rem; border-top: 1px solid var(--linie); }
.fakt-name { display: block; font-size: .85rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-leise); }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .lizenz-raster .karte { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  }
}
/* Gratisprobe: Teile A/B/C am Bildschirm mit derselben Kennzeichnung wie die Vorschauen */
@media screen {
  .lehrkraft > h2, .kopiervorlage > h2, .loesungen > h2 { border-left: 6px solid var(--marke); padding-left: .7rem; }
  .kopiervorlage > h2 { border-left-color: #d9822b; }
  .loesungen > h2 { border-left-color: var(--erfolg); }
}
#ablauf, #einzellizenz, #schullizenz, #freilizenz { scroll-margin-top: 5.5rem; }
.abschnitt[id] { scroll-margin-top: 4.25rem; } /* Kopf ≈ 65 px: Überschrift nach Sprung (#preise, #fragen …) nicht verdeckt, auch mobil */
/* I08 Landingpage einfache-sprache.html (05.11.2026): Vorher/Nachher im Startbereich, Lesbarkeits-Check */
.vorher-nachher { margin: 0; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--schatten); min-width: 0; }
.vorher-nachher blockquote { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.5; }
.vorher-nachher .seitenart { margin-bottom: .5rem; }
.seitenart-vorher { border-left-color: #d9822b; background: #fdf1e4; color: #6f3c0b; }
.seitenart-vorher::before { content: "✎"; }
.vorher-nachher figcaption { margin-top: .25rem; }
.check textarea { display: block; width: 100%; box-sizing: border-box; margin: .5rem 0; padding: .75rem; font: inherit; font-size: 1rem; line-height: 1.5; border: 1px solid #8a8f96; border-radius: var(--radius-klein); background: #fff; color: var(--text); resize: vertical; }
.check textarea:focus { outline: 3px solid var(--akzent); outline-offset: 1px; }
.werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: .75rem; margin: 1rem 0; }
.werte div { border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: .6rem .8rem; background: var(--flaeche); }
.werte dt { font-size: .85rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-leise); }
.werte dd { margin: .2rem 0 0; font-size: 1.5rem; font-weight: 700; color: var(--marke); }
.werte dd span { display: block; font-size: .95rem; color: var(--text); }
.lange-saetze li { margin-bottom: .4rem; overflow-wrap: anywhere; }
#check, #preise, #fragen, #auftrag, #so-gehts, #methode { scroll-margin-top: 4.25rem; }
.band .klein-band { margin: 1rem 0 0; font-size: .95rem; }