@layer alt {
/*
 * DanceVault – öffentliche Einstiegs- und Einrichtungsseiten
 *
 * Diese Seiten laufen bewusst ohne den eingeloggten App-Rahmen. Sie teilen
 * trotzdem dessen typografische Rollen, Materialtiefe und Bedienlogik. Alle
 * Farben werden aus den vorhandenen Theme-Tokens abgeleitet; die Seiten
 * bleiben dadurch auch im dunklen Farbschema kontrastfest.
 */

body.einstieg-seite,
body.anmelden-seite {
  min-height: 100svh;
  margin: 0;
  padding:
    calc(env(safe-area-inset-top, 0px) + 1rem)
    clamp(1rem, 4vw, 3rem)
    max(1rem, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  overflow-x: clip;
  color: var(--fg);
  background-color: var(--bereichsleiste-bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--linie-gold) 24%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--linie-gold) 18%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--kachel-bg) 92%, transparent) 0, transparent 48rem);
  background-size: 4rem 4rem, 4rem 4rem, auto;
}

body.einstieg-seite::before,
body.anmelden-seite::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg) 52%, transparent),
    color-mix(in srgb, var(--bereichsleiste-bg) 42%, transparent)
  );
}

body.einstieg-seite > :where(main.hauptregion) > .inhalt,
body.einstieg-seite > .inhalt,
body.anmelden-seite > :where(main.hauptregion) > .inhalt,
body.anmelden-seite > .inhalt,
body.anmelden-seite > :where(main.hauptregion) > .inhalt.einrichten-rahmen,
body.anmelden-seite > .inhalt.einrichten-rahmen {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(100%, 31rem);
  max-width: 31rem;
  min-width: 0;
  margin: auto;
  padding: 0;
}

body.einladung-seite > :where(main.hauptregion) > .inhalt,
body.einladung-seite > .inhalt,
body.anmelden-seite > :where(main.hauptregion) > .inhalt.einrichten-rahmen,
body.anmelden-seite > .inhalt.einrichten-rahmen {
  width: min(100%, 58rem);
  max-width: 58rem;
}

body.datenschutz-seite > :where(main.hauptregion) > .inhalt,
body.datenschutz-seite > .inhalt {
  width: min(100%, 64rem);
  max-width: 64rem;
}

body.keine-sammlung-seite > :where(main.hauptregion) > .inhalt,
body.keine-sammlung-seite > .inhalt,
body.fehler-oeffentlich-seite > :where(main.hauptregion) > .inhalt,
body.fehler-oeffentlich-seite > .inhalt {
  width: min(100%, 38rem);
  max-width: 38rem;
}

.einstieg-seite .anmelden-karte,
.anmelden-seite .anmelden-karte,
.einstieg-karte {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: clamp(1.35rem, 4vw, 2.35rem);
  overflow: hidden;
  border: var(--rahmen-fein) solid color-mix(in srgb, var(--rand) 86%, var(--linie-gold));
  border-radius: clamp(1rem, 2.2vw, 1.5rem);
  background: color-mix(in srgb, var(--kachel-bg) 96%, var(--bg));
  box-shadow: var(--dv-tiefe-fokus, var(--schatten-angehoben));
}

.einstieg-seite .anmelden-karte :where(p, li, label, a, h1, h2),
.anmelden-seite .anmelden-karte :where(p, li, label, a, h1, h2) {
  min-width: 0;
  overflow-wrap: break-word;
}

.einstieg-seite .anmelden-karte::before,
.anmelden-seite .anmelden-karte::before,
.einstieg-karte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--marke-gold) 24% 76%,
    transparent
  );
}

.einstieg-markenkopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-width: 0;
  margin: 0 0 clamp(1.1rem, 3vw, 1.65rem);
}

/* R18 (D-260, D-041): Zurueck steht links -- auch im Einstiegskopf der
   Sammlungswahl, wenn man aus der App kommt (?von). Der Pfeil steht im
   Fluss vor der Marke (die Zeile ist linksbuendig); ein 44-px-Kreis wie
   die Kopf-Symbolaktionen, optisch an die Kartenkante gerueckt. */
