/* Design aus dem CI von spotty.app: Farben, Schriften und Radien
   entsprechen den Tokens der bestehenden Seite. */

@font-face {
  font-family: 'ATP Takeaway';
  src: url('schriften/atp-takeaway-heavy.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

/* Nunito wird seit 15.09.2026 von dieser Box ausgeliefert, nicht mehr ueber den
   Google-Fonts-Dienst. Vorher ging die IP-Adresse jedes Besuchers an einen Server
   ausserhalb der EU — das beruehrt Kapitel 9 der Anlage ./1 („keine Verarbeitung
   durch Dritte") und AVV 4.1 (nur EU/EWR). Es ist eine variable Schrift: zwei
   Dateien (76 KB) decken 400 bis 800 ab und ersetzen acht Abrufe bei Google.
   Lizenz SIL OFL 1.1 — Selbstausliefern ist ausdruecklich erlaubt, Wortlaut in
   schriften/NUNITO-LIZENZ-OFL.txt. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('schriften/nunito-variabel-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('schriften/nunito-variabel-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Seit 05.10.2026 auf das spotty-Designsystem (spotty-ux.codeborne.com)
   gezogen, Dunkelmodus. Jede Farbe ist ein Wert aus dessen Palette; der Name
   dort steht daneben. */
:root {
  --grund: #232a47;        /* gray-900, Seitengrund */
  --grund-tief: #15192a;   /* gray-950, oberes Ende des Verlaufs (bg-body) */
  --flaeche: #2e3759;      /* gray-800, Karte (card-default) */
  --flaeche-tief: #404c6f; /* gray-700 */
  --linie: #404c6f;        /* gray-700, Kartenrand und Trennlinien */
  /* sky-500. Das Designsystem setzt Links in sky-600 (#1ba6dd); das ergibt auf
     einer Karte nur 4,18:1 und fällt unter WCAG AA. sky-500 hält 5,62:1. */
  --cyan: #46c1f1;
  --gelb: #ffeb1f;         /* yellow-500, Akzent */
  /* gray-300, im Designsystem `text-muted` im Dunkelmodus. 6,21:1 auf
     --flaeche, 7,51:1 auf --grund, 4,52:1 auf --flaeche-tief (Sprechblasen der
     Erklärhilfe) — überall über den 4,5:1 für Kleinschrift. */
  --gedaempft: #b6bdd4;
  --text: #f4f3ed;         /* gray-50, `text-default` im Dunkelmodus */
  --weiss: #fff;
  --creme: #fff9f0;   /* warmes Off-White, Wunsch spotty 09.09.2026 */

  /* Plaketten (badge) mit Text- und Grundfarbe. Primär und Warnung je eine
     Stufe dunkler als im Designsystem (dort sky-800 und warning-800): bei 12px
     Schrift erreichen die Originale nur 4,32:1 und 3,91:1. */
  --plakette-primaer: #155984;      --plakette-primaer-text: #b7e6fa;
  --plakette-warnung: #7a5d01;      --plakette-warnung-text: #fff39c;
  --plakette-grau: #404c6f;         --plakette-grau-text: #d2d7e4;

  /* Befundstufen der Ergebnisseite (06.10.2026): Text-/Randfarbe, Füllung der
     Ringkachel, Grund der Plakette. gut = success-300/-900, schlecht =
     danger-400/-900, teils = warning-400/-900, offen = gray-300/-700. */
  --gut: #6aebaa;       --gut-tief: #2f9e66;       --gut-badge: #045034;
  --schlecht: #ff6f69;  --schlecht-tief: #d0453f;  --schlecht-badge: #851c17;
  --teils: #ffe347;     --teils-tief: #d9b52e;     --teils-badge: #7a5d01;
  --offen: #b6bdd4;     --offen-tief: #56638a;     --offen-badge: #404c6f;
  --lavendel: #8ba3d5;  /* violet-400, Kritzel und Funken */

  --radius: 8px;        /* radius-lg, Knöpfe und Hinweise */
  --radius-gross: 12px; /* radius-xl, Karten */

  --spalte: min(1160px, 100% - 40px);
}

* { box-sizing: border-box; }

/* `hidden` gewinnt immer. Ohne diese Regel überstimmte jedes `display: flex`
   das Attribut — so stand „Diesen Bericht aufheben" (.anmeldung-kurz) auf der
   Ergebnisseite, obwohl der Mailversand aus ist (gefunden 06.10.2026). */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  /* Der Verlauf von oben (bg-body im Designsystem). Er endet nach einer
     Bildschirmhöhe, darunter trägt die Grundfarbe — sonst wiederholte er sich
     auf langen Seiten wie dem Bericht. */
  background: var(--grund) linear-gradient(to bottom, var(--grund-tief), var(--grund) 100vh) no-repeat;
  color: var(--text);
  font-family: 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 {
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}
h1, h2 { font-family: 'ATP Takeaway', 'Trebuchet MS', system-ui, sans-serif; }
/* H3 in Nunito statt ATP Takeaway — Wunsch spotty (D. Froehlacher, 09.09.2026).
   Seit 05.10.2026 auch ohne Versalien, wie der Kartentitel im Designsystem
   (card-title: Nunito, fett, normale Schreibung). */
h3 {
  font-family: 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
  text-transform: none;
}
h1 { font-size: clamp(34px, 6vw, 56px); }
h2 { font-size: clamp(26px, 4vw, 42px); line-height: 1.15; }
h3 { font-size: 18px; line-height: 1.3; }

a { color: var(--cyan); text-decoration: none; }
a:hover { color: #88d5f6; }

button { font-family: inherit; font-size: 16px; cursor: pointer; border: 0; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gelb);
  outline-offset: 2px;
}

/* --- Bausteine ------------------------------------------------------- */

.spalte { width: var(--spalte); margin-inline: auto; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: clamp(20px, 3vw, 30px);
}

/* Bewegung der Knöpfe wie im Designsystem (.btn): leicht größer beim
   Darüberfahren, leicht kleiner beim Drücken. Wer Bewegung abgestellt hat,
   bekommt sie über die Regel am Ende der Datei nicht. */
.knopf-haupt, .knopf-zweit, .knopf-still, .chip {
  transition: color .15s, background-color .15s, border-color .15s, transform .1s;
  touch-action: manipulation;
}
@media (hover: hover) {
  .knopf-haupt:not([disabled]):hover,
  .knopf-zweit:not([disabled]):hover,
  .knopf-still:not([disabled]):hover { transform: scale(1.02); }
}
.knopf-haupt:not([disabled]):active,
.knopf-zweit:not([disabled]):active,
.knopf-still:not([disabled]):active { transform: scale(.97); }

/* Seit 06.10.2026 Sky statt Gelb: Bedienelemente sind in der App Sky/Cyan,
   Gelb ist den Kennzahlen vorbehalten (Brandbook S. 114–116, DESIGNSYSTEM.md
   1.3). Fläche sky-600 wie `btn-primary` dunkel, Text Navy. */
.knopf-haupt {
  background: #1ba6dd;
  color: var(--grund);
  font-weight: 700;
  padding: 15px 28px;
  border-radius: var(--radius);
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.knopf-haupt:hover { filter: brightness(1.08); }
.knopf-haupt[disabled] {
  background: var(--linie);
  color: var(--gedaempft);
  cursor: not-allowed;
  filter: none;
}

.knopf-zweit {
  background: transparent;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-weight: 700;
  padding: 15px 28px;
  border-radius: var(--radius);
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.knopf-zweit:hover { border-color: #88d5f6; color: #88d5f6; }

.knopf-still {
  background: transparent;
  border: 1px solid var(--linie);
  color: var(--weiss);
  font-weight: 700;
  padding: 14px 24px;
  border-radius: var(--radius);
  min-height: 48px;
}
.knopf-still:hover { border-color: var(--gedaempft); }

.chip {
  background: color-mix(in srgb, var(--flaeche) 60%, transparent);
  border: 1px solid var(--linie);
  color: var(--gedaempft);
  border-radius: 100px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 400;
  min-height: 40px;
}
.chip:hover { border-color: var(--cyan); color: var(--cyan); }

.begriff {
  border-bottom: 1px dashed var(--gedaempft);
  cursor: pointer;
  background: none;
  border-top: 0; border-left: 0; border-right: 0;
  color: inherit;
  font: inherit;
  padding: 0;
  min-height: 0;
}
.begriff:hover { border-bottom-color: #88d5f6; color: #88d5f6; }
/* In einer Überschrift muss der Begriff die Überschrift bleiben — sonst bricht
   die Schriftgröße mitten im Satz. */
h1 .begriff, h2 .begriff, h3 .begriff {
  font-size: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.klein { font-size: 14px; color: var(--gedaempft); }
/* 14 statt 13 px seit 06.10.2026: Brandbook max. 3 Groessen je Dokument,
   Fliesstext 16, Kleinschrift 14, Einleitung 18. */
.winzig { font-size: 14px; color: var(--gedaempft); }

.reihe { display: flex; gap: 12px; flex-wrap: wrap; }
.stapel { display: flex; flex-direction: column; }

/* Hover von Links und Zweitknöpfen seit 06.10.2026 sky-300 statt Gelb:
   Bedienelemente sind Sky/Cyan, Gelb trägt nur Akzent und Warnung. */

/* --- Kopf und Fuß ---------------------------------------------------- */

.kopf {
  border-bottom: 1px solid var(--linie);
  padding: 16px 0;
}
.kopf .spalte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.marke {
  /* Als Knopf gebaut, damit er zum Einstieg zurueckfuehrt — er soll aber nicht
     wie einer aussehen. */
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  letter-spacing: inherit;
}
.marke img { display: block; height: 24px; width: auto; }
.marke:hover { opacity: .85; }
.punkte { display: flex; gap: 5px; }
.punkt {
  width: 20px; height: 5px;
  border-radius: 100px;
  background: var(--linie);
  transition: background .2s;
}
.punkt.an { background: var(--cyan); }

.fuss {
  border-top: 1px solid var(--linie);
  padding: 32px 0;
  margin-top: auto;
}
.fuss .spalte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.fuss img { height: 22px; width: auto; }

main { flex-grow: 1; padding: clamp(24px, 4vw, 48px) 0; }

.schritt { display: none; }
.schritt.aktiv { display: block; animation: auf .25s ease-out; }
@keyframes auf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- Einstieg -------------------------------------------------------- */

/* Der Einstieg: Tat links, Vorschau rechts. Am schmalen Schirm untereinander,
   Vorschau zweitens — was die Seite TUT, kommt vor dem, was sie zeigt.

   Die Aufteilung ist der Kern des Umbaus vom 16.09.2026. Vorher stand die
   Vorschau unter dem Upload-Kasten und begann bei 1,11 Bildschirmhoehen; wer
   sie sehen wollte, musste scrollen. Nebeneinander stehen beide oben. */
.einstieg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.einstieg-tat { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.einstieg-satz {
  font-size: 18px;
  margin: 0;
  max-width: 34ch;
  text-wrap: pretty;
}

@media (min-width: 900px) {
  /* Die Vorschau bekommt die schmalere Spalte: sie ist der Beleg, nicht die
     Handlung. */
  .einstieg { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 44px; }
}

/* Kein Kasten mehr, der sich selbst erklaert. Der gestrichelte Rahmen ist weg:
   er versprach eine Drop-Flaeche, die jetzt die ganze Seite ist (app.js), und
   kostete dafuer eine halbe Bildschirmhoehe. Gemessen am 16.09.2026 war der
   alte Kasten 457 px hoch am Rechner und 532 px am schmalen Schirm — die
   Vorbilder liegen bei 261 (TinyPNG) bis 300 (Smallpdf). */
.upload-feld {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
}
.knopf-gross {
  font-size: 16px;
  padding: 18px 34px;
  min-height: 62px;
  width: 100%;
  max-width: 380px;
}
/* Waehrend eine Datei ueber der Seite haengt. Der ganze Schirm nimmt sie
   entgegen, also gehoert die Rueckmeldung auch an den ganzen Schirm — ein
   Rahmen um einen Kasten, den es nicht mehr gibt, ginge ins Leere. */
body.bereit::after {
  content: 'Datei hier loslassen';
  position: fixed;
  inset: 12px;
  border: 3px dashed var(--gelb);
  border-radius: 20px;
  background: color-mix(in srgb, var(--grund) 82%, transparent);
  color: var(--gelb);
  font-family: 'ATP Takeaway', 'Trebuchet MS', sans-serif;
  font-size: clamp(20px, 4vw, 34px);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: none;
}

.textknopf {
  background: none;
  border: 0;
  padding: 0;
  color: var(--cyan);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.textknopf:hover { color: #88d5f6; }

.datenschutz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--linie);
  padding-top: 16px;
  width: 100%;
  max-width: 720px;
}


/* --- Schritt 3: die Maske ---------------------------------------------
   Ersetzt seit 16.09.2026 die alten Regeln für sechzehn gleich große Kästen
   (.feld als Flex-Spalte mit .feld-status rechts). Sie sind ersatzlos weg:
   der Status steht nicht mehr an jeder Zeile, sondern als Gruppe darüber, und
   die Rahmenfarbe je Konfidenz ist der Gruppenzugehörigkeit gewichen.

   Der Grund für den Umbau war nicht nur die Optik. Die alte Regel setzte
   .feld-kopf AUCH unter 720px auf `space-between`, also Beschriftung links und
   Hilfetext rechts daneben — bei 390px brach „Grundpreis (ohne Steuer /
   netto)" dadurch über vier Zeilen, und der Hilfetext quetschte sich in eine
   Spalte von wenigen Zeichen. Die Maske ist mobil zuerst gebaut; die
   Mehrspaltigkeit kommt erst ab 720px dazu. */

/* Der Kopf über der Maske: das Leseergebnis in einem Satz.
   Heißt NICHT `.befund` — diese Klasse trägt auf der Ergebnisseite seit jeher
   das Befundwort der Grundsätze („Erfüllt" / „Nicht erfüllt", siehe unten bei
   .grundsatz) und macht daraus eine Pille in Versalien. Der erste Entwurf
   dieses Kopfes hieß so und erbte prompt `text-transform: uppercase`. */
.leseergebnis {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  background: var(--flaeche);
  border: 1px solid var(--cyan);
  border-radius: var(--radius-gross);
  padding: 20px 24px;
  margin: 18px 0 20px;
}
.leseergebnis.offen { border-color: var(--gelb); }
.leseergebnis-text { display: flex; gap: 14px; align-items: flex-start; min-width: 0; flex: 1 1 380px; }
.leseergebnis-worte { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.leseergebnis-worte strong { font-size: 18px; line-height: 1.25; text-wrap: pretty; }
.leseergebnis-zeichen {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--cyan);
  flex: none;
  display: grid;
  place-items: center;
}
.leseergebnis.offen .leseergebnis-zeichen { background: var(--gelb); }

/* Überschrift einer Gruppe */
.gruppe { margin-top: 30px; }
.gruppe-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.gruppe-kopf h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0;
}
.gruppe[data-gruppe="fehlt"] h3 { color: var(--gelb); }
.gruppe[data-gruppe="pruefen"] h3 { color: var(--gelb); }
.gruppe[data-gruppe="ergaenzend"] h3 { color: var(--cyan); }
.gruppe-zahl { font-size: 14px; font-weight: 700; color: var(--gedaempft); }
.gruppe-satz { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--gedaempft); text-wrap: pretty; }
.gruppe-inhalt { gap: 12px; }

/* Ein Feld — die gemeinsame Grundlage von Karte und Listenzeile.
   `.offen` schaltet zwischen gelesenem Wert und Eingabefeld um. */
.feld-auf { display: none; flex-direction: column; gap: 8px; }
.feld.offen > .feld-auf,
.feld.offen > .paar-auf { display: flex; }
.feld.offen > .feld-zu { display: none; }

.feld-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feld-name { font-weight: 700; }
.feld-hilfe { margin: 0; text-wrap: pretty; }

/* Das Etikett netto/brutto. Es ersetzt den Klammerzusatz im Feldnamen. */
.etikett {
  font-size: 14px;
  font-weight: 600;
  color: var(--plakette-grau-text);
  background: var(--plakette-grau);
  border-radius: 100px;
  padding: 0 8px;
  white-space: nowrap;
}

/* Eingabefeld mit Einheit daneben. Die Einheit sitzt im Kasten und nicht im
   Wert — sie darf nie mit abgeschickt werden. */
.mit-einheit {
  display: flex;
  align-items: stretch;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 420px;
}
.mit-einheit input {
  background: transparent;
  border: 0;
  color: var(--weiss);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
  min-width: 0;
}
.mit-einheit:focus-within { outline: 2px solid var(--cyan); outline-offset: 0; }
.mit-einheit .einheit {
  display: grid;
  place-items: center;
  padding: 0 14px;
  background: var(--flaeche-tief);
  font-size: 14px;
  font-weight: 700;
  color: var(--gedaempft);
  white-space: nowrap;
}

/* Karte: die Gruppen, die den Besucher etwas angehen */
.karte-feld {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--linie);
  border-radius: 10px;
  padding: 16px 18px;
}
.karte-feld.fehlt, .karte-feld.pruefen { border-left-color: var(--gelb); }
.karte-feld.ergaenzend { border-left-color: var(--cyan); }
.karte-feld > .feld-zu { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: center; }
.karte-feld .feld-kopf { grid-column: 1; }
.feld-wert { grid-column: 1; font-size: 18px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.feld-beleg {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--gedaempft);
  border-left: 2px solid var(--linie);
  padding-left: 10px;
  text-wrap: pretty;
}
.feld-knopf { grid-column: 2; grid-row: 1 / 3; align-self: center; }

/* Liste: die Gruppen, die man nur auf Verdacht öffnet */
.gruppe-klappe {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  margin-top: 16px;
  overflow: hidden;
}
.gruppe-klappe > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.gruppe-klappe > summary::-webkit-details-marker { display: none; }
/* Das Dreieck selbst gebaut, damit es in beiden Zuständen dieselbe Farbe hat
   wie der Rest der Zeile. */
.gruppe-klappe > summary::before {
  content: "";
  width: 9px; height: 9px;
  border-right: 2.5px solid var(--cyan);
  border-bottom: 2.5px solid var(--cyan);
  transform: rotate(-45deg);
  transition: transform .15s ease-out;
  flex: none;
}
.gruppe-klappe[open] > summary::before { transform: rotate(45deg); }
.gruppe-klappe > summary:focus-visible { outline: 3px solid var(--gelb); outline-offset: -3px; }
.klappe-satz { margin-left: auto; font-weight: 400; }
.werteliste { border-top: 1px solid var(--linie); }

.listen-feld, .paar-feld { border-bottom: 1px solid var(--linie); padding: 11px 20px; }
/* In einer Karten-Gruppe folgt das Paar dem Polster der Karten daneben — sonst
   sitzt es zwischen ihnen sichtbar enger. */
.paar-feld.karte-feld { padding: 16px 18px; }
.listen-feld:last-child, .paar-feld:last-child { border-bottom: 0; }
.listen-feld > .feld-zu, .paar-feld > .feld-zu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 14px;
  align-items: baseline;
}
.listen-feld .n, .paar-feld .n { font-size: 14px; color: var(--gedaempft); grid-column: 1 / -1; }
.listen-feld .w, .paar-feld .w { font-weight: 700; overflow-wrap: anywhere; }
.aendern { background: transparent; border: 0; color: var(--cyan); font-weight: 700; font-size: 14px; padding: 0; }
.aendern:hover { color: #88d5f6; }
.paar-auf { display: none; flex-direction: column; gap: 14px; }
.paar-feld.offen > .feld-zu { display: none; }
.paar-feld.offen > .paar-auf { display: flex; }
/* Die beiden Hälften eines Paars stehen im geöffneten Zustand immer offen —
   sie haben keinen eigenen Zuklapp-Zustand. */
.paar-auf > .feld { border: 0; padding: 0; }

.kasten {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 18px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: inherit;
  font: inherit;
}
.kasten.an { border-color: var(--cyan); }
.haken {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 2px solid var(--linie);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.kasten.an .haken { border-color: var(--cyan); background: var(--cyan); }
.haken svg { display: none; }
.kasten.an .haken svg { display: block; }

/* --- Analyse ---------------------------------------------------------- */

.balken-hintergrund {
  height: 8px;
  border-radius: 100px;
  background: var(--linie);
  overflow: hidden;
}
.balken-fortschritt {
  height: 8px;
  border-radius: 100px;
  background: var(--cyan);
  width: 0;
  transition: width .5s ease-out;
}
/* Die Bytes sind oben, die Prüfung läuft — wie lange, weiß niemand. Der Balken
   hört deshalb auf zu zählen, statt bei 100 % zu stehen und zu schweigen. */
.balken-fortschritt.unbestimmt {
  background: linear-gradient(90deg, var(--linie) 0%, var(--cyan) 50%, var(--linie) 100%);
  background-size: 240% 100%;
  animation: wandern 1.6s linear infinite;
  transition: none;
}
@keyframes wandern { from { background-position: 100% 0; } to { background-position: -140% 0; } }

/* Die Schritte des Wartezustands in drei Zustaenden. Sie ersetzen im
   Pruefzustand den Ladebalken: erledigt (Haken, cyan), laeuft gerade
   (pulsierender Punkt), steht aus (leerer Kreis, gedaempft). Der Wechsel ist
   weich animiert, damit das Aufbauen ruhig wirkt und nicht springt. */
.pruefschritt {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gedaempft);
  transition: color .35s ease, opacity .35s ease;
}
.pruefschritt strong { color: var(--gedaempft); transition: color .35s ease; }
.pruefschritt-zeichen {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--linie);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .35s ease, background .35s ease, color .35s ease;
}
.pruefschritt.offen { opacity: .45; }
.pruefschritt.laeuft strong { color: var(--weiss); }
.pruefschritt.laeuft .pruefschritt-zeichen {
  border-color: var(--cyan);
  animation: schritt-puls 1.4s ease-in-out infinite;
}
.pruefschritt.fertig { color: var(--gedaempft); }
.pruefschritt.fertig strong { color: var(--weiss); }
.pruefschritt.fertig .pruefschritt-zeichen {
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--grund);
}

@keyframes schritt-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cyan) 22%, transparent); }
}

