/*
 * DocJob24 Gehaltsrechner
 *
 * Wird nur auf der Rechnerseite geladen (inc/gehaltsrechner/integration.php).
 * Alle Regeln sind auf .djgr begrenzt; es gibt keine globalen Selektoren.
 * Farben: DocJob24-CI (Navy #162136, Grün #14A077, Dunkelgrün #1F4B3F, Textgrün #0E7355,
 * Mint #8FE0C6, Sand #F7F4EE, Hellgrün #EEF4F1). Schrift: Inter (lokal vom Theme geladen).
 * Größen in px, damit ein abweichender Root-Schriftgrad des Themes nichts verschiebt.
 */

.djgr {
	/* Werte aus dem globalen Designsystem (assets/css/ui-global.css), mit identischen Ersatzwerten. */
	--djgr-navy: var(--dj24-navy, #162136);
	--djgr-text: var(--dj24-text, #1b2537);
	--djgr-grau: var(--dj24-text-muted, #5a6478);
	--djgr-linie: var(--dj24-line, #d5dde5);
	--djgr-haar: var(--dj24-hair, #e3e8ec);
	--djgr-gruen: var(--dj24-green, #14a077);
	--djgr-dunkelgruen: var(--dj24-cta, #1f4b3f);
	--djgr-dunkelgruen-tief: var(--dj24-cta-hover, #183b32);
	--djgr-textgruen: var(--dj24-green-text, #0e7355);
	--djgr-mint: var(--dj24-mint, #8fe0c6);
	--djgr-sand: var(--dj24-sand, #f7f4ee);
	--djgr-hellgruen: var(--dj24-green-light, #eef4f1);
	--djgr-fehler: var(--dj24-danger, #9b3440);
	--djgr-weiss: var(--dj24-surface, #fff);
	--djgr-r-knopf: var(--dj24-btn-radius, 4px);
	--djgr-fokus: var(--dj24-focus-ring, 0 0 0 3px rgba(20, 160, 119, 0.35));
	--djgr-schrift: var(--dj24-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	--djgr-akzent: var(--dj24-font-accent, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif);
	/* Nur im Rechner: Feldrahmen mit mindestens 3 : 1 Kontrast (WCAG 1.4.11), helle Fläche für Statistik-Kennzeichen. */
	--djgr-feldrand: #7d8a9e;
	--djgr-navy-hell: #e8edf4;
	--djgr-r-feld: 8px;
	--djgr-r-karte: 10px;
	--djgr-rand: clamp(16px, 4vw, 32px);

	font-family: var(--djgr-schrift);
	font-size: 16px;
	line-height: 1.6;
	color: var(--djgr-text);
	background: var(--djgr-weiss);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

.djgr *,
.djgr *::before,
.djgr *::after {
	box-sizing: border-box;
}

/* ---------- Grundelemente ---------- */

.djgr p,
.djgr ul,
.djgr ol,
.djgr dl,
.djgr dd,
.djgr figure,
.djgr table {
	margin: 0;
}

.djgr ul,
.djgr ol {
	padding: 0;
	list-style: none;
}

.djgr a {
	color: var(--djgr-textgruen);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.djgr a:hover {
	color: var(--djgr-dunkelgruen);
	text-decoration-thickness: 2px;
}

.djgr a:focus-visible,
.djgr summary:focus-visible,
.djgr .djgr-button:focus-visible {
	outline: 3px solid var(--djgr-textgruen);
	outline-offset: 2px;
	border-radius: 2px;
}

.djgr strong {
	font-weight: 700;
}

.djgr table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	background: none;
}

.djgr th,
.djgr td {
	border: 0;
	background: none;
	text-align: left;
	vertical-align: top;
}

.djgr .djgr-visuell-versteckt {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.djgr--js .djgr-nur-ohne-js {
	display: none !important;
}

.djgr [hidden] {
	display: none !important;
}

/* ---------- Layout ---------- */

.djgr .djgr-abschnitt {
	padding: clamp(40px, 6vw, 72px) 0;
}

.djgr .djgr-abschnitt--sand {
	background: var(--djgr-sand);
}

.djgr .djgr-abschnitt--hell {
	background: var(--djgr-hellgruen);
}

.djgr .djgr-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--djgr-rand);
}

.djgr .djgr-inner--schmal {
	max-width: 880px;
}

/* ---------- Typografie ---------- */

.djgr .djgr-h1,
.djgr .djgr-h2,
.djgr .djgr-h3,
.djgr .djgr-h4 {
	margin: 0;
	padding: 0;
	font-family: var(--djgr-schrift);
	color: var(--djgr-navy);
	text-transform: none;
	letter-spacing: -0.01em;
}

.djgr .djgr-h1 {
	font-size: clamp(30px, 21px + 2.4vw, 48px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.025em;
}

.djgr .djgr-h1 em {
	font-family: var(--djgr-akzent);
	font-style: italic;
	font-weight: 500;
	color: var(--djgr-textgruen);
	letter-spacing: -0.01em;
}

.djgr .djgr-h2 {
	font-size: clamp(24px, 19px + 1.3vw, 32px);
	font-weight: 750;
	line-height: 1.2;
}

.djgr .djgr-h3 {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.djgr .djgr-h4 {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.djgr .djgr-lead {
	margin-top: 12px;
	max-width: 68ch;
	font-size: clamp(17px, 15.5px + 0.4vw, 19px);
	line-height: 1.6;
	color: var(--djgr-text);
}

.djgr .djgr-text {
	margin-top: 10px;
	font-size: 16px;
}

.djgr .djgr-text-klein {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--djgr-grau);
}

.djgr .djgr-kicker {
	margin: 0 0 12px;
	line-height: 1;
}

.djgr .djgr-kicker span {
	display: inline-block;
	padding: 7px 14px 7px 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--djgr-dunkelgruen);
	background: var(--djgr-mint);
	clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

.djgr .djgr-liste {
	margin-top: 8px;
}

.djgr .djgr-liste li {
	position: relative;
	padding-left: 16px;
}

.djgr .djgr-liste li + li {
	margin-top: 6px;
}

.djgr .djgr-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 6px;
	height: 6px;
	background: var(--djgr-gruen);
	transform: skewX(-9.23deg);
}

/* ---------- Einstieg ---------- */

.djgr .djgr-start {
	padding-top: clamp(16px, 2.5vw, 28px);
}

.djgr .djgr-einstieg {
	margin-bottom: clamp(20px, 3vw, 32px);
}

.djgr .djgr-crumbs {
	margin-bottom: clamp(16px, 2.5vw, 28px);
	font-size: 14px;
	color: var(--djgr-grau);
}

.djgr .djgr-crumbs__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
}

.djgr .djgr-crumbs__liste li + li::before {
	content: "›";
	margin: 0 8px;
	color: var(--djgr-feldrand);
}

.djgr .djgr-crumbs a {
	color: var(--djgr-grau);
}

.djgr .djgr-crumbs [aria-current] {
	color: var(--djgr-navy);
	font-weight: 600;
}

.djgr .djgr-fakten {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin-top: 14px;
}

.djgr .djgr-fakten li {
	position: relative;
	padding-left: 14px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--djgr-grau);
}

.djgr .djgr-fakten li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	background: var(--djgr-gruen);
	transform: skewX(-9.23deg);
}

.djgr .djgr-fakten strong {
	font-weight: 650;
	color: var(--djgr-navy);
}

/* ---------- Formular ---------- */

.djgr .djgr-rechner {
	padding: clamp(20px, 3vw, 32px);
	background: var(--djgr-weiss);
	border: 1px solid var(--djgr-linie);
	border-radius: var(--djgr-r-karte);
	box-shadow: 0 1px 2px rgba(22, 33, 54, 0.04);
}

.djgr .djgr-rechner__intro {
	margin-top: 6px;
	font-size: 15px;
	color: var(--djgr-grau);
}

.djgr .djgr-felder {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 24px;
	margin-top: 22px;
}

.djgr .djgr-feld {
	flex: 1 1 220px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.djgr .djgr-feld--beruf {
	flex: 2 1 300px;
}

.djgr .djgr-feld--zeit {
	flex: 1.4 1 260px;
}

.djgr .djgr-feld--bereich {
	flex: 1.5 1 260px;
}

.djgr .djgr-label {
	display: block;
	float: none;
	width: auto;
	margin: 0 0 7px;
	padding: 0;
	text-transform: none;
	letter-spacing: normal;
	font-size: 15px;
	font-weight: 650;
	line-height: 1.35;
	color: var(--djgr-navy);
}

.djgr .djgr-label--klein {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 600;
}

.djgr .djgr-eingabe,
.djgr .djgr-auswahl {
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 14px;
	font-family: var(--djgr-schrift);
	font-size: 16px;
	font-weight: 500;
	line-height: 46px;
	color: var(--djgr-navy);
	text-transform: none;
	letter-spacing: normal;
	background-color: var(--djgr-weiss);
	border: 1px solid var(--djgr-feldrand);
	border-radius: var(--djgr-r-feld);
	box-shadow: none;
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.djgr .djgr-eingabe--kurz {
	max-width: 160px;
}

.djgr .djgr-auswahl {
	padding-right: 42px;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23162136' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
}

.djgr .djgr-eingabe:hover,
.djgr .djgr-auswahl:hover {
	border-color: var(--djgr-navy);
}

.djgr .djgr-eingabe:focus,
.djgr .djgr-auswahl:focus {
	border-color: var(--djgr-textgruen);
	box-shadow: var(--djgr-fokus);
}

.djgr .djgr-eingabe[aria-invalid="true"] {
	border-color: var(--djgr-fehler);
}

.djgr .djgr-eingabe::placeholder {
	color: var(--djgr-grau);
	opacity: 1;
}

.djgr .djgr-feldhilfe {
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--djgr-grau);
}

.djgr .djgr-fehler {
	margin-top: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--djgr-fehler);
}

/* Vollzeit/Teilzeit als Umschalter; Wochenstunden nur bei Teilzeit (reines CSS, auch ohne JavaScript) */
.djgr .djgr-zeitwahl {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.djgr .djgr-segment__eingabe {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.djgr .djgr-segment__label {
	position: relative;
	display: inline-flex;
	text-transform: none;
	letter-spacing: normal;
	align-items: center;
	justify-content: center;
	min-width: 112px;
	min-height: 48px;
	margin: 0;
	padding: 0 18px;
	font-size: 15px;
	font-weight: 650;
	color: var(--djgr-navy);
	background: var(--djgr-weiss);
	border: 1px solid var(--djgr-feldrand);
	border-radius: var(--djgr-r-feld) 0 0 var(--djgr-r-feld);
	cursor: pointer;
	user-select: none;
}

.djgr .djgr-segment__label + .djgr-segment__eingabe + .djgr-segment__label {
	margin-left: -1px;
	border-radius: 0 var(--djgr-r-feld) var(--djgr-r-feld) 0;
}

.djgr .djgr-segment__label:hover {
	background: var(--djgr-hellgruen);
}

.djgr .djgr-segment__eingabe:checked + .djgr-segment__label {
	z-index: 1;
	color: var(--djgr-weiss);
	background: var(--djgr-navy);
	border-color: var(--djgr-navy);
}

.djgr .djgr-segment__eingabe:focus-visible + .djgr-segment__label {
	z-index: 2;
	outline: 3px solid var(--djgr-textgruen);
	outline-offset: 2px;
}

.djgr .djgr-stunden {
	flex: 1 1 100%;
}

.djgr .djgr-segment__eingabe--vz:checked ~ .djgr-stunden {
	display: none;
}

.djgr .djgr-aktionen {
	margin-top: 24px;
}

/* ---------- Schaltflächen ---------- */

.djgr .djgr-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	margin: 0;
	padding: 0 28px;
	font-family: var(--djgr-schrift);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	width: auto;
	color: var(--djgr-weiss);
	background: var(--djgr-dunkelgruen);
	border: 2px solid var(--djgr-dunkelgruen);
	border-radius: var(--djgr-r-knopf);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.djgr .djgr-button:hover {
	color: var(--djgr-weiss);
	background: var(--djgr-dunkelgruen-tief);
	border-color: var(--djgr-dunkelgruen-tief);
	text-decoration: none;
}

.djgr .djgr-button--sekundaer {
	color: var(--djgr-dunkelgruen);
	background: transparent;
}

.djgr .djgr-button--sekundaer:hover {
	color: var(--djgr-dunkelgruen-tief);
	background: var(--djgr-hellgruen);
}

/* ---------- Kombinationsfeld Beruf (JavaScript) ---------- */

.djgr .djgr-combo {
	position: relative;
}

.djgr .djgr-combo .djgr-eingabe {
	padding-right: 48px;
}

.djgr .djgr-combo__knopf {
	position: absolute;
	min-width: 0;
	min-height: 0;
	box-shadow: none;
	text-transform: none;
	top: 4px;
	right: 4px;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23162136' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px 8px;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}

.djgr .djgr-combo__knopf:hover {
	background-color: var(--djgr-hellgruen);
}

.djgr .djgr-combo__liste {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: min(360px, 60vh);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px 0;
	background: var(--djgr-weiss);
	border: 1px solid var(--djgr-feldrand);
	border-radius: var(--djgr-r-feld);
	box-shadow: 0 12px 32px rgba(22, 33, 54, 0.14);
}

.djgr .djgr-combo__gruppe {
	padding: 10px 16px 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--djgr-grau);
}

.djgr .djgr-combo__option {
	padding: 10px 16px;
	font-size: 16px;
	line-height: 1.35;
	color: var(--djgr-navy);
	cursor: pointer;
}

.djgr .djgr-combo__option[aria-selected="true"] {
	font-weight: 700;
}

.djgr .djgr-combo__option.ist-aktiv,
.djgr .djgr-combo__option:hover {
	background: var(--djgr-hellgruen);
}

.djgr .djgr-combo__option.ist-aktiv {
	box-shadow: inset 3px 0 0 var(--djgr-gruen);
}

.djgr .djgr-combo__zusatz {
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: var(--djgr-grau);
}

.djgr .djgr-combo__leer {
	padding: 12px 16px;
	font-size: 15px;
	color: var(--djgr-grau);
}

/* ---------- Ergebnis ---------- */

.djgr .djgr-ergebnis {
	margin-top: clamp(28px, 4vw, 40px);
	scroll-margin-top: 96px;
}

.djgr .djgr-ergebnis__kopf {
	margin-bottom: 20px;
}

.djgr .djgr-ergebnis__kontext {
	margin-top: 6px;
	font-size: 16px;
	color: var(--djgr-grau);
}

.djgr .djgr-leer {
	padding: clamp(20px, 3vw, 28px);
	background: var(--djgr-weiss);
	border: 1px dashed var(--djgr-feldrand);
	border-radius: var(--djgr-r-karte);
}

.djgr .djgr-leer__titel {
	font-size: 18px;
	font-weight: 700;
	color: var(--djgr-navy);
}

.djgr .djgr-leer__text {
	margin-top: 12px;
	font-size: 15px;
	color: var(--djgr-grau);
}

.djgr .djgr-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.djgr .djgr-chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--djgr-navy);
	text-decoration: none;
	background: var(--djgr-weiss);
	border: 1px solid var(--djgr-linie);
	border-radius: var(--djgr-r-feld);
}

.djgr .djgr-chip:hover {
	color: var(--djgr-navy);
	border-color: var(--djgr-gruen);
	background: var(--djgr-hellgruen);
	text-decoration: none;
}

.djgr .djgr-karten {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.djgr .djgr-karte {
	min-width: 0;
	padding: clamp(20px, 2.6vw, 28px);
	background: var(--djgr-weiss);
	border: 1px solid var(--djgr-haar);
	border-top: 3px solid var(--djgr-navy);
	border-radius: var(--djgr-r-karte);
}

.djgr .djgr-karte--tarif {
	border-top-color: var(--djgr-gruen);
}

.djgr .djgr-karte--untergrenze {
	border-top-color: var(--djgr-dunkelgruen);
}

.djgr .djgr-karte__kopf {
	margin-bottom: 14px;
}

.djgr .djgr-karte__kopf .djgr-typ {
	margin-bottom: 8px;
}

.djgr .djgr-typ {
	display: inline-block;
	padding: 3px 8px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: var(--djgr-r-knopf);
}

.djgr .djgr-typ--statistik {
	color: var(--djgr-navy);
	background: var(--djgr-navy-hell);
}

.djgr .djgr-typ--tarif {
	color: var(--djgr-textgruen);
	background: var(--djgr-hellgruen);
}

.djgr .djgr-typ--abgeleitet {
	color: var(--djgr-dunkelgruen);
	background: var(--djgr-weiss);
	box-shadow: inset 0 0 0 1px var(--djgr-dunkelgruen);
}

.djgr .djgr-typ--untergrenze {
	color: var(--djgr-weiss);
	background: var(--djgr-dunkelgruen);
}

.djgr .djgr-wert {
	margin-top: 4px;
}

.djgr .djgr-wert__zahl {
	display: block;
	font-size: clamp(32px, 26px + 1.6vw, 42px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--djgr-navy);
	font-variant-numeric: tabular-nums;
}

.djgr .djgr-wert__einheit {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	color: var(--djgr-grau);
}

.djgr .djgr-wert__detail {
	margin-top: 8px;
	font-size: 16px;
	font-weight: 600;
	color: var(--djgr-navy);
}

/* Spanne mittlere 50 % */
.djgr .djgr-spanne {
	position: relative;
	height: 10px;
	margin: 22px 0 12px;
	background: var(--djgr-haar);
	border-radius: 5px;
}

.djgr .djgr-spanne__band {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 25%;
	width: 50%;
	background: var(--djgr-mint);
}

.djgr .djgr-spanne__median {
	position: absolute;
	top: -5px;
	width: 4px;
	height: 20px;
	margin-left: -2px;
	background: var(--djgr-navy);
	border-radius: 2px;
}

.djgr .djgr-spanne__werte {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: 10px;
}

.djgr .djgr-spanne__werte dt {
	font-size: 13px;
	line-height: 1.35;
	color: var(--djgr-grau);
}

.djgr .djgr-spanne__werte dd {
	margin: 2px 0 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--djgr-navy);
	font-variant-numeric: tabular-nums;
}

.djgr .djgr-spanne__mitte {
	text-align: center;
}

.djgr .djgr-spanne__werte > div:last-child {
	text-align: right;
}

.djgr .djgr-umrechnung {
	margin-top: 18px;
	padding: 14px 16px;
	background: var(--djgr-sand);
	border-radius: var(--djgr-r-feld);
}

.djgr .djgr-umrechnung__wert {
	margin-top: 8px;
	font-size: 17px;
	color: var(--djgr-navy);
}

.djgr .djgr-umrechnung__wert strong {
	font-size: 20px;
	font-variant-numeric: tabular-nums;
}

.djgr .djgr-umrechnung__text {
	margin-top: 4px;
	font-size: 14px;
	color: var(--djgr-grau);
}

.djgr .djgr-hinweis {
	margin-top: 14px;
	padding: 2px 0 2px 12px;
	font-size: 15px;
	line-height: 1.5;
	border-left: 3px solid var(--djgr-linie);
}

.djgr .djgr-hinweis--wichtig {
	padding: 10px 12px;
	background: var(--djgr-sand);
	border-left-color: var(--djgr-navy);
	border-radius: 0 var(--djgr-r-feld) var(--djgr-r-feld) 0;
}

.djgr .djgr-quelle {
	margin-top: 14px;
	font-size: 14px;
	color: var(--djgr-grau);
}

.djgr .djgr-meta {
	display: grid;
	gap: 8px;
	margin-top: 20px;
	padding-top: 14px;
	font-size: 14px;
	line-height: 1.5;
	border-top: 1px solid var(--djgr-haar);
}

.djgr .djgr-meta > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px 16px;
}

.djgr .djgr-meta dt {
	font-weight: 650;
	color: var(--djgr-navy);
}

.djgr .djgr-meta dd {
	margin: 0;
	color: var(--djgr-text);
}

.djgr .djgr-meta .djgr-liste {
	margin-top: 0;
}

/* Tarifauswahl in der Karte */
.djgr .djgr-tarifwahl {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 14px 16px;
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--djgr-haar);
}

.djgr .djgr-tarifwahl .djgr-feld {
	flex: 1 1 200px;
}

.djgr .djgr-tarifwahl .djgr-feld--erfahrung {
	flex: 1 1 100%;
}

.djgr .djgr-tarifwahl .djgr-button {
	min-height: 48px;
}

/* Aufklappbare Bereiche */
.djgr .djgr-stufen,
.djgr .djgr-details {
	margin-top: 16px;
	border-top: 1px solid var(--djgr-haar);
}

.djgr .djgr-stufen__titel,
.djgr .djgr-details__titel {
	position: relative;
	display: block;
	padding: 12px 28px 12px 0;
	font-size: 15px;
	font-weight: 650;
	color: var(--djgr-textgruen);
	list-style: none;
	cursor: pointer;
}

.djgr .djgr-stufen__titel::-webkit-details-marker,
.djgr .djgr-details__titel::-webkit-details-marker,
.djgr .djgr-faq__frage::-webkit-details-marker {
	display: none;
}

.djgr .djgr-stufen__titel::after,
.djgr .djgr-details__titel::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.djgr details[open] > .djgr-stufen__titel::after,
.djgr details[open] > .djgr-details__titel::after {
	margin-top: -2px;
	transform: rotate(-135deg);
}

.djgr .djgr-details .djgr-liste {
	margin: 0 0 8px;
	font-size: 14px;
}

/* Tabellen */
.djgr .djgr-tabelle-rahmen {
	width: 100%;
	overflow-x: auto;
}

.djgr .djgr-tabelle {
	font-size: 15px;
	line-height: 1.45;
	font-variant-numeric: tabular-nums;
}

.djgr .djgr-tabelle th,
.djgr .djgr-tabelle td {
	padding: 9px 10px;
	border-bottom: 1px solid var(--djgr-haar);
}

.djgr .djgr-tabelle th:first-child,
.djgr .djgr-tabelle td:first-child {
	padding-left: 0;
}

.djgr .djgr-tabelle thead th {
	font-size: 14px;
	font-weight: 650;
	color: var(--djgr-grau);
	border-bottom-color: var(--djgr-linie);
}

.djgr .djgr-tabelle tbody th {
	font-weight: 600;
	color: var(--djgr-navy);
}

.djgr .djgr-tabelle tr.ist-aktiv th,
.djgr .djgr-tabelle tr.ist-aktiv td {
	font-weight: 700;
	color: var(--djgr-navy);
	background: var(--djgr-hellgruen);
}

.djgr .djgr-tabelle tr.ist-aktiv th:first-child {
	padding-left: 8px;
	box-shadow: inset 3px 0 0 var(--djgr-gruen);
}

/* Balken: Bundesländer und Alter */
.djgr .djgr-einordnung,
.djgr .djgr-weiter {
	margin-top: 20px;
	padding: clamp(20px, 2.6vw, 28px);
	background: var(--djgr-weiss);
	border: 1px solid var(--djgr-haar);
	border-radius: var(--djgr-r-karte);
}

.djgr .djgr-einordnung__spalten {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px 40px;
	margin-top: 16px;
}

.djgr .djgr-einordnung__block .djgr-h4 {
	margin-bottom: 8px;
}

.djgr .djgr-balken {
	font-size: 15px;
	table-layout: fixed;
}

.djgr .djgr-balken__name {
	width: 42%;
	padding: 5px 10px 5px 0;
	vertical-align: middle;
	font-weight: 500;
	line-height: 1.3;
	color: var(--djgr-text);
}

.djgr .djgr-balken__daten {
	padding: 5px 0;
	white-space: nowrap;
	vertical-align: middle;
}

.djgr .djgr-balken__spur {
	display: inline-block;
	width: calc(100% - 92px);
	height: 8px;
	vertical-align: middle;
	background: var(--djgr-haar);
	border-radius: 4px;
	overflow: hidden;
}

.djgr .djgr-balken__fuellung {
	display: block;
	height: 100%;
	background: var(--djgr-gruen);
	border-radius: 4px;
}

.djgr .djgr-balken__wert {
	display: inline-block;
	width: 88px;
	vertical-align: middle;
	font-weight: 650;
	text-align: right;
	color: var(--djgr-navy);
	font-variant-numeric: tabular-nums;
}

.djgr .djgr-balken__wert--leer {
	width: auto;
	font-weight: 400;
	color: var(--djgr-grau);
}

.djgr .djgr-balken__zeile--referenz .djgr-balken__name {
	font-weight: 700;
	color: var(--djgr-navy);
}

.djgr .djgr-balken__zeile--referenz .djgr-balken__fuellung {
	background: var(--djgr-dunkelgruen);
}

.djgr .djgr-balken__zeile.ist-gewaehlt .djgr-balken__name {
	font-weight: 700;
	color: var(--djgr-navy);
}

.djgr .djgr-balken__zeile.ist-gewaehlt .djgr-balken__name::after {
	content: " (Auswahl)";
	font-weight: 400;
	color: var(--djgr-grau);
}

.djgr .djgr-balken__zeile.ist-gewaehlt .djgr-balken__fuellung {
	background: var(--djgr-navy);
}

/* Nächste Schritte */
.djgr .djgr-weiter__liste {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin-top: 14px;
}

.djgr .djgr-weiter__liste li {
	padding: 14px 16px;
	background: var(--djgr-hellgruen);
	border-radius: var(--djgr-r-feld);
}

.djgr .djgr-weiter__link {
	font-size: 17px;
	font-weight: 700;
}

.djgr .djgr-weiter__link::after {
	content: " →";
}

.djgr .djgr-weiter__text {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	color: var(--djgr-grau);
}

.djgr .djgr-weiter .djgr-h4 {
	margin-top: 22px;
}

.djgr .djgr-weiter__wb {
	margin-top: 8px;
}

.djgr .djgr-weiter__wb li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--djgr-haar);
}

.djgr .djgr-weiter__wb a {
	font-weight: 600;
}

.djgr .djgr-weiter__wert {
	font-size: 15px;
	color: var(--djgr-grau);
	font-variant-numeric: tabular-nums;
}

/* ---------- Inhaltsabschnitte ---------- */

.djgr .djgr-quellen {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px 48px;
	margin-top: 28px;
}

.djgr .djgr-quellen > *,
.djgr .djgr-einordnung__spalten > *,
.djgr .djgr-schritte > *,
.djgr .djgr-raster > *,
.djgr .djgr-legende > * {
	min-width: 0;
}

.djgr .djgr-tabelle--quellen th,
.djgr .djgr-tabelle--quellen td {
	overflow-wrap: anywhere;
}

.djgr .djgr-quellen__block .djgr-liste {
	margin-top: 12px;
	font-size: 15px;
}

.djgr .djgr-tabelle--quellen {
	margin-top: 12px;
	font-size: 14px;
}

.djgr .djgr-schritte {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin-top: 28px;
	counter-reset: djgr-schritt;
}

.djgr .djgr-schritte__eintrag {
	position: relative;
	padding: 22px 22px 22px 22px;
	background: var(--djgr-weiss);
	border-radius: var(--djgr-r-karte);
	counter-increment: djgr-schritt;
}

.djgr .djgr-schritte__eintrag::before {
	content: counter(djgr-schritt, decimal-leading-zero);
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 10px 4px 9px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--djgr-dunkelgruen);
	background: var(--djgr-mint);
	clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.djgr .djgr-legende__titel {
	margin-top: 32px;
}

.djgr .djgr-legende {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px 24px;
	margin-top: 14px;
}

.djgr .djgr-legende__eintrag .djgr-text-klein {
	margin-top: 6px;
	color: var(--djgr-text);
}

.djgr .djgr-raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 40px;
	margin-top: 20px;
}

.djgr .djgr-raster__eintrag {
	padding: 20px 0;
	border-top: 1px solid var(--djgr-linie);
}

.djgr .djgr-raster__eintrag .djgr-text {
	margin-top: 6px;
	color: var(--djgr-text);
}

/* Übersicht nach Berufsfeldern */
.djgr .djgr-uebersicht {
	margin-top: 24px;
	border-top: 1px solid var(--djgr-linie);
}

.djgr .djgr-feldgruppe {
	border-bottom: 1px solid var(--djgr-linie);
}

.djgr .djgr-feldgruppe__titel {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 16px 40px 16px 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--djgr-navy);
	list-style: none;
	cursor: pointer;
}

.djgr .djgr-feldgruppe__titel::-webkit-details-marker {
	display: none;
}

.djgr .djgr-feldgruppe__titel::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -7px;
	border-right: 2px solid var(--djgr-textgruen);
	border-bottom: 2px solid var(--djgr-textgruen);
	transform: rotate(45deg);
}

.djgr .djgr-feldgruppe[open] > .djgr-feldgruppe__titel::after {
	margin-top: -2px;
	transform: rotate(-135deg);
}

.djgr .djgr-feldgruppe__anzahl {
	font-size: 14px;
	font-weight: 500;
	color: var(--djgr-grau);
}

.djgr .djgr-feldgruppe .djgr-tabelle-rahmen {
	margin-bottom: 20px;
}

/* Übersichtstabelle */
.djgr .djgr-tabelle--uebersicht {
	background: var(--djgr-weiss);
}

.djgr .djgr-tabelle--uebersicht th,
.djgr .djgr-tabelle--uebersicht td {
	padding: 11px 14px;
}

.djgr .djgr-tabelle--uebersicht th:first-child,
.djgr .djgr-tabelle--uebersicht td:first-child {
	padding-left: 16px;
}

.djgr .djgr-tabelle__gruppe th {
	padding-top: 18px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--djgr-dunkelgruen);
	background: var(--djgr-hellgruen);
}

.djgr .djgr-tabelle__zusatz {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: var(--djgr-grau);
}

.djgr .djgr-tabelle__leer {
	color: var(--djgr-grau);
}

.djgr .djgr-tabelle__aktion {
	white-space: nowrap;
	text-align: right;
}

.djgr .djgr-tabelle__aktion a {
	font-weight: 650;
}

/* Abschluss */
.djgr .djgr-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	padding: clamp(24px, 4vw, 40px);
	background: var(--djgr-hellgruen);
	border-radius: var(--djgr-r-karte);
}

.djgr .djgr-cta__text {
	flex: 1 1 420px;
	max-width: 640px;
}

.djgr .djgr-cta__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.djgr .djgr-faq {
	margin-top: 24px;
	border-top: 1px solid var(--djgr-linie);
}

.djgr .djgr-faq__eintrag {
	border-bottom: 1px solid var(--djgr-linie);
}

.djgr .djgr-faq__frage {
	position: relative;
	display: block;
	padding: 18px 44px 18px 0;
	font-size: 17px;
	font-weight: 650;
	line-height: 1.4;
	color: var(--djgr-navy);
	list-style: none;
	cursor: pointer;
}

.djgr .djgr-faq__frage::before,
.djgr .djgr-faq__frage::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 14px;
	height: 2px;
	margin-top: -1px;
	background: var(--djgr-textgruen);
}

.djgr .djgr-faq__frage::after {
	transform: rotate(90deg);
}

.djgr .djgr-faq__eintrag[open] > .djgr-faq__frage::after {
	transform: rotate(0deg);
}

.djgr .djgr-faq__antwort {
	padding: 0 0 20px;
	max-width: 70ch;
}

.djgr .djgr-haftung {
	margin-top: 24px;
}

/* ---------- Breakpoints ---------- */

@media (min-width: 560px) {
	.djgr .djgr-meta > div {
		grid-template-columns: 136px minmax(0, 1fr);
	}

	.djgr .djgr-legende {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.djgr .djgr-tarifwahl .djgr-feld--erfahrung {
		flex: 1 1 200px;
	}
}

@media (min-width: 760px) {
	.djgr .djgr-weiter__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.djgr .djgr-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.djgr .djgr-schritte {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.djgr .djgr-karten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.djgr .djgr-karte--untergrenze:nth-child(3) {
		grid-column: 1 / -1;
	}

	.djgr .djgr-einordnung__spalten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.djgr .djgr-quellen {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	}

	.djgr .djgr-raster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.djgr .djgr-legende {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Übersichtstabelle auf schmalen Bildschirmen als Liste */
@media (max-width: 759px) {
	.djgr .djgr-tabelle--uebersicht,
	.djgr .djgr-tabelle--uebersicht tbody,
	.djgr .djgr-tabelle--uebersicht tr,
	.djgr .djgr-tabelle--uebersicht th,
	.djgr .djgr-tabelle--uebersicht td {
		display: block;
		width: 100%;
	}

	.djgr .djgr-tabelle--uebersicht thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.djgr .djgr-tabelle--uebersicht tr {
		padding: 12px 16px;
		border-bottom: 1px solid var(--djgr-haar);
	}

	.djgr .djgr-tabelle--uebersicht tr.djgr-tabelle__gruppe {
		padding: 0;
	}

	.djgr .djgr-tabelle--uebersicht th,
	.djgr .djgr-tabelle--uebersicht td,
	.djgr .djgr-tabelle--uebersicht th:first-child,
	.djgr .djgr-tabelle--uebersicht td:first-child {
		padding: 2px 0;
		border: 0;
	}

	.djgr .djgr-tabelle--uebersicht .djgr-tabelle__gruppe th {
		padding: 14px 16px 8px;
	}

	.djgr .djgr-tabelle--uebersicht tbody th {
		font-size: 16px;
	}

	.djgr .djgr-tabelle--uebersicht td[data-label]::before {
		content: attr(data-label) ": ";
		font-weight: 600;
		color: var(--djgr-grau);
	}

	.djgr .djgr-tabelle--uebersicht .djgr-tabelle__zusatz {
		display: inline;
		margin-left: 6px;
	}

	.djgr .djgr-tabelle--uebersicht .djgr-tabelle__aktion {
		padding-top: 6px;
		text-align: left;
	}

	.djgr .djgr-tabelle--quellen,
	.djgr .djgr-tabelle--quellen tbody,
	.djgr .djgr-tabelle--quellen tr,
	.djgr .djgr-tabelle--quellen th,
	.djgr .djgr-tabelle--quellen td {
		display: block;
		width: 100%;
	}

	.djgr .djgr-tabelle--quellen thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.djgr .djgr-tabelle--quellen tr {
		padding: 10px 0;
		border-bottom: 1px solid var(--djgr-haar);
	}

	.djgr .djgr-tabelle--quellen th,
	.djgr .djgr-tabelle--quellen td {
		padding: 1px 0;
		border: 0;
	}

	.djgr .djgr-tabelle--quellen td[data-label]::before {
		content: attr(data-label) ": ";
		font-weight: 600;
		color: var(--djgr-grau);
	}
}

/* Stufentabelle auf schmalen Bildschirmen zweizeilig statt mit innerem Scrollen */
@media (max-width: 519px) {
	.djgr .djgr-tabelle--stufen thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.djgr .djgr-tabelle--stufen,
	.djgr .djgr-tabelle--stufen tbody {
		display: block;
		width: 100%;
	}

	.djgr .djgr-tabelle--stufen tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "stufe betrag" "zeit teilzeit";
		column-gap: 12px;
		padding: 8px 0;
		border-bottom: 1px solid var(--djgr-haar);
	}

	.djgr .djgr-tabelle--stufen th,
	.djgr .djgr-tabelle--stufen td,
	.djgr .djgr-tabelle--stufen th:first-child {
		display: block;
		padding: 0;
		border: 0;
		background: none;
	}

	.djgr .djgr-tabelle--stufen tbody th {
		grid-area: stufe;
	}

	.djgr .djgr-tabelle--stufen .djgr-tabelle__betrag {
		grid-area: betrag;
		text-align: right;
		font-weight: 650;
	}

	.djgr .djgr-tabelle--stufen .djgr-tabelle__zeit {
		grid-area: zeit;
		font-size: 14px;
		color: var(--djgr-grau);
	}

	.djgr .djgr-tabelle--stufen .djgr-tabelle__teilzeit {
		grid-area: teilzeit;
		font-size: 14px;
		text-align: right;
		color: var(--djgr-grau);
	}

	.djgr .djgr-tabelle--stufen .djgr-tabelle__teilzeit::before {
		content: attr(data-label) ": ";
	}

	.djgr .djgr-tabelle--stufen tr.ist-aktiv {
		padding-left: 8px;
		padding-right: 8px;
		background: var(--djgr-hellgruen);
		box-shadow: inset 3px 0 0 var(--djgr-gruen);
	}

	.djgr .djgr-tabelle--stufen tr.ist-aktiv th,
	.djgr .djgr-tabelle--stufen tr.ist-aktiv td,
	.djgr .djgr-tabelle--stufen tr.ist-aktiv th:first-child {
		padding-left: 0;
		box-shadow: none;
		background: none;
	}
}

@media (max-width: 420px) {
	.djgr .djgr-balken__name {
		width: 46%;
		font-size: 14px;
	}

	.djgr .djgr-balken__spur {
		width: calc(100% - 80px);
	}

	.djgr .djgr-balken__wert {
		width: 76px;
		font-size: 14px;
	}

	.djgr .djgr-spanne__werte dd {
		font-size: 15px;
	}

	.djgr .djgr-segment__label {
		flex: 1 1 40%;
	}

	.djgr .djgr-button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.djgr *,
	.djgr *::before,
	.djgr *::after {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.djgr .djgr-rechner,
	.djgr .djgr-tarifwahl,
	.djgr .djgr-cta,
	.djgr .djgr-crumbs {
		display: none !important;
	}

	.djgr .djgr-abschnitt {
		padding: 16px 0;
		background: none;
	}

	.djgr .djgr-karte,
	.djgr .djgr-einordnung,
	.djgr .djgr-weiter {
		break-inside: avoid;
	}
}