/* =========================================================================
 * DFFB 2026 – Komponenten-Styles (NEU)
 * Greift nur auf Tokens aus tokens.css zu. Lädt nach legacy.css.
 * ===================================================================== */

/* --- Basis -------------------------------------------------------------- */



body {
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	transition: background-color .2s ease, color .2s ease;
	letter-spacing:-0.02rem;
}

h1 {
		letter-spacing:-0.2rem;

}

 h2 {
		letter-spacing:-0.12rem;

}
h3, h4, h5, h6{
		letter-spacing:-0.03rem;
	line-height: var(--lh-md)

}

h3.row-title{
	letter-spacing: 0;
}


.st_fliess{
	font-size: 1rem;
	line-height:1.2;
	letter-spacing: -0.01em;
}

.st_info_sm{
	font-size: 0.7rem;
	line-height:1.2;
	letter-spacing: 0.05em;
	text-transform:uppercase;
}

.btn-outline.red_outline_link{
	border-color:#f4516a;
	color:#f4516a;
}

.btn-outline.red_outline_link:hover{
	border-color:#000;
	color:#000;
}
/* .dffb-grid{
	max-width:1440px;
	margin-left:auto;
	margin-right:auto;
} */

.dffb-grid > div{
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
}



.bg-red{ background-color: var(--color-bg);
	position:relative;
}

/* .bg-red:before{
	background-color: var(--color-bg);
	position:absolute;
	left:-50%;
	width:200%;
	height:100%;
	top:0px;
	z-index:-1;
	content:'';
	display:block;
} */

.centered{
	text-align:center;
}

/* Body-Innenabstand oben, damit Inhalt nicht unter dem fixen Header liegt.
   (Klassen kommen aus document-open.php.) */
.dffb-body { padding-top: calc(var(--header-top) + var(--header-height) + var(--space-lg)); }
.dffb-body.admin-bar { padding-top: calc(var(--header-top) + var(--header-height) + var(--space-lg) + 32px); }

/* --- Skip-Link ---------------------------------------------------------- */
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: #000; color: #fff; padding: .5rem 1rem;
}
.skip-link:focus { left: 0; }

/* =========================================================================
 * HEADER
 * ===================================================================== */

.home.dffb-body{
	margin-top: 0px;
	padding-top: 0px!important;
}
/* Fixer Außen-Container über die volle Breite, mit Abstand nach oben. */
.site-header-outer {
	position: fixed;
	top: var(--header-top);
	left: 0;
	width: 100%;
	z-index: 999999999;
}
.admin-bar .site-header-outer { top: calc(var(--header-top) + 32px); }

/* 12er-Grid; Header belegt Spalte 2–11, Schalter sitzt in Spalte 12. */
.site-header-grid {
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin-inline: auto;
	padding-inline: var(--container-pad);
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), 1fr);
	gap: var(--grid-gap);
	align-items: center;
}

/* Die eigentliche Header-Bar (10 Spalten).
   KEIN backdrop-filter hier – sonst „verschluckt" der Header den Blur der
   Submenüs/Suche. Der Frost liegt auf .site-header__bg (Geschwister-Ebene). */
.site-header {
	grid-column: 1 / 13;
	height: var(--header-height);
	padding-inline: var(--header-pad);
	display: grid;
	grid-template-columns: repeat(var(--header-cols), 1fr);
	align-items: center;
	gap: var(--grid-gap);
	position: relative;
	color: var(--color-text);
}

/* Frost-Hintergrund des Headers: eigene Ebene, KEIN Vorfahr von Nav/Suche. */
.site-header__bg {
	position: absolute; inset: 0; z-index: 0;
	background: var(--header-bg);
	-webkit-backdrop-filter: blur(var(--header-blur));
	backdrop-filter: blur(var(--header-blur));
	border-radius: var(--header-radius);
	pointer-events: none;
	border: 0.02em solid #000;
}

/* Inhalt über den Frost-Hintergrund (Grid-Items: z-index wirkt auch ohne position).
   Nav höher, damit breite Dropdowns über Logo (z2) und Aktionen (z2) liegen. */
