/* Farben, Schriften, Zeilenhoehen, Masse und Bewegung stehen in
   assets/css/tokens.generated.css und werden aus design/tokens.json erzeugt.
   Hier steht nur, was dort keine Entsprechung hat. */
:root {
    /* Spacing/Padding (clamp, nicht in WP presets) */
    --default-btn-padding:   clamp(4px, 2vw, 8px) clamp(8px, 2vw, 16px);
    --default-padding:       clamp(0.5rem, 2vw, 1rem) clamp(1rem, 2vw, 2rem);
    --default-padding-equal: clamp(1rem, 2vw, 2rem);
    --default-gap-great:     clamp(1rem, 2vw, 2.5rem);
    --default-gap-medium:    clamp(0.5rem, 2vw, 1.25rem);
    --default-gap-small:     clamp(0.25rem, 2vw, 0.5rem);

    /* Markenfarbe von wahlen-organisieren.de, Weiss darauf 6,3:1. Bewusst
       kein Token dieses Hauses: sie gehoert zur anderen Website und erscheint
       nur an Verweisen dorthin (Mega-Menue, Querverweis). */
    --epi-marke-wahlen: #bf0930;
}

/* ===== Skip-Link (WCAG 2.4.1) ===== */
/* Ziel: <main id="skip-to-content"> oder erstes <main> im Template */

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 99999;
    background: var(--color-text);
    color: var(--color-base);
    padding: 10px 20px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 0 0 5px 0;
}

.skip-link:focus {
    top: 0;
}

/* ===== Visuell versteckt, aber für Screen Reader sichtbar ===== */
/* Nützlich wenn kein sichtbarer Text vorhanden sein soll (z.B. Icon-only) */

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

/* Kein Umbruch im Wort, z. B. „M-Files“ nicht nach dem Bindestrich
   (gesetzt von inc/markennamen.php). */
.epi-nowrap {
    white-space: nowrap;
}

/* ===== Basis-Resets ===== */

/* Hoehe der klebenden Kopfzeile: 80 px (Logo-Box 56 + 2 x 12 Innenabstand).
   Figma 103:3 gab 96 px vor, das Designer-Review vom 29.10.2026 72 bis 80 px,
   damit der Hero hoeher im ersten Bildschirm steht. Wert in tokens.json
   layout.header. JS (megamenu.js, jumpnav.js, search.js) misst die echte
   Hoehe, die Variable traegt Body-Abstand und Fallbacks. */
:root {
    --header-height: 80px;
}

/* 16 px Wurzel. Die Tokens aus tokens.json rechnen in rem gegen 16: bei 18 px
   waeren H1 67,5 statt 60 px und die Schaltflaeche 20,25 statt 18 px. Die
   Altseiten laufen dadurch 11 % kleiner und werden nachgezogen (T-10). */
html {
    font-size: 100%;
}
div {
    box-sizing: border-box;
}

/* ===== Buttons ===== */

/* Button primary */

button, a.button, .p_button > a, .wp-block-button__link {
    background-color: var(--color-primary);
    color: var(--color-text);          /* 5,67:1 — Weiss auf Orange waere 2,23:1 */
    padding: var(--default-btn-padding);
    min-height: var(--touch-min);
    box-sizing: border-box; /* .wp-block-button__link bekommt das schon vom WP-Core-Reset,
        eigene <a class="button">/<button> ohne dieses Reset sonst content-box (Browser-
        Default): min-height zaehlt dann Border+Padding NICHT mit und legt oben drauf. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-primary);
    border-radius: var(--standard-border-radius);
    cursor: pointer;
    transition: background-color var(--motion-state-duration) var(--motion-state-easing),
                border-color var(--motion-state-duration) var(--motion-state-easing);
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: var(--line-height-ui);
    font-size: 1.125rem;
    width: fit-content;
}

/* Hover und Aktiv wechseln deutlich auf Tuerkis mit weissem Text, wie der
   sekundaere Button (Linus 26.10.2026). Weiss auf Orange waere 2,23:1. */
button:hover, a.button:hover, .p_button > a:hover, .wp-block-button__link:hover,
button:active, a.button:active, .p_button > a:active, .wp-block-button__link:active {
    background-color: var(--color-accent-dark-wcag);
    border-color: var(--color-accent-dark-wcag);
    color: var(--color-base);                    /* 6,80:1 auf #00656E */
}

button:active, a.button:active, .p_button > a:active {
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.25);
}

button:disabled, button[aria-disabled="true"] {
    background-color: var(--color-secondary-20);
    border-color: var(--color-secondary-20);
    color: var(--color-secondary);
    cursor: not-allowed;
    box-shadow: none;
}

/* Button secondary */

button.secondary, a.button.secondary, .p_button.secondary > a,
.is-style-outline .wp-block-button__link {
    background-color: var(--color-base);
    border: 1px solid var(--color-accent-dark-wcag);
    color: var(--color-accent-dark-wcag);  /* 6,80:1 — Orange waere 2,23:1 */
    transition: background-color var(--motion-state-duration) var(--motion-state-easing),
                border-color var(--motion-state-duration) var(--motion-state-easing),
                color var(--motion-state-duration) var(--motion-state-easing);
}

button.secondary:hover, a.button.secondary:hover, .p_button.secondary > a:hover,
button.secondary:active, a.button.secondary:active, .p_button.secondary > a:active,
.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:active {
    background-color: var(--color-accent-dark-wcag);
    border-color: var(--color-accent-dark-wcag);
    color: var(--color-base);                    /* 6,80:1 auf #00656E */
}


/* Text */

