/* Stil von Übergabebeleg (#2923, docs/module/uebergabebeleg.md §5.5, Vorlage Bild 2): Tokens als CSS-Variablen,
   Schriftstufen, 8er-Raster, Radien und die Bausteine als Klassen. Kein Glas, keine Verläufe auf Knöpfen, Schatten nur
   selektiv. Farbe trägt nie allein Bedeutung: Jeder Stand hat Symbol und Wort (M10).
   Kontrast (WCAG AA, 4,5:1 für Text): Der zweitrangige Text #667589 erreicht auf Weiß 4,7:1, auf dem Grund #F7F9F8
   nur 4,4:1; Text auf dem Grund nutzt darum --text-2-grund. Die Texte für Gebrauchsspuren und Mangel stehen auf Weiß
   (5,2:1 bzw. 5,8:1), nie auf ihren eigenen Flächen (dort 3,9:1 bzw. 4,4:1); auf den Flächen steht Navy. */

:root {
  color-scheme: light dark;
  --gruen: #167B55;
  --gruen-gedrueckt: #126342;
  --gruen-text: #167B55;
  --auf-gruen: #FFFFFF;
  --text: #192940;
  --text-2: #667589;
  --text-2-grund: #5F6E82;
  --grund: #F7F9F8;
  --karte: #FFFFFF;
  --minze: #EAF4EF;
  --erfolg: #166644;
  --spuren-flaeche: #F5DCAD;
  --spuren-text: #98600D;
  --mangel-flaeche: #F9DAD4;
  --mangel-text: #B53D32;
  --linie: #E4E9E7;
  --schatten: 0 1px 2px rgba(25, 41, 64, .06), 0 8px 24px rgba(25, 41, 64, .06);

  /* Raster und Formen */
  --r1: 8px; --r2: 12px; --r3: 16px; --r4: 24px; --r5: 32px;
  --rand: 20px;
  --radius-karte: 20px;
  --radius-knopf: 14px;
  --radius-feld: 12px;
  --hauptknopf: 52px;
  --ziel: 44px;
  --leiste: 64px;

  /* Schriftstufen: großer Titel, Abschnitt, Text, Metadaten */
  --titel: clamp(28px, 8vw, 34px);
  --abschnitt: 20px;
  --text-groesse: 16px;
  --meta: 13px;
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
}

/* Dunkel: dieselben Rollen, Kontraste wieder mindestens AA. */
@media (prefers-color-scheme: dark) {
  :root {
    /* Weiß auf Grün bleibt 5,3:1; grüner Text braucht auf dem dunklen Grund ein helleres Grün. */
    --gruen-text: #5FCB98;
    --text: #E9EEF3;
    --text-2: #A3AFBD;
    --text-2-grund: #A3AFBD;
    --grund: #0F1620;
    --karte: #18212D;
    --minze: #15332A;
    --erfolg: #7FD6A8;
    --spuren-flaeche: #4A3814;
    --spuren-text: #F2C46D;
    --mangel-flaeche: #4D211C;
    --mangel-text: #F4A196;
    --linie: #2A3644;
    --schatten: none;
  }
}

