/*
 * ZWP Designpreis — Kontobereich.
 *
 * Setzt ausschließlich auf den OMAG-Tokens des Themes auf. Hier entstehen
 * KEINE neuen Farben, Schriften oder Radien — nur Layout, Zielgrößen und
 * Fokusführung. Das Auth-Layout ist der Split aus dem Handoff: Markenfläche
 * links, Formularspalte rechts, unter etwa 880 px gestapelt.
 */

/* ---------------------------------------------------------------------------
 * 0. `hidden` bedeutet versteckt
 *
 * Das Attribut bekommt sein `display: none` vom Browser. Jede Regel dieses
 * Stylesheets, die `display` setzt, schlaegt das — Autorenregeln gehen
 * grundsaetzlich vor Browserregeln, ganz gleich wie spezifisch sie sind. Genau
 * daran lag es, dass der Konflikthinweis dauerhaft sichtbar war: `.dp-hinweis`
 * setzt `display: flex`.
 *
 * Das `!important` ist hier das richtige Werkzeug und nicht der bequeme Ausweg:
 * `hidden` ist eine Aussage des Markups, keine Gestaltungsfrage.
 * ------------------------------------------------------------------------ */

[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * 1. Split-Layout
 * ------------------------------------------------------------------------ */

.dp-konto__split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
	min-height: 100vh;
	background: var(--surface-page);
}

.dp-konto__marke {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-8);
	padding: clamp(24px, 4vw, 48px);
	background: var(--surface-brand);
	color: var(--on-brand);
	overflow: hidden;
}

/*
 * Alle Zustände ausschreiben: Die globale Regel `a:hover` des Designsystems
 * setzt die Linkfarbe Viola. Auf der Viola-Markenfläche verschwände der Link
 * genau dann, wenn man ihn berührt.
 */
.dp-konto__marke a,
.dp-konto__marke a:hover,
.dp-konto__marke a:focus,
.dp-konto__marke a:focus-visible,
.dp-konto__marke a:active {
	color: var(--on-brand);
}

.dp-konto__wortmarke {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: var(--control-h-md);
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--text-h3-size);
	letter-spacing: var(--track-display);
	text-decoration: none;
	white-space: nowrap;
}

.dp-konto__wortmarke--dunkel {
	color: var(--omag-deep-viola);
}

.dp-konto__anspruch {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.dp-konto__spruch {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(26px, 2.6vw, 38px);
	line-height: 1.15;
	letter-spacing: var(--track-display);
	max-width: 14ch;
}

.dp-konto__unterzeile {
	max-width: 36ch;
	color: color-mix(in oklab, var(--omag-dust-white) 82%, var(--omag-deep-viola));
}

.dp-konto__fuss {
	position: relative;
	color: color-mix(in oklab, var(--omag-dust-white) 72%, var(--omag-deep-viola));
}

/* Auch die Rechtslinks in der Markenspalte sind eigenständige Ziele. */
.dp-konto__fuss a {
	display: inline-flex;
	align-items: center;
	min-height: var(--control-h-md);
}

.dp-konto__spalte {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 32px);
}

