/*
Theme Name: Haudegen Theme Template
Theme URI: https://haudegen-webdesign.de
Author: Haudegen Webdesign
Author URI: https://haudegen-webdesign.de
Description: Schlankes, custom-codiertes Basis-Theme (kein Page Builder). Startpunkt fuer neue Kundenprojekte.
Version: 2.0.0
License: GNU General Public License v2 or later
Text Domain: haudegen-theme
*/

/* ============================================================
   REIHENFOLGE DIESER DATEI - NEUE BLOECKE HIER EINSORTIEREN
   1  Tokens
   2  Fonts
   3  Reset / Basis
   4  Typografie (inkl. .eyebrow)
   5  Farb- und Hintergrundklassen
   6  Layout-Utilities (flex, grids, Container-Stufen)
   7  Abstaende
   8  Komponenten (button, card, section-head, faq, form, post)
   9  Header
   10 Footer
   11 Einblenden beim Scrollen
   12 Swiper-Basis
   13 Responsive
   14 Barrierefreiheit (Fokus, reduced motion)
============================================================ */


/* ============================================================
   1  TOKENS
   Acht Werte, jeder mit genau EINER Bedeutung.
   --grey ist eine FLAECHE und nie Text. Leiser Text ist --text-grey.
   Projektspezifische Variablen erst bei Bedarf einzeln ergaenzen.
============================================================ */
:root {
    --black: #111111;        /* Text auf hell, dunkle Flaeche */
    --white: #d1d1d1;        /* GEÄNDERT - jetzt den neuen Ton vom hellen Schlamm */
    --grey: #f4f4f4;         /* helle Flaeche fuer Sektionswechsel - NIE Text */
    --text-grey: #666666;    /* leiser Text auf heller Flaeche */
    --line: #e2e2e2;         /* dezente Trennlinie / Kartenrahmen */
    --accent: #EA591D;       /* Aktionsfarbe: Buttons, Links, aktive Zustaende - hier = --orange */
    --accent-hover: #C94A14; /* Abdunklung des Akzents fuer :hover */
    --contrast: #1a1a1a;     /* zweite dunkle Flaeche, Fachfarbe */

    /* Projektspezifisch */
    --hero: #2f2f2f;
    --schlamm-dark: #8f867e;    
    --schlamm-light: #90867D;
    --schlamm-light-transparent: #d1d1d1;   /* GEÄNDERT - jetzt den neuen Ton vom hellen Schlamm */
    --orange: #EA591D;

    /* Hoehe des Headers (Logo 60px + 2 x 15px Padding). Wird fuer scroll-padding und den
       Slogan im mobilen Hero der Startseite gebraucht. Aendert sich das Logo, hier anpassen. */
    --header-hoehe: 90px;
}


/* ============================================================
   2  FONTS
   Immer self-hosted, nie Google Fonts (DSGVO).
   Variable Datei ist der Standard - vor dem Hochladen pruefen, dass
   die Datei wirklich variabel ist (fvar-Tabelle) und wirklich woff2
   (Signatur wOF2). Sonst sind fette Ueberschriften duenn.
============================================================ */
/*
@font-face {
    font-family: 'Haupt';
    src: url('fonts/haupt-variable.woff2') format('woff2-variations'),
         url('fonts/haupt-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
*/
@font-face {
    font-family: 'Akzidenz-Grotesk W1G';
    src: url('fonts/Akzidenz-GroteskW1G-Bold.woff2') format('woff2'),
        url('fonts/Akzidenz-GroteskW1G-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Akzidenz-Grotesk W1G';
    src: url('fonts/Akzidenz-GroteskW1G-Regular.woff2') format('woff2'),
        url('fonts/Akzidenz-GroteskW1G-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* ============================================================
   3  RESET / BASIS
============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-hoehe);   /* Sprungziele (/#produktion ...) landen nicht hinter dem Header */
}

body {
    /* font-family: 'Haupt', sans-serif; */
    font-family: 'Akzidenz-Grotesk W1G', sans-serif;
    color: var(--black);
    background: var(--schlamm-light-transparent);
    line-height: 1.6;
    font-size: 18px;
    /* clip statt hidden: hidden macht den Body zum Scroll-Container und
       bricht damit position:sticky im Header. */
    overflow-x: clip;
}

/* Scroll-Lock, wenn das Popup-Menue offen ist */
body.fixed {
    overflow: hidden;
}

/* Dunkles Overlay hinter dem offenen mobilen Menue (nur bis 899px aktiv).
   Es liegt unter dem Header (z-index 100) und ueber allem anderen (Slider-Pfeile u. a.).
   Geschlossen: unsichtbar und nicht klickbar (visibility/pointer-events, kein Wegschieben per transform). */
.body-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    padding: 0;
    background-color: black;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s;
}
@media (max-width: 899px) {
    header.aktiv + .body-overlay {
        opacity: .6;
        visibility: visible;
        pointer-events: auto;
    }
}

/* height:auto ist PFLICHT. wp_get_attachment_image() liefert width- und
   height-Attribute; ohne diese Regel erzwingt das height-Attribut die
   Hoehe und staucht jedes Bild. */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: inherit;
}


/* ============================================================
   4  TYPOGRAFIE
============================================================ */
h1, h2, h3, h4 {
    line-height: 1.15;
    font-weight: 700;
    text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h4 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

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

.text-small { font-size: .9rem; }
.text-lead { font-size: 1.15rem; }

/* Kleines Versal-Label UEBER der Ueberschrift.
   NIE innerhalb einer Ueberschrift - sonst liest Google die H1 als
   "eyebrow + headline" in einem Satz. */
.eyebrow {
    display: block;
    font-size: .75rem;
    letter-spacing: .18em;
    line-height: 1.3;
    color: var(--accent);
    margin-bottom: 12px;
}

.uppercase {
    text-transform: uppercase;
}

.bold {
    font-weight: 700;
}

.underline {
    text-decoration: underline;
    text-underline-offset: 5px;
}

/* ============================================================
   5  FARB- UND HINTERGRUNDKLASSEN
============================================================ */
.black { color: var(--black); }
.white { color: var(--white); }
.accent { color: var(--accent); }
.text-grey { color: var(--text-grey); }
.contrast { color: var(--contrast); }
.schlamm-light { color: var(--schlamm-light); }
.schlamm-dark { color: var(--schlamm-dark); }
.orange { color: var(--orange); }
.schlamm-light-transparent { color: var(--schlamm-light-transparent); }


.black-bg { background: var(--black); color: var(--white); }
.white-bg { background: var(--white); color: var(--black); }
.grey-bg { background: var(--grey); color: var(--black); }
.contrast-bg { background: var(--contrast); color: var(--white); }
.accent-bg { background: var(--accent); color: var(--white); }

/* Leiser Text auf dunkler Flaeche - --text-grey waere dort zu dunkel */
.black-bg .text-grey,
.contrast-bg .text-grey,
footer .text-grey { color: rgba(255, 255, 255, .7); }

.schlamm-light-bg { background: var(--schlamm-light); color: var(--white); }
.orange-bg { background: var(--orange); color: var(--white); }
.schlamm-dark-bg { background: var(--schlamm-dark); color: var(--white); }
.schlamm-light-transparent-bg { background: var(--schlamm-light-transparent); color: var(--schlamm-dark); }


/* ============================================================
   6  LAYOUT-UTILITIES
   Layout wird im Markup zusammengesetzt, nicht pro Seite neu in CSS.
============================================================ */
.flex {
    display: flex;
    flex-direction: column;
}
.flex-horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.flex-start { align-items: flex-start; }
.flex-end { align-items: flex-end; }
.flex-center { align-items: center; }
.flex-between { justify-content: space-between; }

.gap-5 { gap: 5px; }
.gap-10 { gap: 10px; }
.gap-20 { gap: 20px; }
.gap-40 { gap: 40px; }

.section-padding {
    padding: 100px 5vw;
}

.double-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
/* Bild links, Text rechts - ohne die Reihenfolge im Markup zu drehen
   (die DOM-Reihenfolge bleibt so auch mobil korrekt) */
.double-grid.reverse > *:first-child { order: 2; }

.triple-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: stretch;
}

