/* Gedenkblüte — der persönliche Bereich. Setzt basis.css voraus.
 *
 * Kein zweiter Stil neben dem Ort: Die Formulare stehen auf derselben
 * gläsernen Fläche, die im Ort die Schrift trägt, über derselben Landschaft.
 * Die alte App sah aus wie ein anderes Produkt — genau das soll nicht
 * wiederkommen.
 */

/* ---------- Der Grund, auf dem alles steht ---------- */

.konto-seite {
  min-height: 100svh;
  /* Das Bild liegt in einer eigenen Ebene statt als background-attachment:
     fixed — auf iOS wird "fixed" ignoriert, und die Landschaft würde beim
     Scrollen mitrutschen. */
  position: relative;
  isolation: isolate;
}
.konto-seite::before,
.konto-seite::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
}
.konto-seite::before {
  background: url("/assets/tor/tor-panorama-1600.webp?v=2026-08-03a") center / cover no-repeat;
}
/* Ein Schleier darüber: Die Landschaft soll durchscheinen, aber nichts vom
   Text streitig machen. */
.konto-seite::after {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(12, 22, 17, 0.28), rgba(12, 22, 17, 0.72) 70%),
    linear-gradient(to bottom, rgba(12, 22, 17, 0.45), rgba(9, 17, 13, 0.88));
}

/* ---------- Die Bühne ---------- */

.stille {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.15rem;
  padding: clamp(5.5rem, 12vw, 7.5rem) var(--rand) clamp(2.4rem, 6vw, 4rem);
}

/* Der angemeldete Bereich füllt die Breite und stapelt nicht alles in eine
   einzige Glaskarte — sonst bleibt links und rechts leerer Rand trotz
   karte--weit. Oben starten, nicht vertikal zentrieren: Inhalt wächst. */
.stille--bereich {
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.85rem;
  width: min(72rem, calc(100% - 2 * var(--rand)));
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
  padding-top: clamp(5.2rem, 11vw, 6.8rem);
  padding-bottom: clamp(1.6rem, 4vw, 2.6rem);
}

.karte {
  width: min(31rem, 100%);
}
/* --weit folgt der normalen Inhaltsbreite (.hueter in basis.css), nicht der
   schmalen Formularspalte. Konto und Ort-Anlegen brauchen Platz für Listen
   und Wahlflächen, ohne randlos über den ganzen Bildschirm zu laufen. */
.karte--weit { width: min(72rem, 100%); }

/* Im Konto darf Glas enger sitzen als auf der Startseite: Formulare leben von
   dichter Lesbarkeit, nicht von großem Innenpolster. */
.karte.glas {
  padding: clamp(1.35rem, 3vw, 2rem) clamp(1.15rem, 3vw, 2.1rem);
  border-radius: clamp(0.85rem, 1.8vw, 1.25rem);
  box-shadow:
    0 16px 42px rgba(9, 17, 13, 0.34),
    inset 0 1px 0 rgba(244, 239, 230, 0.09);
  background: rgba(12, 22, 17, 0.4);
}

.karte h1 {
  font-size: clamp(1.55rem, 3.6vw, 2.05rem);
  margin-bottom: 0.55rem;
  line-height: 1.18;
}
.karte h2,
.fach h2 {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  margin: 1.65rem 0 0.45rem;
  line-height: 1.22;
}
/* Steht eine Überschrift ganz oben in einer Karte, kommt ihr Abstand zum
   Innenpolster der gläsernen Fläche hinzu — oben klaffte dann fast ein
   Zentimeter mehr Luft als unten, und drei Karten untereinander lasen sich
   als Versehen statt als Ruhe. Bewusst für jedes erste Element, nicht nur
   für h2: Morgen steht dort vielleicht etwas anderes. */
.karte > :first-child,
.fach > :first-child { margin-top: 0; }
.karte .ueberschrift-klein,
.bereich-kopf .ueberschrift-klein { margin-bottom: 0.35rem; }
.karte .fliesstext,
.fach .fliesstext {
  max-width: none;
  font-size: 0.92rem;
  line-height: 1.5;
  opacity: 0.9;
}
/* Kurzer Hinweis direkt über dem CTA — weniger Abstand als ein Absatz. */
.fach .fliesstext--knapp {
  margin-top: 0.85rem;
  margin-bottom: 0;
  font-size: 0.88rem;
  opacity: 0.82;
}

/* ---------- Bereich: Kopf und Fächer ---------- */

.bereich-kopf {
  padding: 0.15rem 0.2rem 0.35rem;
}
.bereich-kopf h1 {
  font-size: clamp(1.45rem, 3.2vw, 1.9rem);
  margin: 0 0 0.35rem;
  line-height: 1.18;
  text-shadow: 0 1px 18px rgba(9, 17, 13, 0.45);
}
.bereich-kopf .sagt { margin-top: 0.75rem; }

