/* ═══════════════════════════════════════════════════════════════════════════
   ANMELDESEITE (wp-login.php)

   Nur das Aussehen. Das Formular selbst gehoert WordPress — Passwort-vergessen,
   Fehlermeldungen, Nonces und Sperren bleiben unangetastet.

   ⚠️ WARUM HIER @font-face STEHT, obwohl das Theme seine Schriften in
   theme.json fuehrt: Die Anmeldeseite laedt die globalen Styles eines
   Block-Themes NICHT. Ohne diese Regeln faende der Browser die Hausschriften
   nicht. Sie zeigen auf die woff2-Dateien DIESES Themes (../fonts/) —
   KEIN Aufruf an fonts.googleapis.com oder fonts.gstatic.com. Self-hosted ist
   in diesem Projekt eine DSGVO-Vorgabe und gilt auf der Anmeldeseite genauso.

   ⚠️ DIE FARBEN STEHEN HIER NOCH EINMAL, und zwar aus demselben Grund: Die
   `:root`-Variablen des Themes kommen aus main.css, und die laedt auf
   wp-login.php nicht. Damit die Werte trotzdem an EINER Stelle stehen und
   nicht ueber die Datei verstreut sind, wiederholt der Block unten sie als
   eigene Variablen — jede mit dem Namen, unter dem sie im Theme steht.
   ⚠️ WER EINE THEME-FARBE AENDERT, MUSS SIE HIER MITZIEHEN. Das ist der Preis
   dafuer, dass die Anmeldeseite ausserhalb der globalen Styles lebt; er ist
   hiermit benannt und auf zehn Zeilen begrenzt.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
	--hc-dark:#1a1a1a;                       /* --dark      in main.css */
	--hc-cream:#FAF8F5;                      /* --cream     in main.css */
	--hc-teal:#2C5F5A;                       /* --teal      in main.css */
	--hc-teal-hover:#245048;                 /* Hover-Teal, in main.css bei .sermon-nav a:hover u. a. */
	--hc-peach:#E8A87C;                      /* --peach     in main.css, Hover von .btn */
	--hc-border:#e8e5e0;                     /* --border    in main.css */
	/* Die Fusszeile: dieselben Werte wie .footer / .footer-links in main.css.
	   Dahinter steht dort KEINE Variable — es sind Literale, deshalb hier auch. */
	--hc-foot-link:rgba(255,255,255,.55);    /* .footer-links, .footer-links a */
	--hc-foot-link-hover:#fff;               /* .footer-links a:hover */
	--hc-foot-focus:rgba(255,255,255,.7);    /* .footer-newsletter input:focus-visible */
}

