/* Mandantenbereich.
   Die Gestaltung und ihre Begruendungen stehen in docs/GESTALTUNG.md.

   Eine eigene Datei statt Stil im Dokument, damit die Inhaltsrichtlinie ohne
   'unsafe-inline' auskommt. Keine Schrift von aussen: eine nachgeladene Schrift
   verraet dem Anbieter, wer wann welche Seite aufgerufen hat, und bei dieser
   Seite waere das eine Aussage ueber das Vermoegen eines Menschen.

   ZWEI WELTEN AUS EINEM SATZ MERKMALE. Hell heisst Bogen: Papier, ruhig, beim
   langen Tippen und in der Sonne die bessere Wahl. Dunkel heisst Tiefe: die
   Innenseite des Gutachtens, Gold fuehrt, der Fokus gluht. Welche der Mandant
   sieht, entscheidet sein Geraet, nicht wir. Deshalb steht unten kein einziger
   Farbwert direkt an einem Bauteil, sondern nur ein Merkmalsname. */

:root {
  --grund: #F4F2ED;
  --grund-glanz: none;
  --flaeche: #FFFFFF;
  --flaeche-leise: #FBFAF7;
  --band: #0F1B2D;
  --band-hell: #1B2B44;
  --band-text: #FFFFFF;
  --text: #16202F;
  --stark: #0F1B2D;
  /* Der Wert aus GESTALTUNG.md. Hier stand bis zum 19. September #6A7382, das
     auf Papier nur 4,28 zu 1 hat und die eigene Schwelle von 4,5 verfehlt.
     Gefunden bei den Entwuerfen fuer die Anmeldeseite. */
  --leise: #5C6878;
  --linie: #E1DED6;
  --rand: #D2CEC4;
  --gold: #B8965A;
  --gold-tief: #8A7549;
  --gold-grund: #FAF6EE;
  --schein: rgba(184, 150, 90, .22);
  --wurf: none;
  --fehler: #A33A2E;
  --fehler-schein: rgba(163, 58, 46, .18);
  --knopf: #0F1B2D;
  --knopf-hell: #1B2B44;
  --knopf-text: #FFFFFF;

  /* Die Anmeldestrecke, siehe "Eingang" unten. Die Linie eines Feldes auf dem
     Blatt hat mindestens 3 zu 1, --rand hat auf Weiss nur 1,57, und ein Feld,
     das nur aus einer Linie besteht, findet man sonst nicht. Im Fokus wird
     sie doppelt so kraeftig und tiefgolden, denn Gold auf Weiss hat 2,8. */
  --band-leise: #A9B4C3;
  --blatt-kante: #D9D5CB;
  --blatt-fuss: #F8F6F1;
  --passer: #C4BFB3;
  --feldlinie: #8C877B;
  --feld-fokus: inset 0 -1.5px 0 var(--gold-tief);

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Unter 200 Millisekunden, so steht es in GESTALTUNG.md. Bis zum
     19. September stand hier 220. */
  --takt: 180ms;
  /* Der Abstand vom Zustandspunkt zur Frage. Alles, was unter der Frage
     steht, faengt an derselben Kante an, sonst steht die Seite schief. */
  --einzug: 1.25rem;
  color-scheme: light dark;
}

/* Tiefe. Nur Merkmale, kein einziges Bauteil wird hier noch einmal beschrieben:
   sonst gibt es zwei Gestaltungen, die auseinanderlaufen, sobald eine sich
   aendert. */
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0B1523;
    --grund-glanz:
      radial-gradient(60rem 34rem at 82% -14%, rgba(200, 164, 103, .13), transparent 62%),
      radial-gradient(44rem 26rem at -6% 112%, rgba(200, 164, 103, .07), transparent 60%);
    --flaeche: #13202F;
    --flaeche-leise: #101B28;
    --band: #08111C;
    --band-hell: #132234;
    --band-text: #FFFFFF;
    --text: #EEF1F5;
    --stark: #FFFFFF;
    --leise: #8E9AAA;
    --linie: #1D2938;
    --rand: #2A3848;
    --gold: #C8A467;
    --gold-tief: #D6B478;
    --gold-grund: #17212E;
    --schein: rgba(200, 164, 103, .20);
    --wurf: 0 10px 26px -16px rgba(200, 164, 103, .85);
    --fehler: #E08074;
    --fehler-schein: rgba(224, 128, 116, .18);
    --knopf: #C8A467;
    --knopf-hell: #D6B478;
    --knopf-text: #14202E;
    --band-leise: #9AA6B6;
    --blatt-kante: #2A3848;
    --blatt-fuss: #101B28;
    --passer: #3A4A5E;
    --feldlinie: #66778C;
    --feld-fokus: inset 0 -1.5px 0 var(--gold-tief), var(--wurf);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --takt: 0ms; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--grund);
  background-image: var(--grund-glanz);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
  font: 16px/1.6 var(--sans);
}

/* Nur fuer die Vorlesesoftware. Ein Punkt allein sagt einem blinden Menschen
   nichts, und ein Punkt mit einem Wort daneben saehe fuer alle anderen aus wie
   eine Liste von Zustandswoertern. */
.nurlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Kopfband --------------------------------------------------------------
   Die dunkelste Flaeche der Seite sitzt oben, wo sie den Blick faengt und
   danach nicht mehr stoert. Die goldene Haarlinie darunter ist der einzige
   Schmuck, den das Band braucht. */

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Umbrechen statt ueberlaufen. Auf einem schmalen Geraet ist eine zweite
     Zeile im Kopf harmlos, eine abgeschnittene Schaltflaeche nicht. */
  flex-wrap: wrap;
  gap: .75rem 1rem;
  padding: 1rem clamp(1rem, .5rem + 2vw, 2rem);
  background: var(--band);
  color: var(--band-text);
  border-bottom: 1px solid var(--gold);
}

.marke {
  font: 600 .95rem/1 var(--serif);
  letter-spacing: .04em;
}

/* Fliessend statt gestuft. clamp() gibt einen kleinsten Wert, einen mitwachsenden
   und einen groessten: damit passt die Seite auf jedem Geraet, auch auf solchen,
   deren Breite zwischen unseren Bruchkanten liegt. Faltbare Telefone und geteilte
   Fenster auf dem Tablet sind genau solche Faelle. */
.inhalt {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1rem, .5rem + 2.5vw, 1.75rem) 4rem;
}

/* Der Fragebogen bekommt mehr Luft als eine Anmeldeseite. Die Fragen stehen
   trotzdem in einer schmalen Spalte: Breite ist hier Rand und nicht Zeile. */
