/* Bestands-App Archipel Homes – Gestaltung (Farben laut Spezifikation 2.1) */

@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('../fonts/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url('../fonts/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('../fonts/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Abril Fatface'; font-weight: 400; font-display: swap; src: url('../fonts/abril-fatface-latin-400-normal.woff2') format('woff2'); }

:root {
  --cyan: #10BFDE;
  --cyan-dunkel: #0A7B8F;
  --cyan-hell: #E7FAFD;
  --schwarz: #111111;
  --weiss: #FFFFFF;
  --grau-hg: #F3F5F6;
  --grau-linie: #DFE5E8;
  --grau-text: #55606A;
  --gruen: #15803D;
  --gruen-hell: #DCFCE7;
  --orange: #B45309;
  --orange-hell: #FEF3C7;
  --rot: #B91C1C;
  --rot-hell: #FEE2E2;
  --radius: 14px;
  --radius-klein: 10px;
  --schatten: 0 1px 2px rgba(17, 17, 17, .06), 0 2px 10px rgba(17, 17, 17, .05);
  --schrift: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --schrift-marke: 'Abril Fatface', Georgia, serif;
  --breite: 680px;
  --rand: 16px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--grau-hg);
  color: var(--schwarz);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}

body.dialog-offen { overflow: hidden; }

h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 1.45rem; font-weight: 700; }
h2 { font-size: 1.15rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
p { margin: 0 0 .6em; }
a { color: var(--cyan-dunkel); }
small, .klein { font-size: .85rem; color: var(--grau-text); }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--cyan-dunkel); outline-offset: 2px; }

.icon { flex: none; }

/* ---------- Kopfzeile ---------- */

.kopfzeile {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--weiss);
  border-bottom: 1px solid var(--grau-linie);
  padding-top: env(safe-area-inset-top);
}
.kopfzeile-inhalt {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 8px var(--rand);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
}
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--schwarz); margin-right: auto; }
.marke-text { font-family: var(--schrift-marke); font-size: 1.45rem; letter-spacing: .01em; }
.demo-abzeichen {
  background: var(--orange-hell); color: var(--orange);
  font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
}
.kopf-person { text-decoration: none; }
.initialen {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--cyan); color: var(--schwarz); font-weight: 600; font-size: .9rem;
}

/* ---------- Seiten ---------- */

.seite {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 16px var(--rand) calc(110px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.seite-mitte { min-height: 60vh; justify-content: center; }
.seiten-kopf { display: flex; align-items: center; gap: 8px; }
.seiten-titel { flex: 1; min-width: 0; }
.seiten-titel p { margin: 2px 0 0; color: var(--grau-text); font-size: .9rem; }

.karte {
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 14px 16px;
}
.karte > h2 + p, .karte > h2 + .klein { margin-top: 4px; }
.karten-titel { font-size: 1.1rem; margin-bottom: 4px; }
.karten-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.formular-kopf { display: flex; flex-direction: column; gap: 12px; }
.abschnitt-titel { font-size: 1.05rem; margin: 4px 0 8px; }
.abschnitt-hinweis { color: var(--grau-text); font-size: .9rem; margin: 0 4px; }
.gruppen-titel {
  font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cyan-dunkel); margin: 2px 0 6px;
}
.wert { margin: 0; font-weight: 600; font-size: 1.05rem; }
.leer { color: var(--grau-text); text-align: center; margin: 24px 0; }
.inaktiv { opacity: .55; }

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 18px;
  border-radius: 12px; border: 1px solid transparent;
  font-weight: 600; font-size: 1rem; line-height: 1.2;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color .15s, border-color .15s, transform .05s;
}
.knopf:active:not(:disabled) { transform: scale(.98); }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.knopf.breit { width: 100%; }
.knopf-primaer { background: var(--cyan); color: var(--schwarz); }
.knopf-primaer:hover:not(:disabled) { background: #0EB0CC; }
.knopf-sekundaer { background: var(--weiss); color: var(--schwarz); border-color: var(--grau-linie); }
.knopf-sekundaer:hover:not(:disabled) { border-color: var(--cyan-dunkel); }
.knopf-gefahr { background: var(--rot); color: var(--weiss); }
.knopf-text { background: transparent; color: var(--cyan-dunkel); padding-left: 6px; padding-right: 6px; }
.knopf-text-gefahr { background: transparent; color: var(--rot); padding-left: 8px; padding-right: 8px; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.knopf-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent; border: 0; color: var(--schwarz); cursor: pointer;
}
.knopf-icon:hover { background: var(--cyan-hell); }
.knopf-icon.dreht .icon { animation: drehen 1s linear infinite; }
.knopf-klein {
  min-height: 36px; padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--grau-linie); background: var(--weiss); cursor: pointer;
  font-size: .85rem; color: var(--grau-text); white-space: nowrap;
}
.text-knopf { background: none; border: 0; padding: 0; color: var(--cyan-dunkel); cursor: pointer; font-size: .9rem; text-decoration: underline; }

