/*
Theme Name: Geinzer Bau
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,
      gerissener Button, Karte mit Bild, Bild im Betonstil,
      Vorher-Nachher-Vergleich)
   9  Sektionen (Hero, Intro, Leistungen, Team, Bild-CTA,
      Seitenkopf Unterseite, Projekt)
   10 Header
   11 Footer
   12 Einblenden beim Scrollen
   13 Swiper-Basis
   14 Responsive
   15 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: #1d1b1a;        /* Text auf hell, dunkle Flaeche */
    --white: #ffffff;        /* Text auf dunkel, helle Flaeche */
    --grey: #fbfaf8;         /* helle Flaeche fuer Sektionswechsel (weisse Ruhezonen, Karten) - NIE Text */
    --text-grey: #34302e;    /* Fliesstext auf heller Flaeche */
    --line: #e2e2e2;         /* dezente Trennlinie / Kartenrahmen */
    --accent: #b51f2a;       /* Aktionsfarbe: Buttons, aktive Zustaende - sonst nichts */
    --accent-hover: #9e1b24; /* Abdunklung des Akzents fuer :hover */
    --contrast: #b51f2a;     /* Markenrot als Flaeche: Leistungen, Etiketten, Logo-Schild */

    /* Projekt: Die Headline-Schrift ist beim Kunden noch nicht final
       (Alternativen: Oswald, Antonio, Big Shoulders Display). Deshalb
       steht sie an genau einer Stelle. */
    --font-headline: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}


/* ============================================================
   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.
============================================================ */
/* Barlow Condensed gibt es nur als Einzelschnitte (nicht variabel).
   Genutzt werden 600 (Eyebrow, Navi, Etikett), 700 (Buttons, h3, Links)
   und 800 (h1, h2). */
