/* =========================================================================
   Opa · Buchhaltung
   Farben aus dem Opa-Icon: Petrol #036E74, Senfgold #C38A0E, warmes Papier.
   Alles in rem — damit die Schriftgrößen-Wahl die ganze Oberfläche mitnimmt.
   ========================================================================= */

:root {
  --papier:        #FBF8F3;
  --karte:         #FFFFFF;
  --tinte:         #16211F;
  --gedaempft:     #52656A;
  --marke:         #036E74;
  --marke-dunkel:  #02565B;
  --marke-blass:   #E6F1F1;
  --gold:          #C38A0E;
  --gold-tinte:    #77520A;
  --gold-blass:    #FBF1DC;
  --gruen:         #15604A;
  --gruen-blass:   #E4F0EB;
  --gefahr:        #A32A20;
  --gefahr-blass:  #FAE9E7;
  --linie:         #E6DFD4;
  --linie-stark:   #D2C9BA;

  --r-klein: 8px;
  --r-mittel: 14px;
  --r-gross: 20px;

  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 2.75rem;

  --schatten-1: 0 1px 2px rgba(3,60,64,.06), 0 2px 8px rgba(3,60,64,.05);
  --schatten-2: 0 2px 4px rgba(3,60,64,.07), 0 10px 28px rgba(3,60,64,.10);
  --schatten-3: 0 4px 8px rgba(3,60,64,.10), 0 24px 60px rgba(3,60,64,.18);

  --bogen: cubic-bezier(.16,1,.3,1);
  --fs: 1;
  --tipp: 48px;                 /* kleinste Fläche zum Antippen */
}

html[data-schrift="gross"]    { --fs: 1.14; }
html[data-schrift="groesser"] { --fs: 1.30; }
html[data-schrift="riesig"]   { --fs: 1.50; }

* { box-sizing: border-box; }

