/* ============================================================
   Kleiderbestellung — Vereinsshop

   Eigenes Stylesheet, damit der Ordner fuer sich funktioniert.
   Farben und Schriftstufen sind dieselben wie im Portal
   (public_html/assets/css/main.css) — sobald das Formular dort
   aufgeht, faellt diese Datei weg.
   ============================================================ */

:root {
    /* Die beiden Vereinsfarben kommen aus `konfig.php` und stehen am <body>.
       Hier stehen sie nochmals als Rueckfall, damit die Seite auch ohne sie
       richtig aussieht. */
    --ci-dunkel:    #0B3C5D;
    --ci-hell:      #17A3DC;

    --text:         #1A1A1A;
    --leise:        #5C6773;
    --rand:         #E3E8ED;
    --flaeche:      #FFFFFF;
    --grund:        #F7F9FB;
    --sanft:        #EEF3F7;
    --erfolg:       #15803D;
    --erfolg-bg:    #F0FDF4;
    --fehler:       #C62828;
    --fehler-bg:    #FDF3F3;
    --hinweis:      #0B3C5D;
    --hinweis-bg:   #EAF6FC;
    --radius:       10px;
    --schatten:     0 1px 3px rgba(11, 60, 93, .10);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

.huelle {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Interne Seiten duerfen breiter. Sie zeigen Tabellen, und eine Tabelle, die
   seitlich rollt, waehrend daneben der halbe Bildschirm leer ist, verliert
   genau die Spalte, wegen der man hinschaut. */
body.intern .huelle { max-width: 1240px; }

a { color: var(--ci-dunkel); }

/* --- Kopf --- */

.kopf {
    background: var(--flaeche);
    border-bottom: 4px solid var(--ci-hell);
    padding: 22px 0 20px;
    margin-bottom: 24px;
}

.kopf__inhalt {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Der Blick aufs Formular, von jeder internen Seite aus. Rechts oben und
   leise: Er beantwortet eine Frage, er ist nicht die Aufgabe der Seite. */
.kopf__formular {
    margin-left: auto;
    align-self: flex-start;
    padding: 8px 14px;
    border: 1px solid var(--rand);
    border-radius: 7px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ci-dunkel);
    text-decoration: none;
    white-space: nowrap;
}

.kopf__formular:hover { background: var(--sanft); }

/* Ueberschrift und die Handlung dazu in einer Zeile. Der Export gehoert zu
   der Liste, die er ausgibt, und nicht in die Navigation: Dort stand
   «Sammelliste als CSV» auch auf der Lagerseite. */
.karte__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.karte__kopf h2 { margin: 0; }

/* Mehr als eine Handlung neben der Ueberschrift. Die laute steht rechts
   aussen: Es gibt genau eine Hauptaktion je Ansicht. */
.karte__aktionen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Ein Hinweisstreifen mit der Handlung daneben. Der Export haengt an dem,
   was er ausgibt — nicht an der Navigation. */
.frist--mit-knopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.frist--mit-knopf p { margin: 0; }

/* Der leise Knopf steht hier neben Fliesstext und nicht unter einem
   Formular: Dieselbe Groesse waere ein zweiter Absender. */
.frist--mit-knopf .knopf,
.karte__kopf .knopf { padding: 8px 14px; font-size: .8125rem; }

.kopf__logo {
    height: 58px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* Reiter der internen Seiten. Als Absatz mit Knoepfen brach die Reihe
   unregelmaessig um; als eigene Leiste steht sie sauber. */
.navi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 20px;
    padding: 6px;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}

.navi a {
    padding: 8px 14px;
    border-radius: 7px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ci-dunkel);
    text-decoration: none;
    white-space: nowrap;
}

.navi a:hover { background: var(--sanft); }

.navi a[aria-current="page"] { background: var(--ci-dunkel); color: #fff; }

.navi__rechts { margin-left: auto; }

/* Zwei Sichten derselben Seite, nicht zwei Seiten. Leiser als die
   Navigation darueber: Wer hier klickt, wechselt den Blick, nicht den Ort. */
.navi--sichten {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 12px;
}

.navi--sichten a { border: 1px solid var(--rand); }
.navi--sichten a[aria-current="page"] { border-color: var(--ci-dunkel); }

.kopf__verein {
    font-size: .75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ci-hell);
    font-weight: 700;
}

.kopf h1 {
    margin: 2px 0 0;
    font-size: 1.6rem;
    line-height: 1.25;
    color: var(--ci-dunkel);
}

.kopf__text {
    margin: 10px 0 0;
    color: var(--leise);
    font-size: .9375rem;
    max-width: 62ch;
}

/* --- Bausteine --- */

.karte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 20px;
    margin-bottom: 20px;
}