@font-face {
    font-family: 'Barlow Condensed';
    src: url('fonts/barlow-condensed-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Barlow Condensed';
    src: url('fonts/barlow-condensed-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Barlow Condensed';
    src: url('fonts/barlow-condensed-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
/* Fliesstext: variable Datei */
@font-face {
    font-family: 'Source Sans 3';
    src: url('fonts/source-sans-3-variable.woff2') format('woff2-variations'),
         url('fonts/source-sans-3-variable.woff2') format('woff2');
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}


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

html {
    scroll-behavior: smooth;
    background: #e9e7e4;   /* Betonton, falls die Textur noch laedt */
}

body {
    font-family: 'Source Sans 3', sans-serif;
    color: var(--black);
    line-height: 1.75;
    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;
}

/* Beton als durchgehender Seitenhintergrund. Beton-Sektionen haben
   KEINEN eigenen Hintergrund und laufen dadurch nahtlos durch.
   Als fixierte Ebene statt background-attachment: fixed - das
   funktioniert auf iOS nicht. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(rgba(246, 245, 243, .2), rgba(246, 245, 243, .2)),
        url('grafik/beton.jpg') center / cover;
    pointer-events: none;
}

/* 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;
}

/* <address> fuer Kontaktdaten - Browser setzen sonst kursiv */
address {
    font-style: normal;
}

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


/* ============================================================
   4  TYPOGRAFIE
============================================================ */
h1, h2, h3, h4 {
    font-family: var(--font-headline);
    line-height: 1.15;
    font-weight: 800;
    text-transform: uppercase;
    text-wrap: balance;
}

h1 { font-size: clamp(56px, 7.6vw, 124px); line-height: .9; letter-spacing: .005em; }
h2 { font-size: clamp(44px, 5.6vw, 88px); line-height: .92; }
h3 { font-size: 32px; line-height: 1; font-weight: 700; letter-spacing: .02em; }
h4 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: .06em; }

p { margin-bottom: 20px; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
/* In Flex-Spalten regelt gap den Abstand - sonst doppelt */
.flex > p { margin-bottom: 0; }

.text-small { font-size: .9rem; }
.text-lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; }

/* Kleines Versal-Label UEBER der Ueberschrift.
   NIE innerhalb einer Ueberschrift - sonst liest Google die H1 als
   "eyebrow + headline" in einem Satz. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-headline);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
    line-height: 1.2;
    color: var(--accent);
    margin-bottom: 12px;
}
/* Strich vor dem Label - Farbe getrennt vom Text steuerbar
   (Bild-CTA: Text weiss, Strich rot) */
.eyebrow::before {
    content: '';
    flex-shrink: 0;
    width: 40px;
    height: 3px;
    background: var(--accent);
}
.flex > .eyebrow { margin-bottom: 0; }


/* ============================================================
   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); }

.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); }


/* ============================================================
   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: clamp(40px, 7vw, 110px);
    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-1200,
.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-1200 { max-width: 1200px; }  /* Projekt: Seitencontainer laut Entwurf (1320 inkl. Rand) */
.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; }


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

/* --- 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: 16px 28px 14px;
    background-color: var(--accent);
    color: var(--white);
    font-family: var(--font-headline);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 0;
    transition: background-color .15s ease, color .15s ease;
}
/* background-color statt background - sonst loescht der Hover die
   Koernung des gerissenen Buttons */
.button:hover {
    background-color: var(--accent-hover);
}
.button.outline {
    background-color: transparent;
    border: 2px solid var(--black);
    color: var(--black);
    padding: 16px 26px 14px;
}
.button.outline:hover {
    background-color: var(--black);
    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-color: var(--white);
    color: var(--black);
}

/* --- Gerissener Button --------------------------------------
   Nur fuer Haupt-CTAs. Die Kante kommt aus einer SVG-Maske, die
   Koernung aus grain-btn.svg + Schraffur. Navi-"Kontakt" bleibt glatt.
   class="button gerissen"            gross (Hero)
   class="button gerissen mittel"     mittel (Team)
   class="button gerissen variante-b" zweite Kantenform */
.button.gerissen {
    font-size: clamp(18px, 1.6vw, 21px);
    padding: 24px 40px 22px;
    min-height: 68px;
    -webkit-mask: url('grafik/torn-edge.svg') no-repeat 0 0 / 100% 100%;
            mask: url('grafik/torn-edge.svg') no-repeat 0 0 / 100% 100%;
    background-image:
        url('grafik/grain-btn.svg'),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .09) 0 2px, rgba(0, 0, 0, .05) 2px 5px);
    background-size: 180px 180px, auto;
}
.button.gerissen.mittel {
    font-size: 18px;
    padding: 19px 32px 17px;
    min-height: 56px;
    -webkit-mask-image: url('grafik/torn-edge-md.svg');
            mask-image: url('grafik/torn-edge-md.svg');
}
.button.gerissen.variante-b {
    -webkit-mask-image: url('grafik/torn-edge-b.svg');
            mask-image: url('grafik/torn-edge-b.svg');
}

/* --- 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: 0;
    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);
}

/* --- Karte mit Bild -----------------------------------------
   Bild 4:3 randlos oben, Etikett unten links im Bild, Text darunter.
   Bild bewusst OHNE Betoneffekt - klare Kante (Kundenwunsch). */
