/*
 * Rubrik „Deadlines“ – Bausteine für Beiträge mit Stichtag.
 * Vorlage: Claude-Design „Support-Ende Landingpage“ (Handoff 23.10.2026).
 *
 * Bausteine sind frei kombinierbar; jeder hängt nur an seiner Klasse:
 *   dl-hero, dl-wrap, dl-pill, dl-h1, dl-lead, dl-buttons, dl-kacheln, dl-fakt,
 *   dl-sektion, dl-h2, dl-intro, dl-raster(--3/--4), dl-karte, dl-countdown-kachel,
 *   dl-faq (Kontakt = globaler Bereich „Kontakt (PreFooter)“, Vorlage 383)
 * Zeitleiste, Startseiten-Block, Hinweisleiste und Tabelle sind reines Elementor
 * (Loop-Elemente/Container) und brauchen hier nichts.
 * Nummern ([ 01 ], 01 …) entstehen per CSS-Zähler, werden also nicht gepflegt.
 *
 * ⚠️ Elementor setzt Abstände über CSS-Variablen an .e-con; deshalb hier die
 * Variablen setzen statt padding/gap direkt zu überschreiben.
 */

:root {
	--dl-blau: #062863;
	--dl-blau-hover: #0a3a8c;
	--dl-auf-blau: #EEF2F8;
	--dl-auf-blau-2: #C3D2EA;
	--dl-flaeche: #F7F8FB;
	--dl-flaeche-2: #EEF1F6;
	--dl-toenung: #F2F5FB;
	--dl-linie: #E1E5EE;
	--dl-linie-2: #EEF1F6;
	--dl-linie-3: #D3D9E6;
	--dl-raster: #E7EAF1;
	--dl-text: #12151C;
	--dl-text-2: #4B5565;
	--dl-text-3: #5B6577;
	--dl-text-4: #6B7686;
	--dl-text-5: #2F3A4D;
	--dl-rot: #C0392B;
	--dl-gruen: #1FA672;
	--dl-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body.single-post, body.category-deadlines { background: var(--dl-flaeche); }

/* Elementor-Grundabstände in der Rubrik neutralisieren */
.dl-seite.e-con, .dl-seite .e-con {
	--padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
	--gap: 0px; --row-gap: 0px; --column-gap: 0px;
}
.dl-seite .elementor-widget:not(:last-child) { margin-bottom: 0; }
.dl-seite .elementor-heading-title, .dl-seite p { margin: 0; }

/* Inhaltsbreite */
.dl-seite .dl-wrap.e-con {
	width: 100%; max-width: 1180px; margin-left: auto; margin-right: auto;
	--padding-left: 32px; --padding-right: 32px;
	display: block;
}
@media (max-width: 640px) {
	.dl-seite .dl-wrap.e-con { --padding-left: 20px; --padding-right: 20px; }
}

/* ---------- Hero ---------- */
.dl-seite .dl-hero.e-con {
	position: relative; overflow: hidden; display: block;
	border-bottom: 1px solid var(--dl-linie);
	background-color: var(--dl-flaeche);
	--padding-top: 88px; /* fester Seitenkopf liegt darüber */
}
.dl-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
	background-image:
		linear-gradient(var(--dl-raster) 1px, transparent 1px),
		linear-gradient(90deg, var(--dl-raster) 1px, transparent 1px);
	background-size: 62px 62px;
}
.dl-hero::after {
	content: ""; position: absolute; pointer-events: none;
	width: 620px; height: 400px; top: -140px; left: 6%;
	background: radial-gradient(ellipse, rgba(6,40,99,.13), transparent 70%);
	filter: blur(24px);
}
.dl-hero > * { position: relative; z-index: 1; }

.dl-brotkrume {
	font-family: var(--dl-mono); font-size: 12px; color: var(--dl-text-4);
	padding-top: 28px; display: flex; flex-wrap: wrap; gap: 8px;
}
.dl-brotkrume a { color: var(--dl-text-4); text-decoration: none; }
.dl-brotkrume a:hover { color: var(--dl-blau); }
.dl-brotkrume [aria-current] { color: var(--dl-text); }

