/* ============================================================
   BIAG FireExperts – Main Stylesheet
   Design: Modern, industrial, European BBQ industry platform
   ============================================================ */

/* --- Inter Variable Font (lokal gehostet) ------------------ */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                   U+FEFF, U+FFFD;
}

/* --- Variables -------------------------------------------- */
:root {
    --color-dark:        #1A1A1A;
    --color-dark-mid:    #2D2D2D;
    --color-dark-soft:   #3D3D3D;
    --color-orange:      #E85D04;
    --color-orange-mid:  #F48C06;
    --color-orange-soft: #FCA044;
    --color-blue:        #2C4A7C;
    --color-blue-mid:    #3D5E96;
    --color-light:       #F7F5F2;
    --color-light-mid:   #EDEBE7;
    --color-border:      #E0DED9;
    --color-text:        #1A1A1A;
    --color-text-mid:    #4A4A4A;
    --color-text-light:  #7A7A7A;
    --color-white:       #FFFFFF;

    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --max-width: 1200px;
    --header-height: 72px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,.1);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.12);

    --transition: 0.25s ease;
}

/* --- Dark Mode -------------------------------------------- */
[data-theme="dark"] {
    --color-light:       #242424;
    --color-light-mid:   #2D2D2D;
    --color-border:      #3A3A3A;
    --color-white:       #1E1E1E;
    --color-text:        #F0EEE9;
    --color-text-mid:    #C8C5BE;
    --color-text-light:  #8A8880;
}

[data-theme="dark"] .site-header {
    background-color: rgba(20,20,20,0.96);
    border-bottom-color: #3A3A3A;
}

[data-theme="dark"] .insight-card,
[data-theme="dark"] .structure-card,
[data-theme="dark"] .dialogue-card,
[data-theme="dark"] .member-card,
[data-theme="dark"] .vorstand-card {
    background-color: #242424;
    border-color: #3A3A3A;
}

[data-theme="dark"] .page-hero-subtitle,
[data-theme="dark"] .section-intro {
    color: rgba(240,238,233,0.7);
}

[data-theme="dark"] .translate-widget .goog-te-combo {
    color: var(--color-text);
    border-color: #3A3A3A;
    background: transparent;
}

[data-theme="dark"] .nav-menu > li > a {
    color: var(--color-text);
}

/* Logo */
[data-theme="dark"] .logo-biag {
    color: var(--color-text);
}

/* Hamburger-Icon im Dark Mode weiß */
[data-theme="dark"] .hamburger-line {
    background-color: var(--color-text);
}

/* Hero-Headline (explizit var(--color-dark) gesetzt) */
[data-theme="dark"] .hero-headline {
    color: var(--color-text);
}

/* Navigation: Hover- & Aktiv-Zustand */
[data-theme="dark"] .nav-menu li a:hover {
    color: var(--color-orange);
}
[data-theme="dark"] .nav-menu li.current-menu-item > a,
[data-theme="dark"] .nav-menu li.current-menu-ancestor > a {
    color: var(--color-text);
}

/* Kontaktformular Labels */
[data-theme="dark"] .contact-form label {
    color: var(--color-text);
}
[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea,
[data-theme="dark"] .contact-form select {
    background-color: #2D2D2D;
    border-color: var(--color-border);
    color: var(--color-text);
}

/* Events CTA Überschrift */
[data-theme="dark"] .events-cta-inner h2 {
    color: var(--color-text);
}

/* Content-Highlight / Blockquote */
[data-theme="dark"] .content-highlight {
    background-color: #2D2D2D;
    color: var(--color-text-mid);
}

/* Karten-Titel & Inhalte (verwenden var(--color-dark) explizit) */
[data-theme="dark"] .structure-card-title,
[data-theme="dark"] .dialogue-card-title,
[data-theme="dark"] .insight-card-title,
[data-theme="dark"] .member-card-name,
[data-theme="dark"] .vorstand-card-name,
[data-theme="dark"] .role-platform-item strong {
    color: var(--color-text);
}

/* Seiten-Inhalte */
[data-theme="dark"] .page-content-inner h2,
[data-theme="dark"] .page-content-inner h3,
[data-theme="dark"] .page-content-inner ul li {
    color: var(--color-text);
}

/* Einzelbeiträge */
[data-theme="dark"] .single-post-content h2,
[data-theme="dark"] .single-post-content h3 {
    color: var(--color-text);
}

/* Rolle-Sektion (heller Bereich) */
[data-theme="dark"] .role-section {
    background-color: var(--color-white);
}

/* Dialogue-Karten Hintergrund */
[data-theme="dark"] .dialogue-card {
    background-color: var(--color-white);
    border-color: var(--color-border);
}

/* Outline-Dark-Button im Dark Mode */
[data-theme="dark"] .btn-outline-dark,
[data-theme="dark"] .nav-menu > li:last-child > a {
    border-color: var(--color-text);
    color: var(--color-text);
}
[data-theme="dark"] .btn-outline-dark:hover,
[data-theme="dark"] .nav-menu > li:last-child > a:hover {
    background-color: var(--color-text);
    color: var(--color-dark);
}

/* Mobiler Nav-Drawer – Dark Mode */
[data-theme="dark"] .primary-navigation {
    background-color: #1A1A1A;
}
[data-theme="dark"] .nav-menu li a:hover {
    background-color: #2D2D2D;
}

/* Sub-Menü Hintergrund & Hover */
[data-theme="dark"] .nav-menu .sub-menu {
    background: #242424;
    border-color: var(--color-border);
}
[data-theme="dark"] .nav-menu .sub-menu li a:hover {
    background-color: #2D2D2D;
    color: var(--color-orange);
}

/* Membership Highlight Box */
[data-theme="dark"] .membership-highlight-box {
    background-color: #111;
}

/* Cookie-Notice */
[data-theme="dark"] #biag-cookie-notice {
    background: #242424;
    border-color: var(--color-border);
    color: var(--color-text);
}