/* Schrift, Groesse, Zeilenhoehe und Farbe der Ueberschriften stehen in
   theme.json (styles.elements, erzeugt aus tokens.json typography.scale).
   Hier nur, was theme.json nicht ausdrueckt. Reset ohne Spezifitaet wie bei
   p: sonst schlug er den Abstand vor Zwischenueberschriften (* + h3). */
:where(h1, h2, h3, h4, h5, h6) {
    margin: 0;
}

h1, h2 {
    text-wrap: balance;
}


body {
    color: var(--color-text);
    font-family: var(--font-primary);
    line-height: var(--line-height-body);
}

p {
    font-family: var(--font-primary);
    line-height: var(--line-height-body);
    text-wrap: pretty;
}

/* Reset ohne Spezifitaet: global.css laedt nach sections.css, ein "p" hier
   schlug sonst den Abstand nach Ueberschriften (:is(h2..h6) + *). */
:where(p) {
    margin: 0;
}

a {
    color: var(--color-accent-dark-wcag);
    text-decoration: none;
    font-family: var(--font-primary);
}

/* Links im Fliesstext sind unterstrichen, Farbe allein traegt keine
   Bedeutung (design/regeln/komponenten.md, WCAG 1.4.1). Nur Links ohne
   eigene Klasse, so legt der Editor Inline-Links an; Bausteine mit eigener
   Linkgestaltung schlagen die Regel, sie hat nur Elementgewicht. Alte
   Button-Absaetze (.p_button) bleiben aussen vor. */
:where(.wp-block-paragraph:not(.p_button), .wp-block-list li) > a:where(:not([class])) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

:where(.wp-block-paragraph:not(.p_button), .wp-block-list li) > a:where(:not([class])):hover {
    color: var(--color-text);
}

/* Der Fokusring steht in tokens.generated.css, weil sein Wert aus
   tokens.components.focus kommt (Bauauftrag N4). Nicht hier duplizieren. */

/* Browser-Default-Outline nur für Maus-Nutzer unterdrücken */
*:focus:not(:focus-visible) {
    outline: none;
}

/* @media for Text & Buttons*/

@media screen and (max-width: 768px) {
    button, a.button, .p_button > a, .wp-block-button__link {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        display: block;
    }

}


/* ---------- Header ---------- */


.header_section {
    /* Blur-Effekt via ::before, damit Kinder-Elemente (mega_panel_content) ihre
       eigenen backdrop-filter gegen echten Seiteninhalt rendern können.
       backdrop-filter direkt auf .header_section würde eine Compositing-Gruppe
       aufspannen, die Kinder-Blurs auf die bereits gerenderte Header-Fläche
       beschränkt (kein sichtbarer Blur-Effekt auf das Panel). */
    background-color: transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 12px 50px;
    min-height: var(--header-height);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;                  /* Mindestabstand Logo / Navigation / Buttons */
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: padding-block 0.2s ease, min-height 0.2s ease;
}

/* Ab 50 px Scroll (megamenu.js) nimmt die Kopfzeile weniger Platz ein, damit
   sie zusammen mit der Sprungnavigation nicht dauerhaft einen Viertel des
   Bildschirms belegt. Nur Innenabstand und Logo schrumpfen, keine
   Schriftgroessen: die Klickziele bleiben gleich gross. */
html.is-scrolled .header_section {
    padding-block: 8px;
    min-height: 0;
}

html.is-scrolled .header_logo {
    width: 207px;
    height: 42px;
}

html.is-scrolled .header_logo_img {
    transform: scale(0.75) translateY(-36.3%); /* 42px/56px Zielhoehe */
}

.header_section::before {
    /* Glassmorphism-Hintergrund des Headers als Pseudo-Element,
       damit .header_section selbst keine Compositing-Gruppe bildet. */
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: -1;
    pointer-events: none;
}

body.admin-bar .header_section {
    top: 32px; /* Höhe der Admin-Bar */
}

.header_logo {
    /* Bemessungsbox fuer den sichtbaren Logo-Kern (Kringel + Schriftzug).
       Wird wie ein Nav-Item ganz normal per align-items: center vertikal
       zentriert. Das eigentliche <img> ist groesser als diese Box und
       bleedet nach oben aus ihr heraus (siehe .header_logo_img). */
    position: relative;
    width: 277px;
    height: 56px;
    flex-shrink: 0;             /* Inhalt ist absolut: ohne das schrumpft die Box auf 0 und die Navigation rutscht unters Logo */
    /* Kein transition auf Breite/Hoehe (Layout-Thrash): die Box springt beim
       Scroll-Schwellenwert, das sichtbare <img> animiert stattdessen per
       transform (Compositor, siehe .header_logo_img). */
}

.Header_buttons {
    display: flex;
    flex-direction: row;
    gap: 50px;
    align-items: center;
}

.header_logo_img {
    /* Das Original-Artwork (2067x688) traegt oben ein reines Anschnitt-Band
       ohne Kringel/Schriftzug (Bildkern beginnt erst bei ~36% der Bildhoehe).
       translateY(-36.3%) schiebt genau diesen Kern an die Boxoberkante von
       .header_logo, sodass er zusammen mit den Nav-Items zentriert wirkt,
       waehrend das Band frei nach oben aus dem Rahmen laeuft. */
    position: absolute;
    top: 0;
    left: 0;
    height: 92px;
    width: auto;
    transform-origin: top left;
    transform: scale(1) translateY(-36.3%);
    transition: transform 0.2s ease;
}

.search_btn {
    background-color: transparent;
    border: none;
    color: var(--color-accent-dark-wcag);   /* Bedienelement, WCAG 1.4.11: 3:1 */
    font-size: 1.25rem;
    font-weight: 900;
    padding: 0;
}

