/*
Theme Name: EBH Pflege-Entlastungsnetzwerk
Theme URI: https://ebh-pflege.de
Author: EBH GmbH
Author URI: https://ebh-pflege.de
Description: Custom WordPress Theme für das EBH Pflege-Entlastungs- & Betreuungsnetzwerk Dresden und Pirna. Anerkannter Betreuungs- und Entlastungsdienst nach §45a SGB XI.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ebh-theme
Tags: healthcare, german, custom-theme, responsive
*/

/* ============================================================
   EBH Website Styles
   Design: Farbenfroh, Modern, Logo-Adapted, Altersgerecht
   ============================================================ */

:root {
    /* --- Markenfarben --- */
    --color-brand-cyan-dark: #0E5E75;
    --color-brand-cyan-soft: #E6F4F7;
    --color-brand-orange-rich: #D67D00;
    --color-brand-orange-soft: #FFF8F0;
    --color-brand-magenta-deep: #A62669;

    /* --- Neutrales --- */
    --color-text-main: #1F2933;
    --color-text-muted: #4B5563;
    --color-bg-body: #FCFCFA;
    --color-bg-card: #FFFFFF;
    --color-bg-alt: #F3F4F6;
    --color-border-subtle: #E2E8F0;

    /* --- Verwendungsvariablen (Orange = Primärfarbe) --- */
    --bg-body: var(--color-bg-body);
    --bg-section: var(--color-bg-card);
    --bg-alt: var(--color-brand-orange-soft);
    --color-primary-dark: var(--color-brand-orange-rich);
    --color-accent: var(--color-brand-magenta-deep);
    --color-accent-hover: #8B1E5A;
    --color-sec-petrol: var(--color-brand-cyan-dark);

    /* --- Farbvarianten für Seiten (Orange-basierte Primärpalette) --- */
    --forest: #C46800;
    --forest-deep: #7A3800;
    --sage: #F08C00;
    --sage-pale: #FFF3E0;
    --cream: #FCFCFA;
    --warm: #FFF8F0;
    --gold: #D67D00;
    --gold-soft: #FFCC80;
    --text: #1F2933;
    --text-mid: #4B5563;
    --text-light: #6B7280;

    /* --- Gradienten --- */
    --gradient-brand: linear-gradient(135deg, #ED8B00, #D13084, #1AA8CD);
    --gradient-header: linear-gradient(to right, var(--color-brand-orange-rich), #F08C00);

    /* --- Typografie & Layout --- */
    --font-heading: 'Outfit', 'Inter', sans-serif;
    --font-body: 'Inter', 'Open Sans', 'Segoe UI', sans-serif;
    --display: 'Outfit', sans-serif;
    --body: 'Inter', sans-serif;

    --container-width: 1200px;
    --spacing-xs: 0.75rem;
    --spacing-sm: 1.5rem;
    --spacing-md: 3rem;
    --spacing-lg: 5rem;
    --spacing-xl: 7rem;

    --border-radius-card: 16px;
    --border-radius-btn: 8px;
    --radius: 20px;
    --radius-sm: 12px;
    --t: 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);

    --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* --- Reset & Basis --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-body);
    color: var(--color-text-main);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-heading);
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-sm);
    line-height: 1.25;
}

h1 { font-size: 3rem; font-weight: 800; }
h2 { font-size: 2.25rem; font-weight: 700; }
h3 { font-size: 1.5rem; font-weight: 600; }

p {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-muted);
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul { list-style: none; }

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

/* --- Utilities --- */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.text-center { text-align: center; }

.section {
    padding: var(--spacing-xl) 0;
}

/* Background utility classes */
.bg-alt         { background: var(--bg-alt); }
.bg-orange-soft { background: var(--color-brand-orange-soft); }

/* Container width variants */
.container--narrow { max-width: 780px; }
.container--faq    { max-width: 900px; }

/* Section / hero size variants */
.section--padded { padding: var(--spacing-xl) 0; }
.hero--compact   { padding: var(--spacing-md) 0; }
.hero--medium    { padding: var(--spacing-lg) 0; }

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: 0.8rem 2.2rem;
    border-radius: var(--border-radius-btn);
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    z-index: 1;
    font-family: var(--font-body);
    border: none;
}

.btn-primary {
    background: #fff;
    color: var(--color-text-main);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 4px solid var(--color-brand-orange-rich);
    box-shadow: var(--shadow-soft);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--gradient-brand);
    z-index: -1;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: var(--border-radius-btn);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    border-bottom-color: transparent;
    box-shadow: 0 10px 25px rgba(214, 125, 0, 0.4);
    transform: translateY(-2px);
}

.btn-primary:hover::before { opacity: 1; transform: scale(1); }

.btn-outline {
    border: 2px solid var(--color-brand-orange-rich);
    color: var(--color-brand-orange-rich);
    background: transparent;
}

.btn-outline:hover {
    background-color: var(--color-brand-orange-rich);
    color: #fff;
}

.btn-lg {
    font-size: 1.1rem;
    padding: 1rem 2.5rem;
}

/* --- Animationen --- */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s, transform 1s;
    will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.scale-up {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 1s, transform 1s;
}

.scale-up.is-visible {
    opacity: 1;
    transform: scale(1);
}

.fade-in {
    opacity: 0;
    transition: opacity 1.2s ease;
}

.fade-in.is-visible {
    opacity: 1;
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* --- Header --- */
.header {
    background-color: #fff;
    padding: 0.8rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-soft);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link img,
.site-logo {
    height: 70px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    display: block;
}

.nav-menu {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.nav-link {
    color: var(--color-text-main);
    font-weight: 600;
    position: relative;
    padding: 0.5rem 0.5rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Separator between nav and CTA button */
.header-sep {
    width: 1px;
    height: 24px;
    background: var(--color-border-subtle);
    flex-shrink: 0;
    align-self: center;
    margin: 0 0.5rem;
}

/* Header CTA button */
.header-container .btn.btn-primary {
    flex-shrink: 0;
    font-size: 0.9rem;
    padding: 0.55rem 1.4rem;
    white-space: nowrap;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: 0;
    left: 0;
    background: var(--color-brand-orange-rich);
    transition: width 0.3s;
    border-radius: 2px;
}

.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

.nav-link:hover { color: var(--color-brand-orange-rich); }

/* --- Dropdowns --- */
.nav-item-has-children { position: relative; }

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #fff;
    min-width: 220px;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-hover);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 1001;
    border-top: 4px solid var(--color-brand-orange-rich);
}

.nav-item-has-children:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-item {
    display: block;
    padding: 0.8rem 1.2rem;
    color: var(--color-text-main);
    font-weight: 500;
}

.dropdown-item:hover {
    background: var(--color-brand-orange-soft);
    color: var(--color-brand-orange-rich);
    padding-left: 1.5rem;
}

/* --- Mobile Toggle --- */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-main);
    cursor: pointer;
}

/* --- Hero (Startseite) --- */
.hero {
    background: var(--color-brand-orange-soft);
    padding: var(--spacing-xl) 0;
    overflow: hidden;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.hero-text h1 { color: var(--color-text-main); }

.hero-lead {
    color: var(--color-text-muted);
    font-size: 1.25rem;
}

.hero-image-wrapper {
    box-shadow: var(--shadow-hover);
    border-radius: var(--border-radius-card);
    overflow: hidden;
}

.trust-msg {
    display: block;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.trust-msg i { color: var(--color-brand-orange-rich); margin-right: 0.3rem; }

/* --- Stats Strip --- */
.stats-strip {
    background: var(--color-brand-orange-rich);
    padding: 1.5rem 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    text-align: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.stat-item:last-child { border-right: none; }

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    font-family: var(--font-heading);
}

.stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

/* --- Services Overview List (Startseite) --- */
.services-overview-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.6rem 2rem;
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem;
}

.services-overview-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    color: var(--color-text-muted);
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

.services-overview-list li i {
    color: var(--color-brand-orange-rich);
    flex-shrink: 0;
}

/* --- Local Section Intro --- */
.local-intro {
    max-width: 820px;
    margin: 0 auto 2.5rem;
    text-align: center;
    color: var(--color-text-muted);
    line-height: 1.75;
}

.local-intro p { margin-bottom: 1rem; }
.local-intro p:last-child { margin-bottom: 0; }

/* --- Image Placeholder Box --- */
.img-placeholder-box {
    background: var(--color-brand-orange-soft);
    border: 2px dashed var(--color-brand-orange-rich);
    border-radius: var(--border-radius-card);
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.img-placeholder-inner {
    text-align: center;
    padding: 2rem;
    color: var(--color-brand-orange-rich);
}

.img-placeholder-inner i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    opacity: 0.6;
}

.img-placeholder-label {
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 0.25rem;
}

.img-placeholder-hint {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* --- 3-Steps Visual --- */
.steps-visual {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    padding: 2.5rem;
    background: #fff;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-soft);
    height: 100%;
    min-height: 320px;
    justify-content: center;
}

.step-visual-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    position: relative;
}

.step-visual-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-soft);
}

.step-visual-connector {
    position: absolute;
    left: 27px;
    top: 56px;
    width: 2px;
    height: 3rem;
    background: var(--color-border-subtle);
}

/* Gutenberg: letztes Item hat kein .last – letzten Connector via :last-child verbergen */
.step-visual-connector.last,
.step-visual-item:last-child .step-visual-connector { display: none; }

/* Gutenberg rendert Labels als <p>, nicht <span> */
.step-visual-item span,
.step-visual-item > p {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-text-main);
    padding-bottom: 3rem;
    margin-bottom: 0;
}

.step-visual-item:last-child span,
.step-visual-item:last-child > p { padding-bottom: 0; }

/* --- Hero Split (Leistungen, Philosophie) --- */
.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 520px;
    overflow: hidden;
    background: var(--cream);
}

.hero-text-split {
    background: linear-gradient(135deg, var(--forest-deep) 0%, var(--forest) 50%, var(--sage) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 56px;
    position: relative;
}

.hero-text-split::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2l2 3.25L20 20.5z' fill='%23fff' fill-opacity='.03'/%3E%3C/svg%3E");
    pointer-events: none;
}

.hero-text-split .badge {
    display: inline-flex;
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    padding: 6px 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 24px;
    backdrop-filter: blur(6px);
}

.hero-text-split h1 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
    margin-bottom: 18px;
    color: #fff;
}

.hero-text-split p {
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.65;
    opacity: 0.88;
    max-width: 480px;
    color: rgba(255, 255, 255, 0.9);
}

.hero-media {
    position: relative;
    background: var(--warm);
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.hero-media img,
.hero-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Hero Simple (Testimonials) --- */
.hero-simple {
    background: linear-gradient(135deg, #0A3F4F 0%, var(--color-brand-cyan-dark) 60%, #1AA8CD 100%);
    color: #fff;
    text-align: center;
    padding: 80px 24px;
}

.hero-simple h1 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 16px;
    color: #fff;
}

.hero-simple p {
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.1rem;
    opacity: 0.9;
    font-weight: 300;
    color: rgba(255,255,255,0.9);
}

/* --- Hero Image (Vollbild-Hintergrundbild-Hero) --- */
.hero-img {
    position: relative;
    min-height: 440px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
}

.hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transform: scale(1.04);
    transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero-img.is-loaded .hero-bg-img {
    transform: scale(1.0);
}

.hero-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.08) 0%,
        rgba(0,0,0,0.38) 45%,
        rgba(0,0,0,0.68) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.hero-img-content {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    padding: 5rem 1rem 4rem;
}

.hero-img-content h1 {
    color: #fff;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    margin-bottom: 0.75rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.hero-img-content p {
    color: rgba(255,255,255,0.92);
    font-size: 1.15rem;
    max-width: 620px;
    margin: 0 auto;
    font-weight: 300;
    line-height: 1.65;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* --- Services (Startseite) --- */
.services { background: #fff; }

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.service-card {
    background: #fff;
    padding: var(--spacing-md);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--color-border-subtle);
    transition: all 0.3s;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--color-brand-orange-rich);
}

.service-icon {
    font-size: 2.5rem;
    color: var(--color-brand-orange-rich);
    margin-bottom: var(--spacing-sm);
}

/* Abwechselnde Icon-Farben auf der Startseite */
.service-card:nth-child(3n+2) .service-icon { color: var(--color-brand-cyan-dark); }
.service-card:nth-child(3n)   .service-icon { color: var(--color-brand-magenta-deep); }

/* Abwechselnde Hover-Rahmenfarben auf Startseite */
.service-card:nth-child(3n+2):hover { border-color: var(--color-brand-cyan-dark); }
.service-card:nth-child(3n):hover   { border-color: var(--color-brand-magenta-deep); }

.service-benefit {
    color: var(--color-brand-magenta-deep);
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
}

.service-list {
    list-style: disc;
    padding-left: 1.2rem;
    margin-top: 0.75rem;
}

.service-list li {
    color: var(--color-text-muted);
    margin-bottom: 0.3rem;
    font-size: 0.95rem;
}

/* --- Leistungen-Seite (Services Blocks) --- */
.section-split {
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 28px;
}

.section-intro {
    text-align: center;
    margin-bottom: 56px;
}

.section-intro h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    color: var(--color-brand-cyan-dark);
    margin-bottom: 10px;
}

.section-intro p {
    color: var(--text-mid);
    font-size: 1rem;
    max-width: 560px;
    margin: 0 auto;
}

.service-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 64px;
}

.service-block:nth-child(even) .service-image { order: 2; }
.service-block:nth-child(even) .service-content { order: 1; }

.service-image {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--warm);
    position: relative;
}

.service-image img,
.service-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-content .cat-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-brand-magenta-deep);
    margin-bottom: 10px;
}

.service-content h3 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--color-brand-cyan-dark);
    margin-bottom: 14px;
    line-height: 1.25;
}

.service-content p {
    color: var(--text-mid);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 18px;
}

.service-content ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
}

.service-content ul li {
    background: var(--color-brand-cyan-soft);
    color: var(--color-brand-cyan-dark);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 24px;
    transition: background var(--t), color var(--t);
    margin: 0;
}

.service-content ul li:hover {
    background: var(--color-brand-orange-soft);
    color: var(--color-brand-orange-rich);
}

/* --- Video Strip --- */
.video-strip {
    background: var(--color-brand-cyan-dark);
    padding: 56px 28px;
    color: #fff;
}

.video-strip-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
}

.video-slot {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: rgba(255, 255, 255, 0.06);
    position: relative;
}

.video-slot .media-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    font-weight: 500;
}

.video-slot .media-placeholder .play-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: border-color var(--t), transform var(--t);
}

.video-slot:hover .play-circle {
    border-color: var(--gold);
    transform: scale(1.08);
    color: var(--gold);
}

.video-slot video,
.video-slot iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none;
}

.video-text h2 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 14px;
    color: #fff;
}

.video-text p {
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.7;
    opacity: 0.8;
    color: rgba(255, 255, 255, 0.85);
}

/* --- CTA Section --- */
.cta-section {
    text-align: center;
    padding: 64px 28px;
    background: linear-gradient(135deg, #D67D00, #F08C00);
    color: #fff;
}

.cta-section h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 10px;
    color: #fff;
}

.cta-section p {
    font-weight: 300;
    opacity: 0.95;
    margin-bottom: 24px;
    color: #fff;
}

.cta-btn {
    display: inline-block;
    background: var(--gold);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 14px 40px;
    border-radius: 50px;
    text-decoration: none;
    transition: background var(--t), transform var(--t);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.cta-btn:hover {
    background: var(--gold-soft);
    color: var(--text);
    transform: translateY(-2px);
}

/* --- Info Grid --- */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

/* --- Info Section --- */
.info-section { background-color: var(--color-brand-cyan-soft); }

.info-box {
    background: #fff;
    padding: var(--spacing-md);
    border-radius: var(--border-radius-card);
    border-left: 6px solid var(--color-brand-cyan-dark);
}

.faq-lists dt {
    color: var(--color-brand-orange-rich);
    font-weight: 700;
}

/* --- Media Placeholder --- */
.media-placeholder {
    background: var(--color-bg-alt);
    border: 2px dashed var(--color-border-subtle);
    border-radius: var(--border-radius-card);
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    color: var(--color-text-muted);
    flex-direction: column;
    gap: 12px;
    font-size: 0.9rem;
    font-weight: 500;
}

.media-placeholder i {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: var(--color-brand-orange-rich);
    opacity: 0.3;
}

.media-placeholder .icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(214, 125, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--forest);
}

/* --- Lokale Standorte --- */
.local-section { background: #fff; }
/* Reduce bottom padding when section-image is the last element (e.g. homepage local-section) */
.section.local-section { padding-bottom: var(--spacing-md); }
.wp-block-image.section-image:last-child { margin-bottom: 0; }

.local-split {
    border-radius: var(--border-radius-card);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.local-box { padding: var(--spacing-lg); }
.local-box:first-child { background: #FDF2F8; }
.local-box:nth-child(2) { background: #EEF2FF; }

/* --- Feature Cards (3-column card grid) --- */
.feature-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 1.75rem;
}
.feature-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: #fff;
    border-radius: var(--border-radius-card);
    padding: 1.5rem;
    box-shadow: 0 2px 14px rgba(0,0,0,0.07);
    transition: box-shadow 0.2s, transform 0.2s;
}
.feature-item:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.11);
    transform: translateY(-3px);
}
.feature-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: var(--color-brand-orange-soft);
    color: var(--color-brand-orange-rich);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.feature-text h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 0.3rem;
}
.feature-text p {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.65;
}