/* --- Reset & Base ----------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

html {
    overflow-x: clip; /* verhindert horizontalen Scroll ohne fixed-Elemente zu beeinflussen */
}

body {
    font-family: var(--font-main);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-text);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* --- Typography ------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }

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

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

.section {
    padding: 100px 0;
}

.section--dark {
    background-color: var(--color-dark);
    color: var(--color-white);
}

.section--light {
    background-color: var(--color-light);
}

.section--orange-stripe {
    background-color: var(--color-orange);
    color: var(--color-white);
}

.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-orange);
    margin-bottom: 1rem;
}

.section--dark .section-label {
    color: var(--color-orange-soft);
}

.section-title {
    margin-bottom: 1.25rem;
}

.section-intro {
    font-size: 1.125rem;
    color: var(--color-text-mid);
    max-width: 640px;
    margin-bottom: 3rem;
    line-height: 1.7;
}

.section--dark .section-intro {
    color: rgba(255,255,255,0.7);
}

/* --- Buttons ---------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    white-space: nowrap;
}

.btn-primary {
    background-color: var(--color-orange);
    color: var(--color-white);
}
.btn-primary:hover {
    background-color: var(--color-orange-mid);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(232, 93, 4, 0.3);
}

.btn-outline {
    border: 2px solid var(--color-white);
    color: var(--color-white);
}
.btn-outline:hover {
    background-color: var(--color-white);
    color: var(--color-dark);
}

.btn-outline-dark {
    border: 2px solid var(--color-dark);
    color: var(--color-dark);
}
.btn-outline-dark:hover {
    background-color: var(--color-dark);
    color: var(--color-white);
}

.btn-arrow::after {
    content: '→';
    font-size: 1.1em;
}

/* --- Header / Navigation ---------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-height);
    background-color: rgba(255,255,255,0.96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow var(--transition);
}

/* WordPress Admin-Bar: Header unter der Admin-Bar verschieben */
.admin-bar .site-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

.site-header.scrolled {
    box-shadow: var(--shadow-md);
}

.header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
}

.primary-navigation {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Header-Controls: Theme-Toggle + Hamburger als Gruppe */
.header-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--color-border);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--color-text-mid);
    transition: border-color var(--transition), color var(--transition), background var(--transition);
    padding: 0;
    margin-left: 0.25rem;
}

.theme-toggle:hover {
    border-color: var(--color-orange);
    color: var(--color-orange);
    background: rgba(232,93,4,0.06);
}

.theme-toggle svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Sonne im Dark Mode zeigen, Mond im Light Mode */
.theme-toggle-moon { display: block; }
.theme-toggle-sun  { display: none; }

[data-theme="dark"] .theme-toggle-moon { display: none; }
[data-theme="dark"] .theme-toggle-sun  { display: block; }

[data-theme="dark"] .theme-toggle {
    border-color: #3A3A3A;
    color: var(--color-text-mid);
}

.site-logo-text {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.logo-biag {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--color-dark);
}

.logo-tagline {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-orange);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

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

.nav-menu li a {
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: var(--color-text-mid);
    position: relative;
    transition: color var(--transition);
}

/* Animierter Unterstrich */
.nav-menu li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0.75rem;
    right: 0.75rem;
    height: 2px;
    background-color: var(--color-orange);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition);
}

.nav-menu li a:hover {
    color: var(--color-dark);
}

.nav-menu li a:hover::after {
    transform: scaleX(1);
}

.nav-menu li.current-menu-item > a {
    color: var(--color-dark);
    font-weight: 600;
}

.nav-menu li.current-menu-item > a::after {
    transform: scaleX(1);
}

/* Dropdown sub-menu (desktop) */
.nav-menu .menu-item-has-children {
    position: relative;
}

.nav-menu .menu-item-has-children > a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0.75rem;
    right: 0.75rem;
    height: 2px;
    background-color: var(--color-orange);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition);
}

.nav-menu .menu-item-has-children > a > span.dropdown-arrow {
    display: inline-block;
    margin-left: 0.2em;
    font-size: 0.65em;
    vertical-align: middle;
    transition: transform var(--transition);
    line-height: 1;
}

.nav-menu .menu-item-has-children:hover > a > span.dropdown-arrow,
.nav-menu .menu-item-has-children:focus-within > a > span.dropdown-arrow {
    transform: rotate(180deg);
}

.nav-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 200;
    list-style: none;
    padding: 0.375rem 0;
    margin: 0;
    /* opacity/visibility statt display:none — verhindert Layout-Sprung
       und erlaubt sanfte Transition ohne den hover-State zu brechen */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    /* Unsichtbare Brücke schließt die visuelle Lücke zum li */
}
.nav-menu .sub-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.nav-menu .menu-item-has-children:hover .sub-menu,
.nav-menu .menu-item-has-children:focus-within .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    margin-top: 6px;
}

.nav-menu .sub-menu li {
    margin: 0;
    padding: 0;
}

.nav-menu .sub-menu li a {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 400;
    white-space: nowrap;
    color: var(--color-text);
    border-radius: 0;
    display: block;
    transition: color var(--transition), background-color var(--transition);
}

.nav-menu .sub-menu li a::after {
    display: none;
}

.nav-menu .sub-menu li a:hover {
    color: var(--color-orange);
    background-color: var(--color-light);
}

/* CTA-Button – letztes Top-Level-Element (> verhindert Treffer in Sub-Menüs) */
.nav-menu > li:last-child {
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 1px solid var(--color-border);
}

