/* Was der Vorgeschmack zusätzlich braucht — Anmeldung, Hochladen,
   eigene Bilder.

   `stil.css` der Testversion bleibt unverändert daneben liegen: Es ist
   die Handschrift des Archivs, und beim Vorführen soll niemand merken,
   dass hier ein anderes System beginnt. Was hier steht, ist nur das,
   was es dort noch nicht gibt.

   Zwei Maße ziehen sich durch: **44 Punkte** ist die kleinste Fläche,
   die ein Daumen sicher trifft, und **17 px** die kleinste Schrift, bei
   der iOS beim Antippen eines Feldes nicht hineinzoomt. */

/* `hidden` muss stärker sein als jedes `display` hier. Sonst steht ein
   versteckter Knopf trotzdem da — beim Ansehen am 26.09. standen „Zurück",
   „Weiter" und „Ins Archiv" übereinander. */
[hidden] { display: none !important; }

:root {
  --luft: 16px;
  --rand: max(16px, env(safe-area-inset-left));
  /* Das dunkle Menüblatt hat eigene Werte: `stil.css` kennt nur die
     helle Seite, und sieben verstreute Farbwerte im Menü wären beim
     nächsten Anfassen sieben Stellen (Review, 28.09.2026). */
  --menue-grund: rgba(24, 23, 21, .82);
  --menue-deckend: #1c1b19;
  --menue-schrift: #f4f3f0;
  --menue-leise: #a5a098;
  --menue-kante: rgba(255, 255, 255, .12);
  --menue-hover: rgba(255, 255, 255, .1);
  --menue-rot: #ff6b6b;
  --menue-rot-hell: #ff8f8f;
  --punkt: #c8552e;
}

/* --- Profil oben rechts --------------------------------------------------
   Wie in der Scin-App: links die Wortmarke, rechts das runde Zeichen,
   dahinter ein kleines Menü (Micha, 27.09.2026). Der leise Streifen mit
   Namen, „Vorführung" und „Abmelden" ist dafür weg — außen bleibt alles
   wie vorher, und angemeldet sieht man es an diesem einen Zeichen.

   Die Kopfzeile des Archivs (`stil.css .kopf`) bleibt unangetastet; sie
   bekommt hier nur einen zweiten Platz am rechten Rand. */
.kopf { display: flex; align-items: center; gap: 14px; }
.kopf .marke { margin-right: auto; }

.profil-knopf {
  flex: none; border: 0; background: none; padding: 0; margin: 0;
  cursor: pointer; display: inline-flex; align-items: center;
  /* 44 Punkte Tippfläche, ohne dass das Zeichen größer wird. */
  min-width: 44px; min-height: 44px; justify-content: center;
  margin-right: -10px;
  -webkit-tap-highlight-color: transparent; transition: transform .15s;
}
.profil-knopf:active { transform: scale(.94); }
.rund {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex: none;
  /* Weiß darunter: Das Zeichen ist rund, und unter seinem Rand soll
     nichts Dunkles stehen. */
  background: #fff; color: #111; object-fit: cover;
  font: 700 13px/1 "General Sans", system-ui, sans-serif;
}
/* **Nicht `.rund.gross`:** `.gross` ist im Archiv die große Bildfläche
   und trägt eigene Ränder — die haben den Namen im Menü überlappt
   (gefunden beim Ansehen, 27.09.2026). Eigener Name, kein Eingriff in
   `stil.css`. */
.rund-gross { width: 40px; height: 40px; font-size: 17px; }

/* --- Das Menü hinter dem Zeichen ----------------------------------------
   Ein **dunkles Blatt aus Glas**, wie in der Scin-App: Es gehört nicht
   zur Seite, sondern legt sich darüber, und man sieht, worüber es liegt.
   Das Archiv ist hell — deshalb hebt sich das Menü ab und ist sofort
   als „deine Sachen" zu lesen (Nachtrag zum Vorhaben 33, 28.09.2026).

   Die Werte sind dieselbe Machart wie beim Daumenknopf, nur dunkel:
   Unschärfe mit erhöhter Sättigung, damit die Farben darunter nicht
   grau werden. */