/* --- Section Header --- */
.section-header {
    max-width: 700px;
    margin: 0 auto var(--spacing-md);
}

/* --- Kontakt Section (Startseite) --- */
.contact { background: var(--color-brand-cyan-soft); }

.contact-wrapper {
    background: #fff;
    border-radius: var(--border-radius-card);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-hover);
    max-width: 800px;
    margin: 0 auto;
}

.contact-content-inner h2 { margin-bottom: 1rem; }

.contact-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* --- Footer --- */
.footer {
    background-color: var(--color-text-main);
    color: #fff;
    padding: 0.8rem 0;
    font-size: 0.85rem;
    border-top: 3px solid transparent;
    border-image: linear-gradient(to right, var(--color-brand-orange-rich), var(--color-brand-magenta-deep), var(--color-brand-cyan-dark)) 1;
}

.footer-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.footer-contact {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.footer-contact a {
    color: #cbd5e1;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s;
}

.footer-contact a:hover {
    color: #fff;
    transform: translateY(-1px);
}

.footer-meta { color: #64748b; font-size: 0.8rem; }

.footer-meta a {
    color: var(--color-brand-cyan-soft);
    text-decoration: none;
    margin: 0 0.3rem;
    transition: color 0.2s;
}

.footer-meta a:hover {
    color: var(--gold-soft);
    text-decoration: underline;
}

/* --- Karte --- */
.map-container {
    width: 100%;
    height: 500px;
    min-height: 400px;
    border-radius: var(--border-radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.leaflet-popup-content-wrapper { border-radius: 8px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); }
.leaflet-popup-content { margin: 0; font-family: var(--font-body); }

.location-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.location-card {
    padding: 2rem;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.location-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }

.location-card-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.location-card h3 { margin-bottom: 0.5rem; color: var(--color-text-main); }

.location-address {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

/* --- Karriere --- */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.benefit-card {
    background: #fff;
    padding: 2rem;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-soft);
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.benefit-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }

.benefit-icon { font-size: 3rem; color: var(--color-brand-orange-rich); margin-bottom: 1rem; }

/* Abwechselnde Icon-Farben auf der Jobs-Seite */
.benefit-card:nth-child(3n+2) .benefit-icon { color: var(--color-brand-cyan-dark); }
.benefit-card:nth-child(3n)   .benefit-icon { color: var(--color-brand-magenta-deep); }
.benefit-card h3 { margin-bottom: 1rem; color: var(--color-text-main); }
.benefit-card p { color: var(--color-text-muted); line-height: 1.6; }

/* ── Job Cards ─────────────────────────────────────────── */
.jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

/* Per-card accent color tokens */
.job-card--orange  { --job-accent: var(--color-brand-orange-rich); --job-accent-soft: var(--color-brand-orange-soft); }
.job-card--cyan    { --job-accent: var(--color-brand-cyan-dark);   --job-accent-soft: var(--color-brand-cyan-soft);   }
.job-card--magenta { --job-accent: var(--color-brand-magenta-deep); --job-accent-soft: #FCEEF6;                       }

.job-card {
    background: #ffffff;
    padding: 2rem 2rem 1.75rem;
    border-radius: var(--border-radius-card);
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.07);
    transition: transform var(--t), box-shadow var(--t);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Top accent stripe */
.job-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--job-accent, var(--color-brand-orange-rich));
    transition: height var(--t);
}

.job-card:hover { transform: translateY(-7px); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.13); }
.job-card:hover::before { height: 6px; }

/* Icon chip */
.job-card-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--job-accent-soft, var(--color-brand-orange-soft));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--job-accent, var(--color-brand-orange-rich));
    margin-bottom: 1.25rem;
    flex-shrink: 0;
    transition: background var(--t), color var(--t), transform var(--t);
}
.job-card:hover .job-card-icon {
    background: var(--job-accent, var(--color-brand-orange-rich));
    color: #ffffff;
    transform: scale(1.08) rotate(-4deg);
}

.job-header { margin-bottom: 0.75rem; }
.job-header h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.job-description {
    color: var(--color-text-muted);
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 1.75rem;
    flex: 1;
}

/* Accent-colored outline CTA */
.apply-btn {
    display: inline-block;
    align-self: flex-start;
    background: transparent;
    border: 2px solid var(--job-accent, var(--color-brand-orange-rich));
    color: var(--job-accent, var(--color-brand-orange-rich));
    padding: 0.55rem 1.5rem;
    border-radius: var(--border-radius-btn);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background var(--t), color var(--t), transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}
.apply-btn:hover {
    background: var(--job-accent, var(--color-brand-orange-rich));
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.team-culture { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.culture-text h2 { margin-bottom: 1.5rem; }

.testimonial {
    background: var(--color-brand-cyan-soft);
    padding: 2rem;
    border-radius: var(--border-radius-card);
    border-left: 4px solid var(--color-brand-cyan-dark);
    margin: 2rem 0;
}

.testimonial p { font-style: italic; color: var(--color-text-main); margin-bottom: 1rem; }
.testimonial cite { font-style: normal; color: var(--color-text-muted); font-weight: 600; }

.culture-values ul { list-style: none; }
.culture-values li { margin-bottom: 0.8rem; line-height: 1.6; }

/* wp:quote in Kultur-Sektion (Jobs-Seite) als Testimonial-Karte */
.culture-text .wp-block-quote {
    background: var(--color-brand-cyan-soft);
    padding: 2rem;
    border-radius: var(--border-radius-card);
    border-left: 4px solid var(--color-brand-cyan-dark);
    margin: 2rem 0;
    font-style: italic;
}
.culture-text .wp-block-quote p { color: var(--color-text-main); margin-bottom: 1rem; }
.culture-text .wp-block-quote cite { font-style: normal; color: var(--color-text-muted); font-weight: 600; display: block; }

/* --- Bewerbungsmodal --- */
/*
 * SCROLL ARCHITECTURE (inner-card scroll)
 * ────────────────────────────────────────────────────────────────────────────
 * The BACKDROP (.application-modal) is the dimming + positioning layer only.
 * It uses display:flex to center the card horizontally and pin it to the top.
 * It has NO overflow — it does NOT scroll.
 *
 * The CARD (.modal-content) is the scroll container:
 *   max-height: 90vh  →  card never exceeds the viewport
 *   overflow-y: auto  →  card scrolls internally when content is taller
 *
 * Why NOT outer-scroll (overflow-y on backdrop)?
 *   On iOS Safari 15 and earlier, position:fixed + overflow-y:auto does not
 *   create a reliable scroll context — the user cannot scroll the overlay.
 *   Inner-card scroll is supported by every browser without exception.
 *
 * Why flex + align-items:flex-start and NOT align-items:center?
 *   align-items:center on an overflow container causes the flex-overflow trap:
 *   content taller than the viewport overflows ABOVE the scroll origin and
 *   cannot be reached. align-items:flex-start pins the card to the top, so
 *   overflow always goes downward and is fully reachable.
 * ────────────────────────────────────────────────────────────────────────────
 */
.application-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 10000;
    overscroll-behavior: contain;  /* prevents background page scroll on scroll chain */
    padding: 1.5rem 1rem;
}

.application-modal.active {
    display: flex !important;
    justify-content: center;    /* horizontal center */
    align-items: flex-start;    /* vertical: card starts at top, never above scroll origin */
    animation: ebhModalIn 0.25s ease;
}

.application-modal.closing {
    animation: ebhModalOut 0.25s ease forwards;
}

@keyframes ebhModalIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ebhModalOut { from { opacity: 1; } to { opacity: 0; } }

.modal-content {
    background: #fff;
    border-radius: 12px;
    max-width: 700px;
    width: 100%;
    /*
     * THE SCROLL CONTAINER.
     * max-height caps the card at 90% of the viewport.
     * overflow-y:auto adds a scrollbar only when content exceeds that height.
     * -webkit-overflow-scrolling:touch enables momentum scroll on iOS.
     * overscroll-behavior:contain stops scroll chaining to the page behind.
     */
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: ebhCardIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    padding-bottom: 1.5rem;
}

@keyframes ebhCardIn {
    from { transform: translateY(32px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.modal-close {
    position: absolute;
    top: 1rem; right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-muted);
    cursor: pointer;
    width: 40px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    z-index: 10;
}

.modal-close:hover { background: rgba(0, 0, 0, 0.05); color: var(--color-text-main); }

.widget-container { padding: 2rem; }

/* Progress Bar */
.progress-bar { display: flex; justify-content: space-between; margin-bottom: 3rem; position: relative; }

.progress-bar::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 10%; right: 10%;
    height: 2px;
    background: linear-gradient(to right, var(--color-brand-orange-rich), var(--color-brand-magenta-deep), var(--color-brand-cyan-dark));
    z-index: 0;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
    flex: 1;
}

.step-number {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #E5E7EB;
    color: #9CA3AF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: all 0.3s;
}

.progress-step.active .step-number { background: var(--color-brand-orange-rich); color: #fff; transform: scale(1.1); }
.progress-step.completed .step-number { background: var(--color-brand-cyan-dark); color: #fff; }
.step-label { font-size: 0.85rem; color: var(--color-text-muted); text-align: center; }
.progress-step.active .step-label { color: var(--color-brand-orange-rich); font-weight: 600; }

/* Widget Steps */
.widget-step { display: none; }
.widget-step.active { display: block; animation: fadeInStep 0.3s ease; }

@keyframes fadeInStep {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.widget-step h2 { margin-bottom: 0.5rem; color: var(--color-text-main); }
.step-intro { color: var(--color-text-muted); margin-bottom: 2rem; }

/* Formularelemente */
.form-group { margin-bottom: 1.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--color-text-main); }

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 1rem;
    font-family: var(--font-body);
    transition: all 0.2s;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-brand-orange-rich);
    box-shadow: 0 0 0 3px rgba(214, 125, 0, 0.1);
}

.form-group small { display: block; margin-top: 0.3rem; color: var(--color-text-muted); font-size: 0.85rem; }

.radio-group, .checkbox-grid { display: flex; flex-direction: column; gap: 0.8rem; }

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.8rem;
}

.radio-label, .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.radio-label:hover, .checkbox-label:hover {
    border-color: var(--color-brand-orange-rich);
    background: rgba(214, 125, 0, 0.02);
}

.radio-label input[type="radio"],
.checkbox-label input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; }

.radio-label input[type="radio"]:checked + span,
.checkbox-label input[type="checkbox"]:checked + span { font-weight: 600; color: var(--color-brand-orange-rich); }

.radio-label:has(input:checked),
.checkbox-label:has(input:checked) {
    border-color: var(--color-brand-orange-rich);
    background: rgba(214, 125, 0, 0.05);
}

input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #E5E7EB;
    outline: none;
    -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--color-brand-orange-rich);
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--color-brand-orange-rich);
    cursor: pointer;
    border: none;
}

.range-value { text-align: center; margin-top: 0.5rem; font-weight: 600; color: var(--color-brand-orange-rich); font-size: 1.1rem; }

/* ── Hidden native file input (replaced by custom zone) ─────────────── */
.ebh-file-input-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Custom upload drop-zone ─────────────────────────────────────────── */
.ebh-upload-zone {
    border: 2px dashed #D1D5DB;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    outline-offset: 3px;
    position: relative;
}

.ebh-upload-zone:hover,
.ebh-upload-zone:focus-visible {
    border-color: var(--color-brand-orange-rich, #D67D00);
    background: rgba(214, 125, 0, 0.03);
}

.ebh-upload-zone--dragover {
    border-color: var(--color-brand-orange-rich, #D67D00);
    background: rgba(214, 125, 0, 0.06);
}

/* Idle state */
.ebh-upload-idle {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ebh-upload-icon {
    color: #9CA3AF;
    flex-shrink: 0;
    transition: color 0.2s;
}
.ebh-upload-zone:hover .ebh-upload-icon,
.ebh-upload-zone:focus-visible .ebh-upload-icon {
    color: var(--color-brand-orange-rich, #D67D00);
}

.ebh-upload-prompt {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.ebh-upload-prompt strong {
    font-size: 0.9rem;
    color: var(--color-text-main, #1F2933);
}
.ebh-upload-prompt small {
    font-size: 0.78rem;
    color: #9CA3AF;
}

/* Selected state */
.ebh-upload-selected-info {
    display: none;
    align-items: center;
    gap: 0.6rem;
}
.ebh-upload-zone--selected .ebh-upload-idle        { display: none; }
.ebh-upload-zone--selected .ebh-upload-selected-info { display: flex; }
.ebh-upload-zone--selected {
    border-color: #22C55E;
    background: #F0FDF4;
}

.ebh-upload-file-icon { color: #22C55E; flex-shrink: 0; }

.ebh-upload-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-main, #1F2933);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
    flex: 1;
}

.ebh-upload-size {
    font-size: 0.78rem;
    color: #6B7280;
    flex-shrink: 0;
}

.ebh-upload-clear {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    color: #9CA3AF;
    cursor: pointer;
    padding: 0 0.2rem;
    flex-shrink: 0;
    transition: color 0.15s;
}
.ebh-upload-clear:hover { color: #EF4444; }

/* Error state */
.ebh-upload-zone--error {
    border-color: #EF4444;
    background: #FEF2F2;
}
.ebh-upload-error {
    font-size: 0.8rem;
    color: #EF4444;
    margin: 0.5rem 0 0;
    min-height: 0;
}
.ebh-upload-error:empty { display: none; }

/* Label optional badge */
.label-optional {
    font-size: 0.78rem;
    font-weight: 400;
    color: #9CA3AF;
}

/* Mobile: stack icon + prompt */
@media (max-width: 480px) {
    .ebh-upload-idle { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .ebh-upload-name { max-width: 160px; }
}

.widget-actions { display: flex; gap: 1rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #E5E7EB; }
.widget-actions .btn { flex: 1; }

/* Summary */
.summary-box { background: var(--bg-body); padding: 2rem; border-radius: 8px; margin-bottom: 2rem; }
.summary-section { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #E5E7EB; }
.summary-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.summary-section h3 { margin-bottom: 0.8rem; color: var(--color-brand-cyan-dark); font-size: 1.1rem; }
.summary-section p { margin-bottom: 0.5rem; color: var(--color-text-main); }

/* Erfolgsmeldung */
.success-screen { text-align: center; padding: 3rem 2rem; }
.success-icon { font-size: 5rem; color: #10B981; margin-bottom: 1.5rem; }
.success-screen h2 { color: var(--color-text-main); margin-bottom: 1rem; }
.success-screen p { color: var(--color-text-muted); margin-bottom: 1rem; line-height: 1.6; }
.success-screen .btn { margin-top: 2rem; }

.knockout-message { margin: 2rem 0; }

.alert { padding: 1.5rem; border-radius: 8px; margin-bottom: 1rem; }
.alert-warning { background: #FEF3C7; border: 1px solid #F59E0B; color: #92400E; }
.alert i { font-size: 1.5rem; margin-bottom: 1rem; }
.alert p { margin-bottom: 1rem; }

/* --- Beratung --- */
.consultation-hero {
    background: linear-gradient(135deg, var(--color-brand-cyan-soft) 0%, #EEF9FB 100%);
    padding: 5rem 0 4rem;
}

.consultation-hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.consultation-hero .hero-text h1 { font-size: 2.8rem; margin-bottom: 1.5rem; color: var(--color-text-main); }
.consultation-hero .hero-lead { font-size: 1.2rem; color: var(--color-text-muted); margin-bottom: 2rem; line-height: 1.6; }

.trust-indicators { display: flex; gap: 2rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 0.8rem; color: var(--color-brand-orange-rich); font-weight: 600; }
.trust-item i { font-size: 1.5rem; }

.direct-contact { margin-top: 2rem; color: var(--color-text-muted); }
.direct-contact a { color: var(--color-brand-orange-rich); text-decoration: none; font-weight: 600; }
.direct-contact a:hover { text-decoration: underline; }

.consultation-image-placeholder {
    background: linear-gradient(135deg, var(--color-brand-orange-soft) 0%, #FFF3E0 100%);
    height: 100%;
    min-height: 400px;
    border-radius: var(--border-radius-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-brand-orange-rich);
    text-align: center;
    padding: 2rem;
}

.consultation-image-placeholder i { font-size: 6rem; margin-bottom: 1.5rem; }
.consultation-image-placeholder p { font-size: 1.2rem; font-weight: 600; }

.consultation-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.info-card {
    background: #fff;
    padding: 2rem;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-soft);
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.info-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }

.info-number {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--color-brand-orange-rich);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 auto 1.5rem;
}

.info-card h3 { margin-bottom: 1rem; color: var(--color-text-main); }
.info-card p { color: var(--color-text-muted); line-height: 1.6; }

.faq-container { max-width: 800px; margin: 2rem auto 0; }

.faq-item {
    background: #fff;
    padding: 2rem;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-soft);
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--color-brand-orange-rich);
}

.faq-item h3 { margin-bottom: 1rem; color: var(--color-brand-orange-rich); font-size: 1.1rem; }
.faq-item p { color: var(--color-text-muted); line-height: 1.6; margin: 0; }
.faq-item a { color: var(--color-brand-orange-rich); text-decoration: none; font-weight: 600; }
.faq-item a:hover { text-decoration: underline; }

/* --- FAQ Accordion (details/summary) --- */
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }

.faq-item {
    background: #fff;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-soft);
    border-left: 4px solid var(--color-brand-orange-rich);
    overflow: hidden;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text-heading);
    list-style: none;
    user-select: none;
}
.faq-question::-webkit-details-marker { display: none; }

.faq-icon {
    font-size: 0.75rem;
    color: var(--color-brand-orange-rich);
    transition: transform 0.25s;
    flex-shrink: 0;
}
details[open] .faq-icon { transform: rotate(180deg); }

.faq-answer {
    padding: 0 1.5rem 1.25rem;
    color: var(--color-text-muted);
    line-height: 1.75;
}
.faq-answer p { margin: 0; }

.emergency-contact { background: var(--bg-body); padding: 2rem; border-radius: var(--border-radius-card); margin-top: 2rem; }
.emergency-contact p { margin-bottom: 0.5rem; }
.emergency-contact .btn { margin-top: 1rem; }

textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 1rem;
    font-family: var(--font-body);
    transition: all 0.2s;
    resize: vertical;
}

textarea:focus {
    outline: none;
    border-color: var(--color-brand-orange-rich);
    box-shadow: 0 0 0 3px rgba(214, 125, 0, 0.1);
}

/* --- Philosophie --- */
.page-content { max-width: 1100px; margin: 0 auto; padding: 80px 24px; }

.philosophy-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 96px;
}

.philosophy-block:nth-child(even) .text-col { order: 2; }
.philosophy-block:nth-child(even) .img-col { order: 1; }

.text-col h2 { font-family: var(--font-heading); font-size: 2rem; color: var(--color-brand-cyan-dark); margin-bottom: 20px; }
.text-col p { color: var(--text-mid); font-size: 1.05rem; line-height: 1.7; margin-bottom: 16px; }

.img-col {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--color-brand-cyan-soft);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.video-container { max-width: 900px; margin: 0 auto; }
.video-container h2 { font-family: var(--font-heading); font-size: 2rem; margin-bottom: 16px; }
.video-container p { margin-bottom: 40px; opacity: 0.9; font-size: 1.1rem; max-width: 600px; margin-left: auto; margin-right: auto; }

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius);
    overflow: hidden;
}

.video-placeholder-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
}

.play-btn {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}

.play-btn:hover { background: var(--gold); transform: scale(1.1); border-color: var(--gold); }

/* --- Kundenmeinungen --- */
.testimonials-section { padding: 80px 24px; background: var(--cream); }

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

.testimonial-card {
    background: #fff;
    padding: 32px;
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    border-left: 3px solid transparent;
}

/* Abwechselnde Akzentfarben für Testimonial-Karten */
.testimonial-card:nth-child(4n+1) { border-left-color: var(--color-brand-orange-rich); }
.testimonial-card:nth-child(4n+2) { border-left-color: var(--color-brand-cyan-dark); }
.testimonial-card:nth-child(4n+3) { border-left-color: var(--color-brand-magenta-deep); }
.testimonial-card:nth-child(4n)   { border-left-color: var(--gold-soft); }

.testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); }

.quote-icon { font-size: 2rem; color: var(--color-brand-magenta-deep); opacity: 0.35; position: absolute; top: 24px; right: 24px; }
.testimonial-text { font-style: italic; color: var(--text-mid); line-height: 1.6; flex-grow: 1; }

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    border-top: 1px solid var(--color-brand-cyan-soft);
    padding-top: 16px;
}

