/**
 * DocJob24 – Designsystem: zentrale Design-Tokens und globale Regeln für alle öffentlichen Seiten und den
 * Kontobereich.
 *
 * Eingebunden über inc/ui-global.php (nur Frontend, nach den Styles von Theme und Plugins eingereiht).
 * Rückbau: Block „Designsystem (global)“ in functions.php entfernen – diese Datei und inc/ui-global.php löschen.
 * UX/UI-Audit vom 19.10.2026, Design-Tokens und lokale Schrift seit 20.10.2026.
 *
 * Inhalt
 * 0. Schrift Inter (lokal, assets/fonts)
 * 1. Design-Tokens – die zentrale Quelle für Farben, Schrift, Schaltflächen und Formularfelder
 * 2. Kopfzeile: Benachrichtigungen nur für angemeldete Konten
 * 3. Mobilmenü: Primäraktion frei von der Datenschutz-Schaltfläche
 * 4. Kontobereich: Hinweiszustände mit zwei Aktionen
 * 5. Stellenliste: Kennzeichen „Hervorgehoben“
 * 6. Startseite: Deutschlandkarte auf Smartphones
 * 7. Fließtext im Blocksatz (Rechtstexte, Impressum, FAQ-Antworten, Stellenbeschreibungen, Arbeitgeberprofile)
 */

