/* Druckrein Büro – „Glasklar“: jede Arbeitsfläche ist eine Scheibe im Rahmen, Daten erscheinen per Abzieher-Wisch.
   Farben, Schriften und Linien wie auf der Druckrein-Website. Alles lokal, damit die App offline läuft. */

@font-face { font-family: "Outfit"; src: url("/fonts/outfit-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-italic-latin.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --papier: #f4f7fa;
  --flaeche: #ffffff;
  --tinte: #0b0e14;
  --tinte-2: #151c27;
  --text: #0b0e14;
  --text-2: #3a4551;
  --grau: #5a6774;
  --grau-2: #8b97a4;
  --linie: #e3e9ef;
  --linie-2: #cdd7e0;
  --blau: #0a74b0;
  --blau-tief: #075d8f;
  --blau-zart: #e8f2f9;
  --hellblau: #3fb2ee;
  --gruen: #10805b;
  --gruen-zart: #e4f4ed;
  --rot: #c0362c;
  --rot-zart: #fbeceb;
  --gelb: #8a5a00;
  --gelb-zart: #fff4da;
  --f-titel: "Outfit", "Segoe UI", system-ui, sans-serif;
  --f-text: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --f-akzent: "Instrument Serif", Georgia, serif;
  --f-mono: "JetBrains Mono", Consolas, monospace;
  --r: 20px;
  --rahmen: 0 0 0 5px rgb(11 14 20 / 0.035), 0 0 0 6px rgb(11 14 20 / 0.05);
  --schatten: 0 1px 1px rgb(11 14 20 / 0.03), 0 2px 6px -2px rgb(11 14 20 / 0.06), 0 28px 56px -34px rgb(7 52 84 / 0.3);
  --schwebe: 0 1px 1px rgb(11 14 20 / 0.04), 0 10px 26px -10px rgb(7 52 84 / 0.28), 0 30px 60px -30px rgb(7 52 84 / 0.3);
  --aus: cubic-bezier(0.16, 1, 0.3, 1);
  --inaus: cubic-bezier(0.77, 0, 0.175, 1);
  --feder: cubic-bezier(0.34, 1.32, 0.64, 1);
  --leiste: 252px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scrollbar-color: rgb(11 14 20 / 0.22) transparent; }
body {
  background: var(--papier);
  color: var(--text);
  font: 15px/1.55 var(--f-text);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--blau);
  overflow-x: hidden;
}
::selection { background: var(--blau); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgb(11 14 20 / 0.18); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgb(11 14 20 / 0.32); }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { margin: 0; font-family: var(--f-titel); letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(28px, 2.6vw, 40px); font-weight: 600; line-height: 1.05; letter-spacing: -0.035em; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 13px; font-weight: 600; color: var(--grau); }
p { margin: 0; text-wrap: pretty; }
a { color: var(--blau); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.akzent { font-family: var(--f-akzent); font-style: italic; font-weight: 400; font-size: 1.1em; letter-spacing: -0.005em; color: var(--blau); padding-right: 0.04em; }
.zahl, .tabelle .r, td.betrag { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); font-size: 0.86em; letter-spacing: 0.01em; }
.klein { font-size: 12.5px; color: var(--grau); }
.plus { color: var(--gruen); }
.minus { color: var(--rot); }
.nur-lesbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg { display: block; }

/* ---------- Gerüst ---------- */
.app { min-height: 100vh; display: grid; grid-template-columns: var(--leiste) minmax(0, 1fr); }
.inhalt { padding: 34px clamp(20px, 3.2vw, 48px) 80px; max-width: 1320px; width: 100%; }
.seite { animation: seite-rein 420ms var(--aus) backwards; }
@keyframes seite-rein { from { opacity: 0; transform: translateY(10px); } }

/* Tinten-Leiste mit Linien im Hintergrund */
.leiste {
  position: sticky; top: 0; height: 100vh; z-index: 20;
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 14px 16px; background: var(--tinte); color: #c4cdd7; overflow: hidden; isolation: isolate;
}
.leiste .linien { position: absolute; inset: auto -40% -6% -40%; height: 58%; z-index: -1; color: var(--hellblau); opacity: 0.45; }
.leiste-logo { display: block; padding: 4px 10px 18px; color: inherit; }
.leiste-logo .wortmarke { width: 150px; height: auto; }
.leiste-logo .logo-icon { display: none; width: 40px; height: 40px; }
.leiste-logo small { display: block; margin-top: 6px; font-family: var(--f-akzent); font-style: italic; font-size: 19px; color: var(--hellblau); line-height: 1; }