.author-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--color-brand-cyan-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand-cyan-dark);
    font-weight: 700;
    font-size: 1.2rem;
}

.author-info h4 { font-family: var(--font-heading); color: var(--color-brand-cyan-dark); margin: 0; font-size: 1rem; }
.author-info span { font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; }

.media-section { padding: 80px 24px; background: #fff; text-align: center; }
.media-section h2 { color: var(--color-brand-cyan-dark); }

.media-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1000px;
    margin: 40px auto 0;
}

.video-card {
    aspect-ratio: 16/9;
    background: var(--text);
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
}

.play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: background 0.3s;
}

.play-overlay:hover { background: rgba(0, 0, 0, 0.1); }
.play-icon { font-size: 3rem; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); }

/* --- Video-Slot mit Bild-Hintergrund --- */
.video-slot > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-slot-play {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.3s;
}

.video-slot-play:hover { background: rgba(0, 0, 0, 0.5); }

/* --- Kontaktseite Layout --- */
.contact-page-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    margin-top: 2rem;
}

.contact-info-panel {
    background: var(--color-brand-orange-soft);
    border-radius: var(--border-radius-card);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-info-panel h3 {
    color: var(--color-brand-orange-rich);
    margin-bottom: 0.5rem;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.contact-info-item i {
    color: var(--color-brand-orange-rich);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.contact-info-item a {
    color: var(--color-text-main);
    font-weight: 600;
}

.contact-info-item a:hover { color: var(--color-brand-orange-rich); }

/* --- Legal Pages Hero --- */
.hero-legal {
    background: linear-gradient(135deg, var(--color-brand-orange-rich) 0%, #C46800 100%);
    color: #fff;
    padding: 3.5rem 0;
}

.hero-legal h1 {
    color: #fff;
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    margin-bottom: 0.5rem;
}

.hero-legal p {
    color: rgba(255,255,255,0.85);
    font-size: 1rem;
    margin: 0;
}

/* --- Kontaktformular --- */
.contact-form-wrapper {
    max-width: 650px;
    margin: 2rem auto;
    background: #fff;
    padding: 2.5rem;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-soft);
}

.contact-form-wrapper input,
.contact-form-wrapper textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 1rem;
    font-family: var(--font-body);
    margin-top: 0.4rem;
    transition: all 0.2s;
}

.contact-form-wrapper input:focus,
.contact-form-wrapper textarea:focus {
    outline: none;
    border-color: var(--color-brand-orange-rich);
    box-shadow: 0 0 0 3px rgba(214, 125, 0, 0.1);
}

.contact-form-wrapper .form-group { margin-bottom: 1.2rem; }
.contact-form-wrapper .form-group label { font-weight: 600; display: block; }

.contact-notice {
    background: var(--color-brand-cyan-soft);
    padding: 1rem 1.2rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--color-brand-cyan-dark);
}

/* --- Team Page --- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.team-grid--small {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.team-card {
    background: #fff;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s;
    display: flex;
    flex-direction: column;
}

.team-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.team-card--compact {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
}

.team-card-img {
    background: var(--color-brand-orange-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}

.team-card-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    font-family: var(--font-heading);
    margin: 2rem auto;
}

.team-card-avatar--sm {
    width: 52px;
    height: 52px;
    font-size: 1.3rem;
    flex-shrink: 0;
    margin: 0;
}

.team-card-body {
    padding: 1.25rem;
    flex: 1;
}

.team-card--compact .team-card-body {
    padding: 0;
}

.team-card-body h3 {
    font-size: 1.15rem;
    color: var(--color-text-main);
    margin-bottom: 0.2rem;
}

.team-card-body h4 {
    font-size: 1rem;
    color: var(--color-text-main);
    margin-bottom: 0.2rem;
}

.team-card-role {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-brand-magenta-deep);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}

.team-card-body p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.team-card-contact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Team facts row */
.team-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.team-fact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.team-fact-item i {
    font-size: 1.1rem;
}

/* --- Animations für hero-text-split --- */
@keyframes fadeInHero {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUpService {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === RESPONSIVE === */
@media (max-width: 820px) {
    .hero-split { grid-template-columns: 1fr; }
    .hero-media { min-height: 280px; }
    .hero-text-split { padding: 48px 28px; }

    .service-block { grid-template-columns: 1fr; gap: 24px; }
    .service-block:nth-child(even) .service-image { order: 0; }
    .service-block:nth-child(even) .service-content { order: 0; }

    .video-strip-inner { grid-template-columns: 1fr; }

    .philosophy-block { grid-template-columns: 1fr; }
    .philosophy-block:nth-child(even) .text-col { order: 1; }
    .philosophy-block:nth-child(even) .img-col { order: 2; }

    .media-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 0.75rem; margin-bottom: 0.25rem; }
    .stat-item:nth-child(2n) { border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
    .stat-item:nth-last-child(-n+2) { border-bottom: none; }

    .steps-visual { padding: 1.5rem; min-height: auto; }

    .header-sep { display: none; }

    .team-grid, .team-grid--small { grid-template-columns: 1fr; }
    .team-card--compact { flex-direction: row; }
    .team-facts { flex-direction: column; gap: 0.75rem; }

    .services-overview-list { grid-template-columns: 1fr; }

    .hero-img { min-height: 320px; }
    .contact-page-layout { grid-template-columns: 1fr; gap: 1.5rem; }
    .hero-img-content { padding: 3.5rem 1rem 3rem; }
    .hero-img-content h1 { font-size: 1.9rem; }
    .hero-img-content p { font-size: 1rem; }

    .mobile-menu-toggle { display: block; }

    .logo-link img,
    .site-logo { height: 50px; max-width: 160px; }

    .nav-menu {
        position: fixed;
        top: 70px; left: 0; right: 0;
        background: #fff;
        flex-direction: column;
        padding: 2rem;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transform: translateY(-150%);
        transition: transform 0.3s;
        z-index: 999;
    }

    .nav-menu.active { transform: translateY(0); }

    .hero-content,
    .info-grid,
    .local-split,
    .consultation-hero-content,
    .team-culture { grid-template-columns: 1fr; }

    .map-container { height: 400px; min-height: 300px; }
    .location-cards { grid-template-columns: 1fr; gap: 1.5rem; }

    .footer-bar { flex-direction: column; text-align: center; }
    .footer-contact { flex-direction: column; gap: 0.5rem; }

    .benefits-grid, .jobs-grid { grid-template-columns: 1fr; }
    .feature-list { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .progress-bar { flex-wrap: wrap; }
    .step-label { font-size: 0.75rem; }
    .widget-container { padding: 1.5rem; }
    .widget-actions { flex-direction: column; }
    .checkbox-grid { grid-template-columns: 1fr; }
    .application-modal { padding: 0.75rem 0.5rem; }
    /* max-height REMOVED – backdrop overflow-y:auto handles all scrolling */

    .consultation-hero { padding: 3rem 0 2rem; }
    .consultation-hero .hero-text h1 { font-size: 2rem; }
    .trust-indicators { flex-direction: column; gap: 1rem; }
    .consultation-info-grid { grid-template-columns: 1fr; }
    .consultation-image-placeholder { min-height: 300px; }
}

/* --- Skip to Content Link (WCAG 2.1) --- */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary-dark);
    color: white;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--border-radius-btn) 0;
    transition: top 0.2s;
}
.skip-to-content:focus {
    top: 0;
}

/* --- Dropdown Toggle Button Reset --- */
.nav-dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    padding: 0;
}

/* --- Popup Link Hover (map.js) --- */
.popup-link:hover {
    opacity: 0.8;
}

/* --- Section Images --- */
.section-image {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--border-radius-card);
    box-shadow: 0 8px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.07);
    display: block;
    margin: 1.75rem 0;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.5s ease;
}

.section-image:hover {
    transform: translateY(-4px) scale(1.012);
    box-shadow: 0 18px 50px rgba(0,0,0,0.16), 0 4px 12px rgba(0,0,0,0.09);
}

/* ─── Image Frame (Zoom-on-Hover für Grid-Bilder) ─────────────────────── */
.img-frame {
    border-radius: var(--border-radius-card);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.img-frame:hover {
    box-shadow: 0 18px 50px rgba(0,0,0,0.17), 0 4px 14px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}

.img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.img-frame:hover img {
    transform: scale(1.05);
}

/* ─── Info-Grid Bilder ───────────────────────────────────────────────── */
.info-grid > div > img,
.info-grid > div > .reveal-on-scroll > img,
.info-grid img:not(.section-image) {
    border-radius: var(--border-radius-card);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.5s ease;
}

.info-grid > div > img:hover,
.info-grid > div > .reveal-on-scroll > img:hover,
.info-grid img:not(.section-image):hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 44px rgba(0,0,0,0.16);
}

/* ─── Info-Box Hover ─────────────────────────────────────────────────── */
.info-box {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

/* ─── Section Header – Gradient-Unterstriche ────────────────────────── */
.section-header h2 {
    position: relative;
    padding-bottom: 1rem;
}

.section-header h2::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: var(--gradient-brand);
    border-radius: 2px;
    margin: 0.7rem auto 0;
}

/* ─── Lazy-Loading Fade-In ───────────────────────────────────────────── */
@keyframes imgFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

img[loading="lazy"] {
    animation: imgFadeIn 0.6s ease both;
}

/* ─── Delay-Utilities ────────────────────────────────────────────────── */
.delay-50  { transition-delay:  50ms; }
.delay-150 { transition-delay: 150ms; }

/* ─── Hero-Image-Wrapper (Startseite Split-Hero) ─────────────────────── */
.hero-image-wrapper {
    border-radius: var(--border-radius-card);
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0,0,0,0.16);
}

.hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    max-height: 460px;
    margin: 0;
}

.hero-image-wrapper:hover img {
    transform: scale(1.04);
}

/* ─── Team-Card Bild ─────────────────────────────────────────────────── */
.team-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(0,0,0,0.12);
}

/* ─── CTA-Section ────────────────────────────────────────────────────── */
.cta-section {
    background: linear-gradient(135deg,
        var(--color-brand-orange-rich) 0%,
        #C46800 40%,
        #A62669 100%
    );
}


/* =============================================================================
   EBH DESIGN ENHANCEMENTS v2
   - Slide-in animations
   - Cinematic image treatment
   - Typography refinements
   - Enhanced hero overlays
   ============================================================================= */

/* --- Slide-In Animations --- */
.slide-in-left {
    opacity: 0;
    transform: translateX(-48px);
    transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

.slide-in-right {
    opacity: 0;
    transform: translateX(48px);
    transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

.slide-in-left.is-visible,
.slide-in-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right.delay-200 { transition-delay: 200ms; }
.slide-in-left.delay-200  { transition-delay: 200ms; }

/* --- Enhanced Hero Overlay (cinematic dark-to-brand gradient) --- */
.hero-img::after {
    background: linear-gradient(
        165deg,
        rgba(0, 0, 0, 0.04) 0%,
        rgba(0, 0, 0, 0.42) 45%,
        rgba(14, 94, 117, 0.60) 100%
    ) !important;
}

/* --- Hero Image Color Lift --- */
.hero-image-wrapper img {
    filter: contrast(1.04) saturate(1.08) brightness(1.01);
}

.hero-bg-img {
    filter: contrast(1.03) saturate(1.06);
}

/* --- Section + Service Images: Subtle Warmth --- */
.section-image {
    filter: contrast(1.02) saturate(1.04);
}

.service-image img {
    filter: contrast(1.03) saturate(1.05);
    transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
                filter 0.65s ease;
}

.service-image:hover img {
    filter: contrast(1.05) saturate(1.10) brightness(1.02);
}

/* --- Typography Refinements --- */
h1 {
    letter-spacing: -0.025em;
}

h2 {
    letter-spacing: -0.015em;
}

.hero-text h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    letter-spacing: -0.03em;
    line-height: 1.18;
}

.hero-lead {
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    line-height: 1.65;
}

.hero-text-split h1 {
    letter-spacing: -0.02em;
}

/* --- Section Header: Wider gradient underline --- */
.section-header h2::after {
    width: 72px;
    height: 4px;
    background: var(--gradient-brand);
    border-radius: 3px;
    margin: 0.85rem auto 0;
}

/* --- Info-Grid: Vertically centered --- */
.info-grid {
    align-items: center;
}

/* --- Stats Numbers: Larger & tighter --- */
.stat-number {
    font-size: 2.4rem;
    letter-spacing: -0.02em;
}

/* --- Service Image: Subtle brand overlay on hover --- */
.service-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 55%,
        rgba(14, 94, 117, 0.18) 100%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    border-radius: var(--radius);
}

.service-image:hover::after {
    opacity: 1;
}

/* --- Hero Image Wrapper: 3D-tilt presentation --- */
.hero-image-wrapper {
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22), 0 8px 20px rgba(0, 0, 0, 0.12);
    transform: perspective(1000px) rotateY(-1.5deg);
    transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.8s ease;
}

.hero-image-wrapper:hover {
    transform: perspective(1000px) rotateY(0deg);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.24), 0 12px 28px rgba(0, 0, 0, 0.14);
}

/* --- Delay extensions --- */
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }

/* --- Mobile: Disable 3D, convert slide to fade-up --- */
@media (max-width: 768px) {
    .hero-image-wrapper {
        transform: none;
    }
    .hero-image-wrapper:hover {
        transform: none;
    }
    .slide-in-left,
    .slide-in-right {
        transform: translateY(24px);
    }
    .slide-in-left.is-visible,
    .slide-in-right.is-visible {
        transform: translateY(0);
    }
}


/* ═══════════════════════════════════════════════════════════════
   Cookie-Banner (DSGVO) – Slide-in Bottom Bar
   ═══════════════════════════════════════════════════════════════ */

#ebh-cookie-banner {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 99999;
    background: #ffffff;
    border-top: 3px solid var(--color-brand-orange-rich, #D67D00);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.13);
    /* translateY(0): Banner ist IMMER sichtbar – kein .show-Toggle mehr nötig.
       JavaScript entfernt das Element aus dem DOM, wenn Consent bereits vorliegt
       (synchron, vor dem ersten Paint). dismissBanner() setzt per Inline-Style
       translateY(110%) für den Slide-Out. */
    transform: translateY(0);
    transition: transform 0.4s ease-in-out;
}

.ebh-cookie-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 1.125rem 1.5rem;
}

.ebh-cookie-text {
    flex: 1;
    min-width: 240px;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-main, #1F2933);
}

.ebh-cookie-text p {
    margin: 0 0 0.35rem;
}

.ebh-cookie-text p:last-child {
    margin-bottom: 0;
}

.ebh-cookie-text strong {
    color: var(--color-brand-cyan-dark, #0E5E75);
}

.ebh-cookie-link {
    color: var(--color-brand-orange-rich, #D67D00);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ebh-cookie-link:hover {
    color: #b86b00;
}

.ebh-cookie-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.ebh-cookie-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    border: 2px solid transparent;
    white-space: nowrap;
    line-height: 1.4;
    font-family: inherit;
}

.ebh-cookie-btn:focus-visible {
    outline: 3px solid var(--color-brand-orange-rich, #D67D00);
    outline-offset: 3px;
}

.ebh-cookie-btn--primary {
    background: var(--color-brand-orange-rich, #D67D00);
    color: #ffffff;
    border-color: var(--color-brand-orange-rich, #D67D00);
}

.ebh-cookie-btn--primary:hover {
    background: #b86b00;
    border-color: #b86b00;
}

.ebh-cookie-btn--outline {
    background: transparent;
    color: var(--color-text-main, #1F2933);
    border-color: var(--color-border-subtle, #E2E8F0);
}

.ebh-cookie-btn--outline:hover {
    border-color: var(--color-brand-orange-rich, #D67D00);
    color: var(--color-brand-orange-rich, #D67D00);
}

/* Ghost-Variante: dezenter Text-Button für "Einstellungen" */
.ebh-cookie-btn--ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-main, #1F2933);
    text-decoration: underline;
    text-decoration-color: rgba(31, 41, 51, 0.35);
}
.ebh-cookie-btn--ghost:hover,
.ebh-cookie-btn--ghost:focus-visible {
    color: var(--color-brand-orange-rich, #D67D00);
    text-decoration-color: var(--color-brand-orange-rich, #D67D00);
    background: transparent;
}

/* Einstellungs-Panel */
.ebh-cookie-settings-panel {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: #fafafa;
    padding: 1rem 1.5rem 1.25rem;
}

.ebh-cookie-settings-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.ebh-cookie-category {
    padding: 0.625rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ebh-cookie-category:last-of-type {
    border-bottom: none;
}

.ebh-cookie-category-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-main, #1F2933);
}

.ebh-cookie-category-label input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    flex-shrink: 0;
}

.ebh-cookie-category-label input[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}

.ebh-cookie-category-name {
    flex: 1;
}

.ebh-cookie-category-always {
    font-size: 0.75rem;
    font-weight: 500;
    color: #4B7B5E;
    background: #e6f4ec;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.ebh-cookie-category-desc {
    margin: 0.3rem 0 0 1.5rem;
    font-size: 0.8125rem;
    color: #6B7280;
    line-height: 1.5;
}

.ebh-cookie-settings-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.5rem;
}

@media (max-width: 640px) {
    .ebh-cookie-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.875rem;
        padding: 1rem;
    }

    .ebh-cookie-actions {
        justify-content: stretch;
    }

    .ebh-cookie-btn {
        flex: 1;
        text-align: center;
    }

    .ebh-cookie-settings-panel {
        padding: 0.875rem 1rem 1rem;
    }

    .ebh-cookie-settings-footer {
        justify-content: stretch;
    }

    .ebh-cookie-settings-footer .ebh-cookie-btn {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════
   Werte-Section (Team-Seite) – Drei Kernwerte
   ═══════════════════════════════════════════════════════════ */

.values-section {
    background: var(--color-brand-cyan-soft);
}

/* Per-card color tokens */
.value-card--orange  { --vc-accent: var(--color-brand-orange-rich); --vc-soft: var(--color-brand-orange-soft); }
.value-card--magenta { --vc-accent: var(--color-brand-magenta-deep); --vc-soft: #FCEEF6; }
.value-card--cyan    { --vc-accent: var(--color-brand-cyan-dark); --vc-soft: #d4ecf2; }

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.value-card {
    background: #fff;
    padding: 2.5rem 2rem 2rem;
    border-radius: var(--border-radius-card);
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.07);
    border: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
    transition: transform var(--t), box-shadow var(--t);
}

/* Top accent stripe */
.value-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--vc-accent);
    transition: height var(--t);
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
}

.value-card:hover::before { height: 6px; }

/* Decorative background number */
.value-card-num {
    position: absolute;
    top: 0.6rem;
    right: 1.25rem;
    font-size: 5.5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--vc-accent);
    opacity: 0.07;
    font-family: var(--font-heading);
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.04em;
}

/* Icon chip */
.value-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: var(--vc-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--vc-accent);
    margin-bottom: 1.5rem;
    flex-shrink: 0;
    transition: background var(--t), color var(--t), transform var(--t);
}

.value-card:hover .value-card-icon {
    background: var(--vc-accent);
    color: #fff;
    transform: scale(1.08) rotate(-4deg);
}

.value-card h3 {
    font-size: 1.25rem;
    color: var(--color-text-main);
    margin-bottom: 0.5rem;
}

.value-card-tagline {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--vc-accent);
    margin-bottom: 0.75rem;
    letter-spacing: 0.01em;
}

.value-card p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0;
}

/* Supporting image */
.values-image-wrap {
    border-radius: var(--border-radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-hover);
    aspect-ratio: 16 / 6;
    max-height: 360px;
}

.values-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.values-image-wrap:hover img {
    transform: scale(1.03);
}

@media (max-width: 768px) {
    .values-image-wrap {
        aspect-ratio: 4 / 3;
        max-height: none;
    }
}

/* ══════════════════════════════════════════════════════
   Gutenberg-Block-Kompatibilität
   Stellt sicher, dass native wp-Block-Wrapper (figure,
   div.wp-block-group) das bestehende CSS nicht brechen.
   ══════════════════════════════════════════════════════ */

/* ── Bilder in Fill-Containern (volle Größe, kein Abstand) ── */
.hero-media > .wp-block-image,
.hero-image-wrapper > .wp-block-image,
.service-image > .wp-block-image,
.culture-image > .wp-block-image {
    width: 100%;
    height: 100%;
    margin: 0;
}
.hero-media > .wp-block-image img,
.hero-image-wrapper > .wp-block-image img,
.service-image > .wp-block-image img,
.culture-image > .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── img-col (Philosophie): absolut positioniertes Bild ── */
.img-col > .wp-block-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}
.img-col > .wp-block-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── hero-img: absolut positioniertes Hintergrundbild ── */
.hero-img > .wp-block-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 0;
}
.hero-img > .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transform: scale(1.04);
    transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-img.is-loaded > .wp-block-image img {
    transform: scale(1.0);
}

/* ── Section-Image (redaktionelles Breitbild) ── */
.wp-block-image.section-image {
    margin: 1.75rem 0;
}
.wp-block-image.section-image img {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--border-radius-card);
    box-shadow: 0 8px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.07);
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.5s ease;
}
.wp-block-image.section-image:hover img {
    transform: translateY(-4px) scale(1.012);
    box-shadow: 0 18px 50px rgba(0,0,0,0.16), 0 4px 12px rgba(0,0,0,0.09);
}

/* ── Info-Grid: Bilder mit wp:image-Wrapper ── */
.info-grid .wp-block-image:not(.section-image) img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius-card);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.5s ease;
}
.info-grid .wp-block-image:not(.section-image):hover img {
    transform: translateY(-4px);
    box-shadow: 0 16px 44px rgba(0,0,0,0.16);
}

/* ── Inline-Links (btn) in Paragraphen ── */
p > a.btn,
.wp-block-paragraph > a.btn {
    display: inline-block;
}

/* ── Hintergrund-Utility-Klassen für wp:group Blöcke ── */
.bg-alt { background: var(--color-bg-alt); }
.bg-orange-soft { background-color: var(--color-brand-orange-soft); }

/* ── Consultation-Hero Bild ── */
.hero-image > .wp-block-image { width: 100%; height: 100%; margin: 0; }
.hero-image > .wp-block-image img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; border-radius: var(--border-radius-card); box-shadow: var(--shadow-hover); display: block; }

/* ── Native Block Buttons (wp:button mit className="btn-primary / btn-outline") ──
   Wrapper-div: btn-primary/btn-outline Styles neutralisieren (nur Link soll sichtbar sein) */
.wp-block-button.btn-primary,
.wp-block-button.btn-outline {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.wp-block-button.btn-primary .wp-block-button__link,
.wp-block-button.btn-outline .wp-block-button__link {
    padding: 0.8rem 2.2rem;
    border-radius: var(--border-radius-btn);
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-family: var(--font-body);
    text-decoration: none;
    display: inline-block;
}

.wp-block-button.btn-primary .wp-block-button__link {
    background: #fff;
    color: var(--color-text-main);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 4px solid var(--color-brand-orange-rich);
    box-shadow: var(--shadow-soft);
}

.wp-block-button.btn-primary .wp-block-button__link:hover,
.wp-block-button.btn-primary .wp-block-button__link:focus {
    background: var(--gradient-brand);
    color: #fff;
    border-bottom-color: transparent;
    box-shadow: 0 10px 25px rgba(214, 125, 0, 0.4);
    transform: translateY(-2px);
}

.wp-block-button.btn-outline .wp-block-button__link {
    border: 2px solid var(--color-brand-orange-rich);
    color: var(--color-brand-orange-rich);
    background: transparent;
}

.wp-block-button.btn-outline .wp-block-button__link:hover {
    background-color: var(--color-brand-orange-rich);
    color: #fff;
}

/* CTA-Bereich: Buttons auf orange Hintergrund */
.cta-section .wp-block-button.btn-primary .wp-block-button__link {
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-brand-orange-rich);
    border: none;
    border-radius: 50px;
    padding: 14px 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.cta-section .wp-block-button.btn-primary .wp-block-button__link:hover {
    background: #fff;
    color: var(--color-brand-orange-rich);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.cta-section .wp-block-button.btn-outline .wp-block-button__link {
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: #fff;
    background: transparent;
    border-radius: 50px;
    padding: 14px 40px;
}

.cta-section .wp-block-button.btn-outline .wp-block-button__link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ── Native Block FAQ (wp:details mit className="faq-item") ── */
.faq-list .wp-block-details {
    background: #fff;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-soft);
    border-left: 4px solid var(--color-brand-orange-rich);
    overflow: hidden;
}

.faq-list .wp-block-details > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 1.5rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text-main);
    list-style: none;
    user-select: none;
}

.faq-list .wp-block-details > summary::-webkit-details-marker { display: none; }

.faq-list .wp-block-details > summary::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.75rem;
    color: var(--color-brand-orange-rich);
    transition: transform 0.25s;
    flex-shrink: 0;
}

.faq-list .wp-block-details[open] > summary::after {
    transform: rotate(180deg);
}

.faq-list .wp-block-details > p {
    padding: 0 1.5rem 1.25rem;
    color: var(--color-text-muted);
    line-height: 1.75;
    margin: 0;
}

/* ── v6: Native-Block-Hilfsklassen (keine inline-styles in Blöcken) ── */

/* Breiten-Overrides für container ohne inline-style */
.container--narrow { max-width: 820px; }
.container--faq    { max-width: 860px; }

/* Padding-Overrides für Sections ohne inline-style */
.section--padded   { padding: 4rem 0; }
.hero--compact     { padding: 3rem 0 2rem; }
.hero--medium      { padding: 3rem 0; }

/* Testimonials */
.testimonial-quote  { font-style: italic; font-size: 1.05rem; margin-bottom: 1rem; }
.testimonial-author { font-weight: 600; color: var(--color-brand-cyan-dark); }

/* ── v5: Native-Block-Hilfsklassen ── */

/* Step-Icon-Farbklassen */
.step-icon-orange { background: var(--color-brand-orange-rich); }
.step-icon-magenta { background: var(--color-brand-magenta-deep); }
.step-icon-cyan    { background: var(--color-brand-cyan-dark); }