.search_btn:hover {
    padding: 0;
    background-color: transparent;
    border: none;
    color: var(--color-accent-dark-wcag);
}

.header_nav, nav.header_nav {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.nav_link, button.nav_link.dropdown {
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 600;
    line-height: var(--line-height-ui);
    background-color: transparent;
    border-radius: 0;
    border: none;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    position: relative; /* Make sure the parent element is positioned */
    padding: 12px var(--nav-link-pad-x, 24px);
    white-space: nowrap;        /* „Über uns“ bricht sonst bei 1280 px um */
}

/* Sechs Hauptpunkte plus Suche und Kontakt: unter 1440 px enger setzen */
@media screen and (max-width: 1439px) {
    .header_nav {
        --nav-link-pad-x: 16px;
    }
}

/* Bis zum Mobil-Menü (unter 1100 px) passt die Kopfzeile nur kompakt:
   Logo in Scroll-Groesse, engere Abstaende. */
@media screen and (max-width: 1279px) {
    .header_section {
        padding-inline: 32px;
    }

    .header_section .header_logo {
        width: 207px;
        height: 42px;
    }

    .header_section .header_logo_img {
        transform: scale(0.75) translateY(-36.3%);
    }

    .header_nav {
        --nav-link-pad-x: 12px;
    }

    .Header_buttons {
        gap: 32px;
    }
}

.nav_link:hover, button.nav_link.dropdown:hover {
    color: var(--color-text);
    text-decoration: none;
    background-color: transparent;
    border-color: transparent;
}

/* Ein einziger Indikator für Hover, offenes Panel und aktive Seite: ein
   2-px-Strich genau unter dem Wort (ohne Pfeil), der von links einläuft.
   Nicht-farbiger Hinweis nach WCAG 1.4.1; die Farbe allein trägt nichts.
   ::before, weil ::after am Dropdown den Pfeil trägt. */
.nav_link::before {
    content: '';
    position: absolute;
    left: var(--nav-link-pad-x, 24px);
    right: var(--nav-link-pad-x, 24px);
    bottom: 6px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--color-accent-dark-wcag);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

button.nav_link.dropdown::before {
    right: calc(var(--nav-link-pad-x, 24px) + 18px);   /* Pfeil samt Abstand aussparen */
}

.nav_link:hover::before,
.nav_link.active::before,
button.nav_link.dropdown[aria-expanded="true"]::before {
    transform: scaleX(1);
}

.nav_link.active, button.nav_link.dropdown.active {
    color: var(--color-accent-dark-wcag);
}

.dropdown::after {
    content: '\f078';           /* Chevron, dreht sich beim Öffnen */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.625rem;
    display: inline-block;
    width: 10px;
    margin-left: 8px;
    transition: transform 220ms ease;
}

.dropdown[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .nav_link::before,
    .dropdown::after {
        transition: none;
    }
}

.mega_panel {
    /* position: fixed bricht das Panel aus dem Compositing-Layer des
       Headers heraus → .mega_panel_content kann jetzt seinen eigenen
       backdrop-filter gegen echten Seiteninhalt rendern.
       top wird per JS auf headerSection.getBoundingClientRect().bottom gesetzt
       (viewport-relative, admin-bar- und scroll-shrink-sicher). */
    display: block;
    box-sizing: border-box;
    width: 100%;
    position: fixed;
    top: 0; /* Fallback; JS überschreibt diesen Wert */
    left: 0;
    z-index: 999;
    /* Animations-Ausgangszustand */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}

/* Visueller Container: Glasoptik identisch zum Header (.header_section::before).
   Alle Panels gleich breit, damit das Umschalten zwischen Lösungen und
   Produkten nicht springt. Kein oranger Randstrich: das eine Orange des
   Panels ist der Button in der Rasterkarte (DESIGN.md 2.4). */
.mega_panel_content {
    max-width: 1120px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari */
    box-shadow: var(--standard-box-shadow);
    border-top: 1px solid var(--color-secondary-20);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 12px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: stretch;
}

/* ── Spalten-Panel (Lösungen): Anwendungsfälle | Branchen | Karte ── */

/* Die Zusatzzeile (Wahlen) sitzt immer unten, bündig mit der Karte, auch
   wenn die Einträge darüber weniger Höhe brauchen (Produkte). */
.mega_panel_main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 20px 12px;
}

.mega_columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 32px;
}

.mega_column_title {
    font-family: var(--font-secondary); /* Lora — Kontrast zu den Einträgen */
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text);
    margin: 0 0 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-secondary-20);
}

.mega_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Zusatzzeile unter den Spalten, z. B. der externe Absprung Wahlen */
.mega_list--extra {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--color-secondary-20);
}

/* Eintrag: Titel mit Pfeil, darunter die Themenzeile. Hover: leichte
   türkise Tönung (Türkis = Orientierung), Titel färbt sich, Pfeil läuft
   herein. Kein Unterstrich, keine Hintergrundfarbe aus der Palette. */
.mega_link {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 44px;           /* Klickziel, DESIGN.md §9 */
    box-sizing: border-box;
    padding: 9px 12px;
    margin-inline: -12px;       /* Text bündig mit der Spaltenüberschrift */
    border-radius: var(--standard-border-radius);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color 160ms ease;
}

.mega_link:hover,
.mega_link:focus-visible,
.mega_link.active {
    color: var(--color-text);
    background-color: rgb(0 101 110 / 0.06);
}

.mega_link_title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    transition: color 160ms ease;
}

.mega_link:hover .mega_link_title,
.mega_link:focus-visible .mega_link_title,
.mega_link.active .mega_link_title {
    color: var(--color-accent-dark-wcag);
}