.card.mit-bild {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    background: var(--grey);
    color: var(--black);
    box-shadow: 0 24px 40px -24px rgba(40, 4, 8, .7), 0 2px 5px rgba(40, 4, 8, .2);
}
.karte-bild {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.karte-bild img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Solange ein Foto fehlt */
.karte-bild.platzhalter {
    background: repeating-linear-gradient(135deg, #e4e1dd 0 10px, #eceae6 10px 20px);
}
.karte-etikett,
.vergleich-label {
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--contrast);
    color: var(--white);
    font-family: var(--font-headline);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 9px 16px 7px;
}
.karte-inhalt {
    flex: 1;
    gap: 14px;
    padding: 30px 30px 32px;
}
.karte-titel {
    font-size: 32px;   /* Optik wie h3 - in der Uebersicht ist es eine h2 */
    line-height: 1;
    font-weight: 700;
    letter-spacing: .02em;
}
.card.mit-bild .text-grey {
    font-size: 17px;
    line-height: 1.7;
    color: #4a4542;   /* etwas leiser als der Fliesstext */
}
.karte-link {
    margin-top: auto;
    padding-top: 8px;
    font-family: var(--font-headline);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    transition: color .15s ease;
}
a.card.mit-bild:hover .karte-link {
    color: var(--accent-hover);
}

/* Karten in einer Reihe richten Bild, Ueberschrift, Text und Link
   gemeinsam aus: Der Text beginnt immer auf derselben Hoehe, egal wie
   viele Zeilen die Ueberschrift hat. Dazu spannt jede Karte vier Zeilen
   des Rasters (Bild, Titel, Text, Link) und reicht sie per Subgrid an
   .karte-inhalt weiter. Ohne Subgrid-Support bleibt der Flex-Aufbau von
   oben bestehen. */
@supports (grid-template-rows: subgrid) {
    .triple-grid > .card.mit-bild,
    .slider-spur > .card.mit-bild {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
        gap: 0;
    }
    .triple-grid > .card.mit-bild .karte-inhalt,
    .slider-spur > .card.mit-bild .karte-inhalt {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
        row-gap: 14px;
    }
    .triple-grid > .card.mit-bild .karte-link,
    .slider-spur > .card.mit-bild .karte-link {
        align-self: end;
        margin-top: 0;
    }
}

/* --- Bild im Betonstil --------------------------------------
   Abgebroeckelte Raender, abgebrochene Ecken, feine Risse per Maske.
   Aussen der Schatten, innen die Maske - sonst schneidet die Maske
   den Schatten mit ab. Die Maske ist an 3:2 gebunden; fuer 4:3 liegen
   wear-4x3*.png in der Design-Uebergabe. */
.bild-bruch {
    filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .16)) drop-shadow(0 2px 2px rgba(0, 0, 0, .14));
}
.bild-bruch-maske {
    position: relative;
    aspect-ratio: 3 / 2;
    -webkit-mask: url('grafik/wear-3x2.png') no-repeat 0 0 / 100% 100%;
            mask: url('grafik/wear-3x2.png') no-repeat 0 0 / 100% 100%;
}
.bild-bruch-maske img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bild-bruch-maske::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('grafik/beton.jpg') center / cover;
    mix-blend-mode: multiply;
    opacity: .16;
}

/* --- Slider (Scroll-Snap) ------------------------------------
   Waagrechte Spur aus Karten, gewischt per Touch/Trackpad oder ueber
   die Pfeile (slider() in script.js). Sichtbar sind immer GANZE Karten:
   3 / 2 / 1, nie eine angeschnittene.
   Mit Subgrid-Support ist die Spur ein Raster, in dem jede Karte vier
   Zeilen spannt - dadurch beginnen Ueberschrift und Text bei allen
   Karten auf derselben Hoehe (siehe Karte mit Bild). Ohne Subgrid
   bleibt es bei Flex mit gleich breiten Karten. */
.slider {
    --karten: 3;
    --abstand: 32px;
}
.slider-spur {
    display: flex;
    gap: var(--abstand);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* unten Platz, damit der Kartenschatten nicht abgeschnitten wird */
    padding-bottom: 48px;
    margin-bottom: -28px;
}
.slider-spur::-webkit-scrollbar {
    display: none;
}
.slider-spur > .card.mit-bild {
    flex: 0 0 calc((100% - (var(--karten) - 1) * var(--abstand)) / var(--karten));
    scroll-snap-align: start;
}
@supports (grid-template-rows: subgrid) {
    .slider-spur {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(4, auto);
        grid-auto-columns: calc((100% - (var(--karten) - 1) * var(--abstand)) / var(--karten));
        column-gap: var(--abstand);
        row-gap: 0;
    }
}
/* Pfeile an den Seiten, auf halber Hoehe des Kartenbilds. Die Hoehe
   rechnet aus der Breite der Karte (4:3, davon die Haelfte): container-
   Einheit cqw = 1% der Breite von .slider. Ab 1300px stehen die Pfeile
   halb ausserhalb der Karten, darunter innen am Rand. */