/* Desktop: Orte breit links, Konto+Export rechts gestapelt; darunter die
   beiden Formulare nebeneinander. Mobil fällt das Gitter auf eine Spalte. */
.bereich-gitter {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 1fr);
  gap: 0.75rem;
  align-items: start;
}
.bereich-gitter--formen {
  grid-template-columns: 1fr 1fr;
}

.bereich-seite {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

/* Ein Fach ist die Interaktionsfläche — dunkles Glas, dezenter Goldrand,
   kein Dashboard-Kartenhaufen. */
.fach {
  min-width: 0;
  padding: clamp(1rem, 2.2vw, 1.35rem) clamp(1rem, 2.4vw, 1.45rem);
  border-radius: 0.85rem;
  border: 1px solid rgba(200, 169, 126, 0.18);
  background: rgba(12, 22, 17, 0.48);
  backdrop-filter: blur(16px) saturate(110%);
  -webkit-backdrop-filter: blur(16px) saturate(110%);
  box-shadow:
    0 10px 28px rgba(9, 17, 13, 0.28),
    inset 0 1px 0 rgba(244, 239, 230, 0.07);
}
.fach h1, .fach h2, .fach p { text-shadow: none; }
.fach--orte { min-height: 100%; }

.fach__tat { margin: 0.85rem 0 0; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fach { background: rgba(11, 20, 15, 0.86); }
}

@media (max-width: 820px) {
  .bereich-gitter,
  .bereich-gitter--formen {
    grid-template-columns: 1fr;
  }
}

/* ---------- Felder ---------- */

.feld { margin-top: 0.85rem; }
.feld:first-of-type { margin-top: 0.95rem; }

.feld__wort {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.92;
  margin-bottom: 0.35rem;
}

.feld__hinweis {
  display: block;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--creme-still);
  opacity: 0.72;
  margin-top: 0.35rem;
}

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="password"],
.feld input[type="date"] {
  width: 100%;
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--creme);
  background: rgba(9, 17, 13, 0.38);
  border: 1px solid rgba(244, 239, 230, 0.2);
  border-radius: 0.5rem;
  padding: 0.55rem 0.75rem;
  min-height: 2.45rem;
  box-sizing: border-box;
  transition: border-color 280ms ease, background 280ms ease;
}
.feld input::placeholder { color: rgba(207, 201, 189, 0.42); }
.feld input:hover { border-color: rgba(244, 239, 230, 0.34); }
.feld input:focus {
  outline: none;
  border-color: rgba(200, 169, 126, 0.75);
  background: rgba(9, 17, 13, 0.55);
  box-shadow: 0 0 0 2px rgba(200, 169, 126, 0.12);
}

/* Der Browser färbt selbst ausgefüllte Felder sonst hellgelb — mitten in
   einer dunklen Fläche sieht das aus wie ein Fehler. */
.feld input:-webkit-autofill,
.feld input:-webkit-autofill:hover,
.feld input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--creme);
  -webkit-box-shadow: 0 0 0 1000px rgba(10, 19, 14, 0.96) inset;
  caret-color: var(--creme);
  transition: background-color 9999s ease-out;
}

.feld textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--creme);
  background: rgba(9, 17, 13, 0.38);
  border: 1px solid rgba(244, 239, 230, 0.2);
  border-radius: 0.5rem;
  padding: 0.55rem 0.75rem;
  resize: vertical;
  min-height: 4rem;
  box-sizing: border-box;
  transition: border-color 280ms ease, background 280ms ease;
}
.feld textarea:focus {
  outline: none;
  border-color: rgba(200, 169, 126, 0.75);
  background: rgba(9, 17, 13, 0.55);
  box-shadow: 0 0 0 2px rgba(200, 169, 126, 0.12);
}

/* Das Datumsfeld holt sich sein Auswahlfenster vom Browser; das kleine
   Kalendersymbol darin ist von Haus aus fast schwarz und verschwindet auf
   dunklem Grund. */
.feld input[type="date"] { color-scheme: dark; }

/* Zwei Felder nebeneinander — „von" und „bis" gehören zusammen. */
.zwei {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(0.65rem, 1.6vw, 1rem);
}
@media (max-width: 460px) {
  .zwei { grid-template-columns: 1fr; }
}

/* ---------- Eine Wahl treffen ---------- */

/* Keine nackten Radioknöpfe in einer Liste: Wer eine Landschaft oder die
   Sichtbarkeit wählt, trifft keine Formularentscheidung, sondern eine über
   den Ort, an den er künftig geht. Deshalb ganze Flächen mit einem Satz
   dazu — anklickbar, tastaturbedienbar, und sichtbar gewählt. */