.site-header__nav { z-index: 3; }

/* Logo: 3 Spalten */
.site-header__logo { grid-column: 1 / span 3; display: flex; align-items: center; z-index: 2; }
.site-header__title { margin: 0; line-height: 0; }
.site-header__logo-img { height: 4rem; width: auto; object-fit: contain; object-position: left center; }
.site-header__logo-text { font-family: var(--font-druk); font-size: 1.5rem; }

/* Navigation: nächste 5 Spalten */
.site-header__nav { grid-column: 4 / span 5; align-self: stretch; }
.site-header__nav .menu {
	list-style: none; margin: 0; padding: 0; height: 100%;
	display: flex; align-items: stretch; justify-content: space-between; gap: var(--space-md);
}
/* Top-Level-Punkte: volle Bar-Höhe, damit das Dropdown exakt unter der Bar sitzt */
.site-header__nav .menu > li {
	position: relative;
	display: flex; align-items: center;
}
.site-header__nav .menu a {
	color: var(--color-text);
	text-decoration: none;
	font-weight: var(--fw-regular);
	white-space: nowrap;
}
.site-header__nav .menu a:hover,
.site-header__nav .menu a:focus-visible { text-decoration: none; color: #f4516a; }

/* Aktiver Menüpunkt: Grün, leichter Schnitt (aus add.css übernommen) */
.site-header__nav .current-menu-item > a,
.site-header__nav .current-menu-ancestor > a,
.site-header__nav .current_page_item > a,
.site-header__nav .current_page_ancestor > a {
	color: var(--color-accent);
	font-weight: var(--fw-light);
}

/* --- Untermenü (Dropdown, erscheint beim Hover/Fokus) -------------------
 * Frost wie die Bar. Funktioniert, weil .site-header KEINEN backdrop-filter
 * mehr hat (siehe .site-header__bg). Sichtbarkeit über opacity/visibility.
 */
.site-header__nav .sub-menu {
	list-style: none; margin: 0;
	position: absolute; left: 0; top: 105%;
	min-width: 14rem;
	padding: var(--space-md);
	display: flex; flex-direction: column; gap: var(--space-sm);
	background: var(--header-bg);
	-webkit-backdrop-filter: blur(var(--header-blur));
	backdrop-filter: blur(var(--header-blur));
	border-radius: var(--header-radius);
	color: var(--color-text);
	z-index: 30;
	opacity: 0; visibility: hidden; transform: translateY(.25rem);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.site-header__nav .menu > li.menu-item-has-children:hover > .sub-menu,
.site-header__nav .menu > li.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.site-header__nav .sub-menu a { white-space: nowrap; }
.site-header__nav .sub-menu a:hover,
.site-header__nav .sub-menu a:focus-visible { color: var(--color-accent); text-decoration: none; }

/* Aktionen rechts: Suche + Sprachumschalter (2 Spalten) */
.site-header__actions {
	grid-column: 9 / span 2;
	display: flex; align-items: center; justify-content: flex-end; gap: var(--space-md);
	z-index: 2;
}
.site-header__search-toggle {
	background: none; border: 0; padding: 0; cursor: pointer;
	color: var(--color-text); display: inline-flex; line-height: 0;
}

/* Sprachumschalter: gestapelte runde Badges */
.lang-switch {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: var(--space-xs);
	font-family: var(--font-body);
	font-weight: var(--fw-bold);
}
.lang-switch__link {
	display: grid; place-items: center;
	height: 1.5rem; width: 1.5rem;
	border: 1px solid var(--color-border); border-radius: 50%;
	background: #fff; color: #000; text-decoration: none;
	font-size: .6rem; line-height: 1;
	transition: background-color .2s ease, color .2s ease;
}
.lang-switch__link.is-active { background: #000; color: #fff; }
.lang-switch__link:hover,
.lang-switch__link:focus-visible { background: #000; color: #fff; text-decoration: none; }
.lang-switch__link.is-active:hover { background: #fff; color: #000; }

/* Suchleiste – klappt unter der Bar auf (frostet die Seite, da .site-header
   keinen backdrop-filter mehr hat) */
.site-header__search {
	position: absolute; left: 0; top: 105%;
	width: 100%; padding: var(--space-md) var(--header-pad);
	background: var(--header-bg);
	-webkit-backdrop-filter: blur(var(--header-blur));
	backdrop-filter: blur(var(--header-blur));
	border-radius: var(--header-radius);
	color: var(--color-text);
}
.site-header__search[hidden] { display: none; }
/* Hinweis: Das Suchfeld liegt INNERHALB der frostigen Suchleiste. Sein eigener
   backdrop-filter blurrt deshalb gegen die Leiste, nicht gegen die Seite
   (gleiche Verschachtelungs-Regel wie beim Header). Sichtbar ist nur ein
   dezenter Effekt. Soll das Feld die Seite frosten, dürfte es nicht in einer
   frostigen Leiste liegen – Alternative: Feld einfach halbtransparent ohne
   eigenen Filter, dann scheint der Frost der Leiste durch. */
.site-header__search .search-field {
	width: 100%; padding: .5rem;
	background: var(--header-bg);
	-webkit-backdrop-filter: blur(var(--header-inner-blur));
	backdrop-filter: blur(var(--header-inner-blur));
	border-radius: var(--header-radius);
	color: var(--color-text);
}

/* Helligkeits-/Kontrastschalter – Spalte 12, rechts neben dem Header */
.site-header__scheme {
	grid-column: 12 / span 1;
	display: flex; align-items: center; justify-content: start;
	top:0px;
	right:-50px;
	position: absolute;
}
.scheme-toggle {
	--knob: 1rem;
	 cursor: pointer;
	
	width: 1.5rem; height: 2.75rem;             /* vertikale Pille [UNBESTÄTIGT: Maße aus Figma] */
	border: 2px solid var(--color-text); border-radius: 999px;
	background: transparent; padding: 2px;
}
.scheme-toggle__knob {
	position: absolute; left: 50%; top: 2px; transform: translateX(-50%);
	width: var(--knob); height: var(--knob);
	border-radius: 50%; background: var(--color-text);
	transition: top .2s ease;
}
.alt-color-scheme .scheme-toggle__knob { top: calc(100% - var(--knob) - 2px); }

/* =========================================================================
 * HEADER – Mobil (erste, funktionale Fassung; Feinschliff später)
 * ===================================================================== */
.site-header__burger { display: none; text-transform: uppercase;}

@media (max-width: 1023.98px) {
	.site-header {
		display: flex;
		justify-content: space-between;
		
	}
	.site-header__logo { grid-column: 1; order: 1}
	.site-header__burger {
		display: inline-block; grid-column: 2; z-index: 2;
		background: none; border: 0; cursor: pointer;
		font-family: var(--font-druk); color: var(--color-text);
		order: 3;
	}
	.site-header__nav {
	grid-column: 1 / -1;
	position: absolute; left: 0; top: calc(100% + 5px);
	width: 100%; padding: 10px;

	background: var(--header-bg);
	-webkit-backdrop-filter: blur(var(--header-blur));
	backdrop-filter: blur(var(--header-blur));
	border-radius: var(--header-radius);
	border: 0.02em solid #000;

	display: none;
}
	.site-header.is-open .site-header__nav { display: block; }
	.site-header__nav .menu { flex-direction: column; align-items: flex-start; gap: var(--space-sm); height: auto; }
	.site-header__nav .menu > li { flex-direction: column; align-items: flex-start; width: 100%; }
	/* Submenüs mobil: statisch sichtbar, eingerückt (kein Hover) */
	.site-header__nav .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		min-width: 0; padding: var(--space-sm) 0 var(--space-sm) var(--space-md); padding-left: 10px;
		background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
	}
	.site-header__actions { order: 2;   justify-self: end; margin-left: auto;}
	.lang-switch { flex-direction: row; }
	.site-header__scheme { grid-column: 1 / -1; justify-content: flex-start; }
	
	.site-header__nav .sub-menu {
		gap:0px;
	}
	
	.site-header__nav .sub-menu li {
		line-height: 1.2;
	}
	
	
	
	
	/* Submenüs mobil: eingeklappt per Default */
.site-header__nav .sub-menu {
	position: static;
	transform: none;
	min-width: 0;
	background: transparent;
	-webkit-backdrop-filter: none; backdrop-filter: none;

	/* eingeklappt */
	overflow: hidden;
	max-height: 0;
	padding-block: 0;
	transition: max-height .25s ease, padding .25s ease;
}

/* ausgeklappt, wenn das Eltern-<li> .is-open trägt */
.site-header__nav .menu > li.is-open > .sub-menu {
	max-height: 40rem; /* großzügig, muss den Inhalt überdecken */
	padding: var(--space-sm) 0 var(--space-sm) 10px;
}
	
	
	
	
}

/* =========================================================================
 * FOOTER  (Flex-Layout, Mechanik übernommen von 60jahre.dffb.de [60JAHRE])
 *
 * .site-footer__inner = Flex-Container: flex-wrap, align-items:flex-end
 * (Spalten an der Grundlinie unten), fester gap (40px). Spalten sind
 * inhaltsbreit – KEIN flex-grow, genau wie im 60jahre-Stylesheet.
 *
 * ABWEICHUNG von 60jahre: dort fließt der rechte Block natürlich; hier
 * wird .site-footer__end per margin-inline-start:auto an den rechten Rand
 * gedrückt, damit es dem Pink-Grid-Screenshot entspricht. Für reinen
 * 60jahre-Flow das margin:auto entfernen.
 * ===================================================================== */

.site-footer {
	width: 100%;
	background: #fff;
	color: var(--color-text);
	font-size: var(--footer-fs);
	line-height: var(--footer-lh);
	letter-spacing: -0.01em;        /* [60JAHRE] */
}

.site-footer__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-block: var(--footer-py);
	padding-inline: var(--container-pad);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;          /* [60JAHRE] Grundlinie unten */
	gap: var(--footer-gap);         /* [60JAHRE] 40px */
	justify-content: space-between;
}

.site-footer p { margin: 0; font-size: var(--fs-base); line-height: var(--lh-md);}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--color-accent); text-decoration: none; } /* [60JAHRE] Hover = accent, kein Unterstrich */

/* Rechter Block (Social + Logo) ans Ende drücken (Abweichung, s.o.) */
.site-footer__end {
	display: flex; flex-direction: column;
	align-items: flex-end; gap: var(--space-md);
}

/* Buttons (Kontakt / Intranet) – gestapelt */
.site-footer__actions {
	display: flex; flex-direction: column;
	gap: var(--space-sm); align-items: flex-start;
}

/* Rechtliche Linkliste (WP-Menü) – 75% der Basis, enge Zeilen [60JAHRE] */
.site-footer__legal-list {
	list-style: none; margin: 0; padding: 0;
}
.site-footer__legal-list a  { font-size: 75%; line-height: 1; }
.site-footer__legal-list li { line-height: 1; }

/* Outline-Buttons – wie 60jahre: nur Rahmen, Hover färbt Rahmen+Text accent */
.site-footer__btn {
	display: inline-block;
	border: 1px solid var(--footer-border);
	border-radius: var(--footer-btn-radius);
	padding: var(--footer-btn-py) var(--footer-btn-px);
	font-size: 75%;                 /* [60JAHRE] */
	color: var(--color-text);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .2s ease, color .2s ease;
}
.site-footer__btn:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
	text-decoration: none;
}