.slider {
    position: relative;   /* Bezug fuer die Pfeile an den Seiten */
    container-type: inline-size;
}
.slider-seiten {
    position: absolute;
    top: 130px;   /* Rueckfall ohne cqw-Support */
    top: calc((100cqw - (var(--karten) - 1) * var(--abstand)) / var(--karten) * .375 - 28px);
    left: 8px;
    right: 8px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}
.slider-seiten[hidden] {
    display: none;
}
.slider-pfeil {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--grey);
    color: var(--contrast);
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6);
    transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.slider-pfeil:hover:not(:disabled) {
    background: var(--contrast);
    color: var(--white);
    outline: 2px solid var(--white);
}
.slider-pfeil:disabled {
    opacity: .35;
    cursor: default;
}
@media (min-width: 1300px) {
    .slider-seiten {
        left: -28px;
        right: -28px;
    }
}

/* Zaehler "01-03 / 05" und Fortschrittsbalken unter den Karten */
.slider-leiste {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 12px;
    color: var(--white);
}
.slider-leiste[hidden] {
    display: none;
}
.slider-zaehler {
    font-family: var(--font-headline);
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
}
.slider-balken {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, .35);
}
.slider-balken i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--white);
    transition: width .3s ease;
}

/* --- Vorher-Nachher-Vergleich -------------------------------
   Nachher liegt unten, Vorher darueber und wird von rechts per
   clip-path weggeschnitten. Bedient wird nur ueber das unsichtbare
   <input type="range"> darueber: Maus, Touch, Pfeiltasten.
   --wert (0 bis 1) setzt vergleich() in script.js.
   Die Position rechnet die halbe Griffbreite ein, damit die Linie
   genau unter dem Schieber des Reglers liegt - iOS bewegt den
   Regler nur, wenn man den Schieber selbst trifft. */
.vergleich {
    --wert: .5;
    --griff: 48px;
    --pos: calc(var(--griff) / 2 + (100% - var(--griff)) * var(--wert));
    position: relative;
    overflow: hidden;
    background: var(--grey);
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .45), 0 2px 5px rgba(0, 0, 0, .15);
}
.vergleich img,
.vergleich-vorher {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.vergleich img {
    object-fit: cover;
}
.vergleich-vorher {
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
/* Trennlinie */
.vergleich::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 3px;
    transform: translateX(-50%);
    background: var(--white);
    box-shadow: 0 0 6px rgba(0, 0, 0, .4);
    pointer-events: none;
}
.vergleich-label {
    z-index: 1;
}
.vergleich-label.rechts {
    left: auto;
    right: 0;
}
.vergleich-griff {
    position: absolute;
    top: 50%;
    left: var(--pos);
    z-index: 1;
    width: var(--griff);
    height: var(--griff);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--contrast);
    color: var(--white);
    font-family: var(--font-headline);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6);
    pointer-events: none;
}
/* Regler unsichtbar ueber der ganzen Flaeche. pan-y: senkrecht
   scrollt die Seite, waagrecht bewegt sich der Regler. */
.vergleich-regler {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
            appearance: none;
    background: transparent;
    touch-action: pan-y;
}
/* Schieber so breit wie der Griff und ueber die volle Hoehe */
.vergleich-regler::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    width: var(--griff);
    height: 2000px;
}
.vergleich-regler::-moz-range-thumb {
    width: var(--griff);
    height: 2000px;
    border: 0;
    background: transparent;
}

/* --- 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-weight: 700;
    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: 0;
    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: 0;
    cursor: pointer;
    transition: background .15s 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: 0;
    font-size: .95rem;
}
.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;
}
/* 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;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* 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: 0;
    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: 0;
}
.pagination .page-numbers.current {
    background: var(--accent);
    color: var(--white);
}


/* ============================================================
   9  SEKTIONEN
   Vertikale Abstaende als section.name, damit sie gegen
   .section-padding (auch im Responsive-Block) gewinnen. Die
   seitlichen Abstaende kommen weiter aus .section-padding.
============================================================ */

