/* ═══════════════════════════════════════════════════════════════════
   SupportZone24 Bilder — Sortimentskatalog
   Bildwelt: der Großhandelskatalog, den jeder Gastronom kennt.
   Papiergrund, Registerfarben, Preisfahnen, Artikelnummern.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Schriften (selbst gehostet, kein Google-Aufruf) ─── */

@font-face {
    font-family: 'Archivo'; font-style: normal; font-weight: 400;
    font-display: swap; src: url('fonts/Archivo-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo'; font-style: normal; font-weight: 500;
    font-display: swap; src: url('fonts/Archivo-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo'; font-style: normal; font-weight: 600;
    font-display: swap; src: url('fonts/Archivo-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo'; font-style: normal; font-weight: 700;
    font-display: swap; src: url('fonts/Archivo-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo Black'; font-style: normal; font-weight: 400;
    font-display: swap; src: url('fonts/ArchivoBlack-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo Narrow'; font-style: normal; font-weight: 600;
    font-display: swap; src: url('fonts/ArchivoNarrow-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo Narrow'; font-style: normal; font-weight: 700;
    font-display: swap; src: url('fonts/ArchivoNarrow-700.woff2') format('woff2');
}

/* ─── Katalog-Tokens ─── */

:root {
    /* Papier und Druckfarbe */
    --papier:        #f2eee2;
    --papier-blatt:  #fdfbf4;
    --papier-tief:   #e6e0cd;
    --tinte:         #16140e;
    --tinte-matt:    #4a463a;
    --tinte-blass:   #6e6959;
    --linie:         #cdc6b0;
    --linie-stark:   #16140e;

    /* Registerfarben je Sortiment */
    --reg-syrien:    #17614a;
    --reg-berlin:    #1a4899;
    --reg-tuerkei:   #a81f22;
    --reg-komplett:  #5f2a80;

    /* Signalfarbe der Preisfahne */
    --signal:        #d93b0a;
    --signal-tief:   #a82c05;

    /* Register der aktuellen Seite — je Seite überschrieben */
    --register:      var(--tinte);

    --schatten-blatt: 0 1px 2px rgba(22,20,14,.10), 0 6px 14px -6px rgba(22,20,14,.22);
    --schatten-hoch:  0 2px 4px rgba(22,20,14,.12), 0 18px 30px -12px rgba(22,20,14,.32);
    --kante:          2px;
}

/* ─── Grundlagen ─── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* Versteckt heißt versteckt. Ohne diese Zeile schlägt jede Klasse mit
   eigenem display (etwa .notiz mit flex) das hidden-Attribut — und
   leere Meldungskästen stehen sichtbar in der Seite. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Sprungmarken landen unterhalb der klebenden Kopf- und Registerleiste —
   greift nur, wenn ohne JavaScript doch einmal neu geladen wird. */
.tafel-eintrag[id], .artikel[id] { scroll-margin-top: 170px; }

/* Notieren schaltet an Ort und Stelle um, ohne die Seite zu bewegen */
.korb-feld[data-drin="0"] .korb-notiert { display: none; }
.korb-feld[data-drin="1"] .korb-form    { display: none; }
.korb-feld .korb-notiert { animation: notiert-an .22s cubic-bezier(.2,.9,.3,1); }
.korb-feld[data-drin="0"] .korb-notiert { animation: none; }

@keyframes notiert-an {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.korb-knopf .zaehler.puls { animation: zaehler-puls .34s cubic-bezier(.2,.9,.3,1); }
@keyframes zaehler-puls {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.32); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    color: var(--tinte);
    background: var(--papier);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'tnum' 0;
}

img { display: block; max-width: 100%; }
a { color: var(--tinte); text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input, select { font: inherit; color: inherit; }

:focus-visible {
    outline: 3px solid var(--signal);
    outline-offset: 2px;
}

/* Der Katalog wächst auf großen Bildschirmen mit, statt einen breiten weißen
   Rand stehen zu lassen. Nie schmaler als die früheren 1240 px, nie breiter
   als 1660 px — sonst werden Fließtextzeilen unlesbar lang und die Seite
   verliert den Katalogcharakter. Die 92vw halten immer etwas Luft am Rand.
   Fließtext ist zusätzlich über max-width: 62ch begrenzt. */
.wrap { max-width: clamp(1240px, 92vw, 1660px); margin: 0 auto; padding: 0 20px; }
.wrap-eng { max-width: 780px; margin: 0 auto; padding: 0 20px; }

/* Nur für Screenreader */
.nur-vorlesen {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Schriftrollen */
.laufschrift {
    font-family: 'Archivo Narrow', 'Archivo', sans-serif;
    font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
}
.zahl { font-variant-numeric: tabular-nums; }

/* ═══════════════ KOPF: Katalog-Impressum ═══════════════ */

.kopfleiste {
    background: var(--tinte);
    color: var(--papier-blatt);
    position: sticky; top: 0; z-index: 60;
    border-bottom: 3px solid var(--signal);
}
.kopfleiste .wrap {
    display: flex; align-items: center; gap: 20px;
    min-height: 62px; padding-top: 8px; padding-bottom: 8px;
}

.marke {
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.22rem; letter-spacing: -.02em; line-height: 1;
    color: var(--papier-blatt); text-decoration: none;
    display: flex; align-items: baseline; gap: 8px; white-space: nowrap;
}
.marke .marke-zusatz {
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--signal); align-self: center;
    border: 1.5px solid var(--signal); padding: 2px 6px;
}

.kopf-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.kopf-nav a {
    font-family: 'Archivo Narrow', sans-serif; font-weight: 600;
    font-size: .84rem; letter-spacing: .07em; text-transform: uppercase;
    color: #d8d3c3; text-decoration: none; padding: 4px 0;
    border-bottom: 2px solid transparent;
}
.kopf-nav a:hover { color: #fff; border-bottom-color: var(--signal); }

.korb-knopf {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--signal); color: #fff !important;
    padding: 9px 15px !important; border-bottom: none !important;
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; font-size: .84rem;
}
.korb-knopf:hover { background: var(--signal-tief); color: #fff !important; }
.korb-knopf .zaehler {
    background: #fff; color: var(--signal); border-radius: 2px;
    min-width: 21px; height: 20px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; font-variant-numeric: tabular-nums;
}

/* Registerleiste — der Griffindex des Katalogs */

.registerleiste {
    background: var(--papier-tief);
    border-bottom: 1px solid var(--linie);
    position: sticky; top: 62px; z-index: 55;
}
.registerleiste .wrap {
    display: flex; gap: 3px; overflow-x: auto; padding-top: 0; padding-bottom: 0;
    scrollbar-width: none;
}
.registerleiste .wrap::-webkit-scrollbar { display: none; }

.reiter {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    padding: 11px 18px 10px;
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    font-size: .84rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--tinte-matt); text-decoration: none;
    border-bottom: 4px solid transparent;
    white-space: nowrap;
}
.reiter .punkt {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--reiter-farbe, var(--tinte-blass));
    flex-shrink: 0;
}
.reiter:hover { color: var(--tinte); background: rgba(255,255,255,.5); }
.reiter[aria-current="page"] {
    color: var(--tinte); background: var(--papier-blatt);
    border-bottom-color: var(--reiter-farbe, var(--tinte));
}
.reiter .anzahl {
    font-size: .74rem; color: var(--tinte-blass);
    font-variant-numeric: tabular-nums; letter-spacing: 0;
}

/* Zweite Registerstufe: die Sortimente des geöffneten Kapitels */
.unterregister {
    background: var(--papier-blatt);
    border-bottom: 1px solid var(--linie);
    position: sticky; top: 104px; z-index: 54;
}
.unterregister .wrap {
    display: flex; gap: 20px; overflow-x: auto;
    padding-top: 0; padding-bottom: 0; scrollbar-width: none;
}
.unterregister .wrap::-webkit-scrollbar { display: none; }
.unterreiter {
    flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
    padding: 9px 0 8px; white-space: nowrap; text-decoration: none;
    font-family: 'Archivo Narrow', sans-serif; font-weight: 600;
    font-size: .82rem; letter-spacing: .05em; text-transform: uppercase;
    color: var(--tinte-blass); border-bottom: 3px solid transparent;
}
.unterreiter:hover { color: var(--tinte); }
.unterreiter[aria-current="page"] {
    color: var(--tinte); border-bottom-color: var(--reiter-farbe, var(--tinte));
}
.unterreiter .anzahl { font-size: .74rem; letter-spacing: 0; }

/* Kapitelüberschrift in der Sortimentsübersicht */
.kapitelkopf {
    margin: 40px 0 20px; padding-bottom: 10px;
    border-bottom: 2px solid var(--tinte);
}
.kapitelkopf:first-of-type { margin-top: 0; }
.kapitelkopf h3 {
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.28rem; letter-spacing: -.025em; line-height: 1;
}
.kapitelkopf p { margin-top: 7px; color: var(--tinte-matt); font-size: .95rem; max-width: 62ch; }

/* ═══════════════ KATALOG-TITELSEITE ═══════════════ */

.titelseite {
    background: var(--tinte);
    color: var(--papier-blatt);
    position: relative; overflow: hidden;
}
.titelseite-innen {
    display: grid; gap: 0;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
    .titelseite-innen { grid-template-columns: minmax(0, 46%) minmax(0, 54%); }
}

.titel-text {
    padding: 54px 20px 48px;
    display: flex; flex-direction: column; justify-content: center;
    max-width: 640px; margin-left: auto; width: 100%;
}
@media (min-width: 900px) {
    .titel-text { padding: 76px 48px 76px 20px; }
}

.ausgabe-zeile {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
    color: #b9b2a0; margin-bottom: 22px;
}
.ausgabe-zeile .strich { width: 34px; height: 2px; background: var(--signal); }

.titel-text h1 {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(2.5rem, 6.4vw, 4.35rem);
    line-height: .95; letter-spacing: -.035em;
    text-wrap: balance; margin-bottom: 20px;
}
.titel-text h1 em {
    font-style: normal; color: var(--signal);
    display: block;
}
.titel-vorspann {
    font-size: 1.08rem; line-height: 1.6; color: #ded8c8;
    max-width: 46ch; margin-bottom: 30px;
}

.titel-fakten {
    display: flex; flex-wrap: wrap; gap: 0;
    border-top: 1px solid #3b372c; border-bottom: 1px solid #3b372c;
    margin-bottom: 30px;
}
.titel-fakten div {
    padding: 14px 22px 14px 0; margin-right: 22px;
    border-right: 1px solid #3b372c;
}
.titel-fakten div:last-child { border-right: 0; margin-right: 0; }
.titel-fakten .wert {
    font-family: 'Archivo Black', sans-serif; font-size: 1.5rem;
    line-height: 1; font-variant-numeric: tabular-nums;
}
.titel-fakten .bezeichnung {
    font-family: 'Archivo Narrow', sans-serif; font-weight: 600;
    font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
    color: #a49d8c; margin-top: 5px;
}

.titel-aktionen { display: flex; flex-wrap: wrap; gap: 12px; }

/* Bildkachelwand der Titelseite */
.titel-bilder {
    display: grid; grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr; gap: 3px; background: #3b372c;
    border-left: 3px solid var(--signal);
}
.titel-bilder figure { margin: 0; position: relative; overflow: hidden; min-height: 150px; }
.titel-bilder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.titel-bilder figure:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 899px) {
    .titel-bilder { border-left: 0; border-top: 3px solid var(--signal); }
}

/* ═══════════════ ABSCHNITTE ═══════════════ */

section { padding: 58px 0; }
section.blatt { background: var(--papier-blatt); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }

.abschnitt-kopf {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    border-bottom: 3px solid var(--tinte); padding-bottom: 12px; margin-bottom: 30px;
}
.abschnitt-kopf h2 {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1;
    letter-spacing: -.03em;
}
.abschnitt-kopf .beipack {
    font-family: 'Archivo Narrow', sans-serif; font-weight: 600;
    font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--tinte-blass); padding-bottom: 3px;
}
.abschnitt-text { max-width: 62ch; color: var(--tinte-matt); margin-bottom: 30px; }

/* ═══════════════ SORTIMENTSKARTEN ═══════════════ */

.sortiment {
    display: grid; gap: 22px;
    /* auto-FIT mit Deckel, und zwar aus zwei Gründen zugleich:
       – auto-fit lässt leere Spalten zusammenfallen. Mit auto-fill blieb auf
         breiten Bildschirmen rechts eine leere vierte Spalte stehen, weil es
         nur drei Länderpakete gibt.
       – Der Deckel von 420 px verhindert das, was vorher gegen auto-fit
         sprach: Ein Kapitel mit nur EINER Karte zieht sie sonst über die
         ganze Breite und das kleine Vorschaubild wird unscharf aufgeblasen.
       min(266px, 100%) schützt zusätzlich sehr schmale Handys vor Überlauf. */
    /* 1fr, damit die Spalten die Breite IMMER restlos aufteilen — kein weißer
       Streifen rechts. Der Schutz gegen die aufgeblasene Einzelkarte sitzt
       eine Ebene tiefer als max-width an .artikel. */
    grid-template-columns: repeat(auto-fit, minmax(min(266px, 100%), 1fr));
}

/* Kapitel mit nur einer Karte (Komplettpaket): die Karte in die Mitte, sonst
   klebt sie links und rechts daneben steht ein breites leeres Feld. */
.sortiment:has(> .artikel:only-child) { justify-items: center; }

.artikel {
    /* Ein Kapitel mit nur EINER Karte (Komplettpaket) darf sie nicht über die
       ganze Breite ziehen — das kleine Vorschaubild würde unscharf. Bei drei
       oder vier Karten greift der Deckel nie, die Reihe füllt sauber aus. */
    max-width: 560px;
    background: var(--papier-blatt);
    border: 1px solid var(--linie);
    border-top: 6px solid var(--register);
    display: flex; flex-direction: column;
    position: relative;
    box-shadow: var(--schatten-blatt);
    transition: transform .18s ease-out, box-shadow .18s ease-out;
}
.artikel:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }

.artikel-bild {
    aspect-ratio: 16/10; background: var(--papier-tief) center/cover no-repeat;
    border-bottom: 1px solid var(--linie);
}

.artikel-kopf {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; padding: 14px 16px 0;
}
.artikelnummer {
    font-family: 'Archivo Narrow', sans-serif; font-weight: 600;
    font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--tinte-blass); font-variant-numeric: tabular-nums;
}
.artikel h3 {
    font-family: 'Archivo Black', sans-serif; font-size: 1.22rem;
    line-height: 1.1; letter-spacing: -.025em; padding: 6px 16px 0;
}
.artikel .beschreibung {
    padding: 8px 16px 0; color: var(--tinte-matt);
    font-size: .94rem; line-height: 1.5; flex: 1;
}

.artikel-daten {
    display: flex; gap: 0; margin: 14px 16px 0;
    border-top: 1px solid var(--linie);
    font-size: .82rem;
}
.artikel-daten div { padding: 8px 12px 8px 0; margin-right: 12px; border-right: 1px solid var(--linie); }
.artikel-daten div:last-child { border-right: 0; }
.artikel-daten .k {
    font-family: 'Archivo Narrow', sans-serif; font-weight: 600;
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--tinte-blass); display: block;
}
.artikel-daten .v { font-weight: 600; font-variant-numeric: tabular-nums; }

.artikel-fuss {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px 16px; margin-top: 14px;
    border-top: 1px solid var(--linie);
}
.artikel-fuss form { flex: 1; }

/* Preisfahne — das gekerbte Preisschild des Katalogs */
.preisfahne {
    display: inline-flex; flex-direction: column; align-items: flex-start;
    background: var(--signal); color: #fff;
    padding: 7px 16px 7px 12px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%);
    padding-right: 24px;
}
.preisfahne .betrag {
    font-family: 'Archivo Black', sans-serif; font-size: 1.42rem;
    line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.preisfahne .einheit {
    font-family: 'Archivo Narrow', sans-serif; font-weight: 600;
    font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
    opacity: .92; margin-top: 3px;
}

/* Ecklasche „Bestes Angebot" */
.lasche {
    position: absolute; top: 0; right: 0; z-index: 2;
    background: var(--tinte); color: var(--papier-blatt);
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
    padding: 6px 12px;
}

/* Rabatt-Aktion: Lasche in Signalfarbe + durchgestrichener Normalpreis */
.lasche-rabatt { background: var(--signal); color: #fff; }
.preis-alt {
    font-family: 'Archivo Narrow', sans-serif; font-weight: 600;
    font-variant-numeric: tabular-nums; text-decoration: line-through;
    opacity: .75; font-size: .82rem; line-height: 1; margin-bottom: 3px;
}
.tafel-preis .preis-alt { margin-right: 6px; font-size: .78rem; opacity: .6; }

/* ═══════════════ KNÖPFE ═══════════════ */

.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    font-size: .92rem; letter-spacing: .07em; text-transform: uppercase;
    padding: 13px 20px; border: 2px solid var(--tinte);
    background: var(--tinte); color: var(--papier-blatt);
    text-decoration: none; cursor: pointer; border-radius: var(--kante);
    transition: background .15s, color .15s, transform .1s;
}
.knopf:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.knopf:active { transform: translateY(1px); }
.knopf[disabled] { opacity: .45; cursor: default; }
.knopf[disabled]:hover { background: var(--tinte); border-color: var(--tinte); }

.knopf-signal { background: var(--signal); border-color: var(--signal); color: #fff; }
.knopf-signal:hover { background: var(--signal-tief); border-color: var(--signal-tief); }

.knopf-leer { background: transparent; color: var(--tinte); }
.knopf-leer:hover { background: var(--tinte); color: var(--papier-blatt); border-color: var(--tinte); }

.knopf-hell { background: var(--papier-blatt); color: var(--tinte); border-color: var(--tinte); }
/* Bestätigungszustände („Notiert“) bleiben beim Überfahren ruhig —
   Orange gehört den Kaufaktionen */
.knopf-hell:hover { background: var(--papier-tief); border-color: var(--tinte); color: var(--tinte); }

.knopf-voll { width: 100%; }
.knopf-gross { padding: 16px 26px; font-size: 1rem; }
.knopf-klein { padding: 7px 12px; font-size: .78rem; border-width: 1.5px; }

/* Grundgröße für frei stehende Icons im Text — Knöpfe überschreiben das */
svg.zeichen { width: 1.05em; height: 1.05em; vertical-align: -0.18em; }
.knopf .zeichen { width: 17px; height: 17px; flex-shrink: 0; }

/* ═══════════════ BILDTAFEL (Galerie) ═══════════════ */

.bildtafel {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
}

.tafel-eintrag {
    background: var(--papier-blatt); border: 1px solid var(--linie);
    display: flex; flex-direction: column; position: relative;
    box-shadow: var(--schatten-blatt);
    transition: transform .16s ease-out, box-shadow .16s ease-out;
}
.tafel-eintrag:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); }