.nav-menu > li:last-child > a {
    padding: 0.5rem 1.125rem;
    background-color: transparent;
    color: var(--color-dark);
    border: 1.5px solid var(--color-dark);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.8125rem;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.nav-menu > li:last-child > a::after {
    display: none;
}

.nav-menu > li:last-child > a:hover {
    background-color: var(--color-dark);
    color: var(--color-white);
    border-color: var(--color-dark);
}

.nav-close {
    display: none;
}

.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 989;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

.nav-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.28s ease, visibility 0s linear 0s;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
    background-color: var(--color-light);
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

.hamburger-line {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-dark);
    transition: transform var(--transition), opacity var(--transition);
}

/* --- Hero Section ----------------------------------------- */
.hero-section {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: var(--header-height);
}

/* Hero-Padding anpassen wenn Admin-Bar aktiv ist */
.admin-bar .hero-section {
    padding-top: calc(var(--header-height) + 32px);
}
@media screen and (max-width: 782px) {
    .admin-bar .hero-section {
        padding-top: calc(var(--header-height) + 46px);
    }
}

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 4rem 80px 2rem;
    /* max-width + margin-left:auto zentriert den Textblock in der linken Hälfte */
    max-width: 660px;
    margin-left: auto;
    margin-right: 0;
    /* Breite nie schmaler als nötig: grid-item füllt die Spalte */
    width: 100%;
}

/* Ab 1400px: Linke Einrückung an den Container ausrichten */
@media (min-width: 1400px) {
    .hero-content {
        max-width: none;
        margin-left: 0;
        padding-left: calc((100vw - var(--max-width)) / 2);
        padding-right: 4rem;
    }
}

.hero-headline {
    font-size: clamp(2.25rem, 4vw, 3.75rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--color-dark);
    margin-bottom: 1.5rem;
}

.hero-headline em {
    font-style: normal;
    color: var(--color-orange);
}

.hero-subheadline {
    font-size: 1.175rem;
    line-height: 1.65;
    color: var(--color-text-mid);
    margin-bottom: 2rem;
    max-width: 480px;
}

.hero-claim {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-orange);
    padding: 0.5rem 1rem;
    border: 2px solid var(--color-orange);
    border-radius: var(--radius-sm);
    margin-bottom: 2.5rem;
}

.hero-visual {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1A1A1A 0%, #2D1200 40%, #6B2400 70%, #E85D04 100%);
}

.hero-visual-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(232,93,4,0.25) 0%, transparent 60%);
}

.hero-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    max-width: 78%;
    max-height: 58vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}

.hero-visual-text {
    position: absolute;
    bottom: 3rem;
    left: 3rem;
    right: 3rem;
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 1rem;
}

.hero-fire-particles {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fire-icon {
    font-size: 8rem;
    opacity: 0.15;
    animation: flicker 3s ease-in-out infinite alternate;
}

@keyframes flicker {
    0%   { opacity: 0.1; transform: scale(1); }
    50%  { opacity: 0.2; transform: scale(1.05); }
    100% { opacity: 0.12; transform: scale(0.98); }
}

/* --- Section 2: FireExperts Industry ---------------------- */
.industry-section .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.industry-text {}

.industry-text ul {
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.industry-text li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--color-text-mid);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.industry-text li::before {
    content: '—';
    color: var(--color-orange);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0.1em;
}

.industry-diagram {
    background-color: var(--color-light);
    border-radius: var(--radius-lg);
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.diagram-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-light);
    text-align: center;
}

.diagram-svg-wrap {
    width: 100%;
    max-width: 320px;
}

.diagram-svg-wrap svg {
    width: 100%;
    height: auto;
}

/* --- Section 3: Structure --------------------------------- */
.structure-section .section-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 4rem;
}

.structure-section .section-intro {
    margin: 0 auto;
}

.structure-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.structure-card {
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    padding: 2rem 1.75rem;
    border: 1px solid var(--color-border);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.structure-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-orange);
}

.structure-card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1.5rem;
    color: var(--color-orange);
}

.structure-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--color-dark);
}

.structure-card-text {
    font-size: 0.9rem;
    color: var(--color-text-mid);
    line-height: 1.6;
    margin-bottom: 0;
}

/* --- Section 4: Role of BIAG ------------------------------ */
.role-section .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.role-visual {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
    background: linear-gradient(145deg, #1A1A1A, #2D2D2D);
}

.role-visual.has-bg-image {
    background-size: cover;
    background-position: center;
}

.role-visual.has-bg-image .role-visual-inner {
    background: rgba(0, 0, 0, 0.55);
}

.role-visual-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.role-visual-quote {
    color: rgba(255,255,255,0.85);
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.5;
    font-style: italic;
    border-left: 3px solid var(--color-orange);
    padding-left: 1.5rem;
    text-align: left;
}

.role-text .section-title {
    margin-bottom: 1.25rem;
}

.role-platform-list {
    margin: 1.5rem 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.role-platform-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background-color: var(--color-light);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-orange);
}

.role-platform-item strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 0.125rem;
}

.role-platform-item span {
    font-size: 0.825rem;
    color: var(--color-text-mid);
}

/* --- Section 5: European Industry ------------------------- */
.europe-section {
    padding: 100px 0;
}

.europe-section .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.europe-text .section-title { color: var(--color-white); }

.europe-legend {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 2rem;
}

.europe-legend-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background-color: rgba(255,255,255,0.06);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,0.1);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-dot--orange { background-color: #E85D04; }
.legend-dot--green  { background-color: #2D6A4F; }
.legend-dot--blue   { background-color: #2C4A7C; }

.legend-label {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
}

.europe-map-container {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    padding: 2rem;
}

.europe-map-svg {
    width: 100%;
    max-width: 420px;
    opacity: 0.9;
}

/* --- Section 6: Industry Dialogue ------------------------- */
.dialogue-section .section-header {
    max-width: 680px;
    margin-bottom: 3.5rem;
}

.dialogue-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.dialogue-card {
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    padding: 2.5rem 2rem;
    border: 1px solid var(--color-border);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-decoration: none;
}

.dialogue-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-orange);
}

.dialogue-card-category {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-orange);
}