/* Wer Bewegung abgestellt hat, bekommt keinen Puls — der Zustand bleibt am
   Rahmen ablesbar. */
@media (prefers-reduced-motion: reduce) {
  .pruefschritt, .pruefschritt strong, .pruefschritt-zeichen { transition: none; }
  .pruefschritt.laeuft .pruefschritt-zeichen { animation: none; }
}

/* Die Rechnung im Warteschirm (dokument.js, 23.10.2026): links das Blatt mit
   Lesestrahl und Fundstellen, rechts Schritte und gelesene Werte. Strahl und
   Markierungen in Cyan (Bedeutung: gelesen), keine weitere Farbe. */
#schritt-4.mit-dokument .warte-raster {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.dokument {
  padding: 10px;
  border-radius: var(--radius-gross);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
}
.dok-blatt { position: relative; width: 100%; aspect-ratio: 1 / 1.414; border-radius: 4px; overflow: hidden; background: var(--weiss); }
.dok-seite { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
.dok-seite.aktiv { opacity: 1; }
.dok-seite canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.dok-funde { position: absolute; inset: 0; }
.dok-fund {
  position: absolute;
  margin: -2px 0 0 -2px;
  padding: 2px;
  box-sizing: content-box;
  border-radius: 3px;
  box-shadow: 0 0 0 2px var(--cyan);
  background: color-mix(in srgb, var(--cyan) 14%, transparent);
  opacity: 0;
  transform: scale(.6);
  animation: fund-auf .45s cubic-bezier(.3, 1.6, .5, 1) forwards;
}
@keyframes fund-auf { to { opacity: 1; transform: scale(1); } }
.dok-strahl {
  position: absolute; left: 0; right: 0; top: 0; height: 3px; opacity: 0; pointer-events: none;
  background: var(--cyan);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--cyan) 70%, transparent);
}
.dok-strahl::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 48px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--cyan) 22%, transparent));
}
.dok-strahl.kreist { animation: strahl 2.6s ease-in-out infinite; }
/* Linear, damit eine Fundstelle genau dann erscheint, wenn der Strahl ihre
   Hoehe erreicht (dokument.js, `FUND_MS`). */