.einstieg-pfeil {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -0.6rem;
  border-radius: 50%;
  color: var(--kachel-aktiv-bg);
}
.einstieg-pfeil:hover,
.einstieg-pfeil:focus-visible {
  background: color-mix(in srgb, var(--kachel-aktiv-bg) 10%, transparent);
}
.einstieg-pfeil svg {
  width: 1.5rem;
  height: 1.5rem;
}

.anmelden-seite .anmelden-zeichen,
.einstieg-seite .anmelden-zeichen {
  display: block;
  flex: 0 0 auto;
  width: 2.7rem;
  height: 2.7rem;
  margin: 0;
  color: var(--fg);
}

.anmelden-seite .anmelden-zeichen .marke-v-pfad,
.einstieg-seite .anmelden-zeichen .marke-v-pfad {
  stroke: var(--marke-gold);
}

.anmelden-seite .anmelden-marke,
.einstieg-seite .anmelden-marke {
  min-width: 0;
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: clamp(1.35rem, 3vw, 1.65rem); /* schrift-ausnahme: Marke */
  font-weight: var(--schrift-titel-gewicht, 600);
  line-height: 1;
  letter-spacing: -0.015em;
  text-align: left;
}

/* P-11 (5.8.70, D-197): zwei Saetze, was DanceVault ist und wie man
   hineinkommt -- dort, wo bis 5.8.69 die Versionsnummer stand. */
.anmelden-seite .anmelden-idee {
  margin: -0.5rem 0 0.8rem;
  color: var(--fg);
  font-size: var(--schriftgrad-klein);
  line-height: 1.45;
  text-align: left;
}

.anmelden-seite .anmelden-idee + .anmelden-idee { margin-top: -0.35rem; }

/* D1-08 c: H1-Rolle „Einstieg“ der oeffentlichen Seiten -- groesser als
   der Seitentitel der App (siehe DESIGN_SYSTEM.md, Ueberschriften-Rollen). */
:is(.anmelden-seite, .einstieg-seite) { --dv-typ-einstieg: clamp(1.8rem, 5vw, 2.45rem); }