.inhalt.weit { max-width: 54rem; }

/* --- Schrift ---------------------------------------------------------------
   Serife Ueberschriften, weil hier ein Dokument entsteht und kein Programm
   bedient wird. Die Stufen folgen einem festen Verhaeltnis statt gewuerfelten
   Groessen. */

h1 {
  margin: .5rem 0 .75rem;
  font: 400 clamp(1.7rem, 1.2rem + 2vw, 2.6rem)/1.14 var(--serif);
  letter-spacing: -.018em;
  color: var(--stark);
  text-wrap: balance;
}

h2 {
  margin: 2.5rem 0 .5rem;
  font: 400 clamp(1.1rem, 1rem + .5vw, 1.25rem)/1.3 var(--serif);
  color: var(--stark);
}

p { margin: 0 0 1rem; max-width: 64ch; }

a { color: var(--stark); text-underline-offset: .2em; }
a:hover { color: var(--gold); }

.leise { font-size: .9rem; color: var(--leise); }
.unterzeile { color: var(--leise); max-width: 62ch; margin: 0 0 2.25rem; }
.unterzeile.schmal { margin: -.5rem 0 1.25rem; max-width: 52ch; font-size: .93rem; }
.abstand { margin-top: 1.5rem; }

.karte {
  margin-top: 2rem;
  padding: clamp(1.4rem, 1rem + 2vw, 2rem);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
}

/* --- Meldungen -------------------------------------------------------------
   Ein Hinweis ist Papier mit einem goldenen Faden an der Seite, kein Kasten in
   Signalfarbe. Wer hier liest, ist nicht in Gefahr, er wird informiert. */

.hinweis {
  margin: 0 0 1.5rem;
  padding: .85rem 1rem;
  background: var(--gold-grund);
  border-left: 2px solid var(--gold);
  border-radius: 0 4px 4px 0;
}

.hinweis.gespeichert {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 2px solid var(--gold);
}

.fehler {
  margin: .4rem 0 0;
  font-size: .9rem;
  color: var(--fehler);
}

/* --- Eingaben --------------------------------------------------------------
   Eine Linie statt eines Kastens. Ein Formular aus hundert Kaesten sieht aus
   wie eine Tabelle; hundert Linien sehen aus wie ein Bogen, in den jemand
   schreibt. Die Linie faerbt sich golden, wo der Blick liegt. */

form { margin: 0; }

/* Eine Beschriftung ueber ihrem Feld. Im Fragebogen traegt .fragetext diese
   Aufgabe, hier geht es um die schlichten Formulare der Anmeldung. Sie stand
   frueher als allgemeine Regel fuer jedes label da und hat dabei auch die
   Haken im Fragebogen umgeworfen. */
.karte label {
  display: block;
  margin: 1.25rem 0 .4rem;
  font-weight: 600;
  color: var(--stark);
}

.karte label:first-of-type { margin-top: 0; }

/* Feld und Knopf stehen nebeneinander auf einer Linie. Ohne das haengt der
   Knopf an der Unterkante des Feldes, weil ein Eingabefeld von zwoelf
   Zentimetern die Zeile nicht fuellt und der Knopf daneben rutscht. */
.karte form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem;
}

.karte form > label,
.karte form > .fehler { flex: 1 0 100%; margin-bottom: 0; }

.karte form > input { flex: 1 1 14rem; }

/* MINDESTENS 16 PIXEL, und das ist keine Geschmacksfrage. Safari auf dem iPhone
   zoomt beim Antippen in jedes Feld hinein, dessen Schrift kleiner ist, und
   zoomt danach nicht von allein zurueck. Bei einem Formular mit hundert Feldern
   ist das nach dem dritten Feld unertraeglich.
   Der uebliche Griff dagegen ist maximum-scale=1 in der Viewport-Angabe. Der
   kommt hier nicht in Frage: er nimmt jedem, der schlecht sieht, das
   Vergroessern mit den Fingern. Die Schriftgroesse zu setzen kostet nichts und
   nimmt niemandem etwas.
   Knoepfe stehen bewusst nicht in dieser Liste: Safari zoomt nur in Felder, in
   die man schreibt. Eine Regel, die mehr behauptet als sie leistet, ist
   schlimmer als keine. */
input, select, textarea {
  font-size: max(1rem, 16px);
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="tel"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: .5rem .15rem;
  font-family: var(--sans);
  font-size: max(1.15rem, 17px);
  line-height: 1.45;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--rand);
  border-radius: 0;
  transition: border-color var(--takt), box-shadow var(--takt);
}

textarea {
  resize: vertical;
  font-size: max(1.02rem, 16px);
  padding: .5rem .6rem;
  border: 1.5px solid var(--rand);
  border-radius: 5px;
  background: var(--flaeche-leise);
}

/* NUR die Felder, in die man schreibt, verlieren ihren Rahmen. Ein Haken oder
   ein Radioknopf behaelt den des Browsers, sonst sieht niemand mehr, wo er mit
   der Tastatur steht. */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--gold);
  /* Die Linie faerbt sich und die Flaeche bekommt einen Hauch Gold. Ein harter
     Rahmen wuerde die Zeile verschieben, und eine blosse Farbaenderung an einer
     Haarlinie sieht man zu schlecht. In der Tiefe gluht die Linie zusaetzlich. */
  background: var(--gold-grund);
  box-shadow: var(--wurf);
}

textarea:focus { box-shadow: 0 0 0 3px var(--schein); }

input[aria-invalid="true"] { border-color: var(--fehler); }
input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--fehler-schein); }

input.code {
  max-width: 12rem;
  font: 600 1.6rem/1 var(--sans);
  letter-spacing: .35em;
  text-align: center;
  border-bottom-width: 2px;
}

/* --- Knoepfe ---------------------------------------------------------------
   Zwei Stufen, und der Unterschied ist die Handlung und nicht der Geschmack.
   Was weiterfuehrt, traegt die staerkste Farbe der Seite. Was daneben steht,
   ist eine Zeile Text mit einer Unterlaenge, denn ein zweiter voller Knopf
   nimmt dem ersten die Bedeutung. */

button, .knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .8rem 1.8rem;
  font: 700 .98rem/1 var(--sans);
  color: var(--knopf-text);
  background: var(--knopf);
  border: 1px solid var(--knopf);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--takt), border-color var(--takt), box-shadow var(--takt), transform var(--takt);
}

button:hover, .knopf:hover {
  background: var(--knopf-hell);
  border-color: var(--knopf-hell);
  transform: translateY(-1px);
  box-shadow: var(--wurf);
}

