/* Wo ist was? – Erscheinungsbild „Werkstatt“ (ab 1.3.0)
 * Beton-Grau, Graphit, Signalgelb. Ortsnamen als gelbe Kistenetiketten.
 * Überschriften: TeX Gyre Adventor (GUST Font License, siehe assets/fonts), Text: Systemschrift.
 */

@font-face { font-family: "Adventor"; src: url("fonts/adventor-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Adventor"; src: url("fonts/adventor-regular.woff") format("woff"); font-weight: 400; font-display: swap; }

:root {
  --bg: #eceeea;
  --flaeche: #ffffff;
  --flaeche-2: #e2e5e0;
  --flaeche-3: #f5f6f3;
  --linie: #d6dad4;
  --text: #1e2422;
  --leise: #646b67;
  --graphit: #1e2422;
  --auf-graphit: #ffffff;
  --gelb: #f2be22;
  --gelb-tief: #c99500;
  --gelb-hell: #fcf0c4;
  --auf-gelb: #1e2422;
  --rot: #c2412d;
  --rot-hell: #f8e1dc;
  --gruen: #2e7a55;
  --gruen-hell: #dcefe4;
  --fokus: 0 0 0 3px rgba(242, 190, 34, .55);
  --schatten-hoch: 0 10px 30px rgba(30, 36, 34, .16);
  --r-gross: 20px;
  --r: 14px;
  --r-klein: 11px;
  --nav-h: 66px;
  --kopf-schrift: "Adventor", "Avenir Next", "Century Gothic", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121514; --flaeche: #1b1f1d; --flaeche-2: #262b29; --flaeche-3: #202422; --linie: #313734;
    --text: #e9ece9; --leise: #9ea6a1; --graphit: #e9ece9; --auf-graphit: #121514;
    --gelb-hell: #3a3215; --rot: #f08f80; --rot-hell: #3c2420; --gruen: #7fcca3; --gruen-hell: #1f3329;
    --schatten-hoch: 0 10px 30px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121514; --flaeche: #1b1f1d; --flaeche-2: #262b29; --flaeche-3: #202422; --linie: #313734;
  --text: #e9ece9; --leise: #9ea6a1; --graphit: #e9ece9; --auf-graphit: #121514;
  --gelb-hell: #3a3215; --rot: #f08f80; --rot-hell: #3c2420; --gruen: #7fcca3; --gruen-hell: #1f3329;
  --schatten-hoch: 0 10px 30px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 20px);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: 8px; }
h1, h2, h3 { margin: 0; line-height: 1.15; font-family: var(--kopf-schrift); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.12rem; margin: 28px 0 12px; color: var(--text); }
h3 { font-size: 1.02rem; }
p { margin: 0 0 10px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

#app { max-width: 760px; margin: 0 auto; }
#kopf {
  position: sticky; top: 0; z-index: 15;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 8px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
#main { padding: 2px 16px 24px; }

/* ---------- Kopf ---------- */
.kopfzeile { display: flex; align-items: center; gap: 10px; min-height: 46px; }
.kopfzeile h1 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.zurueck, .icon-knopf {
  width: 44px; height: 44px; border-radius: var(--r-klein); border: 1px solid var(--linie); background: var(--flaeche);
  display: grid; place-items: center; text-decoration: none; flex: none; cursor: pointer; color: var(--text);
}
.zurueck svg, .icon-knopf svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zurueck:active, .icon-knopf:active { background: var(--flaeche-2); }
.pfad { display: flex; flex-wrap: wrap; gap: 4px 4px; font-size: .86rem; color: var(--leise); margin: 6px 0 2px; }
.pfad a { text-decoration: none; padding: 2px 8px; border-radius: 6px; background: var(--flaeche-2); color: var(--text); }
.pfad .sep { opacity: .45; align-self: center; }
.marke { display: flex; align-items: center; gap: 10px; }
.marke img { width: 34px; height: 34px; border-radius: 9px; }
.marke h1 { font-size: 1.15rem; }

/* ---------- Startseite ---------- */
.frage { font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.05; margin: 14px 0 14px; letter-spacing: -.02em; }
.suchfeld { position: relative; margin: 0 0 8px; }
.suchfeld input {
  width: 100%; height: 60px; border-radius: 16px; border: 2px solid var(--graphit);
  background: var(--flaeche); padding: 0 48px 0 50px; font-size: 1.1rem; -webkit-appearance: none; appearance: none;
}
.suchfeld input::placeholder { color: var(--leise); }
.suchfeld input:focus { outline: none; box-shadow: var(--fokus); }
.suchfeld > svg { position: absolute; left: 16px; top: 19px; width: 22px; height: 22px; stroke: var(--leise); fill: none; stroke-width: 2.2; stroke-linecap: round; }
.suchfeld .leeren { position: absolute; right: 8px; top: 10px; width: 40px; height: 40px; border: 0; background: none; color: var(--leise); font-size: 1.4rem; cursor: pointer; }
.suchfeld.mit-mikro input { padding-right: 100px; }
.suchfeld .mikro { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--gelb); color: var(--auf-gelb); display: grid; place-items: center; cursor: pointer; }
.suchfeld .mikro svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.suchfeld.mit-mikro .leeren { right: 56px; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* Status-Leiste (zu erledigen, verliehen, Wo bin ich) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 14px; border-radius: 999px;
  background: var(--flaeche); border: 1px solid var(--linie); text-decoration: none; font-size: .92rem; cursor: pointer; color: var(--text);
}
.chip b { font-weight: 800; font-variant-numeric: tabular-nums; }
.chip.akzent { background: var(--gelb); border-color: var(--gelb); color: var(--auf-gelb); }
.chip.rot { background: var(--rot); border-color: var(--rot); color: #fff; }
.chip.gruen { background: var(--flaeche); }
.chip svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }

.zuletzt { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 6px; margin: 0 -16px; scrollbar-width: none; }
.zuletzt::-webkit-scrollbar { display: none; }
.zuletzt a { flex: none; display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 999px; text-decoration: none; font-size: .92rem; max-width: 230px; min-height: 44px; }
.zuletzt a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zuletzt .mini { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; background: var(--flaeche-2); display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: var(--leise); }