/* --- Hero ---------------------------------------------------
   Das Bild ragt um die Headerhoehe nach oben hinter den Header
   bis an den Seitenrand. --header-hoehe = Logo-Schild (120px Logo
   + 22px Innenabstand), mobil kleiner - siehe Responsive.
   Die Maske laesst das Bild nach unten weich in den Beton
   auslaufen (Kunde mag den Uebergang). */
section.hero {
    --header-hoehe: 142px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(max(680px, 90vh) - var(--header-hoehe));
    padding-top: 40px;
    padding-bottom: 180px;
}
.hero-bild {
    position: absolute;
    top: calc(-1 * var(--header-hoehe));
    left: 0;
    right: 0;
    height: min(calc(100% + var(--header-hoehe)), 60vw);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 64%, rgba(0, 0, 0, .5) 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 64%, rgba(0, 0, 0, .5) 84%, transparent 100%);
}
.hero-bild img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% 30%;
}
/* Aufhellung links fuer die Lesbarkeit */
.hero-bild::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(246, 245, 243, .8) 0%, rgba(246, 245, 243, .55) 36%, rgba(246, 245, 243, 0) 56%);
}
.hero-inhalt {
    position: relative;
    z-index: 2;
    gap: 28px;
}
.hero .eyebrow { font-size: 20px; }
/* Beide Buttons nebeneinander: gleiche Hoehe, gemeinsame Mitte.
   .button hat align-self: flex-start, das wuerde sie oben buendig lassen. */
.hero .button {
    align-self: center;
    min-height: 68px;
}
/* Grenzen in vw halten den Text links neben den Personen im Bild */
.hero h1 { max-width: min(9ch, 40vw); }
.hero .text-lead { max-width: min(460px, 36vw); }

/* --- Intro (Beton) ----------------------------------------- */
.intro .double-grid { align-items: start; }
section.intro {
    padding-top: 60px;
    padding-bottom: 170px;   /* Platz fuer die rote Flaeche, die 90px hereinragt */
}
.intro-text { padding-top: 8px; }

/* --- Leistungen (Rot mit Betonkante) -------------------------
   Von hinten nach vorne: rote Flaeche mit Kantenmaske und
   Texturen, Riss-Ebenen, Inhalt. Die Flaeche ragt oben und unten
   je 90px in die Nachbarsektionen. Maske und Riss-SVG gehoeren
   paarweise zusammen - nicht einzeln austauschen. */