.anmelden-seite .anmelden-titel,
.einstieg-seite .anmelden-titel,
.einstieg-seite .move-titel {
  max-width: 100%;
  margin: 0 0 0.65rem;
  color: var(--fg);
  font-family: var(--schrift-titel);
  font-size: var(--dv-typ-einstieg);
  font-weight: var(--schrift-titel-gewicht, 600);
  line-height: 1.08;
  letter-spacing: var(--titel-buchstabenabstand);
  text-align: left;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Z-81 (R3-b): ein Titel mit gesetzter Trennstelle (­ an der Wortfuge)
   trennt nur dort. Mit hyphens: auto fuellt Chrome die Zeile weiter auf und
   nimmt die spaetere Silbe („Nutzungsbe-“ statt „Nutzungs-“). Die
   Rechtsseiten laden nur stil.css und dieses Blatt. */
:is(.anmelden-seite, .einstieg-seite) .anmelden-titel.titel--trennstellen { hyphens: manual; }

.anmelden-seite .anmelden-unter,
.einstieg-seite .anmelden-unter {
  max-width: 46rem;
  margin: 0 0 1.35rem;
  color: var(--fg);
  font-size: var(--schriftgrad-basis);
  line-height: 1.55;
  text-align: left;
  text-wrap: pretty;
}

.einstieg-kicker {
  margin: 0 0 0.45rem;
  color: color-mix(in srgb, var(--marke-gold) 72%, var(--fg));
  font-size: var(--schriftgrad-klein);
  font-weight: 700;
  letter-spacing: 0.085em;
  line-height: 1.3;
  text-transform: uppercase;
}

.einstieg-formular {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
}

.anmelden-seite form + form,
.einstieg-seite form + form {
  margin-top: 0.8rem;
}

/* D1-09 (R3-c): dieselben zwei Label-Rollen wie in der App
   (oberflaeche_typografie.css; die Einstiegsseiten laden das Blatt nicht).
   Feldlabel: --dv-typ-neben, 650, normal; Label -> Feld --abstand-2.
   Gruppentitel (Formular-Titel, Legende): --dv-typ-meta, 650, Versalien
   0.05em. Vorher beide in 700 und Versalien. */
.anmelden-seite .feld-label,
.einstieg-seite .feld-label {
  display: block;
  margin: var(--abstand-5) 0 var(--abstand-2);
  color: var(--fg);
  font-family: var(--schrift-fliess);
  font-size: var(--schriftgrad-neben);
  font-weight: 650;
  letter-spacing: normal;
  line-height: 1.35;
  text-transform: none;
}

.einstieg-formular-titel,
.einstieg-auswahl > legend {
  display: block;
  margin: 1rem 0 var(--abstand-2);
  color: var(--fg);
  font-family: var(--schrift-fliess);
  font-size: var(--schriftgrad-klein);
  font-weight: 650;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-transform: uppercase;
}

.anmelden-seite .feld-label:first-of-type,
.einstieg-seite .feld-label:first-of-type {
  margin-top: 0;
}

.einstieg-formular-titel {
  margin: 1.35rem 0 0.35rem;
  font-size: var(--schriftgrad-basis);
}

.einstieg-auswahl > legend span,
.einstieg-auswahl > legend + span {
  color: var(--gedaempft);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.anmelden-seite :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.einstieg-seite :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 3.15rem;
  padding: 0.78rem 0.9rem;
  border: var(--rahmen-fein) solid color-mix(in srgb, var(--rand) 88%, var(--fg));
  border-radius: var(--radius-klein);
  background: color-mix(in srgb, var(--bg) 96%, var(--kachel-bg));
  color: var(--fg);
  font: inherit;
  font-size: max(1rem, var(--schriftgrad-basis));
  line-height: 1.35;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.anmelden-seite :where(input, select, textarea):focus-visible,
.einstieg-seite :where(input, select, textarea):focus-visible {
  outline: var(--dv-fokus-breite, 2px) solid var(--dv-fokus-ring, var(--kachel-aktiv-bg));
  outline-offset: var(--dv-fokus-abstand, 1px);
  border-color: var(--kachel-aktiv-bg);
  box-shadow: none;
}

.anmelden-seite :where(input, select, textarea)[aria-invalid="true"],
.einstieg-seite :where(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--signatur);
}

.anmelden-seite .suchknopf,
.anmelden-seite .linkknopf,
.einstieg-seite .suchknopf,
.einstieg-seite .linkknopf {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.15rem;
  margin-top: 1.15rem;
  padding: 0.75rem 1rem;
  border: var(--rahmen-fein) solid var(--kachel-aktiv-bg);
  border-radius: var(--radius-klein);
  background: var(--kachel-aktiv-bg);
  color: var(--kachel-aktiv-fg);
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.anmelden-seite .mini-knopf,
.einstieg-seite .mini-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.6rem 0.9rem;
  border: var(--rahmen-fein) solid var(--rand);
  border-radius: var(--radius-klein);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.anmelden-seite :where(.suchknopf, .linkknopf, .mini-knopf):focus-visible,
.einstieg-seite :where(.suchknopf, .linkknopf, .mini-knopf):focus-visible,
.anmelden-seite a:focus-visible,
.einstieg-seite a:focus-visible,
.anmelden-seite label:has(input):focus-within,
.einstieg-seite label:has(input):focus-within {
  outline: var(--dv-fokus-breite, 2px) solid var(--dv-fokus-ring, var(--kachel-aktiv-bg));
  outline-offset: var(--dv-fokus-abstand, 1px);
}

.anmelden-seite .anmelden-vergessen {
  margin: 0.55rem 0 0;
  font-size: var(--schriftgrad-neben);
  text-align: right;
}

/* D1-21 (D-168): alle Textlinks der Anmelde- und Einstiegsseiten sehen
   gleich aus -- vorher war „Konto erstellen“ unterstrichen, „Passwort
   vergessen?“ nicht. */
.anmelden-seite .anmelden-karte a:not(.zurueck),
.einstieg-seite .anmelden-karte a:not(.zurueck),
.anmelden-seite a:not([class]),
.einstieg-seite a:not([class]) {
  color: var(--kachel-aktiv-bg);
  font-weight: 700;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

.anmelden-seite a:not([class]),
.einstieg-seite a:not([class]) {
  text-decoration: underline;
}

.anmelden-seite .anmelden-karte a.linkknopf,
.einstieg-seite .anmelden-karte a.linkknopf {
  color: var(--kachel-aktiv-fg);
}

.einstieg-fuss {
  margin: 1.35rem 0 0;
  padding-top: 1rem;
  border-top: var(--rahmen-fein) solid var(--linie-gold);
}

.anmelden-seite .anmelden-wege,
.einstieg-seite .anmelden-wege {
  margin: 0;
  color: var(--fg);
  font-size: var(--schriftgrad-neben);
  line-height: 1.5;
  text-align: center;
}

.anmelden-seite .anmelden-wege + .anmelden-wege,
.einstieg-seite .anmelden-wege + .anmelden-wege {
  margin-top: 0.45rem;
}

/* Zustimmungssatz ueber dem Knopf, der ein Konto anlegt (5.8.0, P-02). */
.einstieg-zustimmung {
  /* Abstand nach oben, damit der Satz nicht als Hinweis zum letzten Feld
     gelesen wird. */
  margin: var(--abstand-3) 0 0;
  font-size: var(--schriftgrad-neben);
  line-height: 1.5;
}

.einstieg-hinweis,
.einstieg-zustand,
.anmelden-seite [role="alert"],
.anmelden-seite [role="status"],
.einstieg-seite [role="alert"],
.einstieg-seite [role="status"] {
  box-sizing: border-box;
  margin: 1rem 0 0;
  padding: 0.85rem 0.95rem;
  border: var(--rahmen-fein) solid color-mix(in srgb, var(--rand) 76%, var(--kachel-aktiv-bg));
  border-left: 3px solid var(--kachel-aktiv-bg);
  border-radius: var(--radius-klein);
  background: color-mix(in srgb, var(--kachel-aktiv-bg) 7%, var(--bg));
  color: var(--fg);
  font-size: var(--schriftgrad-neben);
  line-height: 1.5;
  text-wrap: pretty;
}

.anmelden-seite [role="alert"],
.einstieg-seite [role="alert"] {
  border-color: color-mix(in srgb, var(--signatur) 70%, var(--rand));
  border-left-color: var(--signatur);
  background: color-mix(in srgb, var(--signatur) 7%, var(--bg));
}

.einstieg-hinweis strong,
.einstieg-hinweis span {
  display: block;
}

.einstieg-hinweis strong + span {
  margin-top: 0.3rem;
  color: var(--gedaempft);
}

.einstieg-zweitaktion {
  display: flex;
  justify-content: center;
  margin-top: 0.8rem;
}

.einstieg-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  margin: -0.45rem 0 0.7rem;
  padding: 0 0.35rem;
  color: var(--kachel-aktiv-bg);
  font-weight: 700;
  text-decoration: none;
}

/* Einladung */
.einladung-seite .anmelden-karte {
  padding-inline: clamp(1.35rem, 4.5vw, 3rem);
}

.einladung-sammlung {
  margin: 0 0 0.35rem;
  font-family: var(--schrift-titel);
  font-size: var(--schriftgrad-gross);
  font-weight: var(--schrift-titel-gewicht, 600);
  line-height: 1.2;
  overflow-wrap: break-word;
}

.einladung-daten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.2rem;
}

.einladung-daten section {
  min-width: 0;
  padding: 1rem;
  border: var(--rahmen-fein) solid var(--rand);
  border-radius: var(--radius-flaeche);
  background: color-mix(in srgb, var(--bg) 82%, var(--kachel-bg));
}

.einladung-daten h2 {
  margin: 0 0 0.45rem;
  color: var(--fg);
  font-family: var(--schrift-fliess);
  font-size: var(--schriftgrad-basis);
  font-weight: 750;
}

.einladung-daten p {
  margin: 0;
  color: var(--gedaempft);
  font-size: var(--schriftgrad-neben);
  line-height: 1.52;
  text-wrap: pretty;
}

.einladung-formular {
  margin-top: 1.35rem;
  padding-top: 0.15rem;
  border-top: var(--rahmen-fein) solid var(--linie-gold);
}

.einstieg-auswahl {
  min-width: 0;
  margin: 1.2rem 0 0;
  padding: 0;
  border: 0;
}

.einstieg-auswahl > legend {
  float: left;
  width: 100%;
  margin-top: 0;
}

.einstieg-auswahl > legend + * {
  clear: both;
}

/* Die Auswahl-Aufklapper von "Sammlung einrichten" (4.44.0, Knopf-System
   D-051): Titel links, das eine Weiter-Zeichen rechts, beim Oeffnen
   gedreht. Die App-Grammatik (oberflaeche_aufklapper.css) gilt auf den
   Anmelde-Seiten bewusst nicht; der zweizeilige Kopf bleibt ein Block. */
details.einstieg-auswahl > summary {
  position: relative;
  display: block;
  padding-right: 2rem;
  list-style: none;
  cursor: pointer;
}

details.einstieg-auswahl > summary::-webkit-details-marker {
  display: none;
}

details.einstieg-auswahl > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.5rem;
  width: 0.5rem;
  height: 0.8rem;
  margin-top: -0.4rem;
  clip-path: polygon(0 0, 28% 0, 100% 50%, 28% 100%, 0 100%, 72% 50%);
  background: var(--kachel-aktiv-bg);
  transition: transform 0.15s ease;
}