/* Social-Icons (Reihe) */
.site-footer__social {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; gap: var(--footer-gap-social);
}
.site-footer__social a   { display: inline-flex; color: var(--color-text); }
.site-footer__social a:hover { color: var(--color-accent); }
.site-footer__social svg { width: var(--footer-icon-size); height: var(--footer-icon-size); display: block; }

/* Partner-Logo (Senatskanzlei) – feste Höhe wie 60jahre */
.site-footer__partner img { height: var(--footer-logo-height); width: auto; display: block; }

/* ≤1440px: Text kleiner, End-Block wird zur Reihe [60JAHRE] */
@media (max-width: 1440px) {
	.site-footer p { font-size: 75%; }
	.site-footer__end { flex-direction: row; align-items: center; gap: var(--footer-gap); }
}

/* Mobil: alles untereinander, zentriert [60JAHRE] */
@media (max-width: 768px) {
	.site-footer__inner { flex-direction: column; align-items: center; text-align: center; }
	.site-footer__end { margin-inline-start: 0; align-items: center; flex-direction: column; }
	.site-footer__actions { flex-direction: row; }
}


/* =========================================================================
 * NEWS / EVENTS  (kombinierte Startseiten-Sektion)
 *
 * Ersetzt die alten getrennten News- und Events-Blöcke. Karten sind
 * strukturell identisch (Bild links, Text rechts); Events bekommen
 * zusätzlich die .news-card--event-Modifier-Klasse + Pill-Badge.
 * Maße/Spacing sind aus dem Screenshot geschätzt [GESCHÄTZT].
 * ===================================================================== */