/* =========================================================================
 * 0. Schrift Inter (lokal)
 *
 * Inter 4.1 (The Inter Project Authors, SIL Open Font License 1.1, Lizenz: assets/fonts/OFL.txt), variable
 * Schriftstärke 100–900, optische Größe auf die Textvariante festgelegt, aufgeteilt in Latein und Latein-Erweitert.
 * Der Browser lädt die Datei „latin-ext“ nur für Zeichen außerhalb des westeuropäischen Zeichensatzes (z. B. ł, ş).
 * Bisher kam Inter aus dem Plugin WooCommerce (wp-content/plugins/woocommerce/assets/fonts, 327 KB) und hing damit
 * am Plugin. Diese Einbindung schaltet inc/performance.php (Abschnitt 6) ab; dort wird auch inter-latin.woff2 vorab
 * geladen. Elementor lädt für seine globalen Schriftarten keine eigene Kopie (inc/performance.php, Abschnitt 5).
 * ========================================================================= */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-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+2190-2193, U+2212, U+2215, U+2713, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-italic-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+2190-2193, U+2212, U+2215, U+2713, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
 * 1. Design-Tokens
 *
 * Eine Quelle für alle wiederkehrenden Gestaltungsentscheidungen. Die Schaltflächen der Komponenten verwenden diese
 * Variablen direkt, jeweils mit demselben Wert als Rückfall – z. B. var(--dj24-cta, #1F4B3F): Kopfzeile und Menü
 * (assets/css/kopfzeile.css), Startseite (4035), Stellenansicht (job-detail-2.css), Jobübersicht mit Berufsgruppen- und
 * Bundesland-Seiten (Vorlage 1500), Arbeitgeberprofil und -verzeichnis (employer-profile.css, employers.css),
 * Bewerberprofile (kandidatensuche.css), die Seiten Bewerberprofil, Für Arbeitgeber, FAQ, Kontakt, Gender-Hinweis und
 * DSA-Meldeportal, Anmeldung und Registrierung, Passwort ändern, Mein Konto, 404-Seite und der Kontobereich
 * (dashboard.css und die übrigen Konto-CSS). Werte hier ändern, nicht in den Komponenten.
 *
 * Abgleich mit den übrigen zentralen Einstellungen (Stand 20.10.2026):
 * - Elterntheme (Design > Anpassen > Theme-Optionen): Hauptfarbe #1F4B3F, Hover #183B32, Text #1B2537,
 *   Überschriften und Links #162136, Link-Hover #0E7355, Schrift Inter.
 * - Elementor (Website-Einstellungen > Globale Farben/Schriftarten): Primär #162136, Sekundär #14A077,
 *   Text #1B2537, Akzent #1F4B3F und die übrigen CI-Farben; alle globalen Schriftarten Inter. Die Elementor-
 *   Schaltflächen (Widgets „Schaltfläche“ sowie „Stelle kostenlos schalten“ und „Anmelden“ in der Kopfzeile) sind
 *   an diese globalen Farben gebunden (Akzent, Dunkelgrün Hover, Weiß, Primär, Textakzent Grün, Mint).
 *
 * Rollen der CI-Farben
 * - Dunkelgrün #1F4B3F: alle Primäraktionen (Stelle schalten, Suchen, Bewerben, Absenden, Speichern).
 * - Weiß mit Navy-Schrift: Primäraktionen auf Navy-Flächen.
 * - Navy #162136: Überschriften, Navigation, Rahmen sekundärer Schaltflächen – keine Schaltflächenfläche.
 * - Grün #14A077: Akzente (Linien, Symbole, Markierungen) – nicht als Fläche hinter weißer Schrift,
 *   weil der Kontrast dort nur 3,3 : 1 beträgt (WCAG AA verlangt 4,5 : 1).
 * - Textgrün #0E7355: Links und grüne Schrift auf hellen Flächen.
 * - Mint #8FE0C6: Akzente auf Navy-Flächen.
 *
 * Schaltflächen
 * - Geometrie wie in den Referenzen (Kopfzeile, Startseite, Bewerberprofil, Login, Passwort ändern) und wie die
 *   Theme-Grundform .btn: Eckenradius 4 px, Schrift 16 px / 700, Standardhöhe 52 px.
 * - Größen: lg 56 px (Suche im Hero, Bewerbung), md 52 px (Standard), sm 44 px (kompakte Leisten, Karten).
 * - Varianten: primär (Dunkelgrün, Hover #183B32), sekundär (Weiß, Rahmen #D5DDE5, Schrift Navy; Hover: Rahmen
 *   Navy), invers (Weiß mit Navy-Schrift auf Navy-Flächen; Hover Mint), Text (ohne Fläche), destruktiv (#9B3440,
 *   Hover #7A2530, nur im Kontobereich).
 * - Eigene Formen bleiben: runde Symbol-Schaltflächen (Merken, Folgen), schwebende Filter-Schaltfläche mobil
 *   (Pillenform), kompakte Zeilenaktionen in Tabellen des Kontobereichs (36 px), verkleinerte Nachbildungen in
 *   Schaubildern; auch dort Eckenradius und Farben aus den Tokens.
 * Formularfelder: Eckenradius 8 px, Rahmen #D5DDE5 (wie „Passwort ändern“ und die Filter der Jobübersicht).
 * ========================================================================= */

:root {
	/* CI-Farben */
	--dj24-navy: #162136;
	--dj24-green: #14A077;
	--dj24-green-dark: #1F4B3F;
	--dj24-sand: #F7F4EE;
	--dj24-green-light: #EEF4F1;
	--dj24-green-text: #0E7355;
	--dj24-mint: #8FE0C6;

	/* Text, Flächen, Linien */
	--dj24-text: #1B2537;
	--dj24-text-muted: #5A6478;
	--dj24-heading: var(--dj24-navy);
	--dj24-link: var(--dj24-green-text);
	--dj24-surface: #FFFFFF;
	--dj24-surface-soft: #F7F9F8;
	--dj24-line: #D5DDE5;
	--dj24-line-strong: #A9B4C5;
	--dj24-hair: #E3E8EC;
	--dj24-danger: #9B3440;
	--dj24-danger-hover: #7A2530;

	/* Aktionen */
	--dj24-cta: var(--dj24-green-dark);
	--dj24-cta-hover: #183B32;
	--dj24-cta-active: #12302A;
	--dj24-on-cta: #FFFFFF;
	--dj24-focus-ring: 0 0 0 3px rgba(20, 160, 119, .35);

	/* Schrift */
	--dj24-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--dj24-font-accent: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

	/* Schaltflächen */
	--dj24-btn-radius: 4px;
	--dj24-btn-height: 52px;
	--dj24-btn-height-sm: 44px;
	--dj24-btn-height-lg: 56px;
	--dj24-btn-padding-x: 28px;
	--dj24-btn-padding-x-sm: 18px;
	--dj24-btn-font-size: 16px;
	--dj24-btn-font-size-sm: 15px;
	--dj24-btn-font-weight: 700;
	--dj24-btn-transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;

	/* Formularfelder */
	--dj24-field-radius: 8px;
	--dj24-field-border: var(--dj24-line);
}

/* =========================================================================
 * 2. Kopfzeile: Benachrichtigungen
 *
 * Ohne Anmeldung gibt es keine Benachrichtigungen; die Glocke öffnete dort nichts. Sie erscheint nur
 * für angemeldete Konten (Desktop-Kopfzeile und mobile Kopfzeile). „Anmelden“ bleibt sichtbar.
 * ========================================================================= */

body:not(.logged-in) .elementor-widget-apus_element_user_notification,
body:not(.logged-in) .message-top {
	display: none !important;
}

/* =========================================================================
 * 3. (Entfernt am 21.10.2026: Abstand im Mobilmenü der früheren Kopfzeile. Kopfzeile: assets/css/kopfzeile.css.)
 * ========================================================================= */

/* =========================================================================
 * 4. Kontobereich: Hinweiszustände
 *
 * Zustände wie „Anmeldung erforderlich“ können zwei Aktionen haben (z. B. „Zur Anmeldung“ und
 * „Arbeitgeberkonto anlegen“ auf /stelle-veroeffentlichen/).
 * ========================================================================= */

body.djd .djd-state__a {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* =========================================================================
 * 5. Stellenliste: Kennzeichen „Hervorgehoben“
 *
 * Hervorgehobene Stellen zeigten nur ein Blitz-Symbol mit Tooltip, das auf Touch-Geräten nicht lesbar ist. Jetzt Blitz
 * und Text in derselben Gestaltung wie auf den Arbeitgeberkarten im Verzeichnis (dje-card__flag).
 * Markup: template-jobs/jobs-styles/inner-list-v1.php (Jobübersicht, Berufsgruppen-, Bundesland- und
 * Beschäftigungsart-Seiten).
 * ========================================================================= */

.job-list .dj-flag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 24px;
	margin: 0 0 0 10px;
	padding: 0 10px 0 8px;
	border-radius: 999px;
	background: #E6F5EF;
	color: var(--dj24-green-text);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.job-list .dj-flag::before {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 2.5L4.8 13.3h6l-1 8.2 8.4-10.8h-6z'/%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'%3E%3Cpath d='M13.2 2.5L4.8 13.3h6l-1 8.2 8.4-10.8h-6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 767.98px) {
	.job-list .dj-flag {
		margin: 6px 0 0;
	}
}

/* =========================================================================
 * 6. Startseite: Deutschlandkarte auf Smartphones
 *
 * Die interaktive Karte („Regional suchen“) war unter 768 px ausgeblendet. Sie steht jetzt unter der Bundesland-Liste;
 * Antippen eines Bundeslands öffnet dessen Stellenangebote, die Liste bleibt als Alternative. Im gestapelten Layout hat
 * die Karte keine Höhe aus der Nachbarspalte (die Grafik ist absolut positioniert) – deshalb ein festes Seitenverhältnis
 * nach dem viewBox der Grafik (444 × 600).
 * ========================================================================= */

@media (max-width: 767.98px) {
	.djh-region-map .djh-map__fig {
		flex: none;
		width: 100%;
		max-width: 300px;
		aspect-ratio: 444 / 600;
	}
}

/* =========================================================================
 * 7. Fließtext im Blocksatz
 *
 * Längere Fließtexte stehen auf Smartphone, Tablet und Desktop im Blocksatz – mit zurückhaltender automatischer
 * Silbentrennung (Sprache aus dem html-Element, de-DE): getrennt werden nur Wörter ab 8 Zeichen, mit mindestens 4 Zeichen
 * vor und nach der Trennstelle, in Safari höchstens zwei Trennungen nacheinander. Die letzte Zeile bleibt linksbündig.
 *
 * Erfasst sind nur diese Textbausteine (keine globale Regel):
 * - Rechtstexte: Datenschutzerklärung, AGB, Nutzungsbedingungen (.dj-article; ohne Hinweiskasten .dj-note und
 *   Prüfvermerk .seal; Tabellen bleiben linksbündig)
 * - Impressum und Kontaktangaben (/kontakt-impressum/, .djk-row-body)
 * - Antworten auf der FAQ-Seite (.dfq-a-in, ohne Hinweise .dfq-note), im DSA-Meldeportal (.dmp-a-in) und auf der Seite
 *   „Für Arbeitgeber“ (.dpt-qa)
 * - Stellenbeschreibungen (.dj-prose, .dj3-sec__body) und Texte der Arbeitgeberprofile (.djep-prose)
 * - Erläuterungen auf der Seite „Gender-Hinweis“ (.djv-point .djv-text)
 * Listenpunkte nur in den Rechtstexten (dort meist ganze Sätze, Spalte ab 23,25rem wegen des Einzugs); kurze Aufzählungen
 * und Schrittfolgen in FAQ-Antworten und Stellenanzeigen bleiben linksbündig.
 * Linksbündig bleiben außerdem: Überschriften, Einleitungen unter Überschriften (größere Schrift, Teil des
 * Überschriftenblocks), Schaltflächen, Navigation, Beschriftungen, Formulare, Karten und Kacheln, Tabellen,
 * Definitionslisten, kurze Hinweise und der Kontobereich.
 *
 * Lesbarkeit: Ist die Spalte schmaler als das 21,5-Fache der Schriftgröße (bei 16 px Schrift 344 px, rund 42 Zeichen je
 * Zeile), bleibt der Text linksbündig – dort entstehen im Blocksatz trotz Silbentrennung sichtbare Wortlücken (geprüft am
 * 20.10.2026). Das betrifft Smartphones mit 360 und 375 px Breite, Antworten in Akkordeons bis 412 px und
 * Stellenbeschreibungen (17,5 px Schrift) bis 390 px. Eigene HTML-Blöcke messen dafür ihre tatsächliche Spaltenbreite
 * (Container-Abfrage; ohne Änderung des Layouts geprüft). Für Texte in Elementor-Widgets und in den Stellenansichten gilt
 * die Bildschirmbreite, ab der ihre Spalte diese Breite erreicht – dort würde container-type das Layout verändern.
 *
 * Die Seiten selbst legen für diese Texte keine Ausrichtung mehr fest (bis 20.10.2026: Datenschutzerklärung, AGB und
 * Nutzungsbedingungen unter 768 px linksbündig im Elementor-HTML-Widget der Seite; Impressum mobil linksbündig in den
 * Elementor-Textwidgets). Ausrichtung dieser Texte deshalb nur hier ändern.
 * ========================================================================= */

.dj-article,
.dfq-a-in,
.dmp-a-in,
.dpt-qa {
	container-type: inline-size;
}

@container (min-width: 21.5rem) {
	.dj-article p:not(.seal, .dj-note *),
	.dfq-a-in p:not(.dfq-note),
	.dmp-a-in p,
	.dpt-qa p {
		text-align: justify;
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 8 4 4;
		-webkit-hyphenate-limit-before: 4;
		-webkit-hyphenate-limit-after: 4;
		-webkit-hyphenate-limit-lines: 2;
	}
}

/* Listenpunkte der Rechtstexte (meist ganze Sätze; Einzug 26 px): ab 23,25rem Spaltenbreite */
@container (min-width: 23.25rem) {
	.dj-article li:not(.dj-note *) {
		text-align: justify;
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 8 4 4;
		-webkit-hyphenate-limit-before: 4;
		-webkit-hyphenate-limit-after: 4;
		-webkit-hyphenate-limit-lines: 2;
	}
}

/* Stellenbeschreibungen und Arbeitgeberprofile (Schrift 17,5 px): Spalte ab 406 px Bildschirmbreite mindestens 21,5em (376 px) */
@media (min-width: 406px) {
	.dj-prose p,
	.dj3-sec__body p,
	.djep-prose p {
		text-align: justify;
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 8 4 4;
		-webkit-hyphenate-limit-before: 4;
		-webkit-hyphenate-limit-after: 4;
		-webkit-hyphenate-limit-lines: 2;
	}
}

/* Impressum (Elementor-Textwidgets): Spalte ab 384 px Bildschirmbreite mindestens 21,5rem breit */
@media (min-width: 384px) {
	.djk-sec .djk-row-body p {
		text-align: justify;
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 8 4 4;
		-webkit-hyphenate-limit-before: 4;
		-webkit-hyphenate-limit-after: 4;
		-webkit-hyphenate-limit-lines: 2;
	}
}

/* Gender-Hinweis (Elementor-Textwidgets): Spalte ab 416 px Bildschirmbreite mindestens 21,5rem breit */
@media (min-width: 416px) {
	.djv-point .djv-text p {
		text-align: justify;
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 8 4 4;
		-webkit-hyphenate-limit-before: 4;
		-webkit-hyphenate-limit-after: 4;
		-webkit-hyphenate-limit-lines: 2;
	}
}