details.einstieg-auswahl[open] > summary::after {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  details.einstieg-auswahl > summary::after {
    transition: none;
  }
}

.einladung-seite .kachelzeile {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0;
}

.einladung-seite .kachel,
.einrichten-rahmen .einrichten-preset {
  position: relative;
  min-width: 0;
  min-height: 3rem;
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: var(--rahmen-fein) solid var(--rand);
  border-radius: var(--radius-klein);
  background: color-mix(in srgb, var(--bg) 80%, var(--kachel-bg));
  color: var(--fg);
  cursor: pointer;
}

/* Gewaehlt heisst hier: getoente Flaeche und feste Kante, nicht die volle
   Akzentflaeche -- darum bleibt die Schrift --fg. Die globale Regel
   .kachel:has(input:checked) in stil.css setzt --kachel-aktiv-fg, das nur
   auf der vollen Akzentflaeche lesbar ist; auf dieser Toenung stand bis
   4.46.0 weiss auf fast weiss (hell, 1,19 : 1) und dunkel auf dunkel
   (dunkel, 1,2 : 1). pruefe_kontraste.py misst beide Paare. */
.einladung-seite .kachel:has(input:checked),
.einrichten-rahmen .einrichten-preset:has(input:checked) {
  border-color: var(--kachel-aktiv-bg);
  background: color-mix(in srgb, var(--kachel-aktiv-bg) 11%, var(--bg));
  box-shadow: inset 0 0 0 1px var(--kachel-aktiv-bg);
  color: var(--fg);
}

