/* ==========================================================================
   Anmelden und Registrieren (neu/register.html)

   Die Klassen- und ID-Namen gehören ../auth.js und ../register-onboarding.js
   (auth-shell, wiz-*, karte__*): die Skripte schalten sie, hier steht nur das
   Aussehen im neuen Design. Die alte Seite behält ihr eigenes Stylesheet.

   Aus dem Styleguide: Karte Papier hell mit 1 px Linie und 24 px Ecken,
   Felder weiß mit 12 px Ecken, Fokus Graphit plus oranger Ring, Auswahl
   aktiv immer Graphit, keine Schatten, Orange nur als Signal (hier: der
   Ring um die gewählte Hochschule auf der Karte, wie das Gradzeichen).
   ========================================================================== */

.konto {
  --kasten-rand: 28px;          /* Innenabstand des Kastens; Listen laufen bis an seinen Rand */
  --kasten-hoehe: 580px;        /* Registrieren: jeder Schritt gleich hoch (register-onboarding.js) */
  padding: calc(84px + clamp(40px, 6vw, 72px)) 0 clamp(64px, 7vw, 104px);
}
@media (max-width: 819px) { .konto { padding-top: 112px; } }
@media (max-width: 520px) { .konto { --kasten-rand: 20px; } }

/* -------------------------------------------------------------------------
   Kopf über dem Kasten
   ------------------------------------------------------------------------- */
.konto__kopf {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; margin-bottom: clamp(28px, 3.5vw, 40px);
}
.konto__titel {
  margin: 0; font-family: var(--schrift-display); font-weight: 500;
  font-size: clamp(38px, 4.2vw, 60px); letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance;
}
.konto__kopf .lead { max-width: 30em; }

/* -------------------------------------------------------------------------
   Die Mitte: Anmelden schmal, Registrieren breiter und fest hoch
   ------------------------------------------------------------------------- */
.auth-main__inner {
  width: 100%; max-width: calc(440px + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand);
  transition: max-width .25s ease;
}
.auth-main__inner--weit { max-width: calc(520px + 2 * var(--rand)); }

.auth-msg {
  margin-bottom: 16px; padding: 12px 16px; border-radius: 12px;
  background: var(--rot-hell); color: var(--rot-text); font-size: 15px; line-height: 1.45;
}
.auth-msg[hidden] { display: none; }

.auth-shell {
  display: flex; flex-direction: column;
  background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 24px;
  padding: 8px var(--kasten-rand) var(--kasten-rand);
  transition: height .25s ease;
}
.auth-main__inner--weit .auth-shell { height: var(--kasten-hoehe); }
.auth-main__inner--weit .auth-shell.auth-shell--frei { height: auto; }

/* Reiter: der Umschalter aus dem Styleguide, über die ganze Breite.
   Der helle Schieber gleitet mit einer Feder zum gewählten Reiter (js/schieber.js, wie der Preis-Umschalter). */
.auth-tabs {
  position: relative; flex: none; display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px; padding: 4px; margin: 0 calc(8px - var(--kasten-rand)) 24px;
  background: var(--chip); border-radius: 16px;
}
.auth-tabs .schieber { border-radius: 12px; background: var(--papier-hell); }
.auth-tab {
  position: relative; z-index: 1; border: none; background: transparent; cursor: pointer;
  padding: 11px 12px; border-radius: 12px; font-size: 16px; font-weight: 500; color: var(--text-gedaempft);
  transition: color .2s;
}
.auth-tab[aria-selected="true"] { color: var(--graphit); }
.auth-tab:hover { color: var(--graphit); }

.auth-panel { flex: 1 1 auto; min-height: 0; }
.auth-panel[hidden] { display: none; }
#panel-register { display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; }
#panel-register[hidden] { display: none; }

/* -------------------------------------------------------------------------
   Formulare (Anmelden, letzter Schritt Konto)
   ------------------------------------------------------------------------- */
#form-login, #form-konto { display: flex; flex-direction: column; }
#form-login label, #form-konto label { font-size: 15px; font-weight: 500; margin: 0 0 8px; }
#form-login .feld + label, #form-konto input + label { margin-top: 20px; }
#form-konto input {
  width: 100%; font-size: 17px; color: var(--graphit); background: var(--weiss);
  border: 1px solid var(--linie); border-radius: 12px; padding: 13px 16px; outline: none;
}
#form-konto input:focus { border-color: var(--graphit); box-shadow: var(--fokus); }
.feld::placeholder, #form-konto input::placeholder { color: oklch(0.47 0.01 60 / 0.7); }

/* Der Hauptknopf: Graphit mit hellem Pfeilquadrat, über die ganze Breite.
   Das Quadrat ist ein Pseudo-Element, weil auth.js beim Senden den Text des Knopfs ersetzt. */