/* ---------- Kacheln mit Kistenetikett ---------- */
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kachel {
  position: relative; display: block; border-radius: var(--r-gross); overflow: hidden; text-decoration: none;
  background: var(--flaeche-2); aspect-ratio: 1 / 1; border: 0; padding: 0; cursor: pointer; text-align: left; width: 100%; color: var(--text);
}
.kachel img, .kachel .platzhalter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kachel .platzhalter {
  display: grid; place-items: center; font-family: var(--kopf-schrift); font-size: 2.6rem; font-weight: 700; color: var(--leise);
  background: repeating-linear-gradient(135deg, var(--flaeche-2) 0 14px, var(--flaeche-3) 14px 28px);
}
.kachel .unterschrift { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.kachel .unterschrift b {
  font-family: var(--kopf-schrift); font-size: .98rem; line-height: 1.15; background: var(--gelb); color: var(--auf-gelb);
  padding: 6px 9px 5px; border-radius: 6px; box-shadow: 0 1px 0 rgba(0,0,0,.15); overflow-wrap: anywhere; max-width: 100%;
}
.kachel .unterschrift small {
  flex: none; font-size: .74rem; font-weight: 700; background: rgba(20, 24, 22, .78); color: #fff; padding: 3px 8px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.kachel:active { transform: scale(.985); }
.kachel.neu { display: grid; place-items: center; background: transparent; border: 2px dashed var(--linie); color: var(--leise); font-weight: 600; }
.kachel.neu span { font-size: 2rem; display: block; text-align: center; line-height: 1; margin-bottom: 4px; color: var(--text); }

/* ---------- Ortsfoto / Lageplan mit Bereichen ---------- */
.foto-rahmen { position: relative; border-radius: var(--r-gross); overflow: hidden; background: #0e100f; margin: 6px 0 12px; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.foto-innen { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }
.foto-innen img { width: auto; height: auto; max-width: 100%; max-height: 58vh; pointer-events: none; -webkit-user-drag: none; }
.foto-rahmen.markieren { box-shadow: 0 0 0 3px var(--gelb); }
.foto-rahmen.markieren .foto-innen { touch-action: none; cursor: crosshair; }
.bereich {
  position: absolute; border: 2px solid var(--gelb); border-radius: 8px; background: rgba(242, 190, 34, .12);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35); text-decoration: none; display: flex; align-items: flex-start; cursor: pointer; padding: 0;
}
.bereich span { background: var(--gelb); color: var(--auf-gelb); font-family: var(--kopf-schrift); font-size: .8rem; font-weight: 700; padding: 3px 7px 2px; border-radius: 0 0 6px 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bereich:active { background: rgba(242, 190, 34, .35); }
.bereich.zieht { border-style: dashed; background: rgba(242, 190, 34, .2); }
.foto-leer { display: grid; place-items: center; gap: 8px; padding: 30px 16px; text-align: center; color: var(--leise); border: 2px dashed var(--linie); border-radius: var(--r-gross); margin: 6px 0 12px; }
.markier-hinweis { background: var(--gelb-hell); border-radius: var(--r); padding: 10px 12px; font-size: .92rem; margin: 6px 0; display: flex; gap: 10px; align-items: center; }
.markier-hinweis span { flex: 1; }
.lageplan-tipp { display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; border: 2px dashed var(--linie) !important; background: transparent !important; cursor: pointer; margin: 14px 0 0; padding: 14px; border-radius: var(--r-gross); color: var(--text); }
.lageplan-tipp svg { width: 36px; height: 36px; flex: none; stroke: var(--text); fill: var(--gelb); stroke-width: 1.6; stroke-linejoin: round; }
.lageplan-tipp small { display: block; color: var(--leise); font-size: .88rem; margin-top: 2px; }

/* ---------- Knöpfe ---------- */
.knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border-radius: var(--r-klein); border: 1px solid var(--linie); background: var(--flaeche); text-decoration: none; cursor: pointer;
  font-weight: 650; font-size: .97rem; color: var(--text);
}
.knopf svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.knopf:active { filter: brightness(.95); }
.knopf.haupt { background: var(--graphit); border-color: var(--graphit); color: var(--auf-graphit); }
.knopf.akzent { background: var(--gelb); border-color: var(--gelb); color: var(--auf-gelb); }
.knopf.gefahr { color: var(--rot); border-color: var(--linie); background: var(--flaeche); }
.knopf.breit { width: 100%; }
.knopf.klein { min-height: 40px; padding: 0 13px; font-size: .9rem; }
.knopf:disabled { opacity: .5; cursor: default; }
.textlink { background: none; border: 0; padding: 8px 0; color: var(--text); font-weight: 650; cursor: pointer; text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* Haupt- und Nebenaktionen im Ort */
.hauptaktion { display: flex; width: 100%; min-height: 56px; font-size: 1.05rem; margin: 4px 0 10px; }
.aktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; margin: 0 0 6px; }
.aktion {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 68px; padding: 8px 4px;
  border-radius: var(--r); border: 1px solid var(--linie); background: var(--flaeche); cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--text); text-align: center; line-height: 1.2;
}
.aktion svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.aktion:active { background: var(--flaeche-2); }

/* ---------- Listen ---------- */
.liste { display: flex; flex-direction: column; gap: 8px; }
.zeile {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; background: var(--flaeche); border-radius: var(--r);
  border: 1px solid var(--linie); text-decoration: none; min-height: 72px; color: var(--text);
}
a.zeile:active, .zeile a:active { opacity: .85; }
.zeile .daumen { width: 56px; height: 56px; border-radius: 11px; object-fit: cover; flex: none; background: var(--flaeche-2); display: grid; place-items: center; color: var(--leise); font-weight: 700; font-family: var(--kopf-schrift); }
.zeile .mitte { flex: 1; min-width: 0; }
.zeile .mitte b { display: block; font-weight: 650; overflow-wrap: anywhere; line-height: 1.25; }
.zeile .mitte small { display: block; color: var(--leise); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.zeile .rechts { flex: none; text-align: right; }
.zeile.ueberfaellig { border-color: var(--rot); box-shadow: inset 4px 0 0 var(--rot); }
.etikett { display: inline-block; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--gelb-hell); color: var(--text); vertical-align: 1px; white-space: nowrap; }
.etikett.gruen { background: var(--gruen-hell); color: var(--gruen); }
.etikett.rot { background: var(--rot-hell); color: var(--rot); }
.leer { color: var(--leise); text-align: center; padding: 28px 14px; border: 2px dashed var(--linie); border-radius: var(--r-gross); }
.leer small { display: block; margin-top: 4px; }

/* Zähler */
.zaehler { display: inline-flex; align-items: center; border-radius: 12px; background: var(--flaeche-3); border: 1px solid var(--linie); overflow: hidden; }
.zaehler button { width: 42px; height: 42px; border: 0; background: none; font-size: 1.3rem; font-weight: 700; cursor: pointer; color: var(--text); }
.zaehler button:active { background: var(--gelb); }
.zaehler .zahl { min-width: 34px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer; padding: 0 2px; }
.zaehler.niedrig .zahl { color: var(--rot); }
.zaehler.gross button { width: 60px; height: 60px; font-size: 1.7rem; }
.zaehler.gross .zahl { font-size: 1.9rem; min-width: 76px; font-family: var(--kopf-schrift); }

/* ---------- Ding-Ansicht ---------- */
.grossbild { border-radius: var(--r-gross); overflow: hidden; background: #0e100f; margin: 6px 0 14px; }
.grossbild img { width: 100%; max-height: 56vh; object-fit: contain; }
.karte { background: var(--flaeche); border-radius: var(--r-gross); padding: 16px; border: 1px solid var(--linie); margin: 12px 0; }
.karte h3 { margin-bottom: 10px; }
.stichworte { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.stichworte span { font-size: .8rem; padding: 3px 10px; border-radius: 999px; background: var(--flaeche-2); color: var(--leise); }
.vorratsbox { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.vorratsbox .info { color: var(--leise); font-size: .92rem; }
.verleihbox { background: var(--gelb-hell); border-radius: var(--r-gross); padding: 16px; margin: 12px 0; }
.verleihbox.rot { background: var(--rot-hell); }
.verleihbox b { font-size: 1.05rem; font-family: var(--kopf-schrift); }
.verleihbox img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; float: right; margin-left: 10px; }
.verlauf { font-size: .9rem; color: var(--leise); }
.verlauf div { padding: 7px 0; border-top: 1px solid var(--linie); }
.verlauf div:first-child { border-top: 0; }
.infozeilen div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--linie); }
.infozeilen div:last-child { border-bottom: 0; }
.infozeilen span { color: var(--leise); }
.beleg-zeile { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.beleg-zeile > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Formulare ---------- */
label.feld, div.feld { display: block; margin: 0 0 14px; }
label.feld > span { display: block; font-size: .86rem; color: var(--leise); margin-bottom: 5px; font-weight: 600; }
.feld input:not([type=checkbox]), .feld select, .feld textarea, input.eingabe, select.eingabe {
  width: 100%; min-height: 50px; border-radius: var(--r-klein); border: 1.5px solid var(--linie); background: var(--flaeche); padding: 11px 13px; font-size: 16px;
}
.feld textarea { min-height: 84px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus, input.eingabe:focus, select.eingabe:focus { outline: none; border-color: var(--graphit); box-shadow: var(--fokus); }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.umschalter { display: flex; background: var(--flaeche-2); border-radius: 14px; padding: 4px; gap: 4px; margin-bottom: 14px; }
.umschalter button { flex: 1; border: 0; background: none; min-height: 46px; border-radius: 11px; font-weight: 650; cursor: pointer; color: var(--leise); padding: 4px 8px; line-height: 1.2; }
.umschalter button.an { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.umschalter button small { display: block; font-weight: 400; font-size: .76rem; }
.ortwahl { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; border-radius: var(--r-klein); border: 1.5px solid var(--linie); background: var(--flaeche); padding: 8px 12px; text-align: left; cursor: pointer; }
.ortwahl .mitte { flex: 1; min-width: 0; }
.ortwahl small { display: block; color: var(--leise); font-size: .8rem; }
.foto-auswahl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.foto-auswahl .knopf { min-height: 96px; flex-direction: column; font-size: .93rem; }
.foto-auswahl .knopf svg { width: 30px; height: 30px; }
.vorschau-klein { width: 100%; max-height: 260px; object-fit: contain; border-radius: var(--r); background: #0e100f; margin-bottom: 12px; }
.check { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; cursor: pointer; min-height: 32px; }
.check input { width: 22px; height: 22px; accent-color: var(--graphit); flex: none; }
details.aufklapp { background: var(--flaeche-3); border: 1px solid var(--linie); border-radius: var(--r); padding: 4px 14px; margin: 0 0 14px; }
details.aufklapp > summary { cursor: pointer; font-weight: 650; padding: 12px 0; list-style-position: inside; }
details > summary { cursor: pointer; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--flaeche-2); padding: 4px 6px; border-radius: 6px; }

/* KI-Vorschläge */
.vorschlag { background: var(--flaeche); border-radius: var(--r); padding: 10px; border: 1px solid var(--linie); display: grid; grid-template-columns: 26px 1fr; gap: 6px 10px; align-items: start; }
.vorschlag.aus { opacity: .5; }
.vorschlag input[type=checkbox] { width: 22px; height: 22px; margin-top: 12px; accent-color: var(--graphit); }
.vorschlag .felder { display: grid; gap: 6px; min-width: 0; }
.vorschlag .reihe { display: flex; gap: 6px; }
.vorschlag .reihe select { flex: 1; min-width: 0; }
.vorschlag input.eingabe, .vorschlag select { min-height: 44px; padding: 8px 10px; font-size: 16px; }
.vorschlag select { border-radius: var(--r-klein); border: 1.5px solid var(--linie); background: var(--flaeche); }
.vorschlag .anz { width: 76px; flex: none; }
.vorschlag .einh { width: 110px; flex: none; }
.vorschlag .stw { font-size: .86rem; color: var(--leise); }

/* ---------- Blatt (Dialog von unten) ---------- */
.blatt-hg { position: fixed; inset: 0; background: rgba(14, 17, 16, .5); z-index: 50; display: flex; align-items: flex-end; justify-content: center; animation: einblenden .15s ease; }
.blatt {
  background: var(--bg); width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; border-radius: 26px 26px 0 0;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); animation: hoch .22s cubic-bezier(.2, .8, .2, 1); overscroll-behavior: contain;
}
@media (min-width: 700px) { .blatt-hg { align-items: center; } .blatt { border-radius: 26px; } }
.blatt .griff { width: 42px; height: 5px; border-radius: 3px; background: var(--linie); margin: 0 auto 12px; }
.blatt h2 { margin: 2px 0 16px; font-size: 1.3rem; }
.blatt .fuss { display: flex; gap: 10px; margin-top: 16px; position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); background: var(--bg); padding: 10px 0 calc(8px + env(safe-area-inset-bottom)); }
.blatt .fuss .knopf { flex: 1; }
@keyframes hoch { from { transform: translateY(48px); opacity: .4; } }
@keyframes einblenden { from { opacity: 0; } }

.baum-zeile { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r); cursor: pointer; background: var(--flaeche); border: 1px solid var(--linie); margin-bottom: 6px; width: 100%; text-align: left; min-height: 56px; color: var(--text); }
.baum-zeile .daumen { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; background: var(--flaeche-2); display: grid; place-items: center; font-weight: 700; color: var(--leise); flex: none; }
.baum-zeile .mitte { flex: 1; min-width: 0; }
.baum-zeile .pfeil { color: var(--leise); font-size: 1.3rem; }
.baum-zeile.gewaehlt { border-color: var(--graphit); box-shadow: inset 0 0 0 1px var(--graphit); background: var(--gelb-hell); }

/* ---------- Navigation ---------- */
#nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: space-around; align-items: stretch;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding: 0 4px env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--flaeche) 94%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--linie);
}
#nav a { flex: 1; max-width: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; font-size: .74rem; font-weight: 600; color: var(--leise); position: relative; }
#nav a svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#nav a[data-nav="mehr"] svg circle { fill: currentColor; stroke: none; }
#nav a > svg { padding: 3px 14px; width: 52px; height: 30px; border-radius: 999px; box-sizing: content-box; margin: -3px 0; }
#nav a.aktiv { color: var(--text); }
#nav a.aktiv > svg { background: var(--gelb-hell); }
.plus-knopf { width: 54px; height: 54px; border-radius: 18px; background: var(--gelb); display: grid; place-items: center; margin-top: -22px; box-shadow: 0 6px 16px rgba(201, 149, 0, .35), 0 0 0 4px var(--bg); }
.plus-knopf svg { stroke: var(--auf-gelb) !important; stroke-width: 2.6 !important; width: 26px !important; height: 26px !important; padding: 0 !important; background: none !important; }
#nav a.nav-plus.aktiv span:last-child { color: var(--text); }
.nav-badge { position: absolute; top: 6px; left: calc(50% + 8px); background: var(--rot); color: #fff; font-size: .68rem; line-height: 1; padding: 3px 6px; border-radius: 9px; font-weight: 800; border: 2px solid var(--flaeche); }
.nav-badge.rot { background: var(--rot); }

/* ---------- Toast & Laden ---------- */
#toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px); transform: translateX(-50%) translateY(20px);
  background: var(--graphit); color: var(--auf-graphit); padding: 12px 16px; border-radius: 14px; font-size: .95rem; opacity: 0; pointer-events: none;
  transition: .2s; z-index: 100; max-width: calc(100% - 32px); box-shadow: var(--schatten-hoch);
}
#toast.zeigen { opacity: 1; transform: translateX(-50%); }
#toast.fehler { background: var(--rot); color: #fff; }
.laden-mitte { display: grid; place-items: center; gap: 12px; padding: 60px 0; color: var(--leise); text-align: center; }
.kreisel { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--flaeche-2); border-top-color: var(--gelb); animation: drehen .8s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.ki-denkt { display: grid; place-items: center; gap: 14px; padding: 30px 10px; text-align: center; }
.ki-denkt img { width: 170px; height: 170px; object-fit: cover; border-radius: 22px; box-shadow: 0 0 0 4px var(--gelb); animation: pulsieren 1.6s ease-in-out infinite; }
@keyframes pulsieren { 50% { transform: scale(.96); opacity: .85; } }