section.leistungen {
    position: relative;
    z-index: 3;
    padding-top: 100px;
    padding-bottom: 120px;
}
.rot-flaeche {
    position: absolute;
    left: 0;
    right: 0;
    top: -90px;
    bottom: -90px;
    z-index: 0;
    pointer-events: none;
    /* feiner Bruchschatten an der Kante */
    filter: drop-shadow(0 .7px .5px rgba(30, 6, 8, .55)) drop-shadow(0 0 .4px rgba(30, 6, 8, .35));
}
.rot-maske {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--contrast);
    -webkit-mask-image: url('grafik/rot-kante-oben.svg'), linear-gradient(#000, #000), url('grafik/rot-kante-unten.svg');
            mask-image: url('grafik/rot-kante-oben.svg'), linear-gradient(#000, #000), url('grafik/rot-kante-unten.svg');
    -webkit-mask-size: 1600px 90px, 100% calc(100% - 178px), 1600px 90px;
            mask-size: 1600px 90px, 100% calc(100% - 178px), 1600px 90px;
    -webkit-mask-position: 50% 0, 0 89px, 50% 100%;
            mask-position: 50% 0, 0 89px, 50% 100%;
    -webkit-mask-repeat: repeat-x, no-repeat, repeat-x;
            mask-repeat: repeat-x, no-repeat, repeat-x;
}
.rot-textur,
.rot-koernung,
.rot-splitter {
    position: absolute;
    inset: 0;
}
.rot-textur,
.rot-koernung {
    background: url('grafik/beton.jpg') center / cover;
    mix-blend-mode: multiply;
}
.rot-textur {
    opacity: .35;
    filter: contrast(1.4);
}
/* Kraeftigere Koernung nur an den Kanten */
.rot-koernung {
    opacity: .4;
    filter: contrast(2) brightness(1.05);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 110px, transparent 260px, transparent calc(100% - 260px), #000 calc(100% - 110px), #000 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 110px, transparent 260px, transparent calc(100% - 260px), #000 calc(100% - 110px), #000 100%);
}
/* Weisse Farbabplatzer, zu den Kanten hin dichter */
.rot-splitter {
    background: url('grafik/chips.png') 0 0 / 900px 900px;
    opacity: .2;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, .55) 180px, rgba(0, 0, 0, .12) 420px, rgba(0, 0, 0, .12) calc(100% - 420px), rgba(0, 0, 0, .55) calc(100% - 180px), #000 100%);
            mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, .55) 180px, rgba(0, 0, 0, .12) 420px, rgba(0, 0, 0, .12) calc(100% - 420px), rgba(0, 0, 0, .55) calc(100% - 180px), #000 100%);
}
/* Risse setzen exakt an der Kante an */
.risse-oben,
.risse-unten {
    position: absolute;
    left: 0;
    right: 0;
    height: 620px;
    pointer-events: none;
    background-repeat: repeat-x;
    background-size: 1600px 620px;
    background-position: 50% 0;
}
.risse-oben {
    top: -290px;
    background-image: url('grafik/risse-oben.svg');
}
.risse-unten {
    bottom: -290px;
    background-image: url('grafik/risse-unten.svg');
}
.leistungen-inhalt { position: relative; }
.leistungen .section-head {
    align-items: center;
    gap: 32px;
    margin-bottom: 60px;
}
.leistungen .section-head > *:first-child { flex: 0 1 640px; }
.leistungen .section-head > *:last-child:not(:first-child) { flex: 0 0 auto; }
.leistungen .eyebrow { color: var(--white); }
.leistungen .eyebrow::before { background: var(--white); }
.leistungen .triple-grid { gap: 32px; }
/* Stempel "Mit Meisterhand": Graustufen + Kontrast machen das Rot
   des Fotos schwarz, screen blendet Schwarz aus - uebrig bleibt der
   weisse Stempel auf der roten Flaeche. */
.stempel {
    width: 270px;
    height: 230px;
    overflow: hidden;
    transform: rotate(-4deg);
    mix-blend-mode: screen;
}
.stempel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(5) brightness(.9);
}

/* --- Team (weiss) ------------------------------------------ */
section.team {
    padding-top: 120px;   /* die rote Flaeche ragt 90px herein */
    padding-bottom: 180px;
}

/* --- Bild-CTA ("Mauer") -------------------------------------
   Foto vollflaechig, dunkler Verlauf von links. Gerade Kante,
   kein Verlauf nach oben. */
section.bild-cta {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 680px;
    padding-top: 140px;
    padding-bottom: 140px;
    background: var(--grey);
}
.bild-cta-hintergrund {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.bild-cta-hintergrund img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% 50%;
    filter: saturate(.75) contrast(1.05);
}
.bild-cta-hintergrund::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(20, 18, 17, .84) 0%, rgba(20, 18, 17, .58) 45%, rgba(20, 18, 17, .12) 80%);
}
.bild-cta-inhalt {
    position: relative;
    gap: 26px;
}
.bild-cta .eyebrow { color: var(--white); }
.bild-cta h2 {
    font-size: clamp(48px, 7vw, 112px);
    line-height: .9;
    max-width: 11ch;
}
.bild-cta .text-lead {
    max-width: 520px;
    line-height: 1.65;
    opacity: .92;
}

/* --- Seitenkopf Unterseite auf Beton -------------------------
   parts/header-unterseite mit 'klasse' => 'kopf-beton' */