.wahl {
  border: 0;
  padding: 0;
  margin: 1.2rem 0 0;
  display: grid;
  gap: 0.45rem;
}
.wahl legend { padding: 0; margin-bottom: 0.4rem; }
.wahl--breit { grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); }

.wahl__stueck {
  display: block;
  position: relative;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(244, 239, 230, 0.16);
  border-radius: 0.55rem;
  /* Nur Farbe, kein Shorthand — sonst löscht die Auswahl das
     Landschaftsbild (background-image) aus dem Inline-Style. */
  background-color: rgba(9, 17, 13, 0.28);
  cursor: pointer;
  transition: border-color 280ms ease, background-color 280ms ease, box-shadow 280ms ease;
}
.wahl__stueck:hover { border-color: rgba(244, 239, 230, 0.32); }

/* Der Knopf selbst wird nicht versteckt, sondern durchsichtig über die Fläche
   gelegt: Er bleibt für Vorlesegeräte und für die Tastatur da, wo er
   hingehört, und der Klick trifft überall. */
.wahl__stueck input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.wahl__stueck:has(input:checked) {
  border-color: rgba(200, 169, 126, 0.7);
  background-color: rgba(200, 169, 126, 0.09);
}
.wahl__stueck:has(input:focus-visible) {
  outline: 1px solid rgba(244, 239, 230, 0.55);
  outline-offset: 2px;
}
/* Browser ohne :has() zeigen keine Auswahl an — dann muss der Knopf sichtbar
   sein, sonst rät man. */
@supports not selector(:has(*)) {
  .wahl__stueck input { position: static; opacity: 1; width: auto; height: auto; }
}

/* Landschaftswahl: gemaltes Bild als Cover, nur Gebietsname.
   Sichtbarkeit-Boxen bleiben flach (ohne --land). */
.wahl--land {
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
}
.wahl__stueck--land {
  min-height: 7.25rem;
  padding: 0.9rem 0.95rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: rgba(9, 17, 13, 0.35);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
  overflow: hidden;
}
.wahl__stueck--land::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  /* Unten dunkler für den Namen, oben offen, damit die Landschaft wirkt. */
  background:
    linear-gradient(to top, rgba(9, 17, 13, 0.78) 0%, rgba(9, 17, 13, 0.28) 48%, rgba(9, 17, 13, 0.12) 100%);
  transition: background 280ms ease;
}
.wahl__stueck--land:hover::before {
  background:
    linear-gradient(to top, rgba(9, 17, 13, 0.7) 0%, rgba(9, 17, 13, 0.2) 48%, rgba(9, 17, 13, 0.06) 100%);
}
.wahl__stueck--land:has(input:checked) {
  border-color: rgba(200, 169, 126, 0.85);
  background-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(200, 169, 126, 0.45);
}
.wahl__stueck--land:has(input:checked)::before {
  background:
    linear-gradient(to top, rgba(18, 16, 10, 0.76) 0%, rgba(200, 169, 126, 0.14) 52%, rgba(9, 17, 13, 0.1) 100%);
}

.wahl__name {
  display: block;
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.25;
  color: var(--creme);
}
.wahl__satz {
  display: block;
  position: relative;
  z-index: 1;
  margin-top: 0.18rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--creme-still);
  opacity: 0.74;
}
.wahl__stueck--land .wahl__name {
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(9, 17, 13, 0.75);
}
/* Falls irgendwo noch ein Satz-Span landet: in der Landschaft weg. */
.wahl__stueck--land .wahl__satz {
  display: none;
}

/* ---------- Knöpfe und Wege ---------- */

/* Im Formular keine Riesen-Pillen: etwas kleiner, ruhiger Radius — der
   Knopf soll schließen, nicht die Seite dominieren. */
.karte .knopf-voll,
.fach .knopf-voll {
  display: block;
  width: 100%;
  margin-top: 1.1rem;
  border: 0;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
}
.karte .knopf-voll:hover,
.fach .knopf-voll:hover { transform: none; }
.fach__tat .knopf-voll { margin-top: 0; }

/* Für den einen Knopf, hinter dem etwas Unwiderrufliches liegt. Warmes
   Kupfer, kein Signalrot — an einem Trauerort schreit nichts, auch keine
   Warnung. Anders aussehen muss er trotzdem. */
.karte .knopf-voll--fort,
.fach .knopf-voll--fort {
  background: #c98f74;
  color: #24140e;
}
.karte .knopf-voll--fort:hover,
.fach .knopf-voll--fort:hover { background: #d6a086; }

.wege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.15rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(244, 239, 230, 0.1);
  font-size: 0.86rem;
}
/* Unter dem Gitter: keine Kartenkante, nur die ruhigen Wege. */
.wege--frei {
  margin: 0.35rem 0.15rem 0;
  padding: 0.65rem 0 0;
  border-top: 1px solid rgba(244, 239, 230, 0.12);
}
.wege a { color: var(--creme-still); text-underline-offset: 4px; }
.wege a:hover { color: var(--creme); }