.news-events__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-block: var(--space-xl);
	padding-inline: var(--container-pad);
	grid-column-start:2;
	grid-column-end:12;
}

.news-events__title {
	font-size: var(--fs-h2);
	font-weight: var(--fw-regular);
	margin: 0 0 var(--space-lg);
}

.news-events__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

/* Karte: Bild links (ca. 3/10), Info rechts, wie im alten .post/.event-Markup */
.news-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	color: inherit;
	text-decoration: none;
}

.news-card:hover{
	text-decoration: none;
	
}

.news-card:hover .news-card__title { text-decoration: none; transform:translateX(-5px); transition:all 0.2s ease;}
.news-card__title {  transition:all 0.2s ease; line-height:1;}

@media (min-width: 48rem) {
	.news-card { flex-direction: row; align-items: flex-start; gap: var(--space-lg); }
}

.news-card__media {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
}
@media (min-width: 48rem) {
	.news-card__media { width: 25%; }
}

.news-card__thumb,
.news-card__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.news-card__placeholder { background: var(--color-line); }

/* Pill-Badge "Event" – oben auf der Karte, über dem Bild */
.news-card__badge {
	position: absolute;
	top: var(--space-sm);
	left: var(--space-sm);
	display: inline-block;
	padding: 0.2em 0.7em;
	background: var(--color-text);
	color: var(--color-surface);
	font-family: var(--font-druk);
	font-size: var(--fs-druk);
	border-radius: 999px;
}

