@charset "UTF-8";
/* ===========================================================================
   MALER TEAM GRAF — DESIGN-SYSTEM
   ---------------------------------------------------------------------------
   Aufbau:
     1  Design-Tokens        alle Farben, Größen, Abstände an einer Stelle
     2  Grundlagen           Reset, Typografie, Fokus
     3  Layout               Container
     4  Hilfsklassen
     5  Buttons
     6  Markenband + Kopfbereich
     7  Mobiles Menü
     8  Hero
     9  Aktionsleiste (klein)
    10  Entwurfshinweis
    11  Abschnitte + Seitenkopf
    12  Karten und Listen (Leistungen, Verlass, Schritte)
    13  Preise (Teaser, Faktoren, Einschätzen)
    14  Bilder (Reihe, Panorama, Inhalt+Bild, Hero-Foto, Bildband)
    15  FAQ
    16  Aufruf-Band (CTA)
    17  Fußbereich
    18  Kontaktseite
    19  Formulare
    20  Bestätigung + Fehlerseite + Rechtstexte
    21  Leistungs-Übersicht + Ablauf-Detail + Stufen
    22  Einwilligungs-Banner
    23  Reduzierte Bewegung
    24  Intro-Animation (nur Erstbesuch)
    25  Anheben beim Überfahren
    26  Einblenden beim Scrollen

   Grundregel für Farbe: rund 90 % ruhige Flächen, höchstens eine Akzentfarbe
   je Abschnitt. Keine Farbverläufe, keine schwebenden Karten.

   Schatten gibt es an genau zwei Stellen: als feine Kante am fixierten
   Kopfbereich — und für die Dauer des Überfahrens unter dem Element, das
   sich dabei anhebt (Abschnitt 25). Im Ruhezustand liegt weiterhin alles
   flach auf der Seite; nichts schwebt dauerhaft.
   =========================================================================== */


/* == 1  DESIGN-TOKENS ===================================================== */

:root {

  /* --- Markenfarben (aus dem Logo abgeleitet) ---------------------------
     Seit 07.08.2026 abends die gedeckten Töne des neuen Kunden-Logos
     (logo-graf.png, je Quadrant gemittelt) — vorher die leuchtenden Werte
     der ersten Logoschätzung. Ändert sich das Logo erneut, werden
     ausschließlich diese vier Werte korrigiert — alles andere zieht
     automatisch nach.

     Jede Farbe steht genau einmal, und zwar als Rot-Grün-Blau-Tripel:
         --logo-rot-rgb  →  --logo-rot  (deckend, für Flächen und Linien)
                         →  rgba(var(--logo-rot-rgb), 0.35)  (halbtransparent)
     Diese Schreibweise stellen alle Browser gleich dar; sie ist der Grund,
     weshalb die Navigationsmarkierung sauber halbtransparent sein kann. */
  --logo-rot-rgb:    186,  68,  58;
  --logo-gruen-rgb:   79, 133,  83;
  --logo-gelb-rgb:   222, 163,  75;
  --logo-blau-rgb:    33,  56, 100;

  --logo-rot:      rgb(var(--logo-rot-rgb));     /* #BA443A */
  --logo-gruen:    rgb(var(--logo-gruen-rgb));   /* #4F8553 */
  --logo-gelb:     rgb(var(--logo-gelb-rgb));    /* #DEA34B — ein Ocker */
  --logo-blau:     rgb(var(--logo-blau-rgb));    /* #213864 — Dunkelblau */

  /* Malfarben des Pinsels im Aufruf-Band (Abschnitt 16). Seit das Band weiß
     ist, geht das Logo-Gelb auf der hellen Fläche unter (Ocker: 2,2:1) —
     allein für den Pinselstrich wird es vertieft (3,2:1). Rot, Grün und Blau
     bleiben unverändert die Logofarben; wird das Band je wieder dunkel,
     genügt es, hier wieder var(--logo-gelb) einzutragen. */
  --malfarbe-1: var(--logo-rot);
  --malfarbe-2: var(--logo-gruen);
  --malfarbe-3: #B7873E;
  --malfarbe-4: var(--logo-blau);

  /* Aufhellungen für die Hero-Farbkarte (Erstauftrag) — jeweils die
     Markenfarbe um 38 % Richtung Weiß gemischt. */
  --logo-rot-t:    #D48B85;
  --logo-gruen-t:  #92B394;
  --logo-gelb-t:   #EBC68F;
  --logo-blau-t:   #75849F;

  /* Das „f" von „Graf" in der Hero-H1: Das Logo-Dunkelblau verschwindet
     auf dem dunklen Verlauf vollständig (rund 1:1). Allein dafür wird es
     bei gleichem Farbton aufgehellt (3,2:1 auf dem dunkelsten Bereich) —
     dasselbe Muster wie --malfarbe-3, nur in die andere Richtung. Die
     übrigen drei Buchstaben tragen die echten Markenfarben. */
  --hero-graf-blau: #6187D1;

  /* --- Funktionsfarben --------------------------------------------------
     Das neue Logo-Blau ist ein Dunkelblau und trägt weiße Schrift mit
     11,6:1 von sich aus — die frühere Abdunkelung entfällt, die Knöpfe
     stehen direkt in der Markenfarbe. Überfahren und Drücken gehen von
     dort aus weiter ins Dunkle. */
  --cta:           var(--logo-blau);
  --cta-hover:     #1C2F54;
  --cta-active:    #182848;

  /* Anruf-Button im Kopfbereich: eigenes, dunkleres Grün aus der Familie des
     Logo-Grüns. Das Logo-Grün selbst (#4F8553) erreicht mit weißer Schrift
     nur 4,4:1 und bleibt als beschriftete Fläche knapp unter der Anforderung.
     Gemessen (weiß auf Grün): 4,9:1 · 6,4:1 · 7,4:1. */
  --call-gruen:        #4A7C4E;
  --call-gruen-hover:  #3E6841;
  --call-gruen-active: #385E3B;

  /* --- Neutrale Basis ----------------------------------------------------
     --paper steht zusätzlich als Rot-Grün-Blau-Tripel, damit die Kopfzeile
     dieselbe Farbe halbtransparent verwenden kann (Abschnitt 6). Beim
     Ändern nur --paper-rgb anfassen, --paper zieht nach. */
  --paper-rgb:     251, 250, 248;
  --paper:         rgb(var(--paper-rgb));   /* Seitenhintergrund, warmes Weiß */

  /* Deckkraft der Kopfzeile. 1 = deckend wie früher, kleiner = mehr Bild
     darunter sichtbar. Unter 0,72 wird die Schrift auf dunklen Motiven
     unruhig — dann lieber die Weichzeichnung erhöhen. Seit 07.08.2026
     steht der Wert genau an dieser Grenze; ausgeglichen wird das durch
     die von 14 auf 24 px erhöhte Weichzeichnung (Abschnitt 6). */
  --topbar-deckkraft: 0.72;
  --paper-2:       #F3F0EA;   /* abgesetzte Flächen, Passepartout */
  --paper-3:       #EAE5DC;
  --white:         #FFFFFF;

  --ink:           #1A1A18;   /* Fließtext — 16,7:1 auf --paper */
  --ink-2:         #5A554C;   /* Sekundärtext — 7,1:1 auf --paper */
  --ink-3:         #8A8378;   /* nur für Nichttext-Elemente */

  --rule:          #E2DDD4;   /* feine Linien */
  --rule-strong:   #CBC3B6;   /* Rahmen von Flächen */

  /* --- Typografie -------------------------------------------------------
     Systemschriften: kein externer Request, kein Datenschutzproblem, keine
     Ladeverzögerung. Wird später eine eigene Hausschrift selbst gehostet,
     genügt der Tausch dieser einen Zeile. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
               "Inter", Arial, sans-serif;

  /* Überschriften-Stufen. Am 07.08.2026 um rund ein Achtel angehoben —
     die Seite trägt wenig Text, die Überschriften dürfen die Gliederung
     deutlicher führen. Drei Stufen genügen:

       --fs-h1  Seitentitel (Hero und Seitenkopf haben eigene, engere
                Werte, weil sie neben Bild bzw. Fließtext stehen)
       --fs-h2  Abschnittstitel — auch Aufruf-Band, Bildband, Fehlerseite
       --fs-h3  Titel innerhalb eines Abschnitts (Karten, Blöcke)

     Zwischen den Stufen liegen die Titel einzelner Bauteile (Abschnitte
     12, 13, 18, 19, 21); sie sind bewusst nach Fläche gestaffelt und
     stehen deshalb weiter bei ihrem Bauteil. Wer die Gliederung insgesamt
     ruhiger will, ändert diese drei Werte. */
  --fs-h1:      clamp(2.3rem, 1.35rem + 3.6vw, 3.9rem);
  --fs-h2:      clamp(1.7rem, 1.25rem + 2vw, 2.5rem);
  --fs-h3:      1.22rem;
  --fs-lead:    clamp(1.06rem, 1rem + 0.35vw, 1.22rem);
  --fs-body:    1.0625rem;   /* 17 px */
  --fs-small:   0.945rem;
  --fs-overline: 0.75rem;

  /* --- Abstände (Vierer-Raster) ----------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;

  /* --- Layout ------------------------------------------------------------ */
  --wrap:      1220px;
  --gutter:    clamp(1.15rem, 4vw, 2.5rem);
  --band-h:    3px;
  --header-h:  60px;
  /* Luft zwischen Fensterrand und der schwebenden Glasleiste (Abschnitt 6).
     Steckt in --topbar-h, damit das mobile Menü (Abschnitt 7) automatisch
     mitrechnet — es ist seit 07.08.2026 der einzige Ort, der die Gesamthöhe
     der Leiste braucht. */
  --topbar-gap: clamp(8px, 1.4vw, 14px);
  /* Gesamthöhe der Leiste samt Luft: Der Farbrand aus --band-h läuft seit
     07.08.2026 ringsum, zählt also oben UND unten mit (Abschnitt 6). */
  --topbar-h:  calc(var(--topbar-gap) + var(--header-h) + 2 * var(--band-h));
  --callbar-h: 74px;

  /* --- Form und Bewegung -------------------------------------------------
     Weich gerundete Ecken — zeitgemäß, ohne verspielt zu werden. Vier
     Stufen, mehr braucht die Seite nicht; wer die Rundung insgesamt
     kräftiger oder zurückhaltender will, ändert ausschließlich diese
     Werte, alles andere zieht automatisch nach:

       --r-1   Flächen und Bedienfelder (Karten, Eingaben, Ziffernfelder)
       --r-2   Knöpfe und kleine Bedienelemente
       --r-3   große Bildflächen und breite Rahmen
       --r-voll  Etiketten, die als Pille laufen sollen                   */
  --r-1: 10px;
  --r-2: 9px;
  --r-3: 18px;
  --r-voll: 999px;
  --dur: 0.2s;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* --- Anheben beim Überfahren ------------------------------------------
     Bedienbare Flächen heben sich beim Überfahren ein paar Pixel an und
     senken sich beim Drücken unter ihre Ruhelage. Alle Stellschrauben
     stehen hier; wo die Bewegung sitzt und warum, steht in Abschnitt 25.
     Wer den Effekt insgesamt kräftiger oder ruhiger will, ändert
     ausschließlich diese Werte:

       --heben        Knöpfe und kleine Bedienelemente
       --heben-karte  ganze Karten — größere Fläche, etwas mehr Weg
       --druck        gedrückter Zustand, unter die Ruhelage

     Die Schatten sind bewusst weich und schwach: Sie sollen die angehobene
     Kante lesbar machen, nicht die Fläche zum Schweben bringen. */
  --heben:       2px;
  --heben-karte: 3px;
  --druck:       1px;
  --heben-schatten:       0 4px 12px rgba(26, 26, 24, 0.10);
  --heben-schatten-karte: 0 8px 20px rgba(26, 26, 24, 0.09);
  /* Kürzer als --dur: Die Bewegung soll dem Zeiger folgen, nicht nachlaufen. */
  --heben-dur:   150ms;

  /* --- Einblenden beim Scrollen -----------------------------------------
     Inhaltsblöcke unterhalb des Sichtfensters kommen beim Heranscrollen
     mit einer kleinen Aufwärtsbewegung ins Bild (Abschnitt 26; die
     Bedienlogik dazu steht in main.js, Abschnitt 7). Zwei Stellschrauben:

       --anim-weg   Weg der Aufwärtsbewegung — klein halten: Der Inhalt
                    soll ankommen, nicht auffahren
       --anim-dur   Dauer des Einblendens

     0px bzw. 0ms schalten den Effekt ab, ohne eine Regel zu löschen. */
  --anim-weg: 18px;
  --anim-dur: 480ms;

  /* --- Farbmarkierung der Navigation ------------------------------------
     Das kleine Farbfeld unter jedem der vier Hauptpunkte. Alle Stellschrauben
     stehen hier; die Zuordnung Punkt → Farbe steht in config.php. */
  --navmark-h:       6px;    /* Ruhe- und Überfahr-Zustand */
  --navmark-h-aktiv: 9px;    /* aktive Seite: höher — auch ohne Farbe erkennbar */
  --navmark-abstand: 6px;    /* Luft zwischen Schrift und Farbfeld */
  --navmark-hover:   0.35;   /* Deckkraft beim Überfahren und bei Tastaturfokus */
  --navmark-aktiv:   1;      /* Deckkraft der aktiven Seite */
  --navmark-mobil:   0.55;   /* Ruhezustand im geöffneten Menü — dort gibt es
                                kein Überfahren, die Farbe muss die Zuordnung
                                allein tragen und trotzdem ruhig bleiben */
  --navmark-dur:     165ms;

  /* Textfarben der vier Hauptbereiche: dunklere, lesbare Verwandte der
     Logofarben — nur für Schrift bei Überfahren, Fokus und aktiver Seite.
     Die Markierung darunter behält die Original-Logofarben. Gemessen auf
     --paper (Kopfzeile) und --paper-2 (aktive Kachel im Menü):
     Rot 7,2·6,6 : 1 · Grün 6,3·5,7 : 1 · Dunkelgold 7,3·6,7 : 1 ·
     Blau 11,1·10,2 : 1. Grün bleibt bewusst unter 7:1 — die dafür nötige
     Stufe (#39613D) wäre neben dem gedeckten Logo-Grün fast schwarz. Das
     Dunkelblau des Logos ist von sich aus dunkel genug und steht deshalb
     unverändert auch als Schriftfarbe. */
  --nav-rot-text:   #92362E;
  --nav-gruen-text: #3D6741;
  --nav-gelb-text:  #6B4E24;
  --nav-blau-text:  var(--logo-blau);
}