section.kopf-beton {
    padding-top: 60px;
    padding-bottom: 40px;
}
.kopf-beton .text-lead {
    max-width: 760px;
}

/* --- Projekt (Einzelansicht + Uebersicht) ------------------- */
section.projekt-hauptbild {
    padding-top: 0;
    padding-bottom: 0;
}
.projekt-hauptbild img {
    width: 100%;
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .45), 0 2px 5px rgba(0, 0, 0, .15);
}
section.projekt-text {
    padding-top: 60px;
    padding-bottom: 100px;
}
.projekt-text .entry-content {
    max-width: 760px;
}
section.projekt-liste {
    padding-top: 20px;
}
/* Uebersicht: Alle Karten haben dieselbe FESTE Groesse, auch ueber
   mehrere Reihen. Das Bild hat ein festes 4:3-Verhaeltnis, Ueberschrift
   und Text haben eine feste Zeilenzahl. Was nicht hineinpasst, wird mit
   "..." abgeschnitten (line-clamp) - die Karte waechst nie.
   Titel: 2 Zeilen. Text: so viele Zeilen, wie ein Kurztext von ca.
   50 Woertern (295 Zeichen) bei der jeweiligen Kartenbreite braucht,
   gemessen. Aendert sich die Textlaenge oder die Kartenbreite, nur
   --text-zeilen unten nachziehen. Einspaltig (bis 900px) sind die
   Karten breit genug, dort gilt keine feste Hoehe. */
@media (min-width: 901px) {
    .projekt-liste {
        --text-zeilen: 7;      /* 2 Spalten, Karte 390-430px */
    }
    .projekt-liste .karte-titel,
    .projekt-liste .karte-inhalt p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .projekt-liste .karte-titel {
        -webkit-line-clamp: 2;
        line-clamp: 2;
        height: 2em;                             /* 2 Zeilen bei line-height 1 */
    }
    .projekt-liste .karte-inhalt p {
        -webkit-line-clamp: var(--text-zeilen);
        line-clamp: var(--text-zeilen);
        height: calc(var(--text-zeilen) * 1.7em); /* line-height 1.7 */
    }
}
@media (min-width: 1101px) {
    .projekt-liste {
        --text-zeilen: 10;     /* 3 schmale Spalten, Karte 300-350px */
    }
}
@media (min-width: 1333px) {
    .projekt-liste {
        --text-zeilen: 8;      /* 3 volle Spalten, Karte 373px */
    }
}


/* ============================================================
   10  HEADER
   Nicht sticky: der Header liegt transparent ueber dem Hero-Bild,
   das Logo-Schild haengt oben am Bildschirmrand.
============================================================ */
header {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 0 5vw;
}
.header-inner {
    max-width: 1200px;
    margin-inline: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
}
header .logo {
    display: block;
    flex-shrink: 0;
    background: var(--contrast);
    padding: 10px 14px 12px;
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6);
}
header .logo img {
    width: 150px;
    height: 120px;
    object-fit: cover;
}

/* Grosse Navigation ab 1200px */
#navi-big {
    display: none;
    padding-top: 30px;
}
#navi-big ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(16px, 2.4vw, 36px);
    list-style: none;
}
#navi-big a {
    font-family: var(--font-headline);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: color .15s ease, background-color .15s ease;
}
#navi-big a:hover,
#navi-big .current-menu-item > a {
    color: var(--accent);
}
/* "Kontakt": glatter Button, beim Hover bleibt die Schrift weiss */
#navi-big a.button {
    padding: 10px 18px 8px;
}
#navi-big a.button:hover {
    color: var(--white);
}

/* Burger (mobil) */
.burger {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    margin-top: 24px;
    margin-right: -10px;
}
.burger span {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--black);
    transition: transform .3s ease, opacity .3s ease;
}

