/* Reihenfolge der Ebenen – in jeder CSS-Datei gleich deklariert, damit es
   egal ist, welche Datei der Browser zuerst sieht. */
@layer tokens, stil, hilfsklassen;

/* Wiederverwendbare Bausteine: Kopfzeile, Navigation, Knöpfe, Chips,
   Panels, Buchzeilen, Preisschild, Toast. Zuerst die Grundform (gilt für
   Verwaltung und Shop), danach die Shop-Varianten "Klassische Bibliothek" –
   die gewinnen über die höhere Spezifität von body[data-ansicht="shop"]. */
@layer stil{

/* ===================== Kopfzeile und Navigation ===================== */

/* Kopfzeile immer im Flaschengrün (auch in der Verwaltung), damit das helle
   Logo zur Geltung kommt. Darunter eine doppelte Messinglinie wie auf einem
   Buchrücken. --ink/--muted/--line werden lokal überschrieben, damit
   Nav-Text, Login/Logout-Button usw. auf dem Grün lesbar bleiben. */
header.top{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:5;
  background:var(--flaschengruen);
  border-bottom:1px solid var(--messing);
  box-shadow:0 3px 0 var(--flaschengruen),0 4px 0 rgba(201,168,86,.55),0 8px 14px rgba(0,0,0,.18);
  --ink:var(--pergament);--muted:#B4C2A9;--line:var(--flaschengruen-linie);
  color:var(--ink); /* sonst erbt z.B. "Verwaltung ▾" (.unstyled) die dunkle Body-Farbe */
}
/* Das "Verwaltung ▾"-Menü hat einen hellen Hintergrund und braucht deshalb
   die hellen Flächen- und dunklen Textfarben zurück. */
header.top .navDropdownMenu{--ink:var(--tinte);--muted:var(--sepia);--surface:#FBF8EF;--bg:#F4EEDF}
.brand{display:flex;align-items:center;gap:10px;padding:14px 0 6px}
.brand img{height:36px;width:auto;display:block}
.brand h1{font-size:26px}
.brandZusatz{color:var(--muted);font-family:var(--schrift-buch);font-style:italic;font-size:15px}
nav{display:flex;gap:4px;overflow-x:auto}
nav button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 12px;cursor:pointer;color:var(--muted);font-weight:500;white-space:nowrap}
/* Einheitliche Schrift für alle Einträge der Leiste – normale Buttons
   bekämen sonst die kleinere Browser-Standardschrift, .unstyled-Buttons
   (Verwaltung, Abmelden) dagegen die geerbte. */
nav button,nav .navExtra{font-family:var(--schrift-text);font-size:14.5px}
nav button:hover{color:var(--ink)}
nav button[aria-current="page"]{color:var(--ink);border-bottom-color:var(--messing)}
.navDropdown{position:relative;flex:0 0 auto;align-self:stretch}
/* button.navDropdownBtn (statt .navDropdownBtn) wegen Spezifität: der Button
   trägt auch die Klasse .unstyled (padding:0, basis.css) – gegen sie muss
   diese Regel gewinnen, sonst schrumpft die Klickfläche auf die reine
   Textbreite ohne jeden Rand. */
button.navDropdownBtn{height:100%;font:inherit;padding:10px 12px}
/* position:fixed statt absolute: die Navileiste ist horizontal scrollbar
   (overflow-x:auto), was laut CSS-Spezifikation automatisch auch die
   Y-Achse auf "auto" setzt und damit alles abschneiden würde, was nach
   unten aus der Leiste herausragt – inklusive dieses Menüs. Mit
   position:fixed und per JS gesetzten Koordinaten (siehe data-nav-dropdown
   im Klick-Handler) entkommt das Menü diesem Abschneiden.
   :not([hidden]) statt einem unbedingten display:flex, weil ein Autoren-
   Selektor mit gleicher Spezifität das UA-Standardverhalten von [hidden]
   sonst immer überstimmen würde (Autoren-Regeln schlagen UA-Regeln auch
   bei gleicher Spezifität) – das Menü wäre sonst nie wirklich versteckt. */
.navDropdownMenu{position:fixed;background:var(--surface);border:1px solid var(--messing-dunkel);border-radius:4px;box-shadow:0 6px 16px rgba(0,0,0,.22);min-width:170px;z-index:50;flex-direction:column;padding:6px}
.navDropdownMenu:not([hidden]){display:flex}
.navDropdownMenu button{background:none;border:0;border-bottom:0;text-align:left;padding:9px 12px;border-radius:3px;cursor:pointer;color:var(--ink);font:inherit;font-weight:500;white-space:nowrap}
.navDropdownMenu button:hover{background:var(--bg)}
.navDropdownMenu button[aria-current="page"]{background:var(--bg);color:var(--red)}
/* WhatsApp: runder Messingknopf ganz rechts in der Markenzeile (ersetzt die
   frühere Box auf der Startseite) */
.brand .waKnopf{
  margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,var(--messing-hell),var(--messing) 55%,var(--messing-dunkel));border:1px solid var(--messing-dunkel);
  color:var(--flaschengruen);box-shadow:0 2px 4px rgba(0,0,0,.35);transition:transform .2s;
}
.brand .waKnopf:hover,.brand .waKnopf:focus-visible{transform:scale(1.08)}
.brand .waKnopf svg{width:22px;height:22px}
/* Fenster mit QR-Code zum WhatsApp-Kanal (#waKanal, waKanalZeigen in
   index.html): nur mit Maus, Pergament-Blatt rechts unter dem Knopf.
   position:fixed, Koordinaten per JS. Feste Farben wie beim Kategorien-Menü. */
.waKanal{
  position:fixed;z-index:50;width:220px;padding:14px 16px 12px;text-align:center;
  border:1px solid var(--messing-dunkel);border-radius:3px;
  background:var(--papier),var(--pergament);color:var(--tinte);box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.waKanal:focus{outline:none}
.waKanalTitel{margin:0;font-family:var(--schrift-titel);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--leder)}
.waKanal img{display:block;width:168px;height:168px;margin:10px auto;border:1px solid var(--messing-dunkel)}
.waKanal p:not(.waKanalTitel){margin:0 0 8px;font-family:var(--schrift-buch);font-size:15px;line-height:1.25}
.waKanal a{font-family:var(--schrift-text);font-size:12.5px;color:var(--sepia)}
.waKanal a:hover,.waKanal a:focus-visible{color:var(--leder)}
/* Links davon sitzt im Shop Hans am Pult (.kopfHans, Abschnitt "Hans am Pult") */
/* Kategorien-Menü beim Überfahren von "Kategorien" (katMenueAufbauen):
   Pergament-Blatt unter der Kopfzeile, so breit wie der Inhalt, mehrspaltig.
   Feste Farben, damit es im Shop und in der Verwaltung gleich aussieht. */
.katMenue{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:40;
  width:min(880px,calc(100% - 16px));max-height:calc(100vh - 140px);overflow-y:auto;
  margin-top:8px;padding:16px 20px 10px;border:1px solid var(--messing-dunkel);border-radius:3px;
  background:var(--papier),var(--pergament);color:var(--tinte);box-shadow:0 10px 24px rgba(0,0,0,.35);
  columns:4 170px;column-gap:24px;
}
.katMenue[hidden]{display:none}
.katMenueGruppe{margin:0 0 12px;break-inside:avoid}
.katMenueGruppe.lang{break-inside:auto}
.katMenueHaupt{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px;padding:2px 0 4px;
  border-bottom:1px solid rgba(158,43,37,.45);break-after:avoid;
  font-family:var(--schrift-titel);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--leder);text-decoration:none;
}
.katMenueUnter{
  display:flex;align-items:center;gap:7px;padding:3px 0;break-inside:avoid;
  font-family:var(--schrift-buch);font-size:15px;line-height:1.2;color:var(--tinte);text-decoration:none;
}
.katMenueHaupt:hover,.katMenueHaupt:focus-visible,.katMenueUnter:hover,.katMenueUnter:focus-visible{color:var(--leder);text-decoration:underline}
.katMenueUnter .piktogramm{width:15px;height:15px;color:var(--sepia)}
.katMenueUnter .sprachKuerzel{font-size:9px;line-height:12px}
.katMenue .zahl{margin-left:auto;padding-left:6px;font-family:var(--schrift-maschine);font-size:10.5px;color:var(--sepia);text-transform:none;letter-spacing:0}
@media (max-width:900px){.katMenue{columns:3 160px}}
/* Shop in voller Breite: das Menü beginnt links unter der Navigation statt
   in der Mitte – sonst führte der Weg der Maus von "Kategorien" zum Menü auf
   breiten Bildschirmen quer über die Kopfzeile und es schlösse unterwegs */
body[data-ansicht="shop"] .katMenue{left:var(--seitenRand);transform:none;width:min(960px,calc(100% - 2 * var(--seitenRand)))}

/* ===================== Grundbausteine ===================== */