html {
  /* 106.25 % der Browser-Grundgröße = 17 px, mal der gewählten Stufe */
  font-size: calc(106.25% * var(--fs));
  background: var(--papier);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Atkinson', system-ui, sans-serif;
  color: var(--tinte);
  background: var(--papier);
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* --- Browser-Oberflächen, die sonst niemandem gehören --- */
::selection { background: var(--marke); color: #fff; }
input, textarea, select { caret-color: var(--marke); }
:focus-visible {
  outline: 3px solid var(--marke);
  outline-offset: 2px;
  border-radius: 4px;
}
* { scrollbar-color: var(--linie-stark) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--linie-stark); border-radius: 99px;
  border: 3px solid var(--papier);
}
::-webkit-scrollbar-thumb:hover { background: var(--gedaempft); }
a { color: var(--marke-dunkel); text-underline-offset: 3px; }

.sprite { display: none; }

.ikon {
  width: 1.35em; height: 1.35em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ikon--klein { width: 1.05em; height: 1.05em; }

/* ======================================================== Kopfzeile */

.kopf {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.4);
  border-bottom: 1px solid var(--linie);
  padding-top: env(safe-area-inset-top);
}
.kopf__innen {
  max-width: 44rem; margin: 0 auto;
  padding: var(--s2) var(--s4);
  display: flex; align-items: center; gap: var(--s3);
}
.kopf__marke {
  display: flex; align-items: center; gap: var(--s3);
  text-decoration: none; color: inherit; margin-right: auto;
  min-height: var(--tipp);
}
.kopf__marke img {
  width: 2.35rem; height: 2.35rem; border-radius: 22%;
  box-shadow: var(--schatten-1);
}
.kopf__titel {
  display: flex; flex-direction: column; line-height: 1.1;
  font-weight: 700; font-size: 1.15rem; letter-spacing: -.015em;
}
.kopf__titel em {
  font-style: normal; font-weight: 400;
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gedaempft);
}
.kopf__werkzeuge { display: flex; align-items: center; gap: var(--s2); }
.schriftwahl {
  display: flex; gap: 2px; padding: 3px;
  background: var(--marke-blass); border-radius: 99px;
}
.schriftwahl .knopf--rund { width: 2.6rem; height: 2.6rem; background: transparent; border-color: transparent; }
.schriftwahl .knopf--rund:hover { background: #fff; }
.schriftwahl .minus, .schriftwahl .plus {
  font-weight: 700; font-size: .8em; margin-left: -.15em; line-height: 1;
}

/* ======================================================== Bausteine */

.knopf {
  --k-bg: var(--karte); --k-tinte: var(--tinte); --k-rand: var(--linie-stark);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: var(--tipp); padding: var(--s2) var(--s4);
  font: inherit; font-weight: 700; line-height: 1.2;
  color: var(--k-tinte); background: var(--k-bg);
  border: 1.5px solid var(--k-rand); border-radius: var(--r-mittel);
  cursor: pointer; text-decoration: none;
  transition: transform .18s var(--bogen), box-shadow .18s var(--bogen),
              background-color .18s ease, border-color .18s ease;
}
.knopf:hover { box-shadow: var(--schatten-2); transform: translateY(-1px); }
.knopf:active { transform: translateY(0); box-shadow: var(--schatten-1); }
.knopf[disabled], .knopf[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}
.knopf--haupt { --k-bg: var(--marke); --k-tinte: #fff; --k-rand: var(--marke); }
.knopf--haupt:hover { --k-bg: var(--marke-dunkel); }
.knopf--still { --k-bg: var(--karte); --k-tinte: var(--marke-dunkel); }
.knopf--still:hover { --k-bg: var(--marke-blass); --k-rand: var(--marke); }
.knopf--gefahr { --k-bg: var(--gefahr); --k-tinte: #fff; --k-rand: var(--gefahr); }
.knopf--breit { width: 100%; }
.knopf--gross { font-size: 1.1rem; min-height: 3.6rem; border-radius: var(--r-gross); }
.knopf--klein { min-height: 2.6rem; padding: var(--s1) var(--s3); font-size: .9rem; border-radius: var(--r-klein); }
.knopf--rund {
  width: 2.85rem; height: 2.85rem; min-height: 0; padding: 0;
  border-radius: 99px; position: relative;
}
.knopf--lade { color: transparent !important; pointer-events: none; position: relative; }
.knopf--lade::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 1.2rem; height: 1.2rem; border-radius: 99px;
  border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff;
  animation: dreh .7s linear infinite;
}
.knopf--still.knopf--lade::after { border-color: rgba(3,110,116,.3); border-top-color: var(--marke); }
@keyframes dreh { to { transform: rotate(360deg); } }

#haupt {
  max-width: 44rem; margin: 0 auto;
  padding: var(--s5) var(--s4) calc(var(--s7) + env(safe-area-inset-bottom));
}

.zurueck {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--tipp); padding: var(--s2) var(--s3) var(--s2) var(--s2);
  margin-bottom: var(--s3); margin-left: calc(var(--s2) * -1);
  font: inherit; font-weight: 700; color: var(--marke-dunkel);
  background: none; border: 0; border-radius: var(--r-klein); cursor: pointer;
}
.zurueck:hover { background: var(--marke-blass); }

h1, h2, h3 { letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: 1.3rem; margin: 0; }

/* ======================================================== Summen */

.summen {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s2) var(--s4);
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s4);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  box-shadow: var(--schatten-1);
}
.summe__name {
  display: block; font-size: .8rem; font-weight: 700;
  letter-spacing: .045em; text-transform: uppercase; color: var(--gedaempft);
  margin-bottom: var(--s1);
}
.summe__wert {
  display: block; font-size: 1.3rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
  line-height: 1.15;
}
.summe--saldo .summe__wert    { color: var(--marke); font-size: 1.55rem; }
.summe--saldo.ist-plus  .summe__wert { color: var(--gruen); }
.summe--saldo.ist-minus .summe__wert { color: var(--gefahr); }
.summe--ein .summe__wert      { color: var(--gruen); }
.summe--aus .summe__wert      { color: var(--tinte); }
.summen__hinweis {
  grid-column: 1 / -1; margin-top: var(--s1); padding-top: var(--s3);
  border-top: 1px solid var(--linie);
  font-size: .88rem; color: var(--gold-tinte); font-weight: 700;
}
.summe__zusatz { display: block; font-size: .78rem; color: var(--gedaempft); }
@media (max-width: 27rem) {
  .summen { grid-template-columns: 1fr 1fr; padding: var(--s4); }
  .summen .summe--saldo { grid-column: 1 / -1; padding-bottom: var(--s3); border-bottom: 1px solid var(--linie); }
}

