/* Shared finishing layer for the legacy page templates. Loaded after inline styles. */
:root { --text-secondary: #dce2ed; --text-muted: #b9c2d6; --accent: #f2c448; }
html { scroll-padding-top: 100px; }
body { line-height: 1.6; }
body::before { display: none; }
:focus-visible { outline: 3px solid #f8ec4b; outline-offset: 4px; }
[hidden] { display: none !important; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
input:not([type=checkbox]):not([type=hidden]), select, textarea { font-size: 16px; }
input[type=checkbox] { accent-color: #f2c448; }
main p a, main li a:not([class]), .footer-contact-item a { text-decoration: underline; text-underline-offset: .2em; }
.form-error, .form-message.error { color: #ffb4b4; }
.form-message { margin-top: 16px; padding: 14px; border: 1px solid #7886a4; border-radius: 10px; background: #101830; font-size: 15px; }
.form-message a { text-decoration: underline; }
.contact-mail-note { margin-top: 16px; font-size: 14px; color: var(--text-secondary); }
.nav-hamburger { flex: 0 0 48px; width: 48px; min-height: 48px; border: 1px solid #5e6a84; border-radius: 12px; color: #fff; }
.nav-hamburger span { width: 24px; flex: 0 0 2px; }
.navbar { background: rgba(12,18,40,.97); border-bottom: 1px solid #29334b; }
.nav-logo img, .nav-logo-img { height: 64px !important; width: auto !important; }
.nav-links { gap: clamp(12px, 1.8vw, 25px); }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
.nav-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.nav-mobile { padding: 100px 24px max(24px, env(safe-area-inset-bottom)); gap: 8px; justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; }
.nav-mobile a { min-height: 44px; display: flex; align-items: center; justify-content: center; width: 100%; font-size: clamp(22px, 6vw, 28px); line-height: 1.3; text-align: center; }
.nav-mobile .nav-cta { max-width: 420px; margin-top: 12px; min-height: 52px; }
.nav-mobile.open ~ .sticky-cta { display: none; }
.hero { padding-top: 145px; }
.hero-content .eyebrow, .hero h1, .hero-subtitle, .hero-buttons { opacity: 1; transform: none; animation: none; }
.hero h1 { line-height: 1.05; letter-spacing: .01em; text-wrap: balance; }
.hero-subtitle { max-width: 620px; margin-inline: auto; }
.hero-buttons .btn-primary { min-height: 52px; box-shadow: none; }
.hero-buttons .btn-primary::before, .hero-buttons .btn-primary::after { animation: none; }
.eyebrow { letter-spacing: .15em; line-height: 1.6; }
.section-title { line-height: 1.15; text-wrap: balance; }
.footer-heading { color: #c2cadb; font-size: 13px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 36px; }
.footer-bottom, .footer-copyright { color: #b9c2d6; }
.faq-answer { color: var(--text-secondary); }
.faq-question { text-align: left; min-height: 52px; gap: 16px; }
.faq-question svg { flex-shrink: 0; }
.modal-close { width: 44px; height: 44px; top: 12px; right: 12px; }
.form-section[role=dialog] { padding: 16px; height: 100dvh; z-index: 10001; background: rgba(8,14,30,.92); }
.form-section[role=dialog] .form-card { max-height: calc(100dvh - 32px); padding-top: 64px; overscroll-behavior: contain; }
.form-section[role=dialog] .form-card h2 { line-height: 1.1; }
.form-section[role=dialog] .form-card .form-subtitle { margin-bottom: 24px; }
.form-checkbox label { padding-block: 8px; min-height: 44px; }
.form-input, .form-select, .form-textarea { min-height: 48px; }
.cookie-settings { background: none; border: 0; cursor: pointer; font-family: inherit; color: #dce2ed; text-decoration: underline; text-underline-offset: 3px; padding: 12px 0; font-size: 14px; }
#cookieBanner button { min-height: 44px; }
#cookieBanner { padding-bottom: max(16px, env(safe-area-inset-bottom)) !important; max-height: 55dvh; overflow-y: auto; }
body:has(#cookieBanner) .sticky-cta, body:has(.form-section.open) .sticky-cta { display: none !important; }
body:has(#cookieBanner) .whatsapp-float, body:has(#cookieBanner) .back-to-top { visibility: hidden; }
.nojs-apply { position: fixed; bottom: 0; z-index: 10002; width: 100%; background: #101830; padding: 16px; text-align: center; }
/* Make long editorial content comfortable to scan without changing its meaning. */
.article-content p, .legal-content p { line-height: 1.8; }
@media (max-width: 1023px) {
 .navbar { padding: 10px 0; }
 .navbar.scrolled { padding: 8px 0; }
 .nav-logo img, .nav-logo-img { height: 52px !important; }
 .navbar .container { gap: 16px; }
}
@media (max-width: 767px) {
 .container { padding-inline: 20px; }
 .hero { padding: 110px 20px 48px; }
 .hero h1 { font-size: clamp(38px, 10.5vw, 54px); }
 .hero-content .eyebrow { font-size: 11px; letter-spacing: .12em; margin-bottom: 16px; }
 .hero-subtitle { font-size: 16px; line-height: 1.7; }
 .hero-buttons { width: 100%; margin-top: 24px; }
 .hero-buttons .btn-primary { width: 100%; max-width: 380px; padding: 16px 24px; font-size: 17px; }
 .hero-stats { gap: 20px; margin-top: 28px; padding-top: 24px; }
 .section-title { font-size: clamp(28px, 8vw, 38px); }
 .section-subtitle { font-size: 16px; }
 .benefit-card p { font-size: 15px; line-height: 1.7; }
 .form-section[role=dialog] { padding: 8px; }
 .form-section[role=dialog] .form-card { max-height: calc(100dvh - 16px); padding: 60px 20px 24px; }
 .sticky-cta { padding: 10px 16px max(10px, env(safe-area-inset-bottom)); }
 body.sticky-active { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
 .whatsapp-float { bottom: calc(96px + env(safe-area-inset-bottom)) !important; right: 16px !important; }
 .back-to-top { bottom: calc(160px + env(safe-area-inset-bottom)) !important; }
 .ladder-track, .ladder-grid { flex-direction: column; align-items: stretch; overflow: visible; }
 .ladder-step { min-width: 0; width: 100%; }
 .field-row { grid-template-columns: 1fr !important; }
 .footer { padding-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto !important; }
 *, *::before, *::after { animation: none !important; transition: none !important; }
 .js-animate .animate, .js-animate .animate-left, .js-animate .animate-right, .js-animate .animate-scale, .timeline-item { opacity: 1 !important; transform: none !important; }
}

.application-reassurance { color: var(--text-secondary); text-align: center; font-size: 14px; margin: 0 0 20px; }
@media(max-width:767px) { .form-card .contact-persona { display:none; } .ladder-grid { display:flex; gap:12px; } .ladder-step::after { display:none; } }
/* A dialog must become focusable immediately when opened. */
.form-section[role=dialog], .form-section[role=dialog] .form-card { transition: none; }
.hero-buttons .btn-primary { justify-content: center; }
.navbar + .nav-mobile + .breadcrumb { padding-top: 110px; }
@media(max-width:767px) { .navbar + .nav-mobile + .breadcrumb { padding-top: 92px; } }
/* Keep content present and legible while scrolling; avoid fading text on phones. */
.js-animate .animate, .js-animate .animate-left, .js-animate .animate-right,
.js-animate .animate-scale, .timeline-item { opacity: 1; transform: none; transition: none; }
.hero-bg-image { inset: 0; height: 100%; transform: none !important; will-change: auto; }
.hero-stat-number { font-variant-numeric: tabular-nums; }
video[poster] { aspect-ratio: 9 / 16; height: auto; }
/* The hero photo sits at 25% opacity; a WebP is enough and saves most of the bytes. */
.hero-bg-image { background-image: image-set(url('../img/hero-bg.webp') type('image/webp'), url('../img/hero-bg.jpg?v=2') type('image/jpeg')); }
@media (max-width: 767px) { .hero-bg-image { background-image: image-set(url('../img/hero-bg-mobile.webp') type('image/webp'), url('../img/hero-bg.jpg?v=2') type('image/jpeg')); } }
/* On /fur-unternehmen the contact form is a normal page section, not the application dialog.
   The shared dialog styles (hidden until .open) made the whole form invisible. */
#kontakt.form-section { opacity: 1; visibility: visible; z-index: auto; backdrop-filter: none; -webkit-backdrop-filter: none; }
#kontakt .form-card { opacity: 1; transform: none; max-height: none; overflow: visible; }
/* Two team stories: centre them instead of leaving an empty third column. */
@media (min-width: 1024px) { .stories-grid { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-inline: auto; } }

/* ===== Phone UX round (16 Sept): one bottom bar instead of floating buttons over the text ===== */
@media (max-width: 768px) {
 .whatsapp-float, #whatsappBtn, #backToTop { display: none !important; }
 .sticky-cta.visible { display: flex !important; align-items: center; justify-content: center; gap: 10px; }
 .sticky-cta .btn-primary { flex: 1 1 auto; max-width: 340px !important; width: auto !important; min-height: 52px; display: inline-flex !important; align-items: center; justify-content: center; padding: 12px 16px !important; font-size: 16px !important; }
 .mobile-bar-wa { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; background: #25D366; display: inline-flex; align-items: center; justify-content: center; }
 /* Founder card: photo above the text instead of a one-word-per-line column */
 .about-founder { flex-direction: column; align-items: flex-start !important; padding: 24px !important; }
 /* Team stories and social previews: smaller photos, fewer screens to scroll */
 .story-photo { height: 240px !important; }
 .social-preview { display: none; }
 /* Quality promises: icon above the text so the text gets the full width */
 .quality-item { display: block !important; }
 .quality-icon { margin-bottom: 14px; }
 /* Career ladder: nine steps as a compact two-column grid, long titles stay whole */
 .ladder-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 !important; }
 .ladder-step { width: auto !important; padding: 12px 6px !important; }
 .ladder-step h3 { font-size: 13px; overflow-wrap: normal; }
 .ladder-tag { font-size: 11px; }
}
html { color-scheme: dark; }
a, button, input, select, textarea, label { touch-action: manipulation; }
select { background-color: #1a2238; color: #fff; }
/* Fallback for headings, scaled to Rajdhani: if the web font arrives after the first paint,
   the headline keeps the same line breaks and nothing below it jumps (CLS). */
@font-face { font-family: 'Rajdhani Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Roboto Bold'), local('Roboto-Bold'); font-weight: 700; size-adjust: 80%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
:root { --font-display: 'Rajdhani', 'Rajdhani Fallback', 'Arial Black', sans-serif; }
/* Hero shows three figures: keep them on one row on phones instead of a 2 + 1 grid. */
@media (max-width: 767px) { .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px 8px; padding-inline: 0 !important; } .hero-stat-number { font-size: 24px; } .hero-stat-label { font-size: 11px; } }