/* Tiefgold und nicht Gold: Gold auf Weiss hat 2,8 zu 1, fuer einen
   Fokusrahmen zu wenig. Tiefgold hat 4,4, auf dem Kopfband 3,8, und in der
   Tiefe ist es das hellere Gold. Seit dem 19. September, gefunden von der
   unabhaengigen Pruefung an der Anmeldeseite. */
button:focus-visible,
.knopf:focus-visible,
a:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--gold-tief);
  outline-offset: 2px;
}

/* Der zweite Knopf einer Seite: Rand statt Flaeche. Ein zweiter voller Knopf
   nimmt dem ersten die Bedeutung. */
.knopf.zweitrangig,
button.zweitrangig {
  color: var(--stark);
  background: transparent;
  border-color: var(--feldlinie);
}

.knopf.zweitrangig:hover,
button.zweitrangig:hover {
  color: var(--stark);
  background: var(--flaeche);
  border-color: var(--stark);
}

button.schlicht {
  color: var(--stark);
  background: transparent;
  border-color: var(--rand);
}

button.schlicht:hover {
  background: var(--flaeche);
  border-color: var(--stark);
  color: var(--stark);
}

/* Der leise Knopf. Er war bis zum 14. September weiss auf weiss, weil er fuer
   das dunkle Kopfband gebaut war. Jetzt ist er gar kein Knopf mehr, sondern
   eine Zeile, und damit kann er nicht mehr unlesbar werden. */
button.still {
  min-height: 2.75rem;
  padding: .6rem .25rem;
  color: var(--leise);
  background: none;
  border: 0;
  font: 400 .95rem/1.4 var(--sans);
  text-decoration: underline;
  text-underline-offset: .3em;
  text-decoration-color: var(--rand);
}

button.still:hover {
  color: var(--stark);
  background: none;
  transform: none;
  box-shadow: none;
  text-decoration-color: var(--gold);
}

/* Im Kopfband steht der Abmeldeknopf auf der dunkelsten Flaeche und braucht
   dort die umgekehrte Behandlung. */
.kopf button.schlicht {
  color: var(--band-text);
  border-color: rgba(255, 255, 255, .35);
  min-height: 2.25rem;
  padding: .45rem 1rem;
  font-weight: 600;
}

.kopf button.schlicht:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .6);
  color: var(--band-text);
  transform: none;
  box-shadow: none;
}

.abmelden { display: inline-block; }

/* --- Startseite ------------------------------------------------------------
   Oben die eine Handlung, die jetzt ansteht, darunter der Weg, auf dem der
   Mandant sich befindet. Drei gleich grosse Kacheln nebeneinander waren das
   Falsche: sie behaupten, dass drei Dinge gleich wichtig und gleichzeitig
   moeglich sind, und beides stimmt nicht. Ausserdem liess das Raster bei drei
   Kacheln in zwei Spalten ein Loch. */

.marker {
  display: inline-block;
  font-size: .85rem;
  color: var(--leise);
}

/* Die Aufforderung zum Passkey, solange keiner eingerichtet ist. Oben, weil
   man hier zum ersten Passkey kommt und das nicht ueberlesen soll, aber
   leise: eine Kante auf dem Papier, kein Gold, ein Knopf mit Rand. Die eine
   Handlung in Tiefe bleibt der Fragebogen. */
.sichern {
  margin: 0 0 1rem;
  padding: 1.15rem 1.35rem 1.35rem;
  border: 1px solid var(--linie);
  border-radius: 6px;
}

.sichern h2 { margin: 0 0 .35rem; }
.sichern p { margin: 0 0 1rem; max-width: 56ch; }

.weitermachen {
  margin: 2.5rem 0 3rem;
  padding: clamp(1.25rem, 1rem + 2vw, 2rem);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
}

.weitermachen h2 {
  margin: 0;
  font-size: clamp(1.2rem, 1.05rem + .8vw, 1.5rem);
}

.weitermachen .satz { margin: 1.5rem 0 1.75rem; max-width: 54ch; }

.weitermachen .fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.5rem;
}

/* Der Absendeknopf steht in einem Formular, weil Absenden eine Handlung ist
   und kein Verweis. Das Formular selbst soll in der Zeile nichts aendern. */
.weitermachen .fuss form { display: inline-flex; margin: 0; }

/* Was noch fehlt, steht am anderen Ende der Zeile und nicht neben dem Knopf.
   Es ist eine Auskunft und keine zweite Handlung. */
.weitermachen .fuss .marker { margin-left: auto; }

/* Was das Absenden nicht aufhaelt, steht unter der Knopfzeile und nicht in
   ihr: eine Auskunft vor dem Druecken, keine dritte Handlung. */
.weitermachen .nachsatz { margin: 1rem 0 0; max-width: 54ch; }

/* Eine Folge und keine Aufzaehlung: die Schritte bauen aufeinander auf, und
   deshalb ist die Nummer hier Inhalt und kein Schmuck. */
.weg { list-style: none; margin: 0 0 2.5rem; padding: 0; }

.station {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  align-items: start;
  gap: .9rem;
  padding: 1.2rem .25rem;
  border-top: 1px solid var(--linie);
}

.station:last-child { border-bottom: 1px solid var(--linie); }
.station .nr { padding-top: .4rem; }
.station .marker { padding-top: .35rem; }
.station h3 { margin: 0 0 .25rem; font: 400 1.1rem/1.3 var(--serif); color: var(--stark); }
.station p { margin: 0; max-width: 56ch; font-size: .92rem; color: var(--leise); }

/* Die Station, an der er gerade steht. Gold markiert genau das, und die Nummer
   wird dafuer nicht groesser, sondern bekommt eine Kante. */
.station.jetzt {
  border-left: 2px solid var(--gold);
  margin-left: -1rem;
  padding-left: .8rem;
  background: var(--gold-grund);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.station.jetzt .nr { color: var(--gold-tief); }
.station.jetzt .marker { color: var(--gold-tief); font-weight: 600; }

/* --- Kopfzeile und Fortschritt ---------------------------------------------
   Zwoelf Striche, einer je Abschnitt. Sie sagen in einem Blick, wieviel der
   Bogen ueberhaupt ist und wo man darin steht. Ein Prozentbalken sagt das
   nicht: er misst etwas, das niemand in Prozent denkt. */

.zurueck { margin: 0 0 1.25rem; font-size: .9rem; }
.zurueck a { color: var(--leise); }
.zurueck a:hover { color: var(--gold); }

.kopfzeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  flex-wrap: wrap;
}