/* Die Beschreibung der gewaehlten Tanzrichtung steht in --fg und voll
   deckend: --gedaempft haelt auf der Toenung in elf Paletten keine
   4,5 : 1 (pruefe_kontraste.py, 4.46.1). Die Regel in stil.css (erben
   plus 85 % Deckkraft) ist fuer die volle Akzentflaeche gedacht. */
.einrichten-rahmen .einrichten-preset:has(input:checked) .eintrag-neben {
  color: var(--fg);
  opacity: 1;
}

/* Ersteinrichtung */
.einrichten-rahmen .anmelden-karte {
  padding: clamp(1.35rem, 4vw, 2.75rem);
}

.einstieg-schritte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0 0 1.55rem;
  padding: 0;
  list-style: none;
}

.einstieg-schritte li {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.55rem;
  color: var(--gedaempft);
  font-size: var(--schriftgrad-neben);
  line-height: 1.3;
}

.einstieg-schritte li::after {
  content: "";
  flex: 1 1 auto;
  min-width: 0.5rem;
  height: 1px;
  background: var(--rand);
}

.einstieg-schritte li:last-child::after {
  display: none;
}

.einstieg-schritte li > span {
  display: inline-grid;
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border: var(--rahmen-fein) solid var(--rand);
  border-radius: 50%;
  background: var(--bg);
  color: inherit;
  font-weight: 700;
  line-height: 1;
}

.einstieg-schritte .ist-aktiv,
.einstieg-schritte .ist-erledigt {
  color: var(--fg);
  font-weight: 700;
}

.einstieg-schritte .ist-aktiv > span,
.einstieg-schritte .ist-erledigt > span {
  border-color: var(--kachel-aktiv-bg);
  background: var(--kachel-aktiv-bg);
  color: var(--kachel-aktiv-fg);
}

.einstieg-schritte .ist-erledigt > span::before {
  content: "✓";
}

.einstieg-schritte .ist-erledigt > span {
  font-size: 0;
}

.einstieg-schritte .ist-erledigt > span::before {
  font-size: var(--schriftgrad-neben);
}