.dok-strahl.einmal { animation: strahl 1.8s linear 1; }
@keyframes strahl {
  0% { top: 0; opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@media (max-width: 760px) {
  #schritt-4.mit-dokument .warte-raster { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .dokument { width: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .dok-fund { animation: none; opacity: 1; transform: none; }
  .dok-strahl { display: none; }
  .dok-seite { transition: none; }
}

/* Zwei Wege in die Prüfung — welcher der erste ist, entscheidet das Gerät.
   Am Rechner ist die Datei der Hauptweg (die Kamera gibt es dort meist nicht,
   und `capture` fällt auf den Dateidialog zurück); auf einem Gerät mit grobem
   Zeiger, also am Telefon, ist es das Foto. Das Konzept nennt das Handyfoto
   den Hauptpfad — aber eben auf dem Handy. Der zweite Knopf bleibt sichtbar
   und tritt nur farblich zurück. */
.upload-knoepfe { flex-wrap: wrap; gap: 12px; }

/* Der zweite Weg tritt zurück, statt zu verschwinden — zwei gleich laute
   Hauptknöpfe nebeneinander sind keine Wahl, sondern eine Frage. Welcher
   zurücktritt, dreht sich mit der Reihenfolge. */
.upload-knoepfe .zurueck {
  background: transparent;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-weight: 700;
}
.upload-knoepfe .zurueck:hover { border-color: #88d5f6; color: #88d5f6; filter: none; }

.upload-knoepfe #foto-machen { order: 2; }
.upload-knoepfe #datei-waehlen { order: 1; }

@media (pointer: coarse) {
  .upload-knoepfe #foto-machen { order: 1; }
  .upload-knoepfe #datei-waehlen { order: 2; }
}

/* Die kurze Anmeldung direkt unter der Zahl. Sie ist ein Angebot, keine
   Sperre: der Bericht steht darunter vollstaendig da. */
.anmeldung-kurz {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: center;
  justify-content: space-between;
  background: var(--flaeche);
  border: 1px solid var(--cyan);
  border-radius: var(--radius-gross);
  padding: 16px clamp(16px, 2.4vw, 22px);
  margin-top: 22px;
}
.anmeldung-kurz > div { min-width: 0; flex: 1 1 260px; }
.anmeldung-kurz .knopf-zweit { flex: none; }

.schritt-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 100px;
  padding: 7px 14px;
  font-size: 14px;
  color: var(--gedaempft);
}

/* --- Bericht ---------------------------------------------------------- */


.pruefzeile {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linie);
}
.pruefzeile:last-child { border-bottom: 0; }
.symbol {
  width: 26px; height: 26px;
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.symbol.ok { background: var(--cyan); }
.symbol.warn { background: var(--gelb); }


/* Hinweis (alert-primary im Designsystem): getönte Fläche, Balken links. */
.warum {
  background: color-mix(in srgb, #155984 40%, var(--flaeche));
  border-left: 6px solid #1ba6dd;
  border-radius: var(--radius);
  padding: 14px 20px;
  font-size: 16px;
}

.profil-zeile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--linie);
}
.profil-zeile:last-child { border-bottom: 0; }

/* --- Erklärhilfe ------------------------------------------------------ */

.sheet-grund {
  position: fixed;
  inset: 0;
  background: rgba(20, 25, 45, .6);
  display: none;
  z-index: 40;
}
.sheet-grund.auf { display: block; }

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-height: 62vh;
  background: var(--flaeche);
  border-top: 1px solid var(--cyan);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -20px 50px rgba(0,0,0,.45);
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 14px 20px 24px;
  z-index: 50;
}
.sheet.auf { display: flex; animation: hoch .2s ease-out; }
@keyframes hoch { from { transform: translateY(20px); opacity: .6; } to { transform: none; opacity: 1; } }