@media (min-width: 1024px) {
  :root { --header-h: 72px; }
}


/* == 2  GRUNDLAGEN ======================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Luft über einem angesprungenen Ankerpunkt. Bis 07.08.2026 musste hier die
     Höhe der angehefteten Kopfleiste stecken, sonst wäre das Sprungziel
     darunter verschwunden. Seit die Leiste mitscrollt (Abschnitt 6), deckt
     nichts mehr die Oberkante ab — es bleibt nur der Sichtabstand. */
  scroll-padding-top: 12px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

/* Fotos tragen im Markup feste width- und height-Werte, damit der Browser den
   Platz reserviert und beim Laden nichts springt. Damit ein so verkleinertes
   Bild nicht in der ursprünglichen Höhe stehen bleibt und verzerrt wirkt,
   muss die Höhe mitlaufen. Nur für img — die SVGs sind einzeln bemaßt. */
img { height: auto; }
picture { display: block; }
ul { list-style: none; margin: 0; padding: 0; }

/* Geordnete Listen, die als Gestaltungskomponenten dienen: die Zählung
   übernimmt die Komponente selbst (farbige Nummernfelder), nicht der Browser. */
ol.schritte, ol.faktoren {
  list-style: none;
  margin: 0;
  padding: 0;
}
p  { margin: 0 0 1rem; }
a  { color: var(--cta); }

h1, h2, h3 {
  margin: 0 0 0.5em;
  line-height: 1.1;
  font-weight: 750;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* Grundgrößen der drei Stufen. Vorher hatten nur die Überschriften MIT
   Klasse eine Größe; Überschriften ohne Klasse (Gewerbe, Über uns, die
   Rechtstexte) fielen auf die Browservorgabe von 1,5 em zurück und waren
   dadurch kleiner als jeder Abschnittstitel daneben. Seit 07.08.2026
   führen alle Überschriften dieselbe Stufenleiter; die Bauteile darunter
   setzen ihre eigenen Größen weiterhin selbst. */
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* Ziffern laufen in gleicher Breite — Telefonnummern und Preise stehen
   dadurch sauber untereinander. */
.phonelink__number,
.contactline__value,
.btn__meta { font-variant-numeric: tabular-nums; }

.icon { fill: currentColor; flex: none; }
.menu-icon-stroke { fill: none; }

:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
  border-radius: var(--r-1);
}


/* == 3  LAYOUT ============================================================ */

.container {
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin-inline: auto;
}


/* == 4  HILFSKLASSEN ====================================================== */

.overline {
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}

/* Miniatur des Logo-Vierfelds */
.markdots {
  display: inline-grid;
  grid-template-columns: repeat(2, 5px);
  grid-template-rows: repeat(2, 5px);
  gap: 1px;
  flex: none;
}
.markdots i:nth-child(1) { background: var(--logo-rot); }
.markdots i:nth-child(2) { background: var(--logo-gruen); }
.markdots i:nth-child(3) { background: var(--logo-gelb); }
.markdots i:nth-child(4) { background: var(--logo-blau); }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 200;
  background: var(--ink);
  color: var(--white);
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-2);
  font-weight: 650;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-3); }


/* == 5  BUTTONS =========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.3rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-2);
  font: inherit;
  font-weight: 650;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  /* Achtung: Abschnitt 25 ersetzt diese Zeile, um Anheben und Drücken
     mitlaufen zu lassen — eine transition-Zeile kann man nicht ergänzen,
     nur ersetzen. Eine hier neu hinzugenommene Farbe dort nachtragen. */
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.btn--primary { background: var(--cta); color: var(--white); }
.btn--primary:hover  { background: var(--cta-hover); }
.btn--primary:active { background: var(--cta-active); }
.btn--primary:focus-visible { outline-color: var(--ink); }

.btn--outline {
  background: var(--white);
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--outline:hover { border-color: var(--ink); }
.btn--outline .btn__icon { color: var(--logo-rot); }

.btn--lg { padding: 1.02rem 1.55rem; font-size: 1.02rem; }
.btn--block { display: flex; width: 100%; }

.btn__meta {
  font-weight: 500;
  color: var(--ink-2);
}
.btn__meta::before { content: "·"; margin-right: 0.45rem; color: var(--ink-3); }
.btn--outline:hover .btn__meta { color: var(--ink); }

/* Kurz-/Langtext des Kopf-Buttons je nach Platz */
.btn__short { display: inline; }
.btn__full  { display: none; }
@media (min-width: 560px) {
  .btn__short { display: none; }
  .btn__full  { display: inline; }
}


/* == 6  MARKENBAND + KOPFBEREICH ========================================== */

/* Seit 07.08.2026 schwebt der Kopf als gerundete Glasleiste mit etwas Luft
   zum Fensterrand, statt als volle Kante daran zu kleben. .topbar hält nur
   Position und Abstand — die Luft steckt über --topbar-gap bereits in
   --topbar-h, das mobile Menü rechnet sie automatisch mit.
   Rundung, Rahmen und Glaswirkung trägt .topbar__glas (header.php).

   Seit 07.08.2026 abends läuft die Leiste beim Scrollen mit nach oben aus dem
   Bild, statt oben angeheftet stehen zu bleiben (vorher: position: sticky).
   `relative` steht hier nur, damit z-index weiter greift — die Leiste bleibt
   damit über dem mobilen Menü (z-index 60), solange sie im Bild ist. */
.topbar {
  position: relative;
  z-index: 70;
  padding: var(--topbar-gap) var(--topbar-gap) 0;
}

.topbar__glas {
  position: relative;
  border-radius: var(--r-3);
  overflow: hidden;   /* schneidet den Farbrand auf die Rundung zu */
  border: 1px solid var(--rule);
  box-shadow: 0 2px 12px rgba(26, 26, 24, 0.05);
}

/* Die Glasfläche der Kopfzeile. Sie trägt seit 07.08.2026 die Glaswirkung
   (vorher .topbar__glas) — der Farbrand liegt jetzt als eigener Ring darüber
   und darf nicht hinter einer durchscheinenden Fläche liegen, sonst färbt er
   die ganze Leiste ein statt sie nur zu umranden.

   Leicht durchscheinend: die Leiste bleibt eine Glasfläche und keine deckende
   Platte. Die Weichzeichnung dahinter ist kein Effekt um seiner selbst
   willen — sie hält Logo, Menüpunkte und Telefonnummer über jedem Untergrund
   lesbar (Kontrast über dem dunkelsten denkbaren Untergrund: rund 11:1). Der
   zarte weiße Verlauf oben ist der Lichtschein auf dem Glas.

   Nur dort, wo der Browser hinter der Fläche weichzeichnen kann. Fehlt das,
   bleibt die Leiste wie bisher deckend — kein halbdurchsichtiger Kasten
   mit unlesbarer Schrift. Am Farbrand, an den Abständen und am Verhalten
   beim Scrollen ändert sich nichts. */
.site-header {
  position: relative;
  z-index: 1;
  background: var(--paper);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    background:
      linear-gradient(rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 55%),
      rgba(var(--paper-rgb), var(--topbar-deckkraft));
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
  }
}

/* Farbrand RINGSUM (Auftrag 07.08.2026 nachts) --------------------------
   Das Markenband lief bisher nur als Streifen über die Oberkante; jetzt
   umrandet es die ganze Leiste. Es muss dafür ein echter Ring sein, kein
   Farbfeld hinter der Kopfzeile: Die Glasfläche ist durchscheinend, ein Feld
   dahinter schiene durch und legte einen Rot-Grün-Gelb-Blau-Schleier über die
   ganze Leiste (beim Bauen ausprobiert, sah aus wie ein Fehler).

   Der Ring entsteht mit derselben Farbfolge wie bisher — links rot, dann
   grün, gelb, rechts blau, oben und unten laufen alle vier durch — aus einem
   Verlauf mit harten Kanten, dessen Mitte eine Maske ausschneidet. Die vier
   <span>-Felder aus header.php werden dabei ausgeblendet; sie bleiben im
   Markup, weil sie im Rückfall unten (und im Fußbereich und im Aufruf-Band)
   weiterhin das Band bilden.

   Rückfall ohne Maskenunterstützung: alles bleibt, wie es war — Streifen
   oben, zarter grauer Rahmen. Ohne die @supports-Klammer würde dort statt
   des Rings eine volle Farbfläche über der Kopfzeile liegen. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .topbar__glas {
    padding: var(--band-h);   /* Platz, in dem der Ring steht */
    border: 0;                /* der Farbrand IST jetzt der Rahmen */
  }

  /* Innenrundung = Außenrundung minus Randbreite: nur so laufen die Ecken
     gleichmäßig mit und der Rand bleibt überall gleich dick. */
  .site-header { border-radius: calc(var(--r-3) - var(--band-h)); }

  .topbar__glas .brandbar {
    position: absolute;
    inset: 0;
    z-index: 2;               /* über der Glasfläche */
    display: block;
    height: auto;
    padding: var(--band-h);
    border-radius: inherit;
    background: linear-gradient(90deg,
      var(--logo-rot)   0    25%,
      var(--logo-gruen) 25%  50%,
      var(--logo-gelb)  50%  75%,
      var(--logo-blau)  75%  100%);
    pointer-events: none;
    /* Zwei Masken übereinander, voneinander abgezogen: die eine deckt die
       ganze Fläche, die andere nur die Innenfläche — übrig bleibt der Rand. */
    -webkit-mask: linear-gradient(#000 0 0) content-box,
                  linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box,
                  linear-gradient(#000 0 0);
            mask-composite: exclude;
  }
  .topbar__glas .brandbar__field { display: none; }
}

.brandbar { display: grid; grid-template-columns: repeat(4, 1fr); height: var(--band-h); }
.brandbar__field--rot   { background: var(--logo-rot); }
.brandbar__field--gruen { background: var(--logo-gruen); }
.brandbar__field--gelb  { background: var(--logo-gelb); }
.brandbar__field--blau  { background: var(--logo-blau); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.75rem);
  min-height: var(--header-h);
  /* Die Glasleiste ist um --topbar-gap eingerückt, der Farbrand nimmt
     innen nochmals --band-h; die Breite rechnet beides wieder heraus, damit
     Logo und Menüpunkte bündig mit dem Seiteninhalt stehen — als stünde der
     Kopf weiter über die volle Breite. */
  width: min(var(--wrap),
             100% - 2 * (var(--gutter) - var(--topbar-gap) - var(--band-h)));
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-right: auto;
  text-decoration: none;
  color: inherit;
}
/* Rundung nur hier in der Kopfzeile — im Fußbereich und im Logo-Intro
   behält das Logo bewusst seine geraden Ecken. */