.dl-seite .dl-hero__grid.e-con {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 48px !important; align-items: center;
	--padding-top: 56px; --padding-bottom: 72px;
}
.dl-seite .dl-hero__text.e-con { display: block; }

.dl-pill .elementor-heading-title {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--dl-mono); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
	color: var(--dl-blau); border: 1px solid rgba(6,40,99,.45); border-radius: 999px; padding: 7px 14px; line-height: 1.2;
}
.dl-pill .elementor-heading-title::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
	background: var(--dl-rot); box-shadow: 0 0 10px var(--dl-rot);
	animation: dl-puls 2.4s ease-in-out infinite;
}
@keyframes dl-puls { 0%,100% { transform: scale(1); opacity: .35; } 50% { transform: scale(1.35); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .dl-pill .elementor-heading-title::before { animation: none; opacity: .9; } }

.dl-seite .dl-h1 .elementor-heading-title {
	font-size: 52px; font-weight: 800; line-height: 1.04; letter-spacing: -.03em; color: var(--dl-text);
	margin: 28px 0 22px;
}
.dl-seite .dl-h1 .elementor-heading-title span { color: var(--dl-blau); display: block; }
@media (max-width: 1024px) { .dl-seite .dl-h1 .elementor-heading-title { font-size: 42px; } }
@media (max-width: 640px)  { .dl-seite .dl-h1 .elementor-heading-title { font-size: 34px; } }

.dl-seite .dl-lead, .dl-seite .dl-lead p { font-size: 18px; line-height: 1.6; color: var(--dl-text-2); max-width: 560px; }
.dl-seite .dl-lead { margin-bottom: 34px !important; }

/* Buttons */
.dl-seite .dl-buttons.e-con { display: flex; flex-wrap: wrap; gap: 14px !important; flex-direction: row; }
.dl-seite .dl-buttons .elementor-widget { width: auto; margin: 0; }
.dl-seite .dl-btn .elementor-button {
	font-family: "Geist", system-ui, sans-serif; letter-spacing: 0; text-transform: none;
	font-size: 16px; line-height: 1.2; border-radius: 10px; padding: 15px 30px;
	transition: transform .25s ease, background-color .25s ease;
}
.dl-seite .dl-btn .elementor-button:hover { transform: translateY(-3px); }
.dl-seite .dl-btn--primaer .elementor-button {
	font-weight: 700; color: var(--dl-auf-blau); background: var(--dl-blau);
	box-shadow: 0 0 30px rgba(6,40,99,.35); border: 0;
}
.dl-seite .dl-btn--primaer .elementor-button:hover { background: var(--dl-blau-hover); color: var(--dl-auf-blau); }
.dl-seite .dl-btn--sekundaer .elementor-button {
	font-weight: 600; color: var(--dl-text); background: #fff; border: 1px solid var(--dl-linie-3);
}
.dl-seite .dl-btn--sekundaer .elementor-button:hover { color: var(--dl-text); background: #fff; }

/* Kachelblock rechts */
.dl-seite .dl-kacheln.e-con {
	display: grid !important; grid-template-columns: 1fr 1fr; gap: 1px !important;
	background: var(--dl-linie); border: 1px solid var(--dl-linie); border-radius: 18px; overflow: hidden;
}
.dl-seite .dl-kacheln > .dl-countdown-kachel { grid-column: 1 / -1; }
/* Raster-Muster der Countdown-Kachel (Farbe, Abstände, Countdown-Widget: in Elementor) */
.dl-countdown-kachel {
	background-image:
		linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
	background-size: 38px 38px;
}
.dl-seite .dl-fakt.e-con { display: block; background: #fff; --padding-top: 22px; --padding-bottom: 22px; --padding-left: 20px; --padding-right: 20px; }
.dl-seite .dl-fakt__label .elementor-heading-title { font-family: var(--dl-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dl-text-4); font-weight: 400; line-height: 1.4; }
.dl-seite .dl-fakt__wert .elementor-heading-title { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--dl-text); margin-top: 6px; line-height: 1.25; }

/* ---------- Sektionen ---------- */
.dl-seite { counter-reset: dl-sektion; }
.dl-seite .dl-sektion.e-con { display: block; --padding-top: 80px; }
.dl-seite .dl-sektion--letzte.e-con { --padding-bottom: 80px; }
.dl-sektion { counter-increment: dl-sektion; }
.dl-seite .dl-h2 .elementor-heading-title {
	font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--dl-text);
	display: flex; align-items: baseline; gap: 16px; margin-bottom: 32px;
}
.dl-sektion .dl-h2 .elementor-heading-title::before {
	content: "[ " counter(dl-sektion, decimal-leading-zero) " ]";
	font-family: var(--dl-mono); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--dl-blau); flex: none;
}
@media (max-width: 640px) { .dl-seite .dl-h2 .elementor-heading-title { font-size: 26px; } }
.dl-seite .dl-intro, .dl-seite .dl-intro p { font-size: 16px; line-height: 1.6; color: var(--dl-text-2); max-width: 680px; }
.dl-seite .dl-intro { margin-bottom: 28px !important; }

