/* =========================================================================
   EisBär-Manager — Auth-Seiten (Kunden-Login / Kundenkonto anlegen)
   Hero-Split-Layout nach den Mockups des Kollegen, auf die Design-Tokens
   aus style.css gemappt. Der Hero (links) ist bewusst immer dunkel; die
   Formular-Seite (rechts) folgt Hell/Dunkel.
   ========================================================================= */

.shell { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
@media (max-width: 940px) { .shell { grid-template-columns: 1fr; } }

/* ============================== HERO (LINKS) ============================= */
.hero {
	position: relative; overflow: hidden;
	padding: clamp(28px, 4vw, 56px);
	display: flex; flex-direction: column; justify-content: space-between;
	color: #eef2f4; background: #000;
}
@media (max-width: 940px) { .hero { min-height: 46vh; } }
.hero::before, .hero::after {
	content: ""; position: absolute; inset: -30%;
	background:
		radial-gradient(40% 55% at 22% 28%, rgba(91,127,149,.62), transparent 60%),
		radial-gradient(44% 52% at 78% 22%, rgba(149,155,157,.42), transparent 62%),
		radial-gradient(52% 60% at 62% 82%, rgba(91,127,149,.40), transparent 60%),
		radial-gradient(46% 50% at 32% 78%, rgba(233,91,19,.34), transparent 60%);
	filter: blur(30px); animation: drift 18s ease-in-out infinite alternate; z-index: 0;
}
.hero::after { animation-duration: 26s; animation-direction: alternate-reverse; opacity:.7; }
@keyframes drift {
	0%   { transform: translate(0,0) rotate(0deg) scale(1); }
	50%  { transform: translate(3%, -2%) rotate(8deg) scale(1.12); }
	100% { transform: translate(-3%, 3%) rotate(-6deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .hero::before, .hero::after { animation: none; } .speck { display:none; } }

.hero .grain {
	position:absolute; inset:0; z-index:1; pointer-events:none;
	background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 4px 4px;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
}
.hero > * { position: relative; z-index: 2; }

.hero .brand { display:flex; align-items:center; gap:14px; }
.hero .brand .mark {
	width:52px; height:52px; border-radius:16px; overflow:hidden; display:grid; place-items:center; font-size:1.7rem;
	background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.03));
	border: 1px solid rgba(255,255,255,.18);
	box-shadow: 0 8px 30px -8px rgba(91,127,149,.6), inset 0 1px 0 rgba(255,255,255,.25);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero .brand .mark img { width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.hero .brand-name { font-family: var(--font-head); font-weight:800; font-size:1.35rem; letter-spacing:-.02em; color:#eef2f4; }
.hero .brand-name span { background:linear-gradient(90deg,#9fc0d4,#e95b13); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

.hero-mid { max-width: 460px; }
.kicker {
	display:inline-flex; align-items:center; gap:8px;
	font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
	padding:7px 14px; border-radius:999px;
	background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
	color:#cdd6db; margin-bottom:22px;
}
.kicker .dot { width:7px; height:7px; border-radius:50%; background:#e95b13; box-shadow:0 0 10px #e95b13; }
.hero h1 { font-family: var(--font-head); font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height:1.04; margin:0 0 18px; font-weight:800; letter-spacing:-.03em; color:#eef2f4; }
.hero h1 em { font-style:normal; background:linear-gradient(100deg,#a8c6d8,#ef6a24 70%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero p.lead { color:#c2cbd0; font-size:1.02rem; line-height:1.6; margin:0 0 30px; }

.feats { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.feats li { display:flex; align-items:center; gap:13px; font-size:.95rem; color:#dfe4e7; }
.feats .ic { flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-size:1.05rem;
	background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); }

.hero-foot { display:flex; align-items:center; gap:22px; color:#959b9d; font-size:.85rem; }
.hero-foot .stat b { display:block; font-family:var(--font-head); font-size:1.35rem; color:#eef2f4; font-weight:700; }

.speck { position:absolute; z-index:2; border-radius:50%; background:rgba(255,255,255,.7); box-shadow:0 0 8px rgba(180,225,255,.9); animation: rise linear infinite; opacity:.5; }
@keyframes rise { from{ transform:translateY(20px);} to{ transform:translateY(-120vh);} }

/* ============================== FORM (RECHTS) =========================== */
.pane { position:relative; padding: clamp(22px, 3vw, 44px); display:flex; flex-direction:column; background: var(--bg); }
.pane-top { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-bottom: 22px; }

/* Login-Link für Bestandskunden: ganz oben links in der Kopfzeile */
.top-login {
	margin-right: auto;
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--font-head); font-weight: 700; font-size: .88rem;
	color: var(--ink); background: var(--field); border: 1px solid var(--field-border);
	padding: 9px 16px; border-radius: 999px; text-decoration: none;
	transition: border-color .18s, color .18s, transform .15s;
}
.top-login:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); text-decoration: none; }

.form-card {
	margin:auto 0; width:100%; max-width: 520px; align-self:center;
	background: var(--panel); border:1px solid var(--panel-border); border-radius: var(--radius-lg);
	padding: clamp(26px, 3vw, 40px);
	backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
	box-shadow: var(--shadow);
}
.form-card.narrow { max-width: 440px; }
.form-title { font-family: var(--font-head); font-size:1.7rem; font-weight:800; letter-spacing:-.02em; margin:0 0 6px; color: var(--head-ink); }
.form-sub { color:var(--muted); font-size:.92rem; margin:0 0 26px; line-height:1.5; }

.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.grid2.one { grid-template-columns:1fr; }
@media (max-width:520px){ .grid2 { grid-template-columns:1fr; } }

.sec-label { font-family:var(--font-head); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ice); margin:22px 0 14px; display:flex; align-items:center; gap:9px; }
.sec-label::after { content:""; flex:1; height:1px; background:var(--field-border); }

/* Floating-Label-Feld */
.fl { position:relative; margin-bottom:13px; }
.fl input {
	width:100%; font:inherit; font-size:.95rem; color:var(--ink);
	background:var(--field); border:1.5px solid var(--field-border);
	border-radius:14px; padding:19px 14px 8px; outline:none;
	transition:border-color .18s, box-shadow .18s, background .18s;
}
.fl input:focus { border-color:var(--ice); background:var(--field-focus); box-shadow:0 0 0 4px var(--field-focus); }
.fl label { position:absolute; left:14px; top:14px; font-size:.95rem; color:var(--faint); pointer-events:none; transition:.16s ease; }
.fl input:focus + label, .fl input:not(:placeholder-shown) + label,
.fl input:-webkit-autofill + label { top:7px; font-size:.68rem; color:var(--ice); font-weight:600; letter-spacing:.02em; }
/* Browser-Autofill: Label hochziehen (s.o.) + das Gelb/Weiß des Browsers
   auf unser dunkles Glas-Feld zurückzwingen, sonst überlagert der Autofill-
   Hintergrund den Feld-Look und der Hint bleibt lesbar im Hintergrund. */
.fl input:-webkit-autofill,
.fl input:-webkit-autofill:hover,
.fl input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ink);
	caret-color: var(--ink);
	-webkit-box-shadow: 0 0 0 100px var(--field) inset;
	transition: background-color 9999s ease-in-out 0s;
}
.fl .req { color:var(--accent); }
.fl .eye { position:absolute; right:8px; top:50%; transform:translateY(-50%); border:none; background:transparent; color:var(--faint); cursor:pointer; padding:8px; border-radius:9px; font-size:1rem; line-height:1; }
.fl .eye:hover { color:var(--ice); }

.aux { display:flex; align-items:center; justify-content:space-between; margin:4px 2px 0; font-size:.86rem; flex-wrap:wrap; gap:8px; }
.aux a { color:var(--ice); text-decoration:none; font-weight:600; }
.aux a:hover { text-decoration:underline; }

.submit {
	width:100%; margin-top:22px; border:none; cursor:pointer;
	font:inherit; font-family:var(--font-head); font-weight:700; font-size:1.02rem; color:#fff;
	padding:16px; border-radius:15px;
	background:linear-gradient(135deg,var(--accent),var(--accent-2));
	box-shadow:0 16px 34px -12px var(--accent);
	transition:transform .15s, box-shadow .2s, filter .2s;
	display:flex; align-items:center; justify-content:center; gap:10px;
}
.submit:hover { transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 22px 44px -14px var(--accent); }
.submit:active { transform:translateY(0); }

.divider { display:flex; align-items:center; gap:12px; margin:24px 0 4px; color:var(--faint); font-size:.78rem; }
.divider::before, .divider::after { content:""; flex:1; height:1px; background:var(--field-border); }

.foot-links { text-align:center; margin-top:16px; font-size:.9rem; color:var(--muted); }
.foot-links a { color:var(--ice); text-decoration:none; font-weight:600; }
.foot-links a:hover { text-decoration:underline; }

/* Meldungen innerhalb der Karte */
.form-card .error_msg {
	padding:12px 15px; margin:0 0 18px; border:1px solid var(--err-border);
	border-radius:var(--radius-sm); font-size:13.5px; color:var(--err-ink); background:var(--err-bg);
}

/* Fortschritts-Schritte (Registrierung) */
.steps { display:flex; gap:8px; margin-bottom:26px; align-items:center; }
.steps .step { display:flex; align-items:center; gap:9px; font-size:.8rem; font-weight:600; color:var(--muted); }
.steps .bub { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:.78rem; border:1.5px solid var(--field-border); background:var(--field); color:var(--muted); }
.steps .step.active .bub { background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-color:transparent; color:#fff; box-shadow:0 6px 16px -5px var(--accent); }
.steps .step.active { color:var(--ink); }
.steps .line { flex:1; height:2px; background:var(--field-border); border-radius:2px; }

/* Passwort-Stärke */
.meter { height:5px; border-radius:99px; background:var(--field-border); margin:2px 2px 13px; overflow:hidden; }
.meter span { display:block; height:100%; width:0; border-radius:99px; transition:.3s; }

/* Info-Hinweis im Feld */
.fl .hint { position:absolute; right:10px; top:16px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; background:var(--faint); color:var(--bg); font-size:.7rem; font-weight:700; cursor:help; font-style:normal; }

/* Client-Validierung (jQuery-Validate) */
.fl input.error { border-color:var(--danger); box-shadow:0 0 0 4px rgba(214,69,69,.12); }
.fl input.valid { border-color:color-mix(in srgb, var(--ok) 55%, var(--field-border)); }
.field-error { display:block; margin:5px 2px 0; font-size:.78rem; color:var(--danger); font-weight:600; }

/* Bestätigungs-Karte (Registrierung abgeschickt) */
.form-card .confirm-ic { font-size:2.4rem; line-height:1; margin-bottom:10px; }

/* Sprach-Pills / Theme-Toggle liegen im .pane-top (nutzen .seg/.tt aus style.css) */