#form-login button[type="submit"], #form-konto button[type="submit"], .wiz-los {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  margin-top: 28px; padding: 7px 7px 7px 20px; border: none; border-radius: 13px; cursor: pointer;
  background: var(--graphit); color: var(--weiss); font-size: 17px; font-weight: 500; line-height: 1.2;
  text-align: left; transition: background-color .15s, color .15s;
}
#form-login button[type="submit"]::after, #form-konto button[type="submit"]::after, .wiz-los::after {
  content: "↗"; flex: none; width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  background: var(--weiss); color: var(--graphit); transition: background-color .15s;
}
#form-login button[type="submit"]:hover:not(:disabled), #form-konto button[type="submit"]:hover:not(:disabled), .wiz-los:hover {
  background: var(--graphit-hover);
}
#form-login button[type="submit"]:disabled, #form-konto button[type="submit"]:disabled {
  background: var(--chip); color: var(--text-gedaempft); cursor: default;
}
#form-login button[type="submit"]:disabled::after, #form-konto button[type="submit"]:disabled::after {
  background: var(--linie); color: var(--text-gedaempft);
}

/* -------------------------------------------------------------------------
   Der Assistent im Kasten
   ------------------------------------------------------------------------- */
.wiz-zurueck {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 10px; padding: 2px 0; border: none; background: none; cursor: pointer;
  font-size: 15px; font-weight: 500; color: var(--text-gedaempft); transition: color .15s;
}
.wiz-zurueck:hover { color: var(--graphit); }
.wiz-zurueck[hidden] { display: none; }

.wiz-frage {
  margin: 0 0 18px; font-size: clamp(22px, 2vw, 26px); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance;
}
.wiz-frage:empty { display: none; }
.wiz-hilfe { margin: -10px 0 18px; font-size: 15px; color: var(--text-gedaempft); }
.wiz-hilfe:empty { display: none; }