/* „Kontrast erhöhen“: zweitrangiger Text und Linien kräftiger (M9). */
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root { --text-2: #46546A; --text-2-grund: #46546A; --linie: #A9B5B1; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --text-2: #C9D2DC; --text-2-grund: #C9D2DC; --linie: #4A5868; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 var(--text-groesse)/1.45 var(--schrift);
  font-variant-numeric: tabular-nums;
}
img { display: block; max-width: 100%; }
a { color: var(--gruen-text); }
:focus-visible { outline: 3px solid var(--gruen-text); outline-offset: 2px; }
.versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Seite */
.seite {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--r4) var(--rand) calc(var(--leiste) + var(--r5) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--r4);
}
.seite.mit-aktion { padding-bottom: calc(var(--hauptknopf) + var(--r5) * 2 + env(safe-area-inset-bottom)); }
.marke { display: flex; align-items: center; gap: var(--r1); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.signet { width: 26px; height: 26px; flex: none; }
.signet-blatt { fill: var(--gruen); }
.signet-ecke { fill: var(--minze); }
.signet-haken { stroke: var(--auf-gruen); }
.kopf { display: flex; flex-direction: column; gap: var(--r2); }
/* Zurück-Link („← Übersicht“) oben links statt mittig über dem Titel, Trefferfläche mindestens 44 px (#3635, M6). */
.seite > a.knopf-text:first-child { align-self: flex-start; min-width: var(--ziel); margin-left: calc(var(--r1) * -1); }
/* Ein leerer Platz für Hinweise trägt keinen eigenen Abstand: Titel → erste Karte bleibt auf jedem Bildschirm gleich
   (#3635). Steht ein Hinweis darin, gilt der Abstand wieder. */
.seite > [data-warnung]:empty { margin-top: calc(var(--r4) * -1); }
h1, .titel { margin: 0; font-size: var(--titel); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
h2, .abschnitt { margin: 0; font-size: var(--abschnitt); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
/* Lange Wörter wie „Wohnungsübergabeprotokoll“ trennen statt aus dem Bild zu laufen (#3635); die Seiten haben lang="de". */
h1, h2, .titel { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
h3 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 600; }
p { margin: 0; }
.satz { color: var(--text-2-grund); font-size: var(--text-groesse); }
.meta { color: var(--text-2-grund); font-size: var(--meta); }
.karte .satz, .karte .meta, .blatt .meta { color: var(--text-2); }
.bereich { display: flex; flex-direction: column; gap: var(--r2); }
.sym { width: 20px; height: 20px; flex: none; }

/* Knöpfe: Haupt (grün, mindestens 52 px), Neben (Kontur), Text (ruhig) */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r1);
  min-height: var(--ziel); padding: 0 var(--r3);
  border: 1px solid transparent; border-radius: var(--radius-knopf);
  font: 600 16px/1.2 var(--schrift); text-decoration: none; cursor: pointer;
  background: none; color: var(--gruen-text);
  transition: background-color .15s, transform .15s;
}
.knopf-haupt { width: 100%; min-height: var(--hauptknopf); background: var(--gruen); color: var(--auf-gruen); font-size: 17px; }
.knopf-haupt:hover, .knopf-haupt:active { background: var(--gruen-gedrueckt); }
.knopf-neben { border-color: var(--linie); background: var(--karte); color: var(--text); }
.knopf-neben:active { background: var(--minze); }
.knopf-text { padding: 0 var(--r1); }
.knopf-text.zerstoerend { color: var(--mangel-text); }
.knopf:active { transform: scale(.98); }
.knopf[disabled] { opacity: .5; cursor: default; }

/* Karte und Vorlagenkarte mit Foto. Das Foto trägt width und height gegen Springen beim Laden; height: auto lässt
   dabei aspect-ratio gewinnen, sonst bliebe das Höhenattribut stehen (#3108). */
.karte {
  display: flex; flex-direction: column; gap: var(--r2);
  padding: var(--r3) var(--rand);
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-karte);
  color: inherit; text-decoration: none;
}
.karte-foto { padding: var(--r1); gap: 0; box-shadow: var(--schatten); }
.karte-foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radius-karte) - var(--r1)); background: var(--minze); }
.karte-foto .karte-text { padding: var(--r3) var(--r2) var(--r1); display: flex; align-items: center; gap: var(--r2); }
.karte-foto .karte-text > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.karte-titel { font-size: 18px; font-weight: 600; }
.vorgang-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--r2); }
.aktionen { display: flex; flex-wrap: wrap; gap: var(--r1); justify-content: flex-end; }

