/* R.E.SET „Dein Bereich" (Anmelden). Handoff-Port, gescopet unter .rsm-auth.
   Palette + --ease werden serverseitig injiziert. Seite nutzt Site-Header/Footer
   -> Topbar/Palette-Umschalter des Prototyps entfallen. Tab-Umschaltung über
   [data-mode] auf .authcard (JS); ohne JS bleibt der Anmelden-Tab sichtbar. */

.rsm-auth { background: var(--paper); color: var(--text, #1C1D1F); }
.rsm-auth *, .rsm-auth *::before, .rsm-auth *::after { box-sizing: border-box; }

.rsm-auth .auth { display: flex; align-items: center; justify-content: center; padding: clamp(24px, 5vh, 64px) clamp(18px, 5vw, 48px) 80px; }
.rsm-auth .authcard {
	width: min(1000px, 100%);
	display: grid; grid-template-columns: 1.02fr .98fr;
	border: 1px solid var(--line); border-top: 2px solid var(--brass);
	background: var(--paper); box-shadow: 0 40px 90px -40px rgba(0,0,0,.4);
	overflow: hidden;
}
@media (max-width: 820px) { .rsm-auth .authcard { grid-template-columns: 1fr; } }

.rsm-auth-fallback { max-width: 480px; margin: 40px auto; }

/* ── left editorial panel ── */
.rsm-auth .authside { position: relative; background: var(--ink); color: var(--on-ink); padding: clamp(34px, 4vw, 52px); display: flex; flex-direction: column; overflow: hidden; }
.rsm-auth .authside::after { content: ''; position: absolute; right: -80px; bottom: -80px; width: 260px; height: 260px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; }
.rsm-auth .authside::before { content: ''; position: absolute; right: -30px; bottom: -30px; width: 160px; height: 160px; border: 1px solid rgba(255,255,255,.06); border-radius: 999px; }
.rsm-auth .authside__eye { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-soft); display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.rsm-auth .authside__eye::before { content: ''; width: 24px; height: 1px; background: var(--brass); }
.rsm-auth .authside__h { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -.015em; color: var(--on-ink); margin: 0; }
.rsm-auth .authside__h em { font-style: italic; color: var(--brass-soft); }
.rsm-auth .authside__p { font-family: 'Inter Tight', sans-serif; font-size: 14.5px; line-height: 1.7; color: var(--on-ink-mid); margin-top: 16px; max-width: 40ch; }
.rsm-auth .authside__list { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; }
.rsm-auth .authside__list li { display: flex; align-items: flex-start; gap: 13px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.1); }
.rsm-auth .authside__list li:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
.rsm-auth .authside__list .ic { width: 20px; height: 20px; flex-shrink: 0; color: var(--brass-soft); margin-top: 1px; }
.rsm-auth .authside__list .ic svg { width: 100%; height: 100%; }
.rsm-auth .authside__list .tx { font-family: 'Inter Tight', sans-serif; font-size: 13.5px; line-height: 1.5; color: var(--on-ink); }
.rsm-auth .authside__list .tx b { font-weight: 600; }
.rsm-auth .authside__list .tx .soon { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--brass-soft); padding: 2px 6px; margin-left: 7px; vertical-align: middle; }
.rsm-auth .authside__foot { margin-top: auto; padding-top: 28px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-ink-mid); display: flex; align-items: center; gap: 9px; position: relative; z-index: 1; }
.rsm-auth .authside__foot svg { width: 13px; height: 13px; color: var(--brass-soft); flex-shrink: 0; }

/* ── right form panel ── */
.rsm-auth .authform { padding: clamp(34px, 4vw, 52px); display: flex; flex-direction: column; }