/* Location-Card-Hintergrundklassen */
.location-card--pink   { background: #FDF2F8; }
.location-card--indigo { background: #EEF2FF; }

/* Apply-Button: Accent-Outline-Stil wie im Original (verwendet --job-accent vom Job-Card-Parent) */
.wp-block-button.apply-btn .wp-block-button__link {
    display: inline-block;
    background: transparent;
    border: 2px solid var(--job-accent, var(--color-brand-orange-rich));
    color: var(--job-accent, var(--color-brand-orange-rich));
    padding: 0.55rem 1.5rem;
    border-radius: var(--border-radius-btn);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.wp-block-button.apply-btn .wp-block-button__link:hover {
    background: var(--job-accent, var(--color-brand-orange-rich));
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* btn-lg für native wp:button-Blöcke */
.wp-block-button.btn-lg .wp-block-button__link {
    font-size: 1.1rem;
    padding: 1rem 2.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   GUTENBERG LAYOUT FIXES v9
   Layout-Fixes für is-layout-flow Margin-Interferenz und Grid-Blöcke
   ═══════════════════════════════════════════════════════════════ */

/* ── Neutralize WordPress is-layout-flow margin-block-start
   in Grid-Containern (hero-content, philosophy-block, consultation-hero-content)
   Verhindert zusätzliche Abstände zwischen Grid-Spalten ── */
.hero-content > .wp-block-group,
.hero-split > .wp-block-group,
.consultation-hero-content > .wp-block-group,
.philosophy-block > .wp-block-group,
.team-culture > .wp-block-group,
.service-block > .wp-block-group,
.service-block > .wp-block-image,
.info-grid > .wp-block-group,
.benefits-grid > .wp-block-group,
.jobs-grid > .wp-block-group,
.consultation-info-grid > .wp-block-group {
    margin-block-start: 0 !important;
}

/* ── wp:columns mit info-grid: CSS-Grid statt Gutenberg-Flex ──
   Gutenberg rendert wp:columns als Flexbox. Wir erzwingen Grid,
   damit die 2-Spalten-Layouts korrekt gerendert werden. */
.wp-block-columns.info-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}
.wp-block-columns.info-grid > .wp-block-column {
    min-width: 0;
}

/* ── Philosophy-Block: Tablet-Abstand ── */
@media (max-width: 820px) {
    .philosophy-block { margin-bottom: 3rem; }

    /* info-grid auf Tablet: kleinerer Gap */
    .info-grid,
    .wp-block-columns.info-grid { gap: 2.5rem; }
}

/* ── 768px – Mobile-Layout-Fixes ── */
@media (max-width: 768px) {

    /* --- Gutenberg Columns: erzwinge 1-Spalte --- */
    .wp-block-columns.info-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* --- Info-Box: Padding reduzieren --- */
    .info-box { padding: 1.5rem; }

    /* --- img-col (Philosophie): Mindesthöhe auf Mobile --- */
    .img-col { min-height: 280px; }

    /* --- Philosophy-Block: Margin reduzieren --- */
    .philosophy-block { margin-bottom: 2.5rem; gap: 2rem; }

    /* --- Hero-Padding auf Mobile --- */
    .hero { padding: 3rem 0 2rem; }

    /* --- Section-Padding reduzieren --- */
    .section { padding: 3rem 0; }
    .section--padded { padding: 3rem 0; }
    .hero--compact { padding: 2rem 0 1.5rem; }
    .hero--medium  { padding: 2rem 0; }

    /* --- Hero Buttons stacken --- */
    .hero-text .wp-block-buttons,
    .hero-text-split .wp-block-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    /* --- Beratungs-Hero: Trust-Indikatoren --- */
    .trust-indicators { flex-direction: column; gap: 0.75rem; }

    /* --- CTA Section: Buttons stacken --- */
    .cta-section .wp-block-buttons {
        flex-direction: column;
        align-items: center;
    }
    .cta-section .wp-block-button .wp-block-button__link {
        display: block;
        width: 100%;
        max-width: 360px;
        text-align: center;
        box-sizing: border-box;
    }

    /* --- Page Content (Philosophie): Abstände --- */
    .page-content { padding: 2rem 0; }

    /* --- FAQ: Schrift etwas kleiner --- */
    .faq-list .wp-block-details > summary {
        font-size: 0.95rem;
        padding: 1rem 1.25rem;
    }

    /* --- Consultation Info Grid --- */
    .consultation-info-grid { grid-template-columns: 1fr; gap: 1rem; }

    /* --- Hero-Image Wrapper: kein 3D-Tilt, angemessene Höhe --- */
    .hero-image-wrapper { min-height: 260px; }

    /* --- Testimonial-Schrift --- */
    .testimonial-quote  { font-size: 0.975rem; }
    .testimonial-author { font-size: 0.9rem; }

    /* --- Job Cards: volle Breite --- */
    .job-card { min-height: auto; }

    /* --- Container narrow/faq: auf Mobile kein max-width --- */
    .container--narrow,
    .container--faq { max-width: 100%; }
}

/* ── 480px – Kleine Smartphones (iPhone SE, Galaxy A03 etc.) ── */
@media (max-width: 480px) {

    /* --- Typografie: kompakter --- */
    h1 { font-size: 1.75rem; line-height: 1.25; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.1rem; }

    .hero-text h1,
    .hero-text-split h1 { font-size: 1.65rem; }

    .consultation-hero .hero-text h1 { font-size: 1.6rem; }

    /* --- Container: engere Ränder --- */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* --- Sections --- */
    .hero  { padding: 2rem 0; }
    .section { padding: 2.5rem 0; }
    .cta-section { padding: 2.5rem 0; }
    .hero-text-split { padding: 2rem 1rem; }

    /* --- Info-Box: noch kompakter --- */
    .info-box { padding: 1.25rem 1rem; }

    /* --- Buttons: kleiner auf winzigen Screens --- */
    .wp-block-button.btn-primary .wp-block-button__link,
    .wp-block-button.btn-outline .wp-block-button__link {
        padding: 0.7rem 1.5rem;
        font-size: 0.95rem;
    }
    .cta-section .wp-block-button .wp-block-button__link {
        padding: 12px 28px;
    }
    .wp-block-button.btn-lg .wp-block-button__link {
        font-size: 1rem;
        padding: 0.85rem 1.75rem;
    }

    /* --- Hero Images: Mindesthöhe --- */
    .hero-media { min-height: 240px; }
    .hero-image-wrapper { min-height: 220px; }

    /* --- FAQ: noch kompakter --- */
    .faq-list .wp-block-details > summary {
        font-size: 0.875rem;
        padding: 0.875rem 1rem;
    }
    .faq-list .wp-block-details > p {
        padding: 0 1rem 1rem;
        font-size: 0.9rem;
    }

    /* --- Location Cards: kompakter --- */
    .location-card { padding: 1.5rem 1.25rem; }

    /* --- Apply-Button in Job Cards --- */
    .wp-block-button.apply-btn .wp-block-button__link {
        padding: 0.65rem 1.25rem;
    }

    /* --- Testimonials --- */
    .testimonial-quote  { font-size: 0.9rem; }

    /* --- Services Overview List --- */
    .services-overview-list { gap: 0.5rem; }

    /* --- Stats Grid: 2×2 auf kleinen Screens --- */
    .stats-grid { grid-template-columns: 1fr 1fr; }

    /* --- Mobile Nav: header offset --- */
    .nav-menu { top: 60px; }

    /* --- hero-img: Höhe reduzieren --- */
    .hero-img { min-height: 280px; }
    .hero-img-content h1 { font-size: 1.65rem; }

    /* --- Hero-Lead: etwas kleiner --- */
    .hero-lead { font-size: 1rem; }

    /* --- Consultation-Hero Lead --- */
    .consultation-hero .hero-lead { font-size: 0.95rem; }

    /* --- Benefit-Cards: Icon kleiner --- */
    .benefit-icon i { font-size: 1.5rem; }

    /* --- Section-Image: max-height reduzieren --- */
    .wp-block-image.section-image img { max-height: 320px; }
}

/* ============================================================
   BLOCK-CSS SAFETY-NET  v10
   Neutralisiert Gutenberg-Block-Wrapper – wp-block-library ist
   dequeued, daher keine Gutenberg-Styles aktiv. Theme-CSS übernimmt.
   ============================================================ */

/* WICHTIG: KEIN display:block auf wp-block-group / wp-block-columns /
   wp-block-column — das würde Theme-Klassen mit display:grid/flex
   (info-grid, philosophy-block, team-culture, service-block, hero-img …)
   überschreiben, da diese Regeln später in der Datei stehen.
   Divs sind ohnehin display:block per Browser-Standard. */

/* is-layout-* Klassen: KEIN display-Override – Theme-CSS setzt den richtigen Wert.
   display:revert würde alle Author-CSS-Regeln ignorieren und zu Browser-Defaults
   zurückfallen → info-grid, philosophy-block, team-culture usw. wären kaputt.
   Da wp-block-library dequeued ist, haben diese Klassen ohnehin keine WP-Styles. */

/* Abstände für Block-Wrapper zurücksetzen.
   KEIN wp-block-paragraph hier – das würde kontext-spezifische margin-Regeln
   (info-number, testimonial-quote, …) überschreiben. Prose-Seiten (Impressum
   etc.) behalten so den Browser-Standard für Absatz-Abstände. */
.wp-block-image,
.wp-block-heading,
.wp-block-button,
.wp-block-details {
    margin: 0;
    padding: 0;
}

/* wp-block-list: nur margin zurücksetzen, list-style bleibt
   (service-content/culture-values etc. haben eigene list-style:none Regeln) */
.wp-block-list {
    margin: 0;
    padding-left: 1.5rem;
}

/* Listen mit Layout-CSS aus dem Hauptstylesheet: kein Einzug */
.services-overview-list { padding: 0; }

/* Checkmark für pure Gutenberg wp:list-item (kein <i> verfügbar) */
.services-overview-list li::before {
    content: '\2713';
    color: var(--color-brand-orange-rich);
    font-weight: 700;
    flex-shrink: 0;
    font-size: 0.9rem;
}

/* ── wp:buttons: Flex-Layout ── */
.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* section-image: Abstände wiederherstellen – figure.wp-block-image{margin:0} hat
   niedrigere Spezifizität (0,1,1), daher muss hier explizit überschrieben werden.
   Standalone Section-Bilder brauchen margin; Container-Bilder haben eigene Regeln. */
.wp-block-image.section-image {
    width: 100%;
    display: block;
    margin: 1.75rem 0;
}
.wp-block-image.section-image img {
    width: 100%;
    border-radius: var(--border-radius-card);
    max-height: 420px;
    object-fit: cover;
    display: block;
}

/* wp-block-heading: nur Schriftfamilie – keine globale Farbüberschreibung.
   Kontext-spezifische Farbregeln (.text-col h2, .section-intro h2, …)
   setzen die jeweils korrekte Farbe. */
.wp-block-heading { font-family: var(--font-heading); }

/* Block-Image: figure-Element */
figure.wp-block-image {
    margin: 0;
    padding: 0;
    display: block;
}

/* ─── wp:button – Link füllt gesamte Schaltfläche ──────────────────────
   .btn hat position:relative + overflow:hidden. Der absolute Link macht
   die gesamte Padding-Fläche klickbar; z-index:-1 des ::before bleibt darunter. */
.wp-block-button.btn > .wp-block-button__link {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    z-index: 1;
}

/* Fallback: Link-Styles zurücksetzen wenn kein .btn auf dem Wrapper */
.wp-block-button__link {
    all: unset;
}

/* ─── Hero-Hintergrundbild (wp:image direkt in .hero-img) ───────────── */
.hero-img > figure.wp-block-image {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    z-index: 0;
}
.hero-img > figure.wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transform: scale(1.04);
    transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    display: block;
}

/* ─── Bilder in .service-image und .img-col (aspect-ratio Container) ── */
.service-image > figure.wp-block-image,
.img-col > figure.wp-block-image {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
}
.service-image > figure.wp-block-image img,
.img-col > figure.wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─── Service block: figure.wp-block-image direktes Kind (kein .service-image Wrapper) ── */
.service-block > figure.wp-block-image {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--warm);
    position: relative;
}
.service-block > figure.wp-block-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Wechselnde Bild-Reihenfolge bei geraden Service-Blöcken */
.service-block:nth-child(even) > figure.wp-block-image { order: 2; }

/* ─── Kultur-Bild in Jobs-Seite (.culture-image) ────────────────────── */
.culture-image {
    border-radius: var(--border-radius-card);
    overflow: hidden;
}
.culture-image > figure.wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-card);
}

/* ─── Beratungs-Hero-Bild (.hero-image) ─────────────────────────────── */
.hero-image {
    border-radius: var(--border-radius-card);
    overflow: hidden;
    position: relative;
    min-height: 400px;
    background: linear-gradient(135deg, var(--color-brand-orange-soft) 0%, #FFF3E0 100%);
}
.hero-image > figure.wp-block-image {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
}
.hero-image > figure.wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─── hero-media: Bild füllt absolut den Container ────────────────────── */
.hero-media {
    position: relative;
}
.hero-media > figure.wp-block-image {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
}
.hero-media > figure.wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─── info-image: Bild mit Radius und Schatten ─────────────────────────── */
.info-image > figure.wp-block-image {
    margin: 0;
    padding: 0;
}
.info-image > figure.wp-block-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-hover);
    display: block;
}

/* ─── faq-item > summary: entspricht .faq-question ─────────────────────── */
.faq-item > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text-main);
    list-style: none;
    user-select: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
    content: '▾';
    font-size: 0.85rem;
    color: var(--color-brand-orange-rich);
    transition: transform 0.25s;
    flex-shrink: 0;
}
.faq-item[open] > summary::after { transform: rotate(180deg); }

/* ── site-main / entry-content: transparente Layout-Wrapper ── */
.site-main,
.entry-content {
    width: 100%;
    display: block;
}

/* ─── consultation-info-grid: 4-Spalten-Karten-Layout ──────────────────── */
.wp-block-columns.consultation-info-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    align-items: start;
}
@media (max-width: 600px) {
    .wp-block-columns.consultation-info-grid {
        grid-template-columns: 1fr;
    }
}

.info-card,
.wp-block-column.info-card {
    background: #fff;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-soft);
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}
.info-card:hover,
.wp-block-column.info-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}
.info-card .info-number,
.wp-block-column.info-card .info-number {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--color-brand-orange-rich);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 auto 1.5rem;
}
.info-card h3,
.wp-block-column.info-card h3,
.info-card .wp-block-heading,
.wp-block-column.info-card .wp-block-heading {
    margin-bottom: 1rem;
    color: var(--color-text-main);
}
.info-card p,
.wp-block-column.info-card p {
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* ─── steps-visual: Schritt-für-Schritt-Grafik (Startseite) ─────────── */
.steps-visual {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    padding: 2.5rem;
    background: #fff;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-soft);
    height: 100%;
    min-height: 320px;
    justify-content: center;
}
.step-visual-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    position: relative;
}
.step-visual-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-soft);
}
.step-visual-connector {
    position: absolute;
    left: 27px;
    top: 56px;
    width: 2px;
    height: 3rem;
    background: var(--color-border-subtle);
}
.step-visual-connector.last { display: none; }
.step-visual-item span {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-text-main);
    padding-bottom: 3rem;
}
.step-visual-item:last-child span { padding-bottom: 0; }

/* ── Testimonials ── */
.testimonials-section {
    padding: var(--section-pad-y) 0;
    background: var(--color-bg-default);
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad-x);
}
.testimonial-card {
    background: #fff;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-soft);
    padding: 2rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-left: 4px solid var(--color-brand-orange-rich);
}
.testimonial-card .quote-icon {
    color: var(--color-brand-orange-rich);
    font-size: 1.5rem;
    opacity: 0.3;
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
}
.testimonial-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-main);
    font-style: italic;
    flex: 1;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
}
.author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-brand-orange-rich);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.author-info h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-main);
}
.author-info span {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* ── Values Grid ── */
.values-section { background: var(--color-bg-alt); }
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.value-card {
    background: #fff;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-soft);
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.value-card-num {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    font-size: 4rem;
    font-weight: 900;
    opacity: 0.07;
    line-height: 1;
    color: #000;
    user-select: none;
}
.value-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 0.5rem;
}
.value-card--orange .value-card-icon { background: var(--color-brand-orange-rich); }
.value-card--magenta .value-card-icon { background: var(--color-brand-magenta-deep); }
.value-card--cyan .value-card-icon { background: var(--color-brand-cyan-dark); }
.value-card h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--color-text-main);
}
.value-card-tagline {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}
.value-card p { margin: 0; line-height: 1.7; }
.values-image-wrap {
    margin-top: 3rem;
    border-radius: var(--border-radius-card);
    overflow: hidden;
}
.values-image-wrap img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

/* ── Team Facts ── */
.team-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.team-fact-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-main);
}
.team-fact-item i { font-size: 1.1rem; }

/* ═══════════════════════════════════════════════════════════
   COMPONENT FIXES  v11  —  Pixel-perfect UI corrections
   ═══════════════════════════════════════════════════════════ */

/* ── 1. HERO SPLIT: equal height + image fills container ───────────── */
.hero-split {
    align-items: stretch;
}
.hero-media {
    position: relative;
    overflow: hidden;
    min-height: 400px;
}
.hero-media > figure.wp-block-image {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.hero-media > figure.wp-block-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── 2. HERO OVERLAY: Gutenberg wp:image background (jobs + hero-img) ─ */
.hero-img .hero-bg-img-figure {
    position: absolute !important;
    inset: 0;
    z-index: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.hero-img .hero-bg-img-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}
.hero-img .hero-img-content,
.hero-img > .wp-block-group.hero-img-content {
    position: relative !important;
    z-index: 2;
}

/* ── 3. IMAGE SIZING: consistent fill in layout areas ──────────────── */
img.section-image {
    width: 100%;
    display: block;
    max-height: 440px;
    object-fit: cover;
    border-radius: var(--border-radius-card);
}
.info-image {
    overflow: hidden;
    border-radius: var(--border-radius-card);
}
.info-image > figure.wp-block-image img,
.info-image > img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--border-radius-card);
    display: block;
    box-shadow: var(--shadow-hover);
}

/* ── 4. PING-PONG: Leistungen service blocks alternate left/right ───── */
.service-block {
    display: grid !important;
}
.service-block .service-image  { order: 1; }
.service-block .service-content { order: 2; }
.service-block:nth-child(even) .service-image,
.service-block:nth-child(even) .wp-block-column.service-image  { order: 2 !important; }
.service-block:nth-child(even) .service-content,
.service-block:nth-child(even) .wp-block-column.service-content { order: 1 !important; }

/* ── 5. FAQ: larger padding, more gap, clearer cards ───────────────── */
.faq-list {
    gap: 1rem;
}
.faq-item > summary,
.faq-question,
.faq-list .wp-block-details > summary {
    padding: 1.25rem 1.5rem;
    font-size: 1.05rem;
    line-height: 1.4;
}
.faq-answer,
.faq-answer > p,
.faq-list .wp-block-details > p,
.faq-list .wp-block-details > div {
    padding: 0.25rem 1.5rem 1.5rem;
    font-size: 0.97rem;
    line-height: 1.85;
}

/* ── 6. STEPS-VISUAL ICONS: centered inside colored circles ────────── */
.step-visual-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1;
}
.step-visual-icon i {
    line-height: 1;
    font-size: 1.4rem;
    display: block;
}

/* ═══════════════════════════════════════════════════════════
   COMPONENT FIXES  v12  —  Final pixel-perfect refinement
   ═══════════════════════════════════════════════════════════ */