.sheet-griff {
  width: 44px; height: 4px;
  border-radius: 100px;
  background: var(--flaeche-tief);
  align-self: center;
}
.frage {
  align-self: flex-end;
  max-width: 88%;
  background: var(--cyan);
  color: var(--grund);
  font-weight: 700;
  border-radius: 14px 14px 4px 14px;
  padding: 12px 16px;
}
.antwort {
  align-self: flex-start;
  max-width: 92%;
  background: var(--flaeche-tief);
  border-radius: 14px 14px 14px 4px;
  padding: 14px 16px;
  font-size: 16px;
}

@media (min-width: 820px) {
  .sheet {
    left: auto; right: 24px; bottom: 24px;
    width: 400px;
    max-height: 70vh;
    border-radius: 16px;
    border: 1px solid var(--cyan);
  }
  .sheet-griff { display: none; }
}

/* --- Mehrspaltig ab Tablet ------------------------------------------- */

@media (min-width: 720px) {
  .drei-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  /* Erst hier bekommt die Listenzeile drei Spalten. Darunter steht die
     Beschriftung über dem Wert — genau das fehlte der alten Maske, in der
     .feld-kopf auch am Handy auf `space-between` stand. */
  .listen-feld > .feld-zu, .paar-feld > .feld-zu {
    grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) auto;
  }
  .listen-feld .n, .paar-feld .n { grid-column: 1; }
  /* Im geöffneten Feld stehen Beschriftung und Eingabe nebeneinander. */
  /* `:not(.paar-auf)` ist Pflicht: das geöffnete Feldpaar trägt an seinem
     Kind BEIDE Klassen (`feld-auf paar-auf`). Ohne die Ausnahme fiele es in
     dieses Zweispalten-Raster, seine zwei Hälften stünden nebeneinander in
     220px bzw. 1fr — und jede Hälfte ist selbst wieder zweispaltig. Für das
     Eingabefeld bliebe fast nichts. Erreichbar immer dann, wenn beide
     Zeitraum-Daten in „Bitte kurz prüfen" landen; auf Scans stuft der Leser
     genau dieses Feld regelmäßig auf „unsicher" herab. */
  .karte-feld.offen > .feld-auf:not(.paar-auf),
  .listen-feld.offen > .feld-auf,
  .paar-auf > .feld.offen > .feld-auf {
    display: grid;
    grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
    gap: 6px 20px;
    align-items: center;
  }
  .karte-feld.offen > .feld-auf > .feld-hilfe,
  .listen-feld.offen > .feld-auf > .feld-hilfe,
  .paar-auf > .feld.offen > .feld-auf > .feld-hilfe { grid-column: 2; }
}

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