#knopf-neu { margin-bottom: var(--s4); }

/* ======================================================== Filter */

.filter {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--r-mittel); margin-bottom: var(--s5);
  box-shadow: var(--schatten-1); overflow: hidden;
}
.filter__kopf {
  display: flex; align-items: center; gap: var(--s3);
  min-height: var(--tipp); padding: var(--s2) var(--s4);
  font-weight: 700; cursor: pointer; list-style: none; color: var(--marke-dunkel);
}
.filter__kopf::-webkit-details-marker { display: none; }
.filter__kopf:hover { background: var(--marke-blass); }
.filter__pfeil { margin-left: auto; transition: transform .25s var(--bogen); }
.filter[open] .filter__pfeil { transform: rotate(180deg); }
.filter__anzahl {
  font-size: .8rem; font-weight: 700; color: #fff; background: var(--marke);
  padding: .1em .6em; border-radius: 99px;
}
.filter__inhalt {
  display: grid; gap: var(--s4);
  padding: var(--s2) var(--s4) var(--s4);
  border-top: 1px solid var(--linie);
}
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.schnellwahl { display: flex; flex-wrap: wrap; gap: var(--s2); }
.marke {
  min-height: 2.6rem; padding: var(--s1) var(--s3);
  font: inherit; font-size: .92rem; font-weight: 700;
  color: var(--marke-dunkel); background: var(--marke-blass);
  border: 1.5px solid transparent; border-radius: 99px; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.marke:hover { border-color: var(--marke); }
.marke[aria-pressed="true"] { background: var(--marke); color: #fff; }

/* ======================================================== Felder */

.feld { display: block; }
.feld__name {
  display: flex; align-items: baseline; gap: var(--s2);
  font-size: .88rem; font-weight: 700; color: var(--gedaempft);
  margin-bottom: var(--s1);
}
.feld__name em {
  font-style: normal; font-weight: 400; font-size: .82rem;
  color: var(--gedaempft); opacity: .8;
}
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: var(--tipp);
  padding: var(--s2) var(--s3);
  font: inherit; color: var(--tinte); background: var(--karte);
  border: 1.5px solid var(--linie-stark); border-radius: var(--r-klein);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.feld textarea { min-height: 5.5rem; resize: vertical; line-height: 1.45; }
.feld input::placeholder, .feld textarea::placeholder { color: #7B8A8D; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--gedaempft); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--marke);
  box-shadow: 0 0 0 3px var(--marke-blass);
}
.feld select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352656A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s3) center;
  background-size: 1.25rem; padding-right: 2.6rem;
}
.feld__mit-ikon { position: relative; display: block; }
.feld__mit-ikon > .ikon {
  position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%);
  color: var(--gedaempft); pointer-events: none;
}
.feld__mit-ikon > .ikon ~ input { padding-left: 2.9rem; }
.feld__einheit {
  position: absolute; right: var(--s3); top: 50%; transform: translateY(-50%);
  font-weight: 700; color: var(--gedaempft); pointer-events: none;
}
.feld__mit-ikon--rechts input { padding-right: 2.2rem; }
.feld__fehler { display: none; margin-top: var(--s1); font-size: .88rem; font-weight: 700; color: var(--gefahr); }
.feld--falsch input, .feld--falsch textarea, .feld--falsch select { border-color: var(--gefahr); }
.feld--falsch input:focus, .feld--falsch textarea:focus { box-shadow: 0 0 0 3px var(--gefahr-blass); }
.feld--falsch .feld__fehler { display: block; }

#formular { display: grid; gap: var(--s4); }
.formular__knoepfe {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s3);
  margin-top: var(--s2);
}
@media (max-width: 26rem) { .formular__knoepfe { grid-template-columns: 1fr; } }
.feld__hinweis {
  display: block; margin-top: var(--s1);
  font-size: .88rem; color: var(--gedaempft);
}

/* ======================================================== Liste */