/* Container-Stufen.
   Das nackte ".max-width" gibt es NICHT mehr: es bedeutete in einem
   Projekt 700px (Textspalte) und im naechsten 1600px (Seitenbreite).
   Jede Stufe traegt jetzt ihre Breite im Namen.
   Standard-Seitencontainer = .max-width-1600 */
.max-width-700,
.max-width-1100,
.max-width-1400,
.max-width-1600 {
    margin-inline: auto;
    width: 100%;
}
.max-width-700  { max-width: 700px; }   /* schmale Textspalte, Rechtstexte */
.max-width-1100 { max-width: 1100px; }  /* Beitrag, Formular, FAQ */
.max-width-1400 { max-width: 1400px; }  /* engerer Inhaltscontainer */
.max-width-1600 { max-width: 1600px; }  /* Standard-Seitencontainer */


/* ============================================================
   7  ABSTAENDE
============================================================ */
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mt-20 { margin-top: 20px; }
.mt-40 { margin-top: 40px; }

/* Folgt eine Sektion direkt auf eine gleichfarbige, entfaellt ihr Padding-Top (sonst doppelter Leerraum).
   Spezifischer als die mobilen .section-padding-Regeln. scroll-margin-top haelt bei Anker-Spruengen
   (/#weiterbearbeitung) den Abstand von frueher ein, damit der Inhalt nicht am Header klebt. */
.section-padding.no-padding-top {
    padding-top: 0;
    scroll-margin-top: 100px;
}



/*------------------------------------------
-----------------ANIMATION------------------
------------------------------------------*/


.transform {
    opacity: 0;
}

.transform.aktiv {
    animation-fill-mode: forwards;
    animation-duration: 1s;
}



.delay-one {
    animation-delay: 0.2s;
}

.delay-two {
    animation-delay: 0.4s;
}

.delay-three {
    animation-delay: 0.6s;
}

.delay-four {
    animation-delay: 0.8s;
}

.delay-five {
    animation-delay: 1s;
}

.delay-six {
    animation-delay: 1.2s;
}

.delay-seven {
    animation-delay: 1.4s;
}

.delay-eight {
    animation-delay: 1.6s;
}

.delay-nine {
    animation-delay: 1.8s;
}

.delay-max {
    animation-delay: 2s;    
}

.duration-one {
    animation-duration: 0.2s;
}

.duration-two {
    animation-duration: 0.4s;
}

.duration-three {
    animation-duration: 0.6s;
}

.duration-four {
    animation-duration: 0.8s;
}

.duration-five {
    animation-duration: 1s;
}

.duration-six {
    animation-duration: 1.2s;
}

.duration-seven {
    animation-duration: 1.4s;
}

.duration-eight {
    animation-duration: 1.6s;
}

.duration-nine {
    animation-duration: 1.8s;
}

.duration-max {
    animation-duration: 2s;    
}

.transform.animation-duration {
    animation-duration: 2s;
}

.transform-big.aktiv  {
    animation-name: transform-big;
}

.transform-very-big.aktiv  {
    animation-name: transform-very-big;
}

.transform-middle.aktiv {
    animation-name: transform-middle;
}

.transform-small.aktiv {
    animation-name: transform-small;
}

.transform-star.aktiv {
    animation-name: star-animation;
}