.einrichten-rahmen .einrichten-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.einrichten-rahmen .einrichten-preset {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  min-height: 7rem;
  padding: 1rem;
}

.einrichten-rahmen .einrichten-preset input {
  position: absolute;
  inset: 0.9rem 0.9rem auto auto;
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--kachel-aktiv-bg);
}

.einrichten-rahmen .einrichten-preset .name {
  display: block;
  padding-right: 1.65rem;
  font-size: var(--schriftgrad-basis);
  font-weight: 750;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.einrichten-rahmen .einrichten-preset .eintrag-neben {
  display: block;
  color: var(--gedaempft);
  font-size: var(--schriftgrad-neben);
  line-height: 1.45;
  text-wrap: pretty;
}

.einrichten-kaestchen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.55rem;
}

.einrichten-kaestchen .kachel-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
  min-height: 2.9rem;
  margin: 0;
  padding: 0.7rem 0.8rem;
  border: var(--rahmen-fein) solid var(--rand);
  border-radius: var(--radius-klein);
  background: color-mix(in srgb, var(--bg) 82%, var(--kachel-bg));
  color: var(--fg);
  line-height: 1.4;
  cursor: pointer;
  overflow-wrap: break-word;
}

.einrichten-kaestchen .kachel-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--kachel-aktiv-bg) 72%, var(--rand));
  background: color-mix(in srgb, var(--kachel-aktiv-bg) 8%, var(--bg));
}

.einrichten-kaestchen input {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.1rem 0 0;
  accent-color: var(--kachel-aktiv-bg);
}

/* Datenschutzerklärung */
.datenschutz-seite {
  place-items: start center;
}

.datenschutz-zurueck {
  margin: 0;
}

.datenschutz-inhalt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.25rem 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: var(--rahmen-fein) solid var(--linie-gold);
}

.datenschutz-inhalt a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.45rem 0.75rem;
  border: var(--rahmen-fein) solid var(--rand);
  border-radius: var(--radius-klein);
  background: color-mix(in srgb, var(--bg) 78%, var(--kachel-bg));
  color: var(--fg) !important;
  font-size: var(--schriftgrad-neben);
  font-weight: 650 !important;
  line-height: 1.25;
  text-decoration: none;
}

.datenschutz-seite .textblock {
  max-width: 72ch;
  margin-inline: auto;
  color: var(--fg);
  font-size: var(--schriftgrad-basis);
  line-height: 1.65;
}

.datenschutz-seite .textblock h2 {
  scroll-margin-top: 1rem;
  margin: 2rem 0 0.65rem;
  color: var(--fg);
  font-family: var(--schrift-titel);
  font-size: var(--schriftgrad-zwischentitel);
  line-height: 1.2;
}

.datenschutz-seite .textblock h2:first-child {
  margin-top: 0;
}

.datenschutz-seite .textblock p,
.datenschutz-seite .textblock ul {
  margin: 0 0 1rem;
}

/* Textmass (D1-10 d Schritt 3, 5.8.107): Fliesstext um 65-75 Zeichen je
   Zeile; die Karte bleibt auf der Lesebahn. */
.datenschutz-seite .textblock :is(p, li) {
  max-width: var(--dv-textmass, 58ch);
}

.datenschutz-seite .textblock ul {
  padding-left: 1.25rem;
}

.datenschutz-seite .textblock li + li {
  margin-top: 0.55rem;
}

/* Fehlerseite */
.fehler-oeffentlich-seite .linkknopf {
  width: 100%;
}

.fehler-oeffentlich-seite .fehler-referenz {
  margin: 1rem 0;
  color: var(--fg-gedaempft, var(--fg));
  font-size: var(--schriftgrad-klein);
  line-height: 1.5;
}

.fehler-oeffentlich-seite .fehler-referenz code {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.25rem 0.5rem;
  border: var(--rahmen-fein) solid var(--rand);
  border-radius: var(--radius-klein);
  color: var(--fg);
  background: color-mix(in srgb, var(--kachel-bg) 82%, var(--bg));
  font-family: var(--schrift-daten, ui-monospace, monospace);
  font-size: var(--schriftgrad-neben);
  letter-spacing: 0.035em;
}

.sammlung-waehlen-liste {
  display: grid;
  gap: 0.65rem;
  margin: 1.35rem 0 0.75rem;
}

