/*
* Geteiltes Stylesheet Bergwacht Zollernalb — Shop-Design.
* Quelle der Wahrheit: /index.html (Bestellkatalog). Werte 1:1 von dort übernommen.
* Enthält nur Bausteine, die sowohl Shop als auch Verwaltung brauchen
* (Tokens, Reset, Chrome/Nav, Buttons, Pills, Felder, Tabellen-Basis, Utilities).
* Shop-exklusive Komponenten (.hero, .tile, .bag-drawer, .sheet, .fab, ...)
* bleiben bewusst in index.html, damit dieses Stylesheet für die Verwaltung
* nicht unnötig aufgebläht wird.
*/
/* ===== Design Tokens (1:1 aus index.html) ===== */
:root {
--accent: #0b7a55;
--accent-hover: #09684a;
--accent-light: #e6f5ef;
--bg: #fafafa;
--surface: #ffffff;
--surface-2: #f5f5f7;
--ink: #1d1d1f;
--ink-2: #424245;
--ink-3: #6e6e73;
--hairline: #e5e5ea;
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 22px;
--shadow-sm: 0 2px 8px rgba(0,0,0,.06);
--shadow-md: 0 8px 30px rgba(0,0,0,.10);
--shadow-lg: 0 20px 50px rgba(0,0,0,.15);
--nav-h: 52px;
--orange: #f59100;
--rot: #e60005;
/* Nur Verwaltung: einheitliche Content-Breite (Phase 5-Layout), Referenz produkte.html.
Angehoben von 1100px auf 1440px (Phase 46d, Punkt B4): auf breiten Bildschirmen blieb
Platz ungenutzt, während breite Tabellen (Produktliste, Positionsliste) seitlich
scrollten. 1440px zeigt auf einem üblichen 1920px-Breitbildschirm deutlich mehr
Spalten gleichzeitig, lässt aber noch Luft am Rand -- randloses Fließtext-Layout
über die volle Bildschirmbreite wäre unlesbar. Wirkt auf ALLE sechs Verwaltungsseiten
(index/produkte/bestellwesen/mitglied/lager/pool teilen sich .admin-wrap, s.u.),
deshalb hier zentral und nicht in den einzelnen Seiten geändert. */
--admin-max-width: 1440px;
/* Seitenrand Verwaltung (Phase 46e, Punkt 1): vorher fix 22px an ZWEI
Stellen (.chrome-inner-admin und .admin-wrap) -- im Vollbild unauffällig,
weil dort viel Luft durch die Zentrierung außerhalb der 1440px-Box
entsteht, aber sobald das Fenster schmaler als 1440px wird, IST diese
Box der ganze Viewport und 22px allein wirken zu knapp ("klebt am
Fensterrand", Lauras Browser-Test). Geteilte Variable statt zweier
gleichlautender Zahlen, die künftig auseinanderlaufen könnten -- beide
Regeln unten referenzieren dieselbe Variable, damit Kopfzeile und
Content-Rand strukturell (nicht nur zufällig) bündig bleiben.
clamp(): wächst mit der Fensterbreite bis 48px, fällt bei sehr schmalen
(mobilen) Breiten nicht unter 24px -- an keiner Breite mehr nur 22px. */
--admin-gutter: clamp(24px, 5vw, 48px);
}
/* ===== Inter lokal (Etappe 104) =====
Vorher extern von Google Fonts geladen (drei -Zeilen je Seite),
jetzt lokal aus /public/fonts/ ausgeliefert -- kein Browser lädt mehr
von Google. Dateien 1:1 aus der offiziellen Inter-4.1-Web-Auslieferung
(github.com/rsms/inter), Lizenz siehe /public/fonts/LICENSE.txt (SIL OFL 1.1).
Fünf Schnitte, die im Projekt tatsächlich verwendet werden (kein 800). */
@font-face {
font-family: 'Inter';
font-weight: 400;
font-style: normal;
src: url('/fonts/Inter-Regular.woff2') format('woff2');
font-display: swap;
}
@font-face {
font-family: 'Inter';
font-weight: 400;
font-style: italic;
src: url('/fonts/Inter-Italic.woff2') format('woff2');
font-display: swap;
}
@font-face {
font-family: 'Inter';
font-weight: 500;
font-style: normal;
src: url('/fonts/Inter-Medium.woff2') format('woff2');
font-display: swap;
}
@font-face {
font-family: 'Inter';
font-weight: 600;
font-style: normal;
src: url('/fonts/Inter-SemiBold.woff2') format('woff2');
font-display: swap;
}
@font-face {
font-family: 'Inter';
font-weight: 700;
font-style: normal;
src: url('/fonts/Inter-Bold.woff2') format('woff2');
font-display: swap;
}
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', Helvetica, Arial, sans-serif;
background: var(--bg); color: var(--ink); line-height: 1.47;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: color-mix(in oklch, var(--accent) 25%, transparent); }
/* ===== Utility ===== */
.hidden { display: none !important; }
/* ===== Chrome / Nav (1:1 aus index.html) ===== */
.chrome {
position: sticky; top: 0; z-index: 90;
backdrop-filter: saturate(180%) blur(22px);
-webkit-backdrop-filter: saturate(180%) blur(22px);
background: rgba(250,250,250,.78);
border-bottom: 1px solid var(--hairline);
height: var(--nav-h);
}
.chrome-inner {
max-width: 1180px; margin: 0 auto; height: 100%;
display: flex; align-items: center; gap: 18px;
padding: 0 22px; font-size: 13px; color: var(--ink-2);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }
/* Phase 47b: Wechsel auf bw-logo.png (Rundlogo ohne Schriftzug, Wortmarke
bleibt als Text daneben, s. .brand-Fundstellen) -- dafür etwas größer als
vorher (30px), damit das Zeichen erkennbar ist. Bindend ist die feste
Katalog-Kopfzeile .chrome { height: var(--nav-h) } = 52px (Zeile 29/75) --
38px bleibt darunter mit Luft, --nav-h selbst unangetastet. */
.brand img { height: 38px; display: block; }
.chrome-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
/* ===== Einheitliche Content-Breite Verwaltungsseiten (Phase 5-Layout) =====
Referenz: bisherige Breite von produkte.html (1100px, siehe --admin-max-width).
Ersetzt die bislang pro Seite unterschiedlichen `main { max-width: ... }`-Regeln
in admin/index.html, produkte.html, bestellungen.html, beschaffung.html, damit
Bereichsüberschrift (.page-hero) und Seiten-Content am gleichen linken/rechten
Rand liegen. Eigene Klasse statt Änderung an der generischen `main`-Regel,
damit der Shop (index.html im Root) davon unberührt bleibt.
Seit Phase 53 (Strukturumbau S1) Flex-Kind von .verwaltung-layout (s.u.) --
flex/min-width sorgen dafür, dass der Content den Platz neben der
Seitenleiste ausfüllt statt sich nur an seinem Inhalt zu bemessen. */
.admin-wrap {
max-width: var(--admin-max-width); margin: 40px auto; padding: 0 var(--admin-gutter) 80px;
flex: 1 1 auto; min-width: 0;
}
/* ===== Verwaltungs-Seitenleiste (Phase 53, Strukturumbau S1) =====
Ersetzt die vormalige horizontale Reiterleiste im Kopf (.chrome-admin/
.chrome-inner-admin/.chrome-row-top/.admin-nav, bis Phase 52) durch eine
linke Seitenleiste. Einzige Quelle: public/admin/verwaltungs-nav.js baut
das Markup zur Laufzeit per createElement in #verwaltungs-nav ein (Details
dort) -- hier nur das Layout/die Optik, aus bestehenden Tokens (.pill,
--ink, --hairline, --surface usw.), keine neuen Farben/Schriften
(ausdrücklich keine Gestaltungsarbeit in dieser Phase). */
.verwaltung-layout { display: flex; align-items: flex-start; min-height: 100vh; }
.verwaltung-sidebar {
/* Inhaltsgesteuert statt fest: der längste Eintrag (Abmelden-Knopf mit
variablem Namen) darf die Box breiter machen, ohne dass Text umbricht
oder abgeschnitten wird. min-width haelt die bisherige 240px als Untergrenze,
bewusst KEIN max-width -- das würde bei einem langen Namen wieder
abschneiden. */
flex: 0 0 auto; width: max-content; min-width: 240px; box-sizing: border-box;
min-height: 100vh; position: sticky; top: 0; align-self: flex-start;
display: flex; flex-direction: column; gap: 18px;
padding: 24px 18px; background: var(--surface);
border-right: 1px solid var(--hairline);
}
/* Markenkopf: eigene Klasse statt .brand -- .brand/.brand img sind an die
feste 52px-Katalog-Kopfzeile (--nav-h) gebunden (s. dortiger Kommentar),
die Seitenleiste hat diese Beschränkung nicht und darf das Logo größer
zeigen (Auftrag: "heute zu klein"). */
.verwaltung-sidebar-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.verwaltung-sidebar-brand img { height: 58px; display: block; }
.verwaltung-sidebar-nav { display: flex; flex-direction: column; gap: 6px; }
/* .pill ist horizontal/inline gedacht (Katalog, alte Reiterleiste) -- hier
auf volle Breite und linksbündig gestellt, Farben/Radius/Übergänge bleiben
die von .pill unverändert. */
.verwaltung-sidebar-nav .pill,
.verwaltung-sidebar-fuss .pill { width: 100%; justify-content: flex-start; }
.verwaltung-nav-gruppe { display: flex; flex-direction: column; gap: 6px; }
.verwaltung-nav-oberpunkt {
font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
color: var(--ink-3); padding: 8px 18px 0;
}
.verwaltung-nav-oberpunkt.active { color: var(--ink); }
.verwaltung-nav-trenner { border: 0; border-top: 1px solid var(--hairline); margin: 4px 0; }
.verwaltung-sidebar-fuss { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
/* Schmale Fenster (Minimalanforderung, kein mobiles Redesign): Seitenleiste
stapelt oberhalb des Inhalts statt fest danebenzustehen, damit sie den
Inhalt nicht unerreichbar macht. */
@media (max-width: 760px) {
.verwaltung-layout { flex-direction: column; }
.verwaltung-sidebar {
width: 100%; flex: 0 0 auto; min-height: 0; position: static;
border-right: 0; border-bottom: 1px solid var(--hairline);
}
}
/* ===== Bereichsüberschrift Verwaltungsseiten =====
Typo 1:1 aus .hero h1 (index.html) übernommen — bewusst nicht neu erfunden.
Linksbündig statt zentriert: der übrige Verwaltungs-Content (Cards, Tabellen,
Toolbars) ist durchgehend linksbündig; eine zentrierte Überschrift stünde
dazu quer. Platzierung/Breite folgt dem umgebenden der jeweiligen Seite. */
.page-hero { margin: 0 0 28px; }
.page-hero h1 {
font-size: clamp(36px, 5.5vw, 60px); line-height: 1.06; letter-spacing: -.035em;
font-weight: 700; margin-bottom: 6px;
}
.page-hero p { font-size: 14px; color: var(--ink-2); letter-spacing: -.005em; }
/* ===== Primary / accent buttons (1:1 aus index.html) ===== */
.btn-primary {
width: 100%; padding: 14px 22px; margin-top: 22px;
background: var(--ink); color: #fff; border: 0;
border-radius: 999px; font-size: 15px; font-weight: 500; letter-spacing: -.01em;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
transition: transform .15s, background .2s; cursor: pointer;
}
.btn-primary:hover { background: #000; }
.btn-primary:active { transform: scale(.985); }
.btn-primary:disabled { background: #c7c7cc; color: #fff; cursor: not-allowed; }
.btn-accent { background: var(--accent); }
.btn-accent:hover { background: var(--accent-hover); }
/* --- Verwaltungs-Ergänzung: Sekundär-Button, analog .tile-quick aus index.html --- */
.btn-secondary {
width: 100%; padding: 14px 22px; margin-top: 22px;
background: var(--surface-2); color: var(--ink); border: 1px solid var(--hairline);
border-radius: 999px; font-size: 15px; font-weight: 500; letter-spacing: -.01em;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
transition: background .2s, border-color .2s, transform .15s; cursor: pointer;
}
.btn-secondary:hover { background: #ebebef; border-color: #c7c7cc; }
.btn-secondary:active { transform: scale(.985); }
/* --- Verwaltungs-Ergänzung: kompakte Inline-Buttons (Tabellenzeilen, Toolbars) ---
Hebt width:100%/margin-top von .btn-primary/.btn-accent/.btn-secondary wieder auf. */
.btn-small {
width: auto; padding: 6px 16px; margin-top: 0; font-size: 13px;
}
/* ===== Felder (1:1 aus index.html, + textarea ergänzt) ===== */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 6px; font-weight: 500; letter-spacing: .01em; }
.field input, .field select, .field textarea {
width: 100%; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: 12px;
background: var(--surface-2); font-size: 16px; letter-spacing: -.01em;
transition: border-color .2s, background .2s, box-shadow .2s;
}
/* Generischer Reset (Nacharbeit Phase 132, ersetzt keinen bestehenden lokalen
Override): die Regel oben trifft per Nachfahren-Selektor auch ungestylte
native Radios/Checkboxen innerhalb eines .field-Wrappers und macht sie
fälschlich zum breiten Kasten (Befund wie BERICHTE/108, Abschnitt 2, hier
an der gemeinsamen Regel statt als weitere Einzelausnahme behoben). Gilt
für ALLE .field-umschlossenen Radios/Checkboxen, auch künftige. */
.field input[type="radio"],
.field input[type="checkbox"] {
width: auto;
margin: 0;
}
.field textarea { resize: vertical; font-family: inherit; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--accent); background: #fff;
box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 15%, transparent);
}
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-error { color: #c0392b; font-size: 12px; margin-top: 6px; font-weight: 500; }
/* Verwaltungs-Ergänzung: Erfolgsmeldung im gleichen Duktus wie .field-error */
.field-success { color: var(--accent); font-size: 12px; margin-top: 6px; font-weight: 500; }
/* ===== Pill (1:1 aus index.html, + text-decoration für Nav-Links als ) ===== */
.pill {
padding: 8px 18px; border-radius: 999px; font-size: 13px; color: var(--ink-2);
background: var(--surface); border: 1px solid var(--hairline);
transition: all .18s; cursor: pointer; white-space: nowrap;
text-decoration: none; display: inline-flex; align-items: center;
}
.pill:hover { color: var(--ink); border-color: #c7c7cc; }
.pill.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pill-sep { width: 1px; background: var(--hairline); margin: 0 4px; align-self: stretch; }
/* ===== Card (analog .onboard/.feature aus index.html) ===== */
.card {
background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
padding: 28px; box-shadow: var(--shadow-sm); margin-bottom: 24px;
}
.card h2 { font-size: 17px; letter-spacing: -.015em; font-weight: 600; margin-bottom: 16px; }
/* ===== Tabellen (Basis: .rules-table aus index.html, für Verwaltungstabellen wiederverwendet) ===== */
.rules-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.rules-table th, .rules-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.rules-table th { font-weight: 600; color: var(--ink); font-size: 12px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.rules-table td:first-child { font-weight: 600; color: var(--ink); }
.rules-table td { color: var(--ink-2); }
.rules-table tr:last-child td { border-bottom: 0; }
/* Generische Statuspille (Basis für .badge/.status-* in der Verwaltung; Farben je Seite lokal) */
.badge {
display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px;
font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
}
/* ===== Bestand-Dialog (Phase 58, Nachtrag): gemeinsames