@keyframes transform-small {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes transform-middle {
    0% {
        transform: translateY(300px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes transform-big {
    0% {
        transform: translateY(500px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }

}

@keyframes transform-very-big {
    0% {
        transform: translateY(800px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }

}

@keyframes star-animation {
    0% {
        transform: scale(0.4) translateY(60px) rotate(-90deg);
        opacity: 0;
    }

    100% {
        transform: scale(1) translateY(0) rotate(0);
        opacity: 1;
    }
}


/* ============================================================
   8  KOMPONENTEN
============================================================ */

/* ============================================================
   HERO / STARTBEREICH
   Bild als <img> statt CSS-Hintergrund, damit es mit
   loading="eager" und fetchpriority="high" sofort lädt (LCP).
============================================================ */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: var(--hero); /* = Randfarbe des Bildes, damit Slogan und Bild mobil nahtlos ineinander laufen */
}

.hero-bild {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Desktop: Slogan liegt links mittig ueber dem Bild. Der Container
   haelt denselben Seitenabstand ein wie Header und Sektionen. */
.hero-inhalt {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 5vw;
}
.hero-slogan {
    width: 758px;
    max-width: 100%;
    height: auto;
}

/* Mobil: Slogan steht ueber dem Bild, Bild in Originalproportion */
@media (max-width: 899px) {
    .hero {
        height: auto;
    }
    .hero-inhalt {
        position: static;
        padding: calc(40px + var(--header-hoehe)) 5vw 0;   /* Header liegt ueber dem Hero */
    }
    .hero-bild {
        height: auto;
    }
}

/* Badge: Link-Kreis rechts unten, ueber dem Bild */
.hero-badge-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 5vw 120px;
}
.hero-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: var(--orange);
    /* Textgroesse ueber eine Variable: mobil (Kreis 80px) steht sie auf .85rem. Andere Buttons mit
       laengerem/kuerzerem Text skalieren sie per calc(var(--badge-schrift) * Faktor), damit der Text
       ueberall denselben geringen Abstand zum Kreisrand hat wie im Hero.
       Textfarbe kommt ueber die Klasse am Link: .white oder .orange */
    --badge-schrift: 1.7rem;
    font-size: var(--badge-schrift);
    line-height: 1.2;
    text-align: center;
    /* Rotation nach rechts (Uhrzeigersinn) */
    transform: rotate(12deg);

    /* Optional: Weicher Übergang bei Hover */
    transition: transform 0.3s ease;
}
.hero-badge:hover {
    transform: rotate(0deg) scale(1.05); /* Richtet sich kurz auf & wird leicht größer */
  }
@media (max-width: 899px) {
    /* Mobil: Bild beginnt direkt unter dem Slogan. Der Badge-Container ist
       eine Null-Hoehe-Zeile zwischen Slogan und Bild; der Badge haengt
       30px darunter, links, und liegt damit ueber dem Bild. */
    .hero {
        display: flex;
        flex-direction: column;
    }
    .hero picture { order: 2; display: block; }
    .hero-badge-wrap {
        position: relative;
        order: 1;
        height: 0;
        padding: 0;
        z-index: 2;
    }
    .hero-badge-wrap > .flex-end {
        position: absolute;
        top: 30px;
        left: 0;
        right: 0;
        padding: 0 5vw;
        align-items: flex-start;
    }
    .hero-badge {
        width: 80px;
        height: 80px;
        --badge-schrift: .85rem;
    }
}


/* ============================================================
  INTRO-SEKTION: 
  Headline, Text, USP-Zeile 
============================================================ */
.intro-text {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    line-height: 1.3;
}

.usp-liste {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 0;
    margin-top: 40px;
    font-size: clamp(1.4rem, 2.5vw, 2rem);   /* wie .intro-text */
}
.usp-liste li {
    padding: 0 40px;
    border-left: 1px solid var(--orange);
}
.usp-liste li:first-child {
    padding-left: 0;
    border-left: 0;
}
/* mobil: untereinander, jeder Punkt mit orangem Strich links */
@media (max-width: 899px) {
    .usp-liste {
        flex-direction: column;
        gap: 12px;
    }
    .usp-liste li,
    .usp-liste li:first-child {
        padding: 0 0 0 16px;
        border-left: 1px solid var(--orange);
    }
}

/* Bild-Text randlos: Bild bis an den Seitenrand und ueber die volle Hoehe.
   Das <img> liegt absolut in seiner Zelle, damit nicht das Bild die
   Zeilenhoehe bestimmt, sondern der Text. */
.bild-text-randlos {
    display: grid;
    grid-template-columns: 2fr 3fr; /* Bild ca. 40 %, wie in der Vorlage */
}
.bild-text-bild {
    position: relative;
    min-height: 900px; /* Bild bestimmt die Mindesthoehe, nicht der Text - so ist mehr vom Bild sichtbar */
}
.bild-text-bild img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
/* Rechter Rand folgt dem 1600er-Container, links Abstand zum Bild */
.bild-text-inhalt {
    justify-content: center;
    padding: 100px max(5vw, calc((100vw - 1600px) / 2)) 100px 100px;
}
/* Runder Button rechts unterhalb des Textes. "Mehr dazu" ist kuerzer als "Hier Anfrage senden":
   Schrift x 1,42, damit der Abstand zum Kreisrand wie im Hero ist. */
.bild-text-inhalt .hero-badge {
    align-self: flex-end;
    margin-top: 20px;
    font-size: calc(var(--badge-schrift) * 1.42);
}
@media (max-width: 899px) {
    .bild-text-randlos {
        grid-template-columns: 1fr;
    }
    .bild-text-bild {
        min-height: 0;
        aspect-ratio: 2 / 3; /* Seitenverhaeltnis des Originalbilds - nichts wird abgeschnitten */
    }
    .bild-text-inhalt {
        padding: 60px 5vw;
    }
}

/* Einzelseite Leistung: orange Flaeche links, Bild rechts, feste Hoehe.
   Bild liegt absolut in seiner Zelle und bestimmt die Hoehe nicht;
   min-height statt height, damit sehr langer Text nie abgeschnitten wird. */
.leistung-seite {
    display: grid;
    /* minmax(0, ...) macht das Verhaeltnis FEST: ein einfaches fr wuerde sich
       nach dem breitesten Wort (lange Ueberschrift) richten und wachsen. */
    grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); /* orange ca. 38 %, wie in der Vorlage */
    min-height: 800px;
}
.leistung-title {
    font-size: clamp(2.4rem, 5vw, 2.5rem);
}
.leistung-text {
    justify-content: center;
    padding: 50px 5vw 100px max(5vw, calc((100vw - 1600px) / 2));
}
.leistung-text h1 {
    margin-bottom: 20px;
    /* lange Woerter brechen (Silbentrennung, notfalls hart) statt die Spalte zu dehnen */
    overflow-wrap: break-word;
    hyphens: auto;
}
.leistung-text {
    min-width: 0;
}
.leistung-text .entry-content a {
    color: var(--white);
}

.leistung-bild {
    position: relative;
}
.leistung-bild img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Badge hier in --schlamm-dark, rechts unten in der orangen Flaeche */
.hero-badge.dunkel {
    background: var(--schlamm-dark);
}
.hero-badge.hell {
    background: var(--schlamm-light-transparent);
}
.leistung-text .hero-badge {
    align-self: flex-end;
    margin-top: 40px;
}
@media (max-width: 899px) {
    .leistung-seite {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .leistung-bild {
        order: -1;
        height: 350px;
    }
    .leistung-text {
        padding: 60px 5vw;
    }
    .leistung-text .hero-badge {
        align-self: flex-start;
    }
}

/* Sektion: Flaechiges Hintergrundbild, Textblock in der Mitte.
   Bild und Inhalt liegen im selben Grid-Feld uebereinander. */
.bild-hintergrund {
    display: grid;
    min-height: 600px;
    overflow: hidden;
    background: var(--hero);   /* Fallback, solange das Bild laedt */
}
.bild-hintergrund-bild {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bild-hintergrund-inhalt {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;                /* ueber dem Overlay */
    display: flex;
    align-items: center;       /* Block vertikal mittig */
    justify-content: center;   /* und horizontal mittig */
    color: var(--white);
}
/* Abdunklung: das Bild ist sehr hell, weisser Text braucht sie */
.bild-hintergrund::after {
    content: '';
    grid-area: 1 / 1;
    background: rgba(0, 0, 0, .45);
}
/* Block ist so breit wie seine laengste Zeile, der Text bleibt linksbuendig */
.bild-hintergrund-block {
    width: fit-content;
    max-width: 100%;
}
.bild-hintergrund-block h2 {
    font-size: clamp(1.4rem, 2.5vw, 2rem);   /* wie .intro-text */
}
.bild-hintergrund-text {
    font-size: clamp(1.6rem, 3vw, 3rem);
    line-height: 1.15;
}
/* Aufzaehlung in der Sektion (z. B. "Warum wir?"): Schriftgroesse wie .intro-text, mit mehr Zeilenabstand als der Fliesstext */
.bild-hintergrund-text ul {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    line-height: 1.7;
}
/* Badge-Button rechts unterhalb der Aufzaehlung. "Mehr ueber uns": Schrift x 1,17 (Abstand zum Kreisrand wie im Hero) */
.bild-hintergrund-block .hero-badge {
    align-self: flex-end;
    font-size: calc(var(--badge-schrift) * 1.17);
}
/* Siegel links unten am Rand der Sektion (Desktop); mobil unter dem Text im Fluss */
.bild-hintergrund-fuss {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40px;
    padding: 0 5vw;
}
/* Runder Kreis um das Siegel-PNG (schwarze Schrift, transparent) auf weissem Grund.
   Die Rundung sitzt am Kreis, nicht am <img>: sonst schneidet sie die Schrift am Rand ab. */
.bild-hintergrund-siegel-kreis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
}
.bild-hintergrund-siegel {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media (max-width: 899px) {
    .bild-hintergrund-inhalt {
        flex-direction: column;
        gap: 40px;
    }
    .bild-hintergrund-fuss {
        position: static;
        align-self: stretch;
        padding: 0;
    }
    .bild-hintergrund-siegel-kreis {
        width: 120px;
        height: 120px;
        padding: 20px;
    }
}

/* Sektion Anfrage: Text links, Bild rechts randlos, Badge auf der Kante.
   Das <img> liegt absolut in seiner Zelle, damit der Text die Hoehe bestimmt. */
.anfrage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 700px;
}
.anfrage-text {
    justify-content: center;
    padding: 100px 5vw 100px max(5vw, calc((100vw - 1600px) / 2));
    font-size: clamp(1.4rem, 2.5vw, 2rem);   /* wie .intro-text */
    line-height: 1.3;
}
.anfrage-text p {
    margin-bottom: 1.2em;
}
.anfrage-text p:last-of-type {
    margin-bottom: 0;
}
.anfrage-bild {
    position: relative;
}
.anfrage-bild img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Badge: unten auf der Kante zwischen Text und Bild */
.anfrage-badge {
    position: absolute;
    left: 50%;
    bottom: 80px;
    margin-left: -80px;     /* halbe Badge-Breite (160px) -> Mitte liegt auf der Kante */
    z-index: 1;
}
@media (max-width: 899px) {
    .anfrage {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .anfrage-bild {
        order: -1;
        height: 350px;
    }
    .anfrage-text {
        padding: 60px 5vw 30px;
    }
    /* mobil zuletzt, unter dem Text, statt auf der Kante */
    .anfrage-badge {
        position: static;
        margin: 0 0 60px 5vw;
        justify-self: start;
    }
}

/* Kontaktseite: Hintergrundbild, Formular rechts darauf.
   Das Maennchen im Bild steht etwas links der Mitte, deshalb sitzt die Box rechts. */
.kontakt-seite {
    display: grid;
    background: var(--black);
}
.kontakt-seite-bild {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* rechts verankert: das Maennchen (44 % der Bildbreite) wandert beim Beschneiden
       nach links, weg vom Formular */
    object-position: 100% center;
}
.kontakt-seite-inhalt {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    color: var(--white);
}
/* Header liegt ueber dem Bild: Inhalt beginnt unter ihm */
.kontakt-seite-inhalt.section-padding {
    padding-top: calc(70px + var(--header-hoehe));
    padding-bottom: 80px;
}
.kontakt-box {
    width: 100%;
    max-width: 760px;
    margin-left: auto;
    gap: 0;
    padding: 40px;
    border-radius: 14px;
    backdrop-filter: blur(6px);
}
.kontakt-box h1 {
    margin-bottom: 30px;
}
/* Ueberschriften von Kontakt und Karriere etwas kleiner (gleiche Groesse wie auf Impressum/Datenschutz) */
.kontakt-box h1,
.karriere-text h1 {
    font-size: clamp(1.8rem, 3.5vw, 3rem);
}

/* Formular: Felder als Zeilen in --schlamm-light, Text schwarz (Kontrast),
   Beschriftung weiss auf dem dunklen Bild, Senden-Button orange. */
.kontakt-formular label,
.kontakt-formular legend {
    display: block;
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: 6px;
}
.kontakt-formular .pflicht {
    color: var(--orange);
}
.form-zeile {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
    margin-bottom: 20px;
}
.form-zeile label {
    margin-bottom: 0;
}
.form-zeile.drei {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.form-zeile.eins-zwei {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.kontakt-formular .wpcf7-form-control-wrap {
    display: block;
}
/* Abstaende: jede Zeile / jedes Einzelfeld bringt 20px nach unten mit */
.kontakt-formular > form > label {
    margin-bottom: 20px;
}
.kontakt-formular input[type="text"],
.kontakt-formular input[type="email"],
.kontakt-formular input[type="tel"],
.kontakt-formular select,
.kontakt-formular textarea {
    width: 100%;
    padding: 13px 16px;
    background: var(--schlamm-light-transparent);
    color: var(--black);
    border: 0;
    border-radius: 2px;
    font: inherit;
    /* Die Felder stehen im <label> (14,4px, fett) und erben sonst beides. Hier: normale Schrift,
       16px (kleiner loest auf iPhones beim Antippen einen Zoom aus). */
    font-size: 1rem;
    font-weight: 400;
}
.kontakt-formular select {
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
}
.kontakt-formular ::placeholder {
    color: rgba(0, 0, 0, .65);
}
.kontakt-formular textarea {
    height: 130px;      /* CF7 setzt sonst rows=10 */
    min-height: 0;
    resize: vertical;
}
/* Datei-Upload: nur Feld im Stil der anderen Eingaben */
.kontakt-formular input[type="file"] {
    width: 100%;
    padding: 10px;
    background: var(--schlamm-light-transparent);
    color: var(--black);
    border-radius: 2px;
    font: inherit;          /* Browser-Standard waere Arial 13px */
    font-size: 1rem;
    font-weight: 400;
}
.kontakt-formular input[type="file"]::file-selector-button {
    font: inherit;
    font-weight: 400;
}
/* Datenschutz-Checkbox (CF7 acceptance) */
.kontakt-formular .wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 4px 0 24px;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.5;
}
.kontakt-formular .wpcf7-acceptance input[type="checkbox"] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--orange);
}
.kontakt-formular .wpcf7-acceptance a {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Dateihinweis unter dem Upload */
.form-hinweis {
    font-size: .8rem;
    margin: 6px 0 0;
    opacity: .85;
}
.form-hinweis a {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.kontakt-formular input[type="submit"] {
    padding: 14px 40px;
    background: var(--orange);
    color: var(--white);
    border: 0;
    border-radius: 2px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background .25s ease;
}
.kontakt-formular input[type="submit"]:hover {
    background: var(--white);
    color: var(--orange);
}
/* Fehlermeldungen: auf dunklem Bild hell, Antwortbox behaelt helle Fuellung -> dunkler Text */
.kontakt-formular .wpcf7-not-valid-tip {
    color: #ffb59c;
    font-weight: 700;
}
.kontakt-formular .wpcf7-response-output {
    color: var(--black);
}
@media (max-width: 899px) {
    .kontakt-box {
        padding: 24px 20px;
    }
    .form-zeile,
    .form-zeile.drei,
    .form-zeile.eins-zwei {
        grid-template-columns: 1fr;
        gap: 20px;      /* Felder stehen untereinander, brauchen Abstand */
    }
}

/* Karriere: Foto fuellt die Sektion, links ist das Bild schwarz - dort steht der Text.
   #010101 ist der Schwarzton des Fotos (nicht --black), damit mobil kein Rand entsteht. */
.karriere-seite {
    display: grid;
    background: #010101;
    min-height: 700px;
}
/* <picture> soll das Grid nicht stoeren: das <img> darin wird direktes Grid-Kind */
.karriere-seite picture {
    display: contents;
}
.karriere-seite-bild {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 100% center;   /* Figur bleibt rechts im Bild stehen */
}
.karriere-seite-inhalt {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
}
.karriere-text {
    max-width: 560px;
    font-size: clamp(1.4rem, 2.5vw, 1.4rem);   /* wie .historie-text */
    line-height: 1.3;
}
.karriere-lead {
    font-size: 1.15em;   /* etwas groesser als der Fliesstext */
}
/* Button: Badge wie im Hero, nur mit anderem Text. Der Text ist laenger
   ("initiativ bewerben"): Schrift x 0,82, Abstand zum Kreisrand wie im Hero. */
.karriere-text .hero-badge {
    align-self: flex-start;
    margin-top: 20px;
    font-size: calc(var(--badge-schrift) * .82);
}
@media (max-width: 899px) {
    /* Foto oben (nur der obere Teil mit der Figur), Text darunter auf Schwarz.
       Das Bild ist unten schwarz (#010101) wie die Flaeche - kein sichtbarer Uebergang. */
    .karriere-seite {
        min-height: 0;
        padding-top: var(--header-hoehe);   /* Header liegt ueber der Sektion: Foto beginnt darunter (Schwarz = Bildgrund, kein Rand sichtbar) */
    }
    .karriere-seite-bild {
        grid-area: 1 / 1;
        height: auto;
        aspect-ratio: 680 / 577;   /* Karriere_zuschnitt.jpg: ganzes Bild, nichts abgeschnitten */
        object-position: top;
    }
    .karriere-seite-inhalt {
        grid-area: 2 / 1;
    }
    .karriere-seite-inhalt.section-padding {
        padding-top: 10px;
    }
}

/* Ueber uns: Person = Textbox + Foto nebeneinander, im 1600er-Container.
   Abstand zum Seitenrand (5vw) und 40px zwischen den Zeilen sowie oben und unten.
   Foto: feste Hoehe, Seitenverhaeltnis bleibt (Fotos haben verschiedene Formate).
   Box: fuellt den Rest. Wechsel ueber .bild-links (Foto links, Box rechts). */
.person {
    display: flex;
    align-items: stretch;
    width: calc(100% - 10vw);
    max-width: 1600px;
    margin: 40px auto;
}
.person.bild-links {
    flex-direction: row-reverse;
}
/* Foto-Spalte: feste Breite (Querformat 45 %, Hochformat 30 %), mindestens 560px hoch.
   Das Foto fuellt die Spalte in voller Hoehe (object-fit: cover) - auch wenn die Box bei
   schmalen Fenstern durch laengeren Text hoeher wird, bleibt darunter kein Leerraum. */
.person-bild {
    position: relative;
    flex: 0 0 45%;
    min-height: 560px;
}
.person-bild.hoch {
    flex-basis: 30%;
}
.person-bild img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.person-box {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 60px;
    color: var(--white);
}
.person-box h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    overflow-wrap: break-word;
    hyphens: auto;
}
.person-rolle {
    font-size: 1.15rem;
}
/* Claim ("Klar bleiben"): groesser als der Fliesstext, statt des Punkts ein Quadrat in Textfarbe */
.person-claim {
    font-size: clamp(1.4rem, 2.5vw, 2rem);   /* wie .intro-text */
    line-height: 1.2;
}
.person-claim::after {
    content: '';
    display: inline-block;
    width: .2em;
    height: .2em;
    margin-left: .12em;
    background: currentColor;
}
/* Unter 1200px stapeln: Foto oben im Originalformat, Box darunter */
@media (max-width: 1199px) {
    .person,
    .person.bild-links {
        flex-direction: column;
    }
    .person-bild,
    .person-bild.hoch {
        order: -1;
        flex: none;
        min-height: 0;
    }
    .person-bild img {
        position: static;
        width: 100%;
        height: auto;
        max-height: 560px;
        object-position: center 40%;
    }
    .person-box {
        padding: 30px 20px;
    }
}

/* Historie: Die Ueberschrift ist der Graffiti-Schriftzug (PNG, transparent), bis an den
   Rand des 1600er-Containers mit demselben Seitenabstand (5vw) wie der Header. */
.historie-graffiti {
    padding: 40px 5vw 20px;
    line-height: 0;
}
.historie-graffiti img {
    width: 100%;
    height: auto;
}
/* Text rueckt naeher ans Bild: kleinerer Abstand oben und unten (Standard waere 100px).
   .section-padding.historie-text ist spezifischer als die mobilen .section-padding-Regeln
   weiter unten in dieser Datei (sonst gewinnen dort 60px bzw. 50px). */
.section-padding.historie-text {
    padding-top: 40px;
    padding-bottom: 40px;   /* Abstand zum Zeitstrahl-Slider darunter */
}
.historie-text {
    font-size: clamp(1.4rem, 2.5vw, 1.4rem);   /* wie .intro-text */
    line-height: 1.3;
}
@media (max-width: 899px) {
    .historie-graffiti { padding: 24px 5vw 8px; }
    .section-padding.historie-text { padding-top: 16px; padding-bottom: 30px; }
}

/* Generische Seiten (Impressum, Datenschutz, AGB): Ueberschrift und Inhalt ruecken zusammen.
   Vorher: 100px Padding unten am Kopf + 100px Padding oben am Inhalt. Jetzt zusammen 40px
   (mobil 30px). Ueberschrift etwas kleiner. Selektoren mit zwei Klassen, damit sie die
   mobilen .section-padding-Regeln weiter unten schlagen. */
.section-padding.kopf-kompakt {
    padding-top: 60px;
    padding-bottom: 10px;
}
.kopf-kompakt h1 {
    font-size: clamp(1.8rem, 3.5vw, 3rem);
}
.section-padding.seite-kompakt {
    padding-top: 30px;
}
/* Links im Inhalt (Mail, Website) haben die Textfarbe der Flaeche (nicht orange wie sonst im Editor-Bereich);
   die Unterstreichung bleibt, damit sie als Link erkennbar sind. */
.seite-kompakt .entry-content a {
    color: inherit;
}
@media (max-width: 899px) {
    .section-padding.kopf-kompakt { padding-top: 40px; padding-bottom: 10px; }
    .section-padding.seite-kompakt { padding-top: 20px; }
}

/* Zitat auf der Historie-Seite */
.historie-zitat {
    margin: 30px 0;
    padding-left: 24px;
    border-left: 4px solid var(--orange);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.4;
}

/* Einleitungstext ueber den Karten */
.leistung-intro {
    max-width: 1100px;
    margin-bottom: 60px;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    line-height: 1.3;
}

/* Leistungskarten (Produktion / Weiterbearbeitung auf der Startseite) */
.leistung-karten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 50px 60px;
    align-items: start;
}
/* Jede Karte spannt 3 Zeilen des Raster (Bild, Titel, Text) und uebernimmt sie per subgrid.
   So ist die Titelzeile in einer Reihe immer so hoch wie der laengste Titel und der Text
   beginnt in allen Karten auf gleicher Hoehe - egal ob der Titel ein- oder zweizeilig ist. */
.leistung-karte {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 15px;
}
.leistung-bild-link { grid-row: 1; }
.leistung-karte h3 { grid-row: 2; }
.leistung-karte-text { grid-row: 3; }
/* Das Bild ist der Link: dezenter Hover (Bild zoomt leicht, Rahmen schneidet ab) */
.leistung-bild-link {
    display: block;
    overflow: hidden;
    margin-bottom: 5px;
}
.leistung-karte img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform .5s ease;
}
.leistung-bild-link:hover img,
.leistung-bild-link:focus-visible img {
    transform: scale(1.04);
}
.leistung-karte h3 {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    overflow-wrap: break-word;
    hyphens: auto;
}
@media (max-width: 1100px) {
    .leistung-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
    .leistung-karten { grid-template-columns: 1fr; }
}

/* Sektion Unternehmen / Generation */
.firma-lead,
.firma-claim {
    font-size: clamp(1.4rem, 2.5vw, 2rem);   /* wie .intro-text */
    line-height: 1.3;
}
.firma-claim {
    color: var(--orange);
    margin-top: 30px;
}
.firma-text {
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    margin-top: 40px;
}


/* --- Aufzaehlung mit Quadraten ------------------------------
   class="liste-quadrate" am <ul>, Quadrate orange. Zusatzklasse "hell": Quadrate in
   --schlamm-light-transparent (fuer Listen auf orangem Grund). Das Quadrat skaliert mit
   der Schriftgroesse und sitzt mittig zur ersten Zeile. */
.liste-quadrate {
    list-style: none;
}
/* in Editor-Bereichen (.entry-content ul) setzt das Theme 20px Einzug links - hier nicht */
.entry-content .liste-quadrate {
    margin-left: 0;
}
.liste-quadrate.hell {
    --quadrat-farbe: var(--schlamm-light-transparent);
}
.liste-quadrate li {
    position: relative;
    padding-left: 1.4em;
}
.liste-quadrate li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .58em;
    width: .5em;
    height: .5em;
    background: var(--quadrat-farbe, var(--orange));
}

/* --- Button -------------------------------------------------
   Varianten als zweite Klasse: class="button outline"
   (nicht .button-outline - der Modifier-Stil ist der gelebte) */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    align-self: flex-start;
    padding: 14px 32px;
    background: var(--accent);
    color: var(--white);
    line-height: 1.3;
    border-radius: 2px;
    transition: background .25s ease, transform .25s ease, color .25s ease;
}
.button:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}
.button.outline {
    background: transparent;
    border: 2px solid var(--accent);
    color: var(--accent);
    padding: 12px 30px;
}
.button.outline:hover {
    background: var(--accent);
    color: var(--white);
}
.button.dark {
    background: var(--black);
    color: var(--white);
}
.button.dark:hover {
    background: var(--contrast);
}
/* Auf dunkler Flaeche braucht outline eine helle Linie */
.black-bg .button.outline,
.contrast-bg .button.outline {
    border-color: var(--white);
    color: var(--white);
}
.black-bg .button.outline:hover,
.contrast-bg .button.outline:hover {
    background: var(--white);
    color: var(--black);
}

