/*
Theme Name:        DEM Personalservice
Theme URI:         https://dempersonalservice.de
Author:            AISFW
Description:       Gutenberg Block Theme (FSE) für DEM Personalservice Heidenheim & Heilbronn. Design: freigegebener Mock (Sora, #0D2B4E, #29B6F6). Kein Page-Builder.
Requires at least: 6.4
Tested up to:      6.7
Requires PHP:      8.1
Version:           1.8.0
License:           Proprietary
Text Domain:       dem-personalservice
*/

/* Sora self-hosted — woff2-Dateien in assets/fonts/Sora/ */
@font-face {
	font-family: 'Sora';
	src: url('assets/fonts/Sora/Sora-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Sora';
	src: url('assets/fonts/Sora/Sora-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Sora';
	src: url('assets/fonts/Sora/Sora-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Sora';
	src: url('assets/fonts/Sora/Sora-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Sora';
	src: url('assets/fonts/Sora/Sora-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Sora';
	src: url('assets/fonts/Sora/Sora-ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* ─── CSS CUSTOM PROPERTIES (Design Tokens) ─── */
:root {
	--dem-navy:        #0D2B4E;
	--dem-navy-hover:  #1a3f6e;
	--dem-blue:        #29B6F6;
	--dem-blue-hover:  #0288D1;
	--dem-blue-light:  #E3F6FD;
	--dem-blue-icon:   #0288D1;
	--dem-off-white:   #FAFAF8;
	--dem-amber:       #efa201;
	--dem-text-dark:   #161618;
	--dem-text-muted:  #6B7280;
	--dem-border:      #e5e7eb;
	--dem-white:       #FFFFFF;

	/* Spacing */
	--s-1:  4px;  --s-2:  8px;  --s-3: 12px;  --s-4: 16px;
	--s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
	--s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

	/* Radien */
	--r-sm:   8px;
	--r-md:  12px;
	--r-lg:  16px;
	--r-xl:  24px;
	--r-full: 9999px;

	/* Schatten */
	--shadow-card:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
	--shadow-hover: 0 4px 16px rgba(0,0,0,.12);
	--shadow-nav:   0 2px 8px rgba(13,43,78,.15);

	/* Transition */
	--ease-out: cubic-bezier(.16,1,.3,1);
}

/* ─── RESET & BASE ─── */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body {
	font-family: 'Sora', system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--dem-text-dark);
	background: var(--dem-white);
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

button {
	font-family: inherit;
	cursor: pointer;
}

/* ─── SKIP LINK ─── */
.skip-link {
	position: absolute;
	top: -100%;
	left: var(--s-4);
	z-index: 9999;
	background: var(--dem-navy);
	color: var(--dem-white);
	padding: var(--s-3) var(--s-6);
	border-radius: var(--r-md);
	font-weight: 600;
	transition: top .2s;
}
.skip-link:focus {
	top: var(--s-4);
}

/* ─── BUTTONS ─── */
.dem-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: 44px;
	min-width: 44px;
	padding: var(--s-4) var(--s-8);
	border-radius: var(--r-md);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	border: none;
	cursor: pointer;
	transition: all 200ms var(--ease-out);
	text-decoration: none;
}
.dem-btn:focus-visible {
	outline: 2px solid var(--dem-blue);
	outline-offset: 2px;
}
.dem-btn:hover  { transform: scale(1.05); }
.dem-btn:active { transform: scale(0.95); }

.dem-btn-navy {
	background: var(--dem-navy);
	color: var(--dem-white);
}
.dem-btn-navy:hover { background: var(--dem-navy-hover); }

.dem-btn-blue {
	background: var(--dem-blue);
	color: var(--dem-white);
}
.dem-btn-blue:hover { background: var(--dem-blue-hover); }

.dem-btn-outline {
	background: transparent;
	color: var(--dem-white);
	border: 2px solid rgba(255,255,255,.2);
}
.dem-btn-outline:hover {
	border-color: rgba(255,255,255,.5);
	transform: scale(1.05);
}

/* ─── CARDS ─── */
.dem-card {
	background: var(--dem-white);
	border-radius: var(--r-xl);
	border: 1px solid var(--dem-border);
	box-shadow: var(--shadow-card);
	padding: var(--s-8);
	transition: box-shadow 200ms var(--ease-out);
}
.dem-card:hover { box-shadow: var(--shadow-hover); }

.dem-card--off-white { background: var(--dem-off-white); }

.dem-card--dark {
	background: rgba(255,255,255,.05);
	border-color: rgba(255,255,255,.1);
}

/* ─── ICON BADGE ─── */
.dem-icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--r-md);
	background: var(--dem-blue-light);
	color: var(--dem-blue-icon);
}

/* ─── SECTION PADDING ─── */
.dem-section {
	padding-top:    var(--s-12);
	padding-bottom: var(--s-12);
}
@media (min-width: 1024px) {
	.dem-section {
		padding-top:    var(--s-24);
		padding-bottom: var(--s-24);
	}
}

/* ─── CONTAINER ─── */
.dem-container {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--s-4);
}
@media (min-width: 640px)  { .dem-container { padding-inline: var(--s-6); } }
@media (min-width: 1024px) { .dem-container { padding-inline: var(--s-8); } }

/* ─── EYEBROW LABEL ─── */
.dem-eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--dem-blue);
	margin-bottom: var(--s-3);
}

/* ─── SECTION BG VARIANTS ─── */
.dem-bg-navy     { background: var(--dem-navy); color: var(--dem-white); }
.dem-bg-blue     { background: var(--dem-blue); color: var(--dem-white); }
.dem-bg-offwhite { background: var(--dem-off-white); }

/* ─── PREFERS REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ─── BLOCK EDITOR ─── */
.wp-site-blocks { padding: 0; }

/* ─── GLOBAL FOCUS-VISIBLE (WCAG 2.4.7) ─── */
:focus-visible {
	outline: 2px solid var(--dem-blue);
	outline-offset: 3px;
	border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ─── INLINE LINK HOVER TRANSITIONS ─── */
a { transition: color 180ms ease, opacity 180ms ease; }

/* ─── FAQ DETAILS / SUMMARY ─── */
.dem-faq details summary {
	list-style: none;
	cursor: pointer;
}
.dem-faq details summary::-webkit-details-marker { display: none; }
.dem-faq details summary::marker               { display: none; }

/* Flip +/− via CSS without JS */
.dem-faq details summary .faq-toggle::before      { content: '+'; }
.dem-faq details[open] summary .faq-toggle::before { content: '\2212'; } /* − */

/* Smooth reveal animation */
.dem-faq details .faq-body {
	animation: faqOpen 220ms var(--ease-out);
}
@keyframes faqOpen {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.dem-faq details .faq-body { animation: none; }
}

/* ─── HERO RESPONSIVE ───
   Zuvor stapelten sich zwei Abstände: 6rem an der Sektion plus
   nochmals 6rem am Container darin – zusammen 192px Leerfläche
   über der Überschrift. Zusätzlich sorgte min-height:100svh bei
   mittiger Ausrichtung dafür, dass der übrige Platz obendrauf
   verteilt wurde. Die Kopfzeile steht im Fluss darüber, ein
   großer oberer Abstand ist dafür also gar nicht nötig.
   Die etwas geringere Höhe lässt zudem den nächsten Abschnitt
   anschneiden – das lädt zum Weiterscrollen ein.               */
@media (max-width: 640px) {
	.dem-hero {
		padding: 2.5rem 1.25rem 3rem !important;
		min-height: 78svh !important;
	}
	.dem-hero > .dem-container {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

/* ─── STATS BAR RESPONSIVE ─── */
@media (max-width: 480px) {
	.dem-stats-bar > div > div { grid-template-columns: 1fr 1fr !important; }
}

/* ─── SECTION MAX-WIDTH CONSISTENCY ─── */
.dem-benefits > div,
.dem-about    > div,
.dem-testimonials > div,
.dem-process  > div {
	max-width: 1100px;
	margin-inline: auto;
}
.dem-faq > div {
	max-width: 760px;
	margin-inline: auto;
}

/* ─── CTA / PROCESS HOVER STATES ─── */
.dem-process a,
.dem-about a[style*="background:#0D2B4E"],
.dem-benefits a {
	transition: filter 180ms ease, transform 180ms ease;
}
.dem-process a:hover,
.dem-about a:hover,
.dem-benefits a:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

/* ─── FOOTER RESPONSIVE ─── */
@media (max-width: 768px) {
	.dem-footer-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
}

/* ═══════════════════════════════════════════════════
   MANUS UTILITY CLASSES (Design-Match)
   ═══════════════════════════════════════════════════ */

/* Buttons */
.dem-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #29B6F6;
	color: #fff;
	font-family: 'Sora', sans-serif;
	font-weight: 700;
	font-size: 0.875rem;
	padding: 0.875rem 1.75rem;
	border-radius: 0.75rem;
	border: none;
	cursor: pointer;
	transition: background 0.2s, transform 0.15s;
	text-decoration: none;
}
.dem-btn-primary:hover { background: #0288D1; }
.dem-btn-primary:active { transform: scale(0.97); }

/* Labels & Headings */
.dem-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #29B6F6;
	margin-bottom: 0.5rem;
}
.dem-h2 {
	font-family: 'Sora', sans-serif;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 800;
	color: #0D2B4E;
	line-height: 1.15;
}
.dem-h2-white { color: #fff; }
.dem-gradient-text {
	background: linear-gradient(135deg, #29B6F6 0%, #0288D1 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Tags & Check Icons */
.dem-tag {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	background: #E3F6FD;
	color: #0288D1;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
}
.dem-check-icon {
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: #E3F6FD;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 0.125rem;
}

/* Grid Helpers */
.dem-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.dem-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.dem-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 1024px) {
	.dem-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.dem-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.dem-grid-2 { grid-template-columns: 1fr; }
	.dem-grid-3 { grid-template-columns: 1fr; }
	.dem-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* FAQ Accordion (Manus JS-basiert) */
.dem-faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}
.dem-faq-item.open .dem-faq-answer { max-height: 400px; }
.dem-faq-toggle-icon { transition: transform 0.2s; }
.dem-faq-item.open .dem-faq-toggle-icon { transform: rotate(45deg); }
.dem-tab-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	border-radius: 0.75rem;
	font-family: 'Sora', sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	border: none;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	background: transparent;
	color: #6b7280;
}
.dem-tab-btn.active { background: #29B6F6; color: #fff; }
.dem-tab-btn:not(.active):hover { color: #0D2B4E; }
.dem-faq-panel { display: none; }
.dem-faq-panel.active { display: flex; flex-direction: column; gap: 0.75rem; }

/* Contact Form */
.dem-input {
	width: 100%;
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	color: #0D2B4E;
	font-family: 'Sora', sans-serif;
	background: #fff;
	outline: none;
	transition: border-color 0.2s;
}
.dem-input:focus { border-color: #29B6F6; }
.dem-input-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: #6b7280;
	margin-bottom: 0.375rem;
}
.dem-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
@media (max-width: 640px) { .dem-form-grid { grid-template-columns: 1fr; } }
.dem-form-full { grid-column: 1 / -1; }

/* ═══════════════════════════════════════════════════
   DESIGN SYSTEM 2026 — zentrale Konsistenz-Schicht
   (überschreibt Inline-Styles der Patterns gezielt)
   ═══════════════════════════════════════════════════ */

/* ── Hintergrund-Token: kühles Off-White ── */
:root { --dem-off-white: #F7F9FC; }
section[style*="FAFAF8"],
section[style*="fafaf8"] { background: #F7F9FC !important; }

/* ── Radius-System: 4px / 12px / 16px ── */
.dem-tag,
.dem-input,
.dem-faq-toggle-icon { border-radius: 4px !important; }

.dem-btn-primary,
.dem-btn-navy,
.dem-header-btn,
.dem-tab-btn { border-radius: 12px !important; }

.dem-card { border-radius: 16px !important; }

/* ── Card-System vereinheitlichen ── */
.dem-card {
	background: #fff !important;
	padding: 32px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04) !important;
	transition: transform 240ms ease-out, box-shadow 240ms ease-out !important;
}
.dem-card:hover {
	box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
	transform: translateY(-4px) !important;
}

/* ── Branchen-Kacheln: stärkerer Hover ── */
.dem-branchen .dem-card { cursor: pointer; }
.dem-branchen .dem-card:hover {
	transform: translateY(-6px) scale(1.01) !important;
	box-shadow: 0 20px 60px rgba(13,43,78,0.15) !important;
}

/* ── Buttons: konsistente Größe + Hover-Lift ── */
.dem-btn-primary,
.dem-btn-navy {
	padding: 14px 28px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	transition: transform 200ms cubic-bezier(0.23,1,0.32,1),
	            box-shadow 200ms cubic-bezier(0.23,1,0.32,1),
	            background 200ms ease !important;
}
/* Primary: Sky-BG + Navy-Text (bessere Lesbarkeit, lt. System) */
.dem-btn-primary { background: #29B6F6 !important; color: #0D2B4E !important; }
.dem-btn-primary:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 24px rgba(41,182,246,0.35) !important;
}
.dem-btn-navy:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 24px rgba(13,43,78,0.25) !important;
}
.dem-header-btn {
	transition: transform 200ms cubic-bezier(0.23,1,0.32,1),
	            box-shadow 200ms cubic-bezier(0.23,1,0.32,1),
	            background 200ms ease !important;
}
.dem-header-btn-primary:hover,
.dem-header-btn-ghost:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 24px rgba(13,43,78,0.18) !important;
}

/* ── Sektions-Rhythmus: 96px ── */
.dem-trust-bar,
.dem-stats-bar,
.dem-benefits,
.dem-branchen,
.dem-ueber-uns,
.dem-prozess,
.dem-testimonials,
.dem-faq,
.dem-kontakt {
	padding-top: 96px !important;
	padding-bottom: 96px !important;
}
.dem-review-banner {
	padding-top: 64px !important;
	padding-bottom: 64px !important;
}

/* ── Graue Texte vereinheitlichen ── */
.dem-card p[style*="#9ca3af"],
.dem-card div[style*="#9ca3af"] { color: #6B7280 !important; }

/* ── Entrance-Animation (Intersection Observer) ── */
html.js-reveal .dem-card {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 600ms ease-out, transform 600ms ease-out !important;
}
html.js-reveal .dem-card.is-visible {
	opacity: 1 !important;
	transform: translateY(0) !important;
	transition: opacity 600ms ease-out, transform 240ms ease-out, box-shadow 240ms ease-out !important;
}
@media (prefers-reduced-motion: reduce) {
	html.js-reveal .dem-card {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ═══════════════════════════════════════════════════
   WOW-LAYER: Tiefe, Standort-Pins, Header-Shrink
   ═══════════════════════════════════════════════════ */

/* ── Gradient-Tiefe hinter hellen Sektionen ── */
.dem-benefits,
.dem-branchen,
.dem-testimonials,
.dem-kontakt,
.dem-ueber-uns,
.dem-faq {
	position: relative;
	background-image:
		radial-gradient(48rem 34rem at 100% -5%, rgba(41,182,246,0.06), transparent 60%),
		radial-gradient(42rem 32rem at -5% 105%, rgba(41,182,246,0.05), transparent 60%) !important;
	background-repeat: no-repeat !important;
}

/* ── Standort-Pins: pulsierende Halos ── */
@keyframes demPinPulse {
	0%   { transform: scale(0.55); opacity: 0.75; }
	70%  { opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}
.dem-pin-pulse {
	transform-box: fill-box;
	transform-origin: center;
	animation: demPinPulse 2.6s ease-out infinite;
}
.dem-pin-pulse--d  { animation-delay: 1.3s; }
.dem-pin-pulse--d2 { animation-delay: 0.6s; }
.dem-pin-pulse--d3 { animation-delay: 1.9s; }
@media (prefers-reduced-motion: reduce) {
	.dem-pin-pulse { animation: none; opacity: 0; }
}

/* ── Standort-Karte responsive ── */
@media (max-width: 860px) {
	.dem-map-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
}

/* ── Kontakt-Kacheln (Telefon/E-Mail) auf Mobil stapeln ── */
@media (max-width: 640px) {
	.dem-contact-tiles { grid-template-columns: 1fr !important; }
	.dem-standorte-list { grid-template-columns: 1fr !important; }
}

/* ── Premium: feine Grain-/Noise-Textur (global) ── */
.dem-grain {
	position: fixed; inset: 0; z-index: 200; pointer-events: none;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 160px;
}

/* ── Hero: langsamer Ken-Burns-Zoom aufs Foto ── */
.dem-hero img {
	animation: demKenBurns 22s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes demKenBurns {
	from { transform: scale(1); }
	to   { transform: scale(1.07); }
}

/* ── Hero: Wort-für-Wort-Reveal der Headline ── */
.dem-word {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.45em);
	animation: demWordIn 0.75s cubic-bezier(0.23,1,0.32,1) forwards;
}
@keyframes demWordIn {
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.dem-hero img { animation: none; }
	.dem-word { opacity: 1; transform: none; animation: none; }
}

/* ── Ansprechpartner-Karte (mit Foto) ── */
.dem-ap-card {
	max-width: 640px;
	margin: 3.5rem auto;
	display: flex;
	gap: 1.5rem;
	align-items: center;
	background: #fff;
	border: 1px solid #f0f0f0;
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
	padding: 1.5rem;
}
.dem-ap-photo img {
	width: 110px; height: 110px;
	object-fit: cover;
	border-radius: 14px;
	display: block;
}
.dem-ap-eyebrow {
	display: block;
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
	text-transform: uppercase; color: #29B6F6; margin-bottom: 0.35rem;
}
.dem-ap-name { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.15rem; color: #0D2B4E; }
.dem-ap-role { color: #6B7280; font-size: 0.9rem; margin: 0.15rem 0 0.55rem; }
.dem-ap-meta { font-size: 0.875rem; color: #0D2B4E; font-weight: 600; }
.dem-ap-meta a { color: #29B6F6; }
@media (max-width: 520px) {
	.dem-ap-card { flex-direction: column; text-align: center; }
	.dem-ap-photo img { width: 120px; height: 120px; }
}

/* ── Landingpage-Hero: Ansprechpartner links, Kontakt rechts, Text unten ── */
/* Foto als immersives Hintergrund-Element, das weich in Navy übergeht (wie Startseite) */
.dem-lp-hero-media {
	position: relative;
	width: 100%;
	aspect-ratio: 0.8;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 55px rgba(0,0,0,0.45), 0 0 0 1px rgba(41,182,246,0.22);
	z-index: 1;
}
.dem-lp-hero-media img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 14%;
	display: block;
}
.dem-lp-hero-top {
	display: grid;
	grid-template-columns: 22rem 1fr;
	gap: 2.75rem;
	align-items: start;
	margin-bottom: 2rem;
}
.dem-lp-hero-contact { padding-top: 0; }
.dem-lp-hero-spacer { min-height: 1px; }
.dem-lp-hc-eyebrow {
	display: block;
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
	text-transform: uppercase; color: #29B6F6; margin-bottom: 0.5rem;
}
.dem-lp-hc-name {
	font-family: 'Sora', sans-serif; font-weight: 800;
	font-size: clamp(1.4rem, 2.5vw, 1.9rem); color: #fff; line-height: 1.1;
}
.dem-lp-hc-role { color: rgba(255,255,255,0.7); font-size: 0.95rem; margin: 0.35rem 0 1.4rem; }
.dem-lp-hc-line {
	display: flex; align-items: center; gap: 0.65rem;
	color: rgba(255,255,255,0.85); font-size: 0.95rem; margin-bottom: 0.65rem;
}
.dem-lp-hc-line svg { color: #29B6F6; flex-shrink: 0; }
.dem-lp-hc-line a { color: #fff; text-decoration: none; }
.dem-lp-hc-line a:hover { color: #29B6F6; }
.dem-lp-hero-text { max-width: 760px; position: relative; z-index: 1; }
@media (max-width: 820px) {
	.dem-lp-hero-top { grid-template-columns: 1fr; }
	.dem-lp-hero-media { width: 100%; max-width: 17rem; margin-bottom: 1.25rem; }
	.dem-lp-hero-contact { padding-top: 0; }
	.dem-lp-hc-line { justify-content: flex-start; }
}

/* ── Standort-Bereich Landingpage (Foto + Details) ── */
.dem-standort-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	align-items: center;
}
@media (max-width: 820px) {
	.dem-standort-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ── Standort-Bilder (weiche untere Kante) ── */
.dem-standort-img img {
	width: 100%; height: 300px; object-fit: cover; display: block;
	border-radius: 16px;
	box-shadow: 0 10px 28px rgba(13,43,78,0.14), 0 0 0 1px rgba(13,43,78,0.05);
}
@media (max-width: 820px) {
	.dem-standort-img img { height: 220px; }
}

/* ── Standort-Icons: sanfter Puls-Glow ── */
.dem-loc-pin { animation: demLocGlow 2.8s ease-in-out infinite; }
.dem-standorte-list > div:nth-child(2) .dem-loc-pin { animation-delay: 1.4s; }
@keyframes demLocGlow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(41,182,246,0.0); }
	50%      { box-shadow: 0 0 18px 2px rgba(41,182,246,0.45); }
}
@media (prefers-reduced-motion: reduce) {
	.dem-loc-pin { animation: none; }
}

/* ── Standort-Pins klickbar ── */
.dem-map-pin { cursor: pointer; }
.dem-map-pin .dem-pin-marker { transition: filter .2s ease; }
.dem-map-pin:hover .dem-pin-marker,
.dem-map-pin:focus-visible .dem-pin-marker { filter: drop-shadow(0 0 5px rgba(41,182,246,0.95)); }
.dem-map-pin text { transition: fill .2s ease; }
.dem-map-pin:hover text,
.dem-map-pin:focus-visible text { fill: #29B6F6; }

/* ── Standort-Buttons (Route planen / Anruf) ── */
.dem-loc-btn {
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.8125rem;
	padding: 0.5rem 0.9rem; border-radius: 12px; text-decoration: none;
	transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.dem-loc-btn--primary { background: #29B6F6; color: #0D2B4E; }
.dem-loc-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(41,182,246,0.35); }
.dem-loc-btn--ghost { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.18); }
.dem-loc-btn--ghost:hover { background: rgba(255,255,255,0.14); }

/* ── Header: schrumpft beim Scrollen ── */
.dem-header { transition: box-shadow .25s ease, background .25s ease; }
.dem-header-inner { transition: height .25s ease; }
.dem-header .dem-logo-badge { transition: width .25s ease, height .25s ease; }
.dem-header.scrolled {
	box-shadow: 0 6px 24px rgba(13,43,78,.16);
	background: rgba(255,255,255,0.99);
}
.dem-header.scrolled .dem-header-inner { height: 58px; }
.dem-header.scrolled .dem-logo-badge { width: 2.1rem; height: 2.1rem; }

/* ══════════════════════════════════════════════════════════════
   Mobil-Feinschliff
   Bewerber kommen überwiegend vom Handy – diese Regeln verhindern
   die typischen Brüche: seitliches Verschieben der Seite, aus dem
   Rand laufende lange Wörter (deutsche Komposita, Stellentitel)
   und das dreispaltige Upload-Feld im Bewerbungsformular.
   ══════════════════════════════════════════════════════════════ */

/* Seite darf sich nie seitlich verschieben lassen. */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}

/* Lange Wörter umbrechen statt überlaufen –
   z. B. "Arbeitnehmerüberlassungsgesetz" oder lange Stellentitel.
   Bewusst nur overflow-wrap: das greift erst, wenn ein Wort allein
   nicht in die Zeile passt. Ein zusätzliches word-break würde auch
   normale Wörter wie "zusammengebracht" mitten durchtrennen. */
h1, h2, h3, h4, h5, h6,
p, li, td, th, label, span, a,
.dem-h2, .dem-job-card h3, .dem-legal p {
	overflow-wrap: break-word;
}

/* Medien nie breiter als ihr Container. */
img, svg, video, iframe {
	max-width: 100%;
}

/* Formularfelder sprengen sonst schmale Container. */
input, select, textarea, button {
	max-width: 100%;
}

@media (max-width: 640px) {

	/* Dokumenten-Upload: Auswahl über die ganze Breite,
	   darunter Datei-Feld und Entfernen-Knopf nebeneinander. */
	.dem-ap-doc-row {
		grid-template-columns: 1fr auto;
		gap: 0.5rem;
	}
	.dem-ap-doc-row .dem-ap-doctype {
		grid-column: 1 / -1;
	}
	.dem-ap-doc-row .dem-ap-file {
		min-width: 0;
		font-size: 0.85rem;
	}

	/* Bewerbungsformular und Rechtstexte etwas kompakter. */
	.dem-jd-apply2,
	.dem-jd-body {
		padding: 1.5rem;
	}
	.dem-legal table {
		font-size: 0.8rem;
	}
	.dem-legal table td {
		padding: 0.35rem 0.4rem;
	}
}

/* ── "Über uns": zweispaltig nur ab Tablet ──────────────────────
   Ohne diese Regel blieben die zwei Spalten auch auf dem Handy
   nebeneinander stehen (zwei ~165px-Spalten auf einem iPhone),
   wodurch Text zerquetscht und abgeschnitten wurde.            */
@media (max-width: 820px) {
	.dem-about-grid {
		grid-template-columns: 1fr !important;
		gap: 2.5rem !important;
	}
}

/* ── Hero auf schmalen Handys ───────────────────────────────────
   Die Mindestgröße von 2.5rem war für lange deutsche Komposita
   zu groß: "zusammengebracht." braucht bei 40px rund 374px,
   auf einem iPhone stehen aber nur ~361px zur Verfügung – das
   Wort lief rechts aus dem Bild. Zusätzlich verhindert das
   inline-block der Wort-Animation einen Umbruch im Wort.        */
@media (max-width: 480px) {
	.dem-hero-h1 {
		font-size: clamp(1.85rem, 8.2vw, 2.5rem) !important;
	}
	/* Notbremse, falls doch einmal ein noch längeres Wort auftaucht */
	.dem-hero-h1 .dem-word {
		max-width: 100%;
		overflow-wrap: break-word;
	}
	/* Hero-Knöpfe stapeln und auf volle Breite ziehen.
	   Die Ausrichtung des Inhalts übernimmt .dem-btn-block (siehe oben). */
	.dem-hero-cta {
		flex-direction: column;
		align-items: stretch;
	}
	.dem-hero-cta > a {
		width: 100%;
		justify-content: flex-start;
		gap: 0.75rem;
		border: 1px solid transparent;
	}
	.dem-hero-cta > a > svg:last-child {
		margin-left: auto;
		flex-shrink: 0;
	}
	.dem-hero-cta > a.dem-btn-navy {
		border-color: rgba(255,255,255,0.20);
	}

	/* Buttons unter einer Stellenanzeige ebenfalls stapeln statt
	   unterschiedlich breit nebeneinander umbrechen zu lassen. */
	.dem-jd-btns {
		flex-direction: column;
		align-items: stretch;
	}
	.dem-jd-btns > a {
		width: 100%;
		justify-content: center;
	}
}

/* ── Footer: seitlicher Rand wie im übrigen Seiteninhalt ────────
   Der Footer brachte nur Abstand nach oben und unten mit. Dadurch
   klebte er als einziger Bereich am Bildschirmrand, während alles
   andere über .dem-container eingerückt ist.                     */
.dem-footer {
	padding-inline: var(--s-4);
}
@media (min-width: 640px)  { .dem-footer { padding-inline: var(--s-6); } }
@media (min-width: 1024px) { .dem-footer { padding-inline: var(--s-8); } }

/* ══════════════════════════════════════════════════════════════
   BUTTON-FUNDAMENT VEREINHEITLICHEN
   .dem-btn-primary war ein Flex-Container (display:inline-flex,
   align-items:center, gap), .dem-btn-navy dagegen nicht. Dadurch
   saßen in ALLEN navy-Buttons die Icons auf der Textlinie statt
   mittig, und Abstände zwischen Icon und Text griffen nicht.
   Beide bekommen jetzt dieselbe Grundlage.
   Bewusst am Dateiende, damit diese Regeln die weiter oben
   stehenden Definitionen sicher überschreiben.
   ══════════════════════════════════════════════════════════════ */
.dem-btn-primary,
.dem-btn-navy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-decoration: none;
}
.dem-btn-primary > svg,
.dem-btn-navy > svg {
	flex-shrink: 0;
}

/* ── Buttons über die volle Breite ──────────────────────────────
   Sobald mehrere Buttons auf dieselbe Breite gezogen werden, darf
   ihr Inhalt nicht zentriert sein: Zentrierung richtet sich nach
   der Textlänge, und bei unterschiedlich langen Beschriftungen
   ("Jetzt Fachkräfte anfragen" vs. "Jetzt Job finden") stünden
   Icon, Text und Pfeil in jedem Button woanders.
   Deshalb linksbündig, mit dem abschließenden Pfeil nach rechts.
   Verwendung: class="dem-btn-primary dem-btn-block"              */
.dem-btn-block {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	gap: 0.75rem;
	border: 1px solid transparent; /* gleicht Buttons mit/ohne Rahmen aus */
}
.dem-btn-block > svg:last-child {
	margin-left: auto;
}

/* ── Raster-Elemente dürfen schrumpfen ─────────────────────────
   Grid- und Flex-Kinder haben standardmäßig min-width:auto und
   schrumpfen dadurch nicht unter die Mindestbreite ihres Inhalts.
   Ein langer Stellentitel oder eine lange Ortsangabe bläht die
   Spalte dann über die Bildschirmbreite hinaus auf – der Inhalt
   wird rechts abgeschnitten. min-width:0 erlaubt das Umbrechen. */
.dem-grid-2 > *,
.dem-grid-3 > *,
.dem-grid-4 > *,
.dem-about-grid > *,
.dem-standorte-list > *,
.dem-standort-grid > *,
.dem-jobs-grid > *,
.dem-contact-tiles > *,
.dem-form-grid > *,
.dem-footer-grid > *,
.dem-choose-grid > *,
.dem-lp-hero-top > *,
.dem-ap-grid > *,
.dem-ap-doc-row > *,
.dem-jd-btns > *,
.dem-hero-cta > * {
	min-width: 0;
}

/* ── E-Mail in der Kontaktkachel ────────────────────────────────
   Die Adresse ist für schmale Handys zu lang: zuvor wurde sie mit
   Auslassungspunkten abgeschnitten ("…service.de" fehlte), was eine
   unbrauchbare Adresse ergibt.
   Deshalb auf dem Handy die kurze Beschriftung "E-Mail schreiben",
   ab Tablet die vollständige Adresse. Letztere bleibt wichtig, weil
   mailto: nicht überall funktioniert – auf Rechnern ohne
   eingerichtetes Mailprogramm passiert beim Klick nichts, dann ist
   die lesbare Adresse die einzige Möglichkeit, uns zu erreichen. */
.dem-tile-mail {
	line-height: 1.35;
	overflow-wrap: anywhere;
}
.dem-mail-lang { display: none; }
.dem-mail-kurz { display: inline; }

/* Umschaltpunkt bei 900px, nicht früher: ab 640px stehen die beiden
   Kacheln nebeneinander, jede ist dann nur noch halb so breit. Bei
   768px blieben so 204px Textfläche bei 225px Bedarf – die Adresse
   brach auf zwei Zeilen um. Erst ab rund 900px ist wieder genug
   Platz für die vollständige Schreibweise. */
@media (min-width: 900px) {
	.dem-mail-lang { display: inline; }
	.dem-mail-kurz { display: none; }
}