.stelle {
  font-size: .82rem;
  color: var(--leise);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.balken {
  display: flex;
  gap: 3px;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}

.stufe {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--linie);
  position: relative;
}

/* Jeder Strich fuellt sich mit dem, was in seinem Abschnitt beantwortet ist.
   Damit sagt die Leiste nicht nur wo man ist, sondern auch wie weit. */
.stufe::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 2px;
  background: var(--gold);
  transition: width var(--takt);
}

.stufe.zustand-fertig { background: var(--gold); }

/* Der laufende Abschnitt traegt einen Kamm nach unten: man findet seine Stelle,
   ohne die Farben zu vergleichen. */
.stufe.hier::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

.balken.wegweiser { margin-bottom: .5rem; }

.balken.wegweiser a {
  display: block;
  height: 100%;
  position: relative;
  border-radius: 2px;
}

/* Ein Strich von drei Pixeln ist kein Ziel fuer einen Daumen. Die Flaeche, die
   ihn trifft, ist deshalb vierundzwanzig Pixel hoch und unsichtbar. */
.balken.wegweiser a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -11px;
  bottom: -11px;
}

.balken.wegweiser a:hover { background: var(--gold); }

/* --- Uebersicht, was noch fehlt --------------------------------------------
   Das Herzstueck. Wer nach einer Woche wiederkommt, sucht die eine Angabe, die
   er offengelassen hat, und soll sie nicht suchen muessen. */

/* Kein Etikett in Versalien ueber einer Ueberschrift. Es traegt nichts, was die
   Ueberschrift nicht selbst sagt, und es ist das erste, woran man eine
   Gestaltung von der Stange erkennt. Die Regel steht in docs/GESTALTUNG.md,
   und meine erste Fassung dieser Seite hat sie gebrochen. */
h2.titel {
  margin: 2.75rem 0 1.25rem;
  font: 400 clamp(1.35rem, 1.1rem + 1.4vw, 1.9rem)/1.18 var(--serif);
  letter-spacing: -.015em;
  color: var(--stark);
  text-wrap: balance;
}

h2.titel.klein {
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem);
  margin-bottom: .5rem;
  color: var(--leise);
}

.offenliste {
  display: grid;
  gap: .5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  max-width: 44rem;
}

.offenliste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .9rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 7px;
  transition: border-color var(--takt), box-shadow var(--takt);
}

.offenliste li:hover { border-color: var(--gold); box-shadow: var(--wurf); }

.offenliste a { text-decoration: none; color: var(--stark); }
.offenliste a:hover { color: var(--gold); }
.offenliste .was { display: block; font-size: .98rem; }
.offenliste .wo { display: block; margin-top: .15rem; font-size: .8rem; color: var(--leise); }

/* Ein Buendel: der Abschnitt als Zeile, darunter seine offenen Stellen. */
.buendel { margin: 0 0 1.5rem; max-width: 44rem; }
.buendel > .wo { margin: 0 0 .4rem; font-size: .82rem; color: var(--leise); }
.buendel .offenliste { margin-bottom: 0; }

.marker-nachtrag, .marker-pflicht {
  flex: none;
  font-size: .72rem;
  letter-spacing: .04em;
  padding: .22rem .6rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold-tief);
  background: var(--gold-grund);
  white-space: nowrap;
}

.marker-pflicht { border-color: var(--rand); color: var(--leise); background: transparent; }

/* Eine fehlende Unterlage ist wie ein Nachtrag eine Warnung und kein Muss.
   Sie traegt deshalb dasselbe Gewicht und ein eigenes Wort. */
.marker-dokument { border-color: var(--gold); color: var(--gold-tief); background: var(--gold-grund); }

/* --- Uebersicht, alle Abschnitte -------------------------------------------
   Die Nummerierung ist hier Inhalt und kein Schmuck: der Bogen wird der Reihe
   nach durchgearbeitet, und der Mandant nennt Daniel am Telefon eine Nummer. */

.abschnitte {
  display: grid;
  gap: 0;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  max-width: 46rem;
}

.abschnitt {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  padding: .85rem .25rem;
  border-top: 1px solid var(--linie);
}

.abschnitt:last-child { border-bottom: 1px solid var(--linie); }

.nr {
  font: 600 .8rem/1 var(--sans);
  color: var(--leise);
  font-variant-numeric: tabular-nums;
}

.abschnitt a { font-weight: 600; text-decoration: none; }
.abschnitt a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.abschnitt .titel { color: var(--leise); }

.zaehlwerk {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .85rem;
  color: var(--leise);
  font-variant-numeric: tabular-nums;
}

/* "7 von 12" bleibt beisammen. Bricht die Zahl um, rutscht der Balken daneben
   in die naechste Zeile und die Spalte franst aus. */
.zahl { white-space: nowrap; }

.mini {
  width: 3.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--linie);
  overflow: hidden;
}

.mini > span { display: block; height: 100%; background: var(--gold); }

/* Alle vier Zustaende tragen ein eigenes Gewicht. Zeichnet man nur "fertig"
   aus, sehen die drei uebrigen gleich aus, und dann sagt die Spalte nur noch,
   was fertig ist, und nicht, wo jemand mittendrin steckt. */
.zustand-fertig .marker { color: var(--gold-tief); font-weight: 600; }
.zustand-begonnen .marker { color: var(--text); }
.zustand-offen .marker { color: var(--leise); }

/* --- Ein Abschnitt: die Fragen ---------------------------------------------
   Jede Frage gross und in der Serifenschrift. Eine Frage nach dem Vermoegen
   eines Menschen ist keine Feldbeschriftung in einer Maske, und sie soll auch
   nicht so aussehen. */

.fragebogen { margin-top: 2rem; padding-bottom: 1rem; }

.fragen { display: grid; gap: 0; }

.block {
  padding: 1.75rem 0 1.75rem 1.6rem;
  border-top: 1px solid var(--linie);
  /* Platz fuer die goldene Kante, die beim Sprung aus der Uebersicht
     aufleuchtet. Sie liegt immer da, sichtbar wird sie nur im Ziel. */
  border-left: 2px solid transparent;
  margin-left: -1.6rem;
  transition: border-left-color var(--takt), background var(--takt);
}

.block:first-child { border-top: 0; padding-top: .5rem; }

/* Wer aus der Liste "Das fehlt noch" hierher springt, soll nicht raten
   muessen, welche der zwoelf Fragen gemeint war. Ohne Skript, allein ueber
   die Adresse. */