@font-face{font-family:'Cormorant Garamond';src:url('../fonts/CormorantGaramond-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../fonts/CormorantGaramond-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('../fonts/NunitoSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('../fonts/NunitoSans-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ── Die Seite als Ganzes ────────────────────────────────────────────────────
   Kopfleiste oben, Fusszeile unten, dazwischen die Kachel in der Mitte des
   verbleibenden Raums. Ohne das schwebte das Formular in der oberen Haelfte —
   WordPress setzt `#login{padding:5% 0 0}` und laesst den Rest leer. */
html{height:100%}
body.login{
	min-height:100vh;
	margin:0;
	display:flex;
	flex-direction:column;
	background:var(--hc-cream);
	color:var(--hc-dark);
	font-family:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

	/* WordPress' Admin-Blau an EINER Stelle auf die Hausfarbe umstellen. Der
	   Kern faerbt daraus das Augen-Symbol (`.wp-core-ui .button`), die
	   Fokusringe, den Hauptknopf und den Fragezeichen-Ballon. Eine Variable
	   statt eines Dutzends Einzelregeln — und nichts wird versteckt. */
	--wp-admin-theme-color:var(--hc-teal);
	--wp-admin-theme-color--rgb:44,95,90;
	--wp-admin-theme-color-darker-10:var(--hc-teal-hover);
	--wp-admin-theme-color-darker-20:var(--hc-teal-hover);
}

/* ── Kopfleiste ──────────────────────────────────────────────────────────────
   Werte aus assets/css/navigation.css (.nav / .nav.solid / .nav-logo-img).
   NICHT uebernommen: position:fixed — hier gibt es nichts zu scrollen. */
.hc-login-bar{
	flex:none;
	height:72px;
	padding:0 3rem;
	display:flex;
	align-items:center;
	background:rgba(255,255,255,.97);
	box-shadow:0 1px 12px rgba(0,0,0,.08);
	box-sizing:border-box;
}
.hc-login-bar__logo{display:flex;align-items:center;text-decoration:none}
.hc-login-bar__img{
	display:block;
	height:52px;
	width:101px;
	background:url('../images/logo-teal.png') left center/contain no-repeat;
}

/* ── Die Spalte mit Ueberschrift, Kachel und Links ───────────────────────── */
#login{
	flex:1 0 auto;
	display:flex;
	flex-direction:column;
	justify-content:center;
	width:100%;
	max-width:400px;
	padding:2.5rem 1rem;
	margin:0 auto;
	box-sizing:border-box;
}

/* Das WordPress-Logo entfaellt — es gibt genau EIN Logo, und das steht in der
   Kopfleiste. Der zugaengliche Name wandert mit (siehe hc_login_header_bar()). */
.login h1.wp-login-logo{display:none}

/* ── „Welcome back" ──────────────────────────────────────────────────────────
   Die Hausschrift, hier zum ersten Mal sichtbar. Aussehen nach .s-title /
   .hero-tagline in main.css (Cormorant Garamond 600, Deep Teal); 34px ist der
   Wert, auf den das Theme .hero-tagline unter 900px stellt — auf einer 400px
   schmalen Spalte die passende Groesse. */
.hc-login-welcome{
	margin:0 0 1.25rem;
	font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
	font-size:34px;
	font-weight:600;
	line-height:1.15;
	color:var(--hc-teal);
	text-align:center;
}

/* ── Die Kachel ──────────────────────────────────────────────────────────────
   Werte von .newsletter-card in main.css: weiss, 16px Radius, 2.5rem
   Innenabstand, Schatten 0 4px 24px rgba(0,0,0,.06) — und OHNE Rahmen, weil
   der Schatten traegt. WordPress' Radius, Schatten und Rahmen werden damit
   ersetzt, nicht ergaenzt. */
.login form{
	margin:0;
	padding:2.5rem;
	background:#fff;
	border:0;
	border-radius:16px;
	box-shadow:0 4px 24px rgba(0,0,0,.06);
	overflow:visible;
}

.login label,
.login .forgetmenot label{
	font-family:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	font-size:14px;
	font-weight:600;
	letter-spacing:.5px;
	color:var(--hc-dark);
}

/* 16px ist bewusst die Untergrenze: Kleiner zoomt iOS beim Antippen hinein. */
.login form .input,
.login input[type=text],
.login input[type=password]{
	font-family:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	font-size:16px;
	line-height:1.5;
	color:var(--hc-dark);
	background:#fff;
	border:1px solid var(--hc-border);
	border-radius:5px;
	padding:10px 12px;
	margin:0 0 1rem;
}

/* Der Fokusring BLEIBT ein sichtbarer Ring — nur in der Hausfarbe. Ein
   Formular ohne Tastatur-Fokus waere unbedienbar. */
.login input[type=text]:focus,
.login input[type=password]:focus{
	border-color:var(--hc-teal);
	box-shadow:0 0 0 1px var(--hc-teal);
	outline:2px solid transparent;
}

/* Der Knopf nach .btn in main.css — samt des Hover-Verhaltens des Themes:
   Deep Teal wird zu Pfirsich, nicht zu einem dunkleren Teal. */
.wp-core-ui .button-primary{
	display:block;
	width:100%;
	background:var(--hc-teal);
	border:2px solid transparent;
	border-radius:6px;
	color:#fff;
	font-family:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	font-size:15px;
	font-weight:600;
	letter-spacing:.5px;
	line-height:1.4;
	padding:12px 24px;
	height:auto;
	text-shadow:none;
	box-shadow:none;
	transition:all .2s;
}
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus{
	background:var(--hc-peach);         /* wie .btn:hover in main.css */
	border-color:var(--hc-peach);
	color:#fff;
}

/* Das Augen-Symbol behaelt seinen Platz im Feld; die Farbe kommt aus der
   umgestellten Variable oben. Nur die Hoehe wird an das flachere Feld
   angepasst, sonst stuende es ueber dem Rand. */
.login .button.wp-hide-pw{
	height:100%;
	min-height:0;
	top:0;
	right:2px;
}

.login .forgetmenot{margin:0 0 1.25rem;display:flex;align-items:center;gap:.4rem;float:none}

/* ── Die Links unter der Kachel — mittig statt linksbuendig ───────────────── */
.login #nav,
.login #backtoblog{
	padding:0;
	text-align:center;
	font-family:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	font-size:13px;
	letter-spacing:.5px;
}
.login #nav{margin:1.5rem 0 0}
.login #backtoblog{margin:.6rem 0 0}
.login #nav a,
.login #backtoblog a,
.login .privacy-policy-link{color:var(--hc-teal);text-decoration:none}
.login #nav a:hover,
.login #backtoblog a:hover,
.login .privacy-policy-link:hover{color:var(--hc-teal-hover)}

/* ── Meldungen ───────────────────────────────────────────────────────────────
   Nur Form, kein Wortlaut: Die Fehlertexte sind absichtlich unspezifisch. */
.login #login_error,
.login .message,
.login .success{
	border-left-color:var(--hc-teal);
	border-radius:5px;
	font-size:14px;
}

/* ── Fusszeile — in den Farben der Standard-Fusszeile ────────────────────────
   Werte aus `.footer` und `.footer-links` in main.css: Grund `--dark`, Links
   `rgba(255,255,255,.55)`, Hover `#fff`, 13px, 20px zwischen den Links.

   DER FOKUSRING ist der der Theme-Fusszeile (`.footer-newsletter
   input:focus-visible`: 2px, `rgba(255,255,255,.7)`, 2px Abstand). Die
   Rechtslinks DORT haben keinen eigenen — hier braucht es einen, sonst waere
   die Zeile mit der Tastatur unbedienbar.

   INNENABSTAND: `.footer` hat `3rem 4rem`. Hier steht nur EINE Zeile, deshalb
   knapper — rund sechzig Prozent davon. Es soll ein Band sein, kein Streifen.

   KEINE ABGERUNDETEN ECKEN, und das ist gemessen: Die Fusszeile des Themes hat
   keine. Gesucht wurde nach `border-radius` in allen drei CSS-Dateien des
   Themes, in theme.json, in allen parts/ und templates/ sowie in den
   Inline-Styles einer ausgelieferten Seite — null Treffer am Fussbereich.
   Waere hier eine Rundung, fiele der Unterschied zur echten Fusszeile auf. */
.hc-login-foot{
	flex:none;
	padding:1.75rem 2rem;
	background:var(--hc-dark);
	color:var(--hc-foot-link);
	text-align:center;
	font-size:13px;
	letter-spacing:.5px;
}
.hc-login-foot a{
	color:var(--hc-foot-link);
	text-decoration:none;
	margin:0 10px;                      /* .footer-links a hat margin-left:20px — hier symmetrisch */
	white-space:nowrap;
	transition:color .2s;               /* wie .footer-links a */
}
.hc-login-foot a:hover{color:var(--hc-foot-link-hover)}
.hc-login-foot a:focus-visible{
	outline:2px solid var(--hc-foot-focus);
	outline-offset:2px;
	color:var(--hc-foot-link-hover);
}

/* ── Schmale Schirme ─────────────────────────────────────────────────────────
   Dieselbe Schwelle und dieselben Werte wie die echte Navigationsleiste. */
@media (max-width:900px){
	.hc-login-bar{height:60px;padding:0 1.5rem}
	.hc-login-bar__img{height:40px;width:78px}
}
@media (max-width:480px){
	#login{padding:1.5rem 1rem}
	.login form{padding:1.75rem 1.25rem}
	.hc-login-welcome{font-size:26px}   /* .info-value in main.css — auch Cormorant 600 */
	.hc-login-foot{padding:1.5rem 1rem}
	.hc-login-foot a{display:inline-block;margin:.3rem 10px}
}