/* ==========================================================================
   DJM Medienservice – Responsive Layout-Fixes
   --------------------------------------------------------------------------
   Ladereihenfolge (functions.php): style.css → djm-base.css → djm-layout.css,
   Version = filemtime, d. h. kein Cache-Problem nach Updates.
   Die Selektoren sind bewusst etwas spezifischer, damit sie auch dann greifen,
   wenn im Customizer noch altes "Zusätzliches CSS" steht (lädt danach).
   ========================================================================== */

:root {
	--djm-ink: #13223b;
	--djm-accent: #dc6915;
	--djm-paper: #f5f5f0;
	--djm-header-h: 66px;  /* Höhe der fixen Kopfzeile (Logo 60px breit) */
}
@media (min-width: 576px) {
	:root { --djm-header-h: 92px; } /* Logo 90px breit */
}

/* --------------------------------------------------------------------------
   1. Basis
   -------------------------------------------------------------------------- */

/* Mobil war die Grundschrift nur 14,4px (75 % Root) – jetzt 16px Fließtext */
@media (max-width: 767.98px) {
	html { font-size: 83.333%; }
}

/* Sicherheitsnetz gegen horizontales Scrollen (100vw-Slider, lange URLs …).
   "clip" erzeugt keinen Scroll-Container, fixe Elemente bleiben unberührt. */
#page { overflow-x: clip; }

.entry-content,
.page-content,
.entry-summary { overflow-wrap: break-word; }

.entry-content ul,
.entry-content ol { padding-left: 1.4em; }

/* --------------------------------------------------------------------------
   2. Kopfzeile
   Vorher: Body-Abstand (4,5rem) passte nicht zur Header-Höhe → Inhalte lagen
   15–38px unter dem Header; zwischen 576 und 767px rutschte der Menü-Button
   unter die Kopfzeile in den Inhalt.
   -------------------------------------------------------------------------- */

html body { padding-top: var(--djm-header-h); }
#masthead.site-header { padding: 0; }

#masthead .navbar.fixed-top {
	height: var(--djm-header-h);
	padding: 0;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}
#masthead .navbar.fixed-top > .dual-collapse2:first-child {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: auto !important;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}
#masthead .navbar.fixed-top > .dual-collapse2.collapse { display: none; }

#masthead .navbar .navbar-toggler.trigger {
	position: static;
	margin: 0 0 0 8px !important;
	padding: 10px;
	line-height: 1;
}
#masthead .navbar .navbar-brand {
	margin: 0;
	padding: 0;
}
#masthead .navbar .navbar-brand img {
	display: block;
	width: 60px;
	height: auto;
	margin: 0 !important;
}
@media (min-width: 576px) {
	#masthead .navbar .navbar-toggler.trigger { margin-left: 12px !important; }
	#masthead .navbar .navbar-brand img { width: 90px; }
}

/* Eingeloggt: Admin-Leiste nicht über die Kopfzeile legen */
@media (min-width: 783px) {
	.admin-bar #masthead .navbar.fixed-top { top: 32px; }
	.admin-bar #masthead .menuContainer { top: calc(var(--djm-header-h) + 32px); }
}
@media (min-width: 601px) and (max-width: 782.98px) {
	.admin-bar #masthead .navbar.fixed-top { top: 46px; }
	.admin-bar #masthead .menuContainer { top: calc(var(--djm-header-h) + 46px); }
}

/* --------------------------------------------------------------------------
   3. Overlay-Menü
   Vorher: startete fest bei 100px (Lücke unter dem mobilen Header),
   mobil ~200px hohe Kacheln + 12 leere Platzhalter-Kacheln.
   -------------------------------------------------------------------------- */

#masthead .menuContainer { top: var(--djm-header-h); }

#masthead .menuWrapper {
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--djm-ink);
}
#masthead .menuWrapper > .container-fluid > .row { align-content: flex-start; }

body.djm-menu-open { overflow: hidden; }

#masthead .menuContainer .link:focus-visible {
	outline: 3px solid var(--djm-accent);
	outline-offset: -3px;
}

@media (max-width: 767.98px) {
	#masthead .menuContainer.active .linkWrap,
	#masthead .menuContainer .linkWrap {
		min-height: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
	}
	#masthead .menuContainer .link {
		gap: 16px;
		padding: 12px 22px;
		font-size: 1.3rem;
		font-weight: 700;
		letter-spacing: .01em;
	}
	#masthead .menuContainer .link .icon {
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		font-size: 26px;
	}
}

