/* Anmeldeseite: links tannengrüne Fläche mit Formular-Linienmuster, rechts Karte auf Sand. */

.anmeldung { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100dvh; }

.anmelde-flaeche {
  display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; padding: 2.75rem 3.25rem;
  background-color: var(--tanne); background-image: url("../bild/muster-formular.svg"); background-size: 420px 560px; background-position: right -40px top -30px;
  color: #fff; position: relative; overflow: hidden;
}
/* Verlauf, der das Muster zur Textseite hin ausblendet, damit die Aussage ruhig steht */
.anmelde-flaeche::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, var(--tanne) 0%, rgba(11, 58, 51, .93) 42%, rgba(11, 58, 51, .2) 100%);
}
.anmelde-flaeche > * { position: relative; }

.marke { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.marke-zeichen { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.marke-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marke-name { font-family: var(--schrift-display); font-weight: 750; font-size: 1.0625rem; letter-spacing: -.02em; }
.marke-zusatz { font-size: .75rem; font-weight: 600; letter-spacing: .02em; opacity: .72; }
.marke-hell .marke-zeichen { width: 40px; height: 40px; border-radius: 11px; }
.marke-hell .marke-name { font-size: 1.1875rem; }

.anmelde-aussage { max-width: 40rem; }
.anmelde-titel { font-size: clamp(2rem, 3.1vw, 3.25rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.06; }
.anmelde-titel span { display: block; }
.anmelde-titel span + span { color: #a9dccf; }
.anmelde-text { margin-top: 1.4rem; max-width: 30rem; font-size: 1.0625rem; line-height: 1.55; color: var(--tanne-text); }

.punkt { width: .55rem; height: .55rem; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 4px rgba(37, 211, 102, .18); flex: none; }

.anmelde-seite { display: grid; place-items: center; padding: 2.5rem 1.5rem; }
.anmelde-spalte { width: min(26.5rem, 100%); display: flex; flex-direction: column; gap: 1rem; }
.anmelde-karte { background: var(--weiss); border-radius: var(--radius-karte); box-shadow: var(--schatten-karte); padding: 2.1rem 2.1rem 1.9rem; display: flex; flex-direction: column; gap: 1rem; }
.karten-titel { font-size: 1.625rem; letter-spacing: -.025em; }
.karten-text { color: var(--gedaempft-tief); margin-top: -.5rem; }
.anmelde-form { display: flex; flex-direction: column; gap: 1rem; }
.anmelde-form .knopf { margin-top: .35rem; min-height: 3rem; font-size: .9375rem; }
.anmelde-karte > .textlink { align-self: center; font-size: .8125rem; }

.anmelde-verbindung { display: flex; align-items: center; justify-content: center; gap: .45rem; color: var(--gedaempft-tief); font-size: .8125rem; }
.anmelde-verbindung .icon { width: 1rem; height: 1rem; }
.anmelde-test { display: flex; align-items: center; gap: .55rem; padding: .6rem .9rem; border-radius: var(--radius-feld); background: var(--warn-flaeche); border: 1px solid var(--warn-rand); color: #4d3200; font-size: .8125rem; }
.anmelde-test .icon { width: 1.05rem; height: 1.05rem; color: var(--warn); }

.mfa { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: .9rem; border: 1px solid var(--linie); border-radius: var(--radius-feld); background: #fbfaf7; }
.mfa-qr { width: 132px; height: 132px; border-radius: var(--radius-m); background: #fff; image-rendering: pixelated; }
.mfa-geheimnis { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.mfa-schluessel { font-size: .875rem; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; user-select: all; }

@media (max-width: 900px) {
  .anmeldung { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .anmelde-flaeche { padding: 1.5rem 1.25rem 1.75rem; gap: 1.5rem; }
  .anmelde-titel { font-size: clamp(1.75rem, 7.5vw, 2.5rem); }
  .anmelde-text { margin-top: .8rem; font-size: .9375rem; }
  .anmelde-seite { padding: 1.5rem 1rem 2.5rem; place-items: start center; }
  .anmelde-karte { padding: 1.5rem 1.25rem; }
  .mfa { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
}

/* ---- Dritte Stufe: Schlüsseldatei ---- */

.ablage.ablage-klein { padding: 1.4rem 1rem; gap: .35rem; }
.ablage-klein .ablage-zeichen { width: 2.75rem; height: 2.75rem; border-radius: .85rem; }
.ablage-klein .ablage-zeichen .icon { width: 1.35rem; height: 1.35rem; }
.ablage-klein .ablage-titel { font-size: 1rem; overflow-wrap: anywhere; }
.ablage-klein .ablage-text { font-size: .8125rem; }
.ablage.gewaehlt { border-style: solid; border-color: var(--teal); background: var(--teal-hauch); }
.karten-neben-zeile { text-align: center; color: var(--gedaempft-tief); font-size: .8125rem; }

/* Linke Fläche unten: leer – keine Angaben zu Anmeldestufen oder Infrastruktur auf der öffentlichen Seite */
.anmelde-unten { min-height: 1rem; }