/* Der Abmeldeknopf ist ein Formular, kein Verweis: Ein Verweis lässt sich von
   fremden Seiten aus auslösen, ein abgesichertes Formular nicht. */
.wege form { display: inline; }
.wege button {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--serif);
  font-size: 0.86rem;
  color: var(--creme-still);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.wege button:hover { color: var(--creme); }

/* ---------- Was die Seite zu sagen hat ---------- */

.sagt {
  margin-top: 1.1rem;
  padding: 0.7rem 0 0.7rem 1rem;
  border-left: 2px solid rgba(200, 169, 126, 0.75);
  background: rgba(200, 169, 126, 0.055);
}
.sagt p { font-size: 0.9rem; line-height: 1.5; color: var(--creme-still); }
.sagt p + p { margin-top: 0.5rem; }
.sagt a { color: var(--gold); text-underline-offset: 4px; }

/* Ein Einwand ist kein Alarm. Warmes Kupfer statt Signalrot — an einem
   Trauerort schreit nichts. */
.sagt--einwand {
  border-left-color: #c98f74;
  background: rgba(201, 143, 116, 0.08);
}
.sagt--gelungen {
  border-left-color: var(--moos);
  background: rgba(125, 144, 120, 0.09);
}

/* ---------- Was zusammengehört ---------- */

.reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.15rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(244, 239, 230, 0.09);
}
.reihe:last-of-type { border-bottom: 0; }
.reihe__wort {
  flex: 0 0 6.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.9;
  padding-top: 0.18rem;
}
.reihe__wert {
  flex: 1 1 8rem;
  color: var(--creme);
  word-break: break-word;
  font-size: 0.92rem;
}

/* ---------- Die Zeile ganz unten ---------- */

/* Impressum und Datenschutz müssen von jeder Seite aus erreichbar sein. Die
   große Fußzeile würde die ruhige Mitte zerschneiden — diese Zeile nicht.
   Auf breiten Bildschirmen zeigt die Kopfleiste keinen Menüknopf, deshalb ist
   das hier der einzige Weg dorthin. */
.leise {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.35rem;
  padding: 0 var(--rand) clamp(1.35rem, 3.5vw, 2rem);
  margin-top: -0.7rem;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}
.leise a {
  color: var(--creme-still);
  text-decoration: none;
  opacity: 0.58;
  transition: opacity 300ms ease;
}
.leise a:hover, .leise a:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 5px;
}
/* Derselbe leise Ton, aber mitten auf der Seite statt ganz unten — für den
   Weg zum Löschen, der leicht zu finden, aber nicht zu betonen ist. */
.leise--im-fluss { margin-top: 0; padding-bottom: 0; }

/* ---------- Die eigenen Orte ---------- */

/* Keine Kacheln und keine Tabelle: eine Liste von Namen, wie in einem
   Register. Der Name steht groß, alles Weitere leise darunter. */
.orte { list-style: none; margin: 0.55rem 0 0.85rem; padding: 0; }
.orte__stueck {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(244, 239, 230, 0.09);
}
.orte__stueck:first-child { border-top: 1px solid rgba(244, 239, 230, 0.09); }
.orte__stueck:last-child { border-bottom: 0; }

.orte__weg { flex: 1 1 12rem; text-decoration: none; display: block; }
.orte__name {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  color: var(--creme);
}
.orte__weg:hover .orte__name { text-decoration: underline; text-underline-offset: 5px; }
.orte__zeit {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--display);
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  color: var(--creme-still);
}
.orte__wo {
  display: block;
  margin-top: 0.22rem;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--creme-still);
  opacity: 0.64;
}
.orte__aendern {
  flex: none;
  font-size: 0.86rem;
  color: var(--gold);
  text-underline-offset: 4px;
}

/* ---------- Der Lockvogel ---------- */

/* Nicht "display: none" und nicht "type=hidden": Beides erkennen die
   Programme, die Formulare selbsttätig ausfüllen. So bleibt das Feld für
   Augen unsichtbar und für Maschinen verlockend. */
.lockvogel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Schmale Geräte ---------- */

@media (max-width: 560px) {
  .stille { padding-left: 1.1rem; padding-right: 1.1rem; }
  .stille--bereich {
    gap: 0.7rem;
    width: calc(100% - 2.2rem);
    padding-left: 0;
    padding-right: 0;
  }
  .fach {
    padding: 0.95rem 1rem;
  }
  .reihe__wort { flex-basis: 100%; padding-top: 0; }
}