.mega_link_arrow,
.mega_link_external {
    display: inline-block;
    margin-left: 6px;
    color: var(--color-accent-dark-wcag);
    font-weight: 600;
}

.mega_link_arrow {
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 160ms ease, transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mega_link:hover .mega_link_arrow,
.mega_link:focus-visible .mega_link_arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Themenzeile: Kontrast über Größe und Gewicht, nicht über ein helles Grau
   (#6F6E68 erreicht nur 5,11:1, der Header zielt auf AAA). */
.mega_link_desc {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    /* Einzeilig über die Länge: das Seitenfeld ist auf 46 Zeichen begrenzt
       (menu-summary.php), das passt in die Spaltenbreite. */
}

/* Einträge ohne Spaltenüberschrift (Produkte): zwei Spalten wie bei Lösungen,
   aber mit mehr Luft, weil die Logos die Überschriften ersetzen */
.mega_list--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 32px;
}

.mega_list--grid .mega_link {
    gap: 8px;
    padding-block: 22px;
}

/* Produktlogo an Stelle des Titeltexts: feste Zeilenhöhe, damit Wortmarken
   unterschiedlicher Proportion (3:1 bis 6:1) auf einer Linie stehen; Breite
   nach Bedarf, ein quadratischer Rahmen machte sie unleserlich. */
.mega_link_title--logo {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 30px;
}

.mega_link_logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 150px;
    max-height: 26px;
}

/* Zusatz zum Logo, wenn sich zwei Produkte ein Logo teilen (DMS / QMS) */
.mega_link_suffix {
    padding: 1px 6px;
    border: 1.5px solid currentColor;
    border-radius: var(--standard-border-radius);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.03em;
}

/* ── Einlauf: Einträge kommen beim Öffnen leicht versetzt ── */

@keyframes mega-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.mega_panel.is-open .mega_list > li {
    animation: mega-rise 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 16ms + 40ms);
}

@media (prefers-reduced-motion: reduce) {
    .mega_link,
    .mega_link_title,
    .mega_link_arrow {
        transition: none;
    }

    .mega_link_arrow {
        transform: none;
    }

    .mega_panel.is-open .mega_list > li {
        animation: none;
    }
}

/* ── Rasterkarte: CD-Grau mit Kästchenraster (Ton = Weiß) ──
   Trägt eine Aussage mit Angebot, also genau den Fall, für den das Raster
   gedacht ist (DESIGN.md 1.1, wie der Schluss-CTA). Harte Kante, weil die
   Karte eine sichtbare Fläche ist. Im Lösungen-Panel zugleich Bühne für die
   Themen des überfahrenen Eintrags (megamenu.js).
   Fläche grau-100 statt dunkel: leichter neben dem Glas des Panels.
   Weiß darauf 5,11:1 (AA); die kleinste Schrift der Karte ist 0.8125rem
   in 600, dafür reicht AA. */

.mega_card {
    position: relative;         /* Bezug für die Markenebene */
    overflow: hidden;
    flex: 0 0 340px;
    /* Die Karte bestimmt die Panelhöhe nicht mit: die richtet sich nach den
       Einträgen links, mindestens nach dem Platz für die Markenebene. So
       springt das Panel nicht, wenn eine Vorschau länger ist. */
    contain: size;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    box-sizing: border-box;
    padding: 28px;
    border-radius: var(--standard-border-radius);
    background-color: var(--color-secondary);
    background-image:
        repeating-linear-gradient(to right, rgb(255 255 255 / 0.08) 0 1px, transparent 1px var(--grid-mesh)),
        repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.08) 0 1px, transparent 1px var(--grid-mesh));
    color: var(--color-base);
}

/* Aussage und Vorschau liegen übereinander und blenden gegeneinander */
.mega_card_stage {
    display: grid;
}

.mega_card_stage > * {
    grid-area: 1 / 1;
    transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0s;
}

.mega_card_statement {
    margin: 0;
    font-family: var(--font-secondary);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-base);
}

/* Halbsatz: kursiv trägt die Aussage. Türkis erreicht auf dem Grau nicht
   genug Kontrast, deshalb bleibt die Schrift weiß und nur der Schnitt wechselt. */
.mega_card_statement em {
    font-style: italic;
}

.mega_card_preview {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
}

/* visibility statt nur opacity: sonst läge die unsichtbare Aussage über
   der Vorschau und finge deren Klicks ab */
.mega_card.is-previewing .mega_card_statement {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
}