/* --- Dateiwahl -------------------------------------------------------- */

/* Der native Dateiwähler ist unsichtbar, aber IM Baum: display:none nähme ihm
   den Fokus, und die Tastaturbedienung ginge über den Knopf daneben verloren. */
.datei-versteckt {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.datei-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* --- Fehler an einem Feld und am Stand --------------------------------- */

.feld-fehler {
  color: var(--gelb);
  font-size: 14px;
  margin: 0;
  text-wrap: pretty;
}
/* Der Server nennt beim 422 genau die Felder, die nicht durchgehen — ohne den
   abgelehnten Wert. Markiert wird deshalb der Rahmen, nicht der Inhalt. */
.feld.mangel { border-color: var(--gelb); box-shadow: 0 0 0 1px var(--gelb); }
/* Das Eingabefeld selbst hat seit dem Umbau keinen eigenen Rahmen mehr — er
   sitzt an `.mit-einheit` darum herum. `.feld.mangel input` traf damit ins
   Leere, und bei einer Paar-Hälfte (die keinen eigenen Rahmen hat) blieb der
   Mangel ganz ohne Kennzeichnung am Feld. */
.feld.mangel .mit-einheit { border-color: var(--gelb); box-shadow: 0 0 0 1px var(--gelb); }

.warnung { color: var(--gelb); font-weight: 700; }

/* --- E-Mail-Feld ------------------------------------------------------- */

.mail-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 4px 16px;
  margin: 14px 0;
  min-height: 50px;
}
.mail-zeile:focus-within { border-color: var(--cyan); }
.mail-zeile input {
  flex-grow: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--weiss);
  font: inherit;
  font-size: 16px;
  padding: 12px 0;
}
.mail-zeile input:focus { outline: none; }
.mail-zeile input::placeholder { color: var(--gedaempft); }

