/* Anmeldung, Einrichtung und zweiter Faktor (DESIGN.md 4, 5, 6, 7.1) — Lila Glas, Handy zuerst. Farben, Schrift,
   Knöpfe, Felder, Meldungen und ⓘ kommen aus dem Grund-CSS (lila-glas.css); hier nur, was diese Seiten ohne Gerüst
   brauchen: die eine Glaskarte mittig, Kopfzeile, QR-Code, Codes, Passkeys. Kein eigener Farbwert. */

/* Die Bühne: lila Schein hinter der Karte (Nachbesserung Schritt 6 — vorher eine kleine Karte auf leerer Fläche). */
.buehne {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 2.5rem);
  padding: 2rem var(--rand) 2.5rem;
  background-image: radial-gradient(24rem 18rem at 50% 12%, var(--wolke-linie), transparent 70%),
    radial-gradient(20rem 16rem at 90% 95%, var(--wolke-linie-leise), transparent 70%);
}
.karte {
  width: 100%;
  max-width: 27rem;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--glas-stark);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund-gross);
  box-shadow: var(--schatten-hoch);
}

/* Die Begleitfläche (ab 64 rem): dunkel-lila Verlauf mit Schein, darauf helle Schrift und Glaspunkte. */
/* Handy: über der Karte die Wortmarke und ein Satz, was das Portal ist — dunkle Schrift auf dem hellen Grund. */
.begleit { margin: 0 auto 1.5rem; max-width: 27rem; width: 100%; text-align: center; color: var(--tinte); }
.begleit-marke { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: 0.14em; white-space: nowrap; }
.begleit-zusatz { display: block; margin-top: 0.2rem; color: var(--tinte-leise); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; }
.begleit-titel { margin: 1.25rem 0 0.4rem; font-family: var(--schrift-anzeige); font-size: 1.5rem; font-weight: 300; letter-spacing: -0.02em; line-height: 1.15; }
.begleit-text { margin: 0 auto; max-width: 30ch; color: var(--tinte-leise); font-size: 0.95rem; line-height: 1.5; }
.begleit-punkte { display: none; }
.karte .kopfzeile .wortmarke { display: none; }
.karte .kopfzeile:not(:has(.schritt)) { display: none; }
.begleit-punkte { gap: 0.6rem; max-width: 26rem; margin: 0; padding: 0; list-style: none; }
.begleit-punkte li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--glas-nacht-rand);
  border-radius: var(--rund-mittel);
  background: var(--glas-nacht);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 0.95rem;
}
.begleit-punkte .symbol { width: 1.5rem; height: 1.5rem; }

/* Ab 48 rem (Tablet): dieselbe Komposition wie am Laptop, nur untereinander — oben die dunkle Begleitfläche mit den drei
   Punkten, darunter die Karte, beide gleich breit und zusammen mittig. Vorher stand am Tablet (768 × 1024) die kleine
   Handy-Fassung mitten im hohen Fenster, darüber rund 450 px leerer Schein (Nachbesserung 2, N9). */
@media (min-width: 48rem) {
  .buehne { align-items: center; gap: 1.5rem; padding: 2rem; }
  .begleit {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: 36rem;
    margin: 0;
    padding: 2rem 2.25rem;
    overflow: hidden;
    border-radius: var(--rund-gross);
    background-color: var(--nacht);
    background-image: radial-gradient(34rem 26rem at 88% 4%, var(--wolke), transparent 68%),
      radial-gradient(30rem 24rem at -10% 110%, var(--nacht-hell), transparent 70%),
      linear-gradient(155deg, var(--wolke-tief), var(--nacht) 72%);
    box-shadow: var(--schatten-hoch);
    text-align: left;
    color: var(--auf-nacht);
  }
  .begleit-zusatz, .begleit-text { color: var(--auf-nacht); }
  .begleit-titel { max-width: 22ch; margin: 0 0 0.6rem; font-size: 2rem; font-weight: 300; letter-spacing: -0.03em; line-height: 1.1; }
  .begleit-text { max-width: 34ch; margin: 0 0 1.25rem; font-size: 1rem; }
  .begleit-punkte { display: grid; }
  .karte { max-width: 36rem; margin: 0; }
}

@media (min-width: 64rem) {
  .buehne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 27rem;
    gap: 2rem;
    align-items: stretch;
    max-width: 76rem;
    min-height: 100vh;
    margin: 0 auto;
    padding: 2rem;
  }
  .begleit { gap: 2rem; max-width: none; min-height: 36rem; padding: 2.5rem 2.75rem; }
  .begleit-mitte { margin-block: auto; }
  .begleit-titel { margin: 0 0 0.75rem; font-size: 2.5rem; }
  .begleit-text { margin: 0 0 1.75rem; font-size: 1.05rem; }
  .karte { max-width: 27rem; align-self: center; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .karte { background: var(--glas-fest); }
  .begleit-punkte li { background: var(--glas-nacht); }
}

.kopfzeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.kopfzeile .wortmarke { display: flex; flex-direction: column; margin: 0; }
.wortmarke-name { white-space: nowrap; font-size: 1.125rem; }
.wortmarke-zusatz {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--tinte-leise);
}
.schritt, .unterzeile { font-size: 0.875rem; color: var(--tinte-leise); }
.schritt { white-space: nowrap; }
/* Der Satz unter dem Formular („Einen Zugang bekommen Sie nur …") klebte am Knopf (Rundgang 13c). */
form + .unterzeile { margin-top: 1rem; }
/* Wörter, die zusammen auf eine Zeile gehören (etwa „neu verbinden" in der Überschrift) — nicht trennen. */
.wortgruppe { white-space: nowrap; hyphens: manual; }
/* ⓘ bleibt an der Überschrift (Prüfung Runde 2, Schritt 2): Zwischen dem letzten Wort und dem Zeichen darf die Zeile
   nicht umbrechen — sonst rutschte ⓘ bei 375 px allein in eine eigene Zeile („Neues Passwort festlegen"). Die
   Überschrift selbst und der aufgeklappte Text brechen weiter normal um; es wandert höchstens das letzte Wort mit. */