.block:target {
  border-left-color: var(--gold);
  background: var(--gold-grund);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.zeile-oben {
  display: flex;
  align-items: baseline;
  gap: .625rem;
  margin-bottom: .35rem;
}

/* Gefuellt heisst beantwortet, ein Ring heisst vermerkt, leer heisst offen.
   Der Unterschied ist auch ohne Farbe zu sehen, denn Farbe allein traegt
   keinen Zustand. */
.punkt {
  flex: none;
  width: .625rem;
  height: .625rem;
  margin-top: .5rem;
  border: 1px solid var(--rand);
  border-radius: 50%;
  background: transparent;
  align-self: flex-start;
}

.zustand-fertig > .zeile-oben > .punkt { background: var(--gold); border-color: var(--gold); }
.zustand-nichtzu > .zeile-oben > .punkt { background: var(--gold); border-color: var(--gold); opacity: .5; }
.zustand-nachtrag > .zeile-oben > .punkt { border-color: var(--gold); border-width: 2px; }

.fragetext {
  display: block;
  margin: 0;
  font: 400 clamp(1.2rem, 1.05rem + .8vw, 1.6rem)/1.24 var(--serif);
  letter-spacing: -.012em;
  color: var(--stark);
  max-width: 38ch;
  text-wrap: balance;
}

.pflicht { margin-left: .15rem; color: var(--gold); font-weight: 400; }

.feldhinweis {
  margin: 0 0 .9rem var(--einzug);
  max-width: 52ch;
  font-size: .9rem;
  color: var(--leise);
}

/* Eine Achse fuer alle Felder. Springt die rechte Kante von Feld zu Feld,
   wirkt eine Seite unruhig, ohne dass jemand sagen koennte warum. */
.eingabe {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-left: var(--einzug);
  /* min() statt einer festen Obergrenze: auf dem Rechner 30rem, auf einem
     schmalen Geraet die volle Breite, ohne dass eine Bruchkante noetig ist. */
  max-width: min(30rem, 100%);
}

/* Ohne das schrumpft ein Flex-Kind nie unter seine eigene Mindestbreite, und ein
   Eingabefeld bringt eine mit. Auf einem schmalen Geraet ragt es dann heraus. */
.eingabe > * { min-width: 0; }

/* Jede Art von Antwort bekommt die Linie, die zu ihr passt. Eine Zahl braucht
   keine dreissig Zentimeter: laesst man ihr die volle Breite, steht das
   Eurozeichen am anderen Ende der Seite und gehoert optisch zu nichts mehr.
   Ein Satz dagegen braucht Platz. */
.typ-betrag .eingabe,
.typ-prozent .eingabe,
.typ-zahl .eingabe,
.typ-datum .eingabe { max-width: min(19rem, 100%); }

.typ-auswahl .eingabe,
.typ-ja_nein .eingabe { max-width: min(26rem, 100%); }

.typ-text .eingabe { max-width: min(34rem, 100%); }

.typ-langtext .eingabe { max-width: min(40rem, 100%); }

/* Ein Textfeld mit langen Zeilen schiebt die Seite sonst auf schmalen Geraeten
   auf. Umbrechen statt schieben. */
.block textarea { overflow-wrap: anywhere; }

.einheit {
  flex: none;
  color: var(--leise);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

/* Ja und Nein als zwei Flaechen. Ein Radioknopf von zwoelf Pixeln ist auf einem
   Telefon ein Zielchen, eine Flaeche trifft auch der Daumen. */
.wahl {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
}

.wahl input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: -1px;
}

.wahl label {
  flex: 1 1 8rem;
  max-width: 14rem;
  padding: .8rem 1.1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  font-size: 1rem;
  transition: border-color var(--takt), background var(--takt), box-shadow var(--takt);
}

.wahl label:hover { border-color: var(--gold); }

.wahl input:checked + label {
  border-color: var(--gold);
  background: var(--gold-grund);
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--schein);
}

.wahl input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --- Vermerke --------------------------------------------------------------
   "Trifft nicht zu" und "Trage ich nach" stehen neben ihrer Beschriftung und
   nicht darueber. Bis zum 14. September sassen sie untereinander, weil eine
   allgemeinere Regel display: block durchgesetzt hat. */

/* Die Meldung zu einer Eingabe, die nicht angenommen wurde. Sie steht unter
   dem Feld, an dem getippt wurde, und nicht als Block am Kopf der Seite: bei
   hundert Feldern findet man die Stelle sonst nicht wieder. */
.fehler.verworfen {
  margin: .6rem 0 0 var(--einzug);
  max-width: 52ch;
}

.vermerke {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  margin: .9rem 0 0 var(--einzug);
}

.vermerk {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  font-size: .92rem;
  font-weight: 400;
  color: var(--leise);
  cursor: pointer;
}

.vermerk:hover { color: var(--text); }

.vermerk input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  flex: none;
  accent-color: var(--gold);
}

/* --- Wiederholbare Bloecke -------------------------------------------------
   Ein Eintrag ist ein eigenes Stueck Papier auf dem Bogen. Er braucht eine
   Kante, weil sonst bei drei Konten mit je sechs Fragen niemand mehr sieht, wo
   das eine aufhoert und das naechste anfaengt. */

.eintrag {
  margin: 0 0 1.25rem;
  padding: 0 clamp(1rem, .75rem + 1.5vw, 1.75rem) .5rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
}

.eintragskopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  flex-wrap: wrap;
  padding: 1.1rem 0 .25rem;
  border-bottom: 1px solid var(--linie);
}

.eintragskopf h2 {
  margin: 0;
  font-size: 1.15rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .6rem;
}

/* Wie der Eintrag heisst, sobald er genug traegt, um einen Namen zu haben.
   Die Vorlage dafuer steht in der Erhebungsdefinition am Block. */
.benannt {
  font: 400 .9rem/1.4 var(--sans);
  color: var(--gold-tief);
}

.eintrag .block:first-child { padding-top: 1.25rem; }
.eintrag .block:last-child { border-bottom: 0; }

/* Innerhalb eines Eintrags eine Stufe kleiner. Die Ueberschrift des Eintrags
   soll die groesste Schrift der Karte sein, sonst zerfaellt eine Seite mit drei
   Konten in achtzehn gleich laute Fragen. */
.eintrag .fragetext { font-size: clamp(1.05rem, .95rem + .55vw, 1.3rem); }
.eintrag .block { padding-top: 1.35rem; padding-bottom: 1.35rem; }

/* Der Knopf, der einen Eintrag wegnimmt, ist absichtlich der leiseste auf der
   Seite. Er nimmt etwas weg, und was etwas wegnimmt, draengt sich nicht auf. */
