/* ds/artikel.css — die Gestaltung der Artikel- und Kursseite.
   ⚑ Bis 22.10.2026 stand sie als <style>-Block im Kopf von artikel.html. Seit Percys Entscheid V5
   (Kinder drucken: eine Seite unter kinder-drucken.html) brauchen zwei Seiten dieselbe Kursseite —
   darum hier, unverändert übernommen. Nicht in eine der Seiten zurückkopieren. */
.artikel { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; padding: 28px 56px 64px; align-items: start; }
.galerie__gross { aspect-ratio: 1/1; background: var(--tp-bg-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.galerie__gross img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.galerie__gross.leer::after { content: "kein Bild vorhanden"; font-family: var(--tp-font-sans); font-size: var(--tp-t-klein); letter-spacing: .1em; color: var(--tp-ink-muted); }
.galerie__klein { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
/* ⚑ Die Vorschaubilder sind Knöpfe (Befund B1 vom 11.10.2026: Tastatur, Name, Zustand). Gleiche Maße, gleicher Rand, gleicher Grund
   wie die frühere `<img>` — die Zurücksetzung nimmt dem Knopf, was der Browser mitbringt. Der Fokusring kommt aus colors_and_type.css. */
.galerie__klein button { width: 74px; height: 56px; padding: 0; margin: 0; background: var(--tp-bg-soft); cursor: pointer;
                         border: 1px solid transparent; font: inherit; color: inherit; line-height: 0; display: block; }
.galerie__klein button img { width: 100%; height: 100%; object-fit: contain; display: block; }
.galerie__klein button.on { border-color: var(--tp-yellow); }
/* ⚑ Im erzwungenen Farbmodus (Windows-Hochkontrast) werden alle Rahmen gleichfarbig — der gewählte Zustand bräuchte sonst eine Farbe, die es dort nicht gibt.
   Der Innenumriss darf den Fokusring nicht überdecken (Kritiker C, Befund 1): `.on` ist spezifischer als `:focus-visible` und hielt den Ring bei −3 px, «gewählt + Fokus»
   sah aus wie «gewählt». Mit Fokus liegt der Ring außen (2 px); ohne Fokus bleibt der gewählte Zustand als Innenumriss sichtbar. */
@media (forced-colors: active) { .galerie__klein button.on { outline: 3px solid Highlight; outline-offset: -3px; } .galerie__klein button.on:focus-visible { outline-offset: 2px; } }
/* ⚑ Die alten Regeln für `<img>` als Vorschau bleiben ZUSÄTZLICH stehen (Kritiker B, Befund B2): `_deploy_live.py` lädt erst alle Skripte, zuletzt die Seiten, und beim
   Zurückspielen läuft es ebenso. Käme die neue Seite mit dem ALTEN Skript zusammen (Rückweg), erschienen sonst alle elf Fotos als 800-px-Bilder untereinander (gemessen:
   Seite 1846 → 11 857 px hoch). Mit diesen vier Zeilen sieht auch dieser Zwischenzustand richtig aus. Sie dürfen weg, wenn kein Rückweg mehr gebraucht wird. */
.galerie__klein > img { width: 74px; height: 56px; object-fit: contain; background: var(--tp-bg-soft); cursor: pointer; border: 1px solid transparent; }
.galerie__klein > img.on { border-color: var(--tp-yellow); }
.sku { font-family: var(--tp-font-sans); font-size: var(--tp-t-klein); letter-spacing: .1em; color: var(--tp-ink-muted); }
h1.name { font-family: var(--tp-font-serif); font-size: var(--tp-t-3); line-height: 1.12; margin: 6px 0 10px; }
.pfad { font-family: var(--tp-font-sans); font-size: var(--tp-t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--tp-ink-muted); }
.preiszeile { display: flex; align-items: baseline; gap: 16px; margin: 18px 0 6px; }
.preis { font-family: var(--tp-font-serif); font-weight: 600; font-size: var(--tp-t-3); }
.mwst { font-family: var(--tp-font-sans); font-size: var(--tp-t-klein); color: var(--tp-ink-muted); }
.lager { font-family: var(--tp-font-sans); font-size: var(--tp-t-klein); letter-spacing: .06em; margin-bottom: 18px; }
.text { font-family: var(--tp-font-serif); font-size: var(--tp-t-5); line-height: 1.6; max-width: var(--tp-content-max); }
.text--fehlt { color: var(--tp-ink-muted); font-style: italic; font-size: var(--tp-t-klein); }
/* Absätze im Artikeltext (aus dem ERP: eine Leerzeile trennt). Der letzte schließt bündig ab, damit der Abstand zum Folgenden der alte bleibt. */
.text p { margin: 0 0 .8em; }
.text p:last-child { margin-bottom: 0; }
.text a { overflow-wrap: anywhere; }
.sprachen { display: flex; gap: 6px; margin: 0 0 14px; }
.sprachen button { font-family: var(--tp-font-sans); font-size: var(--tp-t-klein); letter-spacing: .06em; text-transform: uppercase;
                   padding: 4px 10px; border: 1px solid var(--tp-border); background: none; cursor: pointer; }
.sprachen button.on { background: var(--tp-yellow); border-color: var(--tp-yellow); font-weight: 700; }
/* Die Rückzeile in die Sammlung (Etappe 4.1b). Haarlinie statt Fläche — §4 der
   Hausordnung; der Block soll die Bestellung nicht überstimmen, sondern folgen. */
.sml { margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--tp-border); }
.sml p { margin: 6px 0 0; font-family: var(--tp-font-sans); font-size: var(--tp-t-klein); line-height: 1.5; }
.sml a { text-decoration: none; }
.sml a:hover { background: linear-gradient(transparent 58%, var(--tp-yellow) 58%); }
.sml__zusatz { color: var(--tp-ink-muted); font-size: var(--tp-t-klein); }
/* Die Kompatibilitätsleiste — dieselbe Form wie im Teileverzeichnis. */
.sml__maclabel { font-family: var(--tp-font-sans); font-size: var(--tp-t-label); letter-spacing: .16em;
  text-transform: uppercase; color: var(--tp-ink-muted); margin: 12px 0 7px; }
.sml__mac { display: flex; flex-wrap: wrap; }
.sml__mac a { font-family: var(--tp-font-sans); font-size: var(--tp-t-klein); font-weight: 700;
  border: 1px solid var(--tp-black); padding: 6px 13px; margin: 0 -1px -1px 0;
  min-width: 56px; text-align: center; text-decoration: none; }
.sml__mac a:hover { background: var(--tp-yellow); }
.auszaehlung { margin-top: 26px; border-top: 1px solid var(--tp-border); padding-top: 16px;
    display: flex; gap: 18px; align-items: flex-start; }
/* ⚑ Nunito Sans statt Mono — Percy 11.09.2026: keine Mono-Schrift auf der Website. */
.auszaehlung__marke { font-family: var(--tp-font-sans); font-size: var(--tp-t-klein); font-weight: 700;
    letter-spacing: .08em; border: 2px solid var(--tp-ink); padding: 8px 7px; line-height: 1; }
.auszaehlung__txt { font-family: var(--tp-font-sans); font-size: var(--tp-t-klein); line-height: 1.5; }
.auszaehlung__txt a { color: var(--tp-ink); font-weight: 700; text-decoration: none;
    background: linear-gradient(transparent 58%, var(--tp-yellow) 58%); }
.auszaehlung__erklaer { display: block; color: var(--tp-ink-muted); margin-top: 3px; }
/* ⚑ `gap: 20px` dazu am 06.09.2026 (Percy: kein Veto gegen den Befund). Gemessen auf
   dieser Seite und auf teil.php bei 1400 UND 375 px: die kleinste Lücke zwischen
   Bezeichnung und Wert ist 101 px — der Abstand kommt heute nie zum Tragen. Er ist ein
   Sicherheitsnetz, damit eine lange Angabe nicht an ihre Bezeichnung stösst.
   ⚑⚑ Diese Regel bleibt bewusst IN DER SEITE und wandert nicht nach shared.css:
   so-gut-wie-alt.html trägt `.daten` mit zwanzig <div> darin und meint damit etwas
   ganz anderes (`.tps-table__row`). Ein geteiltes `.daten div` würde die alle zu
   Flex-Zeilen mit Trennlinie und 11-px-Schrift machen. driftmass.py warnt an der
   Zeile davor; die Warnung stimmt. */
.anfrage { margin-top: 26px; padding: 18px 20px; background: var(--tp-bg-soft); font-family: var(--tp-font-sans); font-size: var(--tp-t-klein); line-height: 1.55; }
/* ⚑⚑ Hier stand bis 06.09.2026 eine eigene `.zurueck`-Regel. Percy-Entscheid:
   «Auf den Hauslink umstellen — .zurueck fällt weg.» Der Hauslink `.tps-link`
   steht in `shared.css` und war in Grad, Strichstärke, Sperrung und Versalien
   schon buchstäblich dasselbe; unterschieden hat sich nur die gelbe Linie
   (2-px-Rahmen gegen Unterstreichung mit 4 px Abstand). */

/* Bestellen */
.bestellen { margin-top: 26px; border-top: 3px solid var(--tp-yellow); padding-top: 18px; }
/* ⚑ Überschrift der zweiten Ebene (vorher h3: die Seite sprang von h1 auf h3, Befund S3). Das Aussehen bleibt das der h3 — `line-height`
   ausdrücklich, weil h2 und h3 in colors_and_type.css verschiedene Zeilenhöhen mitbringen. */
.bestellen h3, .bestellen h2 { font-family: var(--tp-font-sans); font-size: var(--tp-t-label); font-weight: 700; letter-spacing: .15em;
                text-transform: uppercase; margin: 0 0 12px; line-height: var(--tp-leading-snug); }   /* h3 bleibt zusätzlich: Rückweg, siehe oben */
.bestellen .hinweis { font-family: var(--tp-font-sans); font-size: var(--tp-t-klein); line-height: 1.55;
                      color: var(--tp-ink-muted); margin: 0 0 14px; max-width: var(--tp-content-max); }
.feldgitter { margin-bottom: 14px; }
.feld label { font-family: var(--tp-font-sans); font-size: var(--tp-t-klein); letter-spacing: .06em; color: var(--tp-ink-muted); }
.feld input, .feld select { font-family: var(--tp-font-serif); font-size: var(--tp-t-klein); padding: 7px 9px;
                            border: 1px solid var(--tp-border); background: var(--tp-white); }
.feld input.leer, .feld select.leer { border-color: var(--tp-alert); }
.ankreuz { display: flex; align-items: center; gap: 8px; font-family: var(--tp-font-sans);
           font-size: var(--tp-t-klein); margin-bottom: 14px; }
/* Terminliste eines Kurses — an der Stelle, wo sonst Menge und Korb stehen. */
.kterm { list-style: none; margin: 0 0 18px; padding: 0; }
.kterm li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
            font-family: var(--tp-font-serif); font-size: var(--tp-t-klein); padding: 8px 0;
            border-bottom: 1px solid var(--tp-border); }
.kterm small { font-family: var(--tp-font-sans); font-size: var(--tp-t-klein); letter-spacing: .04em;
               color: var(--tp-ink-muted); display: block; }
.kaufzeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kaufzeile input[type=number] { width: 68px; font-family: var(--tp-font-serif); font-size: var(--tp-t-klein);
                                padding: 7px 9px; border: 1px solid var(--tp-border); }
/* ⚑⚑ Hier stand bis 06.09.2026 ein EIGENER Knopf `.knopf` — 11 px statt 15,
   Sperrung .1em statt .14em, und zwischen den beiden Seiten auch noch
   verschieden gepolstert (11/22 gegen 13/26). Das Haus hat einen Knopf,
   `.tp-btn` im Markup von 16 Dateien; hier lief ein zweites System daneben.
   Percy-Entscheid 06.09.2026: «Auf den Hausknopf umstellen — .knopf fällt weg.»
   ⚑ Dabei ist aufgefallen, dass `.tp-btn` gar keinen `:disabled`-Zustand hatte.
   Der steht jetzt in `ds/site.css`, nach den Farbvarianten (sonst gewinnt
   `--yellow` bei gleicher Spezifität und ein abgeschalteter Kaufknopf bliebe
   leuchtend gelb). */
.gelegt { font-family: var(--tp-font-sans); font-size: var(--tp-t-klein); margin-top: 10px; }
.gelegt a { color: inherit; }
@media (max-width: 820px) { .artikel { grid-template-columns: 1fr; padding: 20px; gap: 24px; } }
/* ⚑ Der Hinweis auf Werkstattzeit und Rückgabe-Ausschluss. Haarlinie statt Fläche
   (Hausordnung §4), und er steht VOR dem Knopf — wer ihn erst darunter läse, hätte
   schon geklickt. */
/* ── Kursseite (Percy-Freigabe 21.10.2026, Vorschau `_vorschau/kursseite-2026-10-21`) ──
   Bild links, Titel und Faktenbox rechts; darunter über die ganze Breite Ablauf, Text,
   Kursleitung und «Gut zu wissen» (Percy: «warum nutzt du am Desktop beim unteren Bereich
   nicht die gesamte Breite?»). Auf dem Handy alles untereinander, Faktenbox im ersten Bildschirm. */
.kurs { row-gap: 32px; }
.kurs .galerie__gross { aspect-ratio: 4/3; }
.kurs .galerie__gross img { object-fit: cover; mix-blend-mode: normal; }
.kurs__kicker { font-family: var(--tp-font-sans); font-size: var(--tp-t-label); letter-spacing: .15em; text-transform: uppercase; color: var(--tp-ink-muted); margin: 0 0 6px; }
.kurs h1.name { font-size: var(--tp-t-2); line-height: 1.05; margin: 0; }
.kurs__unter { font-family: var(--tp-font-serif); font-size: var(--tp-t-4); line-height: 1.35; margin: 8px 0 20px; }
.kurs__fakten { margin-top: 0; background: var(--tp-white, #fff); border-top: 4px solid var(--tp-yellow); padding: 18px 20px 16px; }
.kurs__fakten dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; margin: 0 0 16px; }
.kurs__fakten dt { font-family: var(--tp-font-sans); font-size: var(--tp-t-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tp-ink-muted); padding-top: 5px; }
.kurs__fakten dd { margin: 0; font-family: var(--tp-font-serif); font-size: var(--tp-t-5); line-height: 1.35; }
.kurs__fakten dd small { display: block; font-size: var(--tp-t-klein); color: var(--tp-ink-muted); line-height: 1.45; margin-top: 2px; }
.kurs__fakten .kterm { margin: 0; }
.kurs__fakten .kterm li { padding: 4px 0; }
.kurs__fakten #anmelden, .kurs__gut [data-anmelden] { width: 100%; }
.kurs__klein { font-family: var(--tp-font-sans); font-size: var(--tp-t-klein); color: var(--tp-ink-muted); text-align: center; margin: 10px 0 0; }
.kurs__breit { grid-column: 1 / -1; }
.kurs__teil h2 { font-family: var(--tp-font-sans); font-size: var(--tp-t-label); font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
                 border-top: 3px solid var(--tp-yellow); padding-top: 14px; margin: 0 0 16px; line-height: var(--tp-leading-snug); }
.kurs__schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.kurs__schritte li { background: var(--tp-white, #fff); padding: 16px; font-family: var(--tp-font-serif); font-size: var(--tp-t-5); line-height: 1.35;
                     hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.kurs__schritte b { display: block; font-family: var(--tp-font-sans); font-size: 26px; color: var(--tp-ink-muted); margin-bottom: 4px; }
.kurs .text { max-width: 72ch; }
.kurs__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.kurs__leitbox { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: start; }
.kurs__leitbox img { width: 160px; aspect-ratio: 3/4; object-fit: cover; display: block; }
.kurs__leitbox p { margin: 0; font-family: var(--tp-font-serif); font-size: var(--tp-t-5); line-height: 1.5; }
.kurs__aussen { color: inherit; text-decoration-color: var(--tp-yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.kurs__gut dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0 0 20px; }
.kurs__gut dt { font-family: var(--tp-font-sans); font-size: var(--tp-t-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tp-ink-muted); padding-top: 5px; }
.kurs__gut dd { margin: 0; font-family: var(--tp-font-serif); font-size: var(--tp-t-klein); line-height: 1.55; }
.kurs__gut .sprachen { margin: 0 0 16px; }
.kurs__haft { display: none; }
@media (max-width: 820px) {
  .kurs { padding: 0 0 32px; gap: 28px; }
  .kurs .galerie__gross { aspect-ratio: 16/10; }
  .kurs .galerie__klein { padding: 0 20px; gap: 6px; margin-top: 6px; }
  .kurs .galerie__klein button { width: 56px; height: 42px; }
  .kurs-rueck { padding: 10px 20px 8px !important; }
  .kurs__kicker { margin-top: -8px; }
  .kurs__unter { margin: 4px 0 14px; }
  .kurs__kopf, .kurs__breit { padding: 0 20px; }
  .kurs__paar { grid-template-columns: 1fr; gap: 28px; }
  .kurs__gut dl { grid-template-columns: 1fr; gap: 2px; }
  .kurs__gut dd { margin-bottom: 10px; }
  .kurs__leitbox { grid-template-columns: 96px 1fr; }
  .kurs__leitbox img { width: 96px; }
  .kurs__schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kurs__schritte li { font-size: 17px; padding: 14px; }
  .kurs__haft { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; gap: 12px; align-items: center;
                background: var(--tp-white, #fff); border-top: 3px solid var(--tp-yellow); padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
                transform: translateY(110%); transition: transform var(--tp-duration, .2s) var(--tp-ease, ease); }
  .kurs__haft.zeigen { transform: none; }
  .kurs__haft span { flex: 1; font-family: var(--tp-font-sans); font-size: 13px; line-height: 1.35; }
  .kurs__haft .kfrei { font-family: var(--tp-font-sans); font-size: 13px; }
  .kurs__haft button { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .kurs__haft { transition: none; } }
.bestellen .eigens { border-top: 1px solid var(--tp-border);
  border-bottom: 1px solid var(--tp-border); padding: 12px 0; margin: 16px 0 4px; }