/* --------------------------------------------------------------------------
   4. Überschriften & Abstände (mobil/tablet)
   :where() hält die Spezifität niedrig genug, dass Klassen wie .h5 und der
   Magazin-Slider ihre eigenen Größen behalten.
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
	#content h1:where(:not(.h2, .h3, .h4, .h5, .h6, .djm-slider *)) { font-size: 34px; }
	#content h2:where(:not(.h1, .h3, .h4, .h5, .h6, .djm-slider *)) { font-size: 28px; }
}
@media (min-width: 600px) and (max-width: 781.98px) {
	/* Spalten stehen hier nebeneinander → Titel in halber Breite */
	#content .wp-block-column h1:where(:not(.h2, .h3, .h4, .h5, .h6)) { font-size: 28px; line-height: 1.2; }
}
@media (max-width: 781.98px) {
	/* keine automatische Silbentrennung in Titeln ("Ka-arst"), nur Notumbruch */
	#content :where(h1, h2, h3, h4):where(:not(.djm-slider *)) { overflow-wrap: break-word; }
}
@media (max-width: 575.98px) {
	#content :where(h1, h2, h3, h4):where(:not(.djm-slider *)) {
		margin-top: 32px;
		margin-bottom: 16px;
	}
	/* skaliert leicht mit, damit lange Wörter wie "Öffentlichkeitsarbeit" auch bei 360px passen */
	#content h1:where(:not(.h2, .h3, .h4, .h5, .h6, .djm-slider *)) {
		font-size: min(28px, 7.3vw);
		line-height: 1.2;
		padding-bottom: 8px;
	}
	#content h2:where(:not(.h1, .h3, .h4, .h5, .h6, .djm-slider *)) { font-size: min(23px, 6.2vw); line-height: 1.25; }
	#content h3:where(:not(.h1, .h2, .h4, .h5, .h6, .djm-slider *)) { font-size: 20px; }
}

@media (max-width: 767.98px) {
	/* feste Abstandhalter aus dem Editor (71px, 100px …) auf Mobilgeräten deckeln */
	.entry-content .wp-block-spacer { max-height: 32px; }
}

/* --------------------------------------------------------------------------
   5. Bilder & Spalten
   -------------------------------------------------------------------------- */

/* Einzelbilder (z. B. Mediadaten-Karte, Teamfoto) mittig statt linksbündig */
.entry-content > figure.wp-block-image:not(.alignleft):not(.alignright) { text-align: center; }

/* Tablet hochkant (600–781px): Spalten nebeneinander lassen statt riesig stapeln */
@media (min-width: 600px) and (max-width: 781.98px) {
	.entry-content .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: nowrap !important; }
	.entry-content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
		min-width: 0;
	}
}

/* Smartphone: bei Bild/Text-Spalten immer Bild zuerst – sonst landen bei
   abwechselnden Layouts (Team, Empfehlungen) zwei Fotos untereinander
   und die Texte stehen beim falschen Foto. */
@media (max-width: 599.98px) {
	.entry-content .wp-block-columns { gap: 1.25em; }
	.entry-content .wp-block-column:has(> .wp-block-image) { order: -1; }
	.entry-content .wp-block-column > .wp-block-image,
	.entry-content .wp-block-column > figure.wp-block-image { text-align: center; }
	.entry-content .wp-block-column .wp-block-image img { max-width: min(100%, 340px); }
}

/* --------------------------------------------------------------------------
   6. Startseite
   -------------------------------------------------------------------------- */

/* Smartphone/Tablet: Überschriften ("Was wir können" …) und Symbol-Kacheln
   stehen im Editor in zwei getrennten Spalten-Blöcken → mobil kamen erst
   4 Titel, dann 4 Symbole ohne Titel. Hier paarweise im 2er-Raster. */