.badge{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:var(--petrol);color:var(--on-petrol);font-size:12px;line-height:20px;text-align:center;margin-left:4px}
.search{width:100%;font-size:19px;padding:14px 16px;border:2px solid var(--ink);border-radius:4px;background:var(--surface);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chip{border:1px solid var(--line);background:var(--surface);padding:6px 12px;border-radius:3px;cursor:pointer;font-size:14px;color:var(--ink)}
.chip[aria-pressed="true"],.chip[aria-current="page"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.brotkrumen{font-size:13px;margin:0 0 10px}
.brotkrumen a{color:inherit;text-decoration:underline}
.kategorieTitel{font-size:26px;margin:4px 0 6px}
ul.list{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:59px minmax(0,1fr);gap:4px 14px;padding:16px 0;border-top:1px solid var(--line)}
/* Platzhalter ohne Foto: Lederrücken mit zwei Messingbünden */
.spine{
  width:59px;height:85px;border-radius:2px 5px 5px 2px;display:flex;align-items:center;justify-content:center;
  font-family:var(--schrift-titel);font-size:24px;color:var(--messing-hell);
  background:
    linear-gradient(var(--messing) 0 0) 0 14% / 100% 2px no-repeat,
    linear-gradient(var(--messing) 0 0) 0 86% / 100% 2px no-repeat,
    linear-gradient(100deg,var(--leder-tief),var(--leder-hell) 55%,var(--leder));
  border:1px solid var(--leder-tief);box-shadow:inset -3px 0 6px rgba(0,0,0,.25);
}
.cover{width:59px;height:85px;border-radius:2px;object-fit:cover;background:var(--line);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.coverBtn{display:block;border-radius:2px}
.titleBtn{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .15s}
.titleBtn:hover, .titleBtn:focus-visible{text-decoration-color:currentColor}
.info h3{font-size:19px;overflow-wrap:anywhere} /* überlange Wörter in Titeln sprengen sonst schmale Handys */
.info p{margin:2px 0 0;font-size:14px;color:var(--muted)}
/* flex-wrap: auf sehr schmalen Handys (320 px) rutscht der Knopf unter den Preis statt über den Rand */
.buy{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;justify-content:space-between;grid-column:2}
.price{font-family:var(--schrift-buch);font-size:22px;font-weight:600;font-variant-numeric:oldstyle-nums}
.btn{border:2px solid var(--ink);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:4px;cursor:pointer;font-weight:600;text-decoration:none;display:inline-block}
.btn:disabled{opacity:.4;cursor:default}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.red{background:var(--red);border-color:var(--red);color:var(--pergament)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:18px;margin:14px 0}
.sum{display:grid;grid-template-columns:1fr auto;gap:6px 16px;margin:12px 0}
.sum .total{font-weight:600;font-size:20px;border-top:1px solid var(--line);padding-top:8px}
.stop{display:grid;grid-template-columns:auto auto 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
/* Buchbild in der Pick-Liste: grösser als in den Listen, damit man es im Regal wiedererkennt */
.pickCover{width:72px;height:104px}
.pickCoverLink{display:block;border-radius:2px}
.stop input{width:24px;height:24px;accent-color:var(--petrol)}
.stop.done{opacity:.5}
.stop.done .what{text-decoration:line-through}
.stops{list-style:none;padding:0;margin:0}
.pickBestellung .hint{margin:6px 0 4px}
.pickKopf{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.pickNichtGefunden{grid-column:3;justify-self:start}
.stop.done .pickNichtGefunden{display:none}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--tinte);color:var(--pergament);border:1px solid var(--messing);padding:12px 18px;border-radius:4px;max-width:calc(100% - 32px);z-index:10}
.toast[hidden]{display:none}

/* Ornament-Trenner: Messinglinien links und rechts eines Fleurons (❦).
   Einsatz: <div class="ornament" aria-hidden="true"><span>❦</span></div> */
.ornament{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px auto;max-width:260px;color:var(--gold,var(--messing-dunkel));font-family:var(--schrift-buch);font-size:18px;line-height:1}
.ornament::before,.ornament::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
.ornament::after{background:linear-gradient(270deg,transparent,currentColor)}

/* Stempel (z.B. "Bücherbörse"): Siegellack-Rand, leicht schräg aufgedrückt */
.stempel{display:inline-block;font-family:var(--schrift-maschine);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--siegellack);border:1.5px solid var(--siegellack);border-radius:3px;padding:1px 6px;transform:rotate(-3deg);vertical-align:middle;opacity:.9}

/* ===================== Kundenbereich: Klassische Bibliothek ===================== */

body[data-ansicht="shop"] .badge{background:radial-gradient(circle at 32% 28%,var(--messing-hell),var(--messing) 55%,var(--messing-dunkel));color:var(--tinte);border:1px solid var(--messing-dunkel);border-radius:50%;min-width:22px;height:22px;line-height:21px;padding:0;font-size:11px;font-weight:700}

/* Knöpfe: Leder mit Messingrand und Cinzel-Prägung */
body[data-ansicht="shop"] .btn{
  border:1px solid var(--messing);border-radius:3px;
  background:linear-gradient(180deg,var(--leder-hell),var(--leder) 55%,var(--leder-tief));
  color:var(--pergament);font-family:var(--schrift-titel);font-weight:700;font-size:12.5px;letter-spacing:.06em;
  box-shadow:inset 0 1px 0 rgba(255,235,200,.25),0 1px 2px rgba(0,0,0,.3);
}
body[data-ansicht="shop"] .btn:hover:not(:disabled){background:linear-gradient(180deg,#9A4540,var(--leder-hell) 55%,var(--leder))}
body[data-ansicht="shop"] .btn.ghost{background:transparent;color:var(--ink);border-color:var(--messing);box-shadow:none}
body[data-ansicht="shop"] .btn.ghost:hover:not(:disabled){background:rgba(201,168,86,.14)}
body[data-ansicht="shop"] .stop input{accent-color:var(--leder)}

/* Pergament-Flächen: --surface ist im Shop dasselbe Pergament wie --ink
   (heller Text auf Grün) – alles, was auf Pergament steht, bekommt deshalb
   lokal die dunklen Rollenfarben zurück. Dazu die feine Papierstruktur. */
body[data-ansicht="shop"] .panel,
body[data-ansicht="shop"] .row{
  color:var(--ink-dunkel);
  background:var(--papier),var(--pergament);
  --ink:var(--tinte);--muted:var(--sepia);--line:var(--pergament-tief);
}
body[data-ansicht="shop"] .panel{border:1px solid var(--messing-dunkel);border-radius:3px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
/* Formulare (Lieferadresse im Warenkorb) bleiben auch im breiten Shop gut ausfüllbar */
body[data-ansicht="shop"] form.panel{max-width:760px}
/* Eingabefelder auf Pergament (Bestellformular im Warenkorb, Anmelden): heller
   Grund statt des Seitenhintergrunds – sonst stand die dunkle Pergament-Schrift
   auf dunklem Flaschengrün. color-scheme hell, damit auch Auswahllisten und
   Browser-Bedienelemente hell erscheinen. */
body[data-ansicht="shop"] .panel label.f :is(input,select,textarea){
  background:var(--pergament-hell);color:var(--tinte);border-color:var(--messing-dunkel);color-scheme:light}
body[data-ansicht="shop"] .search{color:var(--ink-dunkel);background:var(--papier),var(--pergament);border:1px solid var(--messing);box-shadow:inset 0 2px 4px rgba(60,40,10,.15);font-family:var(--schrift-buch);font-size:20px}
body[data-ansicht="shop"] .search::placeholder{color:var(--sepia);opacity:.85;font-style:italic}
/* Beschriftung über dem Suchfeld (renderShop): deutlich wie ein Abschnittstitel,
   der Zusatz sagt, wonach gesucht wird */
.sucheLabel{display:block;margin:0 0 8px;font-family:var(--schrift-titel);font-weight:500;font-size:20px;letter-spacing:.02em}
.sucheLabelZusatz{font-family:var(--schrift-buch);font-size:17px;letter-spacing:0;color:var(--muted)}
body[data-ansicht="shop"] .chip{background:var(--pergament);color:var(--ink-dunkel);border-color:var(--messing-dunkel);font-size:13.5px}
body[data-ansicht="shop"] .chip:hover{background:#FFF8E6}
body[data-ansicht="shop"] .chip[aria-pressed="true"],body[data-ansicht="shop"] .chip[aria-current="page"]{background:var(--leder);color:var(--pergament);border-color:var(--messing)}
body[data-ansicht="shop"] .navDropdownMenu button:not([aria-current="page"]){color:var(--ink-dunkel)}

/* Buchzeile als Karteikarte: Pergament, rote Linie unter dem Titel,
   Lochung unten in der Mitte, Zustand in Schreibmaschinenschrift. */
/* Breite Fenster: die Karten stehen nebeneinander (unter ~920 px eine Spalte) */
body[data-ansicht="shop"] ul.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:14px}
body[data-ansicht="shop"] .row{
  position:relative;padding:16px 18px 20px;border:1px solid var(--pergament-tief);border-radius:3px;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}
body[data-ansicht="shop"] .row::after{
  content:"";position:absolute;left:50%;bottom:6px;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:var(--flaschengruen);box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
body[data-ansicht="shop"] .row .info h3{
  font-family:var(--schrift-buch);font-size:23px;font-weight:600;line-height:1.25;
  padding-bottom:5px;margin-bottom:6px;border-bottom:1px solid rgba(158,43,37,.45);
}
body[data-ansicht="shop"] .info p{font-size:15px}
body[data-ansicht="shop"] .info .autor{font-family:var(--schrift-buch);font-style:italic;font-size:17px}
body[data-ansicht="shop"] .info .karteZustand{font-family:var(--schrift-maschine);font-size:14.5px;letter-spacing:.02em}
body[data-ansicht="shop"] .cover{box-shadow:2px 2px 6px rgba(0,0,0,.35)}
body[data-ansicht="shop"] .neuCard .cover{box-shadow:none}
/* Auf Pergament (Karteikarten der Trefferliste, Warenkorb): Bild im Modus
   "Multiplizieren" – weisse Streifen werden zur Papierfarbe, das Cover
   selbst bleibt praktisch gleich; ohne Schatten, der sonst den weissen
   Rahmen nachzeichnen würde. */
body[data-ansicht="shop"] .row .cover{mix-blend-mode:multiply;box-shadow:none;background:none}

/* Preisschild aus Papier: Hängeetikett mit Loch und Messingrand */
body[data-ansicht="shop"] .price.tag{
  display:inline-flex;align-items:center;position:relative;
  padding:3px 12px 3px 22px;margin:0;
  font-family:var(--schrift-buch);font-weight:600;font-size:18px;line-height:1.2;color:var(--tinte);
  background:radial-gradient(circle at 11px 50%,var(--pergament) 0 3px,var(--messing-dunkel) 3.5px 4.5px,transparent 5px),var(--pergament-tief);
  border:1px solid var(--messing-dunkel);border-radius:2px 4px 4px 2px;
  clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 50%);
}

.siteFooter{display:none}
body[data-ansicht="shop"] .siteFooter{display:block;max-width:900px;margin:0 auto;padding:4px 16px 28px;text-align:center;font-size:13px;color:var(--muted)}
body[data-ansicht="shop"] .siteFooter a{color:inherit}

/* ===================== Startseite: Begrüssung, WhatsApp ===================== */

/* Begrüssung unter dem warmen Schein einer Bankerlampe */
.greeting{text-align:center;margin:4px 0 20px;padding:6px 12px 2px;background:radial-gradient(ellipse 60% 75% at 50% 0%,rgba(230,207,138,.16),transparent 75%)}
.begruessungBild{display:block;max-width:100%;height:auto;max-height:260px;width:auto;margin:0 auto 10px;border-radius:3px;object-fit:cover;border:1px solid var(--messing);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.greeting .begruessungText{font-family:var(--schrift-titel);font-weight:500;font-size:14.5px;margin:0 auto;max-width:70ch;line-height:1.5}
.greeting .begruessungInhalt{display:inline}
.greeting .begruessungInhalt div,.greeting .begruessungInhalt p{margin:4px 0}
.greeting .begruessungInhalt a{color:inherit;text-decoration:underline}
.greeting .feedback{font-family:var(--schrift-text);font-size:12px;color:var(--muted);font-weight:400;margin-top:6px}
.greeting .feedback a{color:var(--gold,var(--messing))}
/* Zollhinweis im Warenkorb bei Lieferland Ausland */
#zollHinweis a{color:inherit;text-decoration:underline}
/* Neben der Begrüssung (nur Desktop ab 1100 px): links die Registrierkasse
   (Abschnitt "Registrierkasse"), rechts Stefanie (Abschnitt "Stefanie") mit der
   Saison-Deko auf ihrem Bücherberg – Kerze bzw. Adventskranz, Flammen flackern */
.greeting{position:relative}
.stefanie .flamme{transform-box:fill-box;transform-origin:50% 100%;animation:kerzeFlackern 3.4s ease-in-out infinite}
.stefanie .schein{animation:kerzeSchein 4.6s ease-in-out infinite}
.stefanie .f2 :is(.flamme,.schein){animation-delay:-1.1s}
.stefanie .f3 :is(.flamme,.schein){animation-delay:-2.3s}
.stefanie .f4 :is(.flamme,.schein){animation-delay:-.6s}
@keyframes kerzeFlackern{0%,100%{transform:scale(1,1) skewX(0deg)}18%{transform:scale(.95,1.05) skewX(2deg)}37%{transform:scale(1.03,.96) skewX(-1.5deg)}58%{transform:scale(.97,1.03) skewX(1deg)}79%{transform:scale(1.02,.98) skewX(-.6deg)}}
@keyframes kerzeSchein{0%,100%{opacity:1}35%{opacity:.78}62%{opacity:.9}}
/* Hinweis auf den Laden in Flawil (FLAWIL_HINWEIS in index.html,
   flawilHinweisHtml in server.js): unter der Begrüssung und auf der Seite
   eines nicht mehr verfügbaren Buchs */
.flawilHinweis{max-width:70ch;margin:12px auto 0;text-align:center;font-family:var(--schrift-buch);font-size:16.5px;line-height:1.4}
.flawilHinweis strong{color:var(--messing-hell)}
.flawilHinweis a{color:var(--messing-hell);text-decoration:underline;white-space:nowrap}
main > .flawilHinweis{margin:28px auto 8px}
/* Seite für ein nicht mehr verfügbares Buch (buchNichtVerfuegbarSeite in server.js) */
.nichtVerfuegbar{max-width:760px}
.nichtVerfuegbarLinks{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}

/* ===================== Zettelkatalog: Kategorien als Schubladenschrank ===================== */

/* Links die Schubladen untereinander in fester Breite (immer gut lesbar),
   rechts der Inhalt der offenen Schublade: die Unterkategorien als
   Leitkarten mit Registerreitern, unten die Lochstange – wie die Lochung der
   Buch-Karteikarten. Jede Schublade hat ein Messing-Etikett (Name, Anzahl)
   und einen Bügelgriff, der beim Greifen hochklappt; die offene ist ein
   Stück zum Inhalt hin herausgezogen. Animiert wird nur beim Aufziehen
   (.frisch, sonst würde jedes Neuzeichnen sie wiederholen) und nie bei
   "Bewegung reduzieren". Aufbau: katalogSchrankHTML() in index.html. */
.katalogSchrank{
  --schubladenBreite:240px;--auszug:12px;
  position:relative;display:grid;grid-template-columns:var(--schubladenBreite) minmax(0,1fr);gap:14px;align-items:stretch;
  overflow:visible; /* ist ein <nav>: die Regel der Kopfzeilen-Navigation (overflow-x:auto) schnitt das Schild ab */
  margin:24px 0 16px;padding:22px 12px 12px;border-radius:5px;
  background:var(--maserung),linear-gradient(180deg,#4F311B,var(--holz-dunkel));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),inset 0 3px 10px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.35);
}
/* Messingschild oben auf dem Schrank */
.schrankSchild{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:3px 16px;border-radius:2px;white-space:nowrap;
  font-family:var(--schrift-titel);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte);
  background:linear-gradient(180deg,var(--messing-hell),var(--messing) 50%,var(--messing-dunkel));
  border:1px solid var(--messing-dunkel);box-shadow:0 2px 4px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,245,210,.6);
}
.schubladen{display:flex;flex-direction:column;gap:6px;min-width:0}
.schublade{
  position:relative;display:flex;align-items:center;gap:8px;
  width:100%;min-height:50px;margin:0;padding:9px 10px 9px 4px;border:0;border-radius:3px;cursor:pointer;
  font:inherit;color:var(--tinte);text-align:left;text-decoration:none;
  white-space:normal; /* Knöpfe im <nav> erben sonst nowrap der Kopfzeilen-Navigation */
  background:var(--maserung),linear-gradient(180deg,var(--holz-hell),var(--holz) 62%,#5A3720);
  --kanten:inset 0 1px 0 rgba(255,222,170,.28),inset 0 -2px 0 rgba(0,0,0,.28),inset 3px 0 0 rgba(255,222,170,.07),inset -3px 0 0 rgba(0,0,0,.14);
  box-shadow:var(--kanten),0 1px 1px rgba(0,0,0,.5);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s;
}
.schublade:hover,.schublade:focus-visible{transform:translateX(4px);box-shadow:var(--kanten),3px 3px 8px rgba(0,0,0,.45)}
.schublade:focus-visible{outline:2px solid var(--messing-hell);outline-offset:2px}
.schublade[aria-current],.schublade[aria-expanded="true"]{transform:translateX(var(--auszug));z-index:1;box-shadow:var(--kanten),6px 6px 14px rgba(0,0,0,.55)}
/* Etikettenhalter: Messingrahmen mit zwei Schräubchen, darin ein Kärtchen
   mit Name (darf umbrechen) und darunter der Anzahl */
.etikett{
  position:relative;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  margin:0 12px;padding:4px 8px 3px;border-radius:1px;background:var(--papier),var(--pergament);
  box-shadow:0 0 0 2px var(--messing),0 0 0 3px var(--messing-dunkel),inset 0 1px 3px rgba(60,40,10,.35),0 2px 3px 2px rgba(0,0,0,.35);
  font-family:var(--schrift-maschine);line-height:1.15;color:var(--tinte);
}
.etikett::before,.etikett::after{
  content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--messing-hell),var(--messing) 55%,var(--messing-dunkel));box-shadow:0 1px 1px rgba(0,0,0,.5);
}
.etikett::before{left:-10px}
.etikett::after{right:-10px}
.etikettName{font-size:13.5px;font-weight:700;overflow-wrap:anywhere}
.etikettZahl{font-size:11px;color:var(--sepia);font-variant-numeric:lining-nums}
.schublade[aria-current] .etikettName,.schublade[aria-expanded="true"] .etikettName{color:var(--leder)}
/* Bügelgriff: zwei Rosetten, daran der Bügel – klappt beim Greifen und bei
   der offenen Schublade zum Betrachter hoch */
.griff{position:relative;display:block;flex:0 0 auto;width:34px;height:14px;perspective:120px}
.griff::before{
  content:"";position:absolute;left:0;right:0;top:0;height:7px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));
  background:
    radial-gradient(circle at 4px 3.5px,var(--messing-hell) 0 1.5px,var(--messing) 2.2px,var(--messing-dunkel) 3.4px,transparent 3.8px),
    radial-gradient(circle at calc(100% - 4px) 3.5px,var(--messing-hell) 0 1.5px,var(--messing) 2.2px,var(--messing-dunkel) 3.4px,transparent 3.8px);
}
.griff::after{
  content:"";position:absolute;left:3px;right:3px;top:3px;height:10px;
  border:2.5px solid var(--messing);border-top:0;border-bottom-color:var(--messing-hell);border-radius:0 0 12px 12px / 0 0 10px 10px;
  box-shadow:0 2px 2px rgba(0,0,0,.45);transform-origin:50% 0;transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.schublade:hover .griff::after,.schublade:focus-visible .griff::after,
.schublade[aria-current] .griff::after,.schublade[aria-expanded="true"] .griff::after{transform:rotateX(-65deg)}
/* Inhalt der offenen Schublade: Boden und Seitenwände aus Holz */
.schubladeInhalt{
  position:relative;display:flex;flex-direction:column;min-width:0;padding:16px 14px 32px;border-radius:2px;
  container-type:inline-size; /* Spaltenzahl der Karten nach Fachbreite (unten, "Bibliothekar") */
  background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 26px),var(--maserung),#3A2313;
  border-left:7px solid var(--holz);border-right:7px solid var(--holz);
  box-shadow:inset 0 -8px 12px rgba(0,0,0,.35);
}
/* Lochstange durch alle Karten */
.schubladeInhalt::after{
  content:"";position:absolute;left:-7px;right:-7px;bottom:11px;height:5px;border-radius:3px;
  background:linear-gradient(180deg,var(--messing-hell),var(--messing) 45%,var(--messing-dunkel));box-shadow:0 2px 3px rgba(0,0,0,.5);
}
/* Noch keine Schublade offen: leerer Boden mit Hinweis */
.schubladeInhalt.leer{display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;font-family:var(--schrift-maschine);font-size:14px;color:rgba(241,232,210,.75)}
.schubladeInhalt.leer::after{display:none}
/* Leitkarten der offenen Schublade: ein Raster, das die Fläche neben den
   Schubladen füllt. Spalten und Kartengrösse je nach Anzahl (Klassen aus
   katalogSchrankHTML): gross (bis 4 Karten, 2 Spalten), mittel (bis 6 in 2,
   bis 9 in 3 Spalten), klein (ab 10, 3 Spalten, Bild links vom Namen). Jede
   Karte mit versetztem Registerreiter oben, roter Linie unter dem Namen und
   Lochung unten – wie die Buch-Karteikarten. */
.karteiReiter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;flex:1 1 auto;align-content:center;padding-top:8px;perspective:600px}
.karteiReiter.spalten3{grid-template-columns:repeat(3,minmax(0,1fr))}
.karteiReiter.gross{grid-auto-rows:minmax(150px,240px)}
.karteiReiter.mittel{grid-auto-rows:minmax(100px,160px)}
.karteiReiter.klein{grid-auto-rows:minmax(52px,auto);gap:16px 10px}
.reiter{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;
  padding:12px 10px 18px;border:1px solid var(--pergament-tief);border-radius:2px;
  background:var(--papier),var(--pergament);color:var(--tinte);text-align:center;text-decoration:none;overflow-wrap:anywhere;
  font-family:var(--schrift-maschine);font-size:15px;line-height:1.2;
  box-shadow:0 3px 6px rgba(0,0,0,.4);transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
/* Registerreiter oben, versetzt wie bei echten Leitkarten */
.reiter::before{
  content:"";position:absolute;bottom:100%;left:8%;width:30%;height:8px;margin-bottom:-1px;
  border:1px solid var(--pergament-tief);border-bottom:0;border-radius:5px 5px 0 0;background:inherit;
}
.reiter:nth-child(3n+2)::before{left:35%}
.reiter:nth-child(3n)::before{left:62%}
/* Lochung unten in der Mitte */
.reiter::after{
  content:"";position:absolute;left:50%;bottom:5px;width:8px;height:8px;margin-left:-4px;border-radius:50%;
  background:#3A2313;box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}
.reiterName{display:block;padding-bottom:3px;border-bottom:1px solid rgba(158,43,37,.45);font-weight:700}
.reiter .zahl{font-size:12px;color:var(--sepia);font-variant-numeric:lining-nums}
.reiter:hover,.reiter:focus-visible{transform:translateY(-5px)}
.reiter:focus-visible{outline:2px solid var(--messing-hell);outline-offset:2px}
.reiter[aria-current]{background:var(--leder);color:var(--pergament);border-color:var(--messing)}
.reiter[aria-current]::before{border-color:var(--messing)}
.reiter[aria-current] .reiterName{border-bottom-color:var(--messing-hell)}
.reiter[aria-current] .zahl{color:var(--messing-hell)}
/* Grössen: gross und mittel mit dem Bild über dem Namen */
.karteiReiter.gross .reiter{font-size:18px;gap:10px}
.karteiReiter.gross .piktogramm{width:46px;height:46px}
.karteiReiter.gross .sprachKuerzel{font-size:18px;line-height:24px;padding:0 6px;border-width:2px}
.karteiReiter.mittel .piktogramm{width:30px;height:30px}
.karteiReiter.mittel .sprachKuerzel{font-size:14px;line-height:19px;padding:0 5px}
/* klein: Bild links, rechts daneben der Name (schmalere Buchschrift, mit
   Silbentrennung statt Umbruch mitten im Wort) und darunter die Anzahl;
   zu klein für die Lochung */
.karteiReiter.klein .reiter{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;align-content:center;justify-items:start;
  gap:1px 9px;padding:7px 10px 8px;text-align:left;
}
.karteiReiter.klein .reiter>:is(.piktogramm,.sprachKuerzel){grid-row:1 / span 2}
.karteiReiter.klein .reiterName{
  padding-bottom:0;border-bottom:0;font-family:var(--schrift-buch);font-size:15.5px;font-weight:600;line-height:1.15;
  overflow-wrap:normal;hyphens:auto;
}
.karteiReiter.klein .zahl{font-size:11px}
.karteiReiter.klein .piktogramm{width:20px;height:20px}
.karteiReiter.klein .reiter::after{display:none}
/* Neuzugänge hinter dem Titel (neuzugaengeEinsetzen in index.html): die 3
   neuesten Bücher mit Foto der Unterkategorie, blass wie durchscheinende
   Zettel, unter einem Pergament-Schleier, damit der Titel lesbar bleibt.
   Gross/mittel als Fächer hinter dem Titel, kompakt als Reihe rechts, nach
   links ausgeblendet. Nur Schmuck – die ganze Karte bleibt der Link. */
/* ohne z-index: keine eigene Stapelebene, sonst könnten die Bilder nicht mit
   dem Pergament der Karte "multiplizieren" (weisse Streifen → Papier) */
.reiterNeu{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-radius:2px;pointer-events:none;
}
.reiter>:not(.reiterNeu){position:relative;z-index:3}
.reiterNeu img{
  flex:0 0 auto;height:70%;width:auto;aspect-ratio:88/126;object-fit:cover;margin:0 -5%;border-radius:1px;
  box-shadow:none;mix-blend-mode:multiply;filter:sepia(.25) saturate(.85);opacity:0;transition:opacity .9s ease;
}
.reiterNeu.da img{opacity:.42}
.reiter:hover .reiterNeu img,.reiter:focus-visible .reiterNeu img{opacity:.7}
.reiterNeu img:nth-child(1){transform:rotate(-8deg) translateY(5%)}
.reiterNeu img:nth-child(2){z-index:1}
.reiterNeu img:nth-child(3){transform:rotate(8deg) translateY(5%)}
.reiterNeu::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(ellipse 55% 42% at 50% 54%,rgba(241,232,210,.82),rgba(241,232,210,.35) 70%,rgba(241,232,210,0));
}
.karteiReiter.klein .reiterNeu{
  justify-content:flex-end;gap:3px;padding-right:6px;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 80%);mask-image:linear-gradient(90deg,transparent 30%,#000 80%);
}
.karteiReiter.klein .reiterNeu img{height:84%;margin:0;transform:none}
.karteiReiter.klein .reiterNeu::after{display:none}
/* lange Namen laufen über die Cover: Pergament-Schein um die Schrift */
.karteiReiter.klein .reiter:has(.reiterNeu.da) :is(.reiterName,.zahl){text-shadow:0 0 2px var(--pergament),0 0 5px var(--pergament),0 0 9px var(--pergament)}
@media (max-width:560px){.reiterNeu img:nth-child(n+3){display:none}}
/* Piktogramm vor dem Namen (Symbole aus /piktogramme.svg), Sprachen als
   Kürzel-Stempel wie .stempel */
.piktogramm{flex:0 0 auto;align-self:center;width:16px;height:16px;color:var(--sepia)}
.reiter[aria-current] .piktogramm{color:var(--messing-hell)}
.sprachKuerzel{
  flex:0 0 auto;align-self:center;padding:0 3px;border:1.2px solid var(--siegellack);border-radius:2px;
  font-family:var(--schrift-maschine);font-size:10px;font-weight:700;line-height:13px;letter-spacing:.04em;
  color:var(--siegellack);transform:rotate(-4deg);
}
.reiter[aria-current] .sprachKuerzel{color:var(--pergament);border-color:var(--pergament)}
/* Schublade "Zufallsfunde": rotes Etikett, etwas abgesetzt unter den anderen */
.schublade.zufall{margin-top:6px}
.schublade.zufall .etikett{background:linear-gradient(180deg,var(--leder-hell),var(--leder))}
.schublade.zufall .etikettName{color:var(--pergament)}
.schublade.zufall .etikettZahl{color:var(--messing-hell)}
.etikettName .piktogramm{display:inline-block;width:13px;height:13px;margin-right:5px;vertical-align:-2px;color:inherit}
/* Fach mit den Zufallsfunden: Cover-Karten (wie "Neu eingetroffen") statt
   Leitkarten, deshalb ohne Lochstange */
.schubladeInhalt.zufallsFach{display:flex;flex-direction:column;padding-bottom:12px}
.schubladeInhalt.zufallsFach::after{display:none}
.zufallsFunde{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 10px;flex:1 1 auto;align-content:start}
.zufallHinweis{grid-column:1/-1;margin:20px 0;text-align:center;font-family:var(--schrift-maschine);font-size:14px;color:rgba(241,232,210,.75)}
.zufallFuss{display:flex;justify-content:flex-end;margin-top:12px}
.zufallFuss .btn{display:inline-flex;align-items:center;gap:6px}
.zufallFuss .piktogramm{width:14px;height:14px;color:inherit}
/* Neu gemischt: die Cover drehen sich nacheinander ein, die Schublade rüttelt */
.zufallsFunde.gemischt .neuCard{animation:coverEin .6s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--i,0) * 80ms)}
@keyframes coverEin{from{opacity:0;transform:perspective(600px) rotateY(-80deg)}to{opacity:1;transform:none}}
.schublade.ruetteln{animation:schubladeRuetteln .45s ease-in-out}
@keyframes schubladeRuetteln{
  0%,100%{transform:translateX(var(--auszug))}
  20%{transform:translateX(calc(var(--auszug) + 5px)) rotate(.6deg)}
  40%{transform:translateX(calc(var(--auszug) - 3px)) rotate(-.6deg)}
  60%{transform:translateX(calc(var(--auszug) + 3px)) rotate(.4deg)}
  80%{transform:translateX(calc(var(--auszug) - 1px))}
}
/* Aufziehen: Schublade fährt heraus und federt am Anschlag nach, der Inhalt
   gleitet heraus, die Karten richten sich nacheinander auf (--i setzt
   katalogKartenNummerieren()). "backwards", damit danach wieder Hover und
   Ruhelage gelten. */