.kreisel {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  border: 3px solid var(--cyan-hell); border-top-color: var(--cyan);
  animation: drehen .8s linear infinite;
}
.kreisel.klein { width: 18px; height: 18px; border-width: 2px; }
@keyframes drehen { to { transform: rotate(360deg); } }
.laden { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 32px 0; color: var(--grau-text); text-align: left; }

/* ---------- Eingaben ---------- */

.feld { display: flex; flex-direction: column; gap: 6px; }
.feld-label { font-size: .85rem; font-weight: 600; color: var(--grau-text); }
.feld-hinweis { font-size: .8rem; color: var(--grau-text); }
.bereich { display: flex; flex-direction: column; gap: 6px; }
.bereich-kopf { display: flex; justify-content: space-between; align-items: center; }
.eingabe {
  width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--grau-linie); border-radius: var(--radius-klein);
  background: var(--weiss); font-size: 1rem;
}
.eingabe:focus { border-color: var(--cyan-dunkel); outline: none; box-shadow: 0 0 0 3px var(--cyan-hell); }
textarea.eingabe { resize: vertical; min-height: 64px; }
.abweichung { border-color: var(--orange); background: var(--orange-hell); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--grau-linie); background: var(--weiss);
  font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.chip.aktiv { background: var(--cyan); border-color: var(--cyan); font-weight: 600; }
.chip-zusatz {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--schwarz); color: var(--weiss); font-size: .75rem; font-weight: 600;
}

.datum-wahl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.datum-eingabe { width: auto; flex: 1 1 160px; }

.schalter { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.schalter input { width: 22px; height: 22px; accent-color: var(--cyan-dunkel); }

/* Stepper −  n  + */
.stepper { display: inline-flex; align-items: center; flex: none; }
.stepper-knopf {
  width: 44px; height: 44px; border-radius: 12px;
  border: 0; background: var(--cyan-hell); color: var(--schwarz);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.stepper-knopf:active:not(:disabled) { background: var(--cyan); }
.stepper-knopf:disabled { opacity: .35; cursor: default; }
.stepper-wert {
  width: 52px; height: 44px; border: 0; background: transparent;
  text-align: center; font-size: 1.15rem; font-weight: 600;
}
.stepper-wert:focus { outline: 2px solid var(--cyan-dunkel); border-radius: 8px; }

/* ---------- Status / Ampel ---------- */

.status {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.status-gruen { background: var(--gruen-hell); color: var(--gruen); }
.status-gelb { background: var(--orange-hell); color: var(--orange); }
.status-rot { background: var(--rot-hell); color: var(--rot); }
.status-neutral { background: var(--grau-hg); color: var(--grau-text); }
.zaehler-reihe { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Meldungen ---------- */

.meldung {
  border-radius: var(--radius); padding: 12px 14px; border-left: 5px solid;
  display: flex; flex-direction: column; gap: 6px;
}
.meldung strong { font-weight: 600; }
.meldung .knopf { align-self: flex-start; }
.meldung-info { background: var(--cyan-hell); border-color: var(--cyan-dunkel); }
.meldung-erfolg { background: var(--gruen-hell); border-color: var(--gruen); }
.meldung-warnung { background: var(--orange-hell); border-color: var(--orange); }
.meldung-fehler { background: var(--rot-hell); border-color: var(--rot); }
.text-warnung { color: var(--orange) !important; }

.toast {
  position: fixed; left: 50%; top: calc(66px + env(safe-area-inset-top)); transform: translateX(-50%);
  z-index: 60; max-width: calc(100% - 32px);
  background: var(--schwarz); color: var(--weiss); padding: 12px 18px; border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25); font-weight: 500;
}
.toast-fehler { background: var(--rot); }

/* ---------- Aktionsleiste (Speichern unten) ---------- */

.aktionsleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  background: rgba(255, 255, 255, .96); border-top: 1px solid var(--grau-linie);
  padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom));
  backdrop-filter: blur(6px);
}
.aktionsleiste-inhalt { max-width: var(--breite); margin: 0 auto; }

/* ---------- Dialog ---------- */