.mega_card.is-previewing .mega_card_preview {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Während der Vorschau ist der Leitsatz die Handlung; der Button tritt
   zurück und gibt der Vorschau seinen Platz */
.mega_card_cta {
    transition: opacity 180ms ease, visibility 0s linear 0s;
}

.mega_card.is-previewing .mega_card_cta {
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease, visibility 0s linear 120ms;
}

/* Nutzen der Zielseite in einem Satz, als Link zur Seite */
.mega_card_lead {
    display: block;
    font-family: var(--font-secondary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-base);
    text-decoration: none;
}

/* Hover ohne Unterstrich (im Menü nirgends): der Pfeil rückt vor. Er ist
   ein eigenes Element hinter einem geschützten Leerzeichen (megamenu.js),
   damit er am letzten Wort bleibt und per transform animiert werden kann. */
.mega_card_lead_arrow {
    display: inline-block;
    font-family: var(--font-primary);
    transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mega_card_lead:hover,
.mega_card_lead:focus-visible {
    color: var(--color-base);
}

.mega_card_lead:hover .mega_card_lead_arrow,
.mega_card_lead:focus-visible .mega_card_lead_arrow {
    transform: translateX(5px);
}

/* Querverbindung: „Umgesetzt mit“ (Produktlogos) bzw. „Im Einsatz für“
   (Lösungen als Text) */
.mega_card_links {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid rgb(255 255 255 / 0.2);
}

.mega_card_links[hidden] {
    display: none;
}

.mega_card_label {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-base);
}

.mega_card_chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Umrandete Fläche auf der dunklen Karte, beim Hover weiß gefüllt. Logos
   stehen weiß und nehmen auf der hellen Fläche ihre Originalfarbe an. */
.mega_card_chip {
    display: flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
    padding: 6px 12px;
    border: 1px solid rgb(255 255 255 / 0.25);
    border-radius: var(--standard-border-radius);
    color: var(--color-base);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.mega_card_chip img {
    display: block;
    width: auto;
    height: auto;
    max-width: 120px;
    max-height: 22px;
    filter: brightness(0) invert(1);
    transition: filter 160ms ease;
}

.mega_card_chip:hover,
.mega_card_chip:focus-visible {
    background-color: var(--color-base);
    border-color: var(--color-base);
    color: var(--color-text);
}

.mega_card_chip:hover img,
.mega_card_chip:focus-visible img {
    filter: none;
}

/* Verweise ohne Logo (Lösungen unter einem Produkt): Linkliste statt
   Flächen, damit drei Einträge nicht drei Kastenreihen stapeln */
.mega_card_chips--list {
    flex-direction: column;
    gap: 0;
}

.mega_card_chips--list .mega_card_chip {
    justify-content: space-between;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.15);
    border-radius: 0;
}

.mega_card_chips--list .mega_card_chip:last-child {
    border-bottom: 0;
}

.mega_card_chips--list .mega_card_chip::after {
    content: '→';
    transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mega_card_chips--list .mega_card_chip:hover,
.mega_card_chips--list .mega_card_chip:focus-visible {
    background-color: transparent;
    border-color: rgb(255 255 255 / 0.4);
    color: var(--color-base);
}

.mega_card_chips--list .mega_card_chip:hover::after,
.mega_card_chips--list .mega_card_chip:focus-visible::after {
    transform: translateX(3px);
}

/* ── Markenebene: die Karte verwandelt sich in den Auftritt der
   Schwester-Website (Wahlen: wahlen-organisieren.de) ──
   Die Markenfarbe ist bewusst kein Token dieses Hauses, sondern bleibt an
   der Ebene: sie gehört zur anderen Website und erscheint nur hier.
   Ablauf: die Farbe breitet sich kreisförmig von unten links aus, wo der
   Eintrag sitzt; dann federn drei Stimmkarten herein (das Bildmotiv der
   Website) und wiegen sich leicht; die Zahl zählt hoch (megamenu.js). */

.mega_card_brand--wahlen {
    --brand: var(--epi-marke-wahlen);
}

.mega_card_brand {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    padding: 28px;
    background-color: var(--brand);
    color: var(--color-base);
    clip-path: circle(0% at 0% 100%);
    visibility: hidden;
    transition: clip-path 420ms cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 420ms;
}

.mega_card_brand.is-active {
    clip-path: circle(150% at 0% 100%);
    visibility: visible;
    transition: clip-path 620ms cubic-bezier(0.65, 0, 0.35, 1), visibility 0s;
}

.mega_card_brand > :not(.mega_ballot) {
    position: relative;
    z-index: 1;
    margin: 0;
}

.mega_brand_source {
    font-size: 0.8125rem;
    font-weight: 600;
}

.mega_brand_claim {
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.mega_brand_figure {
    margin-top: auto !important;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 8px;
}

.mega_brand_number {
    font-family: var(--font-secondary);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.mega_brand_unit {
    font-size: 1.125rem;
    font-weight: 700;
}

.mega_brand_of {
    grid-column: 1 / -1;
    margin-top: 4px;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Pillenform wie die Buttons der Wahlen-Website */
.mega_brand_cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    box-sizing: border-box;
    margin-top: 8px !important;
    padding: 10px 20px;
    border-radius: 32px;
    background-color: var(--color-base);
    color: var(--brand);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms ease;
}

.mega_brand_cta:hover,
.mega_brand_cta:focus-visible {
    color: var(--brand);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.2);
}

/* Stimmkarten: Einflug per translate, Wiegen per rotate, damit sich beide
   Bewegungen nicht gegenseitig überschreiben */
.mega_ballot {
    position: absolute;
    border-radius: 6px;
    background-color: rgb(255 255 255 / 0.16);
    transform-origin: 50% 100%;
    translate: 0 240px;
    rotate: var(--tilt);
    transition: translate 700ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--delay);
}

.mega_ballot--1 { --tilt: -14deg; --delay: 180ms; width: 76px; height: 102px; right: 30px;  bottom: 150px; }
.mega_ballot--2 { --tilt: 9deg;   --delay: 260ms; width: 58px; height: 78px;  right: 108px; bottom: 118px; background-color: rgb(255 255 255 / 0.1); }
.mega_ballot--3 { --tilt: 22deg;  --delay: 340ms; width: 46px; height: 62px;  right: -8px;  bottom: 250px; background-color: rgb(255 255 255 / 0.22); }

.mega_card_brand.is-active .mega_ballot {
    translate: 0 0;
    animation: ballot-wave 2.4s ease-in-out calc(var(--delay) + 700ms) infinite alternate;
}

@keyframes ballot-wave {
    from { rotate: var(--tilt); }
    to   { rotate: calc(var(--tilt) + 6deg); }
}

/* Wahlen-Eintrag kündigt die Verwandlung schon in seiner Farbe an */
.mega_link[data-brand="wahlen"]:hover,
.mega_link[data-brand="wahlen"]:focus-visible {
    background-color: color-mix(in srgb, var(--epi-marke-wahlen) 6%, transparent);
}

.mega_link[data-brand="wahlen"]:hover .mega_link_title,
.mega_link[data-brand="wahlen"]:focus-visible .mega_link_title,
.mega_link[data-brand="wahlen"]:hover .mega_link_external,
.mega_link[data-brand="wahlen"]:focus-visible .mega_link_external {
    color: var(--epi-marke-wahlen);
}

/* Das eine Orange des Panels */
.mega_card_cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 18px;
    border-radius: var(--standard-border-radius);
    background-color: var(--color-primary);
    color: var(--color-text);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 160ms ease;
}

.mega_card_cta:hover {
    background-color: var(--color-accent-dark-wcag);
    color: var(--color-base);
}

.mega_card_cta_arrow {
    display: inline-block;
    transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mega_card_cta:hover .mega_card_cta_arrow {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .mega_card_stage > *,
    .mega_card_cta,
    .mega_card_cta_arrow,
    .mega_card_lead,
    .mega_card_lead_arrow,
    .mega_card_chip,
    .mega_card_chip::after,
    .mega_card_chip img,
    .mega_card_brand,
    .mega_card_brand.is-active,
    .mega_brand_cta,
    .mega_ballot {
        transition: none;
    }

    .mega_card_brand.is-active .mega_ballot {
        animation: none;
    }
}

.nav_item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: fit-content;
}

.header_section_mobile {
    display: none;
}

.mobile_nav_overlay {
    display: none;
}

/* @media for Header (Umschaltpunkt wie in mobile-menu.js) */

@media screen and (max-width: 1099px) {
    .header_section {
        display: none;
    }

    .header_section_mobile {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 24px;
        background-color: rgba(255, 255, 255, 0.8); /* Leicht transparenter Hintergrund */
        backdrop-filter: blur(10px); /* Blur-Effekt */
        width: 100%; /* Stellt sicher, dass die Header-Sektion die gesamte Breite einnimmt */
        top: 0; /* Positioniert die Header-Sektion oben */
        z-index: 1000; /* Stellt sicher, dass die Header-Sektion über anderen Inhalten liegt */
    }

    .header_logo {
        width: 237px;
        height: 48px;
    }

    .header_logo_img {
        height: 79px;
    }

    button.m-menu-btn {
        background-color: transparent;
        border: none;
        color: var(--color-accent-dark-wcag);   /* Bedienelement, WCAG 1.4.11: 3:1 */
        font-size: 1.25rem;
        font-weight: 900;
        padding: 0;
        width: fit-content;
    }

    .mobile_nav_overlay {
        display: none;
        flex-direction: column;
        gap: 50px;
        width: 100%;
        height: calc(100% - 96px);
        position: fixed;
        top: 96px; /* Höhe der Header-Sektion */
        left: 0;
        background-color: var(--color-base);
        z-index: 9999;
    }

    /* admin bar Berücksichtigen */
    body.admin-bar .mobile_nav_overlay {
        top: 142px; /* Höhe der Admin-Bar */
        height: calc(100% - 142px); /* Höhe des Overlays anpassen */
    }

    .m_header_nav {
        display: flex;
        flex-direction: column;
        gap: 50px;
        width: 100%;
        padding: 24px;
        box-sizing: border-box;
        overflow-y: scroll;
    }

    .m_nav_link {
        color: var(--color-text);
        font-size: 1rem;
        font-weight: 600;
        background-color: transparent;
        border-radius: 0;
        border: none;
        text-transform: none;
        display: inline-flex;
        align-items: center;
        position: relative;
        padding: 0px;
        width: 100%;
        gap: 24px;
        /* button-Elemente (m_dropdown) erben globale button-Hover-Stile.
           Hier explizit zurücksetzen, damit kein accent-Hintergrund erscheint. */
        cursor: pointer;
        font-family: var(--font-primary);
        box-sizing: border-box;
    }

    .m_nav_link:hover {
        background-color: transparent;
        border-color: transparent;
        color: var(--color-text);
    }

    .m_chevron {
        margin-left: auto;
        transition: transform 220ms ease;
    }

    .m_dropdown[aria-expanded="true"] .m_chevron {
        transform: rotate(180deg);
    }

    .m_subnav_depth_1 {
        display: none;
        flex-direction: column;
        gap: 24px;
        margin-top: 16px;
        box-sizing: border-box;
        width: 100%;
        height: fit-content;
    }

    /* Gruppe = Spalte des Desktop-Panels (Anwendungsfälle, Branchen).
       Einspaltig, ohne Themenzeilen: im Akkordeon zählt die Länge. */
    .m_group_title {
        font-family: var(--font-secondary);
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.25;
        color: var(--color-text);
        margin: 0 0 4px;
    }

    .m_list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .m_link {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 44px;           /* Klickziel, DESIGN.md §9 */
        box-sizing: border-box;
        padding: 6px 0;
        border-bottom: 1px solid var(--color-secondary-20);
        color: var(--color-text);
        font-size: 0.9375rem;
        font-weight: 600;
        text-decoration: none;
    }

    .m_link:hover {
        color: var(--color-accent-dark-wcag);
    }

    .m_link.active {
        color: var(--color-accent-dark-wcag);
    }

    .m_link_external {
        color: var(--color-accent-dark-wcag);
    }


}

/* ---------- Search ---------- */

.search_overlay {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background-color: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1;
    padding: 100px 100px 0px 100px;
}

.search-placeholder {
    width: 75%;
    height: 100%;
    object-fit: contain;
    object-position: 0 0;
}

.search-placeholder.noresults {
    width: 25%;
    height: 100%;
}

.search_wrapper {
    display: flex;
    flex-direction: column;
    width: 1200px;
    height: 100%;
}

.search_results_wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 0px 12px 48px 0px;
    margin-top: 50px;
    border-radius: var(--standard-border-radius);
}