/* Die Formularspalte bleibt schmal — 440 px ist die Obergrenze aus dem Handoff. */
.dp-konto__form {
	width: 100%;
	max-width: 440px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.dp-konto__formular {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.dp-konto__kopf {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.dp-konto__titel {
	font-size: var(--text-h2-size);
	line-height: var(--text-h2-lh);
}

.dp-konto__titel--gross {
	font-size: clamp(28px, 3vw, var(--text-h1-size));
	line-height: var(--text-h1-lh);
}

.dp-konto__lead {
	color: var(--text-secondary);
}

.dp-konto__paar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
}

.dp-konto__zeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	flex-wrap: wrap;
}

.dp-konto__aktionen {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.dp-konto__wechsel {
	color: var(--text-secondary);
	text-align: center;
	border-top: 1px solid var(--border-subtle);
	padding-top: var(--space-4);
}

/* ---------------------------------------------------------------------------
 * 2. Felder
 * ------------------------------------------------------------------------ */

.dp-konto__eingabe {
	position: relative;
}

/*
 * Passwortfelder sind höher als andere Felder. Grund: Der Umschalter liegt im
 * Feld und muss ein Ziel von 44 px behalten — in ein 44-px-Feld passt er nicht
 * hinein, ohne es zu überragen.
 */
.dp-konto__eingabe--passwort .ds-input {
	height: var(--control-h-lg);
	padding-right: 116px;
}

.dp-konto__schalter {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	min-width: 96px;
	min-height: var(--control-h-md);
	padding: 0 var(--space-4);
	border: none;
	border-radius: var(--radius-pill);
	background: var(--omag-viola-12);
	color: var(--omag-deep-viola);
	font-family: var(--font-body);
	font-size: var(--text-small-size);
	font-weight: 600;
	cursor: pointer;
}

.dp-konto__schalter:hover {
	background: var(--omag-viola-25);
}

.dp-konto__einwilligungen {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/*
 * Das Klickziel ist das ganze Label, nicht das 22-px-Kästchen des
 * Designsystems: ein Klick auf den Text schaltet mit. Gemessen waren es 42 px,
 * zwei zu wenig — deshalb die Mindesthöhe.
 */
.dp-konto__einwilligung {
	min-height: var(--control-h-md);
	align-items: center;
	padding-block: 2px;
}

.dp-konto__einwilligung-fehler {
	margin: -6px 0 0 34px;
}

/* ---------------------------------------------------------------------------
 * 3. Hinweise — Punkt plus Text, nie nur Farbe
 * ------------------------------------------------------------------------ */

.dp-hinweis {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	padding: 14px 18px;
	border: var(--border-w) solid var(--omag-viola-25);
	border-radius: var(--radius-md);
	background: var(--omag-viola-6);
}

.dp-hinweis__punkt {
	flex: none;
	inline-size: 9px;
	block-size: 9px;
	margin-block-start: 6px;
	border-radius: var(--radius-pill);
	background: var(--omag-deep-viola);
}

.dp-hinweis__inhalt {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}

.dp-hinweis__titel {
	font-weight: 600;
	font-size: 15px;
	color: var(--omag-deep-viola);
}

.dp-hinweis__punkte {
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.dp-hinweis__punkte a {
	font-weight: 600;
}

.dp-hinweis--erfolg {
	border-color: var(--color-success);
	background: var(--color-success-soft);
}

.dp-hinweis--erfolg .dp-hinweis__punkt {
	background: var(--color-success);
}

.dp-hinweis--erfolg .dp-hinweis__titel,
.dp-hinweis--erfolg .dp-hinweis__punkte a {
	color: var(--color-success);
}

.dp-hinweis--warnung {
	border-color: var(--omag-corporate);
	background: var(--omag-corporate-light);
}

.dp-hinweis--warnung .dp-hinweis__punkt {
	background: var(--omag-corporate-ink);
}

.dp-hinweis--warnung .dp-hinweis__titel,
.dp-hinweis--warnung .dp-hinweis__punkte a {
	color: var(--omag-corporate-ink);
}

.dp-hinweis--fehler {
	border-color: var(--color-error);
	background: var(--color-error-soft);
}

.dp-hinweis--fehler .dp-hinweis__punkt {
	background: var(--color-error);
}

.dp-hinweis--fehler .dp-hinweis__titel,
.dp-hinweis--fehler .dp-hinweis__punkte a {
	color: var(--color-error);
}

/* ---------------------------------------------------------------------------
 * 4. Abmeldeseite
 * ------------------------------------------------------------------------ */

.dp-konto__mitte {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-6);
	padding: var(--space-10) var(--space-5);
	background: var(--surface-page);
}

.dp-konto__karte {
	width: 100%;
	max-width: 440px;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	text-align: center;
	align-items: center;
}

/* ---------------------------------------------------------------------------
 * 5. Kontokopf
 *
 * Weiße Fläche mit Haarlinie — genau das unterscheidet den Kontobereich vom
 * Viola-Marketing-Kopf der Website.
 * ------------------------------------------------------------------------ */

.dp-kontokopf {
	background: var(--surface-card);
	border-bottom: 1px solid var(--border-subtle);
}

.dp-kontokopf__inhalt {
	max-width: 1220px;
	margin: 0 auto;
	padding: var(--space-3) clamp(20px, 4.5vw, 64px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	flex-wrap: wrap;
	min-height: 64px;
}

.dp-kontokopf__marke,
.dp-kontokopf__aktionen {
	display: flex;
	align-items: center;
	gap: 8px 18px;
	flex-wrap: wrap;
}

.dp-kontokopf__wortmarke {
	display: inline-flex;
	align-items: center;
	min-height: var(--control-h-md);
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 20px;
	letter-spacing: var(--track-display);
	color: var(--omag-deep-viola);
	text-decoration: none;
	white-space: nowrap;
}

.dp-kontokopf__adresse {
	color: var(--text-secondary);
	overflow-wrap: anywhere;
}

.dp-kontokopf__abmelden {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 6. Dashboard
 * ------------------------------------------------------------------------ */

.dp-konto__dashboard {
	max-width: 920px;
	margin: 0 auto;
	padding: clamp(28px, 4vw, 48px) clamp(20px, 4.5vw, 64px) 64px;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.dp-konto__begruessung {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.dp-konto__rundenzeile {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
	color: var(--text-secondary);
}

.dp-konto__leer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: clamp(24px, 4vw, 40px);
}

.dp-konto__liste {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.dp-konto__listenkopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	flex-wrap: wrap;
}

.dp-konto__listenkopf h2 {
	font-size: var(--text-h3-size);
}

.dp-konto__karten {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.dp-konto__neu {
	margin: 0;
}

.dp-karte {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: var(--space-6);
}

.dp-karte__kopf {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.dp-karte__titel {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

.dp-karte__nummer {
	color: var(--text-muted);
}

.dp-karte h3 {
	font-size: 21px;
	line-height: 1.25;
}

.dp-karte__fortschritt {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dp-karte__balken {
	height: 8px;
	border-radius: var(--radius-pill);
	background: var(--omag-viola-12);
	overflow: hidden;
}

.dp-karte__balken-wert {
	display: block;
	height: 100%;
	border-radius: var(--radius-pill);
	background: var(--omag-deep-viola);
}

.dp-karte__hinweis,
.dp-karte .ds-small {
	color: var(--text-secondary);
}

.dp-karte__aktionen {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* Ruhende Zustände tragen keine Signalfarbe — sie sind kein Fehler. */
.dp-badge--ruhend {
	background: var(--surface-sunken);
	color: var(--text-secondary);
}

.dp-badge--archiv {
	background: var(--surface-sunken);
	color: var(--text-muted);
}

/* Eine offene Rückgabe ist kein Fehler, aber sie verlangt etwas — dieselbe
   Farbe, die der Hinweis in seiner Warnform trägt. */
.dp-badge--korrektur {
	background: var(--omag-corporate-light);
	color: var(--omag-corporate-ink);
}

/* ---------------------------------------------------------------------------
 * 7. Rückfrage vor einer zweiten Bewerbung
 * ------------------------------------------------------------------------ */

.dp-dialog {
	width: min(440px, calc(100vw - 40px));
	border: none;
	border-radius: var(--radius-card);
	padding: var(--space-6);
	background: var(--surface-card);
	color: var(--text-primary);
	box-shadow: var(--shadow-pop);
}

.dp-dialog::backdrop {
	background: rgba(0, 6, 25, 0.45);
}

.dp-dialog__titel {
	font-size: var(--text-h3-size);
	margin-bottom: var(--space-3);
}

.dp-dialog__aktionen {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: var(--space-5);
}

/* ---------------------------------------------------------------------------
 * 8. Schmale Viewports
 * ------------------------------------------------------------------------ */

@media (max-width: 600px) {
	.dp-konto__marke {
		padding: var(--space-6) var(--space-5);
	}

	.dp-konto__dashboard {
		padding-inline: var(--space-5);
	}
}

/* ---------------------------------------------------------------------------
 * 9. Contact form
 *
 * The markup of the form is rendered by the plugin, so its rules live here and
 * not in the theme block. That matters most for the honeypot: it has to stay
 * hidden wherever the form is printed, not only where a block happens to load
 * a stylesheet.
 * ------------------------------------------------------------------------ */

.dp-konto__textfeld {
	min-block-size: 8em;
	resize: vertical;
	font-family: inherit;
	line-height: 1.6;
}

/*
 * Honeypot. Deliberately NOT display:none - some bots skip hidden fields and
 * would sail past the trap. Moved out of the viewport instead; the markup
 * already takes it out of the accessibility tree and the tab order.
 */
.dp-kontakt__falle,
.dp-konto__falle {
	position: absolute;
	left: -9999px;
	top: auto;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

.dp-kontakt__formular {
	scroll-margin-block-start: var(--space-10);
}

.dp-kontakt__datenschutz {
	color: var(--text-secondary);
	margin-block: var(--space-5) 0;
}

.dp-kontakt__senden {
	margin-block-start: var(--space-5);
}