@media (max-width: 781.98px) {
	.home #content .entry-content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 14px;
	}
	/* Clearfix-Pseudoelemente würden sonst eine Rasterzelle belegen */
	.home #content .entry-content::before,
	.home #content .entry-content::after { display: none; }
	.home #content .entry-content > * {
		grid-column: 1 / -1;
		min-width: 0;
	}
	.home #content .entry-content > .wp-block-columns:has(h2.h5),
	.home #content .entry-content > .wp-block-columns:has(h2.h5) + .wp-block-columns { display: contents; }

	.home #content .entry-content > .wp-block-columns:has(h2.h5) > .wp-block-column,
	.home #content .entry-content > .wp-block-columns:has(h2.h5) + .wp-block-columns > .wp-block-column {
		grid-column: auto;
		min-width: 0;
	}
	.home #content .entry-content > .wp-block-columns:has(h2.h5) > .wp-block-column { align-self: end; }
	.home #content .entry-content > .wp-block-columns:has(h2.h5) > .wp-block-column:nth-child(-n+2) { order: 1; }
	.home #content .entry-content > .wp-block-columns:has(h2.h5) + .wp-block-columns > .wp-block-column:nth-child(-n+2) { order: 2; }
	.home #content .entry-content > .wp-block-columns:has(h2.h5) > .wp-block-column:nth-child(n+3) { order: 3; }
	.home #content .entry-content > .wp-block-columns:has(h2.h5) + .wp-block-columns > .wp-block-column:nth-child(n+3) { order: 4; }
	.home #content .entry-content > .wp-block-columns:has(h2.h5) + .wp-block-columns ~ * { order: 5; }

	.home #content .entry-content > .wp-block-columns:has(h2.h5) h2.h5 {
		margin: 22px 0 8px;
		font-size: 16px;
		line-height: 1.25;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	.home #content .entry-content > .wp-block-columns:has(h2.h5) + .wp-block-columns .wp-block-image { margin: 0; }
	.home #content .entry-content > .wp-block-columns:has(h2.h5) + .wp-block-columns .wp-block-image img {
		width: 100%;
		max-width: 100%;
	}
}

/* Magazin-Slider (Plugin djm-magazin-slider): unter 768px skalierte der Text
   proportional auf 9–15px. Mobil jetzt: Bild oben, Text + Button darunter. */
@media (max-width: 767.98px) {
	.djm-slider .djm-slider__slide { height: auto; }
	.djm-slider .djm-slider__image {
		position: relative;
		inset: auto;
		height: auto;
		aspect-ratio: 1364 / 1066;
		object-fit: cover;
	}
	.djm-slider .djm-slider__copy {
		position: relative;
		inset: auto;
		height: auto;
		padding: 18px 16px 4px;
		text-align: center;
		pointer-events: auto;
	}
	.djm-slider .djm-slider__copy h2 {
		position: static;
		width: auto;
		margin: 0 0 14px;
		font-size: 21px;
		line-height: 1.2;
	}
	.djm-slider .djm-slider__cta {
		position: static;
		max-width: 100%;
		gap: 8px;
		padding: 11px 20px;
		border-width: 2px;
		border-radius: 4px;
		font-size: 15px;
		letter-spacing: .5px;
		white-space: normal;
	}
	.djm-slider .djm-slider__controls {
		position: static;
		padding: 14px 0 18px;
	}
}

/* --------------------------------------------------------------------------
   7. Magazin-Regal (Willich / Meerbusch / Kaarst)
   Vorher: Regal-Hintergrund skalierte mit der Breite, die Cover hatten feste
   Höhen → nur ab 1200px passten Brett und Cover zusammen.
   Jetzt: feste Reihenhöhe pro Breakpoint, Hintergrund exakt auf eine Reihe.
   Brett-Oberkante liegt bei ~70 % der Kachelhöhe des Regal-Bildes.
   -------------------------------------------------------------------------- */

.entry-content .regal {
	--regal-cover-h: 300px;                                  /* Coverhöhe */
	--regal-pad-top: 15px;                                   /* Luft über dem Cover */
	--regal-side: 15px;                                      /* Luft links/rechts */
	--regal-row: calc((var(--regal-pad-top) + var(--regal-cover-h)) / .7);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	background-repeat: repeat-y;
	background-position: center top;
	/* Brett nicht stärker als 25 % stauchen – lieber seitlich beschneiden */
	background-size: max(100%, calc(var(--regal-row) * 2.447 * .75)) var(--regal-row);
}
.entry-content .regal > div {
	display: flex !important;
	justify-content: center;
	align-items: flex-start;
	flex: 0 0 auto;
	width: calc(var(--regal-cover-h) * .70667 + 2 * var(--regal-side));
	height: var(--regal-row);
	padding: var(--regal-pad-top) var(--regal-side) 0 !important;
}
.entry-content .regal > div img {
	display: block;
	width: calc(var(--regal-cover-h) * .70667) !important;
	height: var(--regal-cover-h) !important;
	max-width: none;
	object-fit: cover;
	transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
	.entry-content .regal > div:hover img {
		transform: translateY(-4px);
		box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
	}
}
@media (max-width: 1199.98px) {
	.entry-content .regal { --regal-cover-h: 280px; --regal-side: 13px; }     /* 4 pro Reihe (992–1199), 3 pro Reihe (768–991) */
}
@media (max-width: 767.98px) {
	.entry-content .regal { --regal-cover-h: 196px; --regal-pad-top: 12px; --regal-side: 10px; } /* 3 pro Reihe */
}
@media (max-width: 575.98px) {
	.entry-content .regal {
		/* 2 pro Reihe, Cover wächst mit der Bildschirmbreite (max. 250px hoch) */
		--regal-cover-h: min(250px, calc(((100vw - 30px) / 2 - 22px) * 1.415));
		--regal-pad-top: 10px;
		--regal-side: 10px;
	}
}