/* tabs (aktiv abgeleitet aus [data-mode] auf .authcard) */
.rsm-auth .authtabs { display: flex; gap: 4px; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
.rsm-auth .authtab { position: relative; background: transparent; border: 0; cursor: pointer; padding: 0 2px 14px; margin-right: 22px; font-family: 'Inter Tight', sans-serif; font-weight: 500; font-size: 15px; color: var(--text-dim); transition: color .2s var(--ease); }
.rsm-auth .authtab:hover { color: var(--ink); }
.rsm-auth .authcard[data-mode="login"] .authtab--login,
.rsm-auth .authcard[data-mode="reg"] .authtab--reg { color: var(--ink); }
.rsm-auth .authcard[data-mode="login"] .authtab--login::after,
.rsm-auth .authcard[data-mode="reg"] .authtab--reg::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brass); }

/* panel show/hide (default: Anmelden) */
.rsm-auth .authpanel--reg { display: none; }
.rsm-auth .authcard[data-mode="reg"] .authpanel--login { display: none; }
.rsm-auth .authcard[data-mode="reg"] .authpanel--reg { display: block; }

.rsm-auth .authform__h { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 26px; line-height: 1.12; letter-spacing: -.01em; color: var(--ink); margin: 0 0 4px; }
.rsm-auth .authform__h em { font-style: italic; color: var(--brass); }
.rsm-auth .authform__sub { font-family: 'Inter Tight', sans-serif; font-size: 13.5px; line-height: 1.55; color: var(--text-mid); margin-bottom: 26px; }

/* fields */
.rsm-auth .field { margin-bottom: 18px; }
.rsm-auth .field label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mid); margin-bottom: 8px; }
.rsm-auth .field__box { position: relative; display: flex; align-items: center; border: 1px solid var(--line); background: var(--paper); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.rsm-auth .field__box:focus-within { border-color: var(--brass); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brass) 16%, transparent); }
.rsm-auth .field__box input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 13px 15px; font-family: 'Inter Tight', sans-serif; font-size: 15px; color: var(--ink); border-radius: 0; }
.rsm-auth .field__box input:focus { outline: none; box-shadow: none; }
.rsm-auth .field__box input::placeholder { color: var(--text-dim); }
.rsm-auth .field__eye { background: transparent; border: 0; cursor: pointer; padding: 0 14px; color: var(--text-dim); display: flex; align-items: center; transition: color .2s var(--ease); }
.rsm-auth .field__eye:hover { color: var(--ink); }
.rsm-auth .field__eye svg { width: 19px; height: 19px; display: block; }
.rsm-auth .field__eye .eye-show, .rsm-auth .field__eye .eye-hide { display: flex; }
.rsm-auth .field__eye .eye-hide { display: none; }
.rsm-auth .field__box.pw-visible .eye-show { display: none; }
.rsm-auth .field__box.pw-visible .eye-hide { display: flex; }