.dialogue-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.3;
}

.dialogue-card-text {
    font-size: 0.9rem;
    color: var(--color-text-mid);
    line-height: 1.65;
    flex-grow: 1;
}

.dialogue-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-orange);
    margin-top: 0.5rem;
    transition: gap var(--transition);
}

.dialogue-card:hover .dialogue-card-link {
    gap: 0.875rem;
}

/* --- Section 7: Circle of FireExperts --------------------- */
.circle-section .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.circle-text .section-title {
    font-size: clamp(1.8rem, 3vw, 2.75rem);
}

.circle-text p {
    font-size: 1.05rem;
    color: var(--color-text-mid);
    line-height: 1.7;
}

.circle-visual {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 5/4;
    background: linear-gradient(135deg, #2D1200, #E85D04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-visual.has-bg-image {
    background-size: cover;
    background-position: center;
}

.circle-visual.has-bg-image .circle-visual-inner {
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-md);
    padding: 2.5rem;
}

.circle-visual-inner {
    text-align: center;
    padding: 3rem;
    color: var(--color-white);
}

.circle-visual-headline {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.circle-visual-sub {
    font-size: 0.9rem;
    opacity: 0.65;
    line-height: 1.5;
}

/* --- Section 8: Join the Dialogue (CTA) ------------------- */
.cta-section {
    text-align: center;
    padding: 120px 0;
}

.cta-section .section-label {
    color: var(--color-orange-soft);
}

.cta-section h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
}

.cta-section p {
    color: rgba(255,255,255,0.7);
    font-size: 1.1rem;
    max-width: 580px;
    margin: 0 auto 1rem;
}

.cta-claim {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-orange-soft);
    margin: 1.5rem 0 3rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Footer ----------------------------------------------- */
.site-footer {
    background-color: #111111;
    color: rgba(255,255,255,0.6);
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 5rem 2rem 2.5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4rem;
}

.footer-logo {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.footer-logo .logo-biag {
    color: var(--color-white);
    font-size: 1.5rem;
    font-weight: 800;
}

.footer-logo .logo-tagline {
    color: var(--color-orange);
}

.footer-claim {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.4);
    font-style: italic;
    margin: 0;
}

.footer-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
}

.footer-nav-menu li a {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.5);
    transition: color var(--transition);
}

.footer-nav-menu li a:hover {
    color: var(--color-white);
}

.footer-bottom {
    grid-column: 1 / -1;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-copyright {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.3);
    margin: 0;
}

.footer-legal {
    display: flex;
    gap: 1.5rem;
}

.footer-legal a,
.footer-legal-revoke {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.3);
    transition: color var(--transition);
}

.footer-legal a:hover,
.footer-legal-revoke:hover {
    color: rgba(255,255,255,0.7);
}

.footer-legal-revoke {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-main);
}

/* --- Cookie Banner ---------------------------------------- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    background: #111111;
    border-top: 2px solid var(--color-orange);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
}

.cookie-banner-text {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.65);
    margin: 0;
    line-height: 1.55;
    max-width: 700px;
}

.cookie-banner-text a {
    color: var(--color-orange);
    text-decoration: underline;
}

.cookie-banner-buttons {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.cookie-btn-secondary {
    padding: 0.5rem 1.125rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font-main);
    background: transparent;
    color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
    white-space: nowrap;
}

.cookie-btn-secondary:hover {
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}

.cookie-btn-primary {
    padding: 0.5rem 1.125rem;
    font-size: 0.8125rem;
    font-weight: 700;
    font-family: var(--font-main);
    background: var(--color-orange);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition);
    white-space: nowrap;
}

.cookie-btn-primary:hover {
    background: #C94F02;
}

@media (max-width: 600px) {
    .cookie-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 1.25rem;
    }
    .cookie-banner-buttons { width: 100%; }
    .cookie-btn-secondary,
    .cookie-btn-primary { flex: 1; text-align: center; }
}

/* --- Inner Page Layout ------------------------------------ */
.page-hero {
    background-color: var(--color-dark);
    padding: calc(var(--header-height) + 80px) 0 80px;
    color: var(--color-white);
}

.page-hero-inner {
    max-width: 760px;
}

.page-hero .section-label {
    color: var(--color-orange-soft);
}

.page-hero h1 {
    color: var(--color-white);
    margin-bottom: 1.25rem;
}

.page-hero-subtitle {
    font-size: 1.175rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.65;
    max-width: 600px;
    margin: 0;
}

.page-content-section {
    padding: 80px 0;
}

.page-content-inner {
    max-width: 760px;
}

.page-content-inner h2 {
    font-size: 1.75rem;
    margin: 2.5rem 0 1rem;
    color: var(--color-dark);
}

.page-content-inner h3 {
    font-size: 1.25rem;
    margin: 2rem 0 0.75rem;
    color: var(--color-dark);
}

.page-content-inner p {
    color: var(--color-text-mid);
    line-height: 1.75;
    font-size: 1.05rem;
}

.page-content-inner ul {
    list-style: none;
    margin: 1rem 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.page-content-inner ul li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--color-text-mid);
    line-height: 1.6;
}

.page-content-inner ul li::before {
    content: '—';
    color: var(--color-orange);
    font-weight: 700;
    flex-shrink: 0;
}

.content-highlight {
    background-color: var(--color-light);
    border-left: 4px solid var(--color-orange);
    padding: 1.5rem 2rem;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin: 2.5rem 0;
    font-size: 1.05rem;
    color: var(--color-dark);
    font-weight: 500;
    line-height: 1.6;
    font-style: italic;
}