.neu-knopf {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 48px; margin: 0 2px 14px; padding: 0 5px 0 18px;
  border: 0; border-radius: 99px; background: #fff; color: var(--tinte); font-weight: 650; font-size: 15px;
  transition: transform 160ms var(--aus), background-color 200ms;
}
.neu-knopf:hover { background: #eef4f9; }
.neu-knopf:active { transform: scale(0.97); }
.well { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--blau); color: #fff; flex: none; transition: transform 300ms var(--aus); }
.well svg { width: 18px; height: 18px; }
.neu-knopf:hover .well, .knopf:hover .well { transform: translate(2px, -1px) scale(1.05); }

.nav-liste { position: relative; display: grid; gap: 2px; }
.nav-linse {
  position: absolute; left: 0; right: 0; top: 0; height: 44px; border-radius: 13px; pointer-events: none;
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 1px 1px 1px -0.5px rgb(255 255 255 / 0.35), inset -1px -1px 1px -0.5px rgb(255 255 255 / 0.18), 0 6px 16px -8px rgb(0 0 0 / 0.6);
  transition: transform 460ms var(--feder), height 300ms var(--aus), opacity 200ms;
}
.nav {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px;
  border-radius: 13px; color: #aab5c1; text-decoration: none; font-weight: 550; transition: color 200ms;
}
.nav svg { width: 19px; height: 19px; flex: none; transition: color 200ms, transform 300ms var(--aus); }
.nav:hover, .nav.aktiv { color: #fff; }
.nav.aktiv svg { color: var(--hellblau); }
.nav:hover svg { transform: translateX(1px); }
.nav .zaehler { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--hellblau); color: var(--tinte); font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }

.bot-karte {
  margin-top: auto; display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 16px; color: #dfe6ee; text-decoration: none;
  background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); backdrop-filter: blur(6px);
  transition: background-color 200ms;
}
.bot-karte:hover { background: rgb(255 255 255 / 0.09); }
.bot-karte strong { display: block; font-size: 13.5px; color: #fff; font-weight: 600; }
.bot-karte span { font-size: 12px; color: #9fb0c0; }
.puls { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #8593a1; flex: none; }
.puls.an { background: #3ddc97; }
.puls.an::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: puls 2.2s var(--aus) infinite; }
.puls.fehler { background: #ff6b5f; }
@keyframes puls { from { transform: scale(1); opacity: 0.7; } to { transform: scale(3); opacity: 0; } }

/* Handy: Kopfzeile + schwebende Tab-Insel */
.kopf-mobil, .tab-insel { display: none; }

/* ---------- Seitenkopf ---------- */
.kopfzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.kopfzeile p { margin-top: 8px; color: var(--grau); font-size: 15px; max-width: 60ch; }
.aktionen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Scheiben (Rahmen + Glas) ---------- */
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; }
.raster + .raster, .raster + .scheibe, .scheibe + .scheibe, .scheibe + .raster, .hinweise + .raster, .hinweise + .scheibe { margin-top: 22px; }
.s12 { grid-column: span 12; } .s8 { grid-column: span 8; } .s7 { grid-column: span 7; } .s6 { grid-column: span 6; }
.s5 { grid-column: span 5; } .s4 { grid-column: span 4; } .s3 { grid-column: span 3; }

.scheibe {
  position: relative; isolation: isolate; overflow: hidden; margin: 6px;
  background: var(--flaeche); border-radius: var(--r); padding: 20px 22px;
  box-shadow: var(--rahmen), var(--schatten);
}
.raster > .scheibe { margin: 6px; }
.scheibe-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-height: 30px; }
.scheibe-kopf h2 { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.scheibe-kopf h2 > svg { width: 20px; height: 20px; flex: none; }

/* Glanz: ein Lichtstreifen zieht beim Überfahren einmal über die Scheibe (wie auf der Website) */
.glanz::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.05) 40%, rgb(255 255 255 / 0.6) 47%, rgb(255 255 255 / 0.1) 52%, transparent 60%);
  transform: translateX(-100%);
}
@media (hover: hover) and (pointer: fine) {
  .glanz:hover::after { transform: translateX(100%); transition: transform 1100ms var(--aus); }
}