/* --- Karte --------------------------------------------------
   Ein Baustein fuer alle Kartenmuster (Leistung, Rezension,
   Partner, Formular). Nicht pro Sektion neu definieren. */
.card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 30px;
}
.grey-bg .card {
    background: var(--white);
}
.black-bg .card,
.contrast-bg .card {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .15);
}
/* Nur bei klickbaren Karten */
a.card:hover,
.card.klickbar:hover {
    border-color: var(--accent);
}

/* --- Sektionskopf -------------------------------------------
   Eyebrow + Headline links, Zusatztext rechts. Bei genug Platz
   nebeneinander, sonst untereinander. */
.section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    margin-bottom: 50px;
}
.section-head > *:first-child { flex: 1 1 460px; }
.section-head > *:last-child  { flex: 0 1 380px; }
.section-head > *:only-child  { flex: 1 1 100%; }

/* --- FAQ ----------------------------------------------------
   .faq-question ist ein <button>, kein <div onclick>. */
.faq-item {
    border-bottom: 1px solid var(--line);
}
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 25px 0;
    font-size: 1.05rem;
}
.faq-icon {
    flex-shrink: 0;
    transition: transform .3s ease;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--accent);
}
.faq-icon.aktiv {
    transform: rotate(45deg);
}
/* max-height reicht fuer ca. 15 Zeilen Antwort. Bei laengeren
   Antworten den Wert erhoehen - eine Hoehe von "auto" laesst sich
   nicht animieren. */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}