/* Kartenraster – Linien per box-shadow, damit beim Umbruch keine Lücken entstehen */
.dl-seite .dl-raster.e-con {
	display: grid !important; gap: 0 !important; counter-reset: dl-karte;
	background: #fff; border: 1px solid var(--dl-linie); border-radius: 14px; overflow: hidden;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.dl-seite .dl-raster--4.e-con { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.dl-seite .dl-karte.e-con {
	display: block; counter-increment: dl-karte;
	--padding-top: 26px; --padding-bottom: 26px; --padding-left: 24px; --padding-right: 24px;
	box-shadow: 1px 0 0 var(--dl-linie), 0 1px 0 var(--dl-linie);
}
.dl-seite .dl-karte.e-con::before {
	/* Elementor nutzt .e-con::before als Hintergrund-Overlay (absolut) – hier zurücksetzen */
	position: static !important; inset: auto !important; width: auto; height: auto; opacity: 1; background: none;
	content: counter(dl-karte, decimal-leading-zero); display: block;
	font-family: var(--dl-mono); font-size: 12.5px; color: var(--dl-blau); margin-bottom: 18px;
}
.dl-seite .dl-karte__titel .elementor-heading-title { font-size: 17.5px; font-weight: 700; letter-spacing: -.01em; color: var(--dl-text); line-height: 1.3; margin-bottom: 9px; }
.dl-seite .dl-karte__text, .dl-seite .dl-karte__text p { font-size: 14px; line-height: 1.55; color: var(--dl-text-3); }

/* FAQ (Elementor nested-accordion) */
.dl-seite .dl-faq-wrap.e-con { max-width: 920px; margin: 0 auto; }
.dl-faq .e-n-accordion-item { border-bottom: 1px solid var(--dl-linie); }
.dl-faq .e-n-accordion-item:first-child { border-top: 1px solid var(--dl-linie); }
.dl-faq .e-n-accordion-item-title {
	padding: 20px 0 !important; border: 0 !important; background: transparent !important;
	justify-content: space-between !important; gap: 20px;
}
.dl-faq .e-n-accordion-item-title-text { font-size: 17px !important; font-weight: 700; color: var(--dl-text) !important; line-height: 1.35; }
.dl-faq .e-n-accordion-item-title-icon { font-family: var(--dl-mono); font-size: 18px; color: var(--dl-blau); }
.dl-faq .e-n-accordion-item-title-icon .e-opened,
.dl-faq .e-n-accordion-item-title-icon .e-closed { display: none !important; }
.dl-faq .e-n-accordion-item-title-icon::after { content: "+"; }
.dl-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon::after { content: "−"; }
.dl-faq .e-n-accordion-item > .e-con { --padding-top: 0px; --padding-bottom: 22px; --padding-left: 0px; --padding-right: 0px; border: 0 !important; }
.dl-faq .e-n-accordion-item > .e-con, .dl-faq .e-n-accordion-item > .e-con p { font-size: 15px; line-height: 1.6; color: var(--dl-text-2); }

/* FAQ: Frage links, +/− rechts */
.dl-faq .e-n-accordion-item-title { flex-direction: row !important; }
.dl-faq .e-n-accordion-item-title-header { flex: 1; text-align: left; }
.dl-faq .e-n-accordion-item-title-icon { order: 2; margin-left: auto; }