/* row: remember + forgot */
.rsm-auth .authrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 24px; flex-wrap: wrap; }
.rsm-auth .check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: 'Inter Tight', sans-serif; font-size: 13px; color: var(--text-mid); user-select: none; }
.rsm-auth .check input { position: absolute; opacity: 0; width: 0; height: 0; }
.rsm-auth .check .bx { width: 18px; height: 18px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s var(--ease), border-color .2s var(--ease); }
.rsm-auth .check .bx svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity .15s var(--ease); }
.rsm-auth .check input:checked + .bx { background: var(--brass); border-color: var(--brass); }
.rsm-auth .check input:checked + .bx svg { opacity: 1; }
.rsm-auth .check input:focus-visible + .bx { box-shadow: 0 0 0 3px color-mix(in oklab, var(--brass) 20%, transparent); }
.rsm-auth .authlink { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .04em; color: var(--brass-ink); text-decoration: none; white-space: nowrap; }
.rsm-auth .authlink:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* brass button (self-contained) */
.rsm-auth .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 15px; padding: 14px 24px; border: 1px solid transparent; border-radius: 0; cursor: pointer; text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease); }
.rsm-auth .btn--brass { width: 100%; background: var(--brass); color: #fff; border-color: var(--brass); }
.rsm-auth .btn--brass:hover { background: var(--brass-ink); border-color: var(--brass-ink); color: #fff; }
.rsm-auth .btn .arrow { width: 16px; height: 1px; background: currentColor; position: relative; }
.rsm-auth .btn .arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

/* consent (funnel) */
.rsm-auth .consent { font-family: 'Inter Tight', sans-serif; font-size: 12px; line-height: 1.55; color: var(--text-dim); margin-top: 16px; }
.rsm-auth .consent a { color: var(--brass-ink); text-decoration: none; }
.rsm-auth .consent a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* booking paths (funnel) */
.rsm-auth .authpaths { border-top: 1px solid var(--line); margin-bottom: 4px; }
.rsm-auth .authpaths a { display: grid; grid-template-columns: auto 1fr auto auto; column-gap: 16px; row-gap: 4px; align-items: baseline; padding: 17px 4px; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding .25s var(--ease), background .25s var(--ease); }
.rsm-auth .authpaths a:hover { background: var(--paper-warm); padding-left: 12px; padding-right: 12px; }
.rsm-auth .authpaths .no { grid-column: 1; grid-row: 1; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-ink); padding-top: 5px; }
.rsm-auth .authpaths .nm { grid-column: 2; grid-row: 1; font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 21px; color: var(--ink); line-height: 1.1; }
.rsm-auth .authpaths .pr { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 21px; color: var(--ink); white-space: nowrap; text-align: right; }
.rsm-auth .authpaths .pr.free { font-style: italic; color: var(--brass); }
.rsm-auth .authpaths .sub { grid-column: 2; grid-row: 2; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; }
.rsm-auth .authpaths .arrw { grid-column: 4; grid-row: 1 / span 2; align-self: center; color: var(--text-dim); transition: transform .25s var(--ease), color .25s var(--ease); }
.rsm-auth .authpaths a:hover .arrw { transform: translateX(4px); color: var(--brass); }

/* divider + alt */
.rsm-auth .authalt { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-soft); text-align: center; font-family: 'Inter Tight', sans-serif; font-size: 13.5px; color: var(--text-mid); }
.rsm-auth .authalt button { background: transparent; border: 0; cursor: pointer; font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 13.5px; color: var(--brass-ink); padding: 0 0 0 6px; }
.rsm-auth .authalt button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── 2FA-Abfrage (Wordfence Login Security) ───────────────────────────────────
   Wordfence baut die Code-Abfrage beim Absenden per JS ins Formular: ein Overlay
   (#wfls-prompt-overlay, ab Werk position:absolute/inset:0 auf weissem Grund) mit
   Label, Feld #wfls-token, optionalem „30 Tage merken" und eigenem Submit. Das
   Markup gehoert Wordfence — wir geben ihm nur unsere Optik. Greift nur, wenn die
   Kundin 2FA eingeschaltet hat; sonst existiert nichts davon. */
.rsm-auth .rsm-auth-wcmark { display: none; }
.rsm-auth .authhook:not(:empty) { margin-bottom: 6px; }

/* Rueckfall (Browser ohne :has()): Overlay bleibt wie bei Wordfence absolut ueber
   dem Formular. Dann von OBEN ausrichten — bei zentrierter Ausrichtung schneidet
   ein zu hoher Inhalt oben ab und ist nicht mehr erreichbar. */
.rsm-auth #wfls-prompt-overlay {
	background: var(--paper); padding: 0; z-index: 2; overflow: auto;
	display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
}
/* Normalfall: die Code-Abfrage TRITT AN DIE STELLE des Formulars, statt es zu
   ueberdecken — so kann nichts abgeschnitten werden und die Karte behaelt ihren
   Fluss. Benutzername/Passwort bleiben im DOM (nur unsichtbar) und werden beim
   zweiten Absenden mitgeschickt — genau das erwartet Wordfence. */