.liste__kopf {
  display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap; margin-bottom: var(--s3);
}
.liste__kopf h2 { margin-right: auto; }
.ausgabe-knoepfe { display: flex; gap: var(--s2); }
.liste { display: grid; gap: var(--s3); }

.eintrag {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s1) var(--s4);
  width: 100%; text-align: left;
  padding: var(--s4);
  font: inherit; color: inherit;
  background: var(--karte);
  border: 1px solid var(--linie); border-left: 4px solid var(--marke);
  border-radius: var(--r-mittel);
  box-shadow: var(--schatten-1);
  cursor: pointer;
  transition: transform .2s var(--bogen), box-shadow .2s var(--bogen), border-color .2s ease;
  animation: auftauchen .42s var(--bogen) both;
}
.eintrag:hover { transform: translateY(-2px); box-shadow: var(--schatten-2); }
.eintrag--gefordert { border-left-color: var(--gold); }
.eintrag--gebucht   { border-left-color: var(--gruen); }
.eintrag--einnahme  { border-left-color: var(--gruen); background: linear-gradient(90deg, var(--gruen-blass) 0 6px, var(--karte) 6px); }
.eintrag--einnahme .eintrag__summe { color: var(--gruen); }
@keyframes auftauchen { from { opacity: 0; transform: translateY(10px); } }

html[data-schrift="groesser"] .eintrag,
html[data-schrift="riesig"] .eintrag { grid-template-columns: 1fr; }
html[data-schrift="groesser"] .eintrag__summe,
html[data-schrift="riesig"] .eintrag__summe {
  grid-column: 1; grid-row: 2; text-align: left; margin-top: var(--s1);
}
html[data-schrift="groesser"] .eintrag__unten,
html[data-schrift="riesig"] .eintrag__unten { grid-row: 3; flex-wrap: wrap; }
html[data-schrift="groesser"] .eintrag__firma,
html[data-schrift="riesig"] .eintrag__firma { white-space: normal; overflow: visible; }
html[data-schrift="groesser"] .eintrag__produkt,
html[data-schrift="riesig"] .eintrag__produkt { -webkit-line-clamp: 3; }

.eintrag__produkt {
  grid-column: 1; grid-row: 1;
  font-size: 1.08rem; font-weight: 700; letter-spacing: -.015em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.eintrag__summe {
  grid-column: 2; grid-row: 1 / span 2; align-self: start;
  font-size: 1.22rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
  white-space: nowrap; text-align: right; color: var(--marke);
}
.eintrag__unten {
  grid-column: 1; grid-row: 2; display: flex; align-items: center;
  gap: var(--s2) var(--s3); flex-wrap: wrap; min-width: 0;
  font-size: .92rem; color: var(--gedaempft);
}
/* Firma und Datum bleiben beieinander — sonst hängt das "·" am Zeilenende.
   Gekürzt wird nur die Firma, und nur wenn das Paar sonst nicht passt. */
.eintrag__wer {
  display: flex; align-items: center; gap: var(--s2);
  flex: 1 1 11rem; min-width: 0;
}
.eintrag__datum { flex: none; white-space: nowrap; }
.eintrag__unten > .abzeichen, .eintrag__unten > .eintrag__belege { flex: none; }
.eintrag__firma {
  font-weight: 700; color: var(--tinte);
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eintrag__punkt { opacity: .45; }
.eintrag__belege { display: inline-flex; align-items: center; gap: .25em; }

.abzeichen {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .15em .6em .2em;
  font-size: .82rem; font-weight: 700; border-radius: 99px;
  white-space: nowrap;
}
.abzeichen .ikon { width: 1.1em; height: 1.1em; stroke-width: 2.4; }
.abzeichen--offen     { color: var(--gedaempft); background: #F0EDE6; }
.abzeichen--gefordert { color: var(--gold-tinte); background: var(--gold-blass); }
.abzeichen--gebucht   { color: var(--gruen); background: var(--gruen-blass); }
.abzeichen--einnahme  { color: var(--gruen); background: var(--gruen-blass); }

/* ======================================================== Leerzustände */

.leer {
  text-align: center; padding: var(--s7) var(--s4);
  background: var(--karte); border: 1px dashed var(--linie-stark);
  border-radius: var(--r-gross);
}
.leer img { width: 4.5rem; height: 4.5rem; border-radius: 22%; margin-bottom: var(--s3); opacity: .9; }
.leer h3 { margin: 0 0 var(--s2); font-size: 1.15rem; }
.leer p { margin: 0 auto var(--s4); max-width: 26rem; color: var(--gedaempft); }

/* ======================================================== Einzelansicht */

.detail__kopf { margin-bottom: var(--s4); }
.detail__produkt { margin: 0 0 var(--s1); font-size: 1.6rem; letter-spacing: -.03em; }
.detail__firma { margin: 0; color: var(--gedaempft); font-size: 1.05rem; }
.detail__betrag {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  padding: var(--s4) var(--s5); margin-bottom: var(--s5);
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--r-gross); box-shadow: var(--schatten-1);
}
.detail__betrag b {
  font-size: 2.1rem; font-variant-numeric: tabular-nums;
  letter-spacing: -.04em; color: var(--marke); line-height: 1.1;
}
.detail__zeilen {
  display: grid; gap: 0; margin: 0 0 var(--s5);
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--r-mittel); overflow: hidden;
}
.detail__zeile {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--linie);
}
.detail__zeile:first-child { border-top: 0; }
.detail__zeile dt { font-size: .9rem; font-weight: 700; color: var(--gedaempft); }
.detail__zeile dd { margin: 0; white-space: pre-wrap; }
@media (max-width: 27rem) {
  .detail__zeile { grid-template-columns: 1fr; gap: var(--s1); }
}