/* ---------- Login ---------- */
.login { max-width: 380px; margin: 8vh auto 0; }
.login img { width: 96px; height: 96px; margin: 0 0 18px; border-radius: 24px; }
.login h1 { font-size: 2.2rem; }
.login p { color: var(--leise); margin-top: 6px; }
.login form { margin-top: 22px; }

/* ---------- Mehr / Anleitung ---------- */
.menue { border-radius: var(--r-gross); overflow: hidden; border: 1px solid var(--linie); background: var(--flaeche); margin-bottom: 8px; }
.menue a, .menue button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; background: var(--flaeche); border: 0; border-radius: 0; text-decoration: none; cursor: pointer; text-align: left; border-bottom: 1px solid var(--linie); min-height: 60px; color: var(--text); }
.menue > :last-child { border-bottom: 0; }
.menue a:active, .menue button:active { background: var(--flaeche-3); }
.menue .ic { width: 38px; height: 38px; border-radius: 11px; background: var(--flaeche-2); display: grid; place-items: center; font-size: 1.15rem; flex: none; }
.menue .mitte { flex: 1; font-weight: 600; }
.menue small { display: block; color: var(--leise); font-size: .84rem; font-weight: 400; }
.menue .etikett { background: var(--rot); color: #fff; }
.kapitel { background: var(--flaeche); border-radius: var(--r-gross); padding: 16px; border: 1px solid var(--linie); margin-bottom: 12px; scroll-margin-top: 80px; }
.kapitel h3 { font-size: 1.12rem; margin-bottom: 8px; }
.kapitel ol { padding-left: 20px; margin: 8px 0; }
.kapitel li { margin-bottom: 6px; }
.kapitel .hinweis { background: var(--gelb-hell); border-radius: 10px; padding: 9px 11px; font-size: .92rem; margin-top: 8px; }
.inhalt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.inhalt-chips .chip { min-height: 36px; font-size: .85rem; }
.protokoll div { padding: 9px 0; border-bottom: 1px solid var(--linie); font-size: .92rem; }
.protokoll div:last-child { border-bottom: 0; }
.protokoll small { color: var(--leise); display: block; }
.klein-leise { font-size: .86rem; color: var(--leise); }
.trenner { height: 1px; background: var(--linie); margin: 16px 0; }

/* ---------- Spracheingabe ---------- */
.sprechen { text-align: center; padding: 10px 4px 4px; }
.sprechen h2 { margin: 16px 0 4px; }
.sprech-kreis { width: 104px; height: 104px; border-radius: 50%; margin: 6px auto 0; display: grid; place-items: center; background: var(--flaeche-2); color: var(--text); }
.sprech-kreis svg { width: 46px; height: 46px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.sprech-kreis.hoert { background: var(--gelb); color: var(--auf-gelb); animation: hoeren 1.2s ease-in-out infinite; }
@keyframes hoeren { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 190, 34, .55); } 50% { box-shadow: 0 0 0 20px rgba(242, 190, 34, 0); } }
.sprechen .knopf.breit { margin-top: 16px; }