.beschriftung:has(> h1) { white-space: nowrap; }
.beschriftung > h1, .beschriftung .erklaerung-text { white-space: normal; }
h1 { overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 12 5 5; font-size: 1.6rem; }
@media (min-width: 46rem) {
  h1 { hyphens: manual; }     /* Silbentrennung in Titeln nur am Handy (Nachbesserung 2, N6) */
}

/* Knöpfe: wie im Grundstil, hier über die ganze Breite der Karte. */
.karte > form .knopf, .karte > .knopf, .knopfreihe .knopf { width: 100%; margin-top: 0.5rem; }
.knopfreihe { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.knopfreihe .knopf { flex: 1 1 8rem; }
.code-eingabe {
  text-align: center;
  letter-spacing: 0.3em;
  font-size: 1.25rem !important;
  font-variant-numeric: tabular-nums;
}

.trennlinie { border: 0; border-top: 1px solid var(--linie); margin: 1.5rem 0 1rem; }

/* Impressum und Datenschutz (Daniel, 07.10.2026: Verweise auf i2.de) — leise unten in der Karte, auf jeder Seite ohne Maske. */
.rechtliches { display: flex; justify-content: center; gap: 1.25rem; margin-top: 1.5rem; font-size: 0.8rem; }
.rechtliches a { color: var(--tinte-leise); text-decoration: none; }
.rechtliches a:hover, .rechtliches a:focus-visible { color: var(--tinte); text-decoration: underline; }

/* Einrichtung: QR-Code und Codes */
.qr { display: flex; justify-content: center; margin: 0.75rem 0 1rem; }
.qr svg { display: block; padding: 0.5rem; border-radius: var(--rund-mittel); background: var(--papier); }
.abtippen {
  display: block;
  margin: 0.25rem 0 0.75rem;
  font-family: var(--schrift-fest);
  font-size: 0.9rem;
  word-break: break-all;
}
.codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.35rem 1rem;
  margin: 0.75rem 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--rund-mittel);
  background: var(--papier-leise);
  list-style-position: inside;
  font-family: var(--schrift-fest);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

/* Passkeys */
.liste .unterzeile { display: block; }
.liste form { margin: 0; }

@media print {
  .knopf, .knopfreihe, .haken, .erklaerung, form { display: none !important; }
  .karte { margin: 0; max-width: none; box-shadow: none; }
}

/* Das Unterschriftsfenster (Runde 3, F2; E5; DESIGN.md 7.13) — ohne Gerüst wie die Anmeldung, aber breiter: ein Fenster
   eines Signaturdienstes mit dunkler Kopfleiste, dem Dokument in einer rollbaren Fläche und den zwei Handlungen darunter.
   „Simulation — Training" steht immer oben. */
/* Das Unterschriftsfenster steht allein und mittig — ohne die Begleitfläche der Anmeldung (dort ab 64 rem ein Raster). */
.signatur-buehne { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; max-width: none; }
.signatur { width: 100%; max-width: 56rem; margin: 0 auto; overflow: hidden; border: 1px solid var(--glas-rand); border-radius: var(--rund-gross); background: var(--glas-stark); box-shadow: var(--schatten-hoch); }
.signatur-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.9rem 1.25rem; background: var(--nacht); color: var(--auf-nacht); }
.signatur-marke { margin: 0; font-weight: 800; letter-spacing: 0.12em; }
.signatur-dienst { font-weight: 500; letter-spacing: 0.02em; }
.signatur-simulation { margin: 0; padding: 0.3rem 0.75rem; border-radius: var(--rund-pille); background: var(--achtung-flaeche); color: var(--achtung); font-size: var(--stufe-klein); }
.signatur-inhalt { padding: 1.25rem; }
.signatur-titelzeile h1 { margin: 0 0 0.2rem; }
.signatur-dokument { max-height: 26rem; margin: 1rem 0; padding: 1.25rem; overflow-y: auto; border: 1px solid var(--linie); border-radius: var(--rund-klein); background: var(--papier); font-size: 0.925rem; line-height: 1.6; overflow-wrap: anywhere; }
/* E5: das eingebettete Fenster der Yousign-Sandbox — volle Breite, hoch genug für das PDF und die Unterschrift. */
.signatur-rahmen { display: block; width: 100%; height: 70vh; min-height: 32rem; margin: 1rem 0; border: 1px solid var(--linie); border-radius: var(--rund-klein); background: var(--papier); }
.signatur-handlung { display: grid; gap: 1rem; margin-top: 1rem; }
.signatur-handlung form { display: grid; gap: 0.5rem; margin: 0; padding: 0.9rem; border: 1px solid var(--linie); border-radius: var(--rund-mittel); background: var(--papier-leise); }
.signatur-handlung .knopf { width: 100%; }
.wahl { display: flex; align-items: flex-start; gap: 0.6rem; min-height: var(--tippflaeche); line-height: 1.4; }
.wahl input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; accent-color: var(--wolke); }
.signatur-fuss { padding: 0.9rem 1.25rem; border-top: 1px solid var(--linie); color: var(--tinte-leise); font-size: var(--stufe-klein); }
@media (min-width: 46rem) {
  .signatur-handlung { grid-template-columns: 2fr 1fr; align-items: stretch; }
}