.search-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-secondary-20);
}

.search-list-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 12px;
    border-bottom: 1px solid var(--color-secondary-20);
    text-decoration: none;
    color: var(--color-text);
    border-radius: var(--standard-border-radius);
    transition: background-color 0.2s;
}

.search-list-item:hover {
    background-color: var(--color-primary-50);
}

/* Excerpt auf Hover: secondary (#6F6E68) auf primary-50 (#F5D998) = 3.1:1 (fail) → text */
.search-list-item:hover p {
    color: var(--color-text);
}

.search-list-item h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
}

.search-list-item p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-type-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 100px;
    line-height: 1.6;
    width: fit-content;
}

.search-type-badge--loesungen {
    background-color: var(--color-primary-50);
    color: var(--color-accent-dark-wcag);
}

.search-type-badge--referenz {
    background-color: var(--color-accent-50);
    color: var(--color-text);   /* 7,57:1 — Tuerkis auf Tuerkis-50 waere 2,44:1 */
}

.search-type-badge--blog {
    background-color: var(--color-secondary-20);
    color: var(--color-secondary);
}

/* Für WebKit-Browser (Chrome, Safari, Edge) */
.search_results_wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px; /* Für horizontale Scrollbars */
}

.search_results_wrapper::-webkit-scrollbar-track {
  background: transparent; /* Hintergrundfarbe */
  border-radius: 4px;
}