.block {
  padding: var(--s4); margin-bottom: var(--s4);
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--r-mittel);
}
.block > h3 {
  margin: 0 0 var(--s3); font-size: 1.05rem;
  display: flex; align-items: center; gap: var(--s2);
}
.block > h3 em {
  font-style: normal; font-weight: 400; font-size: .85rem;
  color: var(--gedaempft); margin-left: auto;
}
.block--fotos { margin-bottom: 0; }
.beleg--neu img { border: 2px solid var(--marke); }
.beleg__neu-hinweis {
  position: absolute; left: var(--s1); bottom: var(--s1);
  padding: .1em .5em; font-size: .72rem; font-weight: 700;
  color: #fff; background: var(--marke); border-radius: 99px;
}
.block__hinweis { margin: 0 0 var(--s3); font-size: .92rem; color: var(--gedaempft); }

.artwahl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.artwahl .knopf[aria-pressed="true"] { --k-bg: var(--marke); --k-tinte: #fff; --k-rand: var(--marke); }
.artwahl .knopf[data-art="einnahme"][aria-pressed="true"] { --k-bg: var(--gruen); --k-rand: var(--gruen); }
.detail__betrag--einnahme b { color: var(--gruen); }

.statuswahl { display: grid; gap: var(--s2); }
.statuswahl .knopf { justify-content: flex-start; }
.statuswahl .knopf[aria-pressed="true"] {
  --k-bg: var(--marke); --k-tinte: #fff; --k-rand: var(--marke);
}
.statuswahl .knopf[aria-pressed="true"] .statuswahl__datum { color: rgba(255,255,255,.8); }
.statuswahl__datum { margin-left: auto; font-weight: 400; font-size: .85rem; color: var(--gedaempft); }

.belege { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--s3); }
.beleg { position: relative; aspect-ratio: 3 / 4; }
.beleg img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r-klein); border: 1px solid var(--linie);
  background: var(--marke-blass); cursor: zoom-in; display: block;
}
.beleg__weg {
  position: absolute; top: var(--s1); right: var(--s1);
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  color: #fff; background: rgba(22,33,31,.72);
  border: 0; border-radius: 99px; cursor: pointer;
  backdrop-filter: blur(4px);
}
.beleg__weg:hover { background: var(--gefahr); }
.beleg--laedt { display: grid; place-items: center; border: 1.5px dashed var(--linie-stark); border-radius: var(--r-klein); }

.aufnahme { position: relative; }
.aufnahme input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.detail__aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.detail__aktionen .knopf--weit { grid-column: 1 / -1; }

/* ======================================================== Meldungen */