.rsm-auth form.rsm-auth-loginform:has(#wfls-prompt-overlay) #wfls-prompt-overlay { position: static; }
.rsm-auth form.rsm-auth-loginform:has(#wfls-prompt-overlay) .field,
.rsm-auth form.rsm-auth-loginform:has(#wfls-prompt-overlay) .authrow,
.rsm-auth form.rsm-auth-loginform:has(#wfls-prompt-overlay) > button[name="login"] { display: none; }
.rsm-auth #wfls-prompt-wrapper { width: 100%; flex: 0 0 auto; }
/* Kurze Einordnung — sonst steht die Kundin vor einem Formular, das ohne
   Erklaerung verschwunden ist. Das Fremd-Markup bringt nur das Feld mit. */
.rsm-auth #wfls-prompt-overlay::before {
	content: 'Noch ein Schritt.';
	font-family: 'Cormorant Garamond', serif; font-weight: 500;
	font-size: 26px; line-height: 1.12; color: var(--ink); margin-bottom: 4px;
}
.rsm-auth #wfls-prompt-wrapper::before {
	content: 'Gib den Code aus deiner Authenticator-App ein — ein Wiederherstellungs-Code geht auch.';
	display: block; font-family: 'Inter Tight', sans-serif; font-size: 13.5px;
	line-height: 1.55; color: var(--text-mid); margin-bottom: 22px;
}
.rsm-auth #wfls-prompt-wrapper p { margin: 0 0 14px; }
.rsm-auth #wfls-prompt-wrapper label[for="wfls-token"] {
	display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
	letter-spacing: .1em; text-transform: uppercase; color: var(--text-mid); margin-bottom: 8px;
}
.rsm-auth .wfls-2fa-code-help { color: var(--brass-ink); vertical-align: middle; }
.rsm-auth #wfls-token {
	width: 100%; border: 1px solid var(--line); background: var(--paper); border-radius: 0;
	padding: 13px 15px; font-family: 'JetBrains Mono', monospace; font-size: 18px;
	letter-spacing: .32em; color: var(--ink); box-shadow: none;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.rsm-auth #wfls-token:focus {
	outline: none; border-color: var(--brass);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--brass) 16%, transparent);
}
.rsm-auth .wfls-remember-device-wrapper { float: none; }
.rsm-auth .wfls-remember-device-wrapper label {
	display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
	font-family: 'Inter Tight', sans-serif; font-size: 13px; color: var(--text-mid);
}
.rsm-auth #wfls-token-submit {
	width: 100%; background: var(--brass); color: #fff; border: 1px solid var(--brass);
	border-radius: 0; padding: 14px 24px; cursor: pointer; text-shadow: none; box-shadow: none;
	font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 15px; line-height: 1.2;
	height: auto; transition: background .2s var(--ease), border-color .2s var(--ease);
}
.rsm-auth #wfls-token-submit:hover { background: var(--brass-ink); border-color: var(--brass-ink); color: #fff; }
.rsm-auth #wfls-token-submit.disabled { opacity: .6; cursor: default; }

/* Wordfence haengt Anmelde-Meldungen VOR <main> ein — also ausserhalb von
   .rsm-auth. Diese Datei laedt nur auf der Anmeldeseite, darum ungescopet. */
.wfls-login-message {
	max-width: min(1000px, calc(100% - 36px)); margin: 18px auto -6px;
	font-family: 'Inter Tight', sans-serif; font-size: 14px;
}
.wfls-login-message ul { list-style: none; margin: 0; padding: 14px 18px; border-left: 2px solid var(--brass, #9a7b4f); background: var(--paper-warm, #f6f2ec); }
.wfls-login-message li { margin: 0; }

/* helper note under card */
.rsm-auth .authnote { text-align: center; margin-top: 22px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .05em; color: var(--text-dim); }