.search_results_wrapper::-webkit-scrollbar-thumb {
  background: var(--color-primary-50); /* Ziehbare Fläche */
  border-radius: 4px;
  border: 2px solid var(--color-primary-light);
}

.search_results_wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary); /* Farbe bei Hover */
}

/* Für Firefox */
.search_results_wrapper {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary-50) var(--color-primary-light);
}

form.search-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.search_form_inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

body.admin-bar .search_overlay {
    top: calc(var(--header-height) + 32px); /* Höhe der Admin-Bar */
    height: calc(100% - var(--header-height) - 32px); /* Höhe des Overlays anpassen */
}

.search_overlay.active {
    display: flex;
    width: 100%;
}

.main_search_input {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    gap: 100px;
}

.main_search_buttons {
    display: flex;
    flex-direction: row;
    gap: 50px;
    align-items: center;
    justify-content: flex-end;
}

.delete_search {
    border-radius: 100%;
    background-color: var(--color-primary-light);
    width: 2rem;
    height: 2rem;
}

.delete_search:hover {
    background-color: var(--color-accent-50);
}

.close_search {
    border-radius: 100%;
    background-color: var(--color-primary);
    color: var(--color-text);   /* auf Orange: 5,67:1 */
    width: 2rem;
    height: 2rem;
}

.close_search:hover {
    background-color: var(--color-accent-dark-wcag);
    color: var(--color-base);               /* auf #00656E: 6,80:1 */
}

.search-input-label {
    display: flex;
    flex-direction: row;
    padding: 16px 32px;
    background-color: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--color-secondary-20);
    border-radius: 100px;
    width: 100%;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}


input.search-input[type="text"] {
    font-size: 3rem;
    width: 100%;
    height: fit-content;
    border: none;
    background-color: transparent;
    padding: 0;
    margin-top: 1rem;
}

/* :focus-visible-Ring aus global.css greift – kein lokales override nötig */