.wiz-buehne { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* Auftritt beim Schrittwechsel (nicht beim Tippen in die Suche) */
@keyframes wiz-auftritt { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.wiz-auftritt .wiz-frage, .wiz-auftritt .wiz-hilfe, .wiz-auftritt .wiz-buehne { animation: wiz-auftritt .22s ease-out both; }
.wiz-auftritt .wiz-buehne { animation-delay: .05s; }
@media (prefers-reduced-motion: reduce) {
  .wiz-auftritt .wiz-frage, .wiz-auftritt .wiz-hilfe, .wiz-auftritt .wiz-buehne { animation: none; }
}

.wiz-suche {
  width: 100%; margin-bottom: 8px; font-size: 17px; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: 12px; padding: 12px 16px; outline: none;
}
.wiz-suche:focus { border-color: var(--graphit); box-shadow: var(--fokus); }

/* Listen (Hochschule, Studiengang, Ordnung): Zeilen bis an den Kastenrand,
   getrennt durch feine Linien. Ein Antippen ist die Antwort. */
.wiz-liste {
  display: flex; flex-direction: column; overflow-y: auto; min-height: 0;
  margin: 0 calc(-1 * var(--kasten-rand)); border-top: 1px solid var(--linie);
}
.wiz-zeile {
  display: flex; align-items: center; gap: 16px; width: 100%; flex: none;
  padding: 15px var(--kasten-rand); border: none; border-bottom: 1px solid var(--linie);
  background: transparent; text-align: left; cursor: pointer; transition: background-color .12s;
}
.wiz-zeile::after {
  content: "→"; flex: none; margin-left: 4px; color: var(--text-gedaempft); opacity: 0;
  transform: translateX(-4px); transition: opacity .15s, transform .15s;
}
.wiz-zeile:hover, .wiz-zeile.wiz-getippt { background: var(--chip); }
.wiz-zeile:hover::after { opacity: 1; transform: none; color: var(--graphit); }
.wiz-zeile:focus-visible { border-radius: 0; box-shadow: inset 0 0 0 3px oklch(0.72 0.15 55 / 0.35); }
.wiz-zeile__text { flex: 1; min-width: 0; }
.wiz-zeile__titel { display: block; font-size: 17px; font-weight: 500; line-height: 1.3; }
.wiz-zeile__unter { display: block; margin-top: 3px; font-size: 14px; color: var(--text-gedaempft); }

/* Hochschul-Logos: ein gemeinsames Format, sonst franst die Liste aus. */
.wiz-marke {
  flex: 0 0 76px; width: 76px; height: 44px; display: grid; place-items: center;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 9px;
}
.wiz-marke img { max-width: 62px; max-height: 28px; object-fit: contain; }
.wiz-marke--text { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-gedaempft); }

/* Die neueste Prüfungsordnung */
.wiz-aktuell {
  flex: none; margin-left: auto; padding: 4px 10px; border-radius: 999px;
  background: var(--zweitton-hell); font-size: 13px; font-weight: 500;
}

.wiz-leer { margin: 0; padding: 20px 0; font-size: 17px; color: var(--text-gedaempft); }

/* Bachelor oder Master: zwei große Flächen, die den Kasten füllen */
.wiz-kacheln { display: grid; grid-auto-rows: 1fr; gap: 12px; flex: 1 1 auto; min-height: 0; }
.wiz-kachel {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  padding: 20px; border-radius: 18px; cursor: pointer; text-align: center;
  background: var(--weiss); border: 1px solid var(--linie); transition: border-color .15s, background-color .15s;
}
.wiz-kachel:hover { border-color: var(--graphit); }
.wiz-kachel.wiz-getippt { background: var(--graphit); border-color: var(--graphit); color: var(--weiss); }
.wiz-kachel.wiz-getippt .wiz-kachel__fakt { color: var(--auf-dunkel-gedaempft); }
.wiz-kachel__titel { font-size: clamp(24px, 2.2vw, 30px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.wiz-kachel__fakt { font-size: 15px; color: var(--text-gedaempft); }

/* Fachsemester: Zahlen im Raster, darunter der Studienbeginn */
.wiz-raster {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-content: space-evenly;
  gap: 10px; flex: 1 1 50%; min-height: 0;
}
.wiz-zahl {
  padding: 12px 0; border-radius: 12px; cursor: pointer; text-align: center;
  font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums;
  background: var(--weiss); border: 1px solid var(--linie);
  transition: background-color .12s, color .12s, border-color .12s;
}
.wiz-zahl:hover, .wiz-zahl:focus-visible, .wiz-zahl.wiz-getippt { background: var(--graphit); border-color: var(--graphit); color: var(--weiss); }
.wiz-start {
  display: grid; place-items: center; flex: 1 1 50%; margin: 0; min-height: 1.4em;
  font-size: 16px; color: var(--text-gedaempft); text-align: center;
}

/* Zusammenfassung vor dem Konto: Zeilen wie die Vertrauensliste, kein Kasten */
.wiz-anker { border-top: 1px solid var(--linie); }
.wiz-anker__zeile {
  display: flex; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--linie);
}
.wiz-anker__was { flex: 0 0 112px; font-size: 15px; color: var(--text-gedaempft); }
.wiz-anker__wert { flex: 1; font-size: 16px; font-weight: 500; line-height: 1.35; }
.wiz-anker + .wiz-los { margin-top: auto; }

/* -------------------------------------------------------------------------
   Die Flügel: Karte links, Wappen und Fotos rechts (erst ab 1180 px)
   ------------------------------------------------------------------------- */
.wiz-stage { position: relative; }
/* Im letzten Schritt wird der Kasten kürzer, die Flügel bleiben stehen: der Platz
   darunter bleibt, sonst rückt der Footer unter die Fotos. */
@media (min-width: 1180px) { .auth-main__inner--weit .wiz-stage { min-height: var(--kasten-hoehe); } }
.wiz-fluegel {
  display: none; position: absolute; top: calc(var(--kasten-hoehe) / 2);
  width: calc(var(--seitenbreite, 100vw) / 2 - 260px); justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease;
}
.wiz-fluegel--links { right: 100%; transform: translate(24px, -50%); }
.wiz-fluegel--rechts { left: 100%; transform: translate(-24px, -50%); }
.auth-main__inner--weit .wiz-fluegel { opacity: 1; transform: translateY(-50%); }
@media (min-width: 1180px) { .wiz-fluegel { display: flex; } }

/* Die Karte: Länder hell auf Papier, die gewählte Hochschule als Punkt mit
   orangem Ring, wie das Gradzeichen im Logo. */
.wiz-fluegel__platz { display: grid; place-items: center; width: min(360px, 100% - 48px); }
.wiz-karte { position: relative; }
.wiz-karte svg { display: block; width: 100%; height: auto; aspect-ratio: 600 / 810; overflow: visible; }
/* Die Karten-SVG heißt class="karte" – nicht mit der Karte (Kasten) aus gradion.css verwechseln. */
.wiz-karte svg.karte { padding: 0; border: 0; border-radius: 0; background: none; }
.karte__laender path {
  fill: var(--chip); stroke: var(--papier); stroke-width: 1.5; vector-effect: non-scaling-stroke;
  transition: fill .4s ease, opacity .5s ease;
}
.karte__laender path.karte__land--hier { fill: var(--zweitton); }
.wiz-karte--nah .karte__laender path:not(.karte__land--hier) { opacity: 0; }
.karte__kreise path {
  fill: none; stroke: var(--papier); stroke-width: 1; vector-effect: non-scaling-stroke;
  opacity: 0; transition: opacity .5s ease;
}
.wiz-karte--nah:not(.wiz-karte--stadt) .karte__kreise.karte__kreise--hier path { opacity: .9; }
.karte__staedte path {
  fill: var(--zweitton); stroke: var(--papier); stroke-width: 1; vector-effect: non-scaling-stroke;
  opacity: 0; transition: opacity .5s ease;
}
.wiz-karte--stadt .karte__laender path { opacity: 0; }
.wiz-karte--stadt .karte__staedte path.karte__stadt--hier { opacity: 1; }
.karte__punkt {
  fill: var(--graphit); stroke: var(--papier); stroke-width: 2; vector-effect: non-scaling-stroke;
  transition: fill .2s ease, opacity .4s ease;
}
.karte__ring {
  fill: none; stroke: var(--orange); stroke-width: 3; vector-effect: non-scaling-stroke;
  opacity: 0; transition: opacity .3s ease;
}
.karte__ring--aktiv { opacity: 1; }
.wiz-karte--stadt .karte__punkt:not(.karte__punkt--aktiv),
.wiz-karte--stadt .karte__ring:not(.karte__ring--aktiv) { opacity: 0; }

/* Rechts: die Wappen der Hochschulstädte auf einem Kreis. Nach der Wahl gleitet das
   richtige nach oben, die anderen blenden aus, darunter legen sich Fotos der Hochschule. */
.wiz-stadt { display: flex; flex-direction: column; align-items: center; width: min(440px, 100% - 48px); }
.wiz-ring { position: relative; width: 320px; height: 320px; flex: none; transition: height .6s cubic-bezier(.2, .8, .2, 1); }
.wiz-stadt--foto .wiz-ring { height: 120px; }
.wiz-ring__logo {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  display: grid; place-items: center;
  transform: translate(var(--rx), var(--ry)) scale(1);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}
.wiz-ring__logo img { display: block; height: 58px; width: auto; max-width: 64px; object-fit: contain; }
.wiz-ring__logo--aktiv { transform: translate(var(--rx), var(--ry)) scale(1.15); }
.wiz-ring--gleitet .wiz-ring__logo { transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .45s ease; }
.wiz-ring__logo--weg { opacity: 0; }
.wiz-ring__logo--ohne { display: none; }
.wiz-ring--fertig .wiz-ring__logo--aktiv { transform: translate(var(--rx), var(--ry)) scale(1.3); }
.wiz-stadt--foto .wiz-ring--fertig .wiz-ring__logo--aktiv,
.wiz-stadt--foto .wiz-ring__logo--aktiv { transform: translate(0, -14px) scale(1.15); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.wiz-ring__name {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 15px; font-weight: 500; opacity: 0; transition: opacity .3s ease .15s;
}
.wiz-ring--fertig .wiz-ring__logo--aktiv .wiz-ring__name { opacity: 1; }

/* Der Fotostapel: Fotos mit 20 px Ecken, leicht verdreht, mit jedem Schritt einer mehr.
   Statt Schatten trennt ein Papierrand die Fotos voneinander. */
.wiz-stapel {
  position: relative; width: 100%; height: 0; margin-top: 0; opacity: 0;
  transition: height .6s cubic-bezier(.2, .8, .2, 1), opacity .4s ease .1s, margin-top .6s cubic-bezier(.2, .8, .2, 1);
}
.wiz-stadt--foto .wiz-stapel { height: 380px; margin-top: 22px; opacity: 1; }
.wiz-foto {
  position: absolute; left: 50%; top: 50%; width: 330px; height: 330px; margin: -165px 0 0 -165px;
  border: 6px solid var(--papier); border-radius: 26px; overflow: hidden; background: var(--chip);
  opacity: 0; transform: translateY(40px) rotate(var(--drehung, 0deg)) scale(.96);
  transition: opacity .4s ease, transform .55s cubic-bezier(.2, .8, .2, 1);
}
.wiz-foto--da { opacity: 1; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--drehung, 0deg)); }
.wiz-foto--fehlt { display: none; }
.wiz-foto img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }

/* -------------------------------------------------------------------------
   Schmal
   ------------------------------------------------------------------------- */
@media (max-width: 520px) {
  .auth-main__inner--weit .auth-shell { height: auto; min-height: var(--kasten-hoehe); }
  .auth-main__inner--weit .auth-shell.auth-shell--frei { min-height: 0; }
  .wiz-marke { flex-basis: 60px; width: 60px; height: 38px; }
  .wiz-marke img { max-width: 48px; max-height: 24px; }
  .wiz-raster { gap: 8px; }
}

/* gradion.js markiert Links auf die aktuelle Seite; hier trifft das auch den hellen Knopf im Mobil-Menü */
.mobilmenue .knopf[aria-current="page"] { color: var(--graphit); }