/* --- Industry Insights (Blog Archive) --------------------- */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.insight-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
    display: flex;
    flex-direction: column;
}

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

.insight-card-image {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--color-dark) 0%, #4A2800 100%);
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

.insight-card-image img.insight-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.insight-card:hover .insight-card-img {
    transform: scale(1.04);
}

.insight-card-image-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    opacity: 0.2;
}

.insight-card-body {
    padding: 1.75rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.insight-card-category {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-orange);
}

.insight-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.3;
    flex-grow: 1;
}

.insight-card-title a {
    color: inherit;
    transition: color var(--transition);
}

.insight-card-title a:hover { color: var(--color-orange); }

.insight-card-excerpt {
    font-size: 0.875rem;
    color: var(--color-text-mid);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.insight-card-meta {
    font-size: 0.8rem;
    color: var(--color-text-light);
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    margin-top: auto;
}

/* Single Post Featured Image */
.single-post-featured-image {
    background-color: var(--color-dark);
    padding-bottom: 60px;
}

.single-post-featured-image .container {
    max-width: 760px;
}

.single-post-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Single Post */
.single-post-header {
    background-color: var(--color-dark);
    padding: calc(var(--header-height) + 80px) 0 80px;
}

.single-post-header .section-label { color: var(--color-orange-soft); }
.single-post-header h1 { color: var(--color-white); max-width: 760px; }

.single-post-meta {
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.4);
}

.single-post-content {
    padding: 80px 0;
}

.single-post-content .container {
    max-width: 760px;
}

.single-post-content h2 {
    font-size: 1.6rem;
    margin: 2.5rem 0 1rem;
    color: var(--color-dark);
}

.single-post-content h3 {
    font-size: 1.25rem;
    margin: 2rem 0 0.75rem;
}

.single-post-content p {
    font-size: 1.0625rem;
    color: var(--color-text-mid);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.single-post-content ul {
    list-style: none;
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.single-post-content ul li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: 1.0625rem;
    color: var(--color-text-mid);
    line-height: 1.7;
}

.single-post-content ul li::before {
    content: '—';
    color: var(--color-orange);
    font-weight: 700;
    flex-shrink: 0;
}

/* Bild-Textfluss (alignleft/alignright aus dem Block-Editor) */
.single-post-content .alignleft {
    float: left;
    margin: 0.25rem 1.75rem 1rem 0;
    max-width: 50%;
}

.single-post-content .alignright {
    float: right;
    margin: 0.25rem 0 1rem 1.75rem;
    max-width: 50%;
}

.single-post-content .aligncenter {
    display: block;
    margin: 1.5rem auto;
    text-align: center;
}

.single-post-content .alignleft img,
.single-post-content .alignright img,
.single-post-content .aligncenter img,
.single-post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
}

.single-post-content::after {
    content: '';
    display: table;
    clear: both;
}

.back-to-insights {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-orange);
    margin-bottom: 3rem;
    transition: gap var(--transition);
}

.back-to-insights:hover { gap: 0.875rem; }

/* Membership special styling */
.membership-highlight-box {
    background-color: var(--color-dark);
    color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 3.5rem 3rem;
    margin: 3rem 0;
}

.membership-highlight-box h3 {
    color: var(--color-orange-soft);
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
}

.membership-highlight-box p {
    color: rgba(255,255,255,0.7);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* Contact form styling */
.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
}

.contact-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

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

.contact-form label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dark);
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    padding: 0.875rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-main);
    font-size: 0.9375rem;
    color: var(--color-text);
    background-color: var(--color-white);
    transition: border-color var(--transition);
    outline: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--color-orange);
    box-shadow: 0 0 0 3px rgba(232,93,4,0.1);
}

.contact-form textarea {
    resize: vertical;
    min-height: 140px;
}

.contact-form button[type=submit] {
    grid-column: 1 / -1;
    justify-self: start;
}

/* --- No menu fallback ------------------------------------- */
.primary-navigation:empty { display: none; }

/* ============================================================
   RESPONSIVE – Mobile First Refinements
   Breakpoints:
     1200px  Tablet landscape / small desktop
      960px  Tablet portrait
      680px  Large phone / phablet
      480px  Standard phone
      360px  Small phone
   ============================================================ */

/* --- 1200px: Tablet landscape ----------------------------- */
@media (max-width: 1200px) {
    .container { padding: 0 1.5rem; }

    .hero-content {
        padding: 60px 60px 60px 1.5rem;
    }

    .structure-grid { grid-template-columns: repeat(2, 1fr); }
    .insights-grid  { grid-template-columns: repeat(2, 1fr); }
    .dialogue-cards { grid-template-columns: repeat(2, 1fr); }

    .industry-section .container,
    .role-section .container,
    .circle-section .container,
    .europe-section .container {
        gap: 56px;
    }
}