.karte h2 {
    margin: 0 0 4px;
    font-size: 1.125rem;
}

.karte--erfolg { border-left: 3px solid var(--erfolg); }

.leise { color: var(--leise); font-size: .8125rem; font-weight: 400; }

.rechts { text-align: right; white-space: nowrap; }

.frist {
    background: var(--hinweis-bg);
    border-left: 3px solid var(--hinweis);
    border-radius: var(--radius);
    padding: 12px 16px;
    font-size: .9375rem;
    margin: 0 0 20px;
}

.meldung {
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: .9375rem;
}

.meldung--fehler {
    background: var(--fehler-bg);
    border-left: 3px solid var(--fehler);
}

.meldung--erfolg {
    background: var(--erfolg-bg);
    border-left: 3px solid var(--erfolg);
}

/* Was der Verein dazugeschrieben hat. Weder Fehler noch Erfolg — eine
   Auskunft, und die traegt die Hinweisfarbe. */
.meldung--hinweis {
    background: var(--hinweis-bg);
    border-left: 3px solid var(--hinweis);
}

.meldung ul { margin: 6px 0 0; padding-left: 20px; }

/* --- Felder --- */

.raster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
}

.feld { display: flex; flex-direction: column; gap: 4px; }
.feld--breit { grid-column: 1 / -1; }
.feld--schmal { max-width: 110px; }

.feld label,
.feld > span {
    font-size: .8125rem;
    font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
    font: inherit;
    font-size: .9375rem;
    padding: 9px 10px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background: #fff;
    color: inherit;
    width: 100%;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--ci-hell);
    outline-offset: 1px;
    border-color: var(--ci-hell);
}

textarea { resize: vertical; }

.wahl {
    border: 0;
    border-top: 1px solid var(--rand);
    margin: 18px 0 0;
    padding: 16px 0 0;
}

.wahl legend { font-size: .8125rem; font-weight: 600; padding: 0; }

.wahl__option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9375rem;
    margin-top: 6px;
    cursor: pointer;
}

.wahl__option input { width: auto; }