.meldung {
  padding: var(--s3) var(--s4); margin: 0 0 var(--s4);
  border-radius: var(--r-klein); font-weight: 700;
  border-left: 3px solid currentColor;
}
.meldung--fehler { color: var(--gefahr); background: var(--gefahr-blass); }

.ruecken {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--s4) + env(safe-area-inset-bottom));
  z-index: 60; display: grid; gap: var(--s2);
  width: min(26rem, calc(100vw - 2rem));
  pointer-events: none;
}
.rueck {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  color: #fff; background: var(--tinte);
  border-radius: var(--r-mittel); box-shadow: var(--schatten-3);
  font-weight: 700;
  animation: rein .35s var(--bogen) both;
}
.rueck--gut { background: var(--gruen); }
.rueck--schlecht { background: var(--gefahr); }
.rueck--weg { animation: raus .3s ease forwards; }
@keyframes rein { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes raus { to { opacity: 0; transform: translateY(8px); } }

/* ======================================================== Dialoge */

.frage, .lupe { border: 0; padding: 0; background: transparent; }
.frage::backdrop, .lupe::backdrop { background: rgba(11,28,30,.55); backdrop-filter: blur(3px); }
.frage {
  width: min(26rem, calc(100vw - 2rem));
  padding: var(--s5); background: var(--karte);
  border-radius: var(--r-gross); box-shadow: var(--schatten-3);
  color: var(--tinte);
}
.frage h3 { margin: 0 0 var(--s2); font-size: 1.25rem; }
.frage p { margin: 0 0 var(--s5); color: var(--gedaempft); }
.frage__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.frage[open], .lupe[open] { animation: rein .3s var(--bogen) both; }

.lupe { width: min(60rem, 100vw); max-width: 100vw; max-height: 100vh; }
.lupe img { width: 100%; max-height: 92vh; object-fit: contain; display: block; }
.lupe__zu {
  position: fixed; top: calc(var(--s4) + env(safe-area-inset-top)); right: var(--s4);
  width: 3rem; height: 3rem; display: grid; place-items: center;
  color: #fff; background: rgba(22,33,31,.7); border: 0; border-radius: 99px;
  cursor: pointer; backdrop-filter: blur(6px);
}

/* ======================================================== Anmeldung */

.anmelde-seite {
  display: grid; place-items: center; min-height: 100svh;
  padding: var(--s5) var(--s4);
  background:
    radial-gradient(80rem 40rem at 50% -10%, var(--marke-blass), transparent 70%),
    var(--papier);
}
.anmelde-karte {
  width: min(24rem, 100%); text-align: center;
  padding: var(--s6) var(--s5) var(--s5);
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--r-gross); box-shadow: var(--schatten-2);
}
.anmelde-bild { border-radius: 22%; box-shadow: var(--schatten-1); margin-bottom: var(--s4); }
.anmelde-karte h1 {
  margin: 0 0 var(--s2); font-size: 1.55rem; line-height: 1.1;
  display: flex; flex-direction: column;
}
.anmelde-karte h1 span {
  font-size: .78rem; font-weight: 400; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gedaempft);
}
.anmelde-text { margin: 0 0 var(--s5); color: var(--gedaempft); }
.anmelde-form { display: grid; gap: var(--s4); text-align: left; }
.anmelde-form .knopf { margin-top: var(--s1); }
.anmelde-seite .meldung { text-align: left; }

/* ======================================================== Sichten */

.sicht { animation: sicht-rein .32s var(--bogen) both; }
@keyframes sicht-rein { from { opacity: 0; transform: translateY(8px); } }

.laden { display: grid; gap: var(--s3); }
.skelett {
  height: 5.5rem; border-radius: var(--r-mittel);
  background: linear-gradient(100deg, #F2EEE7 30%, #F8F5F0 50%, #F2EEE7 70%);
  background-size: 220% 100%;
  animation: schimmer 1.3s linear infinite;
}
@keyframes schimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

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

@media print {
  .kopf, .filter, #knopf-neu, .ausgabe-knoepfe, .ruecken, .zurueck, .detail__aktionen { display: none !important; }
  body { background: #fff; }
  .eintrag, .summen, .block { box-shadow: none; break-inside: avoid; }
}