.faq-answer.aktiv {
    max-height: 1500px;
}
.faq-answer-inner {
    padding-bottom: 25px;
    color: var(--text-grey);
}

/* --- Formular (CF7) -----------------------------------------
   Die Plugin-Styles sind in functions.php abgeschaltet, deshalb
   steht das komplette Formular-CSS hier. */
.form-card label {
    display: block;
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: 6px;
}
.form-card p {
    margin-bottom: 18px;
}
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card textarea,
.form-card select {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--white);
    font: inherit;
    color: var(--black);
}
.form-card textarea {
    min-height: 150px;
    resize: vertical;
}
.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus {
    border-color: var(--accent);
    outline: none;
}
.form-card input[type="submit"] {
    display: inline-block;
    padding: 14px 32px;
    background: var(--accent);
    color: var(--white);
    font-weight: 700;
    font-family: inherit;
    font-size: inherit;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: background .25s ease;
}
.form-card input[type="submit"]:hover {
    background: var(--accent-hover);
}
/* Consent-Checkbox */
.form-card .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}
.form-card .wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    font-size: .85rem;
    line-height: 1.5;
}
.form-card .wpcf7-acceptance input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--accent);
}
/* Pflichtfeld-Markierung und Meldungen */
.form-card .pflicht {
    color: var(--accent);
}
.wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-size: .85rem;
    color: #c00;
}
.wpcf7-response-output {
    margin-top: 20px !important;
    padding: 14px 18px !important;
    border: 1px solid var(--line) !important;
    border-radius: 4px;
    font-size: .95rem;
}
/* Solange keine Meldung da ist, ist die Box leer - dann nicht anzeigen (sonst leerer Balken) */
.wpcf7-response-output:empty {
    display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
    border-color: #2a7f3f !important;
    background: #eef7f0;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    border-color: #c00 !important;
    background: #fdeeee;
}
.wpcf7-spinner {
    display: none;
}
/* CF7 gibt oberhalb des Formulars eine Fehlerliste fuer Screenreader aus
   (.screen-reader-response). Weil das Plugin-CSS abgeschaltet ist, muss sie
   hier visuell versteckt werden - fuer Screenreader bleibt sie erhalten. */