.brand__logo { height: 34px; width: auto; border-radius: 7px; }
.brand__slogan {
  display: none;
  padding-left: 0.9rem;
  border-left: 1px solid var(--rule);
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(1.15rem, 2vw, 2.1rem); }
.nav__link {
  --nav-pad-y: 0.4rem;
  /* Zeilenabstand lässt unter den Unterlängen (g, p) noch Luft stehen. Sie
     wird herausgerechnet, damit --navmark-abstand wirklich der sichtbare
     Abstand zur Schrift ist und nicht ein Abstand zu einem unsichtbaren
     Kasten. Wert = (Zeilenhöhe − Schriftkasten) / 2 bei --fs-small. */
  --nav-durchschuss: 3.5px;
  position: relative;
  display: block;
  padding: var(--nav-pad-y) 0;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  /* Gleiche Dauer wie die Markierung darunter — Schrift und Farbfeld
     wechseln synchron, nicht nacheinander. */
  transition: color var(--navmark-dur) var(--ease);
}

/* Das Farbfeld unter der Schrift.
   Es liegt außerhalb des Textflusses und hat oben wie unten einen festen
   Platz: Überfahren, Fokus und aktive Seite ändern ausschließlich Farbe und
   Höhe des Feldes — nie die Position der Schrift, nie die Höhe des Kopfes. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - var(--nav-pad-y) - var(--nav-durchschuss) + var(--navmark-abstand));
  height: var(--navmark-h);
  border-radius: 1px;
  background-color: rgba(var(--nav-akzent, var(--logo-rot-rgb)), 0);
  transition: background-color var(--navmark-dur) var(--ease),
              height var(--navmark-dur) var(--ease);
}

/* Überfahren und Tastaturfokus zeigen denselben zurückhaltenden Zustand.
   Der sichtbare Fokusrahmen (:focus-visible, Abschnitt 2) bleibt zusätzlich
   bestehen — die Farbe allein trägt die Information nicht. */
.nav__link:not(.nav__link--aktiv):hover::after,
.nav__link:not(.nav__link--aktiv):focus-visible::after {
  background-color: rgba(var(--nav-akzent, var(--logo-rot-rgb)), var(--navmark-hover));
}

/* Zusätzlich zur Markierung färbt sich die Schrift selbst — in der dunklen,
   lesbaren Textvariante (--nav-*-text), nicht im Logoton. Die Schrift bleibt
   voll deckend; Stärke, Laufweite und Position ändern sich nicht, es färbt
   sich ausschließlich die Farbe. Der Fokusrahmen (:focus-visible,
   Abschnitt 2) bleibt unabhängig davon bestehen. */
.nav__link:hover,
.nav__link:focus-visible {
  color: var(--nav-text, var(--ink));
}

/* Farbzuordnung der vier Hauptbereiche — die einzige Stelle, an der ein
   Menüpunkt seine Farben erhält. Die Klassen vergibt config.php über
   'akzent' => 'rot' | 'gruen' | 'gelb' | 'blau'. --nav-akzent trägt die
   Logofarbe der Markierung, --nav-text die dunklere Schriftfarbe. */
.nav-rot   { --nav-akzent: var(--logo-rot-rgb);   --nav-text: var(--nav-rot-text); }
.nav-gruen { --nav-akzent: var(--logo-gruen-rgb); --nav-text: var(--nav-gruen-text); }
.nav-gelb  { --nav-akzent: var(--logo-gelb-rgb);  --nav-text: var(--nav-gelb-text); }
.nav-blau  { --nav-akzent: var(--logo-blau-rgb);  --nav-text: var(--nav-blau-text); }

/* Gelb ist der hellste der vier Töne und bräuchte auf dem warmen Weiß der
   Kopfzeile sonst zu viel Vorstellungskraft — es bekommt in den nicht voll
   deckenden Zuständen jeweils das obere Ende des Bereichs. Der deckende
   Zustand der aktiven Seite bleibt für alle vier Farben gleich. */
.nav-gelb { --navmark-hover: 0.45; --navmark-mobil: 0.72; }
.nav-gruen { --navmark-mobil: 0.62; }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.2vw, 0.9rem);
}

/* Anruf-Button: grüne Fläche mit weißer Schrift und weißem Hörer — freundlich
   und ruhig, klar unterscheidbar vom blauen „Angebot anfordern" daneben.
   Maße, Position und Innenabstände sind unverändert; nur Fläche und Farben
   sind neu, damit nichts im Kopf verrutscht. */
.phonelink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.35rem;
  background: var(--call-gruen);
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  border-radius: var(--r-2);
  /* Wird in Abschnitt 25 um Anheben und Drücken erweitert (dort ersetzt). */
  transition: background-color var(--dur) var(--ease);
}
.phonelink__icon { color: currentColor; }
.phonelink__number { display: none; letter-spacing: -0.01em; }
.phonelink:visited { color: var(--white); }
.phonelink:hover  { background: var(--call-gruen-hover); color: var(--white); }
.phonelink:active { background: var(--call-gruen-active); }
/* Wie bei den gefüllten Buttons: der blaue Fokusrahmen ginge auf der
   farbigen Fläche unter — dunkle Tinte bleibt überall sichtbar. */
.phonelink:focus-visible { outline-color: var(--ink); }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 0.5rem;
  background: none;
  border: 0;
  border-radius: var(--r-2);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 650;
  color: var(--ink);
  cursor: pointer;
}
.menu-toggle__icon--close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open  { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close { display: inline-flex; }
.menu-toggle__label { display: none; }

@media (min-width: 420px) { .menu-toggle__label { display: inline; } }
@media (min-width: 600px) { .phonelink__number  { display: inline; } }

@media (min-width: 1024px) {
  .brand__logo  { height: 40px; border-radius: 8px; }
  .nav          { display: block; }
  .menu-toggle  { display: none; }
  .phonelink    { padding: 0 0.5rem; }
}
@media (min-width: 1180px) { .brand__slogan { display: inline; } }


/* == 7  MOBILES MENÜ ====================================================== */

.mobile-menu {
  position: fixed;
  /* Volle Fläche, Inhalt erst unter der Leiste: so liegt auch neben und
     über der schwebenden Glasleiste die ruhige Menüfläche — nicht der
     Seiteninhalt, der sonst in der Lücke am Rand durchschiene. */
  inset: 0;
  padding-top: var(--topbar-h);
  z-index: 60;
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s;
}
@media (min-width: 1024px) { .mobile-menu { display: none; } }

.mobile-menu__inner { padding: var(--s-5) 0 var(--s-9); }

/* --- Die vier Hauptbereiche als 2×2-Feld --------------------------------
   Gleiche Anordnung und gleiche Farbfolge wie das Vierfeld im Logo:
       Leistungen (Rot)   Preise  (Grün)
       Über uns   (Gelb)  Kontakt (Blau)
   Die Kacheln sind Berührungsziele von mindestens 88 px Höhe — deutlich
   über den geforderten 44 px — und tragen dieselbe Farbmarkierung wie die
   Punkte in der Kopfzeile. */
.mobile-menu__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  border: 1px solid var(--rule);
  background: var(--rule);   /* wird durch die 2 px Fugen zur feinen Linie */
}
.mobile-menu__kachel {
  display: flex;
  /* Auf dem Smartphone 88 px; auf breiteren Geräten wächst die Kachel mit,
     damit aus dem Vierfeld keine gestreckten Bänder werden. */
  min-height: clamp(88px, 15vw, 116px);
  height: 100%;
  padding: 0.85rem 0.9rem 0.95rem;
  align-items: flex-end;
  background: var(--paper);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--navmark-dur) var(--ease),
              color var(--navmark-dur) var(--ease);
}
/* Auf Berührbildschirmen gibt es kein verlässliches Überfahren — die Kacheln
   bekommen deshalb bewusst keinen :hover-Zustand, der nach dem Antippen
   hängen bliebe. Farbige Schrift erhalten nur Tastaturfokus und die aktive
   Seite; der Ruhezustand zeigt wie bisher die farbige Markierung. */
.mobile-menu__kachel:focus-visible { color: var(--nav-text, var(--ink)); }
.mobile-menu__kachel-text {
  display: inline-block;
  line-height: 1.15;
}
.mobile-menu__kachel-text::after {
  content: "";
  display: block;
  margin-top: var(--navmark-abstand);
  height: var(--navmark-h);
  border-radius: 1px;
  background-color: rgba(var(--nav-akzent, var(--logo-rot-rgb)), var(--navmark-mobil));
  transition: background-color var(--navmark-dur) var(--ease);
}
/* Aktive Seite: volle Deckkraft, Schrift in der Bereichsfarbe, dazu eine
   ruhige Tönung der Kachel — die Position im Feld und der Flächenwechsel
   tragen die Information mit. Schriftkontrast auf --paper-2: 5,7:1 bis
   6,7:1, je nach Farbe. */
.mobile-menu__kachel[aria-current="page"] {
  background: var(--paper-2);
  color: var(--nav-text, var(--ink));
}
.mobile-menu__kachel[aria-current="page"] .mobile-menu__kachel-text::after {
  background-color: rgba(var(--nav-akzent, var(--logo-rot-rgb)), var(--navmark-aktiv));
}

.mobile-menu__list { margin-top: var(--s-5); border-top: 1px solid var(--rule); }
.mobile-menu__link {
  display: block;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
}

.mobile-menu__contact { margin: var(--s-7) 0 var(--s-6); }
.mobile-menu__contact .overline { margin-bottom: var(--s-3); }

.contactline {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
}
.contactline__label {
  min-width: 5.5rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.contactline__value { font-size: 1.1rem; font-weight: 700; }

.mobile-menu__area {
  margin: var(--s-4) 0 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
}

body.is-locked { overflow: hidden; }


/* == 8  HERO ============================================================== */

/* Startseiten-Hero (Kundenwunsch 08/2026): EIN großes Bild über die volle
   Breite. Direkt AUF dem Bild stehen nur der Slogan und die zwei Wege zum
   Termin — keine Tafel. Auftrag 07.08.2026 abends: Über dem Bild liegt ein
   dunkler Verlauf, der von der Textseite ausgeht und zur anderen Seite in
   die ungefilterte Bildfläche ausläuft; die Schrift steht darauf weiß, nur
   „Graf" bleibt in den Logofarben. Unter 64rem sitzt der Text unten, dort
   kommt der Verlauf entsprechend von unten. */

.hero--bild { position: relative; padding: 0; }

.hero__medien { position: relative; }

/* Dunkler Verlauf über dem Bild (Auftrag 07.08.2026): geht von der Seite
   des Textes aus und läuft zur anderen Seite vollständig in die
   ungefilterte Bildfläche aus. Liegt als ::after auf dem Bildträger und
   wandert dadurch in beiden Spielarten mit — auch wenn das Bild fest im
   Bildschirm steht. Unter 64rem steht der Inhalt unten (s. .hero__lage),
   darum kommt der Verlauf dort von unten statt von links. */
.hero__medien::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Reicht bis knapp unter die Oberkante: der Slogan steht mobil bei rund
     drei Vierteln der Höhe und braucht dort noch Grund unter der weißen
     Schrift; ganz oben bleibt das Bild ungefiltert. */
  background: linear-gradient(0deg,
    rgba(15, 15, 13, 0.72) 0%,
    rgba(15, 15, 13, 0.52) 40%,
    rgba(15, 15, 13, 0.3)  78%,
    rgba(15, 15, 13, 0)    96%);
}
@media (min-width: 64rem) {
  .hero__medien::after {
    background: linear-gradient(90deg,
      rgba(15, 15, 13, 0.68) 0%,
      rgba(15, 15, 13, 0.5)  30%,
      rgba(15, 15, 13, 0.22) 48%,
      rgba(15, 15, 13, 0)    66%);
  }
}

.bild-gross {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: 50% 35%;
  background: var(--paper-2);
}

/* Festes Seitenverhältnis je Zuschnitt: übersteuert die width/height-
   Attribute in jedem Browser — auch beim Wechsel zwischen Mobil- und
   Desktop-Fassung springt nichts (kein Layout Shift). Die Höhenkappung
   beschneidet nur oben/unten, nie seitlich. */