/* --- 1080px: Navigation → Hamburger ----------------------- */
@media (max-width: 1080px) {

    /* Controls-Gruppe rechts ausrichten */
    .header-controls { margin-left: auto; }
    .nav-toggle       { display: flex; }

    .nav-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 1rem;
        right: 1.25rem;
        width: 44px;
        height: 44px;
        border-radius: var(--radius-sm);
        color: var(--color-text);
        transition: background-color var(--transition), color var(--transition);
    }
    .nav-close svg { width: 22px; height: 22px; }
    .nav-close:hover { background-color: var(--color-light-mid); }

    /* ── Vollbild-Drawer ──────────────────────────────────────
       Die gesamte <nav> wird zum Drawer (z-index 990, darunter
       liegt der Header mit z-index 1000 – immer bedienbar).
       Geschlossen: nach rechts weggschoben (translateX 100%).
    ────────────────────────────────────────────────────────── */
    .primary-navigation {
        /* Flex-Breite auf 0 zwingen – verhindert dass margin-left:auto
           aus dem Desktop-Style den .header-controls aus dem Viewport schiebt */
        flex: 0 0 0;
        min-width: 0;
        margin-left: 0;

        position: fixed;
        top:    0;
        left:   0;
        right:  0;
        height: 100vh;
        height: 100dvh;
        z-index: 990;

        display:        flex;
        flex-direction: column;
        align-items:    stretch;

        background-color: var(--color-white);
        overflow-y:      auto;
        -webkit-overflow-scrolling: touch;
        padding: calc(var(--header-height) + 1.5rem) 1.25rem 3rem;

        transform:  translateX(100%);
        visibility: hidden;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s linear 0.28s;
    }

    .primary-navigation.open {
        transform:  translateX(0);
        visibility: visible;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s linear 0s;
    }

    /* ── Nav-Menü: Spalten-Layout ── */
    .nav-menu {
        display:        flex;
        flex-direction: column;
        align-items:    stretch; /* Desktop-Wert 'center' überschreiben */
        gap:            0;
        width:          100%;
        list-style:     none;
    }

    /* Jedes li füllt die volle Breite */
    .nav-menu li {
        width: 100%;
    }

    /* Große Touch-Targets */
    .nav-menu li a {
        display:     flex;
        align-items: center;
        width:       100%;
        padding:     0.875rem 0.75rem;
        font-size:   1rem;
        font-weight: 500;
        min-height:  48px;
        color:       var(--color-text);
        white-space: normal;
        letter-spacing: 0;
        border-radius: var(--radius-sm);
        background:  transparent;
        transition:  background-color 0.15s, color 0.15s;
    }

    .nav-menu li a::after { display: none !important; }

    .nav-menu li a:hover {
        background-color: var(--color-light);
        color:            var(--color-orange);
    }

    /* Dropdown-Pfeil verstecken */
    .nav-menu .menu-item-has-children > a > .dropdown-arrow { display: none; }

    /* Sub-Menüs: immer sichtbar, eingerückt */
    .nav-menu .sub-menu {
        /* Desktop-Overrides */
        display:        block !important;
        position:       static !important;
        opacity:        1 !important;
        visibility:     visible !important;
        pointer-events: auto !important;
        transform:      none !important;

        /* Eigenes Styling */
        box-shadow:  none;
        border:      none;
        border-left: 2px solid var(--color-border);
        border-radius: 0;
        background:  transparent;
        padding:     0.125rem 0 0.5rem 0;
        margin:      0 0 0.25rem 1rem;
        min-width:   0;
    }

    /* Unsichtbare Hover-Brücke deaktivieren */
    .nav-menu .sub-menu::before { display: none; }

    .nav-menu .sub-menu li a {
        padding:     0.5rem 0.75rem;
        font-size:   0.9375rem;
        min-height:  44px;
        color:       var(--color-text-mid);
        white-space: normal;
    }

    /* CTA (letzter Top-Level-Punkt) */
    .nav-menu > li:last-child {
        margin:      1rem 0 0;
        padding:     0;
        border-left: none;
    }

    .nav-menu > li:last-child > a {
        background-color: var(--color-orange) !important;
        color:            var(--color-white)  !important;
        border-color:     var(--color-orange) !important;
        border:           none !important;
        justify-content:  center;
        font-weight:      600;
        border-radius:    var(--radius-sm);
        text-align:       center;
    }

    /* Translate-Widget am Ende des Drawers (kein position:fixed mehr) */
    .translate-widget { display: none; }

    .primary-navigation.open .translate-widget {
        display:        flex;
        justify-content: center;
        align-items:    center;
        margin-top:     1.5rem;
        padding-top:    1.5rem;
        border-top:     1px solid var(--color-border);
        flex-shrink:    0;
    }

    /* Globe-Icon im Drawer ausblenden (passt nicht ins Layout) */
    .primary-navigation.open .translate-widget::before { display: none; }

    .primary-navigation.open .translate-widget .goog-te-combo {
        width:       160px;
        font-size:   0.9375rem;
        padding:     0.6rem 0.75rem;
    }

    /* Hamburger → X */
    .nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* Admin-Bar: Drawer korrekt unterhalb von Header + Admin-Bar starten */
@media screen and (max-width: 1080px) {
    .admin-bar .primary-navigation {
        padding-top: calc(var(--header-height) + 32px + 1.5rem);
    }
}
@media screen and (max-width: 782px) {
    .admin-bar .primary-navigation {
        padding-top: calc(var(--header-height) + 46px + 1.5rem);
    }
}

/* --- 960px: Tablet portrait ------------------------------- */
@media (max-width: 960px) {

    /* Hero: stack vertically, text on top */
    .hero-section {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .hero-content {
        max-width: 100%;
        padding: 72px 1.5rem 56px;
        margin: 0;
        order: 1;
    }
    .hero-visual {
        order: 2;
        min-height: 280px;
    }
    .hero-image {
        max-width: 65%;
        max-height: 42vw;
    }

    /* Two-column content sections → single column */
    .industry-section .container,
    .role-section .container,
    .circle-section .container,
    .europe-section .container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* Role visual: wider, less tall */
    .role-visual {
        min-height: 180px;
    }

    /* Dialogue cards → 1 column */
    .dialogue-cards { grid-template-columns: 1fr; }

    /* Europe: map after text on mobile */
    .europe-section .container {
        direction: ltr;
    }
    .europe-map-container {
        min-height: 260px;
    }

    /* Sections: reduce vertical padding */
    .section      { padding: 72px 0; }
    .cta-section  { padding: 80px 0; }

    /* Footer: stack */
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 3.5rem 1.5rem 2rem;
    }
    .footer-nav-menu {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.5rem 1.5rem;
    }
    .footer-nav-menu li a {
        font-size: 0.875rem;
    }
}