.eintragskopf .still { min-height: 2.25rem; padding: .35rem .25rem; font-size: .88rem; }

.anbau { margin: 0 0 2rem; }

.leer {
  margin: 1.5rem 0;
  color: var(--leise);
  max-width: 52ch;
}

/* Die Rueckfrage vor dem Entfernen. */
.entscheidung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.5rem;
}

.entscheidung form { display: inline-flex; }

/* --- Checkliste der Unterlagen ---------------------------------------------
   Je Punkt ein Haken, darunter, was schon dazu daliegt, und ein Feld zum
   Hochladen. Ein angehakter Punkt hebt sich ab, damit beim Ueberfliegen
   sichtbar ist, was der Mandant zugesagt hat. */

.liste { list-style: none; margin: 2rem 0; padding: 0; }

.posten {
  padding: 1rem 0 1.1rem;
  border-top: 1px solid var(--linie);
}

.posten:last-child { border-bottom: 1px solid var(--linie); }

/* Wer aus der Uebersicht oder von der Absendeseite hierher springt, soll nicht
   raten muessen, welcher der achtzehn Punkte gemeint war. Dieselbe Kante wie
   bei einer Frage. */
.posten:target {
  border-left: 2px solid var(--gold);
  margin-left: -1rem;
  padding-left: .8rem;
  background: var(--gold-grund);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.posten-haken {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin: 0;
  cursor: pointer;
  font: 400 clamp(1rem, .95rem + .35vw, 1.15rem)/1.35 var(--serif);
  color: var(--stark);
}

.posten-haken input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  flex: none;
  accent-color: var(--gold);
}

.posten.angehakt .posten-haken { color: var(--stark); }

/* Ein Dateifeld ist das einzige Bedienelement, dessen Aussehen der Browser
   bestimmt. Es bekommt deshalb nur Platz und keine Gestaltung, die auf dem
   einen Geraet passt und auf dem naechsten zerfaellt. */
.posten-datei { margin: .7rem 0 0 var(--einzug); }

/* DAS FELD ERSCHEINT MIT DEM HAKEN, und zwar ohne eine Zeile Skript.
   Achtzehn Auswahlfelder auf einmal sind eine Wand, und siebzehn davon braucht
   niemand. Wer sagt, er habe den Depotauszug, bekommt das Feld dafuer.

   Hinter @supports, weil ein Browser ohne :has sonst ein Feld verstecken
   wuerde, das er nicht wieder hervorholen kann. Dort bleibt alles sichtbar,
   und die Seite ist unbequemer statt kaputt. */
@supports selector(:has(*)) {
  .posten .posten-datei { display: none; }
  .posten:has(input[type="checkbox"]:checked) .posten-datei { display: block; }
}
.posten-datei input[type="file"] { font-size: max(1rem, 16px); color: var(--leise); max-width: 100%; }

.dateien { list-style: none; margin: .6rem 0 0 var(--einzug); padding: 0; display: grid; gap: .35rem; }

.dateien li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  font-size: .93rem;
}

.dateien .still { min-height: 2rem; padding: .2rem .25rem; font-size: .85rem; }

.posten .fehler { margin: .6rem 0 0 var(--einzug); max-width: 52ch; }

/* --- Die Leiste unten ------------------------------------------------------
   Sie klebt, weil ohne Skript niemand im Hintergrund speichert: der Knopf muss
   immer erreichbar sein. Deshalb braucht das Formular darunter Platz, sonst
   liegt sie ueber der letzten Frage, und genau das ist am 14. September auf
   einem breiten Bildschirm passiert. */

.knopfleiste {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin-top: 2rem;
  padding: 1.1rem 0 .9rem;
  background: var(--grund);
  border-top: 1px solid var(--linie);
}

.knopfleiste .haupt { order: 2; }
.knopfleiste .still { order: 1; }