.wpcf7 .screen-reader-response {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* Honeypot- / Hidden-Felder */
.hidden-fields-container {
    visibility: hidden !important;
    position: absolute;
    left: -9999px;
}

/* --- Beitrag / Seite ----------------------------------------
   entry-content: hier stehen die Styles fuer vom Editor
   ausgegebenes HTML, das wir nicht mit Klassen versehen koennen. */
.entry-content h2,
.entry-content h3 { margin: 40px 0 15px; }
.entry-content ul,
.entry-content ol { margin: 0 0 20px 20px; }
.entry-content li { margin-bottom: 8px; }
.entry-content img { margin: 30px 0; }
.entry-content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
}
.entry-content th,
.entry-content td {
    border: 1px solid var(--line);
    padding: 10px 14px;
    text-align: left;
}

.post-meta {
    display: block;
    color: var(--accent);
    font-size: .8rem;
    letter-spacing: .12em;
}

/* Beitragsraster (index, archive, search) */
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.post-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}
.post-card img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 5px;
}
.post-card h3 {
    font-size: 1.3rem;
    transition: color .25s ease;
}
.post-card:hover h3 {
    color: var(--accent);
}

/* Pagination */
.pagination {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 60px;
    flex-wrap: wrap;
}
.pagination .page-numbers {
    padding: 10px 16px;
    background: var(--grey);
    border-radius: 2px;
}
.pagination .page-numbers.current {
    background: var(--accent);
    color: var(--white);
}