/* Der Knopf, der zu spotty.app führt, ist ein Link und kein <button> — er sieht
   aber aus wie der Hauptknopf. */
a.knopf-haupt { text-decoration: none; }
a.knopf-haupt:hover { color: var(--grund); }


/* Nur für die Vorlesehilfe. Wie .datei-versteckt, aber ohne Fokus: der Text
   wird gelesen, nicht bedient. */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Ein Paar in einer Karten-Gruppe: dasselbe Raster wie eine Feldkarte, nur
   trägt der geöffnete Zustand zwei Felder statt einem. */
.paar-feld.karte-feld { border-bottom: 1px solid var(--linie); }
.paar-feld.karte-feld > .feld-zu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 18px;
  align-items: center;
}
.paar-feld.karte-feld .feld-kopf { grid-column: 1; }

/* Am Handy steht der Ändern-Knopf oben rechts neben der Beschriftung, nicht
   mittig neben dem Wert: sonst teilt er sich die Zeile mit dem Wert, und
   „Summe Energie 512,40 €" bricht neben einem Knopf von 90 Pixeln um. */
@media (max-width: 719px) {
  .karte-feld > .feld-zu, .paar-feld.karte-feld > .feld-zu { align-items: start; }
  .karte-feld .feld-knopf, .paar-feld.karte-feld .feld-knopf {
    grid-row: 1;
    align-self: start;
    padding: 9px 16px;
    min-height: 40px;
  }
  .feld-wert { grid-column: 1 / -1; }
}

