/*
Theme Name: DRK-WP-Theme
Theme URI: https://kramp-it.de/drk-wp-theme
Author: DRK Ortsverein Dudweiler e.V. (Stefan Noß)
Author URI: https://www.drk-dudweiler.de
Description: Inoffizielles DRK-WordPress-Theme, basierend auf der TYPO3-Theme-Vorlage der Homepage des Deutschen Roten Kreuzes (www.drk.de). Farben und Farbcodes wurden nach bestem Wissen und Gewissen gemäß DRK-Styleguide übernommen. Funktionsumfang: Topbar, Sticky-Header, einstellbare Logo-Größe, individuell konfigurierbare Farben, eigenes Titelbild pro Seite/Beitrag, eigene Titelbeschreibung und Untertitel pro Seite/Beitrag – und noch vieles mehr. Hinweis: bisher nicht mit Elementor getestet, Nutzung auf eigenes Risiko. Feedback, Verbesserungsvorschläge und Bug-Reports gerne über das Kontaktformular unter https://www.drk-dudweiler.de.
Version: 1.6.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: drk-wp-theme
Tags: custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, threaded-comments, translation-ready, one-column, two-columns, right-sidebar, left-sidebar, wide-blocks, block-styles

Dieses Theme ist eine eigenständige Neuentwicklung. Es orientiert sich im Funktionsumfang
(Customizer-Struktur, Header-Builder, Seiten-Titelbereich mit Titelbild je Beitrag/Seite,
Breadcrumbs, Footer-Widget-Spalten) an den Themes OceanWP und dem Plugin Ocean Extra,
verwendet aber keinen Code daraus. Optisch ist es an das Layout von drk.de angelehnt.
*/

/* ---------------------------------------------------
   1. CSS-Variablen / Farbschema (Standard: DRK-Farben)
--------------------------------------------------- */
:root{
	--drk-red: #e60005;
	--drk-red-dark: #b80004;
	--drk-red-darker: #910003;
	--drk-black: #1a1a1a;
	--drk-grey-dark: #333333;
	--drk-grey: #666666;
	--drk-grey-light: #f2f2f2;
	--drk-grey-border: #e0e0e0;
	--drk-white: #ffffff;

	--drk-header-bg: var(--drk-white);
	--drk-header-text: var(--drk-black);
	--drk-topbar-bg: var(--drk-black);
	--drk-topbar-text: var(--drk-white);
	--drk-topbar-hover-color: var(--drk-white);
	--drk-menu-bg: var(--drk-red);
	--drk-menu-text: var(--drk-white);
	--drk-menu-text-hover: var(--drk-white);
	--drk-menu-dropdown-bg: var(--drk-white);
	--drk-menu-active-color: #5c0002;
	--drk-title-bg: var(--drk-grey-dark);
	--drk-title-text: var(--drk-white);
	--drk-link-color: var(--drk-red);
	--drk-button-bg: var(--drk-red);
	--drk-button-text: var(--drk-white);
	--drk-button-hover-bg: var(--drk-red-dark);
	--drk-pagination-bg: var(--drk-red);
	--drk-pagination-text: var(--drk-white);
	--drk-pagination-hover: var(--drk-red-dark);
	--drk-footer-bg: var(--drk-red);
	--drk-footer-text: #f2d9dc;
	--drk-footer-bottom-bg: var(--drk-red);
	--drk-footer-bottom-text: #f2d9dc;
	--drk-body-font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--drk-heading-font: "Roboto Condensed", "Roboto", Arial, sans-serif;
	--drk-container-width: 1240px;
}

/* ---------------------------------------------------
   2. Reset & Basis
--------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
	margin: 0;
	font-family: var(--drk-body-font);
	font-size: 16px;
	line-height: 1.7;
	color: var(--drk-grey-dark);
	background: #fff;
}
img{ max-width: 100%; height: auto; }
a{ color: var(--drk-link-color); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus{ color: var(--drk-red-dark); }
h1,h2,h3,h4,h5,h6{
	font-family: var(--drk-heading-font);
	color: var(--drk-black);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 .6em;
}
ul,ol{ padding-left: 1.4em; }
table{ width: 100%; border-collapse: collapse; }

.screen-reader-text{
	position: absolute !important;
	clip: rect(1px,1px,1px,1px);
	width: 1px; height: 1px; overflow: hidden;
}
.screen-reader-text:focus{
	background:#fff; color:#000; display:block; height:auto; width:auto;
	padding:15px 23px; z-index:100000; top:5px; left:5px; clip:auto;
}

.container{
	max-width: var(--drk-container-width);
	margin: 0 auto;
	padding: 0 20px;
}
/* "Full-Bleed"-Technik: bricht ein Element unabhängig von jedem
   übergeordneten, breitenbegrenzten Container auf die volle Fensterbreite
   aus (für Bereiche mit Breiten-Einstellung "Volle Seitenbreite"/"Manuelle
   Breite" wie Teaser-Kacheln und Bevölkerungswarnungen). */