.hero__medien .bild-gross {
  aspect-ratio: 1774 / 887;
  max-height: 76vh;
}
@media (max-width: 37.49rem) {
  .hero__medien .bild-gross {
    aspect-ratio: 914 / 887;
    max-height: 60vh;
    object-position: 50% 30%;
  }
}

/* Das Hero-Bild scrollt mit ------------------------------------------------
   Bis 07.08.2026 stand das Foto fest im Bildschirm (position: fixed) und die
   Seite zog darüber hinweg — dieselbe Machart wie beim Bildband (Abschnitt
   14). Seit die Kopfleiste mitscrollt statt oben angeheftet zu bleiben
   (Abschnitt 6), geht das nicht mehr: Die Ruhelage des festen Bildes begann
   unter der Kopfzeile (--topbar-h). Sobald die Kopfzeile nach oben aus dem
   Bild lief, gab sie diesen Streifen frei, und über dem stehenden Foto klaffte
   ein rund 90 px hohes Band der Abschnittsfläche. Ein Nachrücken des Bildes
   ginge nur mit größerem Bildausschnitt (das Foto müsste um --topbar-h höher
   sein und würde dadurch hineinzoomen) — beides unerwünscht.

   Deshalb gilt jetzt durchgehend der frühere Grundzustand: das ruhige Bild im
   Fluss. Die Höhe des Abschnitts kommt wieder vom Bild darin (Seitenverhältnis
   und Höhenkappung stehen oben bei .hero__medien .bild-gross), Bildausschnitt
   und Aufbau in Ruhelage bleiben unverändert. Das stehende Bild im Bildband
   (Abschnitt 14) ist davon nicht berührt — dessen Bühne liegt auf inset: 0 und
   hängt nicht an der Kopfzeile. */

/* Etikett rechts unten im Hero-Bild. index.php setzt es seit 07.08.2026
   nicht mehr; die Regel bleibt, damit ein <span class="hero__kennzeichen">
   sie ohne weitere Arbeit wieder anzieht. */
.hero__kennzeichen {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.1rem 0.55rem;
  border-radius: var(--r-voll);
  font-size: 0.72rem;
  color: var(--ink-2);
  background: rgba(var(--paper-rgb), 0.8);
}

/* Inhalt liegt an ALLEN Breiten direkt auf dem Bild und am LINKEN
   Seitenrand (Kundenwunsch 08/2026): unter 64rem unten links über der
   ruhigen Boden-/Wandzone des Mobil-Zuschnitts, ab 64rem vertikal mittig
   am linken Rand — der helle Schriftschein trägt die Lesbarkeit auch über
   Fenster und Malerfigur im linken Bilddrittel. */
.hero__lage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
}

.hero__inhalt {
  width: 100%;
  /* Abstand nach unten war ursprünglich für das Etikett rechts unten im
     Bild gedacht; er trägt den Aufbau weiter und bleibt deshalb. */
  padding: 0 var(--gutter) clamp(2.2rem, 5vw, 2.5rem);
}

.hero__title {
  /* Wächst flacher als die übrigen Überschriften und mit eigenem Deckel:
     Ab 64rem steht der Slogan in einer Spalte von 46vw (höchstens 36rem)
     neben dem Bild. Eine steilere Kurve lässt ihn zwischen 1024 und
     1150 px zweizeilig umbrechen, obwohl daneben Platz frei bleibt —
     gemessen am 07.08.2026. Wer hier erhöht, prüft genau diesen Bereich. */
  font-size: clamp(2.25rem, 1.35rem + 2.35vw, 3.35rem);
  line-height: 1.07;
  max-width: 17ch;
  margin-bottom: 1.1rem;
  /* Weiß auf dem dunklen Verlauf (Auftrag 07.08.2026); der weiche dunkle
     Schein trägt auch die bunten „Graf"-Buchstaben über helleren
     Bildstellen am Rand des Verlaufs. */
  color: var(--white);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5),
               0 1px 3px  rgba(0, 0, 0, 0.35);
}

/* „Graf" buchstabenweise in den Logofarben — Folge Rot·Grün·Gelb·Blau
   wie im Logo und in den Markierungspunkten der Navigation. */
.hero__graf i { font-style: normal; }
.hero__graf i:nth-child(1) { color: var(--logo-rot); }
.hero__graf i:nth-child(2) { color: var(--logo-gruen); }
.hero__graf i:nth-child(3) { color: var(--logo-gelb); }
.hero__graf i:nth-child(4) { color: var(--hero-graf-blau); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__actions .btn { flex: 1 1 auto; }

@media (min-width: 480px) {
  .hero__actions .btn { flex: 0 0 auto; }
}

@media (min-width: 64rem) {
  .hero__lage { align-items: center; }
  .hero__inhalt {
    width: min(36rem, 46vw);
    padding: 0 0 0 var(--gutter);
  }
}

/* Bildfläche: Passepartout aus ruhigem Papierton, darin die Farbkarte.
   Seitenverhältnis 4:3 — identisch zum späteren Projektfoto. */
.visualframe {
  margin: 0;
  padding: clamp(0.9rem, 2vw, 1.6rem);
  background: var(--paper-2);
}
.swatchcard {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(26, 26, 24, 0.1);
}
.visualframe__caption {
  margin: 0.85rem 0 0;
  font-size: 0.83rem;
  color: var(--ink-2);
}

/* Fotos, die über bild() eingesetzt werden. Sie liegen im selben Passepartout
   wie die Farbkarte, damit Foto und Grafik dieselbe Fläche einnehmen und die
   Seite beim Austausch nicht neu gesetzt werden muss. */
.bild {
  width: 100%;
  border: 1px solid rgba(26, 26, 24, 0.1);
  border-radius: var(--r-3);
  background: var(--paper-2);
}
.bild__figur { margin: 0; }
.bild__unterschrift {
  margin: 0.85rem 0 0;
  font-size: 0.83rem;
  color: var(--ink-2);
}

/* Nur im Entwurf sichtbar: weist auf ein Bild hin, das noch nicht
   aufbereitet wurde. Auf der fertigen Seite entfällt der Hinweis. */
.bild-fehlt {
  margin: 0;
  padding: 1rem 1.15rem;
  border: 1px dashed var(--logo-gelb);
  border-radius: var(--r-1);
  background: var(--paper-2);
  font-size: 0.85rem;
  color: var(--ink-2);
}



/* == 9  AKTIONSLEISTE FÜR KLEINE DISPLAYS ================================= */

.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--paper);
  /* Nur die sichtbaren oberen Ecken werden gerundet — die unteren sitzen am
     Bildschirmrand. Der Rahmen läuft um den Bogen herum, damit die Kante an
     den Ecken nicht abbricht; der weiche Schatten hebt die Leiste vom
     durchscrollenden Inhalt ab. */
  border: 1px solid var(--rule);
  border-bottom: 0;
  border-radius: var(--r-3) var(--r-3) 0 0;
  box-shadow: 0 -2px 14px rgba(26, 26, 24, 0.06);
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom, 0px));
  visibility: hidden;
  transform: translateY(115%);
  transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.callbar.is-visible {
  visibility: visible;
  transform: none;
  transition: transform var(--dur) var(--ease), visibility 0s;
}
.callbar__inner { display: flex; gap: 0.6rem; }
.btn--bar { flex: 1 1 0; padding-inline: 0.75rem; }
.btn--bar.btn--outline { flex: 0 0 auto; }

/* Der Hörer der Leiste folgt dem grünen Anruf-Button im Kopf — vorher stand
   er im Logo-Rot und fiel damit sichtbar aus der Reihe, obwohl beide dieselbe
   Handlung auslösen. Nur das Zeichen wechselt; Form und Fläche des
   „Anrufen"-Buttons bleiben unverändert. Gilt bewusst NUR hier — die
   rot-akzentuierten Telefon-Buttons im Seiteninhalt sind freigegeben. */
.callbar .btn--outline .btn__icon { color: var(--call-gruen); }

@media (max-width: 767px) { body { padding-bottom: var(--callbar-h); } }
@media (min-width: 768px) { .callbar { display: none; } }


/* == 10  ENTWURFSHINWEIS (entfällt beim Livegang) ========================= */

.draftnote { border-top: 1px dashed var(--rule-strong); }
.draftnote__inner { padding-block: var(--s-5) var(--s-6); }
.draftnote__badge { color: var(--ink-3); margin-bottom: var(--s-2); }
.draftnote__text {
  margin: 0;
  max-width: 72ch;
  font-size: var(--fs-small);
  color: var(--ink-2);
}


/* == 11  ABSCHNITTE + SEITENKOPF + BROTKRUMEN ============================= */

.abschnitt { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.abschnitt--ruhig { background: var(--paper-2); }
.abschnitt--oben-knapp { padding-top: clamp(1rem, 2.5vw, 1.75rem); }
.abschnitt--schmal { max-width: 46rem; }

.abschnitt__kopf { max-width: 46rem; margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }
/* Für Abschnitte, deren Inhalt selbst schon groß ist (Bildvergleich): der
   Kopf rückt näher an den Inhalt, ohne dass die Fläche kleiner wird. */
.abschnitt__kopf--knapp { margin-bottom: clamp(1rem, 2vw, 1.4rem); }
.abschnitt__kopf .overline { margin-bottom: var(--s-2); }
.abschnitt__titel {
  font-size: var(--fs-h2);
  margin-bottom: 0.35em;
}
.abschnitt__satz { color: var(--ink-2); margin: 0; }
.abschnitt__mehr { margin: var(--s-6) 0 0; }
.abschnitt__hinweis {
  margin: var(--s-6) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--fs-small);
  max-width: 60ch;
}

/* Kopf der Unterseiten */
.seitenkopf {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.seitenkopf__inner { padding-block: clamp(1.75rem, 4.5vw, 3.25rem); }
.seitenkopf .overline { margin-bottom: var(--s-2); }
.seitenkopf__titel {
  font-size: clamp(2rem, 1.35rem + 2.9vw, 3.25rem);
  line-height: 1.08;
  /* Deutsche Wortungetüme dürfen trennen. „Datenschutzerklärung" ist ein
     einziges Wort und stand auf schmalen Geräten breiter als seine Spalte
     (auf 320 px schon vor der Vergrößerung der Überschriften). Getrennt
     wird nur, wenn es sonst nicht passt — die Sprache dafür liefert
     <html lang="de-AT">. */
  -webkit-hyphens: auto;
  hyphens: auto;
  max-width: 24ch;
  margin-bottom: 0.4em;
}
.seitenkopf__satz {
  max-width: 56ch;
  color: var(--ink-2);
  font-size: var(--fs-lead);
  margin: 0;
}
.seitenkopf__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--s-5);
}

/* Geteilter Seitenkopf: Text links, Vorher/Nachher-Vergleich rechts oben.
   Unterhalb der Hero-Breite rückt der Vergleich unter den Text. */
.seitenkopf__inner--geteilt {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 1024px) {
  .seitenkopf__inner--geteilt {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

/* Aktiver Menüpunkt — die Seite, auf der man gerade steht.
   Das Farbfeld ist voll deckend UND deutlich höher als beim Überfahren:
   dadurch bleibt der aktive Punkt auch bei eingeschränktem Farbsehen und
   in reinem Graustufendruck an Form und Gewicht erkennbar. */
.nav__link--aktiv::after {
  height: var(--navmark-h-aktiv);
  background-color: rgba(var(--nav-akzent, var(--logo-rot-rgb)), var(--navmark-aktiv));
}
/* Die Schrift der aktiven Seite steht dauerhaft in ihrer Bereichsfarbe —
   auch ohne Überfahren erkennbar; Feldhöhe und volle Deckkraft der
   Markierung tragen die Information zusätzlich (aria-current bleibt die
   maschinenlesbare Auszeichnung). */
.nav__link--aktiv { color: var(--nav-text, var(--ink)); }
/* Die Schriftstärke bleibt bewusst unverändert: sonst wäre die Navigation auf
   jeder Seite unterschiedlich breit. Die Unterscheidung leistet das Feld. */

.mobile-menu__link[aria-current="page"] { color: var(--cta); }
.mobile-menu__link--neben { font-size: 1.02rem; font-weight: 600; color: var(--ink-2); }

/* Pfeillink */
.pfeillink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 650;
  color: var(--cta);
  text-decoration: none;
}
.pfeillink:hover { text-decoration: underline; text-underline-offset: 3px; }
.pfeillink__icon { width: 18px; height: 18px; }

.markdots--gross {
  grid-template-columns: repeat(2, 12px);
  grid-template-rows: repeat(2, 12px);
  gap: 2px;
}


/* == 12  KARTEN UND LISTEN ================================================ */

/* Leistungskarten: neutrale Fläche, eine Logofarbe als obere Kante */
.lkarten {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.lkarte {
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink);
  border-radius: var(--r-1);
  padding: 1.15rem 1.25rem 1.05rem;
}
.lkarte--rot   { border-top-color: var(--logo-rot); }
.lkarte--gruen { border-top-color: var(--logo-gruen); }
.lkarte--gelb  { border-top-color: var(--logo-gelb); }
.lkarte--blau  { border-top-color: var(--logo-blau); }
.lkarte__titel { font-size: var(--fs-h3); margin-bottom: 0.35em; }
.lkarte__titel a {
  color: inherit;
  text-decoration: none;
}
.lkarte__titel a:hover { color: var(--cta); text-decoration: underline; text-underline-offset: 3px; }
.lkarte__satz { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }

/* Haken-Liste (Fließtext-Abschnitte) */
.hakenliste li {
  position: relative;
  padding: 0.35rem 0 0.35rem 1.65rem;
  max-width: 60ch;
}
.hakenliste li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.95em;
  width: 13px;
  height: 8px;
  border-left: 2.5px solid var(--logo-gruen);
  border-bottom: 2.5px solid var(--logo-gruen);
  transform: rotate(-45deg);
}