/* --- Startseite im App-Look (06.10.2026) --------------------------------
   Miro-Feedback von spotty, danach aufgeräumt nach dem Brandbook: ruhige
   Flächen, Gelb nur als einzelner Akzent (der Strich), Bedienelemente Cyan,
   Kritzel Lavendelblau, Nunito nur in 18 / 16 / 14 px und 400 / 700. */

h1 .strich, .claim .strich { position: relative; display: inline-block; }
h1 .strich svg, .claim .strich svg {
  position: absolute; left: -3%; bottom: -6px; width: 106%; height: 12px; color: var(--gelb);
}

/* Datenschutz: prominent durch Platz und Größe direkt unter dem Knopf, nicht
   durch eine eigene Farbe. */
/* Seit 09.10.2026 prominenter (Miro chiihiro, Muss-Kriterium spotty): eigene
   ruhige Fläche und die größte Nunito-Größe, weiterhin ohne Signalfarbe. */
.schutz-pille {
  display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
  margin: 4px 0 0; padding: 12px 18px; font-size: 18px; font-weight: 700; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-gross);
}
.schutz-pille svg { flex: none; color: var(--lavendel); width: 22px; height: 22px; }

.transparenz {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-gross);
  padding: clamp(20px, 3vw, 28px);
}
#schritt-1 h2 { font-size: clamp(26px, 3.4vw, 32px); margin: 0; line-height: 1.15; }