.sammlung-waehlen-liste form { margin: 0; }

.sammlung-waehlen-knopf {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.75rem;
  width: 100%;
  min-height: 4.25rem;
  padding: 0.75rem 2.6rem 0.75rem 0.95rem;
  border: var(--rahmen-fein) solid var(--rand);
  border-radius: var(--radius-klein);
  color: var(--fg);
  background: color-mix(in srgb, var(--kachel-bg) 92%, transparent);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sammlung-waehlen-knopf.ist-aktiv {
  border-color: var(--kachel-aktiv-bg);
  box-shadow: inset 0.25rem 0 var(--kachel-aktiv-bg);
}

.sammlung-waehlen-name {
  min-width: 0;
  overflow: hidden;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sammlung-waehlen-rolle {
  grid-row: 2;
  color: var(--fg-gedaempft, var(--fg));
  font-size: var(--schriftgrad-klein);
}

.sammlung-waehlen-pfeil {
  position: absolute;
  top: 50%;
  right: 1rem;
  font-size: 1.75rem; /* schrift-ausnahme: Symbol */
  line-height: 1;
  transform: translateY(-52%);
}

@media (hover: hover) and (pointer: fine) {
  .anmelden-seite :where(.suchknopf, .linkknopf):hover,
  .einstieg-seite :where(.suchknopf, .linkknopf, .sammlung-waehlen-knopf):hover {
    filter: brightness(1.04);
    box-shadow: var(--dv-tiefe-fokus, var(--schatten-angehoben));
    transform: translateY(-1px);
  }

  .anmelden-seite .mini-knopf:hover,
  .einstieg-seite .mini-knopf:hover,
  .datenschutz-inhalt a:hover {
    border-color: var(--kachel-aktiv-bg);
    background: color-mix(in srgb, var(--kachel-aktiv-bg) 8%, var(--bg));
    text-decoration: none;
  }
}

@media (max-width: 620px) {
  body.einstieg-seite,
  body.anmelden-seite {
    place-items: start center;
    padding:
      calc(env(safe-area-inset-top, 0px) + 0.75rem)
      0.75rem
      max(0.75rem, env(safe-area-inset-bottom));
    background-size: 3rem 3rem, 3rem 3rem, auto;
  }

  .einstieg-seite .anmelden-karte,
  .anmelden-seite .anmelden-karte,
  .einstieg-karte {
    padding: 1.35rem 1.1rem;
    border-radius: 1.05rem;
    box-shadow: var(--dv-tiefe-karte, var(--schatten-ruhe));
  }

  .einstieg-markenkopf {
    justify-content: flex-start;
    margin-bottom: 1.15rem;
  }

  /* R3 (B-09): Versal-Designs laufen breiter -- derselbe Faktor wie bei der
     H1 der App (D1-27); in neon brach „WELCHE SAMMLUNG MÖCHTEST DU ÖFFNEN?“
     bei 130 % in mehr als drei Zeilen. */
  :is(.anmelden-seite, .einstieg-seite) { --dv-typ-einstieg: calc(clamp(1.65rem, 8vw, 2.15rem) * var(--titel-versal-mass, 1)); }

  .einladung-daten,
  .einladung-seite .kachelzeile,
  .einrichten-rahmen .einrichten-presets {
    grid-template-columns: minmax(0, 1fr);
  }

  .einrichten-rahmen .einrichten-preset {
    min-height: 0;
  }

  .einstieg-schritte {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }

  .einstieg-schritte li::after {
    display: none;
  }

  .datenschutz-inhalt {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .datenschutz-inhalt a {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 360px) {
  .datenschutz-inhalt {
    grid-template-columns: minmax(0, 1fr);
  }

  .anmelden-seite .anmelden-zeichen,
  .einstieg-seite .anmelden-zeichen {
    width: 2.35rem;
    height: 2.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .anmelden-seite *,
  .einstieg-seite * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Z-35 (5.8.8): „Welche Sammlung möchtest du öffnen?“ brach bei 320 px und
   130 % in vier Zeilen um; nur diese Seite, nur sehr schmal. */
@media (max-width: 360px) {
  .sammlung-waehlen-seite .anmelden-titel { font-size: clamp(var(--schriftgrad-zwischentitel), 8vw, var(--schriftgrad-gross)); }
}
}