/* Ablauf-Schritte: Vierfeld-Nummern in den Logofarben */
.schritte {
  display: grid;
  gap: 1.25rem;
  counter-reset: schritt;
}
@media (min-width: 640px)  { .schritte { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .schritte { grid-template-columns: repeat(4, 1fr); } }
.schritte--schmal { grid-template-columns: 1fr !important; max-width: 34rem; }
.schritt { padding-right: 0.5rem; }
.schritt__nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 0.75rem;
  border-radius: var(--r-1);
  font-size: 1.55rem;
  font-weight: 750;
  color: var(--white);
}
.schritt--rot   .schritt__nummer { background: var(--logo-rot); }
.schritt--gruen .schritt__nummer { background: var(--logo-gruen); }
.schritt--gelb  .schritt__nummer { background: var(--logo-gelb); color: var(--ink); }
.schritt--blau  .schritt__nummer { background: var(--logo-blau); }
.schritt--ink   .schritt__nummer { background: var(--ink); }
.schritt__titel { font-size: 1.16rem; margin-bottom: 0.3em; }
.schritt__satz { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }

/* Verlässlichkeits-Punkte */
.verlass {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 700px) { .verlass { grid-template-columns: repeat(2, 1fr); } }
.verlass__punkt {
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--logo-blau);
  border-radius: var(--r-1);
  padding: 1.15rem 1.3rem 0.9rem;
}
.verlass__punkt:nth-child(4n+2) { border-left-color: var(--logo-gruen); }
.verlass__punkt:nth-child(4n+3) { border-left-color: var(--logo-gelb); }
.verlass__punkt:nth-child(4n+4) { border-left-color: var(--logo-rot); }
.verlass__titel { font-size: 1.16rem; margin-bottom: 0.3em; }
.verlass__punkt p { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.verlass__punkt a { color: var(--cta); }


/* == 13  PREISE =========================================================== */

.preisteaser {
  display: grid;
  gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 1024px) {
  .preisteaser { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
.preisteaser__text .overline { margin-bottom: var(--s-2); }
.faktorliste { margin: var(--s-4) 0 var(--s-5); }
.faktorliste li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
  font-size: var(--fs-small);
}
.faktorliste li:first-child { border-top: 1px solid var(--rule); }
.preisteaser__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.preisteaser__bild { margin: 0; }

/* Faktoren-Raster auf der Preise-Seite */
.faktoren {
  display: grid;
  gap: 1rem;
  counter-reset: faktor;
}
@media (min-width: 640px)  { .faktoren { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .faktoren { grid-template-columns: repeat(3, 1fr); } }
.faktor {
  counter-increment: faktor;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  padding: 1.1rem 1.25rem 0.9rem;
}
.faktor__titel { font-size: 1.13rem; margin-bottom: 0.3em; }
.faktor__titel::before {
  content: counter(faktor, decimal-leading-zero);
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  color: var(--logo-rot);
}
.faktor:nth-child(4n+2) .faktor__titel::before { color: var(--logo-gruen); }
.faktor:nth-child(4n+3) .faktor__titel::before { color: #B0813C; }
.faktor:nth-child(4n+4) .faktor__titel::before { color: var(--logo-blau); }
.faktor p { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.faktor p a { color: var(--cta); }

/* „Projekt einschätzen lassen" */
.einschaetzen {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 900px) {
  .einschaetzen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
.einschaetzen__form {
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--cta);
  border-radius: var(--r-1);
  padding: clamp(1.25rem, 3vw, 1.9rem);
}
.einschaetzen__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--s-5);
}
.einschaetzen__hinweis {
  margin: 0.9rem 0 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
}


/* == 14  BILDER =========================================================== */

.bildreihe {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 700px) { .bildreihe { grid-template-columns: repeat(3, 1fr); } }
.bildreihe__glied { margin: 0; }
.bildreihe__hinweis {
  margin: var(--s-5) 0 0;
  font-size: 0.85rem;
  color: var(--ink-2);
}

.panoramabild { margin: 0; }
.panoramabild .bild { width: 100%; }

/* Text neben Bild */
.inhalt-bild {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 900px) {
  .inhalt-bild { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .inhalt-bild--getauscht { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .inhalt-bild--getauscht .inhalt-bild__text { order: 2; }
  .inhalt-bild--getauscht .inhalt-bild__figur { order: 1; }
}
.inhalt-bild__figur { margin: 0; }
.inhalt-bild__hinweis {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--ink-2);
  max-width: 56ch;
}

/* Hero-Foto: 16:9-Quelle im 4:3-Rahmen, Fokus auf Leiter und Werkzeug links */
.hero-foto {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 32% 62%;
}
@media (max-width: 1023px) {
  /* Auf schmalen Bildschirmen flacher zuschneiden, damit der Hero
     nicht die ganze Höhe frisst */
  .hero-foto { aspect-ratio: 16 / 10; object-position: 30% 62%; }
}


/* --- Bildband: das Bild bleibt stehen, die Seite zieht darüber -------------
   Ein Abschnitt über die volle Bildschirmbreite (partials/bildband.php).

   Wie es funktioniert, ohne eine Zeile JavaScript:
   Das Foto liegt fest im Bildschirm (position: fixed) und bewegt sich beim
   Scrollen nicht mit. Sichtbar wird es trotzdem nur innerhalb des Bandes,
   denn `clip-path` auf dem Band schneidet auch fest positionierte Nachfahren
   auf dessen Fläche zu — ohne dabei ihr Bezugssystem zu ändern. Genau diese
   Kombination erzeugt den stehenden Hintergrund.

   Grundzustand ist bewusst das ruhige Bild, das mitscrollt; erst wenn der
   Browser `clip-path` beherrscht, wird daraufgesattelt. Ein Browser ohne
   `clip-path` bekommt also kein über die ganze Seite laufendes Bild,
   sondern schlicht ein normales Bild im Band. Ebenso bei eingestellter
   Bewegungsreduzierung (Abschnitt 23): dort steht das Bild fest im Band. */
.bildband {
  position: relative;
  isolation: isolate;
  background: var(--ink);   /* trägt den Text, solange das Bild lädt */
  color: var(--paper);
}

.bildband__buehne {
  position: absolute;
  inset: 0;
  z-index: -1;              /* hinter den Text, aber vor die Grundfläche */
  pointer-events: none;
  overflow: hidden;
}
@supports (clip-path: inset(0)) {
  .bildband { clip-path: inset(0); }
  .bildband__buehne { position: fixed; }
}

.bildband__buehne picture { height: 100%; }
.bildband__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bildband__foto--mitte { object-position: 50% 50%; }
.bildband__foto--oben  { object-position: 50% 25%; }
.bildband__foto--unten { object-position: 50% 75%; }

/* Der Schleier über dem Motiv. Er ist so dunkel gewählt, dass weiße Schrift
   selbst über der hellsten denkbaren Bildstelle noch rund 6:1 erreicht —
   und so hell, dass das Bild ein Bild bleibt und keine graue Fläche wird. */
.bildband__buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
              rgba(20, 20, 18, 0.84) 0%,
              rgba(20, 20, 18, 0.74) 55%,
              rgba(20, 20, 18, 0.68) 100%);
}

.bildband__inhalt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: clamp(19rem, 56vh, 30rem);
  padding-block: clamp(3rem, 8vw, 5.5rem);
}
.bildband__overline { color: var(--logo-gelb); }
.bildband__titel {
  margin: 0.55rem 0 0.4em;
  max-width: 22ch;
  color: var(--paper);
  font-size: var(--fs-h2);
}
.bildband__satz {
  margin: 0;
  max-width: 48ch;
  color: #E3DFD7;
}
.bildband__aktion { margin: var(--s-5) 0 0; }
.bildband__quelle {
  margin: var(--s-5) 0 0;
  font-size: 0.85rem;
  color: #C9C4BA;
}
.bildband .btn--primary:focus-visible { outline-color: var(--paper); }


/* --- Vorher/Nachher-Vergleich ----------------------------------------------
   Dieselbe Wand zweimal (partials/vorher-nachher.php): unten das Vorher,
   darüber — per clip-path bis zur Farbrolle beschnitten — das Nachher.
   Die Lage des Schnitts steht in --pos; bedient wird ein unsichtbarer
   Schieberegler über der ganzen Fläche, den main.js einsetzt (Abschnitt 5).

   Grundzustand ist das Vorher-Bild allein: erst wenn der Browser clip-path
   beherrscht, legen sich Nachher-Ebene und Riegel darüber — sonst würde
   das Nachher-Bild das Vorher-Bild vollständig verdecken. Die Beschriftungen
   liegen IN ihren Ebenen und werden mit ihnen beschnitten: es ist immer nur
   beschriftet, was gerade zu sehen ist.

   Der schmale Rand ist ein Verlauf aus den vier Logofarben in der
   Reihenfolge des Logos (rot, grün, gelb, blau). */

.vergleich { margin: 0; }

/* Kennzeichnung ÜBER der Bildfläche. Seit 07.08.2026 ist $vergleich_hinweis
   standardmäßig leer, die Kennzeichnung erscheint also nicht mehr — der
   Hinweis auf die KI-Herkunft steht im Impressum. Wird sie wieder gesetzt,
   gilt weiter: ohne Interaktion und auf jedem Gerät lesbar, volle Textfarbe
   (--ink, 16,7:1), nicht unter 0,9 rem, nie in ein aufklappbares Element. */
.vergleich__kennzeichnung {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--paper-3);
  border-left: 4px solid var(--logo-blau);
  border-radius: var(--r-2);
  background: var(--white);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.35;
}
/* Der Punkt ist reine Zierde — die Aussage steht vollständig im Text. */
.vergleich__kennzeichnung::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-voll);
  background: var(--logo-blau);
}

.vergleich__feld {
  padding: 3px;
  border-radius: var(--r-3);
  background: linear-gradient(90deg,
              var(--logo-rot)   0 25%,
              var(--logo-gruen) 25% 50%,
              var(--logo-gelb)  50% 75%,
              var(--logo-blau)  75% 100%);
}

.vergleich__buehne {
  --pos: 18%;
  position: relative;
  /* Innenradius = Außenradius minus Randstärke (3px) — sonst sitzt die
     Ecke des Bildes sichtbar neben der Ecke des Farbrands. */
  border-radius: calc(var(--r-3) - 3px);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* Die Bilder füllen ihre Ebene randlos — das Passepartout der Klasse
   .bild ist hier fehl am Platz, den Rahmen übernimmt der Farbrand. */
.vergleich__buehne picture { display: block; }
.vergleich__buehne .bild {
  display: block;
  width: 100%;
  border: 0;
  /* Die Rundung übernimmt die Bühne (sie beschneidet); ein eigener Radius
     am Bild würde als zweite, versetzte Ecke sichtbar. */
  border-radius: 0;
  background: none;
}

.vergleich__vorher { position: relative; }

.vergleich__nachher { display: none; }
.vergleich__nachher img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vergleich__riegel { display: none; }

@supports (clip-path: inset(0)) {
  .vergleich__nachher {
    display: block;
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  }

  .vergleich__riegel {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    z-index: 2;
    pointer-events: none;
  }
}

/* Trennlinie und Rolle. Die Achse der gezeichneten Rolle liegt bei
   x = 19 der 64 Einheiten breiten Grafik — die Verschiebung um 29.7 %
   setzt genau diese Achse auf die Trennlinie. */
.vergleich__riegel::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.5px;
  width: 3px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(26, 26, 24, 0.22);
}
.vergleich__rolle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 56px;      /* fest, denn der Riegel selbst ist 0 breit — */
  max-width: none;  /* das globale max-width: 100% griffe sonst ins Leere */
  height: 96px;
  transform: translate(-29.7%, -50%);
  filter: drop-shadow(0 1px 3px rgba(26, 26, 24, 0.35));
}
@media (max-width: 480px) {
  .vergleich__rolle { width: 44px; height: 76px; }
}

