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

/* Ersatz für die früheren style="…"-Attribute in den JS-Vorlagen von
   index.html. Liegt in der letzten Ebene und gewinnt damit – wie vorher
   der Inline-Style – gegen alle Regeln aus basis/komponenten/ansichten,
   unabhängig von deren Spezifität. Innerhalb dieser Datei entscheidet die
   Reihenfolge: deshalb steht .m-0 vor den einzelnen Rändern (".m-0 mb-8"). */
@layer hilfsklassen{

/* --- Abstände --- */
.m-0{margin:0}
.mt-0{margin-top:0}
.mt-n8{margin-top:-8px}
.mt-n6{margin-top:-6px}
.mt-n4{margin-top:-4px}
.mt-4{margin-top:4px}
.mt-6{margin-top:6px}
.mt-8{margin-top:8px}
.mt-10{margin-top:10px}
.mt-12{margin-top:12px}
.mt-14{margin-top:14px}
.mt-20{margin-top:20px}
.mt-22{margin-top:22px}
.mt-32{margin-top:32px}
.mb-4{margin-bottom:4px}
.mb-6{margin-bottom:6px}
.mb-8{margin-bottom:8px}
.mb-10{margin-bottom:10px}
.mb-14{margin-bottom:14px}
.my-8{margin-top:8px;margin-bottom:8px}
.my-14{margin-top:14px;margin-bottom:14px}
.ml-6{margin-left:6px}
.py-12{padding-top:12px;padding-bottom:12px}

/* --- Text --- */
.fs-16{font-size:16px}
.fs-17{font-size:17px}
.font-erben{font:inherit}
.text-mitte{text-align:center}
.nowrap{white-space:nowrap}
.umbruch{word-break:break-all}

/* --- Layout --- */
.block{display:block}
.w-100{width:100%}
.max-360{max-width:360px}
.zeile{display:flex;gap:10px;flex-wrap:wrap}
.gap-10{gap:10px}
.gap-14{gap:14px}
.flex-1{flex:1}
.flex-fix{flex:0 0 auto}
.items-start{align-items:start}
.v-mitte{align-self:center}
.self-end{align-self:end}
.spalte-1{grid-column:1}
.spalte-2{grid-column:2}
.spalte-3{grid-column:3}
.scroll-85{max-height:85vh;overflow-y:auto}
.check-18{width:18px;height:18px}
.check-20{width:20px;height:20px}

/* --- Knopf-Grössen und -Varianten --- */
.btn-mini{padding:4px 10px}
.btn-klein{padding:6px 12px;font-size:13px}
.btn-mittel{padding:8px 16px}
.btn-gefahr{color:var(--red);border-color:var(--red)}

/* --- Bausteine (früher als lange Inline-Styles) --- */
/* Nur für Screenreader (z.B. Ansagen des Bibliothekars, aria-live) */
.vorleser{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.navExtra{align-self:center;padding:10px 12px;color:var(--muted);font-weight:500;text-decoration:none;white-space:nowrap}
.zurueckLink{margin-bottom:14px;color:var(--muted)}
.textLink{text-decoration:underline;color:inherit;cursor:pointer}
.seitenNavigation{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:18px}
.abschnittTitel{margin:20px 0 8px}
.katKopf{display:flex;justify-content:space-between;align-items:center;gap:10px}

/* Buchdetail */
/* Breite aus .buchDetail (ansichten.css), im breiten Shop bis 320 px */
.buchDetailBild{width:var(--buchBildBreite,160px);height:auto;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.buchDetailSpine{width:var(--buchBildBreite,160px);height:calc(var(--buchBildBreite,160px) * 1.44);font-size:64px}
.buchAngaben{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px;margin:0}

/* Verwaltungslisten (li.row mit anderer Spaltenaufteilung) */
.listeZeile{grid-template-columns:1fr auto}
.listeZeile3{grid-template-columns:1fr auto auto}
.listeZeileBild{grid-template-columns:59px 1fr auto}
.schalterLabel{display:flex;align-items:center;gap:8px;font-size:14px}
.waagrecht{flex-direction:row;align-items:center;gap:8px}
.auswahlVoll{display:block;width:100%;margin-top:4px;padding:8px;border-radius:6px}
.freigabeAktionen{grid-column:1/-1;justify-content:flex-end;gap:10px}
.bestellungRechts{grid-column:2;align-self:start;text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.statusAuswahl{font-size:13px;padding:3px 6px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.positionAktionen{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center}
.preisEingabe{width:90px;padding:5px 8px;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--ink);font:inherit;font-size:14px}
.ausgleichHinweis{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;border-color:var(--red);color:var(--red);margin-bottom:12px}
/* Hintergrundfarbe je Status kommt weiterhin inline aus BESTELL_STATUS_FARBE */
.statusPille{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;color:#16241A;white-space:nowrap}

/* Erfassen: Fotos, Cover-Vorschläge, OCR, Handy-Kopplung */
.fotoVorschau{width:140px;height:auto;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.25);display:block}
.coverVorschlag{width:90px;height:auto;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.25);display:block;margin-bottom:6px}
.ocrVideo{width:100%;border-radius:6px;display:block}
.ocrTextfeld{width:100%;padding:8px;border-radius:6px;border:1px solid #444;background:#111;color:#fff;font:inherit;box-sizing:border-box}
.handyFoto{width:100%;max-width:280px;border-radius:8px;margin:10px auto;display:block;box-shadow:0 2px 10px rgba(0,0,0,.2)}

/* Einstellungen: Begrüssungstext-Editor und Startbild */
.editorLeiste{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;align-items:center}
.editorFett{padding:6px 14px;font-weight:700}
.editorAuswahl{padding:7px 10px;border-radius:6px;border:1px solid var(--line,#ccc);font:inherit}
.farbwahl{width:42px;height:36px;padding:2px;border:1px solid var(--line,#ccc);border-radius:6px}
.begrEditor{min-height:70px;background:var(--flaschengruen);color:var(--pergament);text-align:center;border:1px solid var(--messing-dunkel);border-radius:6px;padding:12px;font-family:'Cinzel',Georgia,serif;font-weight:500;font-size:14.5px;line-height:1.5}
.startbildVorschau{max-width:280px;max-height:150px;border-radius:6px;display:block;border:1px solid var(--line,#ccc)}

/* Unsichtbar, aber im Dokument (z.B. Textfeld für den Kopier-Fallback) */
.unsichtbar{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}
}