.schublade.frisch{animation:schubladeAuszug .9s cubic-bezier(.2,.9,.3,1) backwards}
@keyframes schubladeAuszug{0%{transform:translateX(0)}65%{transform:translateX(calc(var(--auszug) + 5px))}82%{transform:translateX(calc(var(--auszug) - 2px))}100%{transform:translateX(var(--auszug))}}
.schubladeInhalt.frisch{animation:inhaltAuf .7s ease-out backwards}
@keyframes inhaltAuf{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.schubladeInhalt.frisch .reiter{animation:karteAuf .5s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(250ms + var(--i,0) * 55ms)}
@keyframes karteAuf{from{opacity:0;transform:translateY(12px) rotateX(-40deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .schublade,.reiter,.griff::after{transition:none}
  .schublade.frisch,.schubladeInhalt.frisch,.schubladeInhalt.frisch .reiter,
  .zufallsFunde.gemischt .neuCard,.schublade.ruetteln{animation:none}
}
/* Handy: schmalere, aber weiterhin feste Schubladen, der Inhalt rechts daneben */
@media (max-width:560px){
  .katalogSchrank{--schubladenBreite:150px;gap:10px;padding:20px 8px 8px}
  .schublade{min-height:54px;padding:8px 6px 8px 2px;gap:2px}
  .katalogSchrank{--auszug:7px}
  .etikett{margin:0 10px;padding:3px 5px 2px}
  .etikett::before{left:-8px}
  .etikett::after{right:-8px}
  .etikettName{font-size:12px}
  .etikettName .piktogramm{display:none} /* "Zufallsfunde" passt sonst nicht ins Etikett */
  .griff{display:none} /* Platz für die Leiter des Bibliothekars */
  .schubladeInhalt{padding:12px 8px 30px;border-left-width:5px;border-right-width:5px}
  .schubladeInhalt.leer{font-size:12.5px}
  .karteiReiter,.karteiReiter.spalten3{grid-template-columns:minmax(0,1fr);gap:18px 0}
  .karteiReiter.gross{grid-auto-rows:minmax(90px,150px)}
  .karteiReiter.mittel{grid-auto-rows:minmax(70px,110px)}
  .karteiReiter.klein{grid-auto-rows:minmax(44px,auto);gap:14px 0}
  .reiter{font-size:13px;padding:8px 6px 16px}
  .karteiReiter.gross .reiter{font-size:14px}
  .karteiReiter.gross .piktogramm{width:32px;height:32px}
  .karteiReiter.gross .sprachKuerzel{font-size:14px;line-height:19px}
  .karteiReiter.mittel .piktogramm{width:24px;height:24px}
  .karteiReiter.klein .reiter{padding:5px 7px 6px;column-gap:6px}
  .karteiReiter.klein .reiterName{font-size:14px}
  .karteiReiter.klein .piktogramm{width:16px;height:16px}
  /* rechts neben den Schubladen sind nur gut 110 px Platz: ein Buch pro
     Zeile (zwei nebeneinander wären je ~50 px breit), dafür nur 4 */
  .zufallsFunde{grid-template-columns:minmax(0,1fr);gap:16px 0}
  .zufallsFunde>.neuCard:nth-child(n+5){display:none}
  .zufallFuss{justify-content:center}
}
@media (max-width:400px){
  .katalogSchrank{--schubladenBreite:136px}
}

/* ===================== Der kleine Bibliothekar (Seite "Kategorien") ===================== */

/* Links neben dem Schrank lehnt eine Leiter, davor steht der Bibliothekar –
   eine kolorierte Federzeichnung (Inline-SVG aus index.html,
   BIBLIOTHEKAR_SVG). Er klettert zur gewählten Schublade und zieht sie auf
   (Ablauf: bibliothekarHolt()). Grösse und Sprossen hängen am
   Schubladenabstand --fach, den das JS misst: --figur = Figurhöhe in
   Schubladen, Breite = Höhe × 36/93 (viewBox). Die Position steht in --y
   (während des Kletterns per Web Animations API), die Pose in data-pose. */
.katBuehne{
  --figH:calc(var(--fach,56px) * var(--figur,1.35));--figB:calc(var(--figH) * .387);
  display:grid;grid-template-columns:calc(var(--figB) + 4px) minmax(0,1fr);margin:24px 0 16px;
}
.katBuehne .katalogSchrank{margin:0}
.katSeiteKopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px}
.katSeiteKopf .hint{margin:0}
.leiterBahn{position:relative;z-index:2;min-width:0}
/* Leiter: Holme mit Tuschkante, Sprossen im Abstand --sprosse (die Füsse
   landen immer auf einer Sprosse), oben zwei Messinghaken an der Schrankkante */
.leiter{
  --holm:max(3px,calc(var(--figB) * .09));
  position:absolute;top:2px;bottom:0;left:calc(4px + var(--figB) * .17);width:calc(var(--figB) * .66);
  background:repeating-linear-gradient(180deg,transparent 0 calc(var(--sprosse,19px) - var(--holm)),var(--tinte) calc(var(--sprosse,19px) - var(--holm)) calc(var(--sprosse,19px) - var(--holm) + 1px),var(--holz-hell) calc(var(--sprosse,19px) - var(--holm) + 1px) calc(var(--sprosse,19px) - 1px),var(--tinte) calc(var(--sprosse,19px) - 1px) var(--sprosse,19px));
}
.leiter::before,.leiter::after{
  content:"";position:absolute;top:0;bottom:0;width:var(--holm);
  background:linear-gradient(90deg,var(--holz-hell),var(--holz));border:1px solid var(--tinte);border-radius:1px;
}
.leiter::before{left:0}
.leiter::after{right:0}
.leiter i{position:absolute;top:-6px;width:calc(var(--holm) + 4px);height:8px;border:2px solid var(--messing);border-bottom:0;border-left:0;border-radius:0 6px 0 0}
.leiter i:first-child{left:0}
.leiter i:last-child{right:-4px}
.bibliothekar{
  position:absolute;top:0;left:4px;width:var(--figB);height:var(--figH);overflow:visible;
  transform:translateY(var(--y,0px));
  /* feiner Pergament-Rand, leiser warmer Schein (hebt ihn vom Grün ab), Schatten */
  filter:drop-shadow(0 0 .7px rgba(241,232,210,.9)) drop-shadow(0 0 9px rgba(255,230,160,.55)) drop-shadow(1px 2px 2px rgba(0,0,0,.45));
}
/* Drehpunkte in viewBox-Einheiten (transform-box: view-box ist Standard) */
.bibliothekar g{transition:transform .35s ease}
.bibliothekar .figur{transform-origin:32px 94px}
/* (gilt auch für Hans am Pult in der Kopfzeile, gleiche Zeichnung) */
:is(.bibliothekar,.pultSzene) .kopf{transform-origin:32px 27px}
:is(.bibliothekar,.pultSzene) .arm-v{transform-origin:39.5px 33px}
:is(.bibliothekar,.pultSzene) .unterarm-v{transform-origin:41px 46px}
:is(.bibliothekar,.pultSzene) .arm-h{transform-origin:24.5px 33px}
:is(.bibliothekar,.pultSzene) .unterarm-h{transform-origin:23.5px 46px}
.bibliothekar .buechlein,.bibliothekar .wedel{opacity:0;transition:opacity .3s}
.bibliothekar .blatt{transform-origin:41px 52.6px}
/* Auf der Leiter hält er sich mit der hinteren Hand oben fest (nach links
   oben gedreht, sonst verschwände sie hinter dem Kopf) */
.bibliothekar.leiterHalt .arm-h{transform:rotate(166deg)}
/* Klettern: Arme und Beine im Wechsel (Phasenversatz über negative Verzögerung) */
.bibliothekar[data-pose="klettert"] .arm-v{animation:kletterArm .4s ease-in-out infinite alternate}
.bibliothekar[data-pose="klettert"] .arm-h{animation:kletterArmHinten .4s ease-in-out -.4s infinite alternate}
.bibliothekar[data-pose="klettert"] .bein-v{animation:kletterBein .4s ease-in-out infinite alternate}
.bibliothekar[data-pose="klettert"] .bein-h{animation:kletterBein .4s ease-in-out -.4s infinite alternate}
.bibliothekar.eilt[data-pose="klettert"] :is(.arm-v,.bein-v){animation-duration:.14s}
.bibliothekar.eilt[data-pose="klettert"] :is(.arm-h,.bein-h){animation-duration:.14s;animation-delay:-.14s}
@keyframes kletterArm{from{transform:rotate(-172deg)}to{transform:rotate(-140deg)}}
@keyframes kletterArmHinten{from{transform:rotate(150deg)}to{transform:rotate(178deg)}}
@keyframes kletterBein{from{transform:translateY(-7px)}to{transform:none}}
/* Greifen, ziehen (lehnt sich zurück), zuschieben (lehnt sich vor) */
.bibliothekar[data-pose="greift"] .arm-v{transform:rotate(-84deg)}
.bibliothekar[data-pose="greift"] .unterarm-v{transform:rotate(-6deg)}
.bibliothekar[data-pose="greift"] .figur{transform:rotate(3deg)}
.bibliothekar[data-pose="zieht"] .arm-v{transform:rotate(-76deg)}
.bibliothekar[data-pose="zieht"] .unterarm-v{transform:rotate(-26deg)}
.bibliothekar[data-pose="zieht"] .figur{transform:rotate(-6deg)}
.bibliothekar[data-pose="schiebt"] .arm-v{transform:rotate(-88deg)}
.bibliothekar[data-pose="schiebt"] .figur{transform:rotate(6deg)}
/* "Neu mischen": er kramt in der Schublade */
.bibliothekar[data-pose="kramt"] .arm-v{transform:rotate(-80deg)}
.bibliothekar[data-pose="kramt"] .unterarm-v{animation:wackeln .14s ease-in-out infinite alternate}
.bibliothekar[data-pose="kramt"] .figur{transform:rotate(3deg)}
@keyframes wackeln{from{transform:rotate(-18deg)}to{transform:rotate(14deg)}}
/* Leerlauf-Gesten: Brille hochschieben, im Büchlein blättern, Staub wedeln */
.bibliothekar[data-pose="brille"] .arm-v{animation:brilleArm 2.4s ease-in-out}
.bibliothekar[data-pose="brille"] .unterarm-v{animation:brilleUnterarm 2.4s ease-in-out}
.bibliothekar[data-pose="brille"] .kopf{animation:brilleKopf 2.4s ease-in-out}
@keyframes brilleArm{0%,100%{transform:none}22%,72%{transform:rotate(-136deg)}}
@keyframes brilleUnterarm{0%,100%{transform:none}22%{transform:rotate(-114deg)}45%,72%{transform:rotate(-121deg)}}
@keyframes brilleKopf{0%,100%{transform:none}30%,70%{transform:rotate(-4deg)}}
.bibliothekar[data-pose="blaettert"] .arm-v{transform:rotate(-20deg)}
.bibliothekar[data-pose="blaettert"] .unterarm-v{transform:rotate(-110deg)}
.bibliothekar[data-pose="blaettert"] .kopf{transform:rotate(9deg)}
.bibliothekar[data-pose="blaettert"] .buechlein{opacity:1}
.bibliothekar[data-pose="blaettert"] .blatt{animation:umblaettern 1.1s ease-in-out .6s 2}
@keyframes umblaettern{0%{transform:none}50%,100%{transform:scaleX(-1)}}
.bibliothekar[data-pose="wedelt"] .arm-v{transform:rotate(-80deg)}
.bibliothekar[data-pose="wedelt"] .unterarm-v{animation:wackeln .22s ease-in-out .3s 9 alternate}
.bibliothekar[data-pose="wedelt"] .wedel{opacity:1}
/* Gewählte Schublade, solange er unterwegs ist: das Etikett leuchtet sanft */
.schublade.bestellt .etikett{animation:bestellt 1.4s ease-in-out infinite}
@keyframes bestellt{50%{box-shadow:0 0 0 2px var(--messing),0 0 0 3px var(--messing-dunkel),inset 0 1px 3px rgba(60,40,10,.35),0 0 12px 4px rgba(230,207,138,.55)}}
/* Inhalt der eben zugeschobenen Schublade */
.schubladeInhalt.schliesst{opacity:.3;transition:opacity .4s}
@media (prefers-reduced-motion: reduce){
  .bibliothekar g,.schubladeInhalt.schliesst{transition:none}
  .bibliothekar *,.schublade.bestellt .etikett{animation:none !important}
}
/* Karten-Spalten nach Fachbreite (breite Fenster) */
@container (min-width:900px){.karteiReiter.klein{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container (min-width:1300px){.karteiReiter.klein{grid-template-columns:repeat(5,minmax(0,1fr))}}
@container (min-width:1000px){
  .karteiReiter.mittel:not(.spalten3){grid-template-columns:repeat(3,minmax(0,1fr))}
  /* wenige Karten: höchstens 320 px breit, mittig – sonst riesige leere Karten */
  .karteiReiter.gross{grid-template-columns:repeat(auto-fit,minmax(200px,320px));justify-content:center}
}
/* Desktop: die Seite füllt das Fenster unter der Kopfzeile (Entscheid
   2026-10-10). Die Schubladen teilen sich die Höhe, die Karten wachsen bis
   zu einer Obergrenze mit und stehen mittig, die Zufallsfunde passen ohne
   Scrollen hinein (Fach als
   Grössen-Container: breit → 1 Reihe à 8, sonst 2 à 4). Reicht die Höhe
   nicht, wächst die Seite einfach weiter (min-height). */
@media (min-width:900px) and (min-height:600px){
  body[data-view="kategorien"] #app{display:flex;flex-direction:column;min-height:calc(100dvh - var(--kopfHoehe,110px));padding-bottom:22px}
  body[data-view="kategorien"] #katSeiteListe{flex:1 1 auto;display:flex;flex-direction:column}
  body[data-view="kategorien"] .katBuehne{flex:1 1 auto;grid-template-rows:1fr;margin:22px 0 0}
  body[data-view="kategorien"] #katSchrankPlatz{display:flex;flex-direction:column;min-width:0}
  body[data-view="kategorien"] .katalogSchrank{flex:1 1 auto;grid-template-rows:1fr}
  body[data-view="kategorien"] .schublade{flex:1 1 0}
  body[data-view="kategorien"] .etikettName{font-size:clamp(13.5px,1.7vh,18px)}
  body[data-view="kategorien"] .etikettZahl{font-size:clamp(11px,1.3vh,14px)}
  body[data-view="kategorien"] .karteiReiter{align-content:center}
  body[data-view="kategorien"] .karteiReiter.gross{grid-auto-rows:minmax(150px,280px)}
  body[data-view="kategorien"] .karteiReiter.mittel{grid-auto-rows:minmax(100px,220px)}
  body[data-view="kategorien"] .karteiReiter.klein{grid-auto-rows:minmax(52px,96px)}
  body[data-view="kategorien"] .schubladeInhalt.zufallsFach{container-type:size}
  body[data-view="kategorien"] .zufallsFunde{align-content:center;--coverBreite:calc((100cqh - 200px) / 2 * .7)}
  body[data-view="kategorien"] .zufallsFunde .neuCard{width:min(100%,var(--coverBreite));justify-self:center}
  @container (aspect-ratio > 2.2){
    body[data-view="kategorien"] .zufallsFunde{grid-template-columns:repeat(8,minmax(0,1fr));--coverBreite:calc((100cqh - 130px) * .7)}
  }
}
/* Handy: kleinere Figur, die Schubladen behalten ihre Breite */
@media (max-width:560px){
  .katBuehne{--figur:1;margin:20px 0 12px}
}

/* ---------- Hans am Pult (Kopfzeile, nur im Shop) ---------- */
/* Hans sitzt links vom WhatsApp-Knopf am Schreibpult und protokolliert
   (HANS_PULT_SVG in index.html). Die Szene (80 × 64 px, Handy 60 × 48) ist
   höher als die Markenzeile – negativer Rand, damit die Kopfzeile nicht
   wächst; sie reicht oben ins Polster und unten rechts in die (dort leere)
   Navigationszeile. 9-s-Takt: schreiben
   (Unterarm), Feder ins Tintenfass tunken (Oberarm), kurz aufblicken (Kopf).
   Auf der Seite "Kategorien" steht er an der Leiter: Stuhl leer, Feder im
   Fass. In der Verwaltung unsichtbar. Unter 500 px ersetzt er den
   Untertitel (.brandZusatz, bräche sonst zweizeilig um). */
.kopfHans{display:none;background:none;border:0;padding:0;font:inherit;color:inherit}
.kopfHans:not(:disabled){cursor:pointer}
.kopfHans:focus-visible{outline:2px solid var(--messing-hell);outline-offset:3px;border-radius:4px}
body[data-ansicht="shop"] .kopfHans{display:block;flex:0 0 auto;width:80px;height:64px;margin:-13px 0 -13px auto}
body[data-ansicht="shop"] .kopfHans + .waKnopf{margin-left:6px}
/* Lampenschein: die grüne Bankerlampe auf dem Pult wirft einen warmen
   Lichtfleck in die Kopfzeile – Hans und sein Pult heben sich als dunkle
   Zeichnung vom hellen Licht ab (auf dem dunklen Grün allein gingen Weste
   und Holz unter). Antwortet er im Chat (.arbeitet), dreht er die Lampe
   etwas höher. Bleibt auch an, wenn das Pult leer ist. */
.kopfHans{position:relative;isolation:isolate}
.kopfHans::before{
  content:"";position:absolute;z-index:-1;left:-42%;right:-34%;top:-26%;bottom:-26%;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,238,186,.74),rgba(244,220,150,.40) 40%,rgba(230,207,138,.13) 64%,rgba(230,207,138,0) 78%);
  transition:opacity .6s ease;opacity:.88;
}
.kopfHans.arbeitet::before{opacity:1}
/* Desktop ab 900 px: Hans gross in der Mitte der Kopfzeile (110 × 88 px),
   über Marken- und Navigationszeile; die Kopfzeile wird nicht höher.
   Weicht die Navigation (kopfHansPlatz in index.html), sitzt er wieder
   rechts. Der Lichtschein bleibt unten innerhalb der Kopfzeile. */
@media (min-width:900px){
  body[data-ansicht="shop"] .brand{position:relative}
  body[data-ansicht="shop"]:not(.hansRechts) .kopfHans{position:absolute;left:50%;top:5px;width:110px;height:88px;margin:0;transform:translateX(-50%)}
  body[data-ansicht="shop"]:not(.hansRechts) .kopfHans::before{bottom:-4%}
  body[data-ansicht="shop"]:not(.hansRechts) .kopfHans + .waKnopf{margin-left:auto}
}
/* .pultSzene = das SVG selbst (Kopfzeile und Warte-Blase im Chat) */
.pultSzene{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 .6px rgba(241,232,210,.85)) drop-shadow(1px 1px 1.5px rgba(0,0,0,.4))}
.pultSzene .arm-h{transform:rotate(-30deg)}
.pultSzene .unterarm-h{transform:rotate(-70deg)}
.pultSzene .arm-v{transform:rotate(-37deg);animation:hansArmOben 9s ease-in-out infinite}
.pultSzene .unterarm-v{transform:rotate(-55deg);animation:hansArmUnten 9s ease-in-out infinite}
.pultSzene .kopf{transform:rotate(4deg);animation:hansKopf 9s ease-in-out infinite}
@keyframes hansArmOben{0%,100%{transform:rotate(-37deg)}54%{transform:rotate(-45deg)}60%,68%{transform:rotate(-15deg)}74%{transform:rotate(-37deg)}}
@keyframes hansArmUnten{
  0%,6%,12%,18%,24%,30%,36%,42%,48%,54%{transform:rotate(-55deg)}
  3%,9%,15%,21%,27%,33%,39%,45%,51%{transform:rotate(-50deg)}
  60%,68%{transform:rotate(-112deg)}
  74%,100%{transform:rotate(-55deg)}
}
@keyframes hansKopf{0%,54%,100%{transform:rotate(4deg)}60%,68%{transform:none}80%,92%{transform:rotate(-7deg)}}
/* Während Hans im Chat antwortet (.arbeitet, hansArbeitet in index.html):
   3,2-s-Takt – eifrig schreiben, dann Hand heben und eine Seite im
   Protokollbuch umwenden (von rechts nach links um den Buchrücken). */
.pultSzene .blattPult{opacity:0;transform-origin:68px 42.9px}
.arbeitet .pultSzene .blattPult{animation:pultBlatt 3.2s ease-in-out infinite}
.arbeitet .pultSzene .arm-v{animation:hansArmEifrig 3.2s ease-in-out infinite}
.arbeitet .pultSzene .unterarm-v{animation:hansSchreibenEifrig 3.2s ease-in-out infinite}
.arbeitet .pultSzene .kopf{animation:none;transform:rotate(7deg)}
@keyframes pultBlatt{0%,52%{opacity:0;transform:none}56%{opacity:1;transform:rotate(-6deg)}74%{transform:rotate(-90deg)}90%{opacity:1;transform:rotate(-172deg)}95%,100%{opacity:0;transform:rotate(-176deg)}}
@keyframes hansArmEifrig{0%{transform:rotate(-35deg)}50%{transform:rotate(-46deg)}56%,92%{transform:rotate(-30deg)}100%{transform:rotate(-35deg)}}
@keyframes hansSchreibenEifrig{
  0%,8%,16%,24%,32%,40%,48%{transform:rotate(-56deg)}
  4%,12%,20%,28%,36%,44%{transform:rotate(-49deg)}
  56%,92%{transform:rotate(-66deg)}
  100%{transform:rotate(-56deg)}
}
/* An der Leiter (Seite "Kategorien"): blättert, solange die Antwort läuft */
.bibliothekar.chatLiest[data-pose="blaettert"] .blatt{animation-iteration-count:infinite}
.kopfHans .hansSitzt,.kopfHans .federImFass{transition:opacity .6s}
.kopfHans .federImFass{opacity:0}
body[data-view="kategorien"] .kopfHans .hansSitzt{opacity:0}
body[data-view="kategorien"] .kopfHans .federImFass{opacity:1}
body[data-view="kategorien"] .kopfHans .blattPult{display:none}
body[data-view="kategorien"] .kopfHans *{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.pultSzene *{animation:none !important}}
@media (max-width:499px){
  body[data-ansicht="shop"] .brandZusatz{display:none}
  body[data-ansicht="shop"] .kopfHans{width:60px;height:48px;margin:-5px 0 -5px auto}
}
/* sehr schmale Handys: Logo, Hans und WhatsApp-Knopf passen sonst nicht nebeneinander */
@media (max-width:360px){
  body[data-ansicht="shop"] .kopfHans{width:52px;height:42px;margin:-2px 0 -2px auto}
}

/* ---------- Zitat des Tages (zitatEinsetzen in index.html) ---------- */
/* Desktop (Hans in der Mitte): Sprechblase aus Pergament rechts neben ihm,
   Spitze zu ihm hin, höchstens 3 Zeilen (Zitate sind höchstens 140 Zeichen).
   Ein Klick öffnet den Chat. Nicht auf der Seite "Kategorien" (Pult leer)
   und nicht, wenn Hans nach rechts ausweicht – dann wie auf dem Handy auf
   der Startseite über den Schätzen (.zitatStart). */
.hansZitat{display:none}
@media (min-width:900px){
  body[data-ansicht="shop"]:not(.hansRechts):not([data-view="kategorien"]) .hansZitat:not([hidden]){
    display:block;position:absolute;left:calc(50% + 74px);top:7px;z-index:1;
    width:min(360px,calc(50% - 74px - 62px));padding:6px 13px 6px;
    text-align:left;cursor:pointer;font:inherit;color:var(--tinte);
    background:var(--papier),var(--pergament);border:1px solid var(--messing-dunkel);border-radius:7px;
    box-shadow:0 3px 10px rgba(0,0,0,.35);
  }
  body[data-ansicht="shop"]:not(.hansRechts) .hansZitat::before{
    content:"";position:absolute;left:-7px;top:24px;width:12px;height:12px;transform:rotate(45deg);
    background:var(--pergament);border-left:1px solid var(--messing-dunkel);border-bottom:1px solid var(--messing-dunkel);
  }
  body[data-ansicht="shop"]:not(.hansRechts) .hansZitat:hover,
  body[data-ansicht="shop"]:not(.hansRechts) .hansZitat:focus-visible{box-shadow:0 4px 14px rgba(0,0,0,.45),0 0 0 2px var(--messing-hell)}
  body:not(.hansRechts) .zitatStart{display:none}
}
.hansZitat .zitatText{
  font-family:var(--schrift-buch);font-style:italic;font-size:15px;line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.hansZitat .zitatVon{display:block;text-align:right;font-family:var(--schrift-text);font-size:11.5px;line-height:1.2;color:var(--sepia)}
.zitatStart{display:flex;align-items:flex-start;gap:12px;margin:2px 0 18px;padding:10px 14px;
  border-left:3px solid var(--messing);background:rgba(241,232,210,.07);border-radius:0 4px 4px 0}
.zitatStart[hidden]{display:none}
.zitatStart .hansMini{flex:0 0 auto;margin-top:2px}
.zitatInhalt{display:flex;flex-direction:column;gap:2px;min-width:0}
.zitatLabel{font-family:var(--schrift-titel);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--messing-hell)}
.zitatStart .zitatText{font-family:var(--schrift-buch);font-style:italic;font-size:18px;line-height:1.35;color:var(--ink)}
.zitatStart .zitatVon{font-family:var(--schrift-text);font-size:13px;color:var(--muted)}

/* ===================== Chat mit Hans ===================== */

/* Chatfenster (hansAufbauen in index.html): Pergament-Karteikarte rechts
   unter der Kopfzeile, auf dem Handy der ganze Bildschirm. Hans schreibt in
   Garamond auf Pergament, eigene Fragen stehen rechts auf hellem Grün,
   Bücher als kleine Karten (nur echte Bücher, siehe hans.js). Feste Farben,
   damit es auf jeder Shop-Seite gleich aussieht; in der Verwaltung nie. */
.hansChat{
  position:fixed;z-index:45;top:calc(var(--kopfHoehe,110px) + 8px);right:var(--seitenRand,16px);
  width:min(400px,calc(100vw - 32px));max-height:calc(100dvh - var(--kopfHoehe,110px) - 24px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--papier),var(--pergament);color:var(--tinte);
  border:1px solid var(--messing-dunkel);border-radius:4px;box-shadow:0 12px 30px rgba(0,0,0,.45);
  font-family:var(--schrift-buch);
  --ink:var(--tinte);--muted:var(--sepia);--line:var(--pergament-tief);
}
.hansChat[hidden],body[data-ansicht="intern"] .hansChat{display:none}
.hansChatKopf{
  display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;
  background:var(--flaschengruen);color:var(--pergament);border-bottom:2px solid var(--messing);
}
.hansMini{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--pergament);border:1.5px solid var(--messing)}
.hansChatName{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.hansChatName strong{font-family:var(--schrift-titel);font-size:17px;letter-spacing:.06em}
.hansChatName span{font-size:13px;font-style:italic;color:var(--messing-hell)}
.hansZu{margin-left:auto;background:none;border:0;color:var(--pergament);font-size:26px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:3px}
.hansZu:hover,.hansZu:focus-visible{background:rgba(255,255,255,.12)}
.hansVerlauf{flex:1 1 auto;overflow-y:auto;padding:12px 12px 4px;display:flex;flex-direction:column;gap:10px;min-height:120px;overscroll-behavior:contain}
.hansMsg{max-width:88%;padding:8px 11px;border-radius:3px;font-size:16px;line-height:1.45}
.hansMsg p{margin:0}
.hansMsg p+p,.hansMsg p+.hansKarten,.hansMsg .hansKarten+p{margin-top:.5em}
.hansMsg.hans{align-self:flex-start;background:#FBF6E8;border:1px solid var(--pergament-tief);border-left:3px solid var(--leder)}
.hansMsg.ich{align-self:flex-end;background:#E2EADC;border:1px solid #C7D3BE;font-family:var(--schrift-text);font-size:14.5px}
.hansMsg.hinweis{font-style:italic;color:var(--sepia)}
.hansKarten{display:flex;flex-direction:column;gap:6px}
.hansKarte{
  display:flex;gap:9px;align-items:center;padding:5px 7px;text-decoration:none;color:var(--tinte);
  background:var(--pergament);border:1px solid var(--pergament-tief);border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.hansKarte:hover,.hansKarte:focus-visible{border-color:var(--messing-dunkel);background:#FFF8E6}
.hansKarte img,.hansKarte .spine{flex:0 0 auto;width:38px;height:54px;object-fit:cover;border-radius:2px;box-shadow:1px 1px 3px rgba(0,0,0,.3)}
.hansKarte img{mix-blend-mode:multiply;box-shadow:none} /* weisse Streifen werden Papier */
.hansKarte .spine{font-size:16px}
.hansKarteText{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.hansKarteTitel{font-family:var(--schrift-text);font-weight:600;font-size:15px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.hansKarteAutor{font-style:italic;font-size:15px;color:var(--sepia);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hansKartePreis{font-family:var(--schrift-text);font-size:14.5px;font-weight:700;color:var(--leder)}
.hansWartet p{color:var(--sepia);font-style:italic}
.hansWartetPult{display:none}
.hansPunkte i{display:inline-block;width:4px;height:4px;margin-left:3px;border-radius:50%;background:var(--sepia);animation:hansPunkt 1.2s ease-in-out infinite}
.hansPunkte i:nth-child(2){animation-delay:.2s}
.hansPunkte i:nth-child(3){animation-delay:.4s}
@keyframes hansPunkt{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.hansNeu{display:flex;justify-content:center;padding:2px 0 6px}
.hansEingabe{display:flex;gap:8px;align-items:flex-end;padding:8px 12px 6px;border-top:1px solid var(--pergament-tief)}
.hansEingabe textarea{
  flex:1 1 auto;min-width:0;resize:none;padding:8px 10px;border:1px solid var(--messing-dunkel);border-radius:3px;
  background:var(--pergament-hell);color:var(--tinte);font-family:var(--schrift-buch);font-size:16px;line-height:1.35;color-scheme:light;
}
.hansEingabe .btn{flex:0 0 auto}
.hansHinweis{margin:0;padding:0 12px 9px;font-family:var(--schrift-text);font-size:11.5px;color:var(--sepia)}
.hansHinweis a{color:inherit}
@media (prefers-reduced-motion: reduce){.hansPunkte i{animation:none;opacity:.6}}
/* Handy: ganzer Bildschirm, über der Kopfzeile */
@media (max-width:560px){
  .hansChat{
    inset:0;top:0;right:0;width:auto;max-height:none;z-index:60;border:0;border-radius:0;
    padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
  }
  .hansMsg{max-width:92%}
  /* die Kopfzeile ist verdeckt – Hans arbeitet hier in der Warte-Blase */
  .hansWartet{display:flex;align-items:center;gap:10px}
  .hansWartetPult{display:block;flex:0 0 auto;width:60px;height:48px}
}

/* ===================== Schalter (Verwaltung) ===================== */

/* Ein/Aus-Schalter aus einer Checkbox (role="switch"): die echte Checkbox
   liegt unsichtbar über der Bahn und bleibt bedienbar (Tastatur, Klick). */
.schalter{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;white-space:nowrap}
.schalter input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.schalterBahn{position:relative;flex:0 0 auto;width:38px;height:22px;border-radius:11px;background:#C9BFA6;transition:background .2s;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.schalterBahn::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .2s}
.schalter input:checked+.schalterBahn{background:var(--bankerlampe)}
.schalter input:checked+.schalterBahn::after{transform:translateX(16px)}
.schalter input:focus-visible+.schalterBahn{outline:3px solid var(--focus);outline-offset:2px}
.schalter input:disabled+.schalterBahn{opacity:.5}
@media (prefers-reduced-motion: reduce){.schalterBahn,.schalterBahn::after{transition:none}}

/* ===================== Zollangaben USA (Bestellung) ===================== */

/* Jede Angabe einzeln mit Kopier-Knopf, damit sie in der Post-App nur
   eingefügt werden muss. Auf dem Handy steht die Bezeichnung über dem Wert. */
.zollPosition{padding:8px 0;border-top:1px solid var(--line)}
.zollFeld{display:grid;grid-template-columns:170px 1fr auto;gap:4px 10px;align-items:center;padding:3px 0}
.zollLabel{color:var(--muted);font-size:13px}
.zollWert{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.zollFehlt{color:var(--red);font-weight:600}
@media (max-width:560px){
  .zollFeld{grid-template-columns:1fr auto}
  .zollLabel{grid-column:1/-1}
}

/* ===================== Statistik (Verwaltung) ===================== */

/* Zwei Liniendiagramme (Inline-SVG) mit gemeinsamem Tooltip, darunter die Eckdaten */
.statistikPanel{position:relative}
.statistikTitel{display:flex;align-items:center;margin:4px 0 2px;font-size:15px}
.statistikTitel ~ .statistikTitel{margin-top:18px}
.statistikDiagramm{width:100%}
.stSvg{display:block;max-width:100%;height:auto}
.stRaster{stroke:var(--line);stroke-width:1}
.stAchsenText{fill:var(--muted);font:11px var(--schrift-text);font-variant-numeric:tabular-nums}
.stLinie{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.stFlaeche{stroke:none;opacity:.1}
.stPunkt{stroke:var(--surface);stroke-width:2}
.stLinie-bestellungen{stroke:var(--diagramm-bestellungen)}
.stFlaeche-bestellungen,.stPunkt-bestellungen{fill:var(--diagramm-bestellungen)}
.stLinie-umsatz{stroke:var(--diagramm-umsatz)}
.stFlaeche-umsatz,.stPunkt-umsatz{fill:var(--diagramm-umsatz)}
.stFadenkreuz{stroke:var(--muted);stroke-width:1}
.stTreffer{fill:transparent;cursor:crosshair;touch-action:pan-y}
.statistikTooltip{position:absolute;z-index:5;display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.12);font-size:13px;pointer-events:none;white-space:nowrap}
.statistikTooltip[hidden]{display:none}
.statistikSchluessel{display:inline-block;flex:0 0 auto;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.statistikSchluessel-bestellungen{background:var(--diagramm-bestellungen)}
.statistikSchluessel-umsatz{background:var(--diagramm-umsatz)}
.eckdatenTitel{margin:22px 0 6px;font-size:15px}
.eckdatenRahmen{overflow-x:auto}
.eckdaten{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.eckdaten th,.eckdaten td{padding:6px 8px;border-bottom:1px solid var(--line)}
.eckdaten th[scope="row"]{text-align:left;font-weight:normal}
.eckdaten thead th{text-align:right;color:var(--muted);font-weight:600;font-size:13px}
.eckdaten td{text-align:right;white-space:nowrap}
@media (max-width:560px){
  .eckdaten{font-size:13px}
  .eckdaten th,.eckdaten td{padding:5px 4px}
}
}

/* ===================== Suchauftrag („Suchzettel“) ===================== */

/* Unter der Trefferliste (suchzettelZeigen in index.html): Karteikarte mit
   Hans, Lederrot-Kante oben, Suchbegriff in Schreibmaschinenschrift mit
   roter Linie, Lochung unten – wie die Buch-Karteikarten. Nach dem Absenden
   drückt Hans den Stempel „Notiert“ auf die Karte. */
.suchzettel{
  position:relative;display:flex;align-items:flex-start;gap:14px;
  max-width:640px;margin:28px auto 6px;padding:18px 22px 28px;
  background:var(--papier),var(--pergament);color:var(--tinte);
  border:1px solid var(--pergament-tief);border-top:3px solid var(--leder);border-radius:2px;
  box-shadow:0 3px 10px rgba(0,0,0,.35);transform:rotate(-.4deg);
  --ink:var(--tinte);--muted:var(--sepia);
}
.suchzettel::after{
  content:"";position:absolute;left:50%;bottom:7px;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:var(--flaschengruen);box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.suchzettel .hansMini{width:46px;height:46px;margin-top:2px}
.suchzettelInhalt{flex:1 1 auto;min-width:0}
body[data-ansicht="shop"] .suchzettel h2.suchzettelLabel{
  margin:0 0 4px;font-family:var(--schrift-titel);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--leder);
}
.suchzettel p{margin:0 0 6px;font-size:17px;line-height:1.4}
.suchzettel .suchzettelBegriff{
  margin:2px 0 14px;padding-bottom:3px;border-bottom:1px solid rgba(158,43,37,.45);
  font-family:var(--schrift-maschine);font-size:20px;line-height:1.3;overflow-wrap:anywhere;
}
.suchzettelForm{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.suchzettelForm input{
  flex:1 1 220px;min-width:0;padding:9px 11px;border:1px solid var(--messing-dunkel);border-radius:3px;
  background:var(--pergament-hell);color:var(--tinte);font-family:var(--schrift-text);font-size:16px;
  box-shadow:inset 0 1px 3px rgba(60,40,10,.15);
}
.suchzettelForm input:focus-visible{outline:2px solid var(--messing);outline-offset:1px}
.suchzettelForm .btn{flex:0 0 auto}
.suchzettel .suchzettelKlein{margin:0;font-family:var(--schrift-text);font-size:13px;line-height:1.45;color:var(--sepia)}
.suchzettel .suchzettelKlein a{color:var(--leder)}
.suchzettel .suchzettelFehler{margin:0 0 8px;font-family:var(--schrift-text);font-size:14px;font-weight:600;color:var(--siegellack)}
.suchzettel .suchzettelDank{margin:0;font-size:16.5px}
/* Stempel: doppelter Rand in Siegellack, leicht schief, das Papier scheint durch */
.suchzettelStempel{
  display:none;position:absolute;right:20px;top:12px;padding:2px 10px;
  border:3px double var(--siegellack);border-radius:4px;
  font-family:var(--schrift-maschine);font-size:21px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--siegellack);opacity:.8;mix-blend-mode:multiply;transform:rotate(-8deg);pointer-events:none;
}
.suchzettel.notiert .suchzettelStempel{display:block}
.suchzettel.neuNotiert .suchzettelStempel{animation:stempelDruck .5s cubic-bezier(.3,1.4,.6,1) both}
@keyframes stempelDruck{
  from{opacity:0;transform:rotate(-8deg) scale(1.9)}
  60%{opacity:.9}
  to{opacity:.8;transform:rotate(-8deg) scale(1)}
}
@media (prefers-reduced-motion: reduce){.suchzettel.neuNotiert .suchzettelStempel{animation:none}}
@media (max-width:520px){
  .suchzettel{gap:10px;padding:14px 14px 26px;transform:none}
  .suchzettel .hansMini{width:36px;height:36px}
  .suchzettelForm .btn{flex:1 1 100%}
  .suchzettelStempel{right:10px;top:8px;font-size:17px}
}
/* Verwaltung → Einstellungen: Liste der gesuchten Begriffe */
.suchauftragBegriffe{columns:3 200px;column-gap:24px;margin:10px 0 0;padding-left:22px}
.suchauftragBegriffe li{break-inside:avoid;margin-bottom:2px}

/* ===================== Stefanie (rechts der Begrüssung) ===================== */

/* Die Mitarbeiterin am Erfassungsplatz (stefanieSzeneSVG in index.html), nur am
   Desktop, rein dekorativ. Der Arbeitsablauf (Arme, Bücher, Handy, Häkchen,
   Bildschirm, Kopf) läuft per Web Animations (stefanieAnimieren); hier nur die
   Drehpunkte und die kleinen Dauerbewegungen: oberer Fuss wippt, Nackenhaare
   wehen, sie blinzelt, der Kafi dampft. Drehpunkte in den
   Koordinaten der Figur (eigenes <svg>, wie bei Hans). */
.stefanie{display:none}
@media (min-width:1100px){
  .stefanie{display:block;position:absolute;bottom:12px;left:calc(50% + 330px);width:min(340px,calc(50% - 338px));pointer-events:none}
  .stefanie > svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 .6px rgba(241,232,210,.75)) drop-shadow(1px 1px 1.5px rgba(0,0,0,.4))}
}
.stefanie .stArmH{transform-origin:27.4px 33px}
.stefanie .stArmHU{transform-origin:27.4px 46px}
.stefanie .stArmV{transform-origin:37.4px 33px}
.stefanie .stArmVU{transform-origin:37.4px 46px}
.stefanie .stKopf{transform-origin:32px 26px}
.stefanie .stZeile{transform-box:fill-box;transform-origin:0 50%}
.stefanie :is(.stHandy,.stHaken){opacity:0}
.stefanie .stBeinOben{transform-origin:50px 60px;animation:stBein .45s ease-in-out infinite alternate}
.stefanie .stSpitzen{transform-origin:23px 14px;animation:stSpitzen .8s ease-in-out infinite alternate}
.stefanie .stAugen{transform-origin:38px 16px;animation:stBlinzeln 4.6s infinite}
.stefanie .stDampf{animation:stDampf 2.6s ease-in-out infinite}
@keyframes stBein{from{transform:none}to{transform:rotate(-7deg)}}
@keyframes stSpitzen{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}
@keyframes stBlinzeln{0%,95%,100%{transform:none}97%{transform:scaleY(.1)}}
@keyframes stDampf{0%{opacity:0;transform:none}40%{opacity:.8}100%{opacity:0;transform:translateY(-3px)}}
/* Gedankenblase (HTML, damit der Text sauber setzt): alle 13 s eine neue
   für gut 5 s (stefanieDenkt); bei "Bewegung reduzieren" bleibt eine stehen */
.stefanieBlase{
  position:absolute;left:24%;bottom:77%;width:max-content;max-width:min(210px,74%);padding:10px 18px 11px;
  border-radius:50%;background:var(--papier),var(--pergament);border:1px solid var(--messing-dunkel);
  box-shadow:0 3px 10px rgba(0,0,0,.35);
  font-family:var(--schrift-buch);font-style:italic;font-size:15px;line-height:1.22;color:var(--tinte);text-align:center;text-wrap:balance;
  opacity:0;transform:translateY(8px) scale(.8);transform-origin:20% 100%;
  transition:opacity .45s ease,transform .5s cubic-bezier(.3,1.5,.6,1);
}
.stefanieBlase.zeigt{opacity:1;transform:none}
.stefanieBlase::before,.stefanieBlase::after{content:"";position:absolute;border-radius:50%;background:var(--pergament);border:1px solid var(--messing-dunkel)}
.stefanieBlase::before{width:12px;height:9px;left:20%;bottom:-14px}
.stefanieBlase::after{width:7px;height:5px;left:15%;bottom:-24px}
@media (prefers-reduced-motion: reduce){
  .stefanie *{animation:none !important}
  .stefanieBlase{opacity:1;transform:none;transition:none}
}

/* ===================== Registrierkasse (links der Begrüssung) ===================== */

/* Alte Messing-Registrierkasse als Link zur Google-Bewertung (kasseHTML in
   index.html), nur am Desktop. Überfahren oder Tastaturfokus: der Hebel wird
   gezogen, die Sterne-Fähnchen springen nacheinander im Fenster hoch, die
   Schublade springt auf, Messing-Funken. Ab und zu (alle 14 s) ruckt der Hebel
   von selbst. Drehpunkt des Hebels in viewBox-Einheiten. */
.kasse{display:none}
@media (min-width:1100px){
  .kasse{
    display:flex;flex-direction:column;align-items:center;gap:2px;position:absolute;bottom:12px;
    right:calc(50% + 340px);width:clamp(150px,calc(50% - 360px),210px);text-decoration:none;color:var(--messing-hell);
  }
  .kasse svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 .6px rgba(241,232,210,.75)) drop-shadow(1px 2px 2px rgba(0,0,0,.45))}
}
.kasse:focus-visible{outline:2px solid var(--messing-hell);outline-offset:4px;border-radius:4px}
.kasseText{font-family:var(--schrift-titel);font-size:11.5px;letter-spacing:.06em;line-height:1.35;text-align:center;color:var(--messing-hell)}
.kasseText strong{
  display:block;font-size:13.5px;font-weight:700;color:var(--pergament);
  text-decoration:underline;text-decoration-color:rgba(230,207,138,.45);text-underline-offset:3px;
}
.kasse:is(:hover,:focus-visible) .kasseText strong{text-decoration-color:var(--messing-hell)}
.kasse .kHebel{transform-origin:100px 66px;animation:kasseRuck 14s ease-in-out infinite;transition:transform .35s cubic-bezier(.5,1.6,.6,1)}
.kasse .kStern{color:#8C7232;transform:translateY(4.6px);transition:transform .35s cubic-bezier(.3,1.7,.6,1),color .3s}
.kasse .kSchublade{transition:transform .3s cubic-bezier(.3,1.5,.6,1)}
.kasse .kTaste{transition:transform .12s}
.kasse .kKling{opacity:0;transition:opacity .2s}
.kasse:is(:hover,:focus-visible) .kHebel{animation:none;transform:rotate(78deg)}
.kasse:is(:hover,:focus-visible) .kStern{transform:none;color:#B8862B}
.kasse:is(:hover,:focus-visible) .s0{transition-delay:.25s}
.kasse:is(:hover,:focus-visible) .s1{transition-delay:.32s}
.kasse:is(:hover,:focus-visible) .s2{transition-delay:.39s}
.kasse:is(:hover,:focus-visible) .s3{transition-delay:.46s}
.kasse:is(:hover,:focus-visible) .s4{transition-delay:.53s}
.kasse:is(:hover,:focus-visible) .kSchublade{transform:translateY(4px);transition-delay:.3s}
.kasse:is(:hover,:focus-visible) :is(.t05,.t13,.t26){transform:translateY(1px)}
.kasse:is(:hover,:focus-visible) .kKling{opacity:1;transition-delay:.6s}
@keyframes kasseRuck{0%,88%,100%{transform:none}92%{transform:rotate(24deg)}95%{transform:rotate(-5deg)}97.5%{transform:rotate(3deg)}}
@media (prefers-reduced-motion: reduce){.kasse *{animation:none !important;transition:none !important}}