.vergleich__marke {
  position: absolute;
  top: 0.75rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-voll);
  background: rgba(26, 26, 24, 0.62);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}
.vergleich__marke--vorher  { right: 0.75rem; }
.vergleich__marke--nachher { left: 0.75rem; }

/* Auf schmalen Bildschirmen startet der Schnitt etwas weiter rechts und
   die Beschriftungen schrumpfen — sonst stünde „Nachher" beim Laden halb
   angeschnitten da. main.js liest den Startwert aus --pos aus. */
@media (max-width: 480px) {
  .vergleich__buehne { --pos: 26%; }
  .vergleich__marke {
    top: 0.6rem;
    padding: 0.2rem 0.45rem;
    font-size: 0.72rem;
  }
  .vergleich__marke--vorher  { right: 0.6rem; }
  .vergleich__marke--nachher { left: 0.6rem; }
}

/* Der von main.js eingesetzte Schieberegler: unsichtbar über der ganzen
   Fläche, bringt aber Maus-, Touch- und Tastaturbedienung mit. */
.vergleich__regler {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  /* Am Handy liegt dieser unsichtbare Schieberegler über der GANZEN
     Vergleichsfläche. Ohne die folgende Zeile nimmt er jede Berührung
     entgegen: Wer mit dem Daumen über das Bild nach unten wischt, scrollt
     zwar, verschiebt dabei aber mit dem kleinsten seitlichen Ausschlag die
     Trennlinie — das Bild schwankt beim Scrollen hin und her (gemessen am
     07.08.2026: ein senkrechter Wisch zog den Vergleich von 26 auf 50 %).
     `pan-y` gibt das senkrechte Wischen wieder dem Scrollen; nur eine
     waagrechte Bewegung landet beim Regler. Die zweite Zeile lässt
     zusätzlich das Aufziehen mit zwei Fingern zu — Browser, die den
     Begriff nicht kennen, überspringen sie und behalten die erste. */
  touch-action: pan-y;
  touch-action: pan-y pinch-zoom;
}
.vergleich__feld:has(.vergleich__regler:focus-visible) {
  outline: 3px solid var(--cta);
  outline-offset: 3px;
}

.vergleich__unterschrift {
  margin: 0.85rem 0 0;
  font-size: 0.83rem;
  color: var(--ink-2);
}


/* == 15  FAQ ============================================================== */

.faq {
  border-top: 1px solid var(--rule-strong);
  /* Dauern des Auf- und Zuklappens. Die Bedienlogik (main.js, Abschnitt 6)
     liest beide Werte aus — Antworthöhe (JavaScript) und Plus-Zeichen (CSS)
     laufen dadurch immer synchron. Zuklappen bewusst etwas schneller. */
  --faq-dur-auf: 230ms;
  --faq-dur-zu: 190ms;
}
.faq__eintrag { border-bottom: 1px solid var(--rule-strong); }
.faq__frage {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0.25rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.faq__frage::-webkit-details-marker { display: none; }
.faq__frage:hover { color: var(--cta); }
.faq__zeichen {
  position: relative;
  flex: none;
  align-self: center;
  width: 16px;
  height: 16px;
}
.faq__zeichen::before,
.faq__zeichen::after {
  content: "";
  position: absolute;
  background: var(--ink-2);
  transition: transform var(--faq-dur-zu) var(--ease);
}
.faq__zeichen::before { left: 0; top: 7px; width: 16px; height: 2px; }
.faq__zeichen::after  { left: 7px; top: 0; width: 2px; height: 16px; }

/* Offen dreht sich der senkrechte Balken eine Vierteldrehung auf den
   waagrechten — aus dem Plus wird ein Minus, mit dem vorhandenen Zeichen.
   Beim animierten Zuklappen bleibt [open] bis zum Ende des Übergangs
   gesetzt (main.js); die Klasse --schliesst nimmt die Drehung deshalb
   schon währenddessen zurück, synchron zur zulaufenden Antwort. */
.faq__eintrag[open]:not(.faq__eintrag--schliesst) .faq__zeichen::after {
  transform: rotate(90deg);
  transition-duration: var(--faq-dur-auf);
}

/* Das untere Polster trägt der Inhalt, nicht der Rahmen: Nur eine vertikal
   polsterfreie Box kollabiert beim Zuklappen vollständig auf Höhe 0. */
.faq__antwort { padding: 0 0.25rem; }
.faq__antwort > :last-child { padding-bottom: 1.15rem; }
.faq__antwort p { margin: 0; color: var(--ink-2); max-width: 65ch; }


/* == 16  AUFRUF-BAND (CTA) ================================================ */

/* Helle Fläche. Nach oben grenzt das Markenband (in cta.php, direkt vor dem
   Abschnitt) ab, nach unten das Markenband des Fußbereichs — das reine Weiß
   steht also zwischen zwei Logolinien und hebt sich vom warmen Seitenweiß
   (--paper) ab, ohne eine zusätzliche Trennlinie zu brauchen. */
.cta {
  background: var(--white);
  color: var(--ink);
  position: relative; /* Bezugsrahmen für die Malfläche (.cta__malerei) */
}
/* Malfläche des Pinsel-Mauszeigers; wird von der Bedienlogik (Abschnitt 4)
   nur auf Mausgeräten eingefügt. Liegt hinter dem Inhalt, fängt keine
   Klicks und wird beim Seitenwechsel mitsamt Gemaltem verworfen. */
.cta__malerei {
  position: absolute;
  inset: 0;
  /* Anzeigegröße ausdrücklich ans Band binden: die width/height-Attribute
     des Canvas sind Gerätepixel (Retina: das Doppelte), und ohne CSS-Maß
     würde diese intrinsische Größe dargestellt — der Strich läge dann
     neben dem Zeiger. */
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.cta__inner {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5.5vw, 4rem);
  position: relative;
  z-index: 1; /* Text und Schaltflächen bleiben über der Malfläche */
}
/* Heller Schein um die Schrift: auf der weißen Fläche unsichtbar, hält
   den Text aber lesbar, wenn farbige Striche darunter durchlaufen. */
.cta__text {
  text-shadow: 0 0 3px var(--white), 0 0 9px var(--white);
}
@media (min-width: 1024px) {
  .cta__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
/* Das Logo-Gelb der früheren dunklen Fassung erreicht auf Weiß nur rund
   1,7:1 und ist als Schrift unbrauchbar; die Zeile läuft daher wie jede
   andere Überzeile der Seite in --ink-2 (7,1:1). */
.cta__overline { color: var(--ink-2); }
.cta__titel {
  color: var(--ink);
  font-size: var(--fs-h2);
  margin-bottom: 0.35em;
}
.cta__satz { color: var(--ink-2); margin: 0; max-width: 48ch; }
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
@media (min-width: 1024px) { .cta__actions { justify-content: flex-end; } }
/* Schaltflächen brauchen keine Sonderbehandlung mehr: auf heller Fläche
   gelten dieselben Regeln wie überall sonst (Abschnitt 5). */


/* == 17  FUSSBEREICH ====================================================== */

.footer {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
}
.footer__inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  padding-block: clamp(2.25rem, 5vw, 3.5rem) clamp(1.75rem, 4vw, 2.5rem);
}
@media (min-width: 700px) {
  .footer__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}
.footer__logo { height: 44px; width: auto; }
.footer__slogan {
  margin: 0.8rem 0 0.5rem;
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.footer__satz {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
  max-width: 34ch;
}
.footer__titel { margin-bottom: var(--s-3); }
.footer__liste li { padding: 0.22rem 0; }
.footer__liste a {
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-small);
}
.footer__liste a:hover { color: var(--cta); text-decoration: underline; text-underline-offset: 3px; }
.footer .contactline { border-bottom-color: var(--rule-strong); }
.contactline__value--mail { font-size: 0.95rem; word-break: break-all; }
.footer__adresse,
.footer__zeiten {
  margin: var(--s-4) 0 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.footer__leiste { border-top: 1px solid var(--rule-strong); }
.footer__leiste-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 1rem calc(1rem + 6px);
}
.footer__recht { margin: 0; font-size: 0.85rem; color: var(--ink-2); }
.footer__rechtliches {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.footer__rechtliches a {
  font-size: 0.85rem;
  color: var(--ink-2);
}
.footer__rechtliches a:hover { color: var(--ink); }


/* == 18  KONTAKTSEITE ===================================================== */

.kontaktraster {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 960px) {
  .kontaktraster { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.kontaktinfo { display: grid; gap: 1rem; }
.kontaktkarte {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  padding: 1.05rem 1.2rem;
}
.kontaktkarte--hinweis { background: var(--paper-2); border-style: dashed; }
.kontaktkarte .overline { margin-bottom: 0.6rem; }
.kontaktkarte__nummer {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.45rem 0;
  color: var(--ink);
  text-decoration: none;
}
.kontaktkarte__nummer + .kontaktkarte__nummer { border-top: 1px solid var(--rule); }
.kontaktkarte__icon { color: var(--logo-rot); width: 22px; height: 22px; }
.kontaktkarte__icon--mobil { color: var(--logo-blau); }
.kontaktkarte__wert {
  display: block;
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.kontaktkarte__nummer:hover .kontaktkarte__wert { color: var(--cta); }
.kontaktkarte__label {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-2);
}
.kontaktkarte__mail { font-weight: 650; word-break: break-all; }
.kontaktkarte__adresse { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.kontaktkarte__adresse a { color: var(--cta); }

.kontaktformular {
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--cta);
  border-radius: var(--r-1);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.kontaktformular__titel { font-size: 1.42rem; margin-bottom: var(--s-5); }


/* == 19  FORMULARE ======================================================== */

.anfrageumfang { max-width: 46rem; }

.formabschnitt {
  margin: 0 0 var(--s-6);
  padding: 0;
  border: 0;
  min-width: 0;
}
.formabschnitt__titel {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding-bottom: 0.6rem;
  margin-bottom: var(--s-5);
  border-bottom: 2px solid var(--ink);
  font-size: 1.28rem;
  font-weight: 750;
  letter-spacing: -0.015em;
}
.formabschnitt__nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-1);
  background: var(--ink);
  color: var(--white);
  font-size: 1rem;
}
.formabschnitt:nth-of-type(1) .formabschnitt__nummer { background: var(--logo-rot); }
.formabschnitt:nth-of-type(2) .formabschnitt__nummer { background: var(--logo-blau); }
.formabschnitt__zusatz { font-weight: 500; color: var(--ink-2); font-size: 0.95rem; }

/* „Mehr Angaben machen" — freiwilliger Bereich der Terminanfrage als
   natives <details>: funktioniert ohne JavaScript, der Standardpfeil der
   Zusammenfassung bleibt bewusst stehen (zugänglich und verständlich). */
.mehrangaben {
  margin: 0 0 var(--s-6);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-1);
  background: var(--paper-2);
}
.mehrangaben__aufklapper {
  padding: 0.85rem 1.05rem;
  font-size: var(--fs-small);
  font-weight: 650;
  cursor: pointer;
}
.mehrangaben__aufklapper:hover { color: var(--cta); }
.mehrangaben__inhalt {
  padding: var(--s-5) 1.05rem 0.4rem;
  border-top: 1px solid var(--rule);
}

.feld { margin-bottom: var(--s-4); min-width: 0; }
.feld--gruppe { padding: 0; border: 0; }
.feldzeile {
  display: grid;
  gap: 0 1rem;
}
@media (min-width: 640px) { .feldzeile { grid-template-columns: 1fr 1fr; } }

.feld__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--fs-small);
  font-weight: 650;
}
.feld__labelzusatz { font-weight: 500; color: var(--ink-2); }
.feld__pflicht { color: var(--logo-rot); }
.feld__eingabe {
  display: block;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--r-1);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.feld__eingabe:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 0;
  border-color: var(--cta);
}
.feld__eingabe[aria-invalid="true"] { border-color: var(--logo-rot); }
.feld__eingabe--mehrzeilig { resize: vertical; min-height: 7.5rem; }
select.feld__eingabe { appearance: auto; }