/* ============================================================
   9  HEADER
   Nicht standardmäßig sticky, weil wir nicht bei kleinen / einfachen Seiten brauchen dass der Header standardmäßig mitläuft
============================================================ */
/* Header: bleibt beim Scrollen oben (sticky). Auf der Startseite liegt er fest ueber dem Hero
   und ist zunaechst transparent; script.js (headerScroll) setzt beim Scrollen die Klasse .fixed.
   Das gilt fuer Startseite, Kontakt und Karriere (header.transparent, siehe header.php).
   Auf allen anderen Seiten steht .fixed dauerhaft im Markup. */
header {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);   /* unter der WP-Adminleiste, wenn eingeloggt */
    z-index: 100;
    width: 100%;
    background: transparent;
    color: var(--white);
    padding: 15px 5vw;
    transition: background-color .6s ease;
}
/* Startseite, Kontakt, Karriere (header.transparent): Header ueberlagert das Bild (muss aus dem Seitenfluss) */
header.transparent {
    position: fixed;
    left: 0;
    right: 0;

}
.header-inner {
    max-width: 1600px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}
header .logo img {
    max-height: 60px;
    width: auto;
}

/* Burger - immer sichtbar */
.burger {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    margin-right: -10px;
}
.burger span {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--orange);
    transition: transform .3s ease, opacity .3s ease;
}
header.aktiv .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
header.aktiv .burger span:nth-child(2) { opacity: 0; }
header.aktiv .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Menue offen, Header noch transparent (Startseite oben): dunkler Grund, damit das Menue lesbar ist */
header.aktiv:not(.fixed) {
    background: rgb(var(--hero-rgb) / 0.8);
}

/* Gescrollter Zustand (Startseite) bzw. Dauerzustand (Unterseiten): Hintergrund
   --schlamm-light-transparent. Hover und Untermenue-Panel brauchen dunkle statt helle Farben. */
header.fixed {
    background: var(--schlamm-light-transparent);
    color: var(--black);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

}
header.fixed .burger span {
    background: var(--orange);
}

header.fixed #navi a:hover,
header.fixed .navi-toggle:hover {
    color: var(--schlamm-dark);
}
header.fixed .navi-ebene-3 a {
    color: var(--text-grey);
}
header.fixed .navi-ebene-3 a:hover {
    color: var(--black);
}

/* Menue: sitzt in der Header-Leiste zwischen Logo und Burger.
   Bis header.aktiv gesetzt ist, bleibt es ausgeblendet. */
#navi {
    display: none;
    margin-left: auto;
}
header.aktiv #navi {
    display: block;
}
#navi ul {
    list-style: none;
}
#navi a,
.navi-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    color: var(--orange);
    transition: color .25s ease;
}
#navi a:hover,
.navi-toggle:hover {
    color: var(--white);
}

/* Punkt mit Link UND Unterpunkten (Produktion, Weiterbearbeitung):
   Link + Plus-Button nebeneinander, Untermenue darunter ueber die volle Breite */
.navi-mit-plus {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#navi .navi-mit-plus > a {
    flex: 1;
    width: auto;
}
.navi-mit-plus > ul {
    flex-basis: 100%;
}
/* Plus wie das X im Burger (2px-Linien, orange), nur kleiner. Klickflaeche 44px.
   Beim Oeffnen dreht es sich zum X. */
.navi-plus {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    color: var(--orange);
}
.navi-plus::before,
.navi-plus::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background: currentColor;
    transition: transform .3s ease;
}
.navi-plus::before { transform: translate(-50%, -50%); }
.navi-plus::after  { transform: translate(-50%, -50%) rotate(90deg); }
li.aktiv > .navi-plus::before { transform: translate(-50%, -50%) rotate(45deg); }
li.aktiv > .navi-plus::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Toggle-Button ohne eigenen Link (z. B. Zertifikate): Plus-Symbol wie .navi-plus,
   dreht sich beim Oeffnen zum X. Gesamte Zeile ist klickbar. */
.navi-toggle-plus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
}
.navi-toggle-plus::after {
    content: '';
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    color: var(--orange);
    background:
        linear-gradient(currentColor, currentColor) center / 16px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 16px no-repeat;
    transition: transform .3s ease;
}
li.aktiv > .navi-toggle-plus::after {
    transform: rotate(45deg);
}

/* Ebene 2 und 3 sind zu, bis der Button davor geklickt wurde */
.navi-ebene-2,
.navi-ebene-3 {
    display: none;
}
li.aktiv > .navi-ebene-2,
li.aktiv > .navi-ebene-3 {
    display: block;
}
.navi-ebene-3 {
    padding-left: 20px;
}

/* Mobil: ist das Menue laenger als der Bildschirm, scrollt der Header selbst */
@media (max-width: 899px) {
    header.aktiv {
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
    }
}

/* Mobil: Menue steht unter Logo und Burger, alles untereinander */
.header-inner {
    flex-wrap: wrap;
}
#navi {
    order: 3;
    flex-basis: 100%;
    margin-top: 10px;
}
.navi-ebene-2 {
    padding-left: 20px;
}