/* Listenzeile groß */
.liste { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-karte); }
.zeile-gross {
  display: flex; align-items: center; gap: var(--r2);
  min-height: 64px; padding: var(--r2) var(--r3);
  color: inherit; text-decoration: none;
}
.liste > li + li { border-top: 1px solid var(--linie); }
.zeile-gross > .zeile-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.zeile-titel { font-weight: 600; }

/* Stand: Symbol und Wort */
.stand { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.stand .sym { width: 18px; height: 18px; }
.stand-erledigt { color: var(--erfolg); }
.stand-in_bearbeitung { color: var(--text); }
.stand-spuren { color: var(--spuren-text); }
.stand-mangel { color: var(--mangel-text); }

/* Segment, Chip, Fortschrittsbalken */
.segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; margin: 0; border: 1px solid var(--linie); border-radius: var(--radius-knopf); background: var(--karte); }
.segment legend { padding: 0; }
.segment label { position: relative; display: flex; align-items: center; justify-content: center; min-height: var(--ziel); border-radius: calc(var(--radius-knopf) - 4px); font-weight: 600; cursor: pointer; }
.segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segment label:has(input:checked) { background: var(--minze); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--gruen); }
.segment label:has(input:focus-visible) { outline: 3px solid var(--gruen-text); outline-offset: 2px; }
/* Segment aus Knöpfen mit aria-pressed (Ausstattung, #3635): ein Tipp wählt, ein Tipp auf den gewählten nimmt zurück. */
.segment button {
  min-height: var(--ziel); padding: 0 4px; border: 0; border-radius: calc(var(--radius-knopf) - 4px);
  background: none; color: var(--text); font: 600 15px/1.2 var(--schrift); cursor: pointer;
}
.segment button[aria-pressed="true"] { background: var(--minze); box-shadow: inset 0 0 0 1.5px var(--gruen); }
.chips { display: flex; flex-wrap: wrap; gap: var(--r1); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--ziel); padding: 0 14px;
  border: 1px solid var(--linie); border-radius: var(--radius-feld); background: var(--karte); color: var(--text);
  font: 500 15px/1.2 var(--schrift); cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--minze); border-color: var(--gruen); }
.balken { height: 6px; border-radius: 3px; background: var(--linie); overflow: hidden; }
.balken > span { display: block; height: 100%; border-radius: 3px; background: var(--gruen); transition: width .25s; }

/* Feste Aktionsleiste unten mit Safe-Area */
.aktionsleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: var(--r2) var(--rand) calc(var(--r2) + env(safe-area-inset-bottom));
  background: var(--grund); border-top: 1px solid var(--linie);
}
.aktionsleiste > * { max-width: 520px; margin: 0 auto; }

/* Untere Leiste: Start · Übergaben · Mehr */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--karte); border-top: 1px solid var(--linie);
}
.tabs a {
  flex: 1; max-width: 160px; min-height: var(--leiste);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--text-2); font-size: 12px; font-weight: 500; text-decoration: none;
}
.tabs a .sym { width: 24px; height: 24px; }
.tabs a[aria-current="page"] { color: var(--gruen-text); }

/* Blatt (von unten) und Hinweis */
.blatt { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; max-height: 90svh; overflow: auto; padding: var(--r4) var(--rand) calc(var(--r4) + env(safe-area-inset-bottom)); background: var(--karte); border-radius: var(--radius-karte) var(--radius-karte) 0 0; box-shadow: 0 -8px 32px rgba(25, 41, 64, .16); }
.hinweis { display: flex; gap: var(--r2); align-items: flex-start; padding: var(--r3); border-radius: var(--radius-karte); background: var(--minze); color: var(--text); }
.hinweis-fehler { background: var(--mangel-flaeche); }
.hinweis .sym { margin-top: 2px; }
.status { display: flex; align-items: center; gap: 6px; min-height: 20px; color: var(--text-2-grund); font-size: var(--meta); }
.status .sym { width: 16px; height: 16px; color: var(--erfolg); }