.feld__hinweis {
  margin: -0.35rem 0 var(--s-4);
  font-size: 0.85rem;
  color: var(--ink-2);
}
.feld__hinweis--entwurf {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.8rem;
  border: 1px dashed var(--logo-gelb);
  background: var(--paper-2);
  max-width: 44ch;
}

/* Mehrfachauswahl */
.hakenraster {
  display: grid;
  gap: 0.4rem 1rem;
}
@media (min-width: 560px) { .hakenraster { grid-template-columns: 1fr 1fr; } }
.hakenfeld {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}
.hakenfeld label { padding-top: 0.1rem; font-size: var(--fs-small); }
.feld__haken {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0.15rem 0 0;
  accent-color: var(--cta);
}

.feld--zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.65rem;
  margin-top: var(--s-5);
}
.feld--zustimmung .feld__label--haken {
  font-weight: 500;
  font-size: var(--fs-small);
  margin: 0;
}
.feld--zustimmung .feldfehler { grid-column: 2; }
.feld--senden { margin-top: var(--s-5); }

/* Fehlerdarstellung */
.formfehler {
  margin-bottom: var(--s-5);
  padding: 1rem 1.2rem;
  border: 1.5px solid var(--logo-rot);
  border-left-width: 5px;
  border-radius: var(--r-1);
  background: #F9F0EF;
}
.formfehler__titel { margin: 0 0 0.4rem; font-weight: 750; }
.formfehler__liste li { padding: 0.15rem 0; }
.formfehler__liste a { color: #97372F; }
.feldfehler {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #97372F;
}

/* Honigtopf: für Menschen unsichtbar, für Ausfüllprogramme ein normales Feld */
.hpfeld {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* == 20  BESTÄTIGUNG + FEHLERSEITE + RECHTSTEXTE ========================== */

.bestaetigung__status {
  padding: 1.5rem 1.6rem;
  border-radius: var(--r-1);
  margin-bottom: var(--s-7);
}
.bestaetigung__status--ok {
  border: 1.5px solid var(--logo-gruen);
  border-left-width: 6px;
  background: #EFF4F0;
}
.bestaetigung__status--entwurf {
  border: 1.5px solid var(--logo-gelb);
  border-left-width: 6px;
  background: #FCF6ED;
}
.bestaetigung__titel { font-size: clamp(1.62rem, 1.2rem + 1.8vw, 2.25rem); margin: 0.35em 0 0; }
.bestaetigung__satz { margin: 0.8em 0 0; color: var(--ink-2); }
.bestaetigung h2 { font-size: 1.36rem; margin-top: var(--s-6); }
.bestaetigung__zurueck { margin-top: var(--s-7); }

.fehlerseite { text-align: left; padding-block: var(--s-6); }
.fehlerseite__code {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 var(--s-4);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.fehlerseite__titel { font-size: var(--fs-h2); }
.fehlerseite__satz { color: var(--ink-2); max-width: 54ch; }
.fehlerseite__liste { margin: var(--s-5) 0; }
.fehlerseite__liste li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.fehlerseite__liste li:first-child { border-top: 1px solid var(--rule); }
.fehlerseite__liste a { font-weight: 650; }
.fehlerseite__kontakt { margin-top: var(--s-6); }
.fehlerseite__kontakt p { margin-bottom: 0.6rem; color: var(--ink-2); }

/* Rechtstexte */
.rechtstext h2 {
  font-size: 1.34rem;
  margin-top: var(--s-7);
}
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext p { max-width: 68ch; }
.rechtstext__verweis,
.rechtstext__stand {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.rechtsdaten { margin: 0; }
.rechtsdaten dt {
  margin-top: var(--s-4);
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rechtsdaten dd { margin: 0.2rem 0 0; }
.offenepunkte {
  margin-bottom: var(--s-6);
  padding: 1rem 1.2rem;
  border: 1.5px dashed var(--logo-gelb);
  border-radius: var(--r-1);
  background: #FCF6ED;
}
.offenepunkte p { margin: 0.4rem 0 0; font-size: var(--fs-small); color: var(--ink-2); }
.offen {
  display: inline-block;
  padding: 0 0.35rem;
  background: #FCF6ED;
  border: 1px dashed var(--logo-gelb);
  border-radius: var(--r-1);
  font-size: 0.85em;
  color: var(--ink-2);
}


/* == 21  LEISTUNGS-ÜBERSICHT + ABLAUF-DETAIL + STUFEN ===================== */

.ldetail { display: grid; gap: clamp(1.5rem, 3.5vw, 2.5rem); }
.ldetail__glied {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--ink);
  border-radius: var(--r-1);
}
@media (min-width: 860px) {
  .ldetail__glied {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: center;
  }
}
.ldetail__glied--rot   { border-left-color: var(--logo-rot); }
.ldetail__glied--gruen { border-left-color: var(--logo-gruen); }
.ldetail__glied--gelb  { border-left-color: var(--logo-gelb); }
.ldetail__glied--blau  { border-left-color: var(--logo-blau); }
.ldetail__titel { font-size: 1.5rem; }
.ldetail__titel a { color: inherit; text-decoration: none; }
.ldetail__titel a:hover { color: var(--cta); text-decoration: underline; text-underline-offset: 3px; }
.ldetail__text p { max-width: 56ch; }
.ldetail__fuer {
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.ldetail__bild { min-width: 0; }
.ldetail__bild--leer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}

/* Ablauf-Detailseite */
.ablaufdetail { display: grid; gap: clamp(1.5rem, 3.5vw, 2.25rem); max-width: 56rem; }
.ablaufschritt {
  display: grid;
  gap: 1rem;
  padding-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
}
.ablaufschritt:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 760px) {
  .ablaufschritt { grid-template-columns: 13rem minmax(0, 1fr); }
}
.ablaufschritt__kopf { display: flex; align-items: center; gap: 0.9rem; }
@media (min-width: 760px) {
  .ablaufschritt__kopf { align-items: flex-start; flex-direction: column; }
}
.ablaufschritt__nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-1);
  font-size: 1.7rem;
  font-weight: 750;
  color: var(--white);
  background: var(--ink);
}
.ablaufschritt--rot   .ablaufschritt__nummer { background: var(--logo-rot); }
.ablaufschritt--gruen .ablaufschritt__nummer { background: var(--logo-gruen); }
.ablaufschritt--gelb  .ablaufschritt__nummer { background: var(--logo-gelb); color: var(--ink); }
.ablaufschritt--blau  .ablaufschritt__nummer { background: var(--logo-blau); }
.ablaufschritt__titel { font-size: 1.42rem; margin: 0; }
.ablaufschritt__text p { max-width: 62ch; }
.ablaufschritt__ihre {
  margin-bottom: 0;
  padding: 0.7rem 0.9rem;
  background: var(--paper-2);
  border-left: 3px solid var(--rule-strong);
  font-size: var(--fs-small);
}

/* Qualitätsstufen (Spachtelarbeiten) */
.stufen {
  display: grid;
  gap: 1rem;
}
@media (min-width: 760px) { .stufen { grid-template-columns: repeat(3, 1fr); } }
.stufe {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  padding: 1.1rem 1.25rem 0.9rem;
}
.stufe__marke {
  display: inline-block;
  margin: 0 0 0.7rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--r-voll);
  font-size: 0.85rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  color: var(--white);
  background: var(--ink);
}
.stufe__marke--rot  { background: var(--logo-rot); }
.stufe__marke--gelb { background: var(--logo-gelb); color: var(--ink); }
.stufe__marke--blau { background: var(--logo-blau); }
.stufe__titel { font-size: 1.13rem; margin-bottom: 0.3em; }
.stufe__satz { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }


/* == 22  EINWILLIGUNGS-BANNER (inaktiv ohne Mess-IDs) ===================== */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--white);
  border-top: 2px solid var(--ink);
  padding-block: 1rem;
}
.consent__inner {
  display: grid;
  gap: 0.9rem;
  align-items: center;
}
@media (min-width: 900px) {
  .consent__inner { grid-template-columns: minmax(0, 1fr) auto; }
}
.consent__text { margin: 0; font-size: var(--fs-small); max-width: 72ch; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }


/* == 23  REDUZIERTE BEWEGUNG ============================================== */
/* Grundsatz seit dem Umbau: Inhalt und Aufrufe zum Handeln sind ab der
   ersten Bildschirmausgabe sichtbar. Das Einblenden beim Scrollen
   (Abschnitt 26, Auftrag 07.08.2026) hält diesen Grundsatz ein — es
   betrifft nur Blöcke UNTERHALB des Sichtfensters und existiert nur mit
   JavaScript; hier wird es zusammen mit allen übrigen Übergängen
   vollständig abgeschaltet (zusätzlich prüft main.js die Einstellung
   selbst und versteckt dann gar nicht erst). */

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

  /* Das stehende Bild im Bildband (Abschnitt 14) ist zwar keine Animation,
     erzeugt beim Scrollen aber genau die Relativbewegung, die hier
     unerwünscht ist. Es scrollt dann normal mit.
     Das Hero-Bild (Abschnitt 8) braucht hier seit 07.08.2026 keine Ausnahme
     mehr — es scrollt für alle mit. */
  .bildband__buehne { position: absolute; }
}


/* == 24  INTRO-ANIMATION (NUR ERSTBESUCH) ================================= */
/* Eine Farbrolle fährt einmal von links nach rechts und legt dabei das
   Logo frei (partials/intro.php + assets/js/intro.js). Grundsatz: Die Ebene
   ist OHNE JavaScript unsichtbar — erst der Startblock setzt „mtg-intro"
   auf <html>. Alle Zeiten und Wege kommen als CSS-Variablen aus intro.js;
   Rolle und Malkante laufen linear und bleiben dadurch deckungsgleich.
   Die Werte hinter var(…) sind reine Rückfallwerte. */

html.mtg-intro {
  overflow: hidden;                 /* Scroll-Sperre, solange das Intro läuft */
  scrollbar-gutter: stable;         /* Platz der Bildlaufleiste bleibt reserviert —
                                       nach dem Intro verschiebt sich nichts */
}

.intro { display: none; }           /* Standard: unsichtbar (auch ohne JavaScript) */

html.mtg-intro .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 250;                     /* über Kopfbereich (70), Einwilligung (90)
                                       und Skip-Link (200) */
  background: var(--paper);
}