/* Ab 900px: Ebene 1 nebeneinander in der Leiste, Ebene 2 klappt als Panel darunter auf */
@media (min-width: 900px) {
    /* Desktop: kein Burger, Ebene 1 steht direkt in der Header-Leiste */
    .burger {
        display: none;
    }
    #navi,
    header.aktiv #navi {
        display: block;
    }
    .header-inner {
        flex-wrap: nowrap;
    }
    #navi {
        order: 0;
        flex-basis: auto;
        margin-top: 0;
    }
    .navi-ebene-1 {
        display: flex;
        gap: 40px;
    }
    .navi-ebene-1 > li {
        position: relative;
    }
    .navi-ebene-1 > li > .navi-toggle {
        width: auto;
        font-size: 1.3rem;
    }
    .navi-ebene-2 {
        position: absolute;
        top: 100%;
        left: -20px;
        min-width: 300px;
        padding: 15px 20px 20px;
        background: color-mix(in srgb, var(--hero) 80%, transparent);
    }
    /* weisser Header: auch das Aufklapp-Panel weiss */
    header.fixed .navi-ebene-2 {
        background: color-mix(in srgb, var(--schlamm-light-transparent) 80%, transparent);
        border-top-color: var(--schlamm-light);
    }
}


/* ============================================================
   10  FOOTER
============================================================ */
footer {
    background: var(--schlamm-dark);
    color: var(--white);
    padding: 40px 5vw 24px;
}
.footer-inner,
.footer-bottom {
    max-width: 1600px;
    margin-inline: auto;
}

/* Aufbau: Zeile 1 Logo, Zeile 2 Adresse links + Spalten rechts, Zeile 3 Copyright + Rechtliches */
.footer-inner {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
footer .logo {
    display: inline-block;
    align-self: flex-start;
}
/* Feste Breite noetig: WordPress setzt bei lazy Bildern sizes="auto" und die Regel
   contain-intrinsic-size 3000px 1500px - ohne feste Breite wuerde das Logo auf
   die volle Containerbreite aufgezogen. */
footer .logo img {
    width: 300px;
    max-width: 100%;
    height: auto;
}
.footer-reihe {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px 60px;
}

/* Adressblock: erste Zeile wie die Spaltentitel, Telefon und Mail sind Links (Hover orange) */
.footer-adresse {
    font-style: normal;
    font-size: .95rem;
    line-height: 1.7;
}

/* Drei Spalten rechts: Karriere (Link), Downloads, Follow us */
.footer-spalten {
    display: grid;
    grid-template-columns: repeat(3, auto);
    column-gap: 60px;
    row-gap: 30px;
    align-items: start;
}
.footer-titel {
    display: block;
    font-size: 1.3rem;
    line-height: 1.3;
    letter-spacing: .04em;
    margin-bottom: 10px;
}
/* Unterpunkte buendig mit dem Titel, normales Gewicht (Ueberschrift bleibt Bold) */
.footer-spalten li {
    margin-bottom: 6px;
}
.footer-spalten li a {
    display: inline-block;
    overflow-wrap: break-word;
}
footer a {
    transition: color .25s ease;
}
footer a:hover {
    color: var(--orange);
}
footer ul {
    list-style: none;
}

/* Social-Icons nebeneinander (orange): Inline-SVG, Farbe kommt aus color (currentColor).
   Link ist 44px gross, das Icon 40px. */
.footer-social {
    display: flex;
    flex-direction: row;
    gap: 15px;
}
.footer-spalten .footer-social li {
    margin-bottom: 0;
}
.footer-social a {
    display: block;
    width: 44px;
    height: 44px;
    color: var(--orange);
}
.footer-social a:hover {
    color: var(--white);
}
.footer-social svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Unterste Zeile: Copyright orange links, Rechtliches rechts mit orangen Trennern */
.footer-bottom {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
.footer-copy {
    color: var(--orange);
    font-size: .85rem;
}
.footer-recht {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 0;
}
.footer-recht li + li {
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid var(--orange);
}
.footer-recht a {
    font-size: .85rem;
}

/* Tablet und Handy: alles untereinander und zentriert */
@media (max-width: 899px) {
    footer {
        text-align: center;
        padding-bottom: 60px;
    }
    .footer-inner {
        align-items: center;
    }
    footer .logo {
        align-self: center;
    }
    .footer-reihe {
        flex-direction: column;
        align-items: center;
    }
    .footer-spalten {
        justify-content: center;
        column-gap: 40px;
    }
    .footer-social {
        justify-content: center;
    }
}
@media (max-width: 599px) {
    .footer-spalten {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: center;
    }
    .footer-recht {
        justify-content: center;
        gap: 10px 24px;
    }
    /* Trenner entfallen, wenn die Links umbrechen (sonst steht ein Strich am Zeilenanfang) */
    .footer-recht li + li {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
}


/* ============================================================
   11  EINBLENDEN BEIM SCROLLEN
   Element bekommt class="content transform transform-small".
   Der Observer in script.js setzt .aktiv, sobald es sichtbar wird.
   Namen sind fest: content / aktiv - nicht umbenennen.
============================================================ */
.content {
    opacity: 0;
    transition: opacity .8s ease, transform .8s ease;
}
.transform.transform-small  { transform: translateY(30px); }
.transform.transform-middle { transform: translateY(60px); }
.transform.transform-big    { transform: translateY(120px); }
.transform.transform-tilt   { transform: translateY(40px) rotate(-2deg); }
/* MUSS hinter den transform-Klassen stehen - gleiche Spezifitaet,
   sonst bleibt der Versatz nach dem Einblenden dauerhaft stehen. */
.content.aktiv {
    opacity: 1;
    transform: none;
}

/* Ohne JavaScript bleibt sonst die halbe Seite unsichtbar */
.no-js .content {
    opacity: 1;
    transform: none;
}


/* ============================================================
   12  SWIPER-BASIS
   Slider-spezifisches CSS und die Initialisierung kommen INLINE
   ins jeweilige Slider-Template - jeder Slider hat eigene
   breakpoints, slidesPerView, loop, autoplay.
============================================================ */
.swiper {
    width: 100%;
    overflow: hidden;
}
.swiper-pagination-bullet {
    background: var(--accent);
    opacity: .35;
}
.swiper-pagination-bullet-active {
    opacity: 1;
}
.swiper-button-next,
.swiper-button-prev {
    color: var(--accent);
}


/* ============================================================
   13  RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
    .triple-grid { grid-template-columns: repeat(2, 1fr); }
    .post-grid   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .double-grid,
    .triple-grid,
    .post-grid {
        grid-template-columns: 1fr;
    }
    /* Ohne zwei Spalten braucht auch die Umkehrung nicht mehr zu greifen */
    .double-grid.reverse > *:first-child { order: 0; }
    .section-padding { padding: 60px 5vw; }
    h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
}

@media (max-width: 400px) {
    body { font-size: 17px; }
    .section-padding { padding: 50px 5vw; }
}


/* ============================================================
   14  BARRIEREFREIHEIT
============================================================ */
/* Sichtbarer Fokus - nie wegstylen */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Sprunglink zum Inhalt - erst beim Tabben sichtbar */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
}
.skip-link:focus {
    left: 5vw;
    top: 10px;
    z-index: 300;
    background: var(--black);
    color: var(--white);
    padding: 12px 20px;
}

/* Nur fuer Screenreader */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
    .content {
        opacity: 1;
        transform: none;
    }
}