.dialog-hintergrund {
  position: fixed; inset: 0; z-index: 50; background: rgba(17, 17, 17, .45);
  display: flex; align-items: flex-end; justify-content: center;
}
.dialog {
  background: var(--weiss); width: 100%; max-width: 560px; max-height: 92vh;
  border-radius: 18px 18px 0 0; display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
.dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 12px 4px 18px; }
.dialog-inhalt { padding: 6px 18px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.dialog-inhalt p { margin: 0; }
.dialog-aktionen { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 18px 16px; border-top: 1px solid var(--grau-linie); flex-wrap: wrap; }
.dialog-aktionen .knopf { flex: 1 1 auto; }
@media (min-width: 640px) {
  .dialog-hintergrund { align-items: center; }
  .dialog { border-radius: 18px; }
}

/* ---------- Anmeldung ---------- */

.willkommen { text-align: center; align-items: stretch; }
.willkommen > h1 { margin-top: 4px; }
.willkommen .karte { text-align: left; display: flex; flex-direction: column; gap: 12px; }
/* multiply: der weiße JPG-Hintergrund verschwindet auf dem grauen Seitenhintergrund */
.wortmarke { width: min(240px, 70%); height: auto; align-self: center; margin-top: 8px; mix-blend-mode: multiply; }
.einleitung { color: var(--grau-text); }
.code-eingabe {
  font-size: 1.7rem; letter-spacing: .25em; text-align: center; font-weight: 600;
  min-height: 60px; border: 2px solid var(--grau-linie); border-radius: 12px; width: 100%;
}
.code-eingabe:focus { border-color: var(--cyan-dunkel); outline: none; }
.code-eingabe::placeholder { color: #C3CBD0; }
.sprachwahl { display: flex; justify-content: center; }
.schritte { margin: 8px 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }

.liste { display: flex; flex-direction: column; }
.listen-knopf {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px;
  padding: 10px 4px; background: none; border: 0; border-bottom: 1px solid var(--grau-linie);
  text-align: left; cursor: pointer;
}
.listen-knopf:last-child { border-bottom: 0; }
.listen-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.listen-text strong { font-weight: 500; }

/* ---------- Start ---------- */

.begruessung p { color: var(--grau-text); margin: 2px 0 0; }
.kachel {
  display: flex; align-items: center; gap: 14px; min-height: 76px;
  background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 14px 16px; color: var(--schwarz); text-decoration: none;
}
.kachel .icon { color: var(--cyan-dunkel); }
.kachel-text { display: flex; flex-direction: column; min-width: 0; }
.kachel-text strong { font-weight: 600; line-height: 1.25; }
.kachel-haupt { background: var(--cyan); min-height: 92px; }
.kachel-haupt .icon { color: var(--schwarz); }
.kachel-haupt strong { font-size: 1.15rem; }
.kachel-haupt small { color: var(--schwarz); opacity: .8; }
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kacheln .kachel { flex-direction: column; align-items: flex-start; gap: 8px; }
.standort-karten { display: flex; flex-direction: column; gap: 10px; }
.standort-karte {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name pfeil" "zahlen pfeil";
  column-gap: 10px; row-gap: 6px;
  background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 12px 14px; color: var(--schwarz); text-decoration: none;
}
.standort-name { grid-area: name; font-weight: 600; }
.standort-zahlen { grid-area: zahlen; display: flex; gap: 6px; flex-wrap: wrap; }
.standort-karte > .icon { grid-area: pfeil; align-self: center; color: var(--grau-text); }

/* ---------- Artikel-Listen ---------- */

.artikel-gruppe { padding-top: 10px; padding-bottom: 6px; }
.artikel-zeile, .bestand-zeile, .zaehl-zeile, .soll-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--grau-linie);
}
.artikel-zeile:last-child, .bestand-zeile:last-child, .zaehl-zeile:last-child, .soll-zeile:last-child { border-bottom: 0; }
.artikel-zeile.gewaehlt .artikel-name, .zaehl-zeile.gewaehlt .artikel-name { font-weight: 600; }
.artikel-name { flex: 1; min-width: 0; display: flex; flex-direction: column; hyphens: auto; overflow-wrap: break-word; }
.artikel-name small { font-weight: 400; }
.bestand-zahl { white-space: nowrap; color: var(--grau-text); font-variant-numeric: tabular-nums; }
.bestand-zahl strong { color: var(--schwarz); font-size: 1.05rem; }
.nachfuell-menge {
  min-width: 48px; text-align: center; font-weight: 700; font-size: 1.15rem;
  background: var(--cyan-hell); border-radius: 10px; padding: 4px 10px; font-variant-numeric: tabular-nums;
}

.weitere { display: flex; flex-direction: column; gap: 12px; }
.weitere-knopf {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px;
  padding: 10px 16px; border-radius: var(--radius); border: 1px dashed var(--cyan-dunkel);
  background: var(--weiss); color: var(--cyan-dunkel); font-weight: 600; cursor: pointer;
}
.pfeil { display: inline-flex; transition: transform .15s; }
.pfeil.offen { transform: rotate(90deg); }