/* --- 680px: Large phone ----------------------------------- */
@media (max-width: 680px) {

    /* Container: tighter side padding */
    .container { padding: 0 1.125rem; }

    /* Sections */
    .section      { padding: 56px 0; }
    .cta-section  { padding: 64px 0; }

    /* Reduce section gaps further */
    .industry-section .container,
    .role-section .container,
    .circle-section .container,
    .europe-section .container {
        gap: 2rem;
    }

    /* Hero */
    .hero-content     { padding: 64px 1.125rem 48px; }
    .hero-subheadline { font-size: 1.0625rem; }
    .hero-visual      { min-height: 240px; }
    .hero-fire-particles .fire-icon { font-size: 5rem; }
    .hero-visual-text { font-size: 0.65rem; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; }

    /* Typography scale down */
    h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); }
    h2 { font-size: clamp(1.4rem, 5.5vw, 2rem); }

    /* Grids → single column */
    .structure-grid { grid-template-columns: 1fr; }
    .insights-grid  { grid-template-columns: 1fr; }

    /* Insight card: horizontal on medium phones */
    .insight-card { flex-direction: column; }

    /* Page hero */
    .page-hero {
        padding: calc(var(--header-height) + 48px) 0 48px;
    }
    .page-content-section { padding: 48px 0; }

    /* Membership highlight box */
    .membership-highlight-box {
        padding: 2rem 1.5rem;
    }

    /* Contact form → single column */
    .contact-form { grid-template-columns: 1fr; }
    .contact-form-field.full-width { grid-column: 1; }
    .contact-form button[type=submit] { width: 100%; justify-content: center; }

    /* CTA buttons: stack */
    .cta-buttons { flex-direction: column; align-items: stretch; }
    .cta-buttons .btn { justify-content: center; }

    /* Dialogue cards: slight padding reduction */
    .dialogue-card { padding: 2rem 1.5rem; }

    /* Role platform list items */
    .role-platform-item { padding: 0.75rem; }

    /* Europe legend */
    .europe-legend { gap: 0.5rem; }

    /* Footer: compact */
    .footer-inner { padding: 3rem 1.125rem 1.75rem; }
    .footer-nav-menu { gap: 0.375rem 1.25rem; }

    /* Section intro text */
    .section-intro { font-size: 1rem; margin-bottom: 2rem; }

    /* Industry diagram */
    .industry-diagram { padding: 2rem 1rem; }
    .diagram-svg-wrap { max-width: 260px; }

    /* Circle visual: shorter on mobile */
    .circle-visual { aspect-ratio: 16/7; }
    .circle-visual-inner { padding: 2rem; }
    .circle-visual-headline { font-size: 1.25rem; }

    /* Page content inner */
    .page-content-inner h2 { font-size: 1.5rem; margin: 2rem 0 0.875rem; }
    .page-content-inner p  { font-size: 1rem; }

    /* Single post content */
    .single-post-content p { font-size: 1rem; }
    .single-post-header { padding: calc(var(--header-height) + 48px) 0 48px; }
}

/* --- 480px: Standard phone -------------------------------- */
@media (max-width: 480px) {

    :root { --header-height: 64px; }

    .container { padding: 0 1rem; }

    /* Header: weniger Padding damit Hamburger nicht aus dem Viewport ragt */
    .header-inner { padding: 0 1rem; }

    /* Hero: ultra-compact */
    .hero-content { padding: 56px 1rem 40px; }
    .hero-headline {
        font-size: clamp(1.6rem, 8vw, 2.25rem);
        letter-spacing: -0.02em;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    .hero-subheadline {
        word-break: break-word;
        overflow-wrap: break-word;
    }
    .hero-claim { font-size: 0.75rem; padding: 0.4rem 0.75rem; }

    /* Hero-Visual: höher damit Bild und Bodentext nicht überlappen */
    .hero-visual { min-height: 280px; }
    .hero-image  { max-width: 60%; max-height: 38vw; top: 42%; }

    /* Bodentext: mehr Abstand nach unten */
    .hero-visual-text {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        padding-bottom: 0.25rem;
    }

    /* Section padding */
    .section      { padding: 48px 0; }
    .cta-section  { padding: 56px 0; }
    .page-hero    { padding: calc(var(--header-height) + 40px) 0 40px; }

    /* Buttons: full width in most contexts */
    .hero-content .btn { width: 100%; justify-content: center; }

    /* Structure cards */
    .structure-card { padding: 1.5rem; }
    .structure-card-icon { width: 40px; height: 40px; margin-bottom: 1rem; }

    /* Contact form inputs: ≥16px to prevent iOS zoom */
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        font-size: 1rem;
    }

    /* Europe map container */
    .europe-map-container { min-height: 220px; padding: 1rem; }

    /* Footer bottom text */
    .footer-copyright { font-size: 0.75rem; }

    /* Membership box */
    .membership-highlight-box { padding: 1.75rem 1.25rem; }
    .membership-highlight-box h3 { font-size: 1.25rem; }

    /* Role visual: thin banner on very small phones */
    .role-visual { min-height: 160px; }
    .role-visual-quote { font-size: 1rem; }

    /* Dialogue card */
    .dialogue-card { padding: 1.75rem 1.25rem; }
    .dialogue-card-title { font-size: 1.1rem; }

    /* Page content */
    .page-content-section { padding: 40px 0; }
    .page-content-inner h2 { font-size: 1.35rem; }
    .content-highlight { padding: 1.25rem 1.25rem; font-size: 0.975rem; }

    /* Insights grid: always 1-col */
    .insights-grid { margin-top: 2rem; }

    /* CTA section */
    .cta-claim { margin: 1rem 0 2rem; }
}