@media (max-width: 34rem) {
  .inhalt { padding: 1.75rem 1.1rem 3rem; }
  .marke { font-size: .85rem; }
  .karte { margin-top: 1.25rem; }
  .abschnitt { grid-template-columns: 1.5rem minmax(0, 1fr); row-gap: .3rem; }
  .zaehlwerk { grid-column: 2; }
  .offenliste li { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .knopfleiste { justify-content: stretch; }
  .knopfleiste .haupt { flex: 1 1 100%; }
  .block { padding-left: 1.1rem; margin-left: -1.1rem; }
  .station { grid-template-columns: 1.5rem minmax(0, 1fr); row-gap: .35rem; }
  .station .marker { grid-column: 2; padding-top: 0; }
  .weitermachen .fuss .marker { margin-left: 0; }
}

/* --- Der Anteil in Stufen -------------------------------------------------
   Einundzwanzig Klassen statt eines style-Merkmals am Element. Die
   Inhaltsrichtlinie erlaubt keinen Stil im Dokument, und das ist der Preis
   dafuer. Fuenf Prozent Schrittweite sind genau genug fuer einen Balken von
   sechsundfuenfzig Pixeln Breite. */

.mini > .anteil-0 { width: 0%; }
.mini > .anteil-5 { width: 5%; }
.mini > .anteil-10 { width: 10%; }
.mini > .anteil-15 { width: 15%; }
.mini > .anteil-20 { width: 20%; }
.mini > .anteil-25 { width: 25%; }
.mini > .anteil-30 { width: 30%; }
.mini > .anteil-35 { width: 35%; }
.mini > .anteil-40 { width: 40%; }
.mini > .anteil-45 { width: 45%; }
.mini > .anteil-50 { width: 50%; }
.mini > .anteil-55 { width: 55%; }
.mini > .anteil-60 { width: 60%; }
.mini > .anteil-65 { width: 65%; }
.mini > .anteil-70 { width: 70%; }
.mini > .anteil-75 { width: 75%; }
.mini > .anteil-80 { width: 80%; }
.mini > .anteil-85 { width: 85%; }
.mini > .anteil-90 { width: 90%; }
.mini > .anteil-95 { width: 95%; }
.mini > .anteil-100 { width: 100%; }

/* Dieselben Stufen fuer die Striche oben. */

.stufe.anteil-5::before { width: 5%; }
.stufe.anteil-10::before { width: 10%; }
.stufe.anteil-15::before { width: 15%; }
.stufe.anteil-20::before { width: 20%; }
.stufe.anteil-25::before { width: 25%; }
.stufe.anteil-30::before { width: 30%; }
.stufe.anteil-35::before { width: 35%; }
.stufe.anteil-40::before { width: 40%; }
.stufe.anteil-45::before { width: 45%; }
.stufe.anteil-50::before { width: 50%; }
.stufe.anteil-55::before { width: 55%; }
.stufe.anteil-60::before { width: 60%; }
.stufe.anteil-65::before { width: 65%; }
.stufe.anteil-70::before { width: 70%; }
.stufe.anteil-75::before { width: 75%; }
.stufe.anteil-80::before { width: 80%; }
.stufe.anteil-85::before { width: 85%; }
.stufe.anteil-90::before { width: 90%; }
.stufe.anteil-95::before { width: 95%; }
.stufe.anteil-100::before { width: 100%; }

/* --- Passkey ---------------------------------------------------------------
   Auf "Dein Zugang". Verborgen, bis das Skript weiss, dass dieser Browser
   Passkeys kann. Auf der Anmeldeseite steht er im Fuss des Blatts, siehe
   "Eingang". */
.passkey { margin: 0 0 2rem; }
.passkey .knopf { width: 100%; }

/* Das Skript blendet den Bereich ein. Keine Anzeigeregel darf das hidden
   ueberstimmen, sonst stuende in einem Browser ohne Passkeys ein Knopf, der
   nichts tut. */
[data-passkey-bereich][hidden] { display: none; }

/* Waehrend das Geraet fragt, ist der Knopf gesperrt. Ohne sichtbaren Zustand
   drueckt man ihn ein zweites Mal und bekommt zwei Fenster. */
button:disabled {
  opacity: .55;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

.passkeys { list-style: none; margin: 1.6rem 0; padding: 0; }
.passkeys li {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  justify-content: space-between;
  padding: .8rem 0;
  border-top: 1px solid var(--linie);
}
.passkeys li:last-child { border-bottom: 1px solid var(--linie); }
.passkeys .gesperrt { color: var(--leise); text-decoration: line-through; }

/* --- Eingang: die Schwelle -------------------------------------------------
   Die Seiten vor der Anmeldung: Anmelden, Sieh in dein Postfach, Fast
   geschafft und die Hinweise. Gebaut am 19. September aus drei Entwuerfen,
   begruendet in docs/GESTALTUNG.md unter "Die Anmeldung".

   DAS KOPFBAND STRECKT SICH. Nach der Anmeldung steht oben das schmale Band in
   Tiefe mit der goldenen Haarlinie. Davor ist dasselbe Band hoch, traegt
   Daniels Zeichen, den Namen und die Ueberschrift, und das Blatt mit dem
   Formular liegt quer ueber der Haarlinie. Wer sich angemeldet hat, sieht auf
   der naechsten Seite dasselbe Band, nur flach. */

.eingang-seite {
  --rinne: clamp(1rem, .5rem + 2.5vw, 2rem);
  --blattbreite: 35rem;
  --blattrand: clamp(1.25rem, .7rem + 2.4vw, 2.75rem);
  --ueberstand: clamp(4.5rem, 3rem + 5vw, 8.5rem);
  --winkel: clamp(.8rem, .6rem + .6vw, 1.15rem);
  --winkel-abstand: clamp(.45rem, .3rem + .5vw, .75rem);
  /* So weit bleibt Text von der oberen und unteren Kante weg, damit er nicht
     in einen Winkel laeuft. */
  --blatt-luft: calc(var(--winkel-abstand) + var(--winkel) + .75rem);
  display: block;
  padding-bottom: 4rem;
}

.schwelle {
  padding:
    clamp(1.5rem, 1rem + 1.6vw, 2.5rem)
    var(--rinne)
    calc(var(--ueberstand) + clamp(1.5rem, 1rem + 1.4vw, 2.25rem));
  background: var(--band);
  color: var(--band-text);
  border-bottom: 1px solid var(--gold);
}

/* Eine Achse fuer alles: Zeichen, Ueberschrift, Satz, Feld und Knopf beginnen
   an derselben Kante. Die Spalte oben traegt deshalb denselben Innenrand wie
   das Blatt darunter. */
.schwelle-spalte {
  max-width: var(--blattbreite);
  margin: 0 auto;
  padding: 0 var(--blattrand);
}

.absender {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 clamp(2rem, 1.25rem + 3vw, 3.5rem);
}

/* Daniels Zeichen, ohne das Quadrat des Favicons: auf dem Band ist das Band
   das Quadrat. Es steht als SVG im Dokument und nimmt so die Farbe des
   Merkmals an, in der Tiefe das hellere Gold. */
.zeichen {
  flex: none;
  width: 3rem;
  height: 3rem;
  color: var(--gold);
}

.zeichen text { font-family: var(--serif); }

.absender-text { margin: 0; }

.absender-name {
  display: block;
  font: 600 1.02rem/1.25 var(--serif);
  letter-spacing: .04em;
}

.absender-bereich {
  display: block;
  margin-top: .2rem;
  font-size: .85rem;
  line-height: 1.3;
  color: var(--band-leise);
}

.schwelle h1 {
  margin: 0;
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem);
  color: var(--band-text);
}

/* --- Das Blatt -------------------------------------------------------------
   Es ragt aus der Tiefe ins Papier, wie ein Dokument auf einem dunklen Tisch.
   Kein Schatten: die Kante reicht. */

.eingang-inhalt {
  max-width: calc(var(--blattbreite) + 2 * var(--rinne));
  margin: 0 auto;
  padding: 0 var(--rinne);
}

.blatt {
  position: relative;
  margin-top: calc(-1 * var(--ueberstand));
  background: var(--flaeche);
  border: 1px solid var(--blatt-kante);
  border-radius: 3px;
}

/* Die Passermarken aus Daniels Zeichen an den vier Ecken. Ein Rahmen, von dem
   eine Maske nur die Ecken stehen laesst. In Ruhe leise, golden erst, wenn
   der Mandant im Blatt arbeitet: Gold wird verdient. */
.blatt::before {
  content: "";
  position: absolute;
  inset: var(--winkel-abstand);
  border: 1.5px solid var(--passer);
  pointer-events: none;
  -webkit-mask:
    conic-gradient(at var(--winkel) var(--winkel), transparent 75%, #000 0)
    0 0 / calc(100% - var(--winkel)) calc(100% - var(--winkel));
  mask:
    conic-gradient(at var(--winkel) var(--winkel), transparent 75%, #000 0)
    0 0 / calc(100% - var(--winkel)) calc(100% - var(--winkel));
  transition: border-color var(--takt);
}

.blatt:focus-within::before { border-color: var(--gold); }

.blatt-kern { padding: max(var(--blattrand), var(--blatt-luft)) var(--blattrand); }

.blatt p { text-wrap: pretty; }
.blatt-kern > :last-child,
.blatt-fuss > :last-child { margin-bottom: 0; }

/* Ein Hinweis auf dem Blatt meldet nur etwas, etwa "Du bist abgemeldet."
   Deshalb nicht .hinweis mit dem goldenen Faden: Gold wird verdient. Eine
   Zeile mit einer Linie darunter. */
.blatt-hinweis {
  margin: 0 0 1.5rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--linie);
  font-weight: 600;
  color: var(--stark);
}

.blatt-satz { margin: 0 0 1.75rem; max-width: 46ch; font-size: 1.0625rem; }

.blatt label {
  display: block;
  margin: 0 0 .35rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--stark);
}

/* Die Felder auf dem Blatt. Die Fehlerregeln stehen danach und sind gleich
   spezifisch, sonst ueberdeckt die Fokuslinie genau die Stelle, die der
   Mandant korrigieren soll. Aus der Linie wird dabei kein Kasten. */
.blatt input:is([type="email"], [type="text"]) { border-bottom-color: var(--feldlinie); }

.blatt input:is([type="email"], [type="text"]):focus {
  border-bottom-color: var(--gold-tief);
  box-shadow: var(--feld-fokus);
}

/* Die rote Linie doppelt so kraeftig, auch in Ruhe: eine Haarlinie in Rot
   sieht man neben dem Satz darunter kaum. */
.blatt input[aria-invalid="true"],
.blatt input[aria-invalid="true"]:focus {
  border-bottom-color: var(--fehler);
  box-shadow: inset 0 -1.5px 0 var(--fehler);
}

/* Im Fehler bleibt die Linie rot, und dann traegt sie den Fokus nicht mehr.
   Ein Rahmen zeigt ihn, sonst sieht man nach dem Absenden nicht, dass man
   schon wieder im Feld steht. */
.blatt input[aria-invalid="true"]:focus {
  outline: 2px solid var(--gold-tief);
  outline-offset: 3px;
}

.blatt .fehler:empty { margin: 0; }

.blatt-formular input { margin: 0 0 1.5rem; }
.blatt-formular .fehler { margin: -1.1rem 0 1.25rem; }
.blatt-formular button,
.blatt-kern > .knopf { width: 100%; }

/* Der erste Besuch. Die Frage steht fett in eigener Zeile, damit man sie
   findet, der Rest leise darunter. Kein Kasten, keine Farbe. */
.erstbesuch {
  margin: 1.5rem 0 0;
  font-size: .93rem;
  color: var(--leise);
  max-width: 52ch;
}

.erstbesuch .frage {
  display: block;
  margin-bottom: .15rem;
  font-weight: 600;
  color: var(--stark);
}

/* --- Der zweite Weg --------------------------------------------------------
   Der Fuss des Blatts: der Passkey auf der Anmeldeseite, der Code auf der
   Seite danach. Eine eigene Tonlage statt einer Linie. Kann der Browser
   keine Passkeys, faellt der Fuss ganz weg, und das Blatt ist trotzdem
   fertig. Der Fuss selbst bekommt keine Anzeigeregel, damit hidden greift. */

.blatt-fuss {
  padding:
    max(calc(var(--blattrand) * .8), 1.25rem)
    var(--blattrand)
    max(calc(var(--blattrand) * .8), var(--blatt-luft));
  background: var(--blatt-fuss);
  border-top: 1px solid var(--linie);
  border-radius: 0 0 2px 2px;
}

.blatt-fuss h2 {
  margin: 0 0 .4rem;
  font-size: clamp(1.1rem, 1rem + .4vw, 1.25rem);
  text-wrap: balance;
}

.blatt-fuss p { max-width: 50ch; }

.passkey-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.1rem;
}