.search-label {
    position: absolute;
    top: 16px;
    left: 32px;
    font-size: 1rem;
    color: var(--color-secondary);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.search-input:not(:placeholder-shown) + .search-label {
    opacity: 1;
}

.search_options_wrapper {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-top: 16px;
}

.search_option {
    display: flex;
    align-items: center;
    gap: 6px;
}

.search_option label {
    font-size: 0.8rem;
    color: var(--color-secondary);
    cursor: pointer;
    user-select: none;
}

input.search_checkbox[type="checkbox"] {
  appearance: none;
  font-size: inherit;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid var(--color-primary);
  border-radius: 0.15em;
  position: relative;
  vertical-align: middle;
  background: var(--color-base); /* Hintergrund weiß, wenn nicht checked */
  transition: background 160ms;
}

input.search_checkbox[type="checkbox"]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: transparent; /* Kein Hintergrund für das Polygon */
  width: 1em;
  height: 1em;
  clip-path: polygon(15% 57%, 37% 73%, 83% 10%, 95% 19%, 40% 92%, 7% 67%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 160ms ease-in-out, background 160ms;
}

input.search_checkbox[type="checkbox"]:checked {
  background: var(--color-primary); /* Hintergrund farbig, wenn checked */
  border-color: var(--color-primary);
}

input.search_checkbox[type="checkbox"]:checked::before {
  background: var(--color-base); /* Polygon weiß */
  transform: translate(-50%, -50%) scale(1);
}


/* ---------- Main ---------- */

body {
    margin: 0;
    padding: 0;
    padding-top: var(--header-height);
}

/* Mobil-Kopf (bis 1099 px) ist nicht fixiert: kein Platzhalter noetig */
@media screen and (max-width: 1099px) {
    body {
        padding-top: 0px;
    }
}

body.scroll-disabled {
  position: fixed;
  width: 100%;
  overflow-y: scroll;
}

.hero_section {
    background-color: var(--color-primary-light);
    padding: 50px 0px;
    display: flex;
    align-items: flex-start;
}

.container {
    margin: 0px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero_inner {
    display: flex;
    flex-direction: row;
    gap: 50px;
    min-height: 200px;
    height: fit-content;
    box-sizing: border-box;
    width: 1160px;
}

.hero_content {
    width: calc(50% - 25px);
    min-width: calc(50% - 25px);
    max-width: calc(50% - 25px);
    display: flex;
    flex-direction: column;
    gap: 25px;
    height: fit-content;
}

.hero_img {
    width: calc(50% - 25px);
    min-width: calc(50% - 25px);
    max-width: calc(50% - 25px);
    min-height: 100%;
    max-height: 100%;
    object-fit: cover;
    background-size: cover;
    margin-bottom: -100px;
    border-radius: var(--standard-border-radius);
}


@media screen and (max-width: 768px) {
    .hero_section {
        padding: 0px 0px 50px 0px;
    }

    .container {
        padding: 0px 20px;
        box-sizing: border-box;
        width: 100%;
    }

    .hero_inner {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 50px;
        padding-top: 0px;
    }

    .hero_content {
        width: 100%;
        max-width: 100%;
    }

    .hero_img {
        width: calc(100% + 40px);
        max-width: calc(100% + 40px);
        margin-bottom: 0;
        height: 250px;
        order: -1;
        margin-left: -20px;
        margin-right:-20px;
    }

}

/* ---------- Footer ----------
   Ruhiger Abschluss auf Creme: links Firma und Anschrift, rechts drei
   Linkspalten aus WordPress-Menüs (parts/footer.php), darunter die
   Rechtszeile. Die Spaltenüberschriften folgen dem Megamenü (Lora,
   Haarlinie), Links verhalten sich wie dort. */

.site-footer {
    background-color: var(--color-primary-light);
    border-top: 1px solid var(--color-secondary-20);
    font-size: 1rem;
    line-height: var(--line-height-ui);
}

.site-footer__inner {
    width: min(100% - 40px, var(--content-size));
    margin-inline: auto;
}

.site-footer__main {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 40px;
    padding-block: 64px 48px;
}

.site-footer__logo {
    display: inline-block;
}

.site-footer__logo img {
    display: block;
    height: 56px;
    width: auto;
}

.site-footer__address {
    margin-top: 24px;
    font-style: normal;
    line-height: var(--line-height-body);
}

.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.site-footer__heading {
    font-family: var(--font-secondary);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: var(--line-height-heading);
    color: var(--color-text);
    margin: 0 0 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-secondary-20);
}

.site-footer__list,
.site-footer__legal {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Klickziel 44 px über die Zeilenhöhe, ohne sichtbaren Kasten */
.site-footer__list a,
.site-footer__list .is-disabled,
.site-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    color: var(--color-text);
    transition: color var(--motion-state-duration) var(--motion-state-easing);
}

.site-footer__list a:hover,
.site-footer__list a[aria-current="page"],
.site-footer__legal a:hover {
    color: var(--color-accent-dark-wcag);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Menüeintrag ohne Ziel (EPI_Menu_Tree, disabled) in Kopf, Mobilmenü und
   Fuß: bleibt stehen, in Sekundärgrau (5,11:1), ohne Hover, Strich und
   Pfeil. Steht hinter den Hover-Regeln, damit es sie überstimmt. */
.nav_link.is-disabled,
.mega_link.is-disabled,
.mega_link.is-disabled .mega_link_title,
.m_link.is-disabled,
.site-footer__list .is-disabled {
    color: var(--color-secondary);
    background-color: transparent;
    cursor: default;
}

.nav_link.is-disabled::before {
    content: none;
}

/* Link im Inhalt auf eine noch unveröffentlichte Seite (inc/link-ziele.php):
   Besucher sehen nur den Text, angemeldete Redakteure diesen Hinweis. */
.epi-link-offen {
    text-decoration: underline dashed;
    text-underline-offset: 4px;
    cursor: help;
}

.site-footer__external {
    margin-left: 6px;
    color: var(--color-accent-dark-wcag);
    font-weight: 600;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 32px;
    padding-block: 8px;
    border-top: 1px solid var(--color-secondary-20);
    font-size: 0.875rem;
}

.site-footer__copyright {
    padding-block: 12px;
    line-height: var(--line-height-ui);
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
}

@media screen and (max-width: 1024px) {
    .site-footer__main {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    .site-footer__main {
        padding-block: 48px 32px;
    }

    /* Lösungen über die volle Breite, die kurzen Listen nebeneinander */
    .site-footer__nav {
        grid-template-columns: 1fr 1fr;
        gap: 32px 24px;
    }

    .site-footer__column:first-child {
        grid-column: 1 / -1;
    }
}


/* ===== Megamenü Zustandsklassen ===== */

.mega_panel.is-open {
    /* transition ohne visibility-Verzögerung: Panel erscheint sofort sichtbar,
       dann faden opacity + transform ein. */
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 200ms ease, transform 200ms ease;
}

/* Nur der sichtbare Kasten nimmt den Zeiger an. Die volle Breite des
   Panels links und rechts davon zählt nicht als „im Menü“, sonst bliebe es
   offen, wenn man daneben fährt. */
.mega_panel.is-open .mega_panel_content {
    pointer-events: auto;
}

/* ===== Mobile Menü Zustandsklassen ===== */
.mobile_nav_overlay.is-open { display: flex; }
.m_subnav_depth_1.is-open { display: flex; }
button.m-menu-btn.is-hidden { display: none; }

/* ===== Barrierefreiheit: Bewegungsreduktion (WCAG 2.3.3 AAA) ===== */
@media (prefers-reduced-motion: reduce) {
    .mega_panel,
    .mega_panel.is-open {
        transition: none;
        transform: none;
    }
}