.tafel-bild {
    position: relative; aspect-ratio: 4/3; overflow: hidden;
    background: var(--papier-tief); cursor: zoom-in; border: 0; padding: 0;
    display: block; width: 100%;
}
/* Die WebP-Hülle darf das Layout nicht verändern — das Bild soll sich
   genauso verhalten wie ohne sie. */
.tafel-bild picture { display: contents; }
.tafel-bild img { width: 100%; height: 100%; object-fit: cover; }
.tafel-bild.hoch { aspect-ratio: 3/4; }

/* Logo-Kachel: quadratisch wie die Datei, damit nichts abgeschnitten wird.
   „contain“ ist die Rückversicherung, falls doch einmal ein nicht ganz
   quadratisches Zeichen dazwischenrutscht — dann steht es vollständig da,
   statt beschnitten zu werden. Ein feiner Rand trennt helle Logos vom Papier. */
.tafel-bild.quadrat { aspect-ratio: 1; background: #fff; }
.tafel-bild.quadrat img { object-fit: contain; }
.tafel-eintrag:has(.tafel-bild.quadrat) { box-shadow: inset 0 0 0 1px rgba(22,20,14,.10); }

.format-marke {
    position: absolute; left: 8px; top: 8px;
    background: rgba(22,20,14,.85); color: var(--papier-blatt);
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
    padding: 3px 7px;
}

.tafel-fuss {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 9px 10px;
    border-top: 1px solid var(--linie);
}
.tafel-nummer {
    font-family: 'Archivo Narrow', sans-serif; font-weight: 600;
    font-size: .7rem; letter-spacing: .06em; color: var(--tinte-blass);
    font-variant-numeric: tabular-nums; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.tafel-preis {
    font-family: 'Archivo Black', sans-serif; font-size: .92rem;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Der Gerichtname — was der Gastronom sucht, steht vor der Nummer */
.tafel-titel {
    padding: 9px 10px 0; font-weight: 600; font-size: .94rem;
    line-height: 1.25; letter-spacing: -.01em;
}
/* Der Titel nimmt den Rest der Höhe ein. Dadurch stehen Preiszeile und
   Notieren-Knopf in einer Reihe immer auf gleicher Höhe, egal ob der Titel
   ein- oder zweizeilig läuft — vorher wirkte die Tafel unruhig. */
.tafel-titel { flex: 1 0 auto; }

/* Untergruppen im Sortiment: Getränke stehen nicht zwischen den
   Hauptgerichten, sondern unter ihrer eigenen Überschrift */
.gruppenkopf {
    display: flex; align-items: baseline; gap: 12px;
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    font-size: .84rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--tinte); margin: 34px 0 14px;
    padding-bottom: 7px; border-bottom: 2px solid var(--register);
}
.gruppenkopf:first-of-type { margin-top: 4px; }
.gruppenkopf .gruppenzahl {
    font-weight: 600; font-size: .78rem; letter-spacing: .04em;
    color: var(--tinte-blass); margin-left: auto;
}

/* Stichwortsuche */
.kopf-suche {
    display: flex; align-items: center; gap: 8px; margin-left: auto;
    background: rgba(255,255,255,.09); border: 1.5px solid #3b372c;
    padding: 0 12px; height: 38px; border-radius: var(--kante);
}
.kopf-suche svg { width: 15px; height: 15px; color: #a49d8c; flex-shrink: 0; }
.kopf-suche input {
    background: transparent; border: 0; outline: none; width: 150px;
    color: var(--papier-blatt); font-size: .92rem; padding: 0;
}
.kopf-suche input::placeholder { color: #8b8471; }
.kopf-suche:focus-within { border-color: var(--signal); background: rgba(255,255,255,.14); }
.kopf-nav { margin-left: 16px !important; }

.suchblatt {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch;
    background: var(--papier-blatt); border: 1px solid var(--linie);
    box-shadow: var(--schatten-blatt); padding: 14px;
}
.suchblatt input {
    flex: 1; min-width: 220px; padding: 13px 15px; font-size: 1.02rem;
    background: var(--papier); color: var(--tinte);
    border: 1.5px solid var(--tinte); border-radius: var(--kante);
}
.suchblatt input:focus {
    outline: none; border-color: var(--signal);
    box-shadow: 0 0 0 3px rgba(217,59,10,.18);
}
.stichworte { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.stichworte a {
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
    border: 1.5px solid var(--linie); padding: 7px 13px;
    text-decoration: none; color: var(--tinte-matt); border-radius: var(--kante);
}
.stichworte a:hover { border-color: var(--tinte); color: var(--tinte); background: var(--papier-blatt); }
.registertreffer {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linie);
}

/* ═══════════════ LUPE ═══════════════ */

.lupe {
    position: fixed; inset: 0; z-index: 100; display: none;
    background: rgba(16,14,10,.93); padding: 24px;
    align-items: center; justify-content: center;
}
.lupe[open], .lupe.auf, .lupe.geht { display: flex; }
.lupe figure { margin: 0; max-width: 100%; max-height: 100%; }
.lupe img {
    max-width: 100%; max-height: 82vh; width: auto;
    border: 6px solid var(--papier-blatt);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,.8);
}
.lupe figcaption {
    color: var(--papier-blatt); text-align: center; margin-top: 14px;
    font-family: 'Archivo Narrow', sans-serif; font-weight: 600;
    font-size: .84rem; letter-spacing: .08em; text-transform: uppercase;
}
.lupe-zu {
    position: absolute; top: 18px; right: 20px;
    background: transparent; border: 2px solid rgba(255,255,255,.4);
    color: #fff; width: 44px; height: 44px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--kante);
}
.lupe-zu:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.lupe-zu svg { width: 18px; height: 18px; }

/* ─── Wandprobe: das Motiv gerahmt im Raum ─── */

.lupe-umschalter {
    position: absolute; top: 18px; left: 20px; display: flex;
    border: 1px solid rgba(255,255,255,.28);
}
.lupe-blatt {
    background: transparent; border: 0; color: rgba(255,255,255,.62);
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
    padding: 10px 15px; cursor: pointer;
}
.lupe-blatt + .lupe-blatt { border-left: 1px solid rgba(255,255,255,.28); }
.lupe-blatt:hover { color: #fff; background: rgba(255,255,255,.1); }
.lupe-blatt.an { background: var(--papier-blatt); color: var(--tinte); }

.wandprobe {
    display: flex; flex-direction: column; gap: 16px;
    width: min(1020px, 100%); max-height: 88vh; overflow: auto;
    margin-top: 46px;
}
.wandprobe[hidden] { display: none; }

.raum {
    position: relative; width: 100%; aspect-ratio: 32 / 30;
    background: var(--wandton, #efece3);
    box-shadow: 0 30px 70px -24px rgba(0,0,0,.85);
    overflow: hidden; flex: none;
    /* --cm setzt das Skript: ein Zentimeter Wand in Bildschirmpunkten */
}
/* Streiflicht von links, sonst wirkt die Wand wie ein Farbfeld */
.raum::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 18% 12%, rgba(255,255,255,.5), transparent 62%),
                linear-gradient(160deg, rgba(255,255,255,.16), rgba(0,0,0,.14));
    pointer-events: none;
}
.raum .wand { position: absolute; inset: 0 0 14% 0; }
.raum .boden {
    position: absolute; inset: 86% 0 0 0;
    background: linear-gradient(180deg, #a48156, #8a6740);
}
.raum .sockelleiste {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: calc(var(--cm) * 9); background: #f7f5f0;
    border-bottom: 2px solid rgba(0,0,0,.22);
    box-shadow: 0 -1px 0 rgba(0,0,0,.08);
}
.raum.dunkel .sockelleiste { background: #e9e6df; }

.bildnagel { position: absolute; }
.bilderrahmen {
    display: block; border-style: solid; border-color: #16140e;
    box-shadow: calc(var(--cm) * 1.2) calc(var(--cm) * 1.6) calc(var(--cm) * 2.6) rgba(0,0,0,.34);
    background: #fff;
}
.bilderrahmen[data-art="ohne"]    { border-width: 0 !important; box-shadow: calc(var(--cm)*.8) calc(var(--cm)*1.1) calc(var(--cm)*2) rgba(0,0,0,.3); }
.bilderrahmen[data-art="schwarz"] { border-color: #14120e; }
.bilderrahmen[data-art="weiss"]   { border-color: #f6f4ee; }
.bilderrahmen[data-art="eiche"]   {
    border-color: #b98f52;
    border-image: linear-gradient(115deg, #cfa468, #9c7238 38%, #d2ac74 62%, #8f6830) 1;
}
.wandprobe .passepartout { display: block; background: #fbfaf6; }
.bilderrahmen[data-art="ohne"] .passepartout { background: transparent; }
.wandprobe img {
    display: block; width: 100%; height: auto;
    border: 0; max-height: none; box-shadow: none;
}
.masszahl {
    position: absolute; left: 50%; transform: translateX(-50%);
    top: calc(100% + var(--cm) * 5); white-space: nowrap;
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(22,20,14,.62);
}
.raum.dunkel .masszahl { color: rgba(255,255,255,.7); }

/* Maßstab zum Begreifen: Mensch 1,72 m, Sideboard 78 cm hoch.
   Waagerechte Angaben sind Anteile der Wandbreite (320 cm),
   senkrechte Anteile der Wandhöhe (258 cm). */
.mensch {
    position: absolute; left: 72.8%; top: 33.33%;
    width: 19.4%; height: auto; fill: #2c3038; opacity: .82;
}
.raum.dunkel .mensch { fill: #12151a; opacity: .68; }
.sideboard { position: absolute; left: 16%; top: 69.8%; width: 44%; height: 30.2%; }
.sideboard .platte {
    position: absolute; inset: 0 0 auto 0; height: 34%;
    background: linear-gradient(180deg, #6b5236, #4f3c27);
    box-shadow: 0 6px 14px -6px rgba(0,0,0,.5);
}
.sideboard .bein {
    position: absolute; top: 34%; bottom: 0; width: 4%;
    background: #4a3925;
}
.sideboard .bein:nth-of-type(2) { left: 9%; }
.sideboard .bein:nth-of-type(3) { right: 9%; }
/* Steht am rechten Ende des Sideboards und bleibt flach — sonst ragt sie
   bei den großen Formaten ins Bild und der Größenvergleich stimmt nicht mehr. */
.sideboard .vase {
    position: absolute; right: 6%; bottom: 100%; width: 10%; height: 44%;
    background: linear-gradient(90deg, #7d8b74, #5d6a55);
    border-radius: 40% 40% 46% 46% / 16% 16% 30% 30%;
}

.wandprobe-pult {
    background: rgba(253,251,244,.96); padding: 14px 16px;
    display: flex; flex-direction: column; gap: 10px; flex: none;
}
.wandprobe-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wandprobe-marke {
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--tinte-blass); width: 66px; flex: none;
}
.wandprobe-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.wandprobe-wahl button {
    background: var(--papier); border: 1.5px solid var(--linie); cursor: pointer;
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    font-size: .8rem; letter-spacing: .05em; padding: 7px 11px; color: var(--tinte);
}
.wandprobe-wahl button:hover { border-color: var(--tinte); }
.wandprobe-wahl button.an { background: var(--tinte); color: var(--papier-blatt); border-color: var(--tinte); }
/* Größen, die für dieses Motiv schon weich werden — wählbar, aber gekennzeichnet */
.wandprobe-wahl button.knapp:not(.an) { color: var(--tinte-blass); border-style: dashed; }
.wandprobe-toepfe button { width: 30px; height: 30px; padding: 0; background: var(--ton); }
.wandprobe-toepfe button.an { box-shadow: inset 0 0 0 2px var(--papier-blatt); border-color: var(--tinte); }
.wandprobe-haken {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: .86rem; color: var(--tinte-matt); margin-left: auto;
}
/* Sitzt direkt unter dem Raum, damit die Druckauskunft auch auf kleinen
   Handys ohne Scrollen zu sehen ist. */
.wandprobe-urteil {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: rgba(253,251,244,.96); padding: 10px 14px; margin: 0;
    font-size: .9rem; color: var(--tinte-matt); flex: none;
}
.wandprobe-note {
    font-family: 'Archivo Black', sans-serif; font-size: .82rem;
    letter-spacing: .04em; text-transform: uppercase;
    padding: 4px 9px; color: #fff; background: #2f7a4f;
}
.wandprobe-note[data-stufe="1"] { background: #3f7f4a; }
.wandprobe-note[data-stufe="2"] { background: #8a7220; }
.wandprobe-note[data-stufe="3"] { background: #a1591f; }
.wandprobe-note[data-stufe="4"] { background: #9a2f2a; }

@media (max-width: 720px) {
    .lupe-umschalter { top: 14px; left: 14px; }
    .lupe-blatt { padding: 8px 11px; font-size: .72rem; }
    .wandprobe { margin-top: 60px; gap: 12px; }
    .wandprobe-marke { width: 100%; }
    .wandprobe-haken { margin-left: 0; }
}

/* ═══════════════ FORMULARE / BESTELLSCHEIN ═══════════════ */

.formblatt {
    background: var(--papier-blatt);
    border: 1px solid var(--linie);
    box-shadow: var(--schatten-blatt);
}
.formblatt-kopf {
    background: var(--tinte); color: var(--papier-blatt);
    padding: 16px 22px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.formblatt-kopf h1, .formblatt-kopf h2 {
    font-family: 'Archivo Black', sans-serif; font-size: 1.35rem;
    letter-spacing: -.025em; line-height: 1;
}
.formblatt-kopf .beleg {
    font-family: 'Archivo Narrow', sans-serif; font-weight: 600;
    font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
    color: #b9b2a0;
}
.formblatt-koerper { padding: 24px 22px; }

.feld { margin-bottom: 20px; }
.feld label {
    display: block; margin-bottom: 7px;
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
}
.feld input[type=email], .feld input[type=text], .feld input[type=password], .feld select {
    width: 100%; padding: 13px 14px; font-size: 1rem;
    background: var(--papier); color: var(--tinte);
    border: 1.5px solid var(--tinte); border-radius: var(--kante);
}
.feld input::placeholder { color: var(--tinte-blass); }
.feld input:focus, .feld select:focus {
    outline: none; border-color: var(--signal);
    box-shadow: 0 0 0 3px rgba(217,59,10,.18);
}
.feld .hinweis { margin-top: 7px; font-size: .87rem; color: var(--tinte-matt); }

.zahlwahl { display: grid; gap: 10px; }
.zahlwahl label {
    display: flex; align-items: center; gap: 13px; cursor: pointer;
    border: 1.5px solid var(--linie); border-radius: var(--kante);
    padding: 14px 16px; background: var(--papier);
    font-family: 'Archivo', sans-serif; font-weight: 500; font-size: 1rem;
    text-transform: none; letter-spacing: 0; margin: 0;
}
.zahlwahl label:hover { border-color: var(--tinte-matt); }
.zahlwahl label:has(input:checked) {
    border-color: var(--tinte); border-width: 2px; background: var(--papier-blatt);
    box-shadow: inset 0 0 0 1px var(--tinte);
}
/* flex-shrink:0 wie beim Zustimmungshaken — sonst quetscht die Zeile die
   runden Auswahlpunkte zu Ovalen (gemessen 15x19 statt 19x19). */
.zahlwahl input { width: 19px; height: 19px; accent-color: var(--signal); flex-shrink: 0; }
.zahlwahl .nebensatz { color: var(--tinte-matt); font-size: .9rem; }

.zustimmung {
    display: flex; gap: 12px; align-items: flex-start;
    font-size: .9rem; color: var(--tinte-matt); margin-bottom: 22px;
    line-height: 1.5;
}
.zustimmung input { margin-top: 3px; width: 19px; height: 19px; accent-color: var(--signal); flex-shrink: 0; }

/* Positionsliste des Bestellscheins */
.positionen { width: 100%; border-collapse: collapse; }
.positionen th {
    text-align: left; padding: 9px 12px;
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--papier-blatt); background: var(--tinte);
}
.positionen th.rechts, .positionen td.rechts { text-align: right; }
.positionen td { padding: 13px 12px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.positionen tbody tr:nth-child(even) { background: rgba(205,198,176,.16); }
.positionen .pos-nr {
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    color: var(--tinte-blass); font-variant-numeric: tabular-nums;
}
.positionen .pos-bild {
    width: 74px; height: 50px; object-fit: cover;
    border: 1px solid var(--linie);
}
.positionen .pos-name { font-weight: 600; }
.positionen .pos-zusatz { font-size: .85rem; color: var(--tinte-blass); }
.positionen .pos-preis {
    font-family: 'Archivo Black', sans-serif; font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.summenblock {
    display: flex; justify-content: flex-end;
    border-top: 3px solid var(--tinte); background: var(--papier);
}
.summenblock .summe-innen { padding: 16px 22px; text-align: right; }
.summenblock .summe-bezeichnung {
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--tinte-blass);
}
.summenblock .summe-wert {
    font-family: 'Archivo Black', sans-serif; font-size: 2rem;
    line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}

/* ═══════════════ MELDUNGEN ═══════════════ */

.notiz {
    border: 1.5px solid var(--tinte);
    background: var(--papier-blatt);
    padding: 14px 18px; margin-bottom: 22px; font-size: .96rem;
    display: flex; gap: 12px; align-items: flex-start;
}
.notiz svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.notiz.gut     { border-color: var(--reg-syrien); background: #eef6f1; color: #114434; }
.notiz.gut svg     { color: var(--reg-syrien); }
.notiz.fehler  { border-color: var(--signal-tief); background: #fdf0eb; color: #79210a; }
.notiz.fehler svg  { color: var(--signal-tief); }
.notiz.achtung { border-color: #a8710b; background: #fdf6e6; color: #6e4a06; }
.notiz.achtung svg { color: #a8710b; }
.notiz.info    { border-color: var(--reg-berlin); background: #eef2fa; color: #143a66; }
.notiz.info svg    { color: var(--reg-berlin); }

/* Bestätigungsband nach dem Ablegen im Bestellschein */
.ablage-band { background: var(--reg-syrien); color: #fff; }
.ablage-band.doppelt { background: #8a5a06; }
.ablage-band .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; padding-top: 11px; padding-bottom: 11px;
}
.ablage-band .text { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.ablage-band svg { width: 19px; height: 19px; }
.ablage-band .knopf { border-color: #fff; color: #fff; background: transparent; }
.ablage-band .knopf:hover { background: #fff; color: var(--tinte); }

/* ═══════════════ LIEFERSCHEIN (Danke-Seite) ═══════════════ */

.stempel {
    display: inline-flex; align-items: center; gap: 12px;
    border: 3px solid var(--reg-syrien); color: var(--reg-syrien);
    padding: 10px 20px; transform: rotate(-2.5deg);
    font-family: 'Archivo Black', sans-serif; font-size: 1.1rem;
    letter-spacing: .04em; text-transform: uppercase;
    margin-bottom: 24px;
}
.stempel svg { width: 24px; height: 24px; }

.linkfeld {
    display: flex; gap: 9px; align-items: stretch;
}
.linkfeld input {
    flex: 1; min-width: 0; padding: 11px 13px; font-size: .88rem;
    background: var(--papier); border: 1.5px solid var(--linie);
    border-radius: var(--kante); color: var(--tinte-matt);
    font-variant-numeric: tabular-nums;
}

/* ═══════════════ FUSSBEREICH ═══════════════ */

.fussblatt {
    background: var(--tinte); color: #b9b2a0;
    padding: 44px 0 34px; margin-top: 60px;
    font-size: .93rem;
}
.fussblatt .spalten {
    display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    padding-bottom: 28px; border-bottom: 1px solid #3b372c;
}
.fussblatt h3 {
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--papier-blatt); margin-bottom: 12px;
}
.fussblatt a { color: #ded8c8; text-decoration: none; }
.fussblatt a:hover { color: #fff; text-decoration: underline; }
.fussblatt ul { list-style: none; padding: 0; display: grid; gap: 7px; }
.fussblatt .schluss {
    padding-top: 22px; display: flex; justify-content: space-between;
    gap: 18px; flex-wrap: wrap; font-size: .86rem; color: #8b8471;
}

.ki-schild {
    border: 1.5px solid #3b372c; padding: 13px 16px;
    display: flex; gap: 12px; align-items: flex-start;
    color: #ded8c8; font-size: .88rem; line-height: 1.5;
}
.ki-schild svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; color: var(--signal); }

/* ═══════════════ VERWALTUNG ═══════════════ */

.liste { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--papier-blatt); }
.liste th {
    text-align: left; padding: 10px 12px; background: var(--tinte); color: var(--papier-blatt);
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
    position: sticky; top: 0;
}
.liste td { padding: 12px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.liste tbody tr:nth-child(even) { background: rgba(205,198,176,.16); }

.marke-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
    padding: 3px 9px; border: 1.5px solid currentColor; border-radius: var(--kante);
}
.marke-status.bezahlt { color: var(--reg-syrien); }
.marke-status.offen   { color: #8a5a06; }

.kennzahlen {
    display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-bottom: 30px;
}
.kennzahl {
    background: var(--papier-blatt); border: 1px solid var(--linie);
    border-top: 5px solid var(--tinte); padding: 16px 18px;
}
.kennzahl .bezeichnung {
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    font-size: .74rem; letter-spacing: .11em; text-transform: uppercase;
    color: var(--tinte-blass); margin-bottom: 7px;
}
.kennzahl .wert {
    font-family: 'Archivo Black', sans-serif; font-size: 1.9rem;
    line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}

/* Ablagefeld für den Bilder-Upload */
.ablagefeld {
    border: 2px dashed var(--tinte-blass); background: var(--papier);
    padding: 40px 24px; text-align: center; border-radius: var(--kante);
    transition: border-color .15s, background .15s;
}
.ablagefeld.bereit { border-color: var(--signal); background: #fdf0eb; }
.ablagefeld svg { width: 42px; height: 42px; color: var(--tinte-blass); margin: 0 auto 14px; }
.ablagefeld h3 { font-family: 'Archivo Black', sans-serif; font-size: 1.15rem; margin-bottom: 7px; }
.ablagefeld p { color: var(--tinte-matt); font-size: .93rem; }

.dateiliste { display: grid; gap: 7px; margin-top: 18px; text-align: left; }
.dateizeile {
    display: flex; align-items: center; gap: 11px;
    background: var(--papier-blatt); border: 1px solid var(--linie);
    padding: 9px 13px; font-size: .9rem;
}
.dateizeile .dname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dateizeile .dgroesse { color: var(--tinte-blass); font-variant-numeric: tabular-nums; font-size: .84rem; }

/* ═══════════════ KASSENANSICHT ═══════════════
   Beim Bezahlen schweigt der Katalog: kein Register, kein
   Fußbereich voller Verweise, kein WhatsApp-Knopf. Jeder Ausgang
   an dieser Stelle ist ein verlorener Kauf. */

.beim-bezahlen .wa-knopf { display: none; }
.beim-bezahlen .fussblatt { padding-top: 26px; margin-top: 40px; }
.beim-bezahlen .fussblatt .spalten { display: none; }
.beim-bezahlen .fussblatt .schluss { padding-top: 0; border-top: 0; }

.kasse-marke {
    margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Archivo Narrow', sans-serif; font-weight: 700;
    font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
    color: #b9b2a0;
}
.kasse-marke svg { width: 15px; height: 15px; color: var(--signal); }

/* ═══════════════ WHATSAPP-KNOPF ═══════════════ */

/* Rund wie auf der Hauptseite, aber in der Sprache des Katalogs:
   volles WhatsApp-Grün, gezeichnetes Zeichen statt Emoji, dunkler
   Rand wie bei allen Knöpfen — und ein Schatten, der wirklich trägt
   statt eines grünen Scheins. Kein Blinken, kein Ausklappen. */
.wa-knopf {
    position: fixed; right: 20px; bottom: 20px; z-index: 70;
    width: 58px; height: 58px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #25d366; color: #fff; text-decoration: none;
    border: 2px solid var(--tinte);
    box-shadow: 0 3px 6px rgba(22,20,14,.22), 0 14px 28px -10px rgba(22,20,14,.42);
    transition: transform .16s var(--auftritt), background .16s, box-shadow .16s;
}
.wa-knopf svg { width: 30px; height: 30px; }
.wa-knopf:hover, .wa-knopf:focus-visible {
    background: #1eb75a; transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(22,20,14,.26), 0 20px 36px -12px rgba(22,20,14,.46);
}

@media (max-width: 560px) {
    .wa-knopf { width: 52px; height: 52px; right: 15px; bottom: 15px; }
    .wa-knopf svg { width: 27px; height: 27px; }
}
@media (prefers-reduced-motion: reduce) { .wa-knopf { transition: none; } }
@media print { .wa-knopf { display: none !important; } }

/* ═══════════════ KLEINE BILDSCHIRME ═══════════════ */

@media (max-width: 1000px) {
    .kopf-suche input { width: 108px; }
}
@media (max-width: 860px) {
    .kopf-nav a:not(.korb-knopf) { display: none; }
    /* Auf schmalen Geräten weicht das Suchfeld — die Suchseite ist
       über das Register und den Fußbereich erreichbar */
    .kopf-suche { display: none; }
    .registerleiste { top: 62px; }
    .unterregister { top: 104px; }
    section { padding: 40px 0; }
    .titel-fakten div { padding-right: 16px; margin-right: 16px; }
}

@media (max-width: 560px) {
    /* Kopfzeile schlank halten, sonst schiebt sie die Seite ins Querscrollen */
    .kopfleiste .wrap { gap: 10px; min-height: 56px; }
    .marke { font-size: 1.02rem; gap: 6px; }
    .marke .marke-zusatz { display: none; }
    .korb-knopf { padding: 8px 11px !important; gap: 7px; }
    .korb-knopf > span:first-of-type { display: none; }  /* Wort „Bestellschein“ weicht dem Symbol */
    .registerleiste { top: 56px; }
    .unterregister { top: 98px; }
    .titel-text h1 { font-size: clamp(2.1rem, 11vw, 2.5rem); }
    .titel-aktionen .knopf { flex: 1 1 100%; }
}

/* Sicherheitsnetz gegen Querscrollen — greift nur, falls doch einmal
   ein Element zu breit gerät */
body { overflow-x: clip; }

@media (max-width: 560px) {
    body { font-size: 16px; }
    .bildtafel { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .positionen .pos-bild { width: 54px; height: 38px; }
    .positionen td, .positionen th { padding: 10px 8px; }
    .formblatt-koerper { padding: 18px 16px; }
    .summenblock .summe-wert { font-size: 1.7rem; }

    /* Fingerfreundliche Kaufknoepfe: „Notieren" war 35 px hoch, der
       Warenkorb-Knopf 36x30 — genau die zwei Knöpfe, mit denen der Shop
       Geld verdient. Ziel sind mindestens 44 px Tastfläche. */
    .knopf-klein { padding: 12px 14px; }
    .korb-knopf { padding: 12px 13px !important; }
    .korb-knopf .zeichen { width: 19px; height: 19px; }
}

/* ═══════════════════════════════════════════════════════════════════
   BEWEGUNG

   Der Katalog ist gedruckt, also bewegt er sich wie Papier:
   Blätter werden von der Signalkante her aufgelegt, Bestätigungen
   werden aufgedrückt wie ein Stempel. Nichts schwebt, nichts federt.

   Alles startet im sichtbaren Zustand — fällt CSS oder JavaScript
   aus, steht die Seite trotzdem vollständig da.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --auftritt: cubic-bezier(.16, 1, .3, 1);   /* ankommen: satt abbremsend */
    --abgang:   cubic-bezier(.4, 0, 1, 1);     /* weggehen: kürzer, härter */
}

/* ─── Der Umschlag legt sich an (der eine gesetzte Moment) ───
   Links setzt der Satz zeilenweise, rechts werden die Motive als
   Blätter von der orangen Kante her aufgedeckt. Läuft einmal. */

@keyframes satz-setzen {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes blatt-auflegen {
    from { opacity: 0; clip-path: inset(0 100% 0 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes blatt-auflegen-quer {
    from { opacity: 0; clip-path: inset(0 0 100% 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

.titel-text > * { animation: satz-setzen .52s var(--auftritt) both; }
.titel-text > *:nth-child(1) { animation-delay: .05s; }
.titel-text > *:nth-child(2) { animation-delay: .11s; }
.titel-text > *:nth-child(3) { animation-delay: .17s; }
.titel-text > *:nth-child(4) { animation-delay: .23s; }
.titel-text > *:nth-child(5) { animation-delay: .29s; }

.titel-bilder figure { animation: blatt-auflegen .48s var(--auftritt) both; }
.titel-bilder figure:nth-child(1) { animation-delay: .06s; }
.titel-bilder figure:nth-child(2) { animation-delay: .13s; }
.titel-bilder figure:nth-child(3) { animation-delay: .19s; }
.titel-bilder figure:nth-child(4) { animation-delay: .25s; }
.titel-bilder figure:nth-child(5) { animation-delay: .30s; }
.titel-bilder figure:nth-child(6) { animation-delay: .35s; }

@media (max-width: 899px) {
    /* Auf dem Handy sitzt die Signalkante oben — dann von oben aufdecken */
    .titel-bilder figure { animation-name: blatt-auflegen-quer; }
}

/* ─── Die Bildtafel füllt sich beim Blättern ───
   Die Reihen decken sich auf, während man durch den Katalog blättert —
   an den Bildlauf gekoppelt, ohne eine Zeile JavaScript. Kann der
   Browser das nicht, stehen die Motive schlicht sofort da. Bei bis zu
   264 Kacheln je Seite ist das der einzige Weg, der nichts kostet. */

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .tafel-eintrag {
            animation: blatt-auflegen linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 38%;
        }
    }
}

/* ─── Das Motiv unter der Lupe ───
   Die Kachel wächst an ihren Platz, statt hart umzuschalten.
   Den Weg rechnet das Skript, hier steht nur der Rahmen. */

.lupe { opacity: 0; transition: opacity .22s var(--auftritt); }
.lupe.auf { opacity: 1; }
/* „geht" hält die Lupe sichtbar, während sie ausblendet — sonst wäre
   die Rückbewegung zur Kachel weg, ehe sie beginnt. */
.lupe.geht { opacity: 0; }
.lupe figcaption { transition: opacity .2s var(--auftritt) .12s; }
.lupe:not(.auf) figcaption { opacity: 0; }
.lupe img { transform-origin: top left; }
.lupe-zu { transition: border-color .15s, background .15s, transform .15s var(--auftritt); }
.lupe-zu:hover { transform: rotate(90deg); }

/* ─── Das Motiv lehnt sich ins Bild, wo man es vergrößern kann ─── */

.tafel-bild img { transition: transform .34s var(--auftritt); }
.tafel-eintrag:hover .tafel-bild img,
.tafel-bild:focus-visible img { transform: scale(1.045); }

/* ─── Notiert: aufgedrückt wie ein Stempel ─── */

@keyframes stempel-auf {
    0%   { opacity: 0; transform: scale(1.16); }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
.korb-feld .korb-notiert { animation: stempel-auf .26s var(--auftritt); }

/* ─── Die Aktionsfahne wird zuletzt aufgeschlagen ─── */

@keyframes fahne-schlagen {
    from { opacity: 0; transform: translate3d(0, -7px, 0); }
    to   { opacity: 1; transform: none; }
}
.lasche-rabatt { animation: fahne-schlagen .4s var(--auftritt) .45s both; }

/* ─── Warten auf die Zahlung: die Seite atmet, damit sie nicht
       eingefroren wirkt ─── */

@keyframes warten-atmen {
    0%, 100% { opacity: .4; }
    50%      { opacity: 1; }
}
.warten-zeichen { animation: warten-atmen 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }
    /* Nichts darf durch abgeschaltete Bewegung unsichtbar bleiben */
    .tafel-eintrag { opacity: 1; animation: none; }
    .tafel-eintrag:hover .tafel-bild img { transform: none; }
    .lupe-zu:hover { transform: none; }
    .warten-zeichen { animation: none; opacity: 1; }
}

/* Druckansicht des Lieferscheins */
@media print {
    .kopfleiste, .registerleiste, .fussblatt, .knopf, .ablage-band { display: none !important; }
    body { background: #fff; }
    .formblatt { border: 1px solid #000; box-shadow: none; }
    /* Auf Papier gibt es keine Bewegung — nichts darf weiß bleiben */
    *, *::before, *::after { animation: none !important; opacity: 1 !important; clip-path: none !important; }
}

/* Formatwahl auf der Bestellseite: JPG · PNG · SVG · PDF nebeneinander.
   Umbricht auf dem Handy, damit die Tabellenspalte nicht gesprengt wird. */
.formatwahl {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}
.formatwahl .knopf { padding: 6px 12px; }