/* 1 ── Homepage hero: center image focus ───────────────────────────── */
.hero-image-wrapper figure.wp-block-image img,
.hero-image-wrapper img {
    object-position: center center;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 2 ── Hero split: flex for reliable equal-height columns ───────────── */
.hero-split {
    display: flex !important;
    align-items: stretch;
    min-height: 520px;
}
.hero-split > * {
    flex: 1;
    min-width: 0;
}
.hero-media {
    overflow: hidden;
    position: relative;
    flex: 1;
    min-height: 400px;
}
.hero-media > figure.wp-block-image,
.hero-media > .wp-block-image {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.hero-media > figure.wp-block-image img,
.hero-media > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* 3 ── Hero overlay: center all content ────────────────────────────── */
.hero-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.hero-img-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 6 ── CTA / contact buttons: side by side ─────────────────────────── */
.contact-actions,
.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-top: 1.5rem;
}
.cta-section .cta-actions {
    justify-content: center;
}
.contact-actions > p,
.contact-actions .wp-block-paragraph,
.cta-actions > p,
.cta-actions .wp-block-paragraph {
    margin: 0;
}

/* 7 ── CTA button: white on orange for strong contrast ─────────────── */
.cta-btn {
    background: #fff !important;
    color: var(--color-brand-orange-rich) !important;
    border: 2px solid transparent;
    font-weight: 700;
}
.cta-btn:hover {
    background: rgba(255,255,255,0.9) !important;
    color: #a65c00 !important;
    transform: translateY(-2px);
}
/* Transparent/outline variant inside cta-section */
.cta-section a[style*="transparent"] {
    border: 2px solid rgba(255,255,255,0.85) !important;
    color: #fff !important;
    background: transparent !important;
    font-weight: 600;
}
.cta-section a[style*="transparent"]:hover {
    background: rgba(255,255,255,0.15) !important;
}

/* 8 ── Testimonials: 2-column grid on desktop ──────────────────────── */
@media (min-width: 769px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

/* 9 ── Jobs: 4 benefit cards side-by-side on desktop ───────────────── */
@media (min-width: 900px) {
    .benefits-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Job card icon */
.job-card-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.job-card--orange  .job-card-icon { color: var(--color-brand-orange-rich); }
.job-card--cyan    .job-card-icon { color: var(--color-brand-cyan-dark); }
.job-card--magenta .job-card-icon { color: var(--color-brand-magenta-deep); }

.job-header { margin-bottom: 0.75rem; }
.job-header h3 { margin: 0; }

.job-description {
    color: var(--color-text-muted);
    font-size: 0.93rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    flex: 1;
}

.apply-btn {
    display: inline-block;
    background: var(--job-accent, var(--color-brand-orange-rich));
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.65rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    transition: opacity 0.25s, transform 0.25s;
    border: none;
    cursor: pointer;
    align-self: flex-start;
}
.apply-btn:hover {
    opacity: 0.88;
    transform: translateY(-2px);
    color: #fff;
}

/* Culture section */
.culture-values { margin-top: 1.5rem; }
.culture-values h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}
.culture-values .fa-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.culture-values .fa-ul li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
    font-size: 0.95rem;
    color: var(--color-text-main);
}
.culture-values .fa-ul .fa-li {
    position: static !important;
    margin: 0;
    display: inline-flex;
    align-items: center;
}

blockquote.testimonial {
    background: var(--color-brand-cyan-soft);
    border-left: 4px solid var(--color-brand-cyan-dark);
    border-radius: 0 var(--border-radius-card) var(--border-radius-card) 0;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}
blockquote.testimonial p {
    font-style: italic;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-main);
    margin: 0 0 0.5rem;
}
blockquote.testimonial cite {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-style: normal;
}

/* 10 ── Culture image: fill height ────────────────────────────────── */
.culture-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-card);
    min-height: 400px;
    flex: 1;
}
.culture-image img {
    width: 100%;
    height: 100%;
    min-height: 400px;
    object-fit: cover;
    border-radius: var(--border-radius-card);
    display: block;
}

/* Benefit icon: colored via nth-child already in base CSS */
.benefit-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    line-height: 1;
}
.benefit-card .benefit-icon { color: var(--color-brand-orange-rich); }
.benefit-card:nth-child(2) .benefit-icon { color: var(--color-brand-cyan-dark); }
.benefit-card:nth-child(3) .benefit-icon { color: var(--color-brand-magenta-deep); }
.benefit-card:nth-child(4) .benefit-icon { color: var(--color-brand-orange-rich); }

/* ═══════════════════════════════════════════════════════════════════════
   FORCE FIX v13  — absolute overrides, ultra-specific selectors
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1  Hero images: always cover, always centered ──────────────────── */
.hero-image-wrapper img,
.hero-image-wrapper figure img,
.hero-media img,
.hero-media figure img,
section.hero img,
section.hero-split img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}
section.hero,
section.hero-split {
    min-height: 500px !important;
}
section.hero .hero-image-wrapper,
.hero-split .hero-media {
    position: relative !important;
    overflow: hidden !important;
    min-height: 500px !important;
    flex: 1 !important;
}

/* ── 2  Hero split: force flex + equal stretch columns ──────────────── */
.hero-split,
.wp-block-columns.hero-split {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    min-height: 500px !important;
    gap: 0 !important;
}
.hero-split > .wp-block-column,
.hero-split > div {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 50% !important;
}
.hero-split > .wp-block-column.hero-media,
.hero-split > div.hero-media {
    position: relative !important;
    overflow: hidden !important;
    min-height: 500px !important;
}
.hero-split .hero-media figure.wp-block-image,
.hero-split .hero-media > figure {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.hero-split .hero-media figure img,
.hero-split .hero-media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* ── 3  Hero overlay (hero-img): centered content over full image ───── */
section.hero-img {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 500px !important;
    overflow: hidden !important;
}
img.hero-bg-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    z-index: 0 !important;
}
section.hero-img .hero-img-content,
section.hero-img .container.hero-img-content {
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
}

/* ── 4  FAQ items: clear card layout with spacing ───────────────────── */
details.faq-item,
.faq-list details.faq-item,
.faq-list .wp-block-details.faq-item {
    margin-bottom: 25px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
}
details.faq-item > summary,
.faq-list details.faq-item > summary {
    padding: 20px 25px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
details.faq-item > summary::-webkit-details-marker { display: none !important; }
details.faq-item > summary::marker { display: none !important; }
details.faq-item > p,
details.faq-item > .wp-block-paragraph,
.faq-list details.faq-item > p {
    padding: 0 25px 25px !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    color: var(--color-text-muted) !important;
}

/* ── 5  Steps-visual icons: flex-centered circles ───────────────────── */
.step-visual-icon,
.steps-visual .step-visual-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    margin: 0 auto 1rem !important;
    font-size: 2rem !important;
}
.step-visual-icon i,
.steps-visual .step-visual-icon i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* ── 6  Buttons side-by-side (contact, CTA, hero) ───────────────────── */
.contact-actions,
.cta-actions,
.hero-actions,
.btn-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    align-items: center !important;
    margin-top: 1.5rem !important;
}
.contact-actions > *,
.cta-actions > *,
.hero-actions > *,
.btn-group > * {
    margin: 0 !important;
}
/* Gutenberg wraps buttons in <p> — neutralise it */
.contact-actions > p,
.cta-actions > p,
.hero-actions > p {
    margin: 0 !important;
    display: contents !important;
}

/* ── 7  Steps-visual: VERTICAL flow with arrows ─────────────────────── */
.steps-visual {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 2rem 1rem !important;
    width: 100% !important;
}
.step-visual-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
}
.step-visual-item > span {
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    color: var(--color-text-main) !important;
    margin-top: 0.6rem !important;
    display: block !important;
    letter-spacing: 0.01em !important;
}
/* Icon circle */
.step-visual-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    margin: 0 auto !important;
    font-size: 1.75rem !important;
    flex-shrink: 0 !important;
    color: #fff !important;
}
.step-visual-icon i {
    color: #fff !important;
    font-size: 1.75rem !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Down arrow between steps */
.step-visual-arrow {
    font-size: 1.75rem !important;
    color: rgba(0,0,0,0.25) !important;
    text-align: center !important;
    padding: 0.4rem 0 !important;
    line-height: 1 !important;
    display: block !important;
    width: 100% !important;
}

/* ── 8  Hero-split image fill: absolute cover inside column ─────────── */
/* Extra specificity layer for WordPress inline style overrides */
div.wp-block-columns.hero-split {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    min-height: 500px !important;
    gap: 0 !important;
}
div.wp-block-columns.hero-split > div.wp-block-column {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    flex-basis: 50% !important;
}
div.wp-block-columns.hero-split > div.wp-block-column.hero-media {
    position: relative !important;
    overflow: hidden !important;
    min-height: 480px !important;
}
div.wp-block-columns.hero-split > div.wp-block-column.hero-media figure {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}
div.wp-block-columns.hero-split > div.wp-block-column.hero-media figure img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
}

/* ── 9  Jobs: benefits-grid 4-col via wp:columns ────────────────────── */
div.wp-block-columns.benefits-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
    margin-top: 2rem !important;
}
div.wp-block-columns.benefits-grid > div.wp-block-column.benefit-card {
    flex: 1 1 calc(25% - 1.5rem) !important;
    min-width: 180px !important;
    max-width: none !important;
    background: #fff !important;
    border-radius: var(--border-radius-card) !important;
    padding: 1.5rem !important;
    text-align: center !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* ── 10  Jobs: jobs-grid 3-col + card styling ───────────────────────── */
div.wp-block-columns.jobs-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
    margin-top: 2rem !important;
    align-items: stretch !important;
}
div.wp-block-columns.jobs-grid > div.wp-block-column.job-card {
    flex: 1 1 calc(33.333% - 1.5rem) !important;
    min-width: 240px !important;
    max-width: none !important;
    background: #fff !important;
    border-radius: var(--border-radius-card) !important;
    padding: 1.75rem !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07) !important;
    display: flex !important;
    flex-direction: column !important;
    border-top: 4px solid transparent !important;
}
div.wp-block-columns.jobs-grid > div.wp-block-column.job-card--orange {
    border-top-color: var(--color-brand-orange-rich) !important;
}
div.wp-block-columns.jobs-grid > div.wp-block-column.job-card--cyan {
    border-top-color: var(--color-brand-cyan-dark) !important;
}
div.wp-block-columns.jobs-grid > div.wp-block-column.job-card--magenta {
    border-top-color: var(--color-brand-magenta-deep) !important;
}
/* Job card icon color per card type */
div.wp-block-column.job-card--orange .job-card-icon { color: var(--color-brand-orange-rich) !important; }
div.wp-block-column.job-card--cyan .job-card-icon    { color: var(--color-brand-cyan-dark) !important; }
div.wp-block-column.job-card--magenta .job-card-icon { color: var(--color-brand-magenta-deep) !important; }
/* Push apply button to bottom */
div.wp-block-column.job-card > p:last-child { margin-top: auto !important; padding-top: 1rem !important; }

/* ── 11  Culture columns ─────────────────────────────────────────────── */
div.wp-block-columns.team-culture {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2rem !important;
    align-items: stretch !important;
}
div.wp-block-columns.team-culture > div.wp-block-column.culture-text {
    flex: 1 1 50% !important;
    min-width: 280px !important;
    max-width: none !important;
}
div.wp-block-columns.team-culture > div.wp-block-column.culture-image {
    flex: 1 1 40% !important;
    min-width: 280px !important;
    max-width: none !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: var(--border-radius-card) !important;
    min-height: 400px !important;
}
div.wp-block-columns.team-culture > div.wp-block-column.culture-image figure {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
div.wp-block-columns.team-culture > div.wp-block-column.culture-image figure img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: var(--border-radius-card) !important;
}


/* ════════════════════════════════════════════════════════════════════
   EBH v2 – 3-Schritte-Prozess (ebh/steps block)
   ════════════════════════════════════════════════════════════════════ */

.steps-section {
    background: var(--bg-section);
    text-align: center;
}

.steps-section.bg-alt {
    background: var(--bg-alt);
}

.steps-section .section-header {
    margin-bottom: 3rem;
}

/* ── Flow container ── */
.steps-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
}

/* ── Single step ── */
.steps-flow__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    flex: 0 0 auto;
    min-width: 110px;
    max-width: 160px;
}

/* ── Colored circle with icon ── */
.steps-flow__circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.6rem;
    box-shadow: var(--shadow-soft);
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.steps-flow__circle:hover {
    transform: scale(1.06);
    box-shadow: var(--shadow-hover);
}

/* ── Step label ── */
.steps-flow__item span {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text-main);
    text-align: center;
    font-family: var(--font-heading);
    line-height: 1.3;
}

/* ── Arrow between steps ── */
.steps-flow__arrow {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-bottom: 2rem; /* align with circle center above the label */
    padding: 0 0.75rem;
    color: var(--color-border-subtle);
    font-size: 1.1rem;
}

/* ── Mobile: vertical stack ── */
@media (max-width: 560px) {
    .steps-flow {
        flex-direction: column;
        gap: 0;
        align-items: center;
    }

    .steps-flow__item {
        max-width: 200px;
    }

    .steps-flow__arrow {
        transform: rotate(90deg);
        margin-bottom: 0;
        padding: 0.25rem 0;
    }
}


/* ════════════════════════════════════════════════════════════════════
   EBH v2 – Hero bg-image layout additions
   ════════════════════════════════════════════════════════════════════ */

/* Button inside bg-image hero */
.hero-img-content .btn {
    margin-top: 1.75rem;
    display: inline-block;
}

/* Badge inside bg-image hero */
.hero-img-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 30px;
    padding: 5px 18px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 1.25rem;
    backdrop-filter: blur(6px);
}


/* ════════════════════════════════════════════════════════════════════
   EBH v2 – Steps Block: vertical layout override
   ════════════════════════════════════════════════════════════════════ */

/* Inside a steps-section block, strip the white card styling */
.steps-section .steps-visual {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    min-height: auto;
    height: auto;
}


/* ════════════════════════════════════════════════════════════════════
   EBH v2 – Testimonials Block
   ════════════════════════════════════════════════════════════════════ */

.testimonials-grid {
    display: grid;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.testimonials-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.testimonials-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }

.testimonial-card {
    background: #fff;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-soft);
    padding: 2rem 1.75rem 1.75rem;
    position: relative;
    border-top: 4px solid var(--tc-accent, #D67D00);
    border-left: none;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Reset legacy nth-child border-left overrides for block-rendered cards */
.testimonials-grid .testimonial-card:nth-child(4n+1),
.testimonials-grid .testimonial-card:nth-child(4n+2),
.testimonials-grid .testimonial-card:nth-child(4n+3),
.testimonials-grid .testimonial-card:nth-child(4n) {
    border-left-color: transparent;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover, 0 16px 40px rgba(0,0,0,0.12));
}

.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: 0.75rem;
    right: 1.25rem;
    font-size: 5rem;
    line-height: 1;
    color: var(--tc-accent, #D67D00);
    opacity: 0.12;
    font-family: Georgia, serif;
    pointer-events: none;
    user-select: none;
}

.testimonial-card__stars {
    color: var(--tc-accent, #D67D00);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

.testimonial-card__quote {
    font-size: 1rem;
    line-height: 1.72;
    color: var(--color-text-main);
    font-style: italic;
    margin: 0 0 1.5rem;
    flex: 1;
    quotes: none;
}

.testimonial-card__footer {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-subtle, #e5e7eb);
}

.testimonial-card__name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text-main);
}

.testimonial-card__role {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

@media (max-width: 767px) {
    .testimonials-grid--cols-2,
    .testimonials-grid--cols-3 { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .testimonials-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}


/* ════════════════════════════════════════════════════════════════════
   EBH v14 – Force overrides (post FORCE FIX v13)
   These rules appear AFTER v13 in cascade — equal !important = later wins.
   ════════════════════════════════════════════════════════════════════ */



/* ══ TASK 1+3: Hero equal-height grid fix ════════════════════════════
   SPECIFICITY NOTE: v13 uses div.wp-block-columns.* (0-2-1).
   We match that exactly so cascade order (v14 is later) wins.
   Switching from flex to CSS Grid: grid cells stretch to equal height
   automatically — no absolute height tricks needed on container.
   ════════════════════════════════════════════════════════════════════ */

/* ── Homepage hero (hero-content) ── */
div.wp-block-columns.hero-content {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch !important;
    min-height: 500px !important;
    gap: 0 !important;
}
div.wp-block-columns.hero-content > div.wp-block-column {
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
}
div.wp-block-columns.hero-content > div.wp-block-column.hero-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
div.wp-block-columns.hero-content > div.wp-block-column.hero-image-wrapper {
    position: relative !important;
    overflow: hidden !important;
    /* No min-height — grid track provides height automatically */
}
div.wp-block-columns.hero-content > div.wp-block-column.hero-image-wrapper > figure {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}
div.wp-block-columns.hero-content > div.wp-block-column.hero-image-wrapper figure img,
div.wp-block-columns.hero-content > div.wp-block-column.hero-image-wrapper > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;        /* kill the 460px cap from line 2457 */
    object-fit: cover !important;
    object-position: 50% 35% !important;  /* Task 3: center person vertically */
    display: block !important;
}

/* ── Hero-split pages (Leistungen, Philosophie, Dresden, Pirna) ── */
div.wp-block-columns.hero-split {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch !important;
    min-height: 500px !important;
    gap: 0 !important;
}
div.wp-block-columns.hero-split > div.wp-block-column {
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
}
div.wp-block-columns.hero-split > div.wp-block-column.hero-text-split {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
div.wp-block-columns.hero-split > div.wp-block-column.hero-media {
    position: relative !important;
    overflow: hidden !important;
}
div.wp-block-columns.hero-split > div.wp-block-column.hero-media > figure {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}
div.wp-block-columns.hero-split > div.wp-block-column.hero-media figure img,
div.wp-block-columns.hero-split > div.wp-block-column.hero-media > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}


/* ── Leistungen service blocks (wp:columns.service-block) ── */
div.wp-block-columns.service-block {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    align-items: center !important;
    margin-bottom: 64px !important;
}
div.wp-block-columns.service-block > div.wp-block-column {
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
}
@media (max-width: 768px) {
    div.wp-block-columns.service-block {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        margin-bottom: 40px !important;
    }
    div.wp-block-columns.service-block:nth-child(even) > div.wp-block-column.service-image,
    div.wp-block-columns.service-block:nth-child(even) > div.wp-block-column.service-content {
        order: 0 !important;
    }
}

/* ══ TASK 3: Testimonials – premium card redesign ══════════════════ */
.testimonials-section {
    padding: 5rem 1.5rem !important;
    background: var(--bg-alt, #f8f9fa) !important;
}
/* Scope grid override only to old seeded structure — block renderer uses --cols-N classes */
.testimonials-section .testimonials-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 2rem !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}
.testimonial-card {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    border: 1px solid rgba(0,0,0,0.07) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    position: relative !important;
    border-left: 4px solid transparent !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.testimonial-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.1) !important;
}
.testimonial-card:nth-child(4n+1) { border-left-color: var(--color-brand-orange-rich, #D67D00) !important; }
.testimonial-card:nth-child(4n+2) { border-left-color: var(--color-brand-cyan-dark, #007A8C) !important; }
.testimonial-card:nth-child(4n+3) { border-left-color: var(--color-brand-magenta-deep, #8B1A4A) !important; }
.testimonial-card:nth-child(4n)   { border-left-color: #C4923A !important; }
.quote-icon {
    font-size: 1.5rem !important;
    opacity: 0.18 !important;
    position: absolute !important;
    top: 1.25rem !important;
    right: 1.25rem !important;
    color: var(--color-brand-orange-rich, #D67D00) !important;
}
.testimonial-text {
    font-size: 1rem !important;
    line-height: 1.78 !important;
    color: var(--color-text-main, #374151) !important;
    font-style: italic !important;
    flex: 1 !important;
    margin: 0 !important;
    padding-right: 1.75rem !important;
}
.testimonial-author {
    display: flex !important;
    align-items: center !important;
    gap: 0.875rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(0,0,0,0.07) !important;
    margin-top: auto !important;
}
.author-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
    background: rgba(214,125,0,0.12) !important;
    color: var(--color-brand-orange-rich, #D67D00) !important;
}
.author-info h4 {
    font-size: 0.925rem !important;
    font-weight: 700 !important;
    margin: 0 0 0.1rem !important;
    color: var(--color-text-main, #111827) !important;
}
.author-info span {
    font-size: 0.8rem !important;
    color: var(--color-text-muted, #6b7280) !important;
}


/* ══ TASK 4: Process steps – horizontal layout, icon left of label ══ */
/* Override FORCE FIX v13 (flex-direction: column, icon 80px) */
.steps-visual {
    flex-direction: row !important;         /* horizontal: items side by side */
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    padding: 2rem 1.5rem !important;
    background: #fff !important;
    border-radius: var(--border-radius-card, 12px) !important;
    box-shadow: var(--shadow-soft, 0 2px 12px rgba(0,0,0,0.07)) !important;
    width: 100% !important;
    min-height: auto !important;
}
/* Each step: icon to the LEFT, label to the right */
.step-visual-item {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.875rem !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: left !important;
    position: relative !important;
    justify-content: flex-start !important;
    padding: 0 0.5rem !important;
}
/* Icon circle: compact, not oversized */
.step-visual-icon,
.steps-visual .step-visual-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}
.step-visual-icon i,
.steps-visual .step-visual-icon i {
    font-size: 1.15rem !important;
    line-height: 1 !important;
}
/* Step labels */
.step-visual-item > span,
.step-visual-item > p {
    font-weight: 600 !important;
    font-size: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--color-text-main, #1a1a1a) !important;
    line-height: 1.3 !important;
    text-align: left !important;
}
/* Arrow between steps: hide ↓, show → via pseudo-element */
.step-visual-arrow {
    flex-shrink: 0 !important;
    width: 28px !important;
    font-size: 0 !important;            /* hide the ↓ character */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    color: transparent !important;
}
.step-visual-arrow::after {
    content: '→' !important;
    font-size: 1.25rem !important;
    color: var(--color-border-subtle, #cbd5e1) !important;
    display: block !important;
    line-height: 1 !important;
}
/* Connector line: not needed in horizontal layout */
.step-visual-connector {
    display: none !important;
}


/* ══ TASK 4: Process steps – full redesign (step-card) ═════════════
   Replaces old steps-visual (was crammed in half-column of info-grid).
   New: full-width 3-step horizontal layout with icon + text cards.
   ════════════════════════════════════════════════════════════════════ */
.wp-block-columns.steps-flow {
    display: flex !important;
    align-items: stretch !important;
    gap: 1.5rem !important;
    flex-wrap: nowrap !important;
    margin-top: 2.5rem !important;
}
.wp-block-column.step-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.25rem !important;
    background: #fff !important;
    border-radius: 12px !important;
    padding: 1.5rem 1.75rem !important;
    flex: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
    position: relative !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
/* Thin arrow between cards */
.wp-block-column.step-card:not(:last-child)::after {
    content: '\2192' !important; /* → */
    position: absolute !important;
    right: -1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1rem !important;
    color: #cbd5e1 !important;
    z-index: 2 !important;
    pointer-events: none !important;
}
/* Icon circle */
.step-icon-wrap {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 1.5rem !important;
    flex-shrink: 0 !important;
}
.step-card--1 .step-icon-wrap { background: var(--color-brand-orange-rich, #D67D00) !important; }
.step-card--2 .step-icon-wrap { background: var(--color-brand-magenta-deep, #9B2D7F) !important; }
.step-card--3 .step-icon-wrap { background: var(--color-brand-cyan-dark, #0891B2) !important; }
/* Text block next to icon */
.wp-block-group.step-card-body {
    min-width: 0 !important;
    flex: 1 !important;
    display: block !important;
}
.wp-block-group.step-card-body h3.wp-block-heading {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 0 0 0.25rem !important;
    color: var(--color-text-main, #1e293b) !important;
    line-height: 1.3 !important;
}
.wp-block-group.step-card-body p {
    font-size: 0.9rem !important;
    color: var(--color-text-muted, #64748b) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}


/* ══ RESPONSIVE: mobile stack for all hero layouts ═════════════════ */
@media (max-width: 820px) {
    /* Homepage hero-content: stack text above image */
    div.wp-block-columns.hero-content {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }
    /* Image column needs a fixed height when stacked (figure is absolute) */
    div.wp-block-columns.hero-content > div.wp-block-column.hero-image-wrapper {
        min-height: 280px !important;
    }

    /* hero-split pages: stack orange box above image */
    div.wp-block-columns.hero-split {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }
    /* Image column needs a fixed height when stacked */
    div.wp-block-columns.hero-split > div.wp-block-column.hero-media {
        min-height: 260px !important;
    }

    /* Testimonials: single column on narrow screens */
    .testimonials-grid {
        grid-template-columns: 1fr !important;
    }

    /* Steps: stack vertically on mobile, restore ↓ arrows */
    .steps-visual {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .step-visual-item {
        width: 100% !important;
        flex: none !important;
    }
    .step-visual-arrow {
        width: 100% !important;
        font-size: 1rem !important;
        color: var(--color-border-subtle, #cbd5e1) !important;
    }
    .step-visual-arrow::after {
        content: '↓' !important;
        font-size: 1rem !important;
    }
    /* Step-card: stack on mobile */
    .wp-block-columns.steps-flow {
        flex-direction: column !important;
        gap: 1.25rem !important;
    }
    .wp-block-column.step-card:not(:last-child)::after {
        content: '\2193' !important; /* ↓ */
        right: auto !important;
        top: auto !important;
        bottom: -0.875rem !important;
        left: 24px !important;
        transform: none !important;
    }
}

/* =============================================================================
   EBH MOTION DESIGN v3
   Scroll Reveal · Hero Load · Button Interactions · Header · Steps
   ============================================================================= */

/* ── 1. Smooth scrolling ─────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

/* ── 2. Reusable animation classes ──────────────────────────────────────── */
.fade-in-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }

/* ── 3. Hero page-load entrance animation ───────────────────────────────── */
@keyframes ebhHeroText {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes ebhHeroFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ebhHeroImageZoom {
    from { transform: scale(1.08); }
    to   { transform: scale(1); }
}

.hero .hero-text {
    animation: ebhHeroText 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Wrapper fades in; image inside zooms slowly out (scale 1.08→1) */
.hero .hero-image-wrapper {
    animation: ebhHeroFadeIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) 160ms both;
}

.hero .hero-image-wrapper img {
    animation: ebhHeroImageZoom 1.4s cubic-bezier(0.22, 1, 0.36, 1) 160ms both;
}

/* ── 4. Button click (active) feedback ──────────────────────────────────── */
.btn:active {
    transform: scale(0.97) !important;
    box-shadow: var(--shadow-soft) !important;
    transition-duration: 100ms !important;
}

/* ── 5. Header scroll effect ────────────────────────────────────────────── */
.header {
    transition: box-shadow 0.35s ease, background-color 0.35s ease;
}

.header.is-scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.10);
    background-color: rgba(255, 255, 255, 0.97);
}

/* ── 6. Testimonial card – smoother hover transition ────────────────────── */
.testimonial-card {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── FAQ: native wp:details .faq-item ───────────────────────────────────── */
details.faq-item {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    overflow: hidden;
}
details.faq-item > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text-main);
    list-style: none;
    user-select: none;
}
details.faq-item > summary::-webkit-details-marker {
    display: none;
}
details.faq-item > summary::after {
    content: '\f078'; /* fa-chevron-down */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.75rem;
    color: var(--color-brand-orange-rich);
    transition: transform 0.25s;
    flex-shrink: 0;
}
details.faq-item[open] > summary::after {
    transform: rotate(180deg);
}
details.faq-item > p,
details.faq-item > div {
    padding: 0 1.5rem 1.25rem;
    color: var(--color-text-muted);
    line-height: 1.75;
    margin: 0;
}

/* ── 7. Respect prefers-reduced-motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .hero .hero-text,
    .hero .hero-image-wrapper,
    .hero .hero-image-wrapper img {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .reveal-on-scroll,
    .slide-in-left,
    .slide-in-right,
    .scale-up,
    .fade-in,
    .fade-in-up,
    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ══ Job cards: full-width colored header banner with white icon ════════
   Icon breaks out of card padding to create a colored banner at the top.
   ════════════════════════════════════════════════════════════════════════ */
div.wp-block-columns.jobs-grid > div.wp-block-column.job-card {
    overflow: hidden !important;
    border-top: none !important;
}
div.wp-block-column.job-card .job-card-icon {
    /* Negative margins expand to full card width, offsetting 1.75rem padding */
    margin: -1.75rem -1.75rem 1.5rem !important;
    height: 84px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2.1rem !important;
    color: #fff !important;
}
div.wp-block-column.job-card--orange  .job-card-icon { background: var(--color-brand-orange-rich) !important;  color: #fff !important; }
div.wp-block-column.job-card--cyan    .job-card-icon { background: var(--color-brand-cyan-dark) !important;    color: #fff !important; }
div.wp-block-column.job-card--magenta .job-card-icon { background: var(--color-brand-magenta-deep) !important; color: #fff !important; }

/* Inline SVGs inside icon containers: inherit color, scale with em-font-size */
.step-icon-wrap svg,
.feature-icon svg,
.job-card-icon svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
}

/* =============================================================================
   EBH ANIMATION SYSTEM v4 — Complete Motion Design
   Tokens · Entrance Classes · Stagger · Icons · Cards · Images · Links
   ============================================================================= */

/* ── Animation Design Tokens ─────────────────────────────────────────────── */
:root {
    --dur-fast:    300ms;
    --dur-base:    550ms;
    --dur-slow:    800ms;
    --ease:        cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Core Entrance Classes ──────────────────────────────────────────────── */
/* Consistent 550ms / ease-out easing across all entrance animations */

.fade-up {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease);
}
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-left {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease);
}
.fade-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-right {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease);
}
.fade-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease);
}
.scale-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* ── Stagger Group ──────────────────────────────────────────────────────── */
/* Apply to a container; JS auto-assigns per-child transitionDelay */
.stagger-group > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease);
}
.stagger-group > *.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Button Focus State ─────────────────────────────────────────────────── */
.btn:focus-visible {
    outline: 2px solid var(--color-brand-orange-rich);
    outline-offset: 4px;
}

/* ── Service Card — gradient accent bar ─────────────────────────────────── */
/* Reveals a brand-gradient bar from left on hover (scaleX, GPU-only) */
.service-card {
    position: relative;
}
.service-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 0 0 var(--border-radius-card) var(--border-radius-card);
    background: var(--gradient-brand);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 400ms var(--ease);
}
.service-card:hover::after {
    transform: scaleX(1);
}

/* ── Icon Micro-interactions ────────────────────────────────────────────── */
/* Each icon type has ONE interaction — no stacking */

.service-icon {
    display: inline-block;
    transition: transform var(--dur-fast) var(--ease-spring);
}
.service-card:hover .service-icon {
    transform: translateY(-4px) scale(1.15);
}

.step-visual-icon {
    transition: transform var(--dur-fast) var(--ease-spring);
}
.step-visual-item:hover .step-visual-icon {
    transform: scale(1.12);
}

/* Footer & contact link icons */
.footer-contact a i,
.contact-actions a i {
    display: inline-block;
    transition: transform var(--dur-fast) var(--ease-spring);
}
.footer-contact a:hover i,
.contact-actions a:hover i {
    transform: scale(1.25) rotate(-8deg);
}

/* Nav dropdown chevron rotation */
.nav-dropdown-toggle .fa-chevron-down {
    transition: transform 250ms var(--ease);
}
.nav-item-has-children:hover .nav-dropdown-toggle .fa-chevron-down {
    transform: rotate(180deg);
}

/* ── Content Link Underline ─────────────────────────────────────────────── */
/* Underline slides in from right → left on hover */
.info-text a:not(.btn),
.info-box a:not(.btn) {
    position: relative;
    text-decoration: none;
}
.info-text a:not(.btn)::after,
.info-box a:not(.btn)::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 250ms var(--ease);
}
.info-text a:not(.btn):hover::after,
.info-box a:not(.btn):hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ── Hover Zoom Utility ─────────────────────────────────────────────────── */
/* Add .hover-zoom to any image wrapper for a contained scale+brightness effect */
.hover-zoom {
    overflow: hidden;
}
.hover-zoom img {
    transition: transform var(--dur-base) var(--ease),
                filter var(--dur-base) ease;
    display: block;
    width: 100%;
}
.hover-zoom:hover img {
    transform: scale(1.04);
    filter: brightness(1.06);
}

/* ── Local Box images (Standorte section) ───────────────────────────────── */
.local-box img {
    transition: transform var(--dur-base) var(--ease),
                filter var(--dur-base) ease;
}
.local-box:hover img {
    transform: scale(1.03);
    filter: brightness(1.05);
}

/* ── Prefers Reduced Motion — v4 additions ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fade-up, .fade-left, .fade-right, .scale-in,
    .stagger-group > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .service-card::after,
    .hover-zoom img,
    .local-box img {
        transition: none;
    }
    .service-icon, .step-visual-icon,
    .footer-contact a i, .contact-actions a i,
    .nav-dropdown-toggle .fa-chevron-down {
        transition: none;
    }
    .info-text a:not(.btn)::after,
    .info-box a:not(.btn)::after {
        transition: none;
    }
}

/* =============================================================================
   EBH ORGANIC MOTION SYSTEM v5
   Weighted · Fluid · Alive
   Overrides all previous timing values — single source of truth for motion.
   Principle: opacity + transform only, GPU-composited, var(--ease) everywhere.
   ============================================================================= */

/* ──────────────────────────────────────────────────────────────────────────
   1. ENTRANCE ANIMATIONS
   Every class now starts slightly compressed (scale 0.98).
   This gives elements "weight" — they feel like they bloom open, not teleport.
   ─────────────────────────────────────────────────────────────────────────── */

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity 750ms var(--ease), transform 750ms var(--ease);
    will-change: opacity, transform;
}
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.scale-up {
    opacity: 0;
    transform: scale(0.93);
    transition: opacity 750ms var(--ease), transform 750ms var(--ease);
}
.scale-up.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Gentler: large elements, section-level reveals */
.fade-in {
    opacity: 0;
    transform: translateY(16px) scale(0.99);
    transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.fade-in-up,
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.fade-in-up.is-visible,
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-40px) scale(0.98);
    transition: opacity 750ms var(--ease), transform 750ms var(--ease);
    will-change: opacity, transform;
}
.slide-in-right {
    opacity: 0;
    transform: translateX(40px) scale(0.98);
    transition: opacity 750ms var(--ease), transform 750ms var(--ease);
    will-change: opacity, transform;
}
.slide-in-left.is-visible,
.slide-in-right.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.fade-up {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.fade-left {
    opacity: 0;
    transform: translateX(-40px) scale(0.98);
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.fade-left.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.fade-right {
    opacity: 0;
    transform: translateX(40px) scale(0.98);
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.fade-right.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.scale-in {
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.scale-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

.stagger-group > * {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
    transition: opacity 650ms var(--ease), transform 650ms var(--ease);
}
.stagger-group > *.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ──────────────────────────────────────────────────────────────────────────
   2. HOVER PHYSICS — asymmetric timing
   Enter fast (responsive) → Leave slow (weighted, organic).
   CSS trick: transition defined in :hover applies when entering;
              transition defined in base applies when leaving.
   ─────────────────────────────────────────────────────────────────────────── */

/* Buttons */
.btn {
    /* Slow leave = organic return */
    transition:
        transform    480ms var(--ease),
        box-shadow   480ms var(--ease),
        color        280ms ease,
        background-color 280ms ease,
        border-color 280ms ease;
}
.btn:hover {
    /* Fast enter = responsive feel */
    transition:
        transform    200ms var(--ease),
        box-shadow   200ms var(--ease),
        color        180ms ease,
        background-color 180ms ease,
        border-color 180ms ease;
}
/* Upgrade hover transforms across all button variants */
.btn-primary:hover,
.btn-outline:hover {
    transform: translateY(-3px) scale(1.01);
}
.btn:active {
    transform: scale(0.97) !important;
    transition: transform 100ms ease !important;
}
/* Gradient overlay on primary: smooth */
.btn-primary::before {
    transition: opacity 380ms var(--ease), transform 380ms var(--ease);
}

/* Service cards */
.service-card {
    transition: transform 480ms var(--ease), box-shadow 480ms ease, border-color 280ms ease;
}
.service-card:hover {
    transition: transform 220ms var(--ease), box-shadow 220ms ease, border-color 220ms ease;
}
/* Gradient bar: also asymmetric */
.service-card::after {
    transition: transform 500ms var(--ease);
}
.service-card:hover::after {
    transition: transform 280ms var(--ease);
}

/* Info boxes */
.info-box {
    transition: transform 480ms var(--ease), box-shadow 480ms ease;
}
.info-box:hover {
    transition: transform 220ms var(--ease), box-shadow 220ms ease;
}

/* Team & testimonial cards */
.team-card,
.testimonial-card {
    transition: transform 480ms var(--ease), box-shadow 480ms ease;
}
.team-card:hover,
.testimonial-card:hover {
    transition: transform 220ms var(--ease), box-shadow 220ms ease;
}

/* Images inside containers */
.hero-image-wrapper img,
.service-image img {
    transition: transform 600ms var(--ease), filter 600ms ease;
}

/* ──────────────────────────────────────────────────────────────────────────
   3. IDLE / AMBIENT MOTION — "living" feeling
   Only applied to elements with no hover-transform conflict.
   ─────────────────────────────────────────────────────────────────────────── */

/* Hero trust icon: gentle vertical float */
@keyframes floatSubtle {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-5px); }
}
.trust-msg i {
    animation: floatSubtle 3.5s ease-in-out infinite;
    will-change: transform;
}

/* Process step icons: out-of-sync shadow pulse
   Creates an "alive chain" — each icon has its own rhythm */
@keyframes stepIconGlow {
    0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); }
    50%       { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08),
                            0 0 0 5px rgba(255, 255, 255, 0.28); }
}
.step-visual-item.is-visible .step-visual-icon {
    animation: stepIconGlow 4.5s ease-in-out 1.2s infinite;
}
.step-visual-item:nth-child(2).is-visible .step-visual-icon { animation-delay: 2.7s; }
.step-visual-item:nth-child(3).is-visible .step-visual-icon { animation-delay: 4.2s; }

/* ──────────────────────────────────────────────────────────────────────────
   4. HERO ENTRANCE — organic timing upgrade
   Longer durations + var(--ease) = smoother, more cinematic first impression.
   ─────────────────────────────────────────────────────────────────────────── */
.hero .hero-text {
    animation: ebhHeroText 0.9s var(--ease) both;
}
.hero .hero-image-wrapper {
    animation: ebhHeroFadeIn 1.1s var(--ease) 200ms both;
}
.hero .hero-image-wrapper img {
    animation: ebhHeroImageZoom 2s var(--ease) 200ms both;
}

/* ──────────────────────────────────────────────────────────────────────────
   5. DROPDOWN — smooth open/close
   ─────────────────────────────────────────────────────────────────────────── */
.dropdown-menu {
    transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 300ms;
}

/* ──────────────────────────────────────────────────────────────────────────
   6. REDUCED MOTION — v5 comprehensive block
   Disables every idle, entrance, and hover animation in one place.
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    /* Idle animations off */
    .trust-msg i,
    .step-visual-item.is-visible .step-visual-icon {
        animation: none !important;
    }

    /* Hover transitions off */
    .btn, .btn:hover,
    .service-card, .service-card:hover,
    .info-box, .info-box:hover,
    .team-card, .team-card:hover,
    .testimonial-card, .testimonial-card:hover,
    .service-card::after, .service-card:hover::after,
    .hero-image-wrapper img, .service-image img,
    .dropdown-menu {
        transition: none !important;
    }

    /* Entrance animations off — show immediately */
    .reveal-on-scroll, .scale-up, .fade-in,
    .fade-in-up, .animate-on-scroll,
    .slide-in-left, .slide-in-right,
    .fade-up, .fade-left, .fade-right, .scale-in,
    .stagger-group > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* Hero entrance off */
    .hero .hero-text,
    .hero .hero-image-wrapper,
    .hero .hero-image-wrapper img {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =============================================================================
   EBH MOTION SYSTEM v6 — Fully Alive
   Page load · Nav entrance · Images · Tilt · Underline reveal
   ============================================================================= */

/* ── 1. PAGE LOAD: body glides in — first impression is never static ── */
@keyframes ebhPageLoad {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
#ebh-page-body {
    animation: ebhPageLoad 0.65s var(--ease) both;
}

/* ── 2. NAVIGATION: staggered drop-in on page load ───────────────────── */
@keyframes navItemIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.nav-menu li {
    animation: navItemIn 0.45s var(--ease) both;
}
.nav-menu li:nth-child(1) { animation-delay: 100ms; }
.nav-menu li:nth-child(2) { animation-delay: 170ms; }
.nav-menu li:nth-child(3) { animation-delay: 240ms; }
.nav-menu li:nth-child(4) { animation-delay: 310ms; }
.nav-menu li:nth-child(5) { animation-delay: 380ms; }
.nav-menu li:nth-child(6) { animation-delay: 450ms; }
/* Header CTA button last */
.header-container > .btn {
    animation: navItemIn 0.45s var(--ease) 490ms both;
}

/* ── 3. LAZY IMAGES: upgrade fade to fade + zoom ─────────────────────── */
/* Overrides the earlier imgFadeIn keyframe (opacity only) */
@keyframes imgFadeIn {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: scale(1); }
}
img[loading="lazy"] {
    animation: imgFadeIn 0.75s var(--ease) both;
}

/* ── 4. CARD TILT: alternating slight rotation adds organic depth ─────── */
/* Even/odd direction creates natural variation across the grid */
.service-card:nth-child(odd):hover  { transform: translateY(-5px) rotate(0.4deg); }
.service-card:nth-child(even):hover { transform: translateY(-5px) rotate(-0.4deg); }

.info-box:nth-child(odd):hover  { transform: translateY(-3px) rotate(0.3deg); }
.info-box:nth-child(even):hover { transform: translateY(-3px) rotate(-0.3deg); }

.testimonial-card:nth-child(odd):hover  { transform: translateY(-5px) rotate(0.3deg); }
.testimonial-card:nth-child(even):hover { transform: translateY(-5px) rotate(-0.3deg); }

/* ── 5. SECTION HEADER UNDERLINE: clip-path reveal on scroll ─────────── */
/* Initially clipped from the right; reveals left-to-right when h2 is visible */
.section-header h2::after,
.section-intro h2::after {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 650ms var(--ease) 150ms;
}
.section-header h2.is-visible::after,
.section-intro  h2.is-visible::after {
    clip-path: inset(0 0% 0 0);
}

/* ── 6. REDUCED MOTION — v6 additions ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    body,
    .nav-menu li,
    .header-container > .btn {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    img[loading="lazy"] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .section-header h2::after,
    .section-intro  h2::after {
        clip-path: inset(0 0% 0 0) !important;
        transition: none !important;
    }
    .service-card:nth-child(n):hover,
    .info-box:nth-child(n):hover,
    .testimonial-card:nth-child(n):hover {
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EBH Gutenberg Block Forms (ebh/job-application-form, ebh/consulting-form)
   Inline forms rendered by PHP block callbacks. JS: ebh-form-blocks.js
   ═══════════════════════════════════════════════════════════════════════════ */

.ebh-block-form {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1.5rem 2.5rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}

.ebh-block-form__heading {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ebh-primary, #E5802B);
    margin: 0 0 0.5rem;
}

.ebh-block-form__desc {
    color: #555;
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

/* ── Form grid ───────────────────────────────────────────────────────────── */
.ebh-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 540px) {
    .ebh-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.ebh-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ebh-form-field--full {
    grid-column: 1 / -1;
}

.ebh-form-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}

.ebh-form-field input[type="text"],
.ebh-form-field input[type="email"],
.ebh-form-field input[type="tel"],
.ebh-form-field select,
.ebh-form-field textarea {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
    color: #111827;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.ebh-form-field input:focus,
.ebh-form-field select:focus,
.ebh-form-field textarea:focus {
    outline: none;
    border-color: var(--ebh-primary, #E5802B);
    box-shadow: 0 0 0 3px rgba(229,128,43,0.15);
}

.ebh-form-field textarea {
    resize: vertical;
    min-height: 100px;
}

/* ── Upload zone ─────────────────────────────────────────────────────────── */
.ebh-upload-field {
    margin-bottom: 1rem;
}

.ebh-upload-zone {
    border: 2px dashed #e5c89a;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    cursor: pointer;
    background: #fffaf5;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
    text-align: center;
}

.ebh-upload-zone:hover,
.ebh-upload-zone--drag {
    border-color: var(--ebh-primary, #E5802B);
    background: #fff5ec;
}

.ebh-upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.ebh-upload-zone__placeholder {
    color: #9ca3af;
    font-size: 0.9rem;
    pointer-events: none;
}

.ebh-upload-zone__name {
    color: #059669;
    font-size: 0.9rem;
    font-weight: 600;
    pointer-events: none;
}

/* ── Checkbox ────────────────────────────────────────────────────────────── */
.ebh-form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    font-weight: 400 !important;
    line-height: 1.5;
}

.ebh-form-checkbox input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--ebh-primary, #E5802B);
    cursor: pointer;
}

.ebh-form-checkbox a {
    color: var(--ebh-primary, #E5802B);
}

/* ── Submit row ──────────────────────────────────────────────────────────── */
.ebh-form-submit-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

.ebh-block-submit-btn {
    min-width: 200px;
}

.ebh-block-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Loading spinner ─────────────────────────────────────────────────────── */
.ebh-form-spinner {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.ebh-spinner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ebh-primary, #E5802B);
    animation: ebhSpinnerPulse 1.2s ease-in-out infinite;
}

.ebh-spinner-dot:nth-child(2) { animation-delay: 0.2s; }
.ebh-spinner-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes ebhSpinnerPulse {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
    40%           { opacity: 1;    transform: scale(1); }
}

/* ── Status messages ─────────────────────────────────────────────────────── */
.ebh-form-message {
    margin-top: 1rem;
    padding: 0.85rem 1.1rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
}

.ebh-form-message--success {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

.ebh-form-message--error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}


/* =============================================================================
   DESIGN IMPROVEMENTS — April 2026
   Task 1: Leistungen CTA | Task 2: Pirna Hero | Task 3–4: Team Section
   ============================================================================= */

/* ── TASK 1 — Leistungen: CTA Phone Button & Button Group Alignment ────────── */

/* Phone button wrapper: strip any default block button background */
.wp-block-button.cta-phone-button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Phone button link: solid white border + white text on the orange CTA background */
.cta-section .wp-block-button.cta-phone-button .wp-block-button__link,
.wp-block-button.cta-phone-button .wp-block-button__link {
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    background: transparent !important;
    border-radius: 50px;
    padding: 14px 40px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cta-section .wp-block-button.cta-phone-button .wp-block-button__link:hover,
.cta-section .wp-block-button.cta-phone-button .wp-block-button__link:focus,
.wp-block-button.cta-phone-button .wp-block-button__link:hover,
.wp-block-button.cta-phone-button .wp-block-button__link:focus {
    background: #ffffff !important;
    color: var(--color-brand-orange-rich, #D67D00) !important;
    border-color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

/* Button group wrapper: horizontal flex with equal visual weight */
.wp-block-buttons.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

/* Ensure both buttons share the same min-height for equal visual weight */
.wp-block-buttons.cta-buttons .wp-block-button .wp-block-button__link {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* ── TASK 2 — Pirna: Hero Split — image fills container to match content height */

/* Complement the existing div.wp-block-columns.hero-split rules (lines 5280–5321).
   Add .hero-content as an alias for .hero-text-split so either class works. */
div.wp-block-columns.hero-split > div.wp-block-column.hero-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Ensure the grid row stretches both columns to equal height */
div.wp-block-columns.hero-split {
    align-items: stretch !important;
}

/* Fallback: non-Gutenberg .hero-split — ensure .hero-content mirrors .hero-media */
.hero-split .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* ── TASK 3 — Team: "Was uns antreibt" section — subtle light blue background ── */

.section-blue {
    background-color: #E6F4F7;
    color: var(--color-text-main, #1F2933);
    padding: 80px 20px;
}

.section-blue .wp-block-heading,
.section-blue h2,
.section-blue h3,
.section-blue h4 {
    color: var(--color-brand-cyan-dark, #0E5E75);
}

.section-blue p,
.section-blue .wp-block-paragraph {
    color: var(--color-text-muted, #4B5563);
}

/* ── TASK 4 — Team: Value circles with centered SVG icons ──────────────────── */

.value-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

.value-circle:hover {
    background-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

/* SVGs inside: fill inherits white so they're visible on the dark circle */
.value-circle svg {
    width: 48px;
    height: 48px;
    fill: #ffffff;
    flex-shrink: 0;
    display: block;
}

/* Variant for value circles on a light background (outside .section-blue) */
.value-circle--on-light {
    background-color: var(--color-brand-cyan-dark, #0E5E75);
    border-color: transparent;
}

.value-circle--on-light svg {
    fill: #ffffff;
}

/* Value circle nested inside a white value-card: use per-card accent color */
.value-card .value-circle {
    width: 80px;
    height: 80px;
    background-color: var(--vc-soft, rgba(214, 125, 0, 0.1));
    border-color: var(--vc-accent, #D67D00);
    border-width: 2px;
    margin-bottom: 0;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.value-card .value-circle svg {
    width: 36px;
    height: 36px;
    fill: var(--vc-accent, #D67D00);
}

.value-card:hover .value-circle {
    background-color: var(--vc-accent, #D67D00);
    transform: scale(1.08) rotate(-4deg);
}

.value-card:hover .value-circle svg {
    fill: #ffffff;
}

/* ── Responsive: Tasks 1 & 4 mobile adjustments ────────────────────────────── */
@media (max-width: 768px) {
    /* Task 1: stack CTA buttons vertically on mobile */
    .wp-block-buttons.cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .wp-block-buttons.cta-buttons .wp-block-button .wp-block-button__link,
    .cta-section .wp-block-button.cta-phone-button .wp-block-button__link {
        width: 100%;
        max-width: 360px;
        justify-content: center;
        text-align: center;
    }

    /* Task 4: slightly smaller circles on mobile */
    .value-circle {
        width: 96px;
        height: 96px;
    }

    .value-circle svg {
        width: 38px;
        height: 38px;
    }
}

/* ── Cookie-Banner: Sichtbarkeits-Fallback ──────────────────────────────────
   Verhindert, dass der Banner durch globale Resets oder Drittanbieter-Styles
   ausgeblendet wird.
   – transform wird NICHT mit !important überschrieben: dismissBanner() in
     cookie-banner.js setzt per Inline-Style translateY(110%) für den Slide-Out,
     was Inline-Styles > CSS-Regeln ohne !important gilt.
   ─────────────────────────────────────────────────────────────────────────── */
#ebh-cookie-banner {
    display: block !important;
    visibility: visible !important;
    z-index: 99999 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(0);
}

/* ── SEO-Textblock (Home, Pirna, Leistungen) ─────────────────────────────── */
.ebh-seo-block {
    background: var(--color-bg-alt, #f8f9fa);
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.ebh-seo-block h2 {
    margin-bottom: 1rem;
}

.ebh-seo-block h3 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    font-size: 1.15rem;
}

.ebh-seo-block p {
    max-width: 74ch;
    margin-bottom: 1rem;
    line-height: 1.7;
}

.ebh-seo-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.ebh-nap-block {
    margin-top: 2.5rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border-left: 4px solid var(--color-primary, #1a6cba);
    border-radius: 6px;
    font-style: normal;
    line-height: 1.9;
    max-width: 520px;
    font-size: 0.95rem;
}

/* ── Footer NAP-Adresse ──────────────────────────────────────────────────── */
.footer-nap {
    font-style: normal;
    font-size: 0.82rem;
    opacity: 0.75;
    text-align: center;
    margin: 0;
    color: inherit;
}

.footer-nap .fa-map-marker-alt {
    margin-right: 0.3rem;
}