/* **Es fängt genau unter der Kopfzeile an, gemessen statt geraten.**
   Vorher standen hier 58px — die Kopfzeile ist am Telefon aber rund
   86px hoch, und das Blatt lag halb über dem Profilzeichen (Michas
   Bild, 01.10.2026). Die Höhe hängt an Polstern, die sich je nach
   Bildschirm ändern, also setzt `profil.js` sie beim Öffnen.

   **Ein Kind der Kopfzeile darf es dafür nicht werden**, so war der
   erste Versuch: Der Kopf hat selbst eine Unschärfe, und was darin
   liegt, kann nichts mehr verwischen, was außerhalb liegt — das Blatt
   wurde grau und flach. Die 58px bleiben als Rückfall stehen, falls
   kein Skript läuft. */
.profil-menue {
  position: fixed; top: 58px; right: var(--rand); z-index: 80;
  min-width: 244px; max-width: calc(100vw - 28px);
  /* **Es muss rollen können.** Kopf, vier Wege, „Nur für dich" und acht
     wartende Zeilen sind auf einem kleinen iPhone höher als der Schirm —
     und ein festsitzendes Blatt ohne `overflow` rollt nicht, „Abmelden"
     stünde unter der Kante (Review, 28.09.2026). */
  max-height: 72svh; overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--menue-grund);
  -webkit-backdrop-filter: saturate(180%) blur(34px);
  backdrop-filter: saturate(180%) blur(34px);
  border: .5px solid var(--menue-kante); border-radius: 20px;
  padding: 8px; color: var(--menue-schrift);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
  transform-origin: top right; animation: menue-auf .18s cubic-bezier(.2,.7,.3,1);
}
/* Ohne Unschärfe wäre ein durchscheinendes Menü unlesbar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .profil-menue { background: var(--menue-deckend); }
}
.profil-menue-kopf {
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 8px 10px 12px; border-bottom: 1px solid var(--menue-kante);
}
.profil-menue-kopf b { font: 600 16px/1.2 "General Sans", system-ui, sans-serif; }
.profil-menue a, .profil-menue button {
  width: 100%; box-sizing: border-box; text-align: left;
  /* 44 Punkte: Die eigene Auflage im Vorhaben, und vorher waren es 41. */
  min-height: 44px; display: flex; align-items: center;
  padding: 0 10px; border: 0; background: none; border-radius: 12px;
  color: var(--menue-schrift); text-decoration: none; cursor: pointer;
  font: 500 16px/1.2 "General Sans", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.profil-menue a:hover, .profil-menue button:hover { background: var(--menue-hover); }
.profil-menue a:active, .profil-menue button:active { transform: scale(.98); }
.profil-menue form { margin: 0; border-top: 1px solid var(--menue-kante);
  margin-top: 6px; padding-top: 6px; }

/* „Nur für dich" — derselbe leise Strich wie in der Scin-App. */
.menue-strich {
  margin: 10px 0 4px; padding: 10px 10px 0;
  border-top: 1px solid var(--menue-kante);
  font: 500 11.5px/1 "General Sans", system-ui, sans-serif;
  letter-spacing: .07em; text-transform: uppercase; color: var(--menue-leise);
}

/* Abmelden ist der einzige Eintrag, den man nicht versehentlich treffen
   soll. Rot, ganz unten, kleiner als die anderen. */
.menue-abmelden {
  font-size: 14.5px !important; font-weight: 600 !important;
  color: var(--menue-rot) !important;
}