/* ---------- Überschrift mit Knopf, Auswahl ---------- */
.kopf-zeile-h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 28px 0 12px; }
.kopf-zeile-h2 h2 { margin: 0; }
.zeile .haken { display: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--linie); flex: none; margin-left: 4px; }
.zeile.waehlbar { cursor: pointer; }
.zeile.waehlbar .haken { display: block; }
.zeile.waehlbar .zaehler { pointer-events: none; opacity: .45; }
.zeile.gewaehlt { border-color: var(--graphit); box-shadow: inset 0 0 0 1px var(--graphit); background: var(--gelb-hell); }
.zeile.gewaehlt .haken { background: var(--graphit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='%23f2be22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; border-color: var(--graphit); }
.auswahl-leiste {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px); z-index: 30;
  width: calc(100% - 24px); max-width: 640px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--graphit); color: var(--auf-graphit); border-radius: 18px; padding: 8px 8px 8px 16px; box-shadow: var(--schatten-hoch);
}
.auswahl-leiste b { flex: 1; min-width: 110px; }
.auswahl-leiste .knopf { border-color: transparent; }
.auswahl-leiste .knopf.haupt { background: var(--gelb); color: var(--auf-gelb); }
.auswahl-leiste .icon-knopf { background: transparent; border-color: rgba(255,255,255,.25); color: inherit; font-size: 1.3rem; }