/* --------------------------------------------------------------------------
   8. Beiträge / Presse- und Öffentlichkeitsarbeit
   -------------------------------------------------------------------------- */

.post-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
}
@media (max-width: 767.98px) {
	.post-thumbnail { margin-bottom: 18px; }
}
.archive #main > article.post {
	margin-bottom: 40px;
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(19, 34, 59, .12);
}
/* Kategorie-Zeile unter Beiträgen war weiß auf weiß (globales footer{color:#fff}) */
#page .entry-footer {
	margin: 14px 0 0;
	color: #6c7686;
	font-size: 14px;
}
#page .entry-footer a { color: var(--djm-accent); }

/* --------------------------------------------------------------------------
   9. Footer
   Vorher: feste Spalten (col-6 / col-8 > col-4/3/4) → mobil Telefonnummern
   über 5 Zeilen, winziges Logo, abgeschnittener Senden-Button und dadurch
   horizontales Scrollen auf jeder Seite.
   -------------------------------------------------------------------------- */

#colophon.site-footer { font-size: 15px; }

#colophon .subFooter { padding-bottom: 24px; }
#colophon .footer-heading {
	margin: 32px 0 16px;
	font-size: 26px;
	color: var(--djm-ink);
}
#colophon .footer-social-link {
	display: inline-block;
	font-size: 40px;
	line-height: 1;
}
#colophon .footer-callback .wpcf7 {
	max-width: 460px;
	margin: 0 auto;
}
#colophon .footer-callback .wpcf7 p { margin-bottom: 10px; }
#colophon .footer-callback .wpcf7-submit { width: 100%; }

#colophon .footer-contact {
	margin-top: 48px;
	margin-bottom: 24px;
}
#colophon .footer-logo img {
	width: 180px;
	max-width: 100%;
	height: auto;
}
#colophon .footer-contact-list {
	line-height: 1.9;
	white-space: nowrap;
}
@media (max-width: 575.98px) {
	#colophon .footer-heading { font-size: 22px; margin-top: 28px; }
	#colophon .footer-logo { margin-bottom: 18px; }
	#colophon .footer-contact-list {
		text-align: center;
		margin-bottom: 10px;
	}
}
@media (min-width: 768px) {
	#colophon .footer-logo { padding-right: 32px; }
	#colophon .footer-contact-list { padding: 0 20px; }
}

/* --------------------------------------------------------------------------
   10. Formulare (Contact Form 7) – Footer & Popups
   -------------------------------------------------------------------------- */

/* Der unsichtbare Lade-Spinner neben "Senden" nahm 72px Breite ein und war
   die eigentliche Ursache für das horizontale Scrollen auf Smartphones. */
#colophon .wpcf7 .wpcf7-spinner,
.modal .wpcf7 .wpcf7-spinner {
	position: absolute;
	left: 50%;
	top: 100%;
	margin: 0;
	transform: translate(-50%, -6px);
}

/* Formulare im Seiteninhalt (z. B. E-Paper-Bestellung): Felder mobil untereinander */
@media (max-width: 575.98px) {
	.entry-content .wpcf7 .row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

.wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.wpcf7 .wpcf7-acceptance label {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	text-align: left;
	cursor: pointer;
}
.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: .15em;
}
.wpcf7 .wpcf7-list-item-label small {
	font-size: 13px;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   11. Popups (Kontakt / Rückruf)
   -------------------------------------------------------------------------- */

/* 48vw waren zwischen 576 und ~900px viel zu schmal (z. B. 288px bei 600px) */
@media (min-width: 576px) {
	.modal .modal-dialog { max-width: 680px; }
}
/* Datenschutz-Link hatte inline dunkelblaue Farbe → auf dunklem Popup unsichtbar */
.modal .modal-content .wpcf7 a {
	color: var(--djm-accent) !important;
	text-decoration: underline;
}
@media (max-width: 575.98px) {
	.modal .modal-title {
		font-size: 22px;
		line-height: 1.25;
	}
	.modal .modal-body .fas,
	.modal .modal-body .far,
	.modal .modal-body .fab { font-size: 30px; }
	.modal .kontaktPopupContainer a {
		font-size: 13px;
		overflow-wrap: anywhere;
	}
}