/* Login-Seite app.sternchen-ki.de. Farben und Schriften wie auf sternchen-ki.de (custom.css, Abschnitt „Farbpalette“),
   Schriften lokal (Geist, Playfair Display kursiv; SIL Open Font License 1.1). */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/geist-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/geist-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap; src: url(fonts/playfair-display-italic-latin.woff2) format('woff2'); }

:root {
  --primary: #173F7A;          /* Primär (--theme-color3) */
  --primary-light: #1F5199;    /* hellere Stufe (--theme-color4) */
  --dark: #0C1D3A;             /* Dunkel (--theme-color2) */
  --yellow: #F6CF5E;           /* Akzent Gelb (--theme-color1) */
  --sky: 79, 179, 217;         /* Akzent Hellblau (--accent-3) */
  --text: #5F647B;
  --line: rgba(23, 63, 122, 0.14);
  --bg: color-mix(in srgb, var(--primary) 4%, #FAFAF9);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--dark); font: 400 16px/1.6 'Geist', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--primary); }

.login { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100%; }

/* Linke Seite: schwarze Bühne mit der Himmelskarte wie die Abschlussbox der Website */
.login-side { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: clamp(28px, 4vw, 56px); background: #000; color: #fff; }
.sky { position: absolute; inset: 0; z-index: -1; background-color: rgba(var(--sky), 0.5); -webkit-mask: url(himmelskarte.svg) 50% 50% / cover no-repeat; mask: url(himmelskarte.svg) 50% 50% / cover no-repeat; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -0.03em; }
.brand::before { content: ""; width: 40px; height: 40px; background: url(logo.svg) center / contain no-repeat; }
.claim { margin: 0; max-width: 14em; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.claim em { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 500; color: var(--yellow); }

/* Rechte Seite: Formular */
.login-main { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 32px; padding: clamp(32px, 5vw, 72px) 20px 24px; }
.login-card { width: 100%; max-width: 420px; }
h1 { margin: 0 0 8px; font-size: 34px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.lead { margin: 0 0 32px; color: var(--text); }
.field { margin-bottom: 20px; }
.field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 500; }
.text-link { font-size: 14px; font-weight: 500; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* Drei Ansichten, umgeschaltet über :target (#anmelden, #passwort-vergessen, #link-gesendet). Ohne Sprungziel und bei
   #fehler (liegt in #anmelden) gilt die Anmeldung. */
.view { display: none; }
.view:target, .view:has(:target), .views:not(:has(:target)) #anmelden { display: block; }
.view:focus { outline: none; }
/* Fehlermeldung nach „Anmelden“ (#fehler): ohne JavaScript über :target, mit JavaScript zusätzlich ein kurzes Wackeln */
.alert { display: none; margin: 0 0 20px; padding: 12px 16px; border: 1px solid rgba(194, 38, 43, 0.35); border-left-width: 4px; border-radius: 8px; background: #FDF1F1; color: #8F1D21; font-size: 15px; line-height: 1.5; }
.alert:target { display: block; }
.alert:focus { outline: none; }
.alert.flash { animation: flash 400ms ease; }
@keyframes flash { 0% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } 100% { transform: none; } }
.back { margin: 24px 0 0; text-align: center; }
.hint { margin: 0; font-size: 14px; color: var(--text); }
.sent-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 20px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 10%, #fff); }
.sent-icon::before { content: ""; width: 26px; height: 26px; background: var(--primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Wartezeit beim Senden des Links (login.js): Kreis statt Beschriftung */
.btn.is-busy { cursor: progress; }
.btn.is-busy .btn-label { visibility: hidden; }
.btn { position: relative; }
.btn.is-busy::after { content: ""; position: absolute; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
input { width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--dark); font: inherit; transition: border-color 150ms, box-shadow 150ms; }
input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(23, 63, 122, 0.15); }
.btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin-top: 8px; border: 0; border-radius: 10px; background: var(--primary); color: #fff; font: 600 16px/1 'Geist', system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: background-color 150ms; }
.btn:hover { background: var(--primary-light); }
.btn:focus-visible, a:focus-visible { outline: 3px solid rgba(23, 63, 122, 0.35); outline-offset: 2px; }

.login-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 14px; }
.login-foot a { color: var(--text); text-decoration: none; }
.login-foot a:hover { color: var(--primary); text-decoration: underline; }

@media (max-width: 860px) {
  .login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .login-side { gap: 28px; padding: 24px 20px 32px; }
  .claim { font-size: 26px; }
  .brand { font-size: 22px; }
  .brand::before { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .alert.flash { animation: none; } }