/* --- 360px: Small phone (edge case) ----------------------- */
@media (max-width: 360px) {
    .hero-headline { font-size: 1.5rem; }
    .logo-biag     { font-size: 1.25rem; }
    .logo-tagline  { font-size: 0.7rem; }
    .btn           { padding: 0.8rem 1.5rem; font-size: 0.875rem; }
}

/* --- Touch / pointer: remove hover effects on touch ------- */
@media (hover: none) and (pointer: coarse) {
    .structure-card:hover,
    .dialogue-card:hover,
    .insight-card:hover {
        transform: none;
        box-shadow: none;
    }
    .btn-primary:hover { transform: none; box-shadow: none; }
    .dialogue-card:hover .dialogue-card-link { gap: 0.5rem; }
}

/* --- Accessibility: skip to main content ------------------ */
.skip-to-main {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    background-color: var(--color-orange);
    color: var(--color-white);
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    text-decoration: none;
    transition: top 0.15s ease;
}
.skip-to-main:focus {
    top: 0;
    outline: 3px solid var(--color-dark);
    outline-offset: 2px;
}

/* --- GDPR Cookie Notice ----------------------------------- */
.cookie-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background-color: var(--color-dark);
    border-top: 3px solid var(--color-orange);
    padding: 1.25rem 1rem;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.25);
}

.cookie-notice-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.cookie-notice-text {
    flex: 1;
    min-width: 220px;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
    margin: 0;
}

.cookie-notice-btn {
    flex-shrink: 0;
    background-color: var(--color-orange);
    color: var(--color-white);
    border: none;
    padding: 0.625rem 1.5rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-main);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition);
    min-height: 44px;
}

.cookie-notice-btn:hover {
    background-color: var(--color-orange-mid);
}

@media (max-width: 480px) {
    .cookie-notice-inner { gap: 1rem; }
    .cookie-notice-btn { width: 100%; }
}

/* --- Google Translate Widget ------------------------------ */

/* Google Translate Widget */
.translate-widget {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 0.25rem;
}

/* Globe icon via inline SVG background */
.translate-widget::before {
    content: '';
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    pointer-events: none;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.translate-widget .goog-te-gadget {
    font-size: 0 !important;
    line-height: 0;
}

.translate-widget .goog-te-gadget > span,
.translate-widget .goog-te-gadget a,
.translate-widget .goog-logo-link,
.translate-widget .goog-te-gadget img {
    display: none !important;
}

.translate-widget .goog-te-combo {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: var(--font-main);
    font-size: 0.775rem;
    font-weight: 500;
    color: var(--color-text);
    background: transparent;
    border: 1.5px solid var(--color-border);
    border-radius: 20px;
    padding: 0.3rem 0.6rem 0.3rem 1.85rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
    width: 145px;
    line-height: 1.4;
}

.translate-widget .goog-te-combo:hover,
.translate-widget .goog-te-combo:focus {
    border-color: var(--color-orange);
    background: rgba(232, 93, 4, 0.04);
}

/* Google's top translation bar */
.goog-te-banner-frame { font-family: var(--font-main) !important; }

/* Translate widget mobile styles are in the 1080px nav block above */

/* --- Members page ----------------------------------------- */
.members-section {
    padding: 64px 0 80px;
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

.member-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.member-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.member-card-logo-wrap {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-card-logo {
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.member-card-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark);
    margin: 0;
    line-height: 1.4;
}

.member-card-desc {
    font-size: 0.825rem;
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.5;
}

.members-empty-hint {
    background: var(--color-light);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: 2rem;
    color: var(--color-text-mid);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 560px;
}

@media (max-width: 768px) {
    .members-grid { grid-template-columns: repeat(2, 1fr); }
    .members-section { padding: 48px 0 64px; }
}

@media (max-width: 480px) {
    .members-grid { grid-template-columns: 1fr; }
}

/* --- Events Calendar embed / CTA fallback ----------------- */
.tribe-events-embed-section {
    padding: 0 0 80px;
}

.events-cta-section {
    background: var(--color-light);
    padding: 64px 0;
}

.events-cta-inner {
    max-width: 560px;
}

.events-cta-inner h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 1rem;
}

.events-cta-inner p {
    font-size: 1.05rem;
    color: var(--color-text-mid);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.events-cta-btn {
    display: inline-block;
    background: var(--color-orange);
    color: var(--color-white);
    font-weight: 600;
    font-size: 1rem;
    padding: 0.875rem 2rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.2s;
}

.events-cta-btn:hover {
    background: var(--color-orange-mid);
    color: var(--color-white);
}

/* --- Vorstand --------------------------------------------- */
.vorstand-section {
    padding: 80px 0;
}

.vorstand-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.vorstand-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

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

.vorstand-card-photo {
    aspect-ratio: 3/4;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-mid) 100%);
    position: relative;
}

.vorstand-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.vorstand-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.3);
}

.vorstand-card-placeholder svg {
    width: 60px;
    height: 60px;
}

.vorstand-card-body {
    padding: 1.5rem;
}

.vorstand-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 0.35rem;
}

.vorstand-card-rolle {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-orange);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
}

.vorstand-card-bio {
    font-size: 0.875rem;
    color: var(--color-text-mid);
    line-height: 1.6;
}

.gf-profile {
    max-width: 340px;
    margin: 0 auto;
}

@media (max-width: 960px) {
    .vorstand-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .vorstand-grid { grid-template-columns: 1fr; }
}

/* --- Theme-Toggle Mobile ---------------------------------- */
/* Kein order:-1 – der Button liegt im DOM nach der Nav, vor dem Hamburger */
/* Das ist die korrekte visuelle Reihenfolge: Logo | [auto] | 🌙 | ☰ */