.news-card__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.news-card__meta { margin: 0; color: #000 }
.news-card__title { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-regular); }
.news-card__excerpt {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 600px;
}
.news-card__location { margin: 0; }


.news-events__more { margin-top: var(--space-lg); text-align: center; }

/* Generischer Outline-Button (auch im Footer als .site-footer__btn genutzt –
   optisch identisch, aber bewusst nicht zusammengelegt, um den Footer nicht
   anzufassen). */
.btn-outline {
	display: inline-block;
	border: 1px solid var(--color-border);
	border-radius: 3px;
	padding: 0.5rem 2rem;
	color: var(--color-text);
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}
.btn-outline:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
	text-decoration: none;
}

@media (max-width: 768px) {
	.news-card__badge { font-size: 0.625rem; }
}


/* =========================================================================
 * VIDEO-THUMBS  (Startseiten-/Modul-Sektion, 3 Spalten)
 *
 * Unterschied zur alten Version: Titel steht permanent klein unter dem
 * Bild statt als Hover-Overlay. Maße/Spacing aus dem alten Markup
 * übernommen (aspect-video, 3-Spalten-Grid), sonst [GESCHÄTZT].
 * ===================================================================== */


.video-thumbs__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-block: var(--space-xl);
	padding-inline: var(--container-pad);
	grid-column-start: 2;
grid-column-end: 12;
}

.video-thumbs__title {
	text-align: center;
	font-size: var(--fs-h2);
	font-weight: var(--fw-regular);
	margin: 0 0 var(--space-lg);
}

.video-thumbs__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}
@media (min-width: 48rem) {
	.video-thumbs__grid { grid-template-columns: repeat(3, 1fr); }
}