/* Fotokachel und leere Fotofläche (Dokumentationsfotos nur vom Nutzer) */
.fotokachel { position: relative; aspect-ratio: 1; border-radius: var(--radius-feld); overflow: hidden; background: var(--minze); }
.fotokachel img { width: 100%; height: 100%; object-fit: cover; }
.foto-leer {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--r2);
  min-height: 200px; padding: var(--r4); text-align: center;
  border: 1.5px dashed var(--linie); border-radius: var(--radius-karte); background: var(--karte); color: var(--text-2);
}
.foto-leer .sym { width: 36px; height: 36px; color: var(--gruen-text); }

/* Einstieg: großes Foto mit lesbarem Titel; der Knopf bleibt im ersten Bildschirm */
.held { position: relative; margin: calc(var(--r4) * -1) calc(var(--rand) * -1) 0; height: min(48svh, 120vw); overflow: hidden; background: var(--minze); }
.held img { width: 100%; height: 100%; object-fit: cover; }
.held-text { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--r5) var(--rand) var(--r4); background: linear-gradient(to top, rgba(12, 20, 30, .72), rgba(12, 20, 30, 0)); color: #FFFFFF; }
.held-text .titel { color: #FFFFFF; }

/* Startseite (#3163, Bild 2): dasselbe große Foto, darauf Marke, Titel und Satz in Weiß. Mindesthöhe statt fester Höhe,
   damit große Schrift nichts abschneidet (M8); bei 390 × 844 passen Foto (56svh), Abstand, Hauptknopf und untere Leiste
   in den ersten Bildschirm. Der Verlauf beginnt über der Marke, damit auch sie auf hellem Foto lesbar bleibt. */
.held-start { height: auto; min-height: min(56svh, 125vw); display: flex; flex-direction: column; justify-content: flex-end; }
.held-start img { position: absolute; inset: 0; }
.held-start .held-text {
  position: relative; display: flex; flex-direction: column; gap: var(--r2);
  padding-top: calc(var(--r5) * 2);
  background: linear-gradient(to top, rgba(12, 20, 30, .78), rgba(12, 20, 30, .6) 60%, rgba(12, 20, 30, 0));
}
.held-start .marke { color: #FFFFFF; }
.held-start .satz { color: #FFFFFF; }

/* Formular: Beschriftung über dem Feld, Fehler am Feld */
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld label, .feld legend { font-weight: 600; font-size: 15px; }
.feld .hilfe { color: var(--text-2-grund); font-size: var(--meta); font-weight: 400; }
.feld input {
  min-height: 48px; padding: 0 14px; width: 100%;
  border: 1px solid var(--linie); border-radius: var(--radius-feld); background: var(--karte); color: var(--text);
  font: 400 16px/1.3 var(--schrift);
}
/* Datum und Uhrzeit: Safari gibt ihnen eine eigene Mindestbreite und ragen sonst über den rechten Rand (#3635). Ohne
   eigenes Aussehen bleiben sie in ihrer Spalte, Inhalt links, so hoch wie die Textfelder. */
.feld input[type="date"], .feld input[type="time"] {
  -webkit-appearance: none; appearance: none;
  display: block; min-width: 0; max-width: 100%; height: 48px; line-height: 48px; text-align: left;
}
.feld input::-webkit-date-and-time-value { margin: 0; text-align: left; }
.feld input::-webkit-datetime-edit { padding: 0; }
.feld input:focus { border-color: var(--gruen); outline: none; box-shadow: 0 0 0 3px var(--minze); }
.feld input[aria-invalid="true"] { border-color: var(--mangel-text); }
.feldfehler { display: flex; gap: 6px; align-items: center; color: var(--mangel-text); font-size: 14px; font-weight: 500; }
.feldfehler .sym { width: 16px; height: 16px; }
.gruppe { display: flex; flex-direction: column; gap: var(--r3); margin: 0; padding: var(--r3) var(--rand) var(--rand); border: 1px solid var(--linie); border-radius: var(--radius-karte); background: var(--karte); }
.gruppe legend { float: left; width: 100%; padding: 0; font-size: 18px; font-weight: 600; }
.gruppe .hilfe, .gruppe .feld .hilfe { color: var(--text-2); }

/* Übergabe erfassen (#2924, Mitte von Bild 2): Stepper, Raumkarte, große Fotos, großes Segment, feste Leiste */
.stepper { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 0; padding: 0; list-style: none; }
.stepper-punkt {
  width: 100%; min-height: var(--ziel); padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 0; border-radius: var(--radius-feld); background: none; color: var(--text-2-grund);
  font: 500 13px/1.2 var(--schrift); text-decoration: none; cursor: pointer;
}
.stepper-nr { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--linie); font-weight: 600; }
.stepper-punkt .sym { width: 26px; height: 26px; }
.stepper-punkt.fertig { color: var(--erfolg); }
.stepper-punkt.aktuell { color: var(--gruen-text); font-weight: 600; }
.stepper-punkt.aktuell .stepper-nr { background: var(--gruen); border-color: var(--gruen); color: var(--auf-gruen); }
.raumkarte { gap: var(--r4); padding: var(--r4) var(--rand); box-shadow: var(--schatten); }
.raum-kopf { display: flex; align-items: center; gap: var(--r2); }
.raum-titel { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.pfeil { width: var(--ziel); min-width: var(--ziel); height: var(--ziel); padding: 0; border-radius: 50%; border: 1px solid var(--linie); color: var(--text); font-size: 20px; }
span.pfeil { border-color: transparent; }
.raum-erledigt { display: inline-flex; align-self: center; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-feld); background: var(--minze); color: var(--erfolg); font-weight: 600; }
.raum-erledigt .sym { width: 22px; height: 22px; }
.belohnung .sym { animation: federn .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes federn { from { transform: scale(.4); } to { transform: scale(1); } }
@keyframes blende { from { opacity: 0; } to { opacity: 1; } }
.fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--r1); margin: 0; padding: 0; list-style: none; }
.fotos > li:first-child { grid-column: 1 / -1; }
.fotos > li:first-child.fotokachel { aspect-ratio: 4 / 3; }
.foto-platz { display: grid; place-items: center; }
.foto-dazu { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1.5px dashed var(--gruen); color: var(--gruen-text); font: 600 15px/1.2 var(--schrift); cursor: pointer; }
.foto-dazu .sym { width: 28px; height: 28px; }
.segment-gross label { min-height: 56px; padding: 0 4px; text-align: center; font-size: 15px; }
.segment-gross label.stufe-spuren:has(input:checked) { background: var(--spuren-flaeche); box-shadow: inset 0 0 0 1.5px var(--spuren-text); }
.segment-gross label.stufe-mangel:has(input:checked) { background: var(--mangel-flaeche); box-shadow: inset 0 0 0 1.5px var(--mangel-text); }
.pruefpunkt { display: flex; flex-direction: column; gap: var(--r1); padding: var(--r2) var(--r3); }
/* Eigene Ausstattung (#3636): Name und kleiner Knopf „Entfernen“ am Ende der Zeile, Trefferfläche 44 px. */
.ausstattung-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--r2); }
/* #3707: Ein langer Name ohne Trennstelle bricht um, statt „Entfernen“ aus der Zeile zu schieben. */
.ausstattung-kopf > .zeile-titel { min-width: 0; overflow-wrap: anywhere; }
.ausstattung-weg { flex: none; min-width: var(--ziel); min-height: var(--ziel); margin-right: calc(var(--r1) * -1); font-size: 15px; font-weight: 500; }
.auswahl { min-height: var(--ziel); max-width: 50%; padding: 0 10px; border: 1px solid var(--linie); border-radius: var(--radius-feld); background: var(--karte); color: var(--text); font: 400 15px/1.2 var(--schrift); }
/* „Oft vergessen“ (#3162): große Zeilen mit Haken */
.vergessen .haken { cursor: pointer; }
.vergessen input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--gruen); }
.vergessen input[type="checkbox"]:focus-visible { outline: 3px solid var(--gruen-text); outline-offset: 2px; }
.pruef-hinweis ul { margin: var(--r1) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.baustein-dazu > summary { list-style: none; width: fit-content; color: var(--gruen-text); }
.baustein-dazu > summary::-webkit-details-marker { display: none; }
.baustein-dazu[open] > summary { margin-bottom: var(--r2); }
.feld textarea.notiz {
  width: 100%; min-height: 72px; padding: 12px 14px; resize: none; field-sizing: content;
  border: 1px solid var(--linie); border-radius: var(--radius-feld); background: var(--grund); color: var(--text);
  font: 400 16px/1.45 var(--schrift);
}
.feld textarea.notiz:focus { border-color: var(--gruen); outline: none; box-shadow: 0 0 0 3px var(--minze); background: var(--karte); }
.leiste-zwei { display: flex; gap: var(--r1); }
.leiste-zwei > .knopf-neben { flex: none; min-height: var(--hauptknopf); max-width: 40%; }
.leiste-zwei > .knopf-haupt { flex: 1; width: auto; }

/* Blatt „Alle Räume“ */
.blatt-grund { position: fixed; inset: 0; z-index: 19; background: rgba(12, 20, 30, .32); }
.blatt { display: flex; flex-direction: column; gap: var(--r3); max-width: 560px; margin: 0 auto; }
.blatt-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--r2); }
.raumzeile .zeile-gross { min-height: 72px; }
.vorschau { width: 56px; height: 56px; flex: none; border-radius: var(--radius-feld); overflow: hidden; background: var(--minze); display: grid; place-items: center; color: var(--gruen-text); }
.vorschau img { width: 100%; height: 100%; object-fit: cover; }
.vorschau .sym { width: 28px; height: 28px; }
.raum-aktionen { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 var(--r3) var(--r2) calc(var(--r3) + 56px + var(--r2)); }
.raum-dazu > summary { list-style: none; }
.raum-dazu > summary::-webkit-details-marker { display: none; }