.zaehl-eingabe { width: 76px; text-align: center; font-weight: 600; flex: none; }
.differenz { min-width: 48px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.differenz.minus { color: var(--rot); }
.differenz.plus { color: var(--gruen); }

.soll-kopf { display: grid; grid-template-columns: 1fr 64px 64px; gap: 8px; align-items: end; }
.soll-kopf .klein { text-align: center; line-height: 1.2; hyphens: manual; }
.soll-zeile { display: grid; grid-template-columns: 1fr 64px 64px; gap: 8px; }
.zahl-eingabe { text-align: center; padding: 8px 4px; }

/* ---------- Einträge ---------- */

.buchung { display: flex; flex-direction: column; gap: 4px; }
.buchung.storniert { opacity: .6; }
.buchung.storniert .positionen { text-decoration: line-through; }
.buchung-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.buchung-typ { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.typ-entnahme .icon { color: var(--cyan-dunkel); }
.typ-lieferung .icon { color: var(--gruen); }
.typ-inventur .icon { color: var(--orange); }
.buchung-datum { font-weight: 600; font-variant-numeric: tabular-nums; }
.buchung-ort { margin: 0; color: var(--grau-text); font-size: .9rem; }
.positionen { margin: 0; font-size: .92rem; }
.buchung-kommentar { margin: 0; font-style: italic; font-size: .92rem; }
.buchung-meta { margin: 0; font-size: .8rem; color: var(--grau-text); }
.buchung-storniert { margin: 0; font-size: .85rem; color: var(--rot); font-weight: 600; }
.buchung-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.buchung-aktionen .knopf { min-height: 40px; padding: 6px 12px; }

/* ---------- Protokoll ---------- */

.protokoll { padding-top: 6px; padding-bottom: 6px; }
.protokoll-zeile { padding: 10px 0; border-bottom: 1px solid var(--grau-linie); }
.protokoll-zeile:last-child { border-bottom: 0; }
.protokoll-kopf { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.protokoll-text { font-size: .9rem; color: var(--grau-text); }

/* ---------- Verwaltung ---------- */

.reiter {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none; margin: 0 calc(-1 * var(--rand)); padding-left: var(--rand); padding-right: var(--rand);
}
.reiter::-webkit-scrollbar { display: none; }
.reiter-knopf {
  flex: none; padding: 10px 16px; border-radius: 999px; text-decoration: none;
  color: var(--schwarz); background: var(--weiss); border: 1px solid var(--grau-linie); font-weight: 500;
}
.reiter-knopf.aktiv { background: var(--schwarz); color: var(--weiss); border-color: var(--schwarz); }
.person-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--grau-linie); flex-wrap: wrap; }
.person-zeile:last-child { border-bottom: 0; }
.person-zeile.inaktiv { opacity: .6; }
.person-info { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; }
.person-aktionen { display: flex; align-items: center; gap: 4px; }
.person-aktionen .knopf { min-height: 40px; padding: 6px 12px; }

.einladung-code {
  font-size: 2.2rem; font-weight: 700; letter-spacing: .18em; text-align: center;
  background: var(--cyan-hell); border-radius: 12px; padding: 12px; font-variant-numeric: tabular-nums;
}
.einladung-link {
  font-size: .8rem; word-break: break-all; color: var(--grau-text);
  background: var(--grau-hg); border-radius: 8px; padding: 8px 10px;
}

/* ---------- Hilfe ---------- */

.hilfe { padding: 0; }
.hilfe summary {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 56px;
  cursor: pointer; list-style: none; font-weight: 600;
}
.hilfe summary::-webkit-details-marker { display: none; }
.hilfe summary .icon { color: var(--cyan-dunkel); }
.hilfe-titel { flex: 1; }
.hilfe[open] summary .pfeil { transform: rotate(90deg); }
.hilfe .schritte { margin: 0; padding: 0 16px 12px 40px; }
.hilfe-ampel { list-style: none; margin: 0; padding: 0 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.hilfe-ampel li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hilfe-tipp { margin: 0 16px 14px; padding: 10px 12px; background: var(--cyan-hell); border-radius: var(--radius-klein); font-size: .92rem; }

.nur-drucken { display: none; }

/* ---------- Größere Bildschirme ---------- */

@media (min-width: 560px) {
  .kacheln { grid-template-columns: repeat(3, 1fr); }
  .standort-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* ---------- Drucken (Einkaufsliste) ---------- */

@media print {
  body { background: var(--weiss); }
  .kopfzeile, .seiten-kopf .knopf-icon, .nicht-drucken, .aktionsleiste, .toast { display: none !important; }
  .nur-drucken { display: block; }
  .seite { padding: 0; max-width: none; }
  .karte { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition: none !important; }
}