/* HighlightItem: Kritzel links (48 px, Lavendelblau), Titel 16/700, Text 14. */
.highlights { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 18px; }
.highlights li { display: flex; align-items: center; gap: 16px; }
.highlights h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; }
.highlights p { margin: 2px 0 0; color: var(--gedaempft); font-size: 14px; text-wrap: pretty; }
.kritzel-icon { flex: none; width: 64px; height: 64px; object-fit: contain; }

.textlink {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--cyan); text-decoration: underline; text-underline-offset: 3px;
}
.textlink:hover { color: #88d5f6; }

.claim {
  font-family: 'ATP Takeaway', 'Trebuchet MS', sans-serif; text-transform: uppercase;
  font-size: clamp(22px, 3vw, 28px); color: var(--text); margin: 28px 0 0;
}

/* Kundenstimmen: Karten mit Zitat, Name gedämpft. */
.stimmen { margin-top: 44px; }
.stimmen-raster { display: grid; gap: 16px; margin-top: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .stimmen-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stimme {
  position: relative; margin: 0; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius-gross); padding: 22px 20px 18px;
}
.stimme blockquote { margin: 0; font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.stimme blockquote::before { content: '„'; }
.stimme blockquote::after { content: '“'; }
.stimme figcaption { margin-top: 10px; color: var(--gedaempft); font-size: 14px; }
/* Videostimmen (20.10.2026): Hochformat 9:16, auf dem Handy nicht bildschirmhoch. */
.stimme-video { padding: 10px 10px 14px; text-align: center; }
.stimme-video blockquote { margin: 12px 6px 0; font-size: 15px; }
/* Auf dem Handy nebeneinander statt untereinander: zwei Hochformat-Videos
   übereinander sind gut zwei Bildschirmhöhen Scrollen. */
@media (max-width: 719px) {
  .stimmen-raster:has(> .stimme-video) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stimme-video { padding: 6px 6px 10px; }
  .stimme-video blockquote { margin: 8px 2px 0; font-size: 13.5px; line-height: 1.4; }
}
.stimme-video video {
  display: block; width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 9 / 16;
  object-fit: cover; border-radius: calc(var(--radius-gross) - 6px); background: var(--flaeche-tief);
}
.stimme-platzhalter {
  position: absolute; top: -10px; right: 14px; border-radius: 999px; padding: 1px 10px;
  font-size: 14px; background: var(--flaeche-tief); color: var(--gedaempft);
}

/* Feedback als Mail-Link im Chip-Look (09.10.2026). */
a.chip { display: inline-flex; align-items: center; }

/* Hintergrund-Kritzel neben der Spalte (Miro chiihiro, 09.10.2026). Nur, wo
   rechts und links genug Platz ist — darunter würden sie Inhalt überdecken. */
.schritt { position: relative; }
.deko { display: none; position: absolute; opacity: .45; pointer-events: none; user-select: none; }
@media (min-width: 1400px) { .deko { display: block; } }
html { overflow-x: clip; }