/* Foto beschreiben, Zähler, Schlüssel, Unterschrift (#2925, Bild 2 und Studie): Foto groß, Blatt darunter, Karten im
   Stil der Raumkarte, große Fläche zum Unterschreiben */
.fotokachel > a { display: block; width: 100%; height: 100%; }
.foto-gross { margin: 0 calc(var(--rand) * -1); aspect-ratio: 3 / 4; max-height: 62svh; background: var(--minze); overflow: hidden; touch-action: pan-y; }
.foto-gross img { width: 100%; height: 100%; object-fit: contain; background: #0C141E; }
.foto-blatt { gap: var(--r3); padding: var(--r4) var(--rand); box-shadow: var(--schatten); }
.feld .feld-wort { font-weight: 600; font-size: 15px; }
.chip:has(input) { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip:has(input:checked) { background: var(--minze); border-color: var(--gruen); }
.chip:has(input:focus-visible) { outline: 3px solid var(--gruen-text); outline-offset: 2px; }
.eintrag { gap: var(--r3); padding: var(--r4) var(--rand); box-shadow: var(--schatten); }
.eintrag-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--r2); }
.eintrag .auswahl { max-width: none; width: 100%; min-height: 48px; }
.zwei-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--r2); }
.zaehler-foto { display: grid; place-items: center; aspect-ratio: 4 / 3; }
.anzahl { display: flex; align-items: center; gap: var(--r2); }
.anzahl > .zeile-titel { flex: 1; }
.zaehl-knopf { width: 52px; min-width: var(--ziel); height: 52px; padding: 0; border-radius: 50%; font-size: 24px; }
.anzahl-wert { min-width: 2.5ch; text-align: center; font-size: var(--abschnitt); font-weight: 600; }
.unterschrift-flaeche { display: block; width: 100%; height: 220px; border: 1.5px dashed var(--linie); border-radius: var(--radius-feld); touch-action: none;
  /* Die Striche sind Navy wie im PDF; die Fläche bleibt darum auch dunkel hell. */
  background: #FFFFFF; }

/* Prüfen, Vorschau und Fertig (#2926, rechts in Bild 2): Protokollkarte mit Miniatur, Zustimmung, Kaufbereich, Seite
   des Dokuments auf A4, Abschluss-Moment */
.protokoll-karte { flex-direction: row; align-items: center; gap: var(--r3); padding: var(--r3); box-shadow: var(--schatten); }
.protokoll-karte .zeile-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.vorschau.miniatur { width: 88px; height: 88px; }
.signet-gross { width: 44px; height: 44px; }
.abschluss-aktionen { gap: var(--r2); }
.zustimmung .haken { display: flex; align-items: flex-start; gap: var(--r2); min-height: var(--ziel); font-weight: 400; font-size: 15px; cursor: pointer; }
.zustimmung input[type="checkbox"] { flex: none; width: 24px; height: 24px; min-height: 0; margin: 10px 0 0; padding: 0; accent-color: var(--gruen); }
.zustimmung .haken > span { padding: 10px 0; }
.a4-rahmen { margin: 0; padding: 0; border-radius: var(--radius-feld); overflow: hidden; border: 1px solid var(--linie); box-shadow: var(--schatten); background: #FFFFFF; }
.a4 { display: block; width: 100%; height: auto; aspect-ratio: 210 / 297; }
.a4 text { white-space: pre; }
.a4-platz { display: grid; place-items: center; aspect-ratio: 210 / 297; border-radius: var(--radius-feld); background: var(--karte); border: 1px solid var(--linie); }
.blaettern { display: flex; align-items: center; justify-content: space-between; gap: var(--r2); }
.abschluss { display: flex; flex-direction: column; align-items: center; gap: var(--r2); padding: var(--r5) 0 var(--r2); text-align: center; }
.abschluss .sym { width: 72px; height: 72px; color: var(--erfolg); }

/* Prüfwert auf „Prüfen“ mit Erklärung zum Aufklappen, Tipp zum Diktieren unter Notiz und Fotobeschreibung (#3161) */
/* 28 Zeichen in sieben Gruppen (#3278): Umbruch nach einem Bindestrich, nie gekürzt; tabellarische Ziffern. */
.pruefwert-wert { font-size: var(--abschnitt); font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.erklaerung > summary { list-style: none; width: fit-content; margin-left: calc(var(--r1) * -1); }
.erklaerung > summary::-webkit-details-marker { display: none; }
.erklaerung[open] > summary { margin-bottom: var(--r1); }
.diktier-tipp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--r1); }
.diktier-tipp .knopf-text { font-size: 15px; }

/* Freiwilliger KI-Check unter der Fotobeschreibung (#3164): Knopf, Zustimmung und Vorschlag als ruhige Minze-Fläche */
.ki-check { display: flex; flex-direction: column; gap: var(--r1); }
.ki-check > .knopf-neben { align-self: flex-start; }
.ki-check .hinweis > div { display: flex; flex-direction: column; gap: var(--r1); flex: 1; }
.ki-check .leiste-zwei { flex-wrap: wrap; }
.ki-check .leiste-zwei > .knopf-neben { max-width: none; }
/* Zustimmung zurücknehmen unter „Mehr“ (#3279) */
.ki-mehr > .knopf-neben { align-self: flex-start; }

/* Impressum und Datenschutz unter Startseite und Einstieg (#3279): ruhige Textlinks, Trefferfläche 44 px (M6) */
.recht-fuss { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--r3); }
.recht-fuss a { display: inline-flex; align-items: center; min-height: var(--ziel); padding: 0 var(--r1); color: var(--text-2-grund); font-size: var(--meta); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* Belohnung nur als Blende (M9, G5). */
  .belohnung .sym { animation: blende .3s ease-out !important; }
}