.video-thumb {
	display: block;
	color: inherit;
	text-decoration: none;
}

.video-thumb__figure { margin: 0; }

.video-thumb__image,
.video-thumb__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.video-thumb__placeholder { background: var(--color-line); }

/* Titel: klein, permanent sichtbar, unter dem Bild */
.video-thumb__caption {
	margin-top: var(--space-sm);
	font-size: var(--fs-druk);   /* [GESCHÄTZT] – kleine Unterschrift, gleiche Größe wie Druk-Labels */
	font-family: var(--font-body);
}

.video-thumb:hover .video-thumb__caption { color: var(--color-accent); }





/* =========================================================================
 * STUDIENANGEBOT  (Startseiten-Sektion)
 *
 * Weiße Fläche (Kontrast zum roten --color-bg), zentriert. Pill-Links
 * gefüllt mit der Markenfarbe, CTA-Button als Outline-Variante in
 * derselben Farbe statt Schwarz/Grün. Maße/Farben aus dem Screenshot
 * geschätzt [GESCHÄTZT] – Pill-Farbton bei Gelegenheit gegen Figma prüfen,
 * ich hab ihn nicht exakt abgepipettet, sondern --color-bg wiederverwendet.
 * ===================================================================== */

.study-programs {
	background: var(--color-surface);
	color: var(--color-text);
	text-align: center;
}

.study-programs__inner {
	max-width: 50rem;                 /* [GESCHÄTZT] schmalere Textspalte als Container-max */
	margin-inline: auto;
	padding-block: var(--space-xl);
	padding-inline: var(--container-pad);
	grid-column-start:2;
	grid-column-end:12;
}

.study-programs__title {
	font-size: var(--fs-h1);
	font-weight: var(--fw-regular);
	margin: 0 0 var(--space-lg);
}

.study-programs__text {
	margin: 0 0 var(--space-lg);
	font-size: var(--fs-md);
	line-height: var(--lh-md);
	text-align: left;
}
.study-programs__text p:last-child { margin-bottom: 0; }

.study-programs__label {
	margin: 0 0 var(--space-md);
	font-family: var(--font-body);
}

.study-programs__list {
	list-style: none;
	margin: 0 0 var(--space-lg);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
		font-size: var(--fs-smd);

}

.study-programs__pill {
	display: inline-block;
	background: var(--color-bg);
	color: var(--color-text);
	text-decoration: none;
	padding: 0.6rem 1.25rem;
	border-radius: 4px;
	white-space: nowrap;
}
.study-programs__pill:hover { text-decoration: none; opacity: .85; }



/* =========================================================================
 * FULLSCREEN-IMAGE  (Block: ein Bild, volle Breite, 16:9)
 *
 * Button unten rechts nutzt dasselbe Frost-Glas-Muster wie der Header
 * (--header-bg / --header-blur) – macht auf Fotos mehr her als ein
 * harter weißer Kasten. Abstand/Maße aus dem Screenshot geschätzt
 * [GESCHÄTZT].
 * ===================================================================== */

.fullscreen-image {
	position: relative;
	width: 100%;
}

.fullscreen-image__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	grid-column-start: 1;
	grid-column-end:13; 
}

.fullscreen-image__btn {
	position: absolute;
	right: var(--space-lg);
	bottom: var(--space-lg);
	display: inline-block;
	padding: var(--footer-btn-py) var(--footer-btn-px);
	border: 1px solid var(--color-border);
	border-radius: var(--footer-btn-radius);
	background: var(--header-bg);
	-webkit-backdrop-filter: blur(var(--header-blur));
	backdrop-filter: blur(var(--header-blur));
	color: var(--color-text);
	text-decoration: none;
	white-space: nowrap;
}
.fullscreen-image__btn:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
	text-decoration: none;
}

@media (max-width: 480px) {
	.fullscreen-image__btn {
		right: var(--space-md);
		bottom: var(--space-md);
		padding: var(--space-xs) var(--space-md);
	}
}

@media (min-width:1280px){
	
	.dffb-grid__inner{
	grid-column-end: 13;
grid-column-start: 1;
}
	
	
}