.intro__buehne {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Das Logo: von Anfang an an seinem Platz, aber vollständig hinter der
   Maske (clip-path von rechts komplett zugezogen). Es steht während der
   Fahrt bei 96 % und setzt sich nach dem Freilegen ruhig auf 103 %. */
.intro__logo {
  width: min(76vw, 480px);
  height: auto;
  transform: scale(0.96);
  clip-path: inset(0 100% 0 0);
}
.intro--start .intro__logo {
  animation:
    intro-malen  var(--intro-mal-dauer, 400ms) linear
                 var(--intro-mal-verzug, 660ms) forwards,
    intro-setzen var(--intro-setz-dauer, 900ms) cubic-bezier(0.22, 0.61, 0.36, 1)
                 var(--intro-setz-verzug, 1060ms) forwards;
}
@keyframes intro-malen {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes intro-setzen {
  from { transform: scale(0.96); }
  to   { transform: scale(1.03); }
}

/* Die Farbrolle: Höhe und Oberkante setzt intro.js passend zum Logo,
   die Fahrt läuft in einer einzigen ruhigen Bewegung von außerhalb links
   bis außerhalb rechts — ohne Drehung, ohne Sprünge. */
.intro__rolle {
  position: absolute;
  left: 0;
  top: var(--intro-rolle-oben, 30%);
  height: var(--intro-rolle-hoehe, 300px);
  aspect-ratio: 120 / 360;
  visibility: hidden;
  will-change: transform;
  transform: translate3d(var(--intro-roll-von, -60vw), 0, 0);
}
.intro--start .intro__rolle {
  visibility: visible;
  animation: intro-rollen var(--intro-roll-dauer, 1350ms) linear
             var(--intro-roll-verzug, 200ms) both;
}
@keyframes intro-rollen {
  from { transform: translate3d(var(--intro-roll-von, -60vw), 0, 0); }
  to   { transform: translate3d(var(--intro-roll-bis, 110vw), 0, 0); }
}
.intro__rollbild { display: block; width: 100%; height: 100%; }

/* Farben der Rolle: die vier Logofarben als klar getrennte Felder auf der
   Walze, Bügel und Griff in den neutralen Dunkeltönen des Design-Systems. */
.intro__walze-rot   { fill: var(--logo-rot); }
.intro__walze-gruen { fill: var(--logo-gruen); }
.intro__walze-gelb  { fill: var(--logo-gelb); }
.intro__walze-blau  { fill: var(--logo-blau); }
.intro__walze-rand  { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.intro__buegel      { fill: none; stroke: var(--ink); stroke-width: 7;
                      stroke-linecap: round; stroke-linejoin: round; }
.intro__griff       { fill: var(--ink); }

/* Sehr dezente Farbspur: vier harte Farbstreifen (kein Verlauf), die
   HINTER dem Logo liegen und mit der Walze mitlaufen — gleiche lineare
   Zeiten wie die Rolle, die rechte Kante sitzt an der Walzenmitte
   (--intro-spur-versatz aus intro.js). Sobald die Rolle den Bildschirm
   verlassen hat, blendet sich die Spur aus: Das stehende Logo ist frei. */
.intro__spur {
  position: absolute;
  left: 0;
  top: calc(var(--intro-rolle-oben, 30%) + var(--intro-rolle-hoehe, 300px) * 0.017);
  width: 300vw;
  height: calc(var(--intro-rolle-hoehe, 300px) * 0.766);
  background: linear-gradient(to bottom,
    var(--logo-rot)   0 25%,
    var(--logo-gruen) 25% 50%,
    var(--logo-gelb)  50% 75%,
    var(--logo-blau)  75% 100%);
  opacity: 0.06;
  visibility: hidden;
  will-change: transform;
  transform: translate3d(calc(var(--intro-roll-von, -60vw)
             + var(--intro-spur-versatz, 40px) - 300vw), 0, 0);
}
.intro--start .intro__spur {
  visibility: visible;
  animation:
    intro-spur-rollen var(--intro-roll-dauer, 1350ms) linear
                      var(--intro-roll-verzug, 200ms) both,
    intro-spur-weg 250ms ease-out
                   calc(var(--intro-roll-verzug, 200ms) + var(--intro-roll-dauer, 1350ms))
                   forwards;
}
@keyframes intro-spur-rollen {
  from { transform: translate3d(calc(var(--intro-roll-von, -60vw)
                    + var(--intro-spur-versatz, 40px) - 300vw), 0, 0); }
  to   { transform: translate3d(calc(var(--intro-roll-bis, 110vw)
                    + var(--intro-spur-versatz, 40px) - 300vw), 0, 0); }
}
@keyframes intro-spur-weg {
  to { opacity: 0; }
}

/* Weiches Ausblenden der ganzen Ebene; intro.js entfernt sie am Ende
   vollständig aus dem Dokument. */
.intro--start {
  animation: intro-weg var(--intro-weg-dauer, 300ms) ease-in-out
             var(--intro-weg-verzug, 2150ms) forwards;
}
@keyframes intro-weg {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Einen Überspringen-Knopf gab es bis 07.08.2026 unten rechts auf der
   Intro-Ebene; er ist auf Wunsch entfallen (Markup in partials/intro.php,
   Bedienung in assets/js/intro.js). Die Ebene trägt seither überhaupt kein
   Bedienelement mehr — sie läuft die rund 2,2 bis 2,5 Sekunden durch, die
   Escape-Taste beendet sie vorzeitig. */

/* Reduzierte Bewegung: Das Intro entfällt vollständig (der Startblock
   prüft das zuerst); dieser Riegel hält es zusätzlich auf CSS-Ebene fern,
   inklusive der Scroll-Sperre. Kein Warten, kein Blitzen. */
@media (prefers-reduced-motion: reduce) {
  html.mtg-intro { overflow: visible; }
  html.mtg-intro .intro { display: none; }
}


/* == 25  ANHEBEN BEIM ÜBERFAHREN ========================================== */
/* Was man anklicken kann, hebt sich beim Überfahren um zwei bis drei Pixel
   an und senkt sich beim Drücken unter seine Ruhelage. Das gibt der Seite
   spürbare Antwort, ohne dass sich am Aufbau etwas ändert: Die Bewegung
   verschiebt ausschließlich das Element selbst (transform) — kein Nachbar
   rückt, keine Zeile bricht um, nichts springt.

   Weg, Schatten und Dauer stehen als Stellschrauben in Abschnitt 1. Hier
   steht nur, WO die Bewegung sitzt. Entschieden wurde nach vier Regeln:

   1  Nur was wirklich zu einem Klick führt. Karten ohne Verweis — die
      Gewerbe-Kacheln, die Preisfaktoren, die Qualitätsstufen, die
      Verlässlichkeits-Punkte — bleiben liegen: eine Fläche, die sich hebt,
      verspricht sonst einen Klick, den es nicht gibt. Geprüft wird das im
      Blatt selbst, mit :has(a). Dieselbe Karte hebt sich auf der Startseite
      (mit Verweis) und bleibt auf der Gewerbe-Seite (ohne Verweis) ruhig,
      ohne dass im PHP eine Zusatzklasse nötig wäre.

   2  Nur auf Zeigergeräten. Auf Berührbildschirmen kennt der Browser kein
      Überfahren; der angehobene Zustand bliebe nach dem Antippen hängen,
      bis man woanders hintippt.

   3  Nichts, was seinen Platz halten muss. Die Menüpunkte im Kopf und die
      Kacheln im mobilen Menü behalten ihre bewusst ortsfeste Machart
      (Abschnitte 6 und 7) — dort trägt die Farbmarkierung den Zustand, und
      genau deshalb wackelt beim Überfahren des Menüs keine Zeile.

   4  Der gedrückte Zustand gilt überall, auch am Handy: Er braucht kein
      Überfahren und ist dort die einzige unmittelbare Antwort auf ein
      Antippen.

   Die transition-Zeilen stehen hier vollständig, samt der Farbwechsel aus
   den Abschnitten 5, 6 und 24. Das ist keine Doppelung aus Versehen: Eine
   transition-Zeile lässt sich nicht ergänzen, nur ersetzen. Wer dort eine
   Farbe hinzunimmt, trägt sie hier nach. */

.btn {
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--heben-dur) var(--ease),
              box-shadow var(--heben-dur) var(--ease);
}

.phonelink {
  transition: background-color var(--dur) var(--ease),
              transform var(--heben-dur) var(--ease),
              box-shadow var(--heben-dur) var(--ease);
}

.lkarte,
.ldetail__glied {
  transition: transform var(--heben-dur) var(--ease),
              box-shadow var(--heben-dur) var(--ease);
}

/* Der Pfeil hebt sich nicht, er geht einen Schritt in die Richtung, in die
   er zeigt — dieselbe Idee, passend zur Form. */
.pfeillink__icon { transition: transform var(--heben-dur) var(--ease); }


/* --- Überfahren (nur Maus, Trackpad, Stift) ------------------------------ */
@media (hover: hover) and (pointer: fine) {

  .btn:hover,
  .phonelink:hover {
    transform: translateY(calc(-1 * var(--heben)));
    box-shadow: var(--heben-schatten);
  }

  .pfeillink:hover .pfeillink__icon { transform: translateX(3px); }

  /* Karten mit Verweis. Sie heben sich, sobald der Zeiger irgendwo auf der
     Karte steht — nicht erst über der Überschrift: Die Karte ist ein
     zusammenhängendes Angebot, der unterstrichene Titel bleibt sichtbar das
     Ziel. Karten ohne Verweis lässt :has(a) unberührt.

     Eigene Regel, absichtlich nicht mit den Knöpfen zusammengefasst: Ein
     Browser ohne :has verwirft die ganze Regel, in der es vorkommt. So
     verliert er nur das Anheben der Karten, nicht das der Knöpfe. */
  .lkarte:has(.lkarte__titel a):hover,
  .ldetail__glied:has(.ldetail__titel a):hover {
    transform: translateY(calc(-1 * var(--heben-karte)));
    box-shadow: var(--heben-schatten-karte);
  }
}


/* --- Tastatur ------------------------------------------------------------
   Wer sich mit der Tabulatortaste durch die Seite bewegt, sieht dasselbe
   Verhalten wie mit der Maus — unabhängig vom Gerät, deshalb außerhalb der
   Zeigerabfrage oben. Der Fokusrahmen aus Abschnitt 2 bleibt daneben
   bestehen; er, nicht die Bewegung, trägt die Information. */
.lkarte:has(.lkarte__titel a:focus-visible),
.ldetail__glied:has(.ldetail__titel a:focus-visible) {
  transform: translateY(calc(-1 * var(--heben-karte)));
  box-shadow: var(--heben-schatten-karte);
}
.pfeillink:focus-visible .pfeillink__icon { transform: translateX(3px); }


/* --- Drücken -------------------------------------------------------------
   Gilt bewusst auf jedem Gerät, auch ohne Überfahren: Der Knopf geht unter
   seine Ruhelage und der Schatten verschwindet — die Fläche liegt für den
   Moment des Drückens auf der Seite auf. */
.btn:active,
.phonelink:active {
  transform: translateY(var(--druck));
  box-shadow: none;
}


/* --- Reduzierte Bewegung -------------------------------------------------
   Wer Bewegung abbestellt hat, bekommt keine: Die Verschiebung entfällt
   vollständig. Der weiche Schatten bleibt — er ist ein ruhender Zustand,
   keine Bewegung, und hält die Rückmeldung beim Überfahren erhalten.
   Steht hier und nicht in Abschnitt 23, weil es sonst in der Reihenfolge
   des Blattes wirkungslos wäre. */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .phonelink,
  .lkarte,
  .ldetail__glied,
  .pfeillink__icon { transition: none; }

  .btn:hover,
  .btn:active,
  .phonelink:hover,
  .phonelink:active,
  .pfeillink:hover .pfeillink__icon,
  .pfeillink:focus-visible .pfeillink__icon { transform: none; }

  .lkarte:has(.lkarte__titel a):hover,
  .ldetail__glied:has(.ldetail__titel a):hover,
  .lkarte:has(.lkarte__titel a:focus-visible),
  .ldetail__glied:has(.ldetail__titel a:focus-visible) { transform: none; }
}


/* == 26  EINBLENDEN BEIM SCROLLEN ========================================= */
/* Inhaltsblöcke, die beim Laden unterhalb des Sichtfensters liegen, kommen
   beim Heranscrollen mit einer kleinen Aufwärtsbewegung ins Bild; Blöcke
   nebeneinander (Karten, Schritte) folgen leicht versetzt. Weg und Dauer
   stehen in Abschnitt 1 (--anim-weg, --anim-dur).

   Arbeitsteilung mit main.js (Abschnitt 7): Das Skript versteckt beim
   Laden NUR, was unterhalb des Sichtfensters liegt (anim-bereit), und
   blendet es beim Eintritt ein (anim-sichtbar). Nach dem Einblenden
   entfernt es beide Klassen samt Versatz wieder — der Block ist danach
   von einem nie versteckten nicht mehr zu unterscheiden, und Übergänge
   der Bauteile selbst (etwa das Anheben der Karten, Abschnitt 25) laufen
   wieder ohne den Einblende-Versatz.

   Drei Absicherungen:
   - Ohne JavaScript existiert keine der Klassen — alles ist sichtbar.
   - Bei reduzierter Bewegung versteckt main.js gar nicht erst; die Regel
     hier unten fängt zusätzlich den Fall, dass die Einstellung erst nach
     dem Verstecken umgeschaltet wird.
   - Beim Drucken wird jeder noch versteckte Block gezeigt — sonst blieben
     Seiten unterhalb des Sichtfensters im Ausdruck leer. */

.anim-bereit {
  opacity: 0;
  transform: translateY(var(--anim-weg));
}

.anim-bereit.anim-sichtbar {
  opacity: 1;
  transform: none;
  transition: opacity var(--anim-dur) var(--ease),
              transform var(--anim-dur) var(--ease);
  /* Der Versatz nebeneinanderliegender Blöcke; setzt main.js je Element. */
  transition-delay: var(--anim-verzug, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .anim-bereit { opacity: 1; transform: none; }
}

@media print {
  .anim-bereit { opacity: 1 !important; transform: none !important; }
}