/* Signature: Beschlag auf der Scheibe, den ein Abzieher von links nach rechts wegwischt */
.beschlag {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background-color: rgb(236 241 246 / 0.72);
  background-image: radial-gradient(circle at 30% 40%, rgb(255 255 255 / 0.55) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 70% 60%, rgb(255 255 255 / 0.4) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 50% 50%, rgb(90 110 130 / 0.12) 0 3px, transparent 5px);
  background-size: 37px 43px, 61px 53px, 89px 71px;
  backdrop-filter: blur(7px) saturate(0.7);
  -webkit-backdrop-filter: blur(7px) saturate(0.7);
  animation: beschlag-weg 640ms var(--inaus) calc(90ms + var(--i, 0) * 80ms) forwards;
}
.beschlag::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent calc(100% - 26px), rgb(63 178 238 / 0.18) calc(100% - 10px), rgb(255 255 255 / 0.95) calc(100% - 3px), var(--tinte) calc(100% - 3px), var(--tinte) 100%);
  transform: translateX(-100%);
  animation: abzieher 640ms var(--inaus) calc(90ms + var(--i, 0) * 80ms) forwards;
}
@keyframes beschlag-weg { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); visibility: hidden; } }
@keyframes abzieher { 0% { transform: translateX(-100%); opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
.start-aktiv .beschlag, .start-aktiv .beschlag::after { animation-play-state: paused; }

/* ---------- Kennzahlen ---------- */
.betrag-gross { font-family: var(--f-titel); font-weight: 600; font-size: clamp(40px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.04em; }
.betrag-mittel { font-family: var(--f-titel); font-weight: 600; font-size: 28px; line-height: 1.05; letter-spacing: -0.03em; }
.etikett { font-size: 13px; font-weight: 600; color: var(--grau); }

/* Rollende Ziffern (wie „Number Flow“): jede Ziffer ist ein Streifen 0–9, der an seinen Platz rollt */
/* Ohne Laufweite: sonst ist jedes Ziffernfeld schmaler als die Ziffer und die Rolle schneidet runde Ziffern (0, 6, 8, 9) an.
   Das Feld bekommt seitlich Luft (Padding), die der negative Rand im Layout wieder ausgleicht. */
.zahl-roll { display: inline-flex; align-items: baseline; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.zr-ziffer { display: inline-block; height: 1em; line-height: 1; padding: 0 0.14em; margin: 0 -0.14em; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 90%, transparent); }
.zr-streifen { display: flex; flex-direction: column; transition: transform 1000ms var(--aus); }
.zr-streifen > span { height: 1em; line-height: 1; text-align: center; }
.zr-zeichen { display: inline-block; line-height: 1; }

.zeilen { display: grid; }
.zeile { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--linie); }
.zeile:first-child { border-top: 0; padding-top: 2px; }
.zeile .klein { grid-column: 1 / -1; }
.zeile a { font-size: 13px; font-weight: 600; text-decoration: none; }

.balken { height: 8px; border-radius: 99px; background: var(--linie); overflow: hidden; }
.balken > div { height: 100%; border-radius: inherit; background: var(--blau); transform-origin: left; animation: balken-wachs 1100ms var(--aus) 300ms backwards; }
.balken.warn > div { background: #d99a1e; }
.balken.voll > div { background: var(--rot); }
@keyframes balken-wachs { from { transform: scaleX(0); } }

/* ---------- Verlaufsdiagramm ---------- */
.diagramm { position: relative; margin-top: 18px; }
.diagramm svg { overflow: visible; }
.diagramm .gitter line { stroke: var(--linie); stroke-width: 1; }
.diagramm .achse text { fill: var(--grau); font-size: 11.5px; font-family: var(--f-text); font-variant-numeric: tabular-nums; }
.diagramm .achse text.jetzt { fill: var(--text); font-weight: 700; }
.diagramm .saeule { transform-box: fill-box; transform-origin: 50% 100%; animation: saeule-wachs 900ms var(--aus) calc(250ms + var(--i) * 35ms) backwards; }
@keyframes saeule-wachs { from { transform: scaleY(0); } }
.diagramm .spalte-hover { fill: var(--blau-zart); opacity: 0; transition: opacity 160ms; }
.diagramm .spalte-hover.an { opacity: 1; }
.legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.legende span { display: inline-flex; align-items: center; gap: 7px; }
.legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.tooltip {
  position: absolute; z-index: 5; pointer-events: none; min-width: 168px; padding: 10px 12px; border-radius: 14px;
  background: var(--tinte); color: #fff; font-size: 13px; box-shadow: var(--schwebe); transform: translate(-50%, calc(-100% - 10px));
  animation: tip-rein 160ms var(--aus);
}
.tooltip strong { display: block; font-family: var(--f-titel); font-size: 14px; margin-bottom: 6px; }
.tooltip div { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; }
.tooltip i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; }
.tooltip .trenn { border-top: 1px solid rgb(255 255 255 / 0.15); margin-top: 6px; padding-top: 6px; }
@keyframes tip-rein { from { opacity: 0; transform: translate(-50%, calc(-100% - 4px)); } }
.diagramm-leer { position: absolute; inset: 20px 0 30px 52px; display: grid; place-items: center; text-align: center; color: var(--grau); font-size: 14px; }

/* Kategorie-Balken (Finanzen) */
.kat-liste { display: grid; gap: 10px; }
.kat { display: grid; grid-template-columns: minmax(120px, 210px) 1fr auto; align-items: center; gap: 14px; font-size: 14px; }
.kat .spur { height: 10px; border-radius: 99px; background: #f0f4f8; overflow: hidden; }
.kat .spur div { height: 100%; border-radius: 99px; transform-origin: left; animation: balken-wachs 900ms var(--aus) calc(200ms + var(--i) * 40ms) backwards; }

/* ---------- Tabellen ---------- */
.tabelle-huelle { margin: 0 -22px -20px; overflow-x: auto; }
table.tabelle { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabelle th {
  text-align: left; font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grau);
  padding: 11px 22px; border-bottom: 1px solid var(--linie); white-space: nowrap; background: #fafcfd;
}
.tabelle td { padding: 13px 22px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr { transition: background-color 160ms; }
.tabelle tbody tr:hover { background: #f7fafc; }
.tabelle .r { text-align: right; white-space: nowrap; }
.tabelle tr.gestrichen td { color: var(--grau-2); text-decoration: line-through; }
.tabelle tr.niedrig { background: linear-gradient(90deg, var(--gelb-zart), transparent 70%); }
.tabelle tr.neu { animation: zeile-neu 2400ms var(--aus); }
@keyframes zeile-neu { 0% { background: rgb(63 178 238 / 0.28); } 100% { background: transparent; } }
.betrag { font-weight: 650; white-space: nowrap; }
.unter { display: block; font-size: 12.5px; color: var(--grau); margin-top: 2px; }

.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 650; background: #eef2f6; color: var(--text-2); white-space: nowrap; }
.chip.blau { background: var(--blau-zart); color: var(--blau-tief); }
.chip.gruen { background: var(--gruen-zart); color: var(--gruen); }
.chip.rot { background: var(--rot-zart); color: var(--rot); }
.chip.gelb { background: var(--gelb-zart); color: var(--gelb); }
.chip svg { width: 13px; height: 13px; }

/* ---------- Knöpfe & Eingaben ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px;
  border-radius: 99px; border: 0; background: #fff; color: var(--tinte); font-weight: 650; font-size: 14.5px; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgb(11 14 20 / 0.12); transition: transform 160ms var(--aus), background-color 200ms, box-shadow 200ms, color 200ms;
}
.knopf:hover { background: #f2f6f9; box-shadow: inset 0 0 0 1px rgb(11 14 20 / 0.2); }
.knopf:active { transform: scale(0.97); }
.knopf:disabled { opacity: 0.45; pointer-events: none; }
.knopf svg { width: 17px; height: 17px; }
.knopf.haupt { background: var(--blau); color: #fff; box-shadow: 0 1px 1px rgb(11 14 20 / 0.1), 0 10px 22px -12px rgb(10 116 176 / 0.8); }
.knopf.haupt:hover { background: var(--blau-tief); }
.knopf.tinte { background: var(--tinte); color: #fff; box-shadow: none; }
.knopf.tinte:hover { background: #1c2533; }
.knopf.gefahr { background: var(--rot); color: #fff; box-shadow: none; }
.knopf.gefahr:hover { background: #a42c23; }
.knopf.mit-well { padding: 0 4px 0 18px; gap: 12px; }
.knopf.mit-well .well { width: 34px; height: 34px; background: rgb(255 255 255 / 0.2); }
.knopf.klein { height: 32px; padding: 0 12px; font-size: 13px; gap: 6px; }
.knopf.klein svg { width: 15px; height: 15px; }
.knopf.icon { width: 32px; padding: 0; }
.knopf.geist { box-shadow: none; background: transparent; }
.knopf.geist:hover { background: #eef3f7; }
.knopfgruppe { display: inline-flex; gap: 4px; align-items: center; }

.feld { display: grid; gap: 6px; min-width: 0; }
.feld > span { font-size: 13px; font-weight: 650; color: var(--text-2); }
.feld small { color: var(--grau); font-size: 12.5px; }
input[type="text"], input[type="date"], input[type="time"], input[type="number"], input[type="password"], input[type="email"], input[type="search"], input[type="month"], select, textarea {
  width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--linie-2); border-radius: 13px; background: #fff;
  transition: border-color 160ms, box-shadow 160ms; font-size: 15px;
}
select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6774' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; }
textarea { height: auto; min-height: 84px; padding: 11px 14px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #7d8996; }
input:hover, select:hover, textarea:hover { border-color: #b4c1cd; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 4px rgb(10 116 176 / 0.14); }
.formular { display: grid; gap: 16px; }
.reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.haken { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.haken input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--blau); }
.umschalter { position: relative; display: inline-flex; background: #e9eef3; border-radius: 99px; padding: 4px; gap: 2px; isolation: isolate; }
.umschalter button { position: relative; border: 0; background: transparent; height: 36px; padding: 0 16px; border-radius: 99px; font-weight: 650; color: var(--grau); transition: color 200ms; }
.umschalter button.an { color: var(--tinte); }
.umschalter button.an.gruen { color: var(--gruen); }
.umschalter button.an.rot { color: var(--rot); }
.umschalter .linse { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 0; border-radius: 99px; background: #fff; box-shadow: 0 1px 3px rgb(11 14 20 / 0.14); transition: transform 380ms var(--feder), width 300ms var(--aus); }

/* ---------- Hinweise / Einrichtung ---------- */
.hinweise { display: grid; gap: 0; }
.aufgabe { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linie); }
.aufgabe:first-child { border-top: 0; }
.aufgabe .kreis { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--linie-2); color: #fff; }
.aufgabe.erledigt .kreis { background: var(--gruen); box-shadow: none; }
.aufgabe.erledigt .text { color: var(--grau); text-decoration: line-through; text-decoration-color: rgb(90 103 116 / 0.5); }
.aufgabe .kreis svg { width: 14px; height: 14px; }
.aufgabe.warn .kreis { box-shadow: inset 0 0 0 2px #d99a1e; }
.aufgabe.fehler .kreis { box-shadow: inset 0 0 0 2px var(--rot); }

.hinweis { display: flex; gap: 10px; align-items: flex-start; border-radius: 14px; padding: 12px 14px; background: var(--blau-zart); color: var(--blau-tief); font-size: 14px; }
.hinweis svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.hinweis.warn { background: var(--gelb-zart); color: var(--gelb); }
.hinweis.fehler { background: var(--rot-zart); color: var(--rot); }
.hinweis + .hinweis { margin-top: 8px; }

/* ---------- Leer & Laden ---------- */
.leer { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 34px 16px; color: var(--grau); }
.leer .logo-icon { width: 46px; height: 46px; color: var(--linie-2); }
.leer strong { color: var(--text); font-family: var(--f-titel); font-size: 17px; font-weight: 600; }
.leer p { max-width: 42ch; font-size: 14px; }
.nebel { min-height: 160px; background: linear-gradient(100deg, #f3f6f9 30%, #fbfcfd 45%, #f3f6f9 60%) 0 0 / 300% 100%; animation: nebel 1.4s linear infinite; }
@keyframes nebel { to { background-position: -150% 0; } }

/* ---------- Listen (Termine etc.) ---------- */
.liste { display: grid; }
.liste-eintrag { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linie); text-decoration: none; color: inherit; }
.liste-eintrag:first-child { border-top: 0; padding-top: 0; }
.datum-block { width: 46px; height: 50px; border-radius: 12px; background: var(--blau-zart); color: var(--blau-tief); display: grid; place-content: center; text-align: center; line-height: 1; }
.datum-block b { font-family: var(--f-titel); font-size: 19px; font-weight: 650; }
.datum-block small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 3px; }

/* ---------- Dialoge & Blätter ---------- */
.overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgb(11 14 20 / 0.42); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: ueberlagerung 220ms var(--aus); }
.overlay.zu { animation: ueberlagerung 170ms ease-in reverse forwards; }
@keyframes ueberlagerung { from { opacity: 0; } }
.dialog {
  position: relative; width: min(580px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: #fff; border-radius: 26px; padding: 26px;
  box-shadow: 0 0 0 6px rgb(255 255 255 / 0.18), 0 40px 90px -30px rgb(0 0 0 / 0.55); animation: dialog-rein 320ms var(--aus);
}
.overlay.zu .dialog { animation: dialog-raus 170ms ease-in forwards; }
.dialog.breit { width: min(880px, 100%); }
@keyframes dialog-rein { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes dialog-raus { to { opacity: 0; transform: translateY(8px) scale(0.98); } }
.dialog-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.dialog-kopf h2 { font-size: 22px; letter-spacing: -0.025em; }
.dialog-kopf p { color: var(--grau); font-size: 14px; margin-top: 4px; }
.dialog-fuss { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.griff { display: none; }

.menue { position: absolute; z-index: 30; min-width: 230px; padding: 6px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgb(11 14 20 / 0.06), var(--schwebe); animation: dialog-rein 220ms var(--aus); }
.menue button, .menue a { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font-weight: 600; text-decoration: none; text-align: left; }
.menue button:hover, .menue a:hover { background: #f0f5f9; }
.menue svg { width: 18px; height: 18px; color: var(--blau); }
.menue small { display: block; color: var(--grau); font-weight: 500; font-size: 12.5px; }

/* Meldungen */
.meldungen { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 80; width: max-content; max-width: calc(100vw - 32px); }
.meldung { display: flex; align-items: center; gap: 12px; background: var(--tinte); color: #fff; padding: 10px 10px 10px 16px; border-radius: 99px; box-shadow: var(--schwebe); font-size: 14px; font-weight: 550; animation: meldung-rein 380ms var(--feder); }
.meldung.weg { animation: meldung-raus 200ms ease-in forwards; }
.meldung.fehler { background: var(--rot); }
.meldung svg { width: 18px; height: 18px; flex: none; color: var(--hellblau); }
.meldung.fehler svg { color: #fff; }
.meldung a, .meldung button { margin-left: 4px; height: 30px; padding: 0 12px; border-radius: 99px; border: 0; background: rgb(255 255 255 / 0.14); color: #fff; font-weight: 650; font-size: 13px; display: inline-flex; align-items: center; text-decoration: none; }
.meldung:not(:has(a, button)) { padding-right: 16px; }
@keyframes meldung-rein { from { opacity: 0; transform: translateY(16px) scale(0.96); } }
@keyframes meldung-raus { to { opacity: 0; transform: translateY(8px) scale(0.98); } }

.verbindung { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-radius: 99px; background: var(--rot); color: #fff; font-weight: 600; font-size: 14px; box-shadow: var(--schwebe); animation: meldung-rein 300ms var(--aus); }

/* ---------- Telegram-Einrichtung ---------- */
.code { font-family: var(--f-mono); font-size: 15px; font-weight: 600; letter-spacing: 0.08em; background: var(--blau-zart); color: var(--blau-tief); padding: 3px 10px; border-radius: 8px; white-space: nowrap; }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.schritte li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--linie); }
.schritte li:first-child { border-top: 0; padding-top: 2px; }
.schritte li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--blau-zart); color: var(--blau); font-weight: 700; font-family: var(--f-titel); font-size: 14px; }
.schritte li.ok::before { content: ""; background: var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; }
kbd { font-family: var(--f-mono); font-size: 12.5px; background: #eef2f6; border: 1px solid var(--linie); border-radius: 7px; padding: 1px 7px; }

/* Rechnungs-Positionen */
.positionen { width: 100%; border-collapse: collapse; }
.positionen th { font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grau); text-align: left; padding: 0 6px 8px; }
.positionen td { padding: 6px; vertical-align: middle; }
.positionen input, .positionen select { height: 40px; }
.summenblock { margin: 16px 0 0 auto; width: min(340px, 100%); display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
.summenblock div { display: flex; justify-content: space-between; }
.summenblock .gesamt { border-top: 1.5px solid var(--tinte); padding-top: 8px; font-family: var(--f-titel); font-weight: 650; font-size: 20px; }

.mitarbeiter-wahl { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Startanimation ---------- */
.start {
  position: fixed; inset: 0; z-index: 100; overflow: hidden; background: var(--tinte); color: #fff; cursor: pointer;
  animation: start-fenster 760ms var(--inaus) var(--wisch, 1750ms) forwards;
}
.start-inhalt { position: absolute; inset: 0; display: grid; place-items: center; animation: start-gegen 760ms var(--inaus) var(--wisch, 1750ms) forwards; }
.start .linien { position: absolute; inset: -6%; color: var(--hellblau); opacity: 0.5; }
.start-marke { position: relative; width: min(620px, 82vw); display: grid; justify-items: end; gap: 6px; }
.start-marke .wortmarke { width: 100%; height: auto; overflow: visible; }
.start-marke .buero { font-family: var(--f-akzent); font-style: italic; font-size: clamp(26px, 3.6vw, 40px); color: var(--hellblau); line-height: 1; margin-right: 4%; opacity: 0; animation: buero-rein 600ms var(--aus) 1250ms forwards; }
@keyframes buero-rein { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
/* Abzieher-Gummi: eine nasse Kante, die vor dem Wisch hergeht (Verlauf statt Leuchtschatten) */
.start-blatt { position: absolute; top: -10%; bottom: -10%; left: 0; width: 72px; transform: translateX(-72px); background: linear-gradient(90deg, rgb(244 247 250 / 0) 0%, rgb(244 247 250 / 0.18) 55%, rgb(255 255 255 / 0.85) 86%, #fff 90%, #0b0e14 90%, #0b0e14 100%); animation: start-blatt 760ms var(--inaus) var(--wisch, 1750ms) forwards; }
@keyframes start-fenster { to { transform: translateX(100%); visibility: hidden; } }
@keyframes start-gegen { to { transform: translateX(-100%); } }
@keyframes start-blatt { from { transform: translateX(-72px); } 99% { opacity: 1; } to { transform: translateX(100vw); opacity: 0; } }
.start-tipp { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; font-size: 12.5px; color: rgb(255 255 255 / 0.4); opacity: 0; animation: buero-rein 500ms var(--aus) 600ms forwards; }

/* Wortmarke zeichnet sich: Lanze, Strahl, Buchstaben, dann fällt der Tropfen als i-Punkt */
.wortmarke.zeichnet .strich { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: strich-zeichnen 620ms var(--aus) forwards; }
.wortmarke.zeichnet .lanze { animation-delay: calc(var(--i) * 70ms); animation-duration: 520ms; }
.wortmarke.zeichnet .buchstabe { animation-delay: calc(330ms + var(--i) * 65ms); }
@keyframes strich-zeichnen { 0% { opacity: 0; stroke-dashoffset: 1; } 1% { opacity: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } }
.wortmarke.zeichnet .strahl path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: strahl 520ms var(--aus) calc(520ms + var(--i) * 40ms) forwards; }
@keyframes strahl { 0% { stroke-dashoffset: 1; opacity: 0; } 10% { opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 0; } }
.wortmarke.zeichnet .duesen-tropfen { opacity: 0; animation: tropfen-blink 420ms var(--aus) 1480ms forwards; transform-box: fill-box; transform-origin: center; }
@keyframes tropfen-blink { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
.wortmarke.zeichnet .i-tropfen { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: tropfen-fall 640ms linear 900ms forwards; }
@keyframes tropfen-fall {
  0% { opacity: 1; transform: translateY(-110%) scale(0.36); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.5); }
  58% { opacity: 1; transform: translateY(0) scale(0.92, 1.08); animation-timing-function: var(--aus); }
  72% { transform: translateY(0) scale(1.22, 0.8); }
  86% { transform: translateY(0) scale(0.95, 1.05); }
  100% { opacity: 1; transform: none; }
}

/* ---------- Tablet: schmale Leiste ---------- */
@media (max-width: 1180px) {
  :root { --leiste: 84px; }
  .leiste { padding: 18px 12px 14px; align-items: stretch; }
  .leiste-logo { padding: 2px 0 14px; display: grid; justify-items: center; }
  .leiste-logo .wortmarke, .leiste-logo small { display: none; }
  .leiste-logo .logo-icon { display: block; }
  .neu-knopf { justify-content: center; padding: 0; margin: 0 0 12px; height: 48px; background: transparent; }
  .neu-knopf .text { display: none; }
  .nav { justify-content: center; padding: 0; }
  .nav .text { position: absolute; left: calc(100% + 14px); top: 50%; transform: translate(-6px, -50%); opacity: 0; pointer-events: none; white-space: nowrap; background: var(--tinte); color: #fff; padding: 6px 10px; border-radius: 9px; font-size: 13px; box-shadow: var(--schwebe); transition: opacity 160ms, transform 200ms var(--aus); }
  .nav:hover .text, .nav:focus-visible .text { opacity: 1; transform: translate(0, -50%); }
  .nav .zaehler { position: absolute; top: 4px; right: 8px; min-width: 18px; height: 16px; font-size: 10px; padding: 0 4px; }
  .leiste { overflow: visible; }
  .leiste .linien { display: none; }
  .bot-karte { justify-content: center; padding: 12px 0; }
  .bot-karte > div { display: none; }
  .tabelle .tablet-weg { display: none; }
  .s8, .s7 { grid-column: span 12; }
  .s4.seitlich, .s5.seitlich { grid-column: span 12; }
}

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .app { grid-template-columns: 1fr; }
  .leiste { display: none; }
  .inhalt { padding: 18px 16px calc(118px + env(safe-area-inset-bottom)); }
  .kopf-mobil {
    position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: rgb(244 247 250 / 0.82); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid rgb(11 14 20 / 0.06);
  }
  .kopf-mobil a { display: flex; align-items: center; gap: 10px; color: var(--tinte); text-decoration: none; font-family: var(--f-titel); font-weight: 650; font-size: 17px; }
  .kopf-mobil .logo-icon { width: 34px; height: 34px; }
  .kopf-mobil .bot-mini { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--grau); font-weight: 600; text-decoration: none; }
  .tab-insel {
    position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    height: 66px; padding: 6px; border-radius: 26px; background: rgb(11 14 20 / 0.92); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06) inset, 0 20px 40px -16px rgb(0 0 0 / 0.55); isolation: isolate;
  }
  .tab { position: relative; display: grid; justify-items: center; gap: 3px; padding-top: 2px; color: #9aa7b4; text-decoration: none; font-size: 10.5px; font-weight: 650; border: 0; background: none; height: 54px; align-content: center; }
  .tab svg { width: 21px; height: 21px; }
  .tab.aktiv { color: #fff; }
  .tab.aktiv svg { color: var(--hellblau); }
  .tab-linse { position: absolute; z-index: -1; top: 6px; bottom: 6px; left: 0; border-radius: 20px; background: rgb(255 255 255 / 0.1); box-shadow: inset 1px 1px 1px -0.5px rgb(255 255 255 / 0.3); transition: transform 460ms var(--feder), opacity 200ms; }
  .tab-plus { justify-self: center; width: 54px; height: 54px; border-radius: 19px; border: 0; background: var(--blau); color: #fff; display: grid; place-items: center; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 6px 14px -6px rgb(0 0 0 / 0.6); transition: transform 160ms var(--aus); }
  .tab-plus:active { transform: scale(0.92); }
  .tab-plus svg { width: 26px; height: 26px; transition: transform 300ms var(--aus); }
  .tab-plus.offen svg { transform: rotate(45deg); }
  .meldungen { bottom: calc(92px + env(safe-area-inset-bottom)); }

  .raster { gap: 14px; }
  .raster + .raster, .raster + .scheibe, .scheibe + .scheibe, .scheibe + .raster, .hinweise + .raster, .hinweise + .scheibe { margin-top: 14px; }
  .raster > [class*="s"] { grid-column: span 12; }
  .scheibe { padding: 18px 16px; border-radius: 18px; }
  .tabelle-huelle { margin: 0 -16px -18px; }
  .kopfzeile { margin-bottom: 18px; }
  .kopfzeile .aktionen { width: 100%; }
  .kopfzeile .aktionen > * { flex: 1 1 auto; }
  .kat { grid-template-columns: 1fr auto; }
  .kat .spur { grid-column: 1 / -1; grid-row: 2; }

  /* Tabellen werden zu Karten-Zeilen */
  .tabelle.stapel thead { display: none; }
  .tabelle.stapel, .tabelle.stapel tbody { display: block; width: 100%; }
  .tabelle.stapel tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--linie); }
  .tabelle.stapel td.haupt { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
  .tabelle.stapel tbody tr:last-child { border-bottom: 0; }
  .tabelle.stapel td { display: block; padding: 0; border: 0; }
  .tabelle.stapel td.haupt { grid-column: 1; order: 1; }
  .tabelle.stapel td.r, .tabelle.stapel td.ende { grid-column: 2; order: 2; text-align: right; }
  .tabelle.stapel td.neben { grid-column: 1 / -1; order: 3; font-size: 13px; color: var(--grau); }
  .tabelle.stapel td.neben[data-l]::before { content: attr(data-l) ": "; font-weight: 600; }
  .tabelle.stapel td.aktion { grid-column: 1 / -1; order: 4; display: flex; justify-content: flex-end; margin-top: 6px; }
  .tabelle.stapel td.verstecken-mobil { display: none; }

  /* Dialoge werden Blätter von unten */
  .overlay { place-items: end stretch; padding: 0; }
  .dialog, .dialog.breit { width: 100%; max-height: 92vh; border-radius: 26px 26px 0 0; padding: 12px 18px calc(22px + env(safe-area-inset-bottom)); animation: blatt-rein 360ms var(--aus); }
  .overlay.zu .dialog { animation: blatt-raus 200ms ease-in forwards; }
  .griff { display: block; width: 42px; height: 5px; border-radius: 99px; background: var(--linie-2); margin: 0 auto 14px; }
  .dialog-fuss { position: sticky; bottom: calc(-22px - env(safe-area-inset-bottom)); background: #fff; margin: 18px -18px 0; padding: 12px 18px 0; }
  .dialog-fuss > * { flex: 1; }
  .menue { position: fixed; left: 12px; right: 12px; bottom: calc(90px + env(safe-area-inset-bottom)); }
}
@keyframes blatt-rein { from { transform: translateY(100%); } }
@keyframes blatt-raus { to { transform: translateY(100%); } }

/* ---------- Druck ---------- */
@media print {
  .leiste, .kopf-mobil, .tab-insel, .meldungen { display: none !important; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .beschlag { display: none; }
  .puls.an::after { display: none; }
  .start { animation: start-sanft 400ms ease 900ms forwards !important; }
  .start-inhalt, .start-blatt { animation: none !important; }
  .start-blatt { display: none; }
  .wortmarke.zeichnet .strich, .wortmarke.zeichnet .i-tropfen, .wortmarke.zeichnet .duesen-tropfen, .start-marke .buero { opacity: 1 !important; stroke-dashoffset: 0 !important; transform: none !important; animation: none !important; }
  .wortmarke.zeichnet .strahl { display: none; }
  @keyframes start-sanft { to { opacity: 0; visibility: hidden; } }
}
.linien { pointer-events: none; overflow: hidden; }
.linien-lage { position: absolute; inset: -6%; opacity: 0.8; }
.linien-lage svg { width: 100%; height: 100%; }
.linien-a { animation: linien-a 13s ease-in-out infinite alternate, linien-atmen 9s ease-in-out infinite; }
.linien-b { animation: linien-b 17s ease-in-out infinite alternate, linien-atmen 11s ease-in-out -4s infinite; }
@keyframes linien-a { from { transform: translate3d(-2.5%, 2%, 0) rotate(-1deg); } to { transform: translate3d(2.5%, -2%, 0) rotate(1deg); } }
@keyframes linien-b { from { transform: translate3d(2.5%, -1.5%, 0) rotate(1deg); } to { transform: translate3d(-2.5%, 1.5%, 0) rotate(-1deg); } }
@keyframes linien-atmen { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* ---------- Fotos im Inventar ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.inv-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.inv-name > div { min-width: 0; }
.inv-foto { position: relative; flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--papier); box-shadow: 0 0 0 1px rgb(11 14 20 / 0.08); cursor: zoom-in; }
.inv-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--aus); }
.inv-foto:hover img { transform: scale(1.1); }
.inv-foto .anzahl { position: absolute; right: 3px; bottom: 3px; min-width: 16px; padding: 1px 4px; border-radius: 6px; background: rgb(11 14 20 / 0.72); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 14px; text-align: center; }
.inv-foto.leer { display: grid; place-items: center; color: var(--grau); background: transparent; box-shadow: none; border: 1.5px dashed rgb(11 14 20 / 0.18); cursor: pointer; transition: color 200ms, border-color 200ms, background 200ms; }
.inv-foto.leer svg { width: 19px; height: 19px; }
.inv-foto.leer:hover { color: var(--blau); border-color: var(--blau); background: var(--blau-zart); }

.foto-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.foto-kachel, .foto-neu { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; }
.foto-kachel { background: var(--papier); box-shadow: 0 0 0 1px rgb(11 14 20 / 0.08); animation: foto-rein 380ms var(--feder) backwards; }
.foto-kachel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-auf { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.foto-auf img { transition: transform 420ms var(--aus); }
.foto-auf:hover img { transform: scale(1.06); }
.foto-weg { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgb(11 14 20 / 0.62); color: #fff; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background 160ms, transform 160ms var(--feder); }
.foto-weg svg { width: 15px; height: 15px; }
.foto-weg:hover { background: var(--rot); transform: scale(1.08); }
.foto-titel { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 7px; background: rgb(255 255 255 / 0.92); color: var(--tinte); font-size: 11px; font-weight: 650; }
.foto-neu { display: grid; place-content: center; justify-items: center; gap: 4px; border: 1.5px dashed rgb(11 14 20 / 0.2); color: var(--grau); font-size: 13px; font-weight: 600; cursor: pointer; transition: color 200ms, border-color 200ms, background 200ms; }
.foto-neu svg { width: 24px; height: 24px; }
.foto-neu:hover { color: var(--blau); border-color: var(--blau); background: var(--blau-zart); }
.foto-neu.arbeitet { pointer-events: none; color: var(--blau); }
.foto-neu.arbeitet svg { animation: foto-puls 900ms ease-in-out infinite; }
@keyframes foto-rein { from { opacity: 0; transform: scale(0.86); } }
@keyframes foto-puls { 50% { transform: scale(0.84); opacity: 0.55; } }

.lichtbox { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 64px 16px 24px; background: rgb(11 14 20 / 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: ueberlagerung 220ms var(--aus); }
.lichtbox.weg { opacity: 0; transition: opacity 180ms; }
.lichtbox img { max-width: min(1100px, 100%); max-height: calc(100dvh - 110px); object-fit: contain; border-radius: 14px; box-shadow: 0 30px 80px rgb(0 0 0 / 0.5); animation: foto-gross 340ms var(--aus); }
.lichtbox-kopf { position: absolute; top: 12px; left: 18px; right: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #fff; font-weight: 600; }
.lichtbox-kopf .knopf { color: #fff; }
.lichtbox-pfeil { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.12); color: #fff; cursor: pointer; transition: background 160ms; }
.lichtbox-pfeil:hover { background: rgb(255 255 255 / 0.24); }
.lichtbox-pfeil svg { width: 24px; height: 24px; }
.lichtbox-pfeil.links { left: 14px; }
.lichtbox-pfeil.rechts { right: 14px; }
@keyframes foto-gross { from { opacity: 0; transform: scale(0.94); } }
@media (prefers-reduced-motion: reduce) { .foto-kachel, .lichtbox img { animation: none; } }

/* ---------- Anmeldung & Zugänge ---------- */
.app-laedt { min-height: 100dvh; background: var(--tinte); }
.anmelden { position: relative; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); background: var(--tinte); overflow: hidden; }
.anmelden .linien { position: absolute; inset: 0; color: var(--hellblau); opacity: 0.55; }
.anmelde-karte { position: relative; width: min(420px, 100%); display: grid; gap: 16px; padding: 30px 28px 26px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 8px rgb(255 255 255 / 0.08), 0 40px 100px -30px rgb(0 0 0 / 0.7); animation: dialog-rein 560ms var(--aus) 80ms backwards; }
.anmelde-marke { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 4px; }
.anmelde-marke .wortmarke { width: 200px; height: auto; }
.anmelde-marke .buero { font-family: var(--f-akzent); font-style: italic; color: var(--blau); font-size: 30px; line-height: 0.8; }
.anmelde-karte h1 { font-family: var(--f-titel); font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.anmelde-karte h1 .akzent { font-family: var(--f-akzent); font-style: italic; font-weight: 400; color: var(--blau); font-size: 1.08em; }
.anmelde-karte input { height: 48px; font-size: 16px; } /* 16 px: iPhone zoomt nicht ins Feld */
.anmelde-karte .knopf.haupt { justify-content: center; height: 50px; font-size: 16px; }
.anmelde-karte .klein { text-align: center; }

.ich-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; background: var(--papier); }
.ich-zeile > div:first-child { display: grid; gap: 2px; min-width: 0; }
.ich-zeile strong { font-size: 16px; }
.tabelle tr.gesperrt td { opacity: 0.5; }
.passwort-box { display: grid; gap: 10px; padding: 18px; border-radius: 18px; background: var(--tinte); color: #fff; }
.passwort-box > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.passwort-box span { color: rgb(255 255 255 / 0.6); font-size: 13px; font-weight: 600; }
.passwort-box strong { font-size: 18px; letter-spacing: 0.01em; }
.passwort-box .mono { font-family: var(--f-mono); font-size: 20px; color: var(--hellblau); user-select: all; }