/* Popup-Menue (mobil) */
#navi-small {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: 340px;
    max-width: 85vw;
    background: var(--black);
    color: var(--white);
    z-index: 200;
    transform: translateX(100%);
    transition: transform .35s ease;
    padding: 100px 40px 40px;
    overflow-y: auto;
    visibility: hidden;
}
#navi-small.aktiv {
    transform: translateX(0);
    visibility: visible;
}
#navi-small ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#navi-small a {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
#navi-small a:hover {
    color: var(--accent);
}
#navi-small .close {
    position: absolute;
    top: 25px;
    right: 30px;
    font-size: 2.2rem;
    line-height: 1;
    padding: 5px;
}

/* Overlay hinter dem Popup */
.body-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease;
}
.body-overlay.aktiv {
    opacity: 1;
    visibility: visible;
}


/* ============================================================
   11  FOOTER
============================================================ */
footer {
    background: var(--black);
    color: var(--white);
    padding: 80px 5vw 40px;
}
.footer-logo {
    width: 150px;
}
/* h2 in der Gliederung, Optik einer kleinen Zwischenueberschrift */
.footer-titel {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .06em;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin-inline: auto;
}
footer a:hover {
    color: var(--accent);
}
footer ul {
    list-style: none;
}
.footer-bottom {
    max-width: 1200px;
    margin: 50px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .2);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
    font-size: .9rem;
}


/* ============================================================
   12  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;
}


/* ============================================================
   13  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);
}


/* ============================================================
   14  RESPONSIVE
============================================================ */
@media (min-width: 1200px) {
    #navi-big { display: block; }
    .burger   { display: none; }
}

@media (max-width: 1100px) {
    .slider      { --karten: 2; }
    .triple-grid { grid-template-columns: repeat(2, 1fr); }
    .post-grid   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .double-grid,
    .triple-grid,
    .footer-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; }

    /* Sektionen - Mindestabstaende zur roten Flaeche bleiben erhalten */
    section.intro       { padding-top: 40px; padding-bottom: 150px; }
    section.leistungen  { padding-top: 80px; padding-bottom: 100px; }
    section.team        { padding-top: 120px; padding-bottom: 100px; }
    section.bild-cta    { min-height: 560px; padding-top: 100px; padding-bottom: 100px; }

    /* Breite Fotos waeren mobil nur ein schmaler Streifen. Beide Bilder
       werden gleich beschnitten - der Vergleich bleibt deckungsgleich. */
    .vergleich { min-height: 260px; }
}

/* Hero mobil: Bild ueber den Text stapeln, vw-Grenzen aufheben */
@media (max-width: 700px) {
    .slider {
        --karten: 1;
        --abstand: 20px;
    }

    header .logo { padding: 8px 10px 10px; }
    header .logo img { width: 110px; height: 88px; }

    .hero-bild { height: 105vw; }
    .hero-bild::after { display: none; }
    section.hero {
        --header-hoehe: 106px;   /* Logo 88px + 18px Innenabstand */
        min-height: 0;
        padding-top: calc(105vw - var(--header-hoehe) - 44px);   /* Text beginnt im auslaufenden Bild */
        padding-bottom: 100px;
    }
    .hero h1,
    .hero .text-lead { max-width: none; }

    /* Lange deutsche Woerter in grossen Versalien */
    h1, h2 { hyphens: auto; }
}

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


/* ============================================================
   15  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: 0;
}
/* Auf der roten Flaeche waere ein roter Rahmen unsichtbar */
.leistungen a:focus-visible {
    outline-color: var(--white);
}
/* Auf der roten Flaeche waere der rote Rahmen der Karten-Links unsichtbar,
   ebenso der der Spur beim Tabben */
.slider-spur:focus-visible {
    outline-color: var(--white);
}
/* Der Regler selbst ist unsichtbar - der Fokus zeigt sich am Griff */
.vergleich-regler:focus-visible + .vergleich-griff {
    outline: 3px solid var(--white);
    outline-offset: 3px;
}
/* Die Maske des gerissenen Buttons schneidet den Fokusrahmen weg -
   beim Fokus deshalb ohne Maske */
.button.gerissen:focus-visible {
    -webkit-mask: none;
            mask: none;
}

/* 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;
    }
}