.drk-full-bleed{
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
/* Vollbreite-Bereiche sind mit 100vw angelegt, und 100vw rechnet die Breite des
   senkrechten Scrollbalkens mit: Der Bereich ragt dadurch um die halbe
   Scrollbalkenbreite (ca. 8 px) über den sichtbaren Rand hinaus und es entsteht ein
   waagerechter Scrollbalken. Der Überstand wird am Inhaltsbereich abgeschnitten.
   "clip" statt nur "hidden": erzeugt keinen eigenen Scroll-Container (Sticky-Elemente
   und Scrollverhalten bleiben unberührt); "hidden" davor ist der Rückfall für ältere
   Browser. Ohne Scrollbalken (Smartphone, Overlay-Scrollbalken) hat das keine Wirkung. */
.site-content{ overflow-x:hidden; overflow-x:clip; }
.main-nav-inner-full{ width:100%; padding:0 20px; }
.site-content-inner{ padding: 50px 0; }

/* Buttons */
/* Theme-Buttons (Klassen .btn und Block-Buttons): feste Optik. Die Textfarbe ist
   hier bewusst "!important", weil bei Link-Buttons sonst die Link-Farbe
   (a:hover) durchschlägt. */
.btn, .wp-block-button__link{
	display: inline-block;
	background: var(--drk-button-bg);
	color: var(--drk-button-text) !important;
	border: none;
	border-radius: 3px;
	padding: 12px 26px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: 14px;
	cursor: pointer;
	transition: background .15s ease;
}
.btn:hover, .wp-block-button__link:hover{ background: var(--drk-button-hover-bg); }

/* Allgemeine <button> und <input type="submit"> (z. B. Kommentarformular, Buttons
   von Plugins): dieselbe Optik, aber nur als STANDARD – mit Spezifität 0 (:where)
   und ohne !important. Bringt ein Plugin eigene Stile mit (z. B. "The Events
   Calendar": Text in der Akzentfarbe), haben diese Vorrang. Vorher überstimmte die
   Theme-Textfarbe (!important) die Plugin-Farbe: Text weiß auf weißem Grund. */
:where(button, input[type="submit"]){
	display: inline-block;
	background: var(--drk-button-bg);
	color: var(--drk-button-text);
	border: none;
	border-radius: 3px;
	padding: 12px 26px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: 14px;
	cursor: pointer;
	transition: background .15s ease;
}
:where(button:hover, input[type="submit"]:hover){ background: var(--drk-button-hover-bg); }

.drk-richtext p{ margin: 0 0 1em; }
.drk-richtext p:last-child{ margin-bottom: 0; }
.drk-richtext ul, .drk-richtext ol{ margin: 0 0 1em 1.2em; padding: 0; }
.drk-richtext strong{ font-weight: 700; }
.drk-richtext em{ font-style: italic; }
.drk-richtext u{ text-decoration: underline; }

/* ---------------------------------------------------
   3. Topbar
--------------------------------------------------- */
.drk-topbar{
	background: var(--drk-topbar-bg);
	color: var(--drk-topbar-text);
	font-size: 13px;
}
.drk-topbar .container{ min-height: 38px; position:relative; }
.drk-topbar a{ color: var(--drk-topbar-text); opacity:.85; }
.drk-topbar a:hover{ opacity:1; color: var(--drk-topbar-hover-color); }

/* Topbar in drei frei anordenbare Slots (Text / Menü / Button) gegliedert –
   Reihenfolge & Position steuerbar über "Topbar Menü Darstellung". Bewusst
   als Flexbox mit fester Drittel-Breite + "order" umgesetzt (nicht als
   CSS-Grid), damit garantiert niemals in eine zweite Zeile umgebrochen wird. */
.drk-topbar-row{ display:flex; flex-wrap:nowrap; align-items:center; gap:16px; }
.drk-topbar-slot{ display:flex; align-items:center; min-width:0; }
.drk-topbar-slot.slot-text,
.drk-topbar-slot.slot-button{ flex:0 1 auto; }
.drk-topbar-slot.slot-menu{ flex:1 1 auto; min-width:0; }
.drk-topbar-slot.slot-text{ order:1; justify-content:flex-start; }
.drk-topbar-slot.slot-menu{ order:2; justify-content:center; }
.drk-topbar-slot.slot-button{ order:3; justify-content:flex-end; }

/* Layout 1 (Standard): text=links / menu=Mitte / button=rechts – bereits
   über die Basisregeln .slot-text/.slot-menu/.slot-button abgedeckt. */

/* Layout 2: Text rechts / Menü Mitte / Button links */
.drk-topbar-row.layout-2 .slot-button{ order:1; justify-content:flex-start; }
.drk-topbar-row.layout-2 .slot-menu{ order:2; justify-content:center; }
.drk-topbar-row.layout-2 .slot-text{ order:3; justify-content:flex-end; }

/* Layout 3: Menü links / Text Mitte / Button rechts */
.drk-topbar-row.layout-3 .slot-menu{ order:1; justify-content:flex-start; }
.drk-topbar-row.layout-3 .slot-text{ order:2; justify-content:center; }
.drk-topbar-row.layout-3 .slot-button{ order:3; justify-content:flex-end; }

/* Layout 4: Menü links / Button Mitte / Text rechts */
.drk-topbar-row.layout-4 .slot-menu{ order:1; justify-content:flex-start; }
.drk-topbar-row.layout-4 .slot-button{ order:2; justify-content:center; }
.drk-topbar-row.layout-4 .slot-text{ order:3; justify-content:flex-end; }

/* Layout 5: Menü rechts / Button Mitte / Text links */
.drk-topbar-row.layout-5 .slot-text{ order:1; justify-content:flex-start; }
.drk-topbar-row.layout-5 .slot-button{ order:2; justify-content:center; }
.drk-topbar-row.layout-5 .slot-menu{ order:3; justify-content:flex-end; }

/* Layout 6: Menü rechts / Text Mitte / Button links */
.drk-topbar-row.layout-6 .slot-button{ order:1; justify-content:flex-start; }
.drk-topbar-row.layout-6 .slot-text{ order:2; justify-content:center; }
.drk-topbar-row.layout-6 .slot-menu{ order:3; justify-content:flex-end; }

.topbar-menu{ list-style:none; display:flex; flex-wrap:nowrap; align-items:center; margin:0; padding:0; position:relative; min-width:0; }
.topbar-menu li{ margin:0; padding:0; position:relative; }
.topbar-menu li:not(:last-child)::after{ content:"|"; display:inline-block; margin:0 10px; color:rgba(255,255,255,.4); }
.topbar-menu > li > a{ display:inline-block; padding:2px 0; }

/* Untermenüs im Topbar-Menü – gleiches Erscheinungsbild wie im Hauptmenü */
.topbar-menu ul{
	display:none; position:absolute; top:100%; left:0; min-width:220px;
	background: var(--drk-menu-dropdown-bg); box-shadow:0 8px 24px rgba(0,0,0,.15);
	padding:8px 0; border-top:3px solid var(--drk-red); z-index:60; list-style:none; margin:0;
}
.topbar-menu li:hover > ul{ display:block; }
.topbar-menu ul li{ padding:0; }
.topbar-menu ul li::after{ content:none; }
.topbar-menu ul li a{
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	padding:8px 16px; color: var(--drk-black); opacity:1; text-transform:none; font-weight:600; font-size:13px;
}
.topbar-menu ul li a:hover{ color: var(--drk-red); }
.topbar-menu ul ul{ top:0; left:100%; }
.drk-topbar-slot.slot-button .btn{ padding: 8px 16px; font-size:12px; opacity:1; }

/* ---------------------------------------------------
   4. Header
--------------------------------------------------- */
.site-header{ background: var(--drk-header-bg); color: var(--drk-header-text); position: relative; z-index: 50; }
.site-header.is-sticky{ position: sticky; top:0; box-shadow: 0 2px 10px rgba(0,0,0,.08); }

/* Obere Zeile: Logo links, Suche + mobiler Menü-Button rechts */
.header-top-row{ display:flex; align-items:center; justify-content:space-between; padding: 18px 0; gap: 24px; flex-wrap:wrap; }
.header-top-row.logo-align-right{ flex-direction:row-reverse; }
.site-branding{ display:flex; align-items:center; gap:12px; }
.site-branding img{ display:block; max-height: var(--drk-logo-height, 54px); width:auto; }
/* Logo-Slider: alle Logos liegen übereinander in derselben Rasterzelle, die
   Zelle passt sich dem größten Logo an. */
.site-branding .custom-logo-link{ display:block; }
.site-logo-slider{ display:grid; overflow:hidden; align-items:center; justify-items:start; }
.site-logo-slide{ grid-area:1 / 1; display:block; opacity:0; transition: opacity .8s ease; }
.site-logo-slide.is-active{ opacity:1; }
.site-title{ font-size: 24px; margin:0; font-weight:800; }
.site-title a{ color: var(--drk-header-text); }
.site-description{ margin:0; font-size:12px; color: var(--drk-grey); }

.header-top-actions{ display:flex; align-items:center; gap:16px; }
.header-search-inline .search-form{ max-width:320px; margin:0; }

/* Zweite Zeile: volle Breite für das Hauptmenü */
.main-navigation-bar{ background: var(--drk-menu-bg); }

/* Hauptmenü: bis zu 6 Punkte nebeneinander, weitere brechen in eine neue Zeile um */
.main-navigation{ width:100%; }
.main-navigation ul{ list-style:none; margin:0; padding:0; }
.main-navigation > ul{ display:grid; grid-template-columns: repeat(var(--drk-menu-columns, 6), 1fr); column-gap:4px; }
.main-navigation li{ position:relative; }
.main-navigation > ul > li > a{
	display:flex; align-items:center; justify-content:center; gap:6px; padding: 15px 12px; color: var(--drk-menu-text);
	font-family: var(--drk-heading-font); font-weight:700; text-transform:uppercase; font-size:14.5px; letter-spacing:normal; text-align:center;
	border-bottom:3px solid transparent; border-radius:2px;
	transition: background-color .15s ease, border-color .15s ease, opacity .15s ease, transform .15s ease;
}

/* Mouseover-Effekte Hauptmenü – Auswahl unter "Hauptmenü (Mitte)".
   Wirken NUR beim Überfahren (die Hervorhebung des aktiven Menüs steuert die
   separate Einstellung "Hervorhebung aktives Menü"). */
.main-navigation.hover-underline > ul > li > a:hover{ border-bottom-color: var(--drk-menu-text-hover); }
.main-navigation.hover-fill > ul > li > a:hover{ background: rgba(255,255,255,.16); }
.main-navigation.hover-fade > ul > li > a:hover{ opacity:.65; }
.main-navigation.hover-slide > ul > li > a:hover{ transform: translateY(-3px); }
.main-navigation.hover-zoom > ul > li > a:hover{ transform: scale(1.08); }

/* Derselbe Effekt in den Untermenüs (an helle Dropdown-Flächen angepasst:
   Unterstreichen/Fläche in dunkleren Tönen, "Schieben" seitlich statt nach oben). */
.main-navigation.hover-underline ul ul li > a:hover{ box-shadow: inset 0 -2px 0 0 var(--drk-red); }
.main-navigation.hover-fill ul ul li > a:hover{ background: rgba(0,0,0,.06); }
.main-navigation.hover-fade ul ul li > a:hover{ opacity:.65; }
.main-navigation.hover-slide ul ul li > a:hover{ transform: translateX(4px); }
.main-navigation.hover-zoom ul ul li > a:hover{ transform: scale(1.04); transform-origin: left center; }

/* Hervorhebung des aktiven Hauptmenüpunkts – auch wenn man sich in einem seiner
   Untermenüs befindet (z. B. "Wir über uns" bei "Verein" oder "Mitglieder"). */
.main-navigation.active-underline > ul > li.current-menu-item > a,
.main-navigation.active-underline > ul > li.current-menu-ancestor > a,
.main-navigation.active-underline > ul > li.current-page-ancestor > a,
.main-navigation.active-underline > ul > li.current_page_ancestor > a{
	border-bottom-color: var(--drk-menu-active-color);
}
.main-navigation.active-fill > ul > li.current-menu-item > a,
.main-navigation.active-fill > ul > li.current-menu-ancestor > a,
.main-navigation.active-fill > ul > li.current-page-ancestor > a,
.main-navigation.active-fill > ul > li.current_page_ancestor > a{
	background-color: var(--drk-menu-active-color);
}
.main-navigation.active-half > ul > li.current-menu-item > a,
.main-navigation.active-half > ul > li.current-menu-ancestor > a,
.main-navigation.active-half > ul > li.current-page-ancestor > a,
.main-navigation.active-half > ul > li.current_page_ancestor > a{
	background-image: linear-gradient(to top, var(--drk-menu-active-color) 50%, transparent 50%);
}

.main-navigation ul ul{
	display:none; position:absolute; top:100%; left:0; min-width:230px;
	background: var(--drk-menu-dropdown-bg); box-shadow:0 8px 24px rgba(0,0,0,.18);
	padding:8px 0; border-top:3px solid var(--drk-red); z-index:60; text-align:left;
}
.main-navigation ul li:hover > ul{ display:block; }
.main-navigation ul ul li a{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:10px 18px; text-transform:none; font-weight:600; font-size:14px; color: var(--drk-black);
}
/* weiche Übergänge für die Mouseover-Effekte der Untermenü-Links */
.main-navigation ul ul li a{ transition: color .15s ease, background-color .15s ease, box-shadow .15s ease, opacity .15s ease, transform .15s ease; }
.main-navigation ul ul li a:hover{ color: var(--drk-red); }
.main-navigation ul ul ul{ top:0; left:100%; }

/* Animationseffekt beim Öffnen/Schließen der Dropdown-Untermenüs (Desktop).
   "Erscheinen" (Standard) nutzt weiterhin die einfache Anzeige ohne Animation.
   Rollen: transform statt clip-path, damit Fly-outs der 3. Ebene nicht
   abgeschnitten werden. Das Schließen läuft jeweils umgekehrt ab; visibility
   wird verzögert umgeschaltet, damit die Ausblendung sichtbar zu Ende läuft. */
@media (min-width: 901px){
	.main-navigation.submenu-fx-fade ul ul,
	.main-navigation.submenu-fx-roll-down ul ul,
	.main-navigation.submenu-fx-roll-right ul ul{
		display:block; visibility:hidden; pointer-events:none;
	}
	.main-navigation.submenu-fx-fade ul ul{
		opacity:0;
		transition: opacity .25s ease, visibility 0s linear .25s;
	}
	.main-navigation.submenu-fx-roll-down ul ul{
		transform: scaleY(0); transform-origin: top center;
		transition: transform .25s ease, visibility 0s linear .25s;
	}
	.main-navigation.submenu-fx-roll-right ul ul{
		transform: scaleX(0); transform-origin: left center;
		transition: transform .25s ease, visibility 0s linear .25s;
	}
	.main-navigation.submenu-fx-fade ul li:hover > ul,
	.main-navigation.submenu-fx-roll-down ul li:hover > ul,
	.main-navigation.submenu-fx-roll-right ul li:hover > ul{
		visibility:visible; pointer-events:auto;
	}
	.main-navigation.submenu-fx-fade ul li:hover > ul{ opacity:1; transition: opacity .25s ease, visibility 0s; }
	.main-navigation.submenu-fx-roll-down ul li:hover > ul{ transform: scaleY(1); transition: transform .25s ease, visibility 0s; }
	.main-navigation.submenu-fx-roll-right ul li:hover > ul{ transform: scaleX(1); transition: transform .25s ease, visibility 0s; }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce){
	.main-navigation.submenu-fx-fade ul ul,
	.main-navigation.submenu-fx-roll-down ul ul,
	.main-navigation.submenu-fx-roll-right ul ul,
	.main-navigation.submenu-fx-fade ul li:hover > ul,
	.main-navigation.submenu-fx-roll-down ul li:hover > ul,
	.main-navigation.submenu-fx-roll-right ul li:hover > ul{ transition:none; }
}
.dropdown-arrow{ display:inline-flex; align-items:center; opacity:.85; flex-shrink:0; }
.dropdown-arrow svg{ display:block; }
.dropdown-arrow-right{ margin-left:auto; }

.menu-toggle{
	display:none; background:none; border:none; cursor:pointer;
	align-items:center; gap:9px; padding:8px 10px; border-radius:3px;
	color: var(--drk-header-text) !important; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.03em;
}
.topbar-menu-toggle{ color: var(--drk-topbar-text) !important; padding:6px 8px; }
.menu-toggle-icon{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:24px; height:16px; flex-shrink:0; }
.menu-toggle-bar{
	display:block; width:24px; height:3px; border-radius:2px; background:currentColor;
	transition: transform .3s ease, opacity .2s ease;
}
.menu-toggle.is-open .menu-toggle-bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.menu-toggle.is-open .menu-toggle-bar:nth-child(2){ opacity:0; }
.menu-toggle.is-open .menu-toggle-bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1100px){
	.main-navigation > ul{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px){
	.menu-toggle{ display:flex; }
	.header-top-row{ flex-direction:column; align-items:stretch; }
	.header-top-actions{ flex-direction:column; align-items:center; width:100%; gap:10px; margin-top:12px; }
	.header-search-inline{ width:100%; }
	.header-search-inline .search-form{ max-width:none; width:100%; }
	.main-navigation{
		max-height:0; overflow:hidden; opacity:0;
		transition: max-height .35s ease, opacity .3s ease;
	}
	.main-navigation.is-open{ opacity:1; }
	.main-navigation > ul{ display:flex; flex-direction:column; align-items:stretch; padding:6px 0; }
	.main-navigation > ul > li > a{ justify-content:space-between; text-align:left; }

	/* Untermenüs auf Touch-Geräten: kein Hover, stattdessen per Klick auf-/zuklappbar */
	.main-navigation ul ul{ display:none !important; position:static; box-shadow:none; padding-left:16px; border-top:none; }
	.main-navigation li.is-submenu-open > ul{ display:block !important; }
	.dropdown-arrow{ transition: transform .25s ease; }
	.main-navigation li.is-submenu-open > a > .dropdown-arrow-down,
	.main-navigation li.is-submenu-open > a > .dropdown-arrow-right{ transform: rotate(180deg); }

	/* Topbar-Menü: genau wie das Hauptmenü als ausklappbares Panel – über die
	   gesamte Container-Breite positioniert, unabhängig vom gewählten
	   Topbar-Layout (Slot-Reihenfolge). */
	.topbar-menu{
		position:absolute; top:100%; left:0; width:100%;
		flex-direction:column; flex-wrap:nowrap; align-items:stretch;
		background: var(--drk-topbar-bg);
		max-height:0; overflow:hidden; opacity:0;
		transition: max-height .35s ease, opacity .3s ease;
		padding:0 20px; z-index:70;
	}
	.topbar-menu.is-open{ opacity:1; padding:6px 20px 10px; }
	.topbar-menu > li{ width:100%; }
	.topbar-menu > li > a{ padding:9px 0; }
	.topbar-menu li:not(:last-child)::after{ content:none; }
	.topbar-menu > li:not(:last-child){ border-bottom:1px solid rgba(255,255,255,.15); }
	.topbar-menu ul{ display:none !important; position:static; box-shadow:none; padding-left:16px; border-top:none; background:transparent; }
	.topbar-menu li.is-submenu-open > ul{ display:block !important; }
	.topbar-menu ul li a{ color: var(--drk-topbar-text) !important; opacity:.85; }
	.topbar-menu li.is-submenu-open > a > .dropdown-arrow-down,
	.topbar-menu li.is-submenu-open > a > .dropdown-arrow-right{ transform: rotate(180deg); }
}

/* ---------------------------------------------------
   5. Seitentitel / Page-Header (Ocean-Extra-Style, pro Seite einstellbar)
--------------------------------------------------- */
.page-header-area{
	background-color: var(--drk-title-bg);
	background-size: cover;
	background-position: center;
	color: var(--drk-title-text);
	padding: 60px 0;
	text-align: center;
	position: relative;
}
.page-header-area.has-overlay::before{
	content:""; position:absolute; inset:0; background: rgba(0,0,0,.45); z-index:1;
}
.page-header-area .page-header-inner{ position:relative; z-index:2; }
.page-header-video, .page-header-slider{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.page-header-video{ width:100%; height:100%; object-fit:cover; }
.page-header-slide{
	position:absolute; inset:0; background-size:cover; opacity:0; z-index:1;
	transition: opacity .8s ease;
}
.page-header-slide.is-active{ opacity:1; z-index:2; }
.page-header-area h1{ color: var(--drk-title-text); margin:0 0 10px; font-size: 38px; }
.page-header-area .page-subtitle{ font-size:18px; opacity:.9; margin:0; }
.page-header-area.align-left{ text-align:left; }
.page-header-area.size-small{ padding: 30px 0; }
.page-header-area.size-large{ padding: 110px 0; }

/* Breadcrumbs */
.drk-breadcrumbs{ font-size:13px; margin-top:14px; opacity:.9; }
.drk-breadcrumbs a{ color: inherit; text-decoration:underline; }
.drk-breadcrumbs .drk-breadcrumb-home{ text-decoration:none; display:inline-flex; align-items:center; vertical-align:-2px; }
.drk-breadcrumbs .sep{ margin:0 6px; }

/* ---------------------------------------------------
   6. Layout: Content + Sidebar
--------------------------------------------------- */
.content-area-wrap{ display:flex; gap:40px; align-items:flex-start; }
.content-area{ flex:1; min-width:0; }
.widget-area{ width: 320px; flex-shrink:0; }
.layout-none .widget-area{ display:none; }
.layout-none .content-area{ width:100%; }
.layout-left .content-area-wrap{ flex-direction:row-reverse; }
.layout-full-width .container{ max-width:100%; padding:0; }

@media (max-width: 800px){
	.content-area-wrap{ flex-direction:column; }
	/* Spaltenlayout: Breite = Seitenbreite statt inhaltsabhängig, sonst dehnen breite
	   Inhalte (Karussell, große Tabellen) die ganze Seite seitlich auf. */
	.content-area{ width:100%; }
	.widget-area{ width:100%; }
}

.widget{ margin-bottom:34px; }
.widget-title{
	font-size:16px; text-transform:uppercase; letter-spacing:.03em;
	border-bottom:3px solid var(--drk-red); padding-bottom:10px; margin-bottom:16px;
}
.widget ul{ list-style:none; padding:0; margin:0; }
.widget ul li{ padding:6px 0; border-bottom:1px solid var(--drk-grey-border); }

/* ---------------------------------------------------
   7. Blog / Loop / Cards
--------------------------------------------------- */
.post-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:34px; }
.post-card{
	flex:1 1 280px; max-width:360px;
	border:1px solid var(--drk-grey-border); border-radius:4px; overflow:hidden; background:#fff;
	transition: box-shadow .2s ease, transform .2s ease;
}
.post-card:hover{
	box-shadow: 0 4px 16px rgba(0,0,0,.12);
	transform: translateX(4px);
}
.post-card .post-thumb img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.post-card .post-card-body{ padding:20px; }
.post-card .post-meta{ font-size:12px; color:var(--drk-grey); text-transform:uppercase; letter-spacing:.03em; margin-bottom:8px; }
.post-card .post-meta-bottom{ margin-bottom:10px; }

.post-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.post-meta-top{ margin-bottom:8px; }
.post-meta-bottom{ margin-bottom:10px; }
.post-meta-item{ display:inline-flex; align-items:center; gap:5px; cursor:default; }
.post-meta-item svg{ flex-shrink:0; opacity:.75; }
.post-meta-text{ white-space:nowrap; }
.post-card h2{ font-size:20px; margin-bottom:10px; }
.post-card h2 a{ color: var(--drk-black); }
.post-card h2 a:hover{ color: var(--drk-red); }

/* Seitenzahlen als Zahl im Kreis – für die Seitennavigation der Beitragslisten
   (.pagination) UND den Seitenumbruch innerhalb eines Beitrags/einer Seite
   (.page-links). Farben aus "DRK Theme Einstellungen" > "Farben" > "Seitenzahl Farben". */
.pagination{ display:flex; gap:8px; margin-top:40px; flex-wrap:wrap; }
/* Seitenzahlen eines Beitrags mit Seitenumbruch: als eigene, klar abgesetzte Leiste
   (Linien oben und unten, großzügiger Abstand zum Beitragstext), damit man sieht,
   wo der Inhalt endet und die Seiten-Navigation beginnt. */
.page-links{
	display:flex; align-items:center; flex-wrap:wrap; gap:8px;
	margin:44px 0 0; padding:16px 4px;
	border-top:2px solid var(--drk-grey-border); border-bottom:2px solid var(--drk-grey-border);
	font-weight:700;
}

.pagination a.page-numbers,
.pagination span.page-numbers,
.page-links .post-page-numbers{
	display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
	min-width:40px; height:40px; padding:0 6px;
	border:2px solid var(--drk-pagination-bg); border-radius:999px;
	background:transparent; color:var(--drk-pagination-bg);
	font-size:15px; font-weight:700; line-height:1; text-decoration:none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Mouseover/Tastatur-Fokus: der leere Kreis wird gefüllt */
.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible,
.page-links a.post-page-numbers:hover,
.page-links a.post-page-numbers:focus-visible{
	background:var(--drk-pagination-hover); border-color:var(--drk-pagination-hover); color:var(--drk-pagination-text);
}

/* aktive Seite: gefüllter Kreis */
.pagination span.page-numbers.current,
.page-links span.post-page-numbers.current{
	background:var(--drk-pagination-bg); border-color:var(--drk-pagination-bg); color:var(--drk-pagination-text);
}

/* "Zurück"/"Weiter": gleiche Optik, aber als längliche Kapsel (Text statt Zahl) */
.pagination a.page-numbers.prev,
.pagination a.page-numbers.next{ padding:0 18px; }

/* Auslassungspunkte "…": kein Kreis */
.pagination span.page-numbers.dots{ border-color:transparent; min-width:0; padding:0 2px; }

/* ===== Einzelbeitrag: "Das könnte auch interessant sein:" =====
   Abgehoben durch durchgehende Linie in der Primärfarbe UND hellen Hintergrund.
   Darin die letzten Beiträge als kleine Kacheln (gleiche Optik und gleicher
   Mouseover-Effekt wie die Teaser-Kacheln der Startseite); bei mehr Kacheln als
   Platz ist, wird seitlich geblättert. */
.drk-related{
	margin:48px 0 44px; padding:26px 22px 8px;
	background:var(--drk-grey-light);
	border-top:3px solid var(--drk-red); border-radius:0 0 6px 6px;
}
.drk-related-title{ margin:0 0 14px; font-size:21px; }
.drk-related-carousel{ position:relative; }

.drk-related-track{
	list-style:none; margin:0; padding:6px 10px 24px;
	display:flex; gap:16px;
	overflow-x:auto; scroll-snap-type:x proximity; scroll-padding:0 10px;
	-webkit-overflow-scrolling:touch;
}
.drk-related-carousel.is-enhanced .drk-related-track{ scrollbar-width:none; }
.drk-related-carousel.is-enhanced .drk-related-track::-webkit-scrollbar{ display:none; }
.drk-related-track:focus-visible{ outline:2px solid var(--drk-red); outline-offset:-2px; }

.drk-related-item{ flex:0 0 210px; margin:0; padding:0; border:0; scroll-snap-align:start; }
.drk-related-card{
	display:flex; flex-direction:column; height:100%;
	background:#fff; border:1px solid var(--drk-grey-border); border-radius:16px; overflow:hidden;
	color:inherit; text-decoration:none;
	transition: box-shadow .2s ease, transform .2s ease;
}
.drk-related-card:hover, .drk-related-card:focus-visible{
	box-shadow: 0 4px 16px rgba(0,0,0,.12);
	transform: translateX(4px);
}
.drk-related-card-body{ display:block; padding:12px 14px 14px; }
.drk-related-card-title{
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
	font-size:15px; font-weight:700; line-height:1.3; color:var(--drk-black);
}

/* Blätter-Pfeile im Stil der Bildergalerie: weiße, hohe Fläche am Rand, dünner Pfeil */
.drk-carousel-btn{
	position:absolute; top:50%; z-index:3; transform:translateY(-62%);
	display:flex; align-items:center; justify-content:center;
	width:28px; height:72px; margin:0; padding:0;
	background:#fff; color:#4a4a4a; border:0; border-radius:3px;
	box-shadow:0 1px 5px rgba(0,0,0,.2); cursor:pointer;
}
.drk-carousel-btn[hidden]{ display:none; }
.drk-carousel-btn:hover{ background:#f2f2f2; color:#111; }
.drk-carousel-btn:focus-visible{ outline:2px solid var(--drk-red); outline-offset:2px; }
.drk-carousel-prev{ left:0; }
.drk-carousel-next{ right:0; }

@media (max-width: 600px){
	.drk-related{ padding:22px 14px 4px; }
	.drk-related-item{ flex-basis:180px; }
	.drk-carousel-btn{ width:24px; height:60px; }
}

/* ---------------------------------------------------
   8. Footer
--------------------------------------------------- */
.site-footer{ background: var(--drk-footer-bg); color: var(--drk-footer-text); }
.footer-widgets{ display:grid; gap:34px; padding:60px 0; grid-template-columns: repeat(var(--drk-footer-cols, 4), 1fr); text-align: var(--drk-footer-align, left); }
.footer-widgets .widget-title{ color: var(--drk-footer-text); border-bottom-color: var(--drk-red); }
.footer-widgets a{ color: var(--drk-footer-text); }
.footer-widgets a:hover{ color:#fff; }
.footer-widgets ul li{ border-bottom-color: rgba(255,255,255,.08); }
@media (max-width: 900px){ .footer-widgets{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .footer-widgets{ grid-template-columns: 1fr; } }

.footer-bottom{ background: var(--drk-footer-bottom-bg); color: var(--drk-footer-bottom-text); padding:18px 0; font-size:13px; border-top:1px solid rgba(255,255,255,.2); }
.footer-bottom .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.footer-bottom a{ color: var(--drk-footer-bottom-text); }
.footer-social{ display:flex; gap:12px; }
.footer-social a{
	width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08);
	display:flex; align-items:center; justify-content:center; color:#fff; transition:background .15s ease;
}
.footer-social a:hover{ background:var(--drk-red); color:#fff; }
.footer-social a svg{ display:block; }

.footer-menu{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; margin:0; padding:0; }
.footer-menu li{ margin:0; padding:0; }
.footer-menu li a{ display:inline-block; text-decoration:none; transition: color .15s ease; }
.footer-menu li a:hover{ color:#ffffff; text-decoration:underline; }
.footer-menu li:not(:last-child)::after{ content:"|"; display:inline-block; margin:0 10px; color:rgba(255,255,255,.4); }

/* Back to top */
#drk-back-to-top{
	position:fixed; right:24px; bottom:24px; width:44px; height:44px; border-radius:50%;
	background: var(--drk-red); color:#fff; display:none; align-items:center; justify-content:center;
	box-shadow:0 4px 14px rgba(0,0,0,.25); z-index:99; border:none; cursor:pointer; font-size:18px;
}
#drk-back-to-top.is-visible{ display:flex; }

/* ---------------------------------------------------
   9. Comments / Forms
--------------------------------------------------- */
input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="search"], textarea, select{
	width:100%; padding:10px 12px; border:1px solid var(--drk-grey-border); border-radius:3px; font-family:inherit; font-size:15px;
}

/* Suchformular im Header: Eingabefeld + Button nebeneinander, mit kleinem Abstand */
.search-form{ display:flex; flex-wrap:nowrap; gap:6px; max-width:480px; margin:0 auto; }
.search-form .search-field{ flex:1 1 auto; width:auto; border-radius:3px; }
.search-form .search-submit{ flex:0 0 auto; border-radius:3px; margin:0; white-space:nowrap; }

@media (max-width: 420px){
	.search-form{ flex-wrap:wrap; }
	.search-form .search-field{ flex:1 1 100%; border-radius:3px; margin-bottom:8px; }
	.search-form .search-submit{ flex:1 1 100%; border-radius:3px; }
}
.comment-list{ list-style:none; padding:0; }
.comment-list li{ margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--drk-grey-border); }

/* Accessibility skip link already covered above */

/* ---------------------------------------------------
   10. Startseite (Hero Top / Aktuelles / Teaser / Hero Bottom)
--------------------------------------------------- */
.drk-home-hero{
	position: relative; color:#fff; padding:110px 0;
	background-size:cover; background-position:center;
}
.drk-home-hero:not(.has-image){ background-color: var(--drk-grey-dark); }
.drk-home-hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.drk-home-hero-inner{ position:relative; max-width:760px; }
.drk-home-hero-inner h1{ color:#fff; font-size:42px; margin-bottom:.5em; }
.drk-home-hero-text{ font-size:19px; }
.drk-home-btn-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:1em; }
.btn.btn-outline{ background:transparent; border:2px solid #fff; color:#fff !important; } /* Textfarbe fest weiß: die Variante liegt auf farbigen Flächen und folgt nicht der Standard-Button-Textfarbe */
.btn.btn-outline:hover{ background:var(--drk-button-hover-bg); border-color:var(--drk-button-hover-bg); }
.btn.btn-on-red{ background:#fff; color:var(--drk-red) !important; }
.btn.btn-on-red:hover{ background:var(--drk-button-hover-bg) !important; color:#fff !important; }

.drk-home-news{ background:var(--drk-red); padding:60px 0; }
/* Ausrichtungen im Aktuelles-Bereich (per Customizer; gelten nur hier, nicht auf Blog-/Archivseiten) */
.drk-home-news .post-card h2{ text-align:var(--drk-news-title-align, left); }
.drk-home-news .post-excerpt{ text-align:var(--drk-news-excerpt-align, left); }
.drk-home-news .post-card-actions{ text-align:var(--drk-news-btn-align, left); }
.drk-home-section-spaced{ margin-top:30px; }

/* Bevölkerungswarnungen (NINA) – Aufbau angelehnt an eine typische
   "Aktuelle Bevölkerungswarnungen"-Sektion: großer Titel, Untertitel,
   Status-Kacheln je Landkreis (grün = keine Warnung), Detailliste darunter. */
.drk-home-nina{ padding:60px 0; color:#fff; text-align:center; }
.drk-home-nina-title{ color:#fff; font-size:32px; margin-bottom:30px; }
.drk-home-nina-block{ margin-bottom:10px; }
.drk-home-nina-divider{ border:none; border-top:1px solid rgba(255,255,255,.25); margin:36px auto; max-width:900px; }
.drk-home-nina-subtitle{ font-weight:700; font-size:18px; max-width:900px; margin:0 auto 30px; }

.drk-home-nina-status-row{
	display:flex; flex-wrap:wrap; justify-content:center; gap:28px 34px; margin-bottom:26px;
}
.drk-home-nina-status-item{ display:flex; flex-direction:column; align-items:center; gap:10px; width:110px; }
.drk-home-nina-status-icon{
	width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
	box-shadow:0 3px 10px rgba(0,0,0,.25); flex-shrink:0;
}
.drk-home-nina-status-label{ font-weight:600; font-size:14px; line-height:1.3; }

.drk-home-nina-source{ font-size:12px; opacity:.85; margin:0 0 6px; }
.drk-home-nina-explainer{ font-size:11px; opacity:.7; margin:0; max-width:700px; margin-left:auto; margin-right:auto; }

.drk-home-nina-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; text-align:left; }
.drk-home-nina-item{
	background:rgba(255,255,255,.1); border-left:5px solid #fff; border-radius:0 4px 4px 0;
	padding:14px 18px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
}
.drk-home-nina-badge{
	color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
	padding:3px 9px; border-radius:20px; flex-shrink:0;
}
.drk-home-nina-headline{ font-weight:700; color:#fff; flex:1 1 260px; }
.drk-home-nina-headline:hover, .drk-home-nina-headline:focus{ color:#fff; text-decoration:underline; }
.drk-home-nina-source a, .drk-home-nina-source a:hover, .drk-home-nina-source a:focus{ color:#fff; text-decoration:underline; }
.drk-home-nina-meta{ font-size:12px; opacity:.85; flex-basis:100%; }

@media (max-width: 600px){
	.drk-home-nina-title{ font-size:24px; }
	.drk-home-nina-subtitle{ font-size:15px; }
	.drk-home-nina-status-item{ width:80px; }
	.drk-home-nina-status-icon{ width:46px; height:46px; }
}

.drk-home-news-title{ text-align:center; margin-bottom:34px; color:#fff; }

.drk-home-teasers{ padding:30px 20px; }
.drk-home-teasers-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }
.drk-home-teaser-card{
	flex:1 1 260px; max-width:340px; display:flex; flex-direction:column; border-radius:16px; overflow:hidden; border:1px solid var(--drk-grey-border); color:inherit;
	transition: box-shadow .2s ease, transform .2s ease;
}
.drk-home-teaser-card:hover, .drk-home-teaser-card:focus-within{
	box-shadow: 0 4px 16px rgba(0,0,0,.12);
	transform: translateX(4px);
}
.drk-home-teaser-img{ width:100%; height:220px; object-fit:cover; display:block; }
.drk-home-teaser-body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.drk-home-teaser-body h2{ font-size:22px; }
.drk-home-teaser-body .drk-richtext{ color:var(--drk-grey); }

.drk-home-cta{ background:var(--drk-red); color:#fff; padding:60px 0; text-align:center; }
.drk-home-cta h2{ color:#fff; }
.drk-home-cta-inner{ max-width:700px; }

@media (max-width: 700px){
	.drk-home-hero{ padding:60px 0; }
	.drk-home-hero-inner h1{ font-size:28px; }
	.drk-home-hero-text{ font-size:16px; }
	.drk-home-btn-row{ flex-direction:column; align-items:stretch; }
	.drk-home-btn-row .btn{ text-align:center; }

	.drk-home-news{ padding:40px 0; }
	.drk-home-teasers-grid{ flex-direction:column; align-items:stretch; }
	.drk-home-teaser-card{ max-width:none; }
	.drk-home-teaser-img{ height:180px; }

	.drk-home-cta{ padding:40px 0; }
}