/* Was noch unterwegs ist — mitten im Menü, wo man es findet. */
.menue-wartet {
  margin: 8px 0 2px; padding: 10px; border-radius: 12px;
  background: var(--menue-hover);
}
.menue-wartet h2 {
  font: 600 11.5px/1 "General Sans", system-ui, sans-serif;
  letter-spacing: .07em; text-transform: uppercase; color: var(--menue-leise); margin: 0 0 8px;
}
.menue-wartet ul { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.menue-wartet li { padding: 4px 0; line-height: 1.35; }
.menue-wartet li span { color: var(--menue-leise); }
.menue-wartet li.abgewiesen, .menue-wartet li.abgewiesen span { color: var(--menue-rot-hell); }
.menue-wartet li.abgewiesen .wortknopf { color: var(--menue-rot-hell); margin-left: 6px; }
.menue-leise { margin: 8px 0 0; font-size: 12.5px; color: var(--menue-leise); }

/* Der Punkt am Profilzeichen, solange etwas wartet. */
.profil-knopf { position: relative; }
.wartet-punkt {
  position: absolute; top: 8px; right: 8px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--punkt); border: 2px solid #fff;
}

/* --- Meldungen ---------------------------------------------------------- */
.meldungen { list-style: none; margin: 0; padding: 10px var(--rand); font-size: 15px; }
.meldungen .success { color: #2c6b45; }
.meldungen .error { color: #9a2a2a; }
.fehler { color: #9a2a2a; }

/* --- Der Knopf für den Daumen -------------------------------------------
   Unten, festsitzend, über dem Balken des Browsers. Wer unterwegs
   fotografiert, soll ihn treffen, ohne zu suchen. */
/* **Glas wie in der Scin-App** (Micha, 27.09.2026): Der Knopf steht über
   der Bildwand und darf sie nicht zudecken — man soll sehen, worüber er
   liegt. Dieselben Werte wie dort: weiß mit 76 %, eine halbe Haarlinie
   als Kante, und die Unschärfe mit erhöhter Sättigung, damit die Farben
   darunter nicht grau werden. */
.daumenknopf {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  -webkit-backdrop-filter: saturate(200%) blur(38px);
  backdrop-filter: saturate(200%) blur(38px);
  border: .5px solid rgba(0, 0, 0, .06);
  color: #111; text-decoration: none;
  font: 600 17px/1 "General Sans", system-ui, sans-serif;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .13), 0 1px 2px rgba(0, 0, 0, .05),
              inset 0 1px 0 rgba(255, 255, 255, .85);
}
/* Wo es keine Unschärfe gibt, wäre ein durchscheinender Knopf unlesbar —
   dann steht er deckend da. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .daumenknopf { background: #fff; }
}
.daumenknopf:active { transform: translateX(-50%) scale(.97); }
.daumenknopf span { font-size: 21px; line-height: 1; }
/* Die Wand endet über dem Knopf, sonst verdeckt er die letzte Reihe. */
main.meine, main#inhalt:has(.daumenknopf) { padding-bottom: 96px; }

/* --- Formulare ----------------------------------------------------------- */
.feld-form, .hochladen form { max-width: 560px; margin: 0 auto; padding: 0 var(--rand); }
.hochladen, .meine, .anmeldung { padding: 0 var(--rand); }
.hochladen h1, .meine h1, .anmeldung h1 {
  font: 600 26px/1.2 "General Sans", system-ui, sans-serif;
  letter-spacing: -.01em; margin: 22px 0 14px;
}
.hochladen h2 { font: 600 21px/1.25 "General Sans", system-ui, sans-serif; margin: 4px 0 14px; }
label { display: block; margin: 16px 0 6px; font-size: 14px; color: #6b675f; }
label .leise { color: #a5a098; }
input[type=text], input[type=password], input[type=date], select, textarea {
  width: 100%; box-sizing: border-box;
  min-height: 48px; padding: 11px 13px;
  border: 1px solid #ddd9d2; border-radius: 12px; background: #fff;
  font: 400 17px/1.45 "Gambetta", Georgia, serif; color: #111;
}
textarea { min-height: 110px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #111; outline-offset: 1px; border-color: #111;
}
select { appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, #6b675f 50%),
  linear-gradient(135deg, #6b675f 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px;
  background: #111; color: #fff; cursor: pointer;
  font: 600 17px/1 "General Sans", system-ui, sans-serif;
}
/* **Nicht `.gross`:** Das ist im Archiv die große Bildfläche und trägt
   `margin: 0 -16px`. Mein „Ins Archiv" hat den negativen Rand geerbt und
   lag über „Zurück" — auf Michas iPhone sichtbar, in meinen Messungen
   vorher nicht, weil ich nur den Knopf allein angesehen hatte
   (27.09.2026). Beim ersten Mal (`.rund.gross`) habe ich denselben
   Fehler an einer Stelle behoben und die zweite übersehen. */
.knopf-breit { min-height: 54px; flex: 1; }
.knopf.leise { background: #f1efeb; color: #111; }
/* **Luft zwischen dem letzten Feld und dem Knopf.** Ohne sie klebte
   „Anmelden" am Passwortfeld — es sah aus, als gehörte es dazu, und am
   Daumen liegen zwei verschiedene Dinge direkt übereinander
   (Micha, 01.10.2026). Die Felder tragen ihren Abstand über das `label`
   darüber; nach dem letzten kommt keines mehr. */
.feld-form > .knopf { margin-top: 28px; }
.knopf:active { transform: scale(.98); }
.knopfreihe { display: flex; gap: 10px; margin: 26px 0 40px; padding: 0 var(--rand); }
.wortknopf { background: none; border: 0; padding: 6px; font: inherit;
  color: #6b675f; text-decoration: underline; cursor: pointer; }

/* --- Schritt für Schritt -------------------------------------------------- */
.vorfuehrung {
  max-width: 560px; margin: 14px auto 0; padding: 10px 13px;
  background: #f4f3f0; border-radius: 12px;
  font-size: 14px; color: #6b675f;
}
.fortschritt { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; }
.fortschritt .balken { flex: 1; height: 3px; background: #e7e5e0; border-radius: 2px; }
.fortschritt .balken i { display: block; height: 100%; background: #111;
  border-radius: 2px; transition: width .28s ease; }
.fortschritt .wo { font-size: 12.5px; color: #a5a098; white-space: nowrap; }

/* Die Ablage: am Handy der Knopf zum Fotografieren, am Laptop die große
   Fläche zum Hineinziehen. Dasselbe Feld, andere Gestalt. */
.ablage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 180px; margin-top: 10px; padding: 24px;
  border: 2px dashed #d8d4cd; border-radius: 18px; background: #fbfaf8;
  text-align: center; cursor: pointer;
}
.ablage:hover, .ablage.ueber { border-color: #111; background: #f4f3f0; }
.ablage-zeichen { font-size: 34px; line-height: 1; color: #6b675f; }
.ablage-wort { font: 600 17px/1.3 "General Sans", system-ui, sans-serif; }
.ablage small { color: #a5a098; font-size: 13px; }
.ablage input[type=file] { position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; }
.vorschau { margin: 16px 0 0; text-align: center; }
.vorschau img { max-width: 100%; max-height: 46vh; border-radius: 14px; }
.hinweis-klein { font-size: 13.5px; color: #a5a098; margin: 8px 0 0; }
.wortlink-zeile { margin: 22px 0 0; font-size: 15px; }
.wortlink-zeile a { color: #6b675f; }
.leerer-anfang { color: #6b675f; margin: 8px 0 0; }

/* Die Liste der wartenden Bilder steht seit dem 28.09.2026 im Menü
   (`.menue-wartet`, weiter oben) und nicht mehr auf der Hochladeseite. */

/* --- Herausnehmen --------------------------------------------------------- */
/* Luft darum: Der Knopf ist der einzige, der etwas löscht — er soll
   nicht zwischen den Angaben und dem Blättern klemmen (Micha, 27.09.). */
.wegnehmen { margin: 44px 0 36px; }
.wegnehmen button {
  background: none; border: 1px solid #ddd9d2; border-radius: 999px;
  min-height: 44px; padding: 0 18px; cursor: pointer;
  font: 500 15px/1 "General Sans", system-ui, sans-serif; color: #9a2a2a;
}
.wegnehmen button:hover { border-color: #9a2a2a; }

/* --- Am Laptop ------------------------------------------------------------ */
@media (min-width: 900px) {
  /* Links das Bild groß, rechts die Angaben: Man sieht beim Tippen, was
     man beschreibt (Michas Gestaltung, 26.09.2026). */
  .hochladen form { max-width: 1100px; display: grid; gap: 0 46px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: start; }
  .hochladen .fortschritt { display: none; }
  /* **Die linke Seite steht, die rechte läuft.** Das Bild bleibt beim
     Tippen im Blick — man beschreibt, was man sieht (Micha, 27.09.2026).
     Feste Höhe statt nur `sticky`: Sonst scrollt die Bildseite erst ein
     Stück mit, bevor sie stehenbleibt. */
  .hochladen .schritt[data-schritt="Bild"] {
    grid-column: 1; grid-row: 1 / span 3;
    position: sticky; top: 20px;
    height: calc(100vh - 40px); height: calc(100svh - 40px);
    display: flex; flex-direction: column; justify-content: center;
    margin: 0;
  }
  .hochladen .schritt[data-schritt="Bild"] h1 { margin-top: 0; }
  .hochladen .schritt[data-schritt="Titel"] { grid-column: 2; grid-row: 1; }
  .hochladen .schritt[data-schritt="Angaben"] { grid-column: 2; grid-row: 2; }
  .hochladen .knopfreihe { grid-column: 2; grid-row: 3; padding: 0; }
  /* Die Ablage nimmt, was die stehende Spalte übrig lässt — und das
     Bild darin ebenso: Beides darf nie höher werden als das Fenster,
     sonst steht die Spalte doch nicht. */
  .hochladen .ablage { flex: 1; min-height: 0; }
  .hochladen .vorschau { flex: 1; min-height: 0; display: flex;
    flex-direction: column; justify-content: center; margin: 0; }
  .hochladen .vorschau img { max-height: none; min-height: 0; flex: 1;
    object-fit: contain; }
}
@media (prefers-reduced-motion: reduce) {
  .fortschritt .balken i { transition: none; }
  .daumenknopf:active, .knopf:active { transform: translateX(-50%); }
}

/* Eine Absage steht oben, wo man sie sieht, und nicht als Zeile, die
   beim Scrollen verlorengeht. */
.absage { max-width: 560px; margin: 14px auto 0; padding: 12px 14px;
  background: #fbeeee; border-radius: 12px; font-size: 15px; line-height: 1.5; }

/* --- Beim Senden bewegt sich etwas ----------------------------------------
   Micha am 27.09.2026: „ich hätte gerne was das sich bewegt um zu sehen
   das es lädt". Der Balken zeigt, wie viel vom Bild wirklich draußen
   ist — nicht ein Kringel, der sich auch dann dreht, wenn nichts mehr
   geht. */
.ladebalken { display: flex; align-items: center; gap: 12px;
  max-width: 560px; margin: 18px auto 0; padding: 0 var(--rand); }
.ladespur { flex: 1; height: 4px; border-radius: 3px; background: #e7e5e0;
  overflow: hidden; }
.ladespur i { display: block; height: 100%; width: 0; border-radius: 3px;
  background: #111; transition: width .2s linear; }
.ladebalken small { font-size: 13px; color: #6b675f; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
/* Solange der Browser noch nichts zu melden hat: ein Streifen, der läuft. */
.ladespur.unbekannt i { width: 40%; animation: laufen 1.1s ease-in-out infinite; }
@keyframes laufen {
  from { transform: translateX(-100%); } to { transform: translateX(260%); }
}
@media (prefers-reduced-motion: reduce) {
  .ladespur i { transition: none; }
  .ladespur.unbekannt i { animation: none; width: 100%; opacity: .4; }
}
.knopf[disabled] { opacity: .55; cursor: default; }

/* --- Angekommen -----------------------------------------------------------
   Ein Haken, der erscheint und wieder geht. Kein Satz: Das Bild steht ja
   da, und Micha will so wenig Text wie möglich (27.09.2026). */
.angekommen { position: fixed; inset: 0; z-index: 90; display: grid;
  place-items: center; pointer-events: none;
  animation: haken-weg 1.6s ease-out forwards; }
.angekommen svg { width: 92px; height: 92px; }
.angekommen circle { fill: rgba(17, 17, 17, .86); }
.angekommen path { fill: none; stroke: #fff; stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30;
  animation: haken-ziehen .34s .1s ease-out forwards; }
@keyframes haken-ziehen { to { stroke-dashoffset: 0; } }
@keyframes haken-weg {
  0% { opacity: 0; transform: scale(.9); }
  14% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .angekommen { animation: haken-still 1.6s steps(2) forwards; }
  .angekommen path { animation: none; stroke-dashoffset: 0; }
  @keyframes haken-still { 0%, 70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
}


/* --- Die Startseite hinter der Anmeldung ---------------------------------
   Eine Fläche, die man nicht verfehlen kann, und darunter drei leise
   Wege. Wer die App öffnet, will meistens ein Foto hineingeben — aber
   eben nicht immer, und dafür stand vorher gar nichts da (Nachtrag zum
   Vorhaben 33, 28.09.2026). */
.haus { padding: 0 var(--rand) 40px; max-width: 560px; margin: 0 auto; }
.haus h1 {
  font: 600 27px/1.2 "General Sans", system-ui, sans-serif;
  letter-spacing: -.015em; margin: 26px 0 20px;
}
.grosse-flaeche {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; text-align: center;
  min-height: 168px; padding: 28px 22px;
  border-radius: 22px; background: #111; color: #fff; text-decoration: none;
  -webkit-tap-highlight-color: transparent; transition: transform .15s;
}
.grosse-flaeche:active { transform: scale(.985); }
.grosse-flaeche-zeichen { font-size: 34px; line-height: 1; }
.grosse-flaeche b { font: 600 21px/1.25 "General Sans", system-ui, sans-serif; }
.grosse-flaeche small { font-size: 13.5px; color: rgba(255, 255, 255, .62); }

.haus-wege { display: flex; flex-direction: column; margin-top: 10px; }
.haus-wege a {
  display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 4px; text-decoration: none; color: #111;
  border-bottom: 1px solid #ecebe7;
  font: 500 17px/1.2 "General Sans", system-ui, sans-serif;
}
.haus-wege a:last-child { border-bottom: 0; }
.haus-wege a span { margin-left: auto; color: #a5a098; font-size: 15px; }
.haus-zahl { font-variant-numeric: tabular-nums; }

/* --- Die Anleitung --------------------------------------------------------
   Schritte, keine Bildschirmfotos: Die Menüs von iOS und Android sehen
   in jeder Fassung etwas anders aus, und ein Bild, das nicht mehr
   stimmt, ist schlimmer als ein Satz. In jedem Schritt steht fett das
   Wort, nach dem man auf dem Telefon sucht. */
.anleitung { padding: 0 var(--rand) 56px; max-width: 620px; margin: 0 auto; }
.anleitung h1 {
  font: 600 27px/1.2 "General Sans", system-ui, sans-serif;
  letter-spacing: -.015em; margin: 26px 0 8px;
}
.anleitung h2 {
  font: 600 20px/1.25 "General Sans", system-ui, sans-serif;
  margin: 38px 0 6px; padding-top: 22px; border-top: 1px solid #ecebe7;
}
.anleitung h3 {
  font: 600 15px/1 "General Sans", system-ui, sans-serif;
  letter-spacing: .05em; text-transform: uppercase; color: #6b675f;
  margin: 22px 0 4px;
}
.anleitung-vor { font: 400 17px/1.55 "Gambetta", Georgia, serif;
  color: #3a3733; margin: 8px 0 0; }
.schrittliste { margin: 8px 0 0; padding-left: 0; list-style: none;
  counter-reset: schritt; }
.schrittliste li {
  counter-increment: schritt; position: relative;
  padding: 9px 0 9px 38px;
  font: 400 17px/1.5 "Gambetta", Georgia, serif; color: #3a3733;
}
.schrittliste li::before {
  content: counter(schritt); position: absolute; left: 0; top: 10px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #f1efeb; color: #6b675f;
  display: flex; align-items: center; justify-content: center;
  font: 600 13px/1 "General Sans", system-ui, sans-serif;
}
/* **Die gesuchten Wörter in der zweiten Schrift**, nicht nur fett:
   Gambetta hat keinen fetten Schnitt, der Browser rechnet sich dann
   einen aus, und heraus kommt etwas, das man im Fließtext nicht findet
   (gesehen beim Ansehen am 28.09.2026). Genau diese Wörter sucht man
   aber auf dem Telefon ab. */
.anleitung b, .anleitung-vor b {
  font: 600 16px/1.5 "General Sans", system-ui, sans-serif; color: #111;
}

/* --- Das Auge am Passwortfeld ---------------------------------------------
   Am Telefon tippt man Punkte, die alle gleich aussehen. Fünf
   Fehlversuche kosten eine Stunde — ein Blick ist billiger. */
.feld-mit-auge { display: block; position: relative; }
.feld-mit-auge input { padding-right: 52px; }
.auge {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: #6b675f; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.auge svg { width: 21px; height: 21px; }
.auge:active { transform: translateY(-50%) scale(.9); }
@media (prefers-reduced-motion: reduce) {
  /* Stand im Vorhaben und fehlte für die neue Menü-Bewegung
     (Review, 28.09.2026). */
  .profil-menue { animation: none; }
  .grosse-flaeche:active { transform: none; }
  .profil-menue a:active, .profil-menue button:active { transform: none; }
  .auge:active { transform: translateY(-50%); }
}


/* --- Für den, der hier wohnt, aber gerade nicht angemeldet ist ----------
   Die Anmeldetür steht nicht auf der Wand: Ein Besucher soll nicht
   erfahren, dass es eine gibt. Für das Gerät, auf dem sich schon einmal
   jemand angemeldet hat, steht sie wieder da — sonst wäre Martin nach
   zwei Wochen in einer App ohne Adresszeile ausgesperrt, und wartende
   Bilder lägen ohne ein Wort darüber fest (Review, 28.09.2026). */
.tuer-zeile {
  flex: none; display: inline-flex; align-items: center;
  min-height: 44px; margin-right: -6px; padding: 0 6px;
  color: #6b675f; text-decoration: none;
  font: 500 15px/1 "General Sans", system-ui, sans-serif;
}
.wartet-aussen {
  margin: 12px var(--rand) 0; padding: 12px 14px;
  background: #f4f3f0; border-radius: 14px;
}
.wartet-aussen h2 { font: 600 11.5px/1 "General Sans", system-ui, sans-serif;
  letter-spacing: .07em; text-transform: uppercase; color: #6b675f; margin: 0 0 8px; }
.wartet-aussen ul { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.wartet-aussen li { padding: 4px 0; }
.wartet-aussen li span { color: #a5a098; }
.wartet-aussen p { margin: 10px 0 0; font-size: 15px; }