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

/* Grundgerüst: Seite, Schrift, Überschriften, Fokus, Formulare, Hilfstexte.
   basis.css, komponenten.css und ansichten.css liegen bewusst in derselben
   Ebene "stil" – so entscheidet wie früher im einen <style>-Block die
   Spezifität und bei Gleichstand die Reihenfolge (Datei für Datei). */
@layer stil{
:root{
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--schrift-text)}
h1,h2,h3{font-family:var(--schrift-buch);font-weight:600;margin:0}
/* Verwaltung: Seitentitel in Cinzel wie ein Regalschild – h3 (Listeneinträge)
   bleiben in der gut lesbaren Garamond. */
body:not([data-ansicht="shop"]) main > h2:first-child{font-family:var(--schrift-titel);font-weight:500;font-size:24px;letter-spacing:.02em;margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid var(--line)}
/* Feine Bücher-Hintergrundgrafik im Kundenbereich (Farben: tokens.css). */
body[data-ansicht="shop"]{
  background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%232A4C3A%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.55%22%3E%3Cg%20transform%3D%22translate%2818%2C20%29%20rotate%28-6%29%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2228%22%20height%3D%2220%22%20rx%3D%221.5%22/%3E%3Cline%20x1%3D%2214%22%20y1%3D%220%22%20x2%3D%2214%22%20y2%3D%2220%22/%3E%3Cline%20x1%3D%224%22%20y1%3D%225.5%22%20x2%3D%2210.5%22%20y2%3D%225.5%22/%3E%3Cline%20x1%3D%224%22%20y1%3D%2210%22%20x2%3D%2210.5%22%20y2%3D%2210%22/%3E%3Cline%20x1%3D%224%22%20y1%3D%2214.5%22%20x2%3D%2210.5%22%20y2%3D%2214.5%22/%3E%3Cline%20x1%3D%2217.5%22%20y1%3D%225.5%22%20x2%3D%2224%22%20y2%3D%225.5%22/%3E%3Cline%20x1%3D%2217.5%22%20y1%3D%2210%22%20x2%3D%2224%22%20y2%3D%2210%22/%3E%3Cline%20x1%3D%2217.5%22%20y1%3D%2214.5%22%20x2%3D%2224%22%20y2%3D%2214.5%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28110%2C100%29%20rotate%289%29%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2224%22%20height%3D%2217%22%20rx%3D%221.3%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%220%22%20x2%3D%2212%22%20y2%3D%2217%22/%3E%3Cline%20x1%3D%223.5%22%20y1%3D%224.5%22%20x2%3D%228.8%22%20y2%3D%224.5%22/%3E%3Cline%20x1%3D%223.5%22%20y1%3D%228.5%22%20x2%3D%228.8%22%20y2%3D%228.5%22/%3E%3Cline%20x1%3D%223.5%22%20y1%3D%2212.5%22%20x2%3D%228.8%22%20y2%3D%2212.5%22/%3E%3Cline%20x1%3D%2215.2%22%20y1%3D%224.5%22%20x2%3D%2220.5%22%20y2%3D%224.5%22/%3E%3Cline%20x1%3D%2215.2%22%20y1%3D%228.5%22%20x2%3D%2220.5%22%20y2%3D%228.5%22/%3E%3Cline%20x1%3D%2215.2%22%20y1%3D%2212.5%22%20x2%3D%2220.5%22%20y2%3D%2212.5%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:180px 180px;
}
/* Shop: Fliesstext in EB Garamond (Buchsatz), etwas grösser, mit
   Mediävalziffern. Cinzel nur für Marke/Zwischentitel (h1, h2 z.B. "Neu
   eingetroffen") – Buchtitel (h3) bleiben in der gut lesbaren Garamond,
   da Cinzel bei längeren/kleineren Texten schwerer lesbar ist. Formular-
   felder behalten Public Sans (siehe label.f unten). */
body[data-ansicht="shop"]{font-family:var(--schrift-buch);font-size:17px;font-variant-numeric:oldstyle-nums}
body[data-ansicht="shop"] h1,
body[data-ansicht="shop"] h2{font-family:var(--schrift-titel);font-weight:500;letter-spacing:.02em}
body[data-ansicht="shop"] main h2{font-size:22px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wrap{max-width:880px;margin:0 auto;padding:0 16px}
/* Shop: volle Fensterbreite (Entscheid 2026-10-10) – Kopfzeile und <main>.
   Verwaltung und Unterseiten bleiben bei 880 px. Lesetexte begrenzen ihre
   Zeilenlänge selbst (Begrüssung, Beschreibung). */
body[data-ansicht="shop"] .wrap{max-width:none;padding-inline:var(--seitenRand)}
body[data-ansicht="shop"] :focus-visible{outline-color:var(--messing)}
/* main trägt auch .wrap (padding:0 16px) – deshalb hier beides zusammen */
main,main.wrap{padding:20px 16px 60px}
.unstyled{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;text-decoration:none;display:inline-block}
.hint{font-size:14px;color:var(--muted)}
.empty{padding:36px 0;color:var(--muted)}
form.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}
form.grid .full{grid-column:1/-1}
label.f{display:flex;flex-direction:column;gap:4px;font-family:var(--schrift-text);font-size:14px;font-weight:500;min-width:0}
label.f input,label.f select{padding:10px 12px;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--ink);font-size:16px;min-width:0;width:100%}
@media (max-width:560px){form.grid{grid-template-columns:1fr}}
label.f textarea{padding:10px 12px;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--ink);font-size:16px;font-family:inherit;resize:vertical}
}