/* Honeypot — sichtbar nur fuer Bots. */
.falle {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Artikel --- */

.artikel {
    border-top: 1px solid var(--rand);
    padding: 16px 0 4px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.artikel__inhalt { flex: 1 1 auto; min-width: 0; }

/* Das Bild ist eine Hilfe beim Wiedererkennen, keine Werbeflaeche —
   feste Breite, damit die Zeilen untereinander stehen. */
.artikel__bild {
    flex: 0 0 84px;
    width: 84px;
    height: 104px;
    border: 1px solid var(--rand);
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.artikel__bild img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.artikel__bild--leer { background: var(--sanft); border-style: dashed; }

.artikel--fehler {
    border-left: 3px solid var(--fehler);
    padding-left: 12px;
    background: var(--fehler-bg);
}

.artikel__kopf {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.artikel__name { font-weight: 600; }

.artikel__modell { color: var(--leise); font-size: .8125rem; }

.artikel__hinweis {
    color: var(--hinweis);
    font-size: .8125rem;
    margin-top: 4px;
    max-width: 46ch;
}

.artikel__preis { font-weight: 600; white-space: nowrap; }

/* Rabatt: der neue Preis mit Badge, der alte durchgestrichen darunter. */
.artikel__preis--rabatt { text-align: right; color: var(--fehler); }
.artikel__statt {
    display: block;
    color: var(--leise);
    font-size: .8125rem;
    font-weight: 400;
}
.marke--rabatt {
    background: var(--fehler);
    color: var(--flaeche);
    margin: 0 4px 0 0;
}

/* Nur fuer Screenreader: «statt» vor dem durchgestrichenen Preis. */
.u-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Eine Zeile je Groesse. Ein Teil in zwei Groessen ist der Normalfall,
   wenn jemand fuer sich und fuer das Kind bestellt. */
.zeile {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.zeile .feld:first-child { flex: 1 1 200px; }

/* Ein Satz neben einem Haekchen. Er soll umbrechen statt die Zeile zu
   sprengen, und auf dem Telefon unter das Haekchen rutschen. */
/* Der Druck, unter dem ein Bestand gezaehlt wird. Klein und ruhig: Es ist
   eine Zwischenueberschrift in einer Karte, keine eigene Sektion. */
.lager__riege {
    font-size: .8125rem;
    font-weight: 600;
    margin: 14px 0 6px;
    color: var(--text);
}

.lager__riege--offen { color: var(--fehler); }

.zeile__erklaerung {
    flex: 1 1 320px;
    margin: 0;
    padding-bottom: 2px;
}

.zeile__betrag {
    font-weight: 600;
    font-size: .9375rem;
    padding-bottom: 9px;
    min-width: 84px;
}

.zeile__weg {
    border: 1px solid var(--rand);
    background: var(--flaeche);
    color: var(--leise);
    border-radius: 8px;
    width: 34px;
    height: 38px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    margin-bottom: 1px;
}

.zeile__weg:hover { border-color: var(--fehler); color: var(--fehler); }

.knopf--text {
    background: none;
    border: 0;
    padding: 6px 0 2px;
    margin-top: 4px;
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ci-dunkel);
    cursor: pointer;
}

.knopf--text:hover { color: var(--ci-hell); }

/* Ein- und Ausblenden ueber die Klasse, nie ueber einen Inline-Style:
   der gewinnt gegen jede Regel und laesst sich danach nicht zuruecknehmen. */
/* Knopf und Erklaerung nebeneinander, auf dem Telefon untereinander.
   Dieselbe Mechanik wie `.zeile`, aber ohne deren Feldbreiten. */
.u-reihe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

/* Rohe Antwort eines Servers. Umbricht statt seitlich zu rollen — auf dem
   Telefon ist ein waagrechter Balken unter einer JSON-Zeile unbedienbar. */
.rohtext {
    background: var(--sanft);
    border-radius: 8px;
    padding: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 6px 0 14px;
}

.u-weg.u-weg.u-weg { display: none; }

/* Der Schnitt gehoert zum Namen, ist aber nicht der Name. */
.schnitt {
    font-weight: 400;
    color: var(--leise);
}

.marke {
    display: inline-block;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    vertical-align: 2px;
    margin-left: 4px;
}

.marke--pflicht { background: var(--sanft); color: var(--leise); }

/* Artikelnummern je Schnitt — nebeneinander, weil sie zusammengehoeren. */
.nummern {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.feld--nummer { flex: 0 1 150px; }
.zeile--links .feld:first-child { flex: 0 1 150px; }

input[type="file"] {
    font: inherit;
    font-size: .8125rem;
    padding: 6px 0;
    width: 100%;
}

/* Eine fehlende Artikelnummer soll auffallen — mit ihr wird bestellt. */
.fehlt { color: var(--fehler); font-size: .8125rem; }
.marke--hervor { background: var(--hinweis-bg); color: var(--ci-dunkel); }

/* --- Abschluss --- */

.abschluss {
    position: sticky;
    bottom: 0;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.abschluss__summe { flex: 1 1 220px; }

/* Der Hinweis auf AGB und Datenschutz: eine eigene Zeile unter Summe und
   Knopf, klein, aber in der festen Leiste und damit beim Absenden sichtbar. */
.abschluss__recht {
    flex: 1 1 100%;
    margin: 0;
    font-size: .75rem;
    line-height: 1.4;
    color: var(--leise);
}

.abschluss__recht a,
.fuss__recht a { color: inherit; text-decoration: underline; }

.abschluss__zeile {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 1rem;
}

.abschluss__zeile--klein { font-size: .8125rem; color: var(--leise); }

.knopf {
    display: inline-block;
    background: var(--ci-dunkel);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 12px 22px;
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.knopf:hover { background: var(--ci-hell); }

/* Die offene Zahlung: zuoberst auf der Bestaetigung, umrandet und mit dem
   Betrag gross. Der Knopf geht ueber die ganze Breite, damit er auf dem
   Telefon nicht neben einem Satz verschwindet. */
.zahlbox {
    margin: 14px 0 18px;
    padding: 16px;
    border: 2px solid var(--ci-dunkel);
    border-radius: var(--radius);
    background: var(--hinweis-bg);
}

.zahlbox__kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-weight: 600;
}

.zahlbox__kopf strong { font-size: 1.5rem; color: var(--ci-dunkel); }

.zahlbox__text { margin: 8px 0 14px; }

.knopf--breit {
    display: block;
    width: 100%;
    padding: 15px 20px;
    font-size: 1.0625rem;
    text-align: center;
}

.zahlbox__klein { margin: 10px 0 0; font-size: .8125rem; color: var(--leise); }

.knopf--leise {
    background: transparent;
    color: var(--ci-dunkel);
    border: 1px solid var(--rand);
}

.knopf--leise:hover { background: var(--sanft); color: var(--ci-dunkel); }

/* --- Tabelle --- */

.tabelle {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: .9375rem;
}

.tabelle td { padding: 6px 0; border-bottom: 1px solid var(--rand); }

.tabelle__summe td { font-weight: 700; border-bottom: 0; }

.tabelle th {
    text-align: left;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--leise);
    padding: 6px 0;
    border-bottom: 1px solid var(--rand);
}

/* --- Fuss --- */

.fuss {
    padding: 24px 16px 40px;
    font-size: .875rem;
    color: var(--leise);
}

.fuss p { margin: 4px 0; }

@media (max-width: 560px) {
    .raster { grid-template-columns: 1fr; }
    .artikel__kopf { flex-direction: column; }
    .artikel__bild { flex-basis: 64px; width: 64px; height: 80px; }

    /* `flex: 1 1 220px` wirkt in einer Spalte als Hoehe: Die Summenflaeche
       war 220 Pixel hoch und die Leiste damit ein Drittel des Telefons.
       Hier zaehlt der Inhalt, nicht eine Grundbreite von der Sicht daneben. */
    .abschluss {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 16px;
    }

    .abschluss__summe { flex: 0 0 auto; }

    /* Groesse und Anzahl nebeneinander. Untereinander wird jeder Artikel
       so hoch, dass auf dem Telefon kaum zwei davon aufs Mal zu sehen sind. */
    .zeile .feld:first-child { flex: 1 1 110px; }
    .feld--schmal { max-width: 80px; }
    .zeile__betrag { min-width: 0; padding-bottom: 0; width: 100%; }

    .knopf { width: 100%; text-align: center; }

    .kopf { padding: 18px 0 16px; }
    .kopf h1 { font-size: 1.375rem; }
    .kopf__logo { height: 44px; max-width: 150px; }
    .kopf__text { font-size: .875rem; }
}

/* --- Mini-Inventar: Bestand je Groesse ---

   Ohne Medienabfrage: feste, kleine Felder, die umbrechen. Auf dem Telefon
   stehen vier nebeneinander, am Laptop zehn — dieselbe Regel, kein
   Sonderfall. Gezaehlt wird im Schrank, also mit dem Daumen. */

.groessen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.groessen__feld {
    flex: 0 0 72px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.groessen__feld > span {
    font-size: .75rem;
    font-weight: 600;
    color: var(--leise);
    text-align: center;
}

.groessen__feld input {
    text-align: center;
    /* 16px, nicht kleiner: Darunter zoomt iOS beim Antippen ins Feld hinein
       und die Seite bleibt vergroessert stehen. */
    font-size: 1rem;
    padding: 10px 4px;
}

/* Was da ist, soll man sehen, ohne die Zahlen zu lesen. */
.groessen__feld--voll > span { color: var(--ci-dunkel); }
.groessen__feld--voll input { border-color: var(--ci-dunkel); font-weight: 700; }

/* Neun Spalten passen auf kein Telefon. Schieben statt verstecken: Womit
   bestellt wird, darf nicht davon abhaengen, wie breit der Bildschirm ist. */
.tabelle-rollt { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.tabelle-rollt .tabelle { min-width: 760px; }

/* --- Sortiment: Liste und ein Artikel ---

   Vorher stand jeder Artikel mit allen Feldern untereinander, und wer die
   Hose suchte, scrollte an dreizehn anderen vorbei. Jetzt eine Zeile je
   Artikel, und ein Klick oeffnet genau einen. */

.suche {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 4px 0 8px;
}

.suche input[type="search"] { flex: 1 1 260px; width: auto; }
.suche .knopf { padding: 8px 14px; font-size: .8125rem; }

.sortiment td { vertical-align: middle; padding-right: 12px; }
.sortiment th { padding-right: 12px; }

.sortiment__bild { width: 56px; }

.sortiment__bild a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 54px;
    border: 1px solid var(--rand);
    border-radius: 6px;
    background: var(--sanft);
    overflow: hidden;
}

.sortiment__bild img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; }

.sortiment__name { font-weight: 600; text-decoration: none; }
.sortiment__name:hover { text-decoration: underline; }

/* Ausgeblendet bleibt lesbar, tritt aber zurueck — es ist ja noch da. */
.sortiment--aus td { color: var(--leise); }
.sortiment--aus img { opacity: .5; }

.marke--fehlt { background: var(--fehler-bg); color: var(--fehler); }

/* Zurueck, Position, Nachbarn. Eine Zeile, damit man beim Durcharbeiten
   nicht zur Liste muss. */
.blaettern {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0 0 12px;
    font-size: .9375rem;
}

.blaettern__rechts { display: flex; gap: 16px; align-items: baseline; }

.artikel--offen { border-top: 0; padding-top: 0; gap: 24px; }
.artikel--offen h2 { margin: 0; }

.artikel__spalte {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.artikel__bild--gross { flex: 0 0 auto; width: 220px; height: 270px; }

/* Drei Knoepfe untereinander fuellten auf dem Telefon die halbe Hoehe,
   und die klebende Leiste deckte das Formular zu. Nebeneinander, ohne den
   Hinweissatz — der steht am Laptop, wo Platz ist. */
@media (max-width: 560px) {
    .abschluss--artikel { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
    .abschluss--artikel .abschluss__summe { display: none; }
    .abschluss--artikel .knopf { width: auto; flex: 1 1 auto; padding: 10px 8px; font-size: .8125rem; }
}

@media (max-width: 720px) {
    .artikel--offen { flex-direction: column; }
    .artikel__spalte { flex-basis: auto; width: 100%; }
    .artikel__bild--gross { width: 160px; height: 200px; }
}

/* --- Kategorien und Artikeltexte (LV Winterthur) ---

   Sechzig Artikel in einer Liste sind nur mit Zwischentiteln lesbar. Die
   Sprungmarken stehen oben, damit die Kinder nicht erst nach den Frauen
   und den Maennern kommen. */

.sprung {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 4px;
}

.sprung a {
    padding: 6px 12px;
    border: 1px solid var(--rand);
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.sprung a:hover { background: var(--sanft); }

.kategorie {
    margin: 28px 0 0;
    padding-top: 8px;
    font-size: 1.125rem;
    color: var(--ci-dunkel);
    scroll-margin-top: 12px;
}

.artikel__mehr { margin-top: 10px; font-size: .9375rem; }
.artikel__mehr summary { cursor: pointer; color: var(--ci-dunkel); font-weight: 600; font-size: .875rem; }
.artikel__mehr[open] summary { margin-bottom: 6px; }

.artikel__text { color: var(--text); }
.artikel__text ul { margin: 6px 0; padding-left: 20px; }
.artikel__text p { margin: 6px 0; }
.artikel__text h2, .artikel__text h3, .artikel__text h4 { font-size: .9375rem; margin: 10px 0 4px; }
.artikel__text table { border-collapse: collapse; font-size: .8125rem; margin: 6px 0; }
.artikel__text td, .artikel__text th { border: 1px solid var(--rand); padding: 3px 6px; text-align: left; }

.galerie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.galerie img {
    width: 140px;
    height: 170px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--rand);
    border-radius: 8px;
}

/* --- Wann kommt was (Sammelbestellung) ---

   Die Frage, die bei jeder Runde zurueckkam: «Wo bleibt meine Bestellung?»
   Der Ablauf steht darum vor dem Sortiment, nicht im Kleingedruckten. */

.karte--ablauf { border-left: 4px solid var(--ci-hell); }

.tabelle__gruppe td {
    padding-top: 14px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--leise);
}

.tabelle--bestand td { vertical-align: top; padding-right: 12px; }

.bestand { display: inline-block; margin: 0 10px 2px 0; white-space: nowrap; }
.bestand--ohne-preis { color: var(--fehler); }

.konzept {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.konzept img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rand);
    border-radius: 8px;
}

.ablauf { margin: 8px 0 0; padding-left: 22px; }
.ablauf li { margin: 4px 0; }

.wahl__option--fehler {
    background: var(--fehler-bg);
    border-left: 3px solid var(--fehler);
    padding: 8px 10px;
    border-radius: 6px;
}

/* --- Bild gross (formular.js) --- */

.zoom {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.zoom[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.zoom::backdrop { background: rgba(0, 0, 0, .92); }

.zoom__bild {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 96px);
    object-fit: contain;
    background: var(--flaeche);
    border-radius: 8px;
}

.zoom__zu,
.zoom__pfeil {
    position: fixed;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: var(--text);
    font-size: 1.75rem;
    line-height: 1;
    width: 44px;
    height: 44px;
    cursor: pointer;
}

.zoom__zu { top: 12px; right: 12px; }
.zoom__pfeil { top: 50%; transform: translateY(-50%); }
.zoom__pfeil--zurueck { left: 12px; }
.zoom__pfeil--weiter { right: 12px; }
.zoom--einzeln .zoom__pfeil { display: none; }

.zoom__zahl {
    position: fixed;
    bottom: 12px;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    color: var(--flaeche);
    font-size: .875rem;
}

/* Verbindung eines Artikels zum Lager (Sortiment). */
.verknuepfung { border-left: 3px solid var(--rand); padding-left: 10px; }
.verknuepfung--ja { border-left-color: var(--erfolg); }

/* Mehrere Schritte in einer Zelle: «Bereit zur Abholung» und «Abgeholt». */
.knoepfe { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }

/* --- Auf dem Telefon bedienbar ------------------------------------------

   Die meisten Bestellungen kommen vom Telefon. Gemessen mit einem iPhone 13:
   Radio und Haekchen waren 13 Pixel gross, Auswahlfelder 39, «+ weitere
   Groesse» 29, «Mehr zum Artikel» 22. Ein Finger trifft sicher ab etwa 44.
   Und Eingabefelder unter 16 Pixel Schrift laesst iOS beim Antippen
   hineinzoomen; danach steht das Formular schief im Bild. */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea { font-size: 1rem; min-height: 44px; }

input[type="radio"],
input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
    flex: 0 0 22px;
    accent-color: var(--ci-dunkel);
}

/* Die ganze Zeile ist die Tippflaeche, nicht nur der Kreis. Gewaehlt ist
   sichtbar, auch ohne den Kreis zu treffen. */
.wahl__option {
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    margin-top: 8px;
    line-height: 1.4;
}

.wahl__option input { margin-top: 1px; }
.wahl__option:has(input:checked) { border-color: var(--ci-dunkel); background: var(--sanft); }

.knopf--text { padding: 12px 0; margin-top: 0; min-height: 44px; font-size: .875rem; }

.artikel__mehr summary { padding: 10px 0; }

.sprung a { padding: 10px 16px; }

.zeile__weg { width: 44px; height: 44px; flex: 0 0 44px; }

/* Auf dem Telefon steht der Betrag in einer eigenen Zeile. Das × gehoert
   neben die Auswahl, nicht darunter, sonst steht es allein im Leeren. */
@media (max-width: 640px) {
    .zeile .zeile__weg { order: 2; }
    .zeile .zeile__betrag { order: 3; }
}

/* Der Knopf wartet, bis alles da ist. Er sieht gesperrt aus, bleibt aber
   antippbar: Ein Tipp springt zum ersten fehlenden Feld. Was fehlt, steht
   direkt darunter in der festen Leiste und ist damit beim Absenden sichtbar. */
.knopf.knopf--wartet { background: var(--leise); cursor: not-allowed; }

.abschluss__hinweis {
    flex: 1 1 100%;
    margin: 0;
    font-size: .875rem;
    line-height: 1.4;
    color: var(--ci-dunkel);
}

/* Die Anzahl im Reiter: Auskunft, kein Alarm. */
.navi__zahl { font-weight: 400; opacity: .75; }

/* Ehrenamt: kurzes Formular, die Leiste steht am Ende statt festzukleben.
   Mit ihrem Hinweis waere sie auf dem Telefon ein Drittel des Bildschirms. */
.abschluss.abschluss--ruhig { position: static; box-shadow: none; }