.passkey-zeile .oder { margin: 0; font-size: .95rem; color: var(--leise); }

.blatt button.schlicht { border-color: var(--feldlinie); }
.blatt button.schlicht:hover { border-color: var(--stark); }

.passkey-fuer { margin: .75rem 0 0; font-size: .88rem; color: var(--leise); }

/* Nach der Wahl im Mailfeld, direkt unter dem Feld: dass etwas geschieht,
   oder was nicht geklappt hat. Leer nimmt sie keinen Platz, bleibt aber im
   Dokument, damit die Vorlesesoftware sie ansagt. */
.blatt-formular .passkey-stand { margin: -1.1rem 0 1.25rem; font-size: .9rem; color: var(--stark); }
.blatt-formular .passkey-stand.fehler { color: var(--fehler); }
.blatt-formular .passkey-stand:empty { margin: 0; }

/* Wie beim Passkey-Bereich: keine Anzeigeregel darf das hidden ueberstimmen. */
[data-passkey-ohne][hidden] { display: none; }

/* Code und Knopf auf einer Linie, wo Platz ist, sonst untereinander und der
   Knopf ueber die volle Breite wie auf der Anmeldeseite. */
.code-formular {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .35rem 1rem;
  margin-top: 1.25rem;
}

.code-formular > label,
.code-formular > .fehler { flex: 1 0 100%; margin: 0; }
.code-formular > input { flex: 1 1 8.5rem; max-width: 12rem; }
/* Der Abstand ueber dem Knopf wirkt nur, wenn er umbricht. Nebeneinander
   stehen beide unten buendig, und er verschwindet in der Zeilenhoehe. */
.code-formular > button { flex: 1 0 auto; margin-top: .85rem; order: 1; }
.code-formular > .fehler { order: 2; }

/* Wo der Knopf ohnehin unter das Feld rutscht, steht die Meldung zwischen
   beiden, direkt unter dem Feld, zu dem sie gehoert. */
@media (max-width: 22.5rem) {
  .code-formular > .fehler { order: 0; }
}

/* Eine lange Adresse bricht um, statt die Seite aufzuschieben. */
.adresse { overflow-wrap: anywhere; }

/* Unter dem Blatt: die Zusagen, die stimmen, und der Weg zurueck. An
   derselben Achse wie der Inhalt des Blatts. */
/* Ein Verweis unter dem Blatt ist eine Zeile Text, aber ein Ziel fuer den
   Daumen: 44 Pixel hoch. */
.zusage a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.zusage {
  margin: 1.4rem 0 0;
  padding: 0 var(--blattrand);
  font-size: .88rem;
  color: var(--leise);
  max-width: none;
  text-wrap: pretty;
}

@media (max-width: 34rem) {
  .absender { gap: .75rem; }
  .zeichen { width: 2.6rem; height: 2.6rem; }
  .absender-name { font-size: .95rem; }
}