/* =========================================================================
 * STARTSEITE  – nächster Schritt
 * ===================================================================== */


.text-section {
		background-color: var(--color-bg);
	font-size: var(--fs-md);


	
}
	
	
.link-card{
	 border-radius: 10px;
	overflow: hidden;}	

.link-card__more {
	 opacity: 0;
	transform: translateY(-10px);
			transition: all 0.1s ease-in-out;

}	
.link-card:hover .link-card__more {
	 opacity: 1;
	transform: translateY(0px);
	transition: all 0.2s ease-in-out;
	text-decoration: none!important;	
}	
.link-card__title{
	font-size: 	var(--fs-smd) ;

}
.link-card__text{
	line-height: var(--lh-md);
}




/* =========================================================================
 * PAGES  
 * ===================================================================== */


.page .entry-title{
	font-size: var(--fs-h1);
	line-height: var(--lh-lg);
	text-align: center;
}

.entry-intro p{
	font-size: var(--fs-md);
	line-height: var(--lh-md);
		text-align: center;

}
.entry-header__top {
	position: relative;
}

.page .entry-header {
	padding-top: 2rem;
	position: relative;

}

.page .entry-header:before {
	height: calc(200% - 50px);
	width: 100%;
	position: absolute;
	top:-100%;
	left: 0px;
	content: '';
	display: block;
		background-color: var(--color-bg);

	
}

.page .entry-title{
	padding-bottom: 2rem;
}

.entry-title:has(+ .entry-intro) {
	padding-bottom: 0;
}

.page .entry-intro{
	padding-bottom: 2rem;
}
.entry-header__top{
	padding-bottom: 2rem;
}

/* Trifft .entry-header__top NUR, wenn direkt danach .entry-header__image folgt */
.entry-header__top:has(+ .entry-header__image) {
  padding-bottom: 0rem;
}

.entry-header__bottom{
	z-index: 9999;
}


.page .sidebar{
	z-index: 99999999;
	position: fixed;
	right: 20px;
	top:50%;
	background: var(--header-bg);
-webkit-backdrop-filter: blur(var(--header-blur));
backdrop-filter: blur(var(--header-blur));
border-radius: var(--header-radius);
border: 0.02em solid #000;
	padding: 20px;
	max-width: 16.66666%;
}

.sidebar h3{
	font-size: var(--fs-xs);
	letter-spacing: 0;
	font-weight: 100;
	
}
.sidebar__links-content a{
		transition: all 0.2s ease-in-out;

}
.sidebar__links-content a:hover{
	text-decoration: none;
	color: var(--color-bg);
	transform: translateX(3px);
	transition: all 0.2s ease-in-out;

}



.person__info p.more_person_info{
	font-size: 0.7rem;
	line-height: 1;
}








h2.team__title{
	letter-spacing: -0.02em;
	position: sticky;
	top:150px;
}



.Wysiwyg .wp-block-buttons .wp-block-button__link, .dffb-button, .dffb-button-alt, .dffb-button-red{
	border-width:0.05em;
}







	@media (max-width: 1400px) {
		.dffb-grid > div,
		.site-footer__inner{
			max-width:80%;
			margin-left:auto;
			margin-right:auto;
		}
		
		.site-header-grid{
			width: 80%;
		}
	}


	@media (max-width: 1000px) {

		.page .sidebar{position: relative;
		width: 100%;
	right: auto;
	left: auto;
	top: auto;
	max-width: 80%;
	grid-column-start: 1;
	grid-column-end: 13;
	margin: 0 auto;}
	}

@media (max-width: 760px) {

	.site-header-grid{
		max-width: calc(100% - 20px);
		width:  calc(100% - 20px);
	}
	
	h2.team__title{
		text-align: center;
	}
	
	.dffb-grid > div, .site-footer__inner{
		max-width: calc(100% - 20px);
	}
	
	.person--spoiler img{
		width: 100%;
	}
	
	
}




.page-id-41105 .events-section{
	display: none;
}


.film-nav.container {
	max-width: 100%;
}