/* ---------- 1.4.0: Ausschnitte, Rundgang ---------- */
.ausschnitt { width: 44px; height: 44px; flex: none; border-radius: 9px; background-color: var(--flaeche-2); background-repeat: no-repeat; border: 1px solid var(--linie); }
.rundgang-streifen { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin-top: 10px; }
.rg-foto { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--flaeche-2); }
.rg-foto img { width: 100%; height: 100%; object-fit: cover; }
.rg-foto.hoch img, .rg-foto.offen img, .rg-foto.laeuft img { opacity: .55; }
.rg-foto i { position: absolute; right: 4px; bottom: 4px; min-width: 20px; height: 20px; border-radius: 10px; font-style: normal; font-size: .75rem; font-weight: 800; display: grid; place-items: center; }
.rg-foto.fertig i { background: var(--gelb); color: var(--auf-gelb); }
.rg-foto.fehler i { background: var(--rot); color: #fff; }
.klein-kreisel { display: inline-block; width: 14px; height: 14px; border-width: 2.5px; vertical-align: -2px; }
.rg-fertig { font-weight: 650; }
.rg-fertig a { color: inherit; text-decoration-color: var(--gelb); text-decoration-thickness: 3px; }

/* ---------- 1.5.0: Mehr-Seite gegliedert ---------- */
details.mehr-gruppe { background: transparent; border: 0; padding: 0; margin: 14px 0 0; }
details.mehr-gruppe > summary { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 16px; list-style: none; display: flex; flex-direction: column; }
details.mehr-gruppe > summary::-webkit-details-marker { display: none; }
details.mehr-gruppe > summary::after { content: "›"; position: absolute; right: 34px; font-size: 1.4rem; transform: rotate(90deg); color: var(--leise); }
details.mehr-gruppe { position: relative; }
details.mehr-gruppe[open] > summary::after { transform: rotate(-90deg); }
details.mehr-gruppe > summary small { color: var(--leise); font-weight: 400; font-size: .84rem; }
details.mehr-gruppe[open] > summary { margin-bottom: 10px; }
.e-werbung { border: 2px solid var(--gelb); }

/* ---------- 1.5.0: Einfache Ansicht ---------- */
body.einfach { font-size: 18px; padding-bottom: calc(env(safe-area-inset-bottom) + 28px); }
body.einfach .knopf { min-height: 54px; font-size: 1.02rem; }
body.einfach .zeile { min-height: 84px; }
body.einfach .zeile .daumen { width: 66px; height: 66px; }
body.einfach .zeile .mitte small { white-space: normal; font-size: .9rem; }
body.einfach .kachel .unterschrift b { font-size: 1.05rem; }
body.einfach .blatt .feld input, body.einfach .blatt .feld textarea { font-size: 18px; }
.e-kopf h1 { font-size: 1.3rem; }
.e-zurueck { display: inline-flex; align-items: center; gap: 2px; height: 46px; padding: 0 14px 0 8px; border-radius: 12px; border: 1px solid var(--linie); background: var(--flaeche); font-weight: 650; cursor: pointer; flex: none; color: var(--text); }
.e-zurueck svg, .e-home svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.e-home { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--linie); background: var(--flaeche); display: grid; place-items: center; flex: none; color: var(--text); }
.e-frage { font-size: clamp(1.9rem, 8vw, 2.4rem); line-height: 1.08; margin: 12px 0 18px; }
.e-frage-klein { font-family: var(--kopf-schrift); font-weight: 700; font-size: 1.45rem; line-height: 1.15; margin: 8px 0 12px; }
.e-wahl { display: grid; gap: 12px; }
.e-gross { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; min-height: 104px; padding: 16px 18px; border-radius: 24px; background: var(--flaeche); border: 1px solid var(--linie); text-decoration: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.e-gross:active { transform: scale(.985); background: var(--flaeche-3); }
.e-gross.gelb { background: var(--gelb); border-color: var(--gelb); color: var(--auf-gelb); }
.e-gross .e-ic { width: 64px; height: 64px; border-radius: 18px; background: var(--flaeche-2); display: grid; place-items: center; font-size: 2rem; flex: none; }
.e-gross.gelb .e-ic { background: rgba(255,255,255,.55); }
.e-gross .mitte { flex: 1; min-width: 0; }
.e-gross b { display: block; font-family: var(--kopf-schrift); font-size: 1.35rem; line-height: 1.15; }
.e-gross small { display: block; font-size: .95rem; color: var(--leise); margin-top: 3px; }
.e-gross.gelb small { color: inherit; opacity: .8; }
.e-gross small.rot { color: var(--rot); font-weight: 650; }
.e-gross.klein-gross { min-height: 80px; margin-bottom: 14px; }
.e-gross.klein-gross .e-ic { width: 52px; height: 52px; font-size: 1.6rem; }
.e-gross.klein-gross b { font-size: 1.15rem; }
.e-zahl { position: absolute; top: 12px; right: 14px; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 15px; background: var(--rot); color: #fff; font-style: normal; font-weight: 800; display: grid; place-items: center; font-size: .95rem; }
.e-pfeil { font-size: 1.6rem; color: var(--leise); }
.e-fuss { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 26px; }
.e-fuss .textlink { font-size: .95rem; color: var(--leise); }
.e-knopf { margin: 8px 0; }
.e-riesig { min-height: 72px !important; font-size: 1.25rem !important; border-radius: 20px; margin: 10px 0; }
.e-riesig svg { width: 28px; height: 28px; }
.e-such input { font-size: 20px !important; min-height: 64px; }
.e-liste { margin-top: 12px; }
button.zeile { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.e-pfadtext { color: var(--leise); margin: 2px 0 8px; font-weight: 600; }
.e-schritt { display: inline-block; font-size: .85rem; font-weight: 700; color: var(--leise); background: var(--flaeche-2); border-radius: 999px; padding: 3px 12px; margin: 4px 0 2px; }
.e-oder { color: var(--leise); font-weight: 650; margin: 16px 2px 8px; }
.e-hoch { display: inline-flex; align-items: center; gap: 4px; border: 0; background: var(--flaeche-2); border-radius: 12px; min-height: 44px; padding: 0 14px 0 8px; font-weight: 650; cursor: pointer; margin-bottom: 10px; color: var(--text); }
.e-hoch svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.e-hier { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 96px; padding: 10px 16px 10px 10px; border-radius: 20px; border: 2px solid var(--graphit); background: var(--flaeche); text-align: left; cursor: pointer; font: inherit; color: var(--text); margin: 4px 0 6px; }
.e-hier img, .e-hier .e-hier-leer { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; flex: none; background: var(--flaeche-2); display: grid; place-items: center; font-family: var(--kopf-schrift); font-weight: 700; font-size: 1.6rem; color: var(--leise); }
.e-hier .mitte { flex: 1; min-width: 0; }
.e-hier small { display: block; color: var(--leise); font-size: .88rem; }
.e-hier b { display: block; font-family: var(--kopf-schrift); font-size: 1.25rem; overflow-wrap: anywhere; }
.e-hier .e-haken { width: 46px; height: 46px; border-radius: 50%; background: var(--gelb); color: var(--auf-gelb); display: grid; place-items: center; font-size: 1.4rem; font-weight: 800; flex: none; }
.e-hier:active { background: var(--gelb-hell); }
.e-ortkarte { border-width: 1px; border-color: var(--linie); min-height: 84px; }
.e-ortkarte img, .e-ortkarte .e-hier-leer { width: 60px; height: 60px; }
.e-aendern { font-size: .9rem; font-weight: 650; text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.e-vorschlaege { display: grid; gap: 10px; margin-bottom: 10px; }
.e-vorschlag { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 10px; }
.e-vorschlag.aus { opacity: .45; }
.e-vorschlag.aus .e-bild { filter: grayscale(1); }
.e-vorschlag .e-bild { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; }
.e-vorschlag .e-felder { display: grid; gap: 8px; min-width: 0; }
.e-vorschlag input.eingabe { min-height: 50px; font-size: 18px; padding: 8px 12px; }
.e-zeilchen { display: flex; gap: 8px; align-items: center; }
.e-zeilchen .e-einheit { flex: 1; min-width: 0; }
.e-mini { justify-self: start; border: 0; background: none; padding: 4px 0; color: var(--leise); font-size: .9rem; font-weight: 650; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.e-unten { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.e-raus { min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linie); background: var(--flaeche-3); font-size: .9rem; font-weight: 650; cursor: pointer; color: var(--text); }
.e-fertig { text-align: center; padding: 18px 0 8px; }
.e-fertig h2 { margin: 12px 0 4px; font-size: 1.6rem; }
.e-fertig p { color: var(--leise); }
.e-haken-gross { width: 88px; height: 88px; margin: 0 auto; border-radius: 50%; background: var(--gelb); color: var(--auf-gelb); display: grid; place-items: center; font-size: 2.8rem; font-weight: 800; }
.e-weg { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.e-weg li { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 12px; }
.e-weg li.ende { border: 2px solid var(--gelb); }
.e-weg .foto-rahmen { margin: 10px 0 0; }
.e-weg .foto-innen img { max-height: 44vh; }
.e-weg-text { display: flex; gap: 12px; align-items: center; }
.e-weg-text b { display: block; font-family: var(--kopf-schrift); font-size: 1.2rem; }
.e-weg-text small { display: block; color: var(--leise); }
.e-nr { width: 36px; height: 36px; border-radius: 50%; background: var(--graphit); color: var(--auf-graphit); display: grid; place-items: center; font-weight: 800; flex: none; }
.bereich.e-ziel { border-width: 4px; background: rgba(242, 190, 34, .18); animation: e-blinken 1.6s ease-in-out 3; pointer-events: none; }
@keyframes e-blinken { 50% { background: rgba(242, 190, 34, .5); } }
.e-vorrat { text-align: center; }
.e-vorrat.niedrig .e-anzahl b, .e-vorratkarte.niedrig .e-anzahl b { color: var(--rot); }
.e-anzahl b { font-family: var(--kopf-schrift); font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.e-anzahl span { color: var(--leise); font-weight: 650; }
.e-zaehl-knoepfe { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; margin-top: 12px; }
.e-zaehl-knoepfe .knopf { min-height: 64px; font-size: 1.15rem; }
.e-vk-hinweis { margin: 6px 0 0; color: var(--rot); font-weight: 650; font-size: .92rem; min-height: 0; }
.e-vk-hinweis:empty { display: none; }
.e-vorratliste { display: grid; gap: 10px; }
.e-vorratkarte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 10px 12px 12px; }
.e-vk-kopf { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--text); }
.e-vk-kopf .daumen { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; flex: none; background: var(--flaeche-2); display: grid; place-items: center; font-weight: 700; color: var(--leise); }
.e-vk-kopf .mitte { flex: 1; min-width: 0; }
.e-vk-kopf b { display: block; font-size: 1.08rem; }
.e-vk-kopf b.inline { display: inline; font-size: inherit; }
.e-vk-kopf small { display: block; color: var(--leise); font-size: .88rem; }
.e-vk-kopf small.rot { color: var(--rot); font-weight: 650; }
.e-vk-zeile { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.e-vk-zeile .e-anzahl { flex: 1; }
.e-vk-zeile .e-anzahl b { font-size: 2rem; }
.e-vk-zeile .knopf { min-width: 70px; min-height: 58px; font-size: 1.2rem; font-weight: 800; }
.e-verleihkarte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 10px 12px 12px; }
.e-verleihkarte.ueberfaellig { border-color: var(--rot); box-shadow: inset 4px 0 0 var(--rot); }
.e-zeilen-knoepfe { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin-top: 10px; }
.e-verleih { margin-top: 0; }
.e-aktionen { display: grid; gap: 0; margin-top: 16px; }
.e-chips .chip.akzent { background: var(--gelb); border-color: var(--gelb); }
.e-bis button { min-height: 50px; }

/* ---------- 1.6.0: Eingang ---------- */
.beleg-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.beleg-wahl .knopf { width: 100%; }
.eg-neu { margin: 6px 0 12px; grid-template-columns: repeat(3, 1fr); }
.eg-neu .knopf { padding: 0 8px; font-size: .86rem; }
.eg-mail { display: flex; align-items: center; gap: 10px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 8px 10px; font-size: .9rem; margin-bottom: 10px; }
.eg-mail span { flex: 1; min-width: 0; }
.eg-karte { padding: 12px; }
.eg-kopf { display: flex; gap: 12px; align-items: center; }
.eg-kopf a { flex: none; text-decoration: none; }
.eg-bild { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; display: grid; place-items: center; background: var(--flaeche-2); font-size: 2rem; }
.eg-dok { background: var(--gelb-hell); }
.eg-kopf .mitte { flex: 1; min-width: 0; }
.eg-kopf b { display: block; overflow-wrap: anywhere; line-height: 1.25; }
.eg-kopf small { display: block; color: var(--leise); font-size: .84rem; margin-top: 2px; overflow-wrap: anywhere; }
.eg-ki { margin: 10px 0 0; background: var(--flaeche-3); border: 1px solid var(--linie); border-radius: var(--r); padding: 9px 11px; font-size: .9rem; }
.eg-ki.laeuft { color: var(--leise); }
.eg-ki.fehler { background: var(--rot-hell); border-color: transparent; color: var(--rot); }
.eg-ki ul { margin: 6px 0 0; padding-left: 18px; }
.eg-ki li span { color: var(--leise); font-variant-numeric: tabular-nums; }
.eg-ki small { display: block; color: var(--leise); margin-top: 4px; }
.eg-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.eg-fuss { display: flex; gap: 18px; justify-content: flex-end; margin-top: 4px; }
.eg-fuss .textlink { font-size: .86rem; color: var(--leise); padding: 4px 0; }

/* ---------- 1.7.0: Strichcode-Scanner ---------- */
.code-zeile { display: flex; gap: 8px; }
.code-zeile input { flex: 1; min-width: 0; }
.scan { position: fixed; inset: 0; z-index: 80; background: #0b0d0c; color: #fff; display: flex; flex-direction: column; }
.scan-kopf { display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top) + 10px) 14px 10px; }
.scan-kopf b { font-family: var(--kopf-schrift); font-size: 1.1rem; }
.scan-zu { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 1.2rem; cursor: pointer; }
.scan-bild { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.scan-bild video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-rahmen { position: absolute; left: 8%; right: 8%; top: 32%; bottom: 32%; border: 3px solid var(--gelb); border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.38); }
.scan-rahmen i { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: #ff4d3a; box-shadow: 0 0 8px #ff4d3a; animation: scan-linie 1.6s ease-in-out infinite; }
@keyframes scan-linie { 50% { transform: translateY(-14px); } }
.scan.pausiert .scan-rahmen i { animation: none; opacity: .3; }
.scan.ohne-kamera .scan-bild { flex: 0 0 60px; }
.scan-unten { background: var(--bg); color: var(--text); padding: 12px 14px calc(env(safe-area-inset-bottom) + 14px); border-radius: 20px 20px 0 0; max-height: 58vh; overflow-y: auto; }
.scan-modus { margin-bottom: 10px; }
.scan-modus button { min-height: 50px; font-size: 1rem; }
.scan-status { font-size: .92rem; color: var(--leise); text-align: center; margin: 2px 0 8px; }
.scan-ergebnis:empty { display: none; }
.scan-ergebnis { display: grid; gap: 8px; }
.scan-treffer { display: flex; gap: 12px; align-items: center; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 10px 12px; }
.scan-treffer .daumen { width: 56px; height: 56px; border-radius: 11px; object-fit: cover; flex: none; background: var(--flaeche-2); display: grid; place-items: center; font-weight: 700; color: var(--leise); }
.scan-treffer > div { flex: 1; min-width: 0; }
.scan-treffer b { display: block; font-size: 1.05rem; }
.scan-treffer small { display: block; color: var(--leise); }
.scan-treffer strong { font-size: 1.2rem; color: var(--text); }
.scan-treffer.minus { border-color: var(--gelb); box-shadow: inset 4px 0 0 var(--gelb); }
.scan-treffer.plus { border-color: var(--gruen); box-shadow: inset 4px 0 0 var(--gruen); }
.scan-treffer.leer { border-color: var(--rot); }
.scan-treffer .rot { color: var(--rot); font-weight: 700; }
.scan-knoepfe { display: grid; gap: 8px; }
.scan-frage { margin: 0; font-weight: 650; }
.scan-liste { display: grid; gap: 6px; max-height: 34vh; overflow-y: auto; }
.scan-eingabe { display: flex; gap: 8px; }
.scan-eingabe input { flex: 1; min-width: 0; font-size: 18px; }
.scan-tippen { display: block; margin: 8px auto 0; font-size: .9rem; color: var(--leise); }

/* ---------- Bestand: Packungen, Füllstand, Hausapotheke (ab 1.8.0) ---------- */
.bw { display: contents; }
.bw-liste, .bw-gross { display: inline-flex; }
.bw-gross { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; width: 100%; }
.bw-gross .info { color: var(--leise); font-size: .92rem; flex: 1 1 180px; }
.bw-einfach, .bw-ezeile, .bw-blatt { display: block; }
.bw.niedrig .zaehler .zahl, .bw.niedrig .e-anzahl b { color: var(--rot); }
.e-anzahl b.text { font-size: 1.3rem; line-height: 1.25; font-family: inherit; font-weight: 800; }
.e-vk-zeile .e-anzahl b.text { font-size: 1.05rem; }
.e-anzahl[data-bw-blatt] { cursor: pointer; }
.vorratsbox.fs { display: block; }
.vorratsbox .bw-gross.fs, .vorratsbox .fs-steuer { width: 100%; }
.fs-balken { display: inline-block; width: 30px; height: 12px; border: 2px solid currentColor; border-radius: 4px; position: relative; vertical-align: middle; flex: none; opacity: .85; }
.fs-balken::after { content: ''; position: absolute; right: -5px; top: 2px; width: 3px; height: 4px; background: currentColor; border-radius: 0 2px 2px 0; }
.fs-balken i { position: absolute; left: 1px; top: 1px; bottom: 1px; max-width: calc(100% - 2px); background: var(--gruen, #3f8f62); border-radius: 2px; }
.bw.niedrig .fs-balken i { background: var(--rot); }
.fs-balken.gross { width: 54px; height: 22px; border-width: 2.5px; border-radius: 6px; }
.fs-balken.gross::after { right: -7px; top: 5px; width: 4px; height: 8px; }
.fs-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--linie); background: var(--flaeche-3); color: var(--text); font-weight: 700; cursor: pointer; white-space: nowrap; }
.fs-knopf small { color: var(--leise); font-weight: 600; }
.fs-steuer { text-align: left; }
.fs-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fs-kopf b { font-family: var(--kopf-schrift); font-size: 1.5rem; }
.fs-kopf span { color: var(--leise); font-weight: 600; }
.fs-stufen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.fs-stufen button { min-height: 56px; border-radius: 12px; border: 1.5px solid var(--linie); background: var(--flaeche); color: var(--text); font-size: 1.15rem; font-weight: 800; cursor: pointer; padding: 0 2px; }
.fs-stufen button:last-child { font-size: .82rem; line-height: 1.1; }
.fs-stufen button.an { background: var(--graphit); color: var(--auf-graphit); border-color: var(--graphit); }
.fs-stufen button:active { background: var(--gelb); color: #1e2422; }
.fs-leer { margin-top: 8px; min-height: 48px; }
.fs-reserve { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: .95rem; }
.fs-reserve span { flex: 1; color: var(--leise); font-weight: 600; }
.fs-reserve b { min-width: 22px; text-align: center; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.fs-reserve .knopf { min-width: 46px; min-height: 42px; font-size: 1.2rem; font-weight: 800; padding: 0; }
.bw-einfach .fs-stufen button, .bw-ezeile .fs-stufen button { min-height: 62px; }
.bw-ezeile .fs-steuer { margin-top: 10px; }
.bw-ezeile .fs-kopf { margin-bottom: 8px; }
.bw-ezeile .fs-kopf b { font-size: 1.15rem; }
.pk-zeile { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.pk-zeile span { flex: 1; font-weight: 650; }
.pk-zeile span small { display: block; color: var(--leise); font-weight: 400; }
.pk-zeile b { min-width: 40px; text-align: center; font-family: var(--kopf-schrift); font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.pk-zeile .knopf { min-width: 52px; min-height: 52px; font-size: 1.4rem; font-weight: 800; padding: 0; }
.pk-ki { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; border: 1.5px dashed var(--linie); border-radius: var(--r); }
.pk-ki .klein-leise { flex: 1 1 180px; font-size: .84rem; }
.feld-titel { display: block; font-weight: 600; margin-bottom: 5px; font-size: .86rem; }
.umschalter.drei button { padding: 4px 4px; font-size: .92rem; }
.schalter-zeile { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0 0 12px; padding: 6px 12px; border-radius: var(--r-klein); background: var(--flaeche-3); border: 1px solid var(--linie); cursor: pointer; font-weight: 650; }
.schalter-zeile input { width: 22px; height: 22px; accent-color: var(--graphit); flex: none; }
.ic-gross { font-size: 1.7rem; }
.apo-gruppe h3 { margin: 14px 0 6px; font-size: .86rem; font-weight: 650; }
h2.rot { color: var(--rot); }
.e-filter { margin: 12px 0; }
.e-filter a { flex: 1; display: grid; place-items: center; min-height: 48px; border-radius: 11px; font-weight: 650; text-decoration: none; color: var(--leise); }
.e-filter a.an { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
@media (max-width: 380px) { .fs-stufen { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Kleiderschrank (ab 1.9.0) ---------- */
.k-person { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; color: var(--leise); font-weight: 600; font-size: .92rem; }
.k-person .chip { font-weight: 700; }
.chip.an { background: var(--graphit); color: var(--auf-graphit); border-color: var(--graphit); }
.chip small { opacity: .7; font-weight: 600; margin-left: 2px; }
.k-frage .chips { margin: 4px 0 6px; }
.k-tage { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; scrollbar-width: none; }
.k-tage .chip { flex: none; }
.k-wetter { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); background: var(--flaeche-3); border: 1px solid var(--linie); margin-bottom: 14px; }
.k-wetter .mitte { flex: 1; min-width: 0; }
.k-wetter .mitte b { display: block; font-family: var(--kopf-schrift); font-size: 1.35rem; }
.k-wetter .mitte small { color: var(--leise); }
.k-wsym { font-size: 2.2rem; line-height: 1; }
.k-wetter-leer { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px; margin-bottom: 14px; border-radius: var(--r); border: 2px dashed var(--linie); background: transparent; color: var(--text); cursor: pointer; font-size: 1.4rem; }
.k-wetter-leer b { display: block; font-size: 1rem; }
.k-wetter-leer small { display: block; color: var(--leise); font-size: .86rem; }
.k-menue { display: grid; gap: 10px; margin-top: 16px; }
.k-hinweis { background: var(--gelb-hell, #fff6d6); }
.k-anker { display: flex; gap: 12px; align-items: center; }
.k-anker .k-teil { width: 84px; flex: none; }
.k-anker small { display: block; }
.k-teil { display: block; position: relative; text-decoration: none; color: var(--text); border-radius: 14px; overflow: hidden; background: var(--flaeche-2); border: 1px solid var(--linie); }
.k-teil img, .k-teil .k-ohne { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #fff; }
.k-teil .k-ohne { display: grid; place-items: center; font-size: 2.2rem; }
.k-teil .k-name { display: block; padding: 6px 8px 7px; font-size: .82rem; font-weight: 650; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--flaeche); }
.k-teil.waesche img { opacity: .45; }
.k-marke, .k-kat, .k-grad, .k-herz { position: absolute; left: 6px; top: 6px; font-style: normal; font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,.92); color: #1e2422; }
.k-herz { left: auto; right: 6px; color: #c2412d; font-size: .9rem; }
.k-grad.stark { background: var(--rot); color: #fff; }
.k-collage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.k-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.k-raster-zelle small { display: block; margin-top: 4px; font-size: .78rem; line-height: 1.25; }
.k-outfit-kopf b { font-family: var(--kopf-schrift); font-size: 1.2rem; }
.k-outfit-kopf small { display: block; }
.k-warum { margin: 4px 0 8px; }
.k-outfit-knoepfe { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
.k-outfit-knoepfe .knopf.an { background: var(--gelb); color: #1e2422; border-color: var(--gelb); }
.k-filter { margin: 10px 0 14px; }
.k-saison { margin: 2px 0 12px; }
.k-saison .chip input { margin: 0 4px 0 0; accent-color: var(--graphit); }
.k-kauf { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: start; }
.k-kauf-bild { width: 110px; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.k-kauf small { display: block; }
.k-fazit { margin: 8px 0 0; font-weight: 650; }
.k-kauf.schon { border-color: var(--rot); box-shadow: inset 4px 0 0 var(--rot); }
.k-kauf.neu { border-color: var(--gruen); box-shadow: inset 4px 0 0 var(--gruen); }
.k-dingkarte .knopfreihe .knopf.an { color: var(--rot); }
body.einfach .k-teil .k-name { font-size: .92rem; }
body.einfach .k-collage { grid-template-columns: repeat(2, 1fr); }

/* ---------- Mehrere Fotos je Ding (ab 1.9.1) ---------- */
.galerie { margin: 6px 0 14px; }
.galerie .grossbild { position: relative; margin: 0 0 8px; cursor: zoom-in; }
.galerie-zahl { position: absolute; right: 10px; bottom: 10px; padding: 2px 9px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: .8rem; font-weight: 700; }
.galerie-leiste { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; align-items: stretch; }
.galerie-daumen { position: relative; flex: none; width: 62px; height: 62px; padding: 0; border-radius: 12px; overflow: hidden; border: 2px solid transparent; background: var(--flaeche-2); cursor: pointer; }
.galerie-daumen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie-daumen.an { border-color: var(--gelb); }
.galerie-daumen button { position: absolute; right: 2px; top: 2px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-weight: 800; line-height: 1; cursor: pointer; padding: 0; }
.galerie-plus { flex: none; min-width: 62px; height: 62px; padding: 0 12px; border-radius: 12px; border: 2px dashed var(--linie); background: transparent; color: var(--leise); font-weight: 650; font-size: .82rem; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.galerie-plus svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.galerie-aktion { display: flex; gap: 18px; margin-top: 8px; }
.k-weitere { margin: -4px 0 10px; }

/* ---------- Kleiderschrank: Größe, Orte, Auswahl (ab 1.10.0) ---------- */
.k-person { flex-wrap: wrap; }
.k-passt-info { margin: -4px 0 12px; }
.k-passt-zeile { display: flex; align-items: center; gap: 10px; }
.k-passt-zeile .eingabe { flex: 1; min-width: 0; text-align: center; }
.k-passt-zeile span { color: var(--leise); font-weight: 600; }
.k-passt-warn { color: var(--rot); font-weight: 650; font-size: .92rem; }
.k-marke.k-passt { top: auto; bottom: 34px; background: var(--rot); color: #fff; }
.k-orte { margin-bottom: 4px; }
.k-groessen .chip { min-width: 52px; justify-content: center; }
.k-waehlen .k-raster-zelle { position: relative; }
.k-waehlen .k-raster-zelle::after { content: ''; position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.25); box-shadow: 0 1px 3px rgba(0,0,0,.3); pointer-events: none; }
.k-waehlen .k-raster-zelle.gewaehlt::after { background: var(--gelb); content: '✓'; color: #1e2422; font-weight: 800; display: grid; place-items: center; font-size: .85rem; }
.k-waehlen .k-raster-zelle.gewaehlt .k-teil { outline: 3px solid var(--gelb); outline-offset: -3px; }
.k-auswahlleiste { flex-wrap: wrap; }
.k-groessen .chip.zwischen { background: var(--gelb-hell); border-color: var(--gelb); }

/* ---------- Familie & Gäste (ab 1.12.0) ---------- */
.gast-hinweis b { display: block; font-size: 1.1rem; }
.gast-hinweis small { display: block; color: var(--leise); margin-top: 4px; }
.gast-knoepfe { margin: 14px 0; }
.gast-knoepfe .knopf + .knopf { margin-top: 8px; }
body.gast .e-aktionen, body.gast .e-fuss, body.gast .verleihbox .e-zeilen-knoepfe, body.gast .galerie-plus, body.gast .galerie-aktion,
body.gast .bw button, body.gast .e-zaehl-knoepfe, body.gast [data-mikro], body.gast .mikro, body.gast [data-ortfoto], body.gast a[href^="#/erfassen"], body.gast .k-dingkarte { display: none !important; }
.fam-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.fam-kopf b { font-family: var(--kopf-schrift); font-size: 1.25rem; }
.fam-kopf a { font-size: .88rem; }

/* ---------- Kleiderschrank-Extras (1.13.0) ---------- */
.k-schnell { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.k-schnell .knopf { justify-content: center; }
.k-termine { margin: 0 0 12px; align-items: center; }
.k-saisonwechsel { display: block; text-decoration: none; color: inherit; margin: 0 0 12px; }
.k-pflege { margin: 0 0 10px; font-size: .9rem; padding: 8px 10px; background: var(--flaeche-3); border-radius: var(--r-klein); }
.k-ohne-klein { display: grid; place-items: center; font-size: 1.5rem; background: var(--flaeche-3); }
.k-mehr { align-items: center; }
.k-mehr input[type=checkbox], .k-packliste input[type=checkbox], .k-wahl input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--gelb-tief); flex: none; }
.k-mehr .eingabe { padding: 6px 10px; min-height: 0; font-weight: 600; }
.k-wahl { position: relative; }
.k-wahl input { position: absolute; top: 6px; right: 6px; z-index: 2; }
.k-wahl .k-teil { pointer-events: none; }
.zeile.gepackt { opacity: .55; }
.zeile.gepackt b { text-decoration: line-through; }
.k-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.k-kennzahlen > div { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 12px; }
.k-kennzahlen b { display: block; font-family: var(--kopf-schrift); font-size: 1.5rem; }
.k-kennzahlen small { color: var(--leise); font-size: .82rem; }
.k-balken { display: grid; grid-template-columns: minmax(90px, 38%) 1fr 34px; align-items: center; gap: 8px; margin: 6px 0; font-size: .92rem; }
.k-balken span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-balken i { display: block; height: 12px; border-radius: 6px; background: var(--gelb); min-width: 4px; }
.k-balken b { text-align: right; }
.k-wisch { position: relative; margin: 8px auto 14px; max-width: 380px; border-radius: var(--r-gross); overflow: hidden; background: var(--flaeche); box-shadow: var(--schatten-hoch); transition: transform .25s ease, opacity .25s ease; touch-action: pan-y; user-select: none; }
.k-wisch img, .k-wisch .k-ohne { display: block; width: 100%; aspect-ratio: 1; max-height: 46vh; object-fit: cover; background: #fff; pointer-events: none; }
.k-wisch .k-ohne { display: grid; place-items: center; font-size: 4rem; }
.k-wisch-text { padding: 12px 14px; }
.k-wisch-text b { display: block; font-size: 1.1rem; }
.k-wisch-text small { color: var(--leise); }
.k-wisch-stempel { position: absolute; top: 18px; padding: 6px 14px; border: 3px solid; border-radius: 10px; font-weight: 800; font-size: 1.3rem; text-transform: uppercase; opacity: 0; transition: opacity .15s; background: rgba(255,255,255,.85); }
.k-wisch-stempel.links { right: 18px; color: var(--rot); transform: rotate(12deg); }
.k-wisch-stempel.rechts { left: 18px; color: var(--gruen); transform: rotate(-12deg); }
.k-wisch.zeigt-links .k-wisch-stempel.links, .k-wisch.zeigt-rechts .k-wisch-stempel.rechts { opacity: 1; }
.k-wisch.raus-links { transform: translateX(-120%) rotate(-18deg) !important; opacity: 0; }
.k-wisch.raus-rechts { transform: translateX(120%) rotate(18deg) !important; opacity: 0; }
.k-wisch-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 380px; margin: 0 auto; }
.k-stapel { align-items: flex-start; }
.k-stapel-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.k-stapel-knoepfe .knopf.an { background: var(--gelb); color: var(--auf-gelb); }

/* Schnell fotografieren mit mehreren Fotos je Teil (1.15.0) */
.k-teilfotos { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; margin-bottom: 8px; }
.k-teilfoto { position: relative; flex: none; width: 76px; }
.k-teilfoto img { display: block; width: 76px; height: 76px; object-fit: cover; border-radius: var(--r-klein); border: 2px solid var(--linie); background: #fff; }
.k-teilfoto.haupt img { border-color: var(--gelb); }
.k-teilfoto i { position: absolute; left: 4px; bottom: 4px; font-style: normal; font-size: .62rem; font-weight: 700; background: var(--gelb); color: var(--auf-gelb); padding: 1px 5px; border-radius: 5px; }
.k-teilfoto button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--graphit); color: var(--auf-graphit); font-weight: 700; line-height: 1; cursor: pointer; }

/* Onlineshop, Wochenplan, Größen je Marke (1.16.0) */
.k-shop { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; }
.k-shop img { width: 120px; height: 150px; object-fit: cover; border-radius: var(--r); background: #fff; border: 1px solid var(--linie); }
.k-shop-preis { font-family: var(--kopf-schrift); font-size: 1.4rem; font-weight: 700; margin: 6px 0 0; }
.k-shop-groesse { margin: 8px 0 0; padding: 6px 10px; background: var(--gelb-hell); border-radius: var(--r-klein); font-size: .92rem; }
.k-tag { padding-top: 12px; }
.k-tag.heute { border-color: var(--gelb); box-shadow: inset 0 0 0 1px var(--gelb); }
.k-tag-kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.k-tag-kopf b { font-family: var(--kopf-schrift); font-size: 1.1rem; }
.k-tag-kopf small { color: var(--leise); }
.k-tag-wetter { margin-left: auto; font-size: .92rem; }
.k-tag-termine { font-size: .88rem; color: var(--leise); margin-bottom: 6px; }
.k-tag-anlass { width: auto; min-width: 140px; margin-bottom: 8px; padding: 6px 10px; border-radius: var(--r-klein); border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); font: inherit; }
.k-marke-zeile .k-marke-gr { font-family: var(--kopf-schrift); font-weight: 700; font-size: 1.15rem; padding: 0 8px; }
.k-heute-plan { border-color: var(--gelb); }
.k-heute-plan .k-outfit-kopf a { margin-left: auto; }