/* ==========================================================================
   04-KOMPONENTEN
   --------------------------------------------------------------------------
   Reihenfolge:
   1  Buttons          6  Leistungs-Akkordeon
   2  Navigation       7  Galerie
   3  Hero + Video     8  Kontakt / Formular
   4  Bewertungs-Laufband  9  Karte (Google Maps mit Einwilligung)
   5  Karten / Kacheln 10 Footer + Zum-Anfang
   ========================================================================== */


/* ==========================================================================
   1 — BUTTONS
   Umriss in der Markenfarbe, Fläche leer. Beim Überfahren läuft ein
   Farbverlauf von links ein, die Schrift wird weiß. Kein Schatten.
   ========================================================================== */

/* Grundform: Umriss in der Markenfarbe, Fläche leer. Beim Überfahren
   läuft ein Farbverlauf von links nach rechts ein und die Schrift wird
   hell. Kein Schatten — die Bewegung trägt den Effekt allein.

   Der Verlauf geht von einem helleren zu einem dunkleren Ton derselben
   Farbe. Eine einzelne Volltonfläche wirkt flach; zwei Nuancen geben
   der Fläche Tiefe, ohne bunt zu werden. */
.btn {
  --btn-linie: var(--c-accent);
  --btn-fg:    var(--c-accent);
  --btn-fg-an: #FFFFFF;
  --btn-hell:  var(--c-accent);
  --btn-dunkel:var(--c-accent-deep);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  border: 1.5px solid var(--btn-linie);
  border-radius: var(--radius);
  background: transparent;
  color: var(--btn-fg);
  font-family: var(--f-label);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--d-base) var(--e-out);
}

/* Die einlaufende Fläche. transform statt width, damit der Browser sie
   auf der Grafikkarte bewegen kann und nichts neu umbricht. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--btn-hell), var(--btn-dunkel));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-slow) var(--e-out);
}
.btn:hover,
.btn:focus-visible { color: var(--btn-fg-an); }
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }

/* Beim Loslassen läuft die Fläche nach rechts hinaus, statt einfach zu
   verschwinden — die Bewegung bleibt in einer Richtung. */
.btn:not(:hover)::before { transform-origin: right center; }

.btn:active { transform: translateY(1px); }

.btn--gross { padding: var(--s-5) var(--s-7); font-size: 0.875rem; }

/* Gefüllte Fassung für die wichtigste Handlung einer Seite.
   Beim Überfahren dreht sich der Verlauf, statt zu verblassen. */
.btn--voll {
  --btn-fg: #FFFFFF;
  border-color: transparent;
  background: linear-gradient(100deg, var(--c-accent), var(--c-accent-deep));
}
.btn--voll::before {
  background: linear-gradient(100deg, var(--c-accent-deep), var(--c-accent));
}

/* Auf dunklem Grund: Umriss und Schrift hell, Füllung bleibt farbig. */
.btn--hell {
  --btn-linie: rgba(255, 255, 255, 0.55);
  --btn-fg: #FFFFFF;
  --btn-fg-an: #FFFFFF;
}
.btn--hell:hover { --btn-linie: transparent; }


/* Auf schmalen Geräten: Umbruch erlauben und volle Breite.
   Ohne das schiebt eine lange Beschriftung wie "Kostenloses Angebot
   anfordern" den Button über den rechten Rand hinaus — sichtbar
   abgeschnitten, weil body overflow-x versteckt. */
@media (max-width: 30rem) {
  .btn {
    white-space: normal;
    text-align: center;
    width: 100%;
    padding-inline: var(--s-4);
  }
  .btn--gross { padding-inline: var(--s-4); }
}

/* Reiner Textlink mit animiertem Unterstrich — für Sekundäraktionen */
.link-pfeil {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--f-label);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--c-accent);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid currentColor;
}
.link-pfeil svg, .link-pfeil .pfeil {
  transition: transform var(--d-base) var(--e-out);
}
.link-pfeil:hover svg, .link-pfeil:hover .pfeil { transform: translateX(0.4rem); }


/* ==========================================================================
   2 — NAVIGATION
   Sticky, wird beim Scrollen kompakter, blendet beim Runterscrollen aus.
   ========================================================================== */

.site-nav {
  --nav-h: 4.75rem;
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  /* Feiner Verlauf von Weiß in den Papierton. Eine reine Volltonfläche
     wirkt an dieser Stelle stumpf; der Verlauf gibt der Leiste Tiefe,
     ohne dass er als Effekt auffällt. */
  background: linear-gradient(180deg, #FFFFFF 0%, var(--c-paper) 78%, var(--c-paper-warm) 100%);
  border-bottom: 1px solid var(--c-line-soft);
  box-shadow: var(--sh-weich);
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
/* Beim Runterscrollen ausblenden, beim Hochscrollen sofort zurück.
   Gibt auf Mobil den vollen Bildschirm frei. */
.site-nav[data-versteckt="true"] { transform: translateY(-100%); }

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: var(--nav-h);
  transition: height var(--d-base) var(--e-out);
}
.site-nav[data-gescrollt="true"] { --nav-h: 3.9rem; }

.site-nav__logo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  flex: none;
}
.site-nav__logo img, .site-nav__logo svg {
  height: clamp(1.75rem, 3vw, 2.4rem);
  width: auto;
  transition: height var(--d-base) var(--e-out);
}
.site-nav__wortmarke {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  line-height: 1.05;
  text-transform: uppercase;
}
.site-nav__wortmarke span {
  display: block;
  font-family: var(--f-label);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-mute);
}

/* --- Desktop-Menü --- */
.nav-liste {
  display: none;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}
.nav-liste li { margin: 0; }

.nav-liste a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--s-5);
  font-family: var(--f-label);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  /* Kein Umbruch: "Über uns" darf nicht zweizeilig werden und die
     Nav-Höhe sprengen. Lieber enger setzen als umbrechen lassen. */
  white-space: nowrap;
  overflow: hidden;
}
@media (max-width: 75rem) {
  /* Zwischen 1024 und 1200px wird es eng, sobald Telefonnummer und
     Wortmarke danebenstehen — dann das Innenmaß reduzieren. */
  .nav-liste a { padding-inline: var(--s-4); }
}
/* Akzentbalken fährt von unten ein */
.nav-liste a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--e-out);
}
.nav-liste a:hover::after,
.nav-liste a[aria-current="page"]::after { transform: scaleX(1); }
.nav-liste a[aria-current="page"] { font-weight: 700; }

.site-nav__aktion { display: none; flex: none; }

/* --- Mobil-Schalter (Burger → X, animiert) --- */
.nav-schalter {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: transparent;
  border: var(--b-bold);
  flex: none;
}
.nav-schalter__balken {
  position: relative;
  width: 1.25rem;
  height: 2px;
  background: var(--c-ink);
  transition: background-color var(--d-fast) var(--e-out);
}
.nav-schalter__balken::before,
.nav-schalter__balken::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--c-ink);
  transition: transform var(--d-base) var(--e-out);
}
.nav-schalter__balken::before { top: -6px; }
.nav-schalter__balken::after  { top:  6px; }

.nav-schalter[aria-expanded="true"] .nav-schalter__balken { background: transparent; }
.nav-schalter[aria-expanded="true"] .nav-schalter__balken::before { transform: translateY(6px) rotate(45deg); }
.nav-schalter[aria-expanded="true"] .nav-schalter__balken::after  { transform: translateY(-6px) rotate(-45deg); }

/* Umschaltpunkt Mobil → Desktop.
   MUSS nach den Basisregeln von .nav-liste, .site-nav__aktion und
   .nav-schalter stehen: alle vier Regeln haben dieselbe Spezifität,
   also entscheidet die Reihenfolge im Dokument. Stünde dieser Block
   weiter oben, bliebe der Burger auch auf dem Desktop sichtbar. */
@media (min-width: 64rem) {
  .nav-liste,
  .site-nav__aktion { display: flex; }
  .nav-schalter { display: none; }
}

/* --- Mobil-Overlay: Einträge staffeln sich herein --- */
.nav-overlay {
  position: fixed;
  /* Höhe ausgerechnet statt über `bottom: 0` aufgespannt.
     Grund: Sobald ein Projekt der Navigationsleiste einen `backdrop-filter`
     gibt (Flethi tut das), wird der Header selbst zum Bezugsrahmen für
     `position: fixed`. `bottom: 0` rechnet dann gegen die 77 px hohe
     Leiste statt gegen den Bildschirm — das Menü war 98 px hoch bei
     892 px Inhalt und praktisch unbedienbar. `top` bleibt korrekt, weil
     die Leiste ohnehin oben am Bildschirmrand klebt. */
  inset: var(--nav-h, 4.75rem) 0 auto 0;
  height: calc(100svh - var(--nav-h, 4.75rem));
  z-index: var(--z-overlay);
  display: grid;
  align-content: start;
  padding: var(--s-6) var(--gutter) var(--s-8);
  background: var(--c-paper);
  border-top: var(--b-bold);
  overflow-y: auto;
  overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition:
    clip-path var(--d-slow) var(--e-out),
    visibility 0s linear var(--d-slow);
}
.nav-overlay[data-offen="true"] {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition:
    clip-path var(--d-slow) var(--e-out),
    visibility 0s;
}

.nav-overlay__liste {
  margin: 0 0 var(--s-7);
  padding: 0;
  list-style: none;
  border-top: var(--b-hair);
}
.nav-overlay__liste li {
  margin: 0;
  border-bottom: var(--b-hair);
  /* Staffelung: jedes Element bekommt per JS --i gesetzt */
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out);
  transition-delay: calc(var(--i, 0) * 55ms + 180ms);
}
.nav-overlay[data-offen="true"] .nav-overlay__liste li {
  opacity: 1;
  transform: translateY(0);
}
.nav-overlay__liste a {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 8vw, 2.75rem);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}
/* Hier stand bis 08/2026 eine Nummerierung der Menüpunkte (01, 02, 03)
   über content: attr(data-nr). Patrick hat durchnummerierte Sektionen als
   „wirkt sofort nach Claude" beanstandet; die Regel wurde damals in den
   Sektionen entfernt, im Mobilmenü aber übersehen. Ersatzlos gestrichen.
   Die data-nr-Attribute im Markup können bleiben, sie tun nichts. */

@media (min-width: 64rem) {
  .nav-overlay { display: none; }
}


/* ==========================================================================
   3 — HERO mit rotierendem Videohintergrund
   Videos liegen gestapelt übereinander; JS blendet zum nächsten.
   ========================================================================== */

.hero {
  position: relative;
  display: grid;
  align-items: end;
  /* Füllt den sichtbaren Bereich unterhalb der Navigation vollständig.
     svh statt vh: berücksichtigt die eingeblendete Adressleiste auf dem
     Handy, sonst ragt der Hero dort unter den Bildschirmrand. */
  min-height: calc(100svh - var(--nav-h, 4.75rem));
  padding-block: var(--s-8);
  overflow: hidden;
  border-bottom: var(--b-bold);
  background: var(--c-ink);
  color: var(--c-paper);
  isolation: isolate;
}

.hero__medien {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--e-io);
  will-change: opacity;
}
.hero__video[data-aktiv="true"] { opacity: 1; }

/* Bild-Variante der Hero-Medien.
   Wenn kein Videomaterial vorliegt, rotieren stattdessen Standbilder.
   Gleiche Mechanik, gleiche Überblendung, nur ohne Abspielen. */
.hero__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s var(--e-io);
  will-change: opacity;
}
.hero__bild[data-aktiv="true"] { opacity: 1; }

/* Verlauf + Raster über dem Video: Text bleibt lesbar (Kontrast!),
   das Raster nimmt dem Video die Stock-Anmutung. */
.hero__medien::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Links dunkler als rechts: Der Text steht links, dort braucht es
     Kontrast. Rechts bleibt das Motiv sichtbar. Eine gleichmäßig dunkle
     Fläche über dem ganzen Bild verschenkt das Foto. */
  /* So dunkel wie nötig, so hell wie möglich. Der Text steht links,
     dort liegt der Verlauf am dichtesten; nach rechts gibt er das Motiv
     frei. Ein gleichmäßig dunkler Schleier über dem ganzen Bild macht
     das Foto wertlos und die Sektion zur schwarzen Fläche. */
  /* Über der gesamten Textspalte (etwa die linke Hälfte) bleibt der
     Verlauf dicht, danach gibt er das Motiv frei. Ein Foto mit hellen
     Flächen macht Text sonst genau dort unlesbar, wo man es beim
     Entwerfen nicht sieht. */
  background:
    linear-gradient(100deg,
      rgba(12,10,9,0.90) 0%,
      rgba(12,10,9,0.84) 38%,
      rgba(12,10,9,0.62) 56%,
      rgba(12,10,9,0.18) 100%),
    linear-gradient(to top, rgba(12,10,9,0.45) 0%, transparent 40%);
}

.hero__inhalt { position: relative; z-index: 1; }

/* Hier stand bis 08/2026 eine umrandete Pille mit einem farbigen Quadrat
   davor. Patrick hat beides am Kaya-Entwurf beanstandet („Hero-Pille weg"),
   die Korrektur wurde in art-direktion.md dokumentiert, im CSS aber nie
   ausgeführt. Jetzt: nur Text, keine Umrandung, kein Zeichen davor. */
.hero__kicker {
  display: block;
  margin-bottom: var(--s-4);
  font-family: var(--f-label);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
@media (max-width: 30rem) {
  /* Das weite Tracking macht den Kicker auf 390px breiter als den
     Bildschirm. Enger setzen und umbrechen lassen, statt abzuschneiden. */
  .hero__kicker {
    flex-wrap: wrap;
    letter-spacing: 0.1em;
    font-size: 0.6875rem;
  }
}

.hero__titel {
  font-size: var(--t-mega);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-mega);
  text-transform: uppercase;
  margin-bottom: var(--s-5);
  max-width: 20ch;
}
/* Hervorgehobene Zeile bleibt WEISS.
   Die Markenfarbe hat auf einem Foto zu wenig Kontrast: Ein mittleres
   Blau vor grauem Untergrund verschwindet, und der wichtigste Satz der
   Seite ist dann der am schlechtesten lesbare. Rhythmus entsteht hier
   über Zeilenumbruch und Größe, nicht über Farbe. */
.hero__titel em {
  font-style: normal;
  color: inherit;
}
.hero__titel .umrandet {
  -webkit-text-stroke: 1.5px var(--c-paper);
  color: transparent;
}

.hero__text {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: rgba(246,242,235,0.85);
  max-width: 44ch;
  margin-bottom: var(--s-6);
}

.hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

/* Schaltflächen auf dem Hero
   --------------------------------------------------------------------
   Der Haupt-CTA ist hier WEISS GEFÜLLT mit dunkler Schrift. Ein blauer
   Umriss auf einem Foto ist kaum zu erkennen, und genau die wichtigste
   Handlung der Seite darf nicht die unauffälligste sein.
   Beim Überfahren läuft die Markenfarbe ein und die Schrift wird weiß. */
.hero .btn {
  --btn-linie: #FFFFFF;
  --btn-fg: var(--c-ink);
  --btn-fg-an: #FFFFFF;
  background: #FFFFFF;
}
.hero .btn::before {
  background: linear-gradient(100deg, var(--c-accent), var(--c-accent-deep));
}

/* Zweitrangige Handlung: nur Umriss, damit die Rangfolge sichtbar bleibt. */
/* border-color und background ausgeschrieben, weil die Regel darüber
   beides für alle .btn im Hero festlegt. */
.hero .btn--offen {
  --btn-fg: #FFFFFF;
  --btn-fg-an: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.7);
  background: transparent;
  backdrop-filter: blur(2px);
}
.hero .btn--offen:hover { border-color: transparent; }

/* Faktenzeile am unteren Rand des Hero */
.hero__fakten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0;
  margin-top: var(--s-8);
  border-top: 1.5px solid rgba(246,242,235,0.3);
}
.hero__fakt {
  padding: var(--s-5) var(--s-4) 0 0;
}
.hero__fakt b {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.hero__fakt span {
  font-family: var(--f-label);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(246,242,235,0.65);
}

/* Video-Fortschrittsanzeige: zeigt, welches Video läuft */
.hero__punkte {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-6);
  z-index: 2;
  display: flex;
  gap: var(--s-2);
}
.hero__punkt {
  width: 2rem;
  height: 3px;
  padding: 0;
  border: 0;
  background: rgba(246,242,235,0.3);
}
.hero__punkt[aria-current="true"] { background: var(--c-accent); }

@media (max-width: 47.9375rem) {
  .hero__punkte { display: none; }
  .hero { min-height: min(38rem, 88svh); }
}

/* Deutsche Komposita sind lang: "Malerhandwerk", "Fassadensanierung",
   "Wärmedämmverbundsystem". Ein einzelnes solches Wort sprengt auf 390 px
   die Zeile und wird von overflow-x: hidden lautlos abgeschnitten.
   Deshalb geht der Schriftgrad hier deutlich weiter herunter, als die
   clamp-Formel allein es täte. */
@media (max-width: 30rem) {
  .hero__titel { font-size: clamp(1.75rem, 8.2vw, 2.6rem); }
}
@media (max-width: 22rem) {
  .hero__titel { font-size: 1.6rem; }
}


/* ==========================================================================
   4 — BEWERTUNGS-LAUFBAND (echte Google-Rezensionen)
   Endlos von links nach rechts, pausiert bei Hover und Fokus.
   ========================================================================== */

.laufband {
  --tempo: 60s;
  position: relative;
  padding-block: var(--s-6);
  border-block: 1px solid var(--c-line-soft);
  background: var(--c-paper-warm);
  overflow: hidden;
}

.laufband__kopf {
  /* Wird nicht mehr verwendet: Note, Anzahl und Quelle interessieren
     niemanden, die Bewertungen selbst schon. Regel bleibt für den Fall,
     dass ein Betrieb wirklich viele Bewertungen hat (ab etwa 50). */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-5);
  padding-inline: var(--gutter);
  font-family: var(--f-label);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.laufband__note {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-ink);
  font-weight: 700;
}
.laufband__note b { font-size: 1rem; }

.laufband__spur {
  display: flex;
  width: max-content;
  gap: var(--s-4);
  animation: laufband-links var(--tempo) linear infinite;
}
/* Läuft bewusst DURCH — auch beim Überfahren und bei Berührung.
   Ein Band, das unter dem Finger stehen bleibt, wirkt wie ein Fehler,
   und auf dem Handy löst jede Wischgeste ungewollt den Halt aus.
   Ausgenommen: Tastaturfokus, damit ein Link erreichbar bleibt. */
.laufband:focus-within .laufband__spur { animation-play-state: paused; }

@keyframes laufband-links {
  from { transform: translateX(0); }
  /* -50%, weil die Liste im HTML zweimal steht (nahtlose Schleife) */
  to   { transform: translateX(-50%); }
}

.rezension {
  flex: none;
  width: min(24rem, 82vw);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: #FFFFFF;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-weich);
}
.rezension__sterne {
  display: flex;
  gap: 2px;
  color: var(--c-accent);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
}
.rezension__text {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.55;
  max-width: none;
  /* Lange Rezensionen sauber kürzen, statt Kartenhöhe zu sprengen */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rezension__quelle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: var(--b-soft);
  font-family: var(--f-label);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.rezension__quelle b { color: var(--c-ink); }


/* ==========================================================================
   5 — KARTEN / KACHELN
   ========================================================================== */

/* Leistungs- oder Verweiskachel mit Nummer und Hover-Füllung */
.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-lg);

  /* ACHTUNG, hier lag ein Fehler:
     Die Kachel hatte eine feste weiße Fläche, aber die Textfarbe kam aus
     var(--c-ink). Innerhalb einer .ist-dunkel-Sektion ist --c-ink hell,
     also stand heller Text auf weißem Grund und war unlesbar.
     Deshalb wird die Textfarbe hier zusammen mit der Fläche fest gesetzt.
     Regel für alle künftigen Komponenten: Wer den Hintergrund festschreibt,
     muss auch die Schriftfarbe festschreiben. */
  --kachel-grund: #FFFFFF;
  --kachel-text:  #14110F;
  --kachel-meta:  #6E6862;
  background: var(--kachel-grund);
  color: var(--kachel-text);

  /* Lange Wörter wie "Wärmedämmverbundsystem" dürfen die Kachel nicht
     sprengen — sie werden umbrochen statt überzulaufen. */
  overflow-wrap: break-word;
  min-width: 0;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  /* Zur Farbe siehe den Block unten — sie darf nicht mitlaufen. */
  transition:
    transform var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out),
    color 90ms linear;
}
/* Fläche fährt von unten hoch */
.kachel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-ink);
  transform: translateY(101%);
  /* Rückweg zügig, damit das Fenster unten kurz bleibt. */
  transition: transform 200ms var(--e-out);
}
/* Die Schrift wird hell, weil die dunkle Fläche darunter liegt. Der
   Wechsel muss deshalb an die Fläche gekoppelt sein, nicht an eine
   eigene Dauer.

   Vorher lief die Fläche 620 ms, die Farbe 320 ms. Für rund 300 ms stand
   damit helle Schrift auf noch weißer Kachel — unlesbar. Genau das hat
   der Kunde gemeldet.

   Jetzt: Fläche 320 ms, Farbe schaltet erst nach 170 ms, wenn die Fläche
   die Kachel im Wesentlichen bedeckt. Auf dem Rückweg schaltet die Farbe
   sofort zurück (Regel oben, ohne Verzögerung), während die Fläche in
   200 ms abfährt.

   Wer hier die Zeiten anfasst, prüft beide Richtungen einzeln. */
.kachel:hover {
  --kachel-text: #F5F3EF;
  --kachel-meta: rgba(245, 243, 239, 0.7);
  transform: translateY(-4px);
  box-shadow: var(--sh-hoch);
  transition:
    transform var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out),
    color 90ms linear 170ms;
}
.kachel:hover .kachel__fuss { color: #FFFFFF; border-top-color: rgba(245,243,239,0.25); }
.kachel:hover::before {
  transform: translateY(0);
  transition: transform var(--d-base) var(--e-out);
}
.kachel:hover .kachel__nr { color: var(--c-accent); }

.kachel__nr {
  font-family: var(--f-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kachel-meta);
  transition: color var(--d-base) var(--e-out);
}
.kachel__titel {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  hyphens: auto;
}
.kachel p { font-size: var(--t-small); margin: 0; max-width: none; color: var(--kachel-text); }
.kachel h3 { color: var(--kachel-text); }
.kachel__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line-soft);
  font-family: var(--f-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.kachel__fuss .pfeil { transition: transform var(--d-base) var(--e-out); }
.kachel:hover .kachel__fuss .pfeil { transform: translateX(0.4rem); }

/* Große Bildkachel für Sektionsverweise (Startseite → Unterseiten) */
.bildkachel {
  position: relative;
  display: grid;
  align-content: end;
  gap: var(--s-3);
  min-height: 22rem;
  padding: var(--s-6);
  border: var(--b-bold);
  color: var(--c-paper);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}
.bildkachel img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--e-out), filter var(--d-slow) var(--e-out);
}
.bildkachel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(10,8,7,0.9), rgba(10,8,7,0.15) 70%);
  transition: background var(--d-slow) var(--e-out);
}
.bildkachel:hover img { transform: scale(1.05); }
.bildkachel:hover::after { background: linear-gradient(to top, rgba(198,58,23,0.85), rgba(10,8,7,0.25) 75%); }
.bildkachel__titel {
  font-size: var(--t-h2);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
}
.bildkachel p { max-width: 34ch; font-size: var(--t-small); color: rgba(246,242,235,0.85); }

/* Faktenblock mit Zähler-Animation */
.fakten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #FFFFFF;
}
.fakt {
  padding: var(--s-6) var(--s-5);
  border-right: var(--b-hair);
  border-bottom: var(--b-hair);
}
.fakt b {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--ls-mega);
  color: var(--c-accent);
}
.fakt span {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--f-label);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-mute);
}


/* ==========================================================================
   6 — LEISTUNGS-AKKORDEON
   Reine <details>-Elemente: funktioniert ohne JS, wird nur verschönert.
   ========================================================================== */

.leistungen { border-top: var(--b-bold); }

.leistung {
  border-bottom: var(--b-bold);
}
.leistung > summary {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-6) 0;
  cursor: pointer;
  list-style: none;
  transition: padding-inline var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
}
.leistung > summary::-webkit-details-marker { display: none; }
.leistung > summary:hover { padding-inline: var(--s-4); color: var(--c-accent); }

.leistung__nr {
  font-family: var(--f-label);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  color: var(--c-ink-mute);
  flex: none;
}
.leistung__titel {
  flex: 1;
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 3.2vw, 2.15rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  line-height: 1.05;
}
/* Plus wird zu Minus */
.leistung__zeichen {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}
.leistung__zeichen::before,
.leistung__zeichen::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--d-base) var(--e-out);
}
.leistung__zeichen::after { transform: rotate(90deg); }
.leistung[open] .leistung__zeichen::after { transform: rotate(0deg); }

.leistung__inhalt {
  display: grid;
  gap: var(--s-6);
  padding-bottom: var(--s-7);
}
@media (min-width: 62rem) {
  .leistung__inhalt { grid-template-columns: 1fr 1fr; align-items: start; }
}
.leistung__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--s-5);
}
.leistung__liste li {
  margin: 0 0 var(--s-2);
  padding-left: var(--s-5);
  font-size: var(--t-small);
  position: relative;
  break-inside: avoid;
}
.leistung__liste li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 8px;
  background: var(--c-accent);
}
@media (max-width: 34rem) {
  .leistung__liste { columns: 1; }
}


/* ==========================================================================
   7 — GALERIE
   Versetztes Raster; Bilder werden erst beim Klick groß (Lightbox via JS).
   ========================================================================== */

.galerie {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.galerie__figur {
  position: relative;
  margin: 0;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-paper-warm);
}
/* Jedes dritte Bild höher — bricht das Rasterschema auf */
@media (min-width: 48rem) {
  .galerie__figur:nth-child(3n+1) { grid-row: span 2; }
  .galerie__figur:nth-child(3n+1) img { aspect-ratio: 3 / 4; }
}
.galerie__figur img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1s var(--e-out), filter var(--d-slow) var(--e-out);
}
.galerie__figur:hover img { transform: scale(1.04); }

.galerie__bild-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.galerie__legende {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  background: linear-gradient(to top, rgba(10,8,7,0.88), transparent);
  color: var(--c-paper);
  font-family: var(--f-label);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: left;
  transform: translateY(0.5rem);
  opacity: 0;
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.galerie__figur:hover .galerie__legende,
.galerie__bild-btn:focus-visible .galerie__legende {
  opacity: 1;
  transform: translateY(0);
}

/* Vor/Nach-Vergleich mit Schieberegler — starkes Argument für Malerbetriebe */
.vergleich {
  position: relative;
  border: var(--b-bold);
  overflow: hidden;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
}
.vergleich img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.vergleich__nachher {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--pos, 50%));
}
.vergleich__griff {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 3px;
  background: var(--c-paper);
  pointer-events: none;
}
.vergleich__griff::after {
  content: "↔";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--c-paper);
  border: var(--b-bold);
  color: var(--c-ink);
  font-size: 1rem;
}
.vergleich__marke {
  position: absolute;
  top: var(--s-4);
  padding: var(--s-2) var(--s-3);
  background: var(--c-ink);
  color: var(--c-paper);
  font-family: var(--f-label);
  font-size: 0.625rem;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.vergleich__marke--vor    { left: var(--s-4); }
.vergleich__marke--nachher{ right: var(--s-4); background: var(--c-accent); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  gap: var(--s-4);
  padding: var(--gutter);
  background: rgba(10,8,7,0.94);
  border: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-base) var(--e-out);
}
.lightbox[open] { opacity: 1; pointer-events: auto; }
.lightbox::backdrop { background: rgba(10,8,7,0.94); }
.lightbox img {
  max-width: min(78rem, 100%);
  max-height: 82svh;
  object-fit: contain;
  border: var(--b-bold);
  border-color: var(--c-paper);
}
.lightbox__zu {
  position: absolute;
  top: var(--gutter);
  right: var(--gutter);
  width: 3rem; height: 3rem;
  background: transparent;
  border: 2px solid var(--c-paper);
  color: var(--c-paper);
  font-size: 1.25rem;
}
.lightbox__text {
  font-family: var(--f-label);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(246,242,235,0.8);
}


/* ==========================================================================
   8 — KONTAKT / FORMULAR
   ========================================================================== */

.formular {
  display: grid;
  gap: var(--s-5);
}
.feld { display: grid; gap: var(--s-2); }
.feld--zeile { grid-template-columns: 1fr 1fr; gap: var(--s-5); display: grid; }
@media (max-width: 40rem) { .feld--zeile { grid-template-columns: 1fr; } }

.feld label {
  font-family: var(--f-label);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.feld label .pflicht { color: var(--c-accent); }

.feld input,
.feld textarea,
.feld select {
  width: 100%;
  padding: var(--s-4);
  background: #FFFFFF;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius);
  font-size: var(--t-body);
  transition: box-shadow var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.feld input:focus,
.feld textarea:focus,
.feld select:focus {
  outline: none;
  box-shadow: var(--sh-weich);
  background: #fff;
}
.feld textarea { min-height: 9rem; resize: vertical; }

.feld input:user-invalid,
.feld textarea:user-invalid { border-color: var(--c-error); }
.feld__fehler { font-size: var(--t-small); color: var(--c-error); }

/* Einwilligung */
.zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--t-small);
  line-height: 1.5;
}
.zustimmung input[type="checkbox"] {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.15rem;
  accent-color: var(--c-accent);
  flex: none;
}

.formular__hinweis {
  font-size: var(--t-small);
  color: var(--c-ink-mute);
}
.formular__meldung {
  padding: var(--s-4);
  border: var(--b-bold);
  font-size: var(--t-small);
}
.formular__meldung[data-typ="erfolg"] { border-color: var(--c-success); color: var(--c-success); }
.formular__meldung[data-typ="fehler"] { border-color: var(--c-error);   color: var(--c-error); }

/* Kontaktdaten-Block neben dem Formular */
.kontaktdaten {
  display: grid;
  gap: 0;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #FFFFFF;
}
.kontaktdaten__zeile {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--s-4);
  padding: var(--s-5);
  border-bottom: var(--b-hair);
  align-items: baseline;
}
.kontaktdaten__zeile:last-child { border-bottom: 0; }
.kontaktdaten__zeile dt {
  font-family: var(--f-label);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.kontaktdaten__zeile dd { margin: 0; font-weight: 500; }
.kontaktdaten__zeile a { text-decoration: none; border-bottom: var(--b-thin); }
@media (max-width: 32rem) {
  .kontaktdaten__zeile { grid-template-columns: 1fr; gap: var(--s-1); }
}


/* ==========================================================================
   9 — KARTE (Google Maps, erst nach Einwilligung)
   DSGVO: Vor dem Klick wird KEINE Verbindung zu Google aufgebaut.
   Der iframe wird per JS erzeugt, die URL steht in data-karte-src.
   ========================================================================== */

.karte {
  position: relative;
  min-height: min(34rem, 70svh);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-lg);
  background: var(--c-paper-warm);
  background-image: var(--bg-raster);
  overflow: hidden;
}
.karte iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
}

.karte-platzhalter {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: start;
  gap: var(--s-4);
  padding: var(--s-7) var(--s-6);
  text-align: left;
}
.karte-platzhalter__titel {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
}
.karte-platzhalter p {
  font-size: var(--t-small);
  color: var(--c-ink-soft);
  max-width: 44ch;
}
.karte-platzhalter__meta {
  font-family: var(--f-label);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}


/* ==========================================================================
   10 — FOOTER + ZUM-ANFANG
   ========================================================================== */

/* ACHTUNG, hier lag ein Fehler:
   Der Block hat zuerst `background: var(--c-ink)` gesetzt und im selben
   Block danach `--c-ink` auf einen hellen Wert umdefiniert. Custom
   Properties werden aufgelöst, BEVOR die Deklarationen greifen — der
   Hintergrund bekam also den neuen hellen Wert, und heller Text stand
   auf hellem Grund. Der Footer war praktisch unlesbar.

   Deshalb: Hintergrund- und Textfarbe hier fest ausschreiben, und die
   Variablen erst danach für die Kindelemente umdefinieren. */
.site-footer {
  --fuss-grund: #14110F;
  --fuss-text:  #F5F3EF;

  border-top: 1px solid rgba(245, 243, 239, 0.14);
  background: var(--fuss-grund);
  color: var(--fuss-text);

  /* Gilt ab hier für alle Kindelemente, nicht mehr für den Block selbst */
  --c-ink: #F5F3EF;
  --c-line: #F5F3EF;
  --c-line-soft: rgba(245, 243, 239, 0.16);
  --c-ink-mute: #9A938A;
}

.site-footer__haupt {
  display: grid;
  gap: var(--s-8) var(--s-6);
  padding-block: var(--s-9) var(--s-8);
}
@media (min-width: 62rem) {
  .site-footer__haupt {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  }
}

.footer-marke { display: grid; gap: var(--s-4); align-content: start; }
.footer-marke img, .footer-marke svg {
  height: clamp(2.25rem, 4vw, 3rem);
  width: auto;
  /* Falls das Kundenlogo dunkel ist: auf dunklem Grund invertieren.
     Klasse gezielt setzen, nicht global. */
}
.footer-marke img.invertieren { filter: invert(1) brightness(1.9); }
.footer-marke p {
  font-size: var(--t-small);
  color: rgba(246,242,235,0.72);
  max-width: 34ch;
}

.footer-spalte h2 {
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: var(--b-soft);
  font-family: var(--f-label);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.footer-spalte ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-3);
}
.footer-spalte li { margin: 0; }
.footer-spalte a {
  display: inline-block;
  font-size: var(--t-small);
  text-decoration: none;
  color: rgba(245, 243, 239, 0.82);
  padding-bottom: 2px;
  /* Unterstrich wächst von links, statt dass ein Strich VOR dem Wort
     erscheint. Der vorangestellte Strich verschob den Text seitlich und
     sah aus wie ein Gedankenstrich im Menü. */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
}
.footer-spalte a:hover,
.footer-spalte a:focus-visible {
  color: #FFFFFF;
  background-size: 100% 1px;
}

.footer-spalte--einstellung button {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--t-small);
  color: rgba(246,242,235,0.82);
  text-align: left;
  font-family: inherit;
}
.footer-spalte--einstellung button {
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
}
.footer-spalte--einstellung button:hover { color: #FFFFFF; background-size: 100% 1px; }

.site-footer__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-top: var(--b-soft);
  font-family: var(--f-label);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.site-footer__unten a { text-decoration: none; }
.site-footer__unten a:hover { color: var(--c-paper); }

/* Zurück nach oben — erscheint erst nach etwas Scrollen */
.zum-anfang {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: var(--z-sticky);
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  background: var(--c-ink);
  color: var(--c-paper);
  border: var(--b-bold);
  border-color: var(--c-paper);
  box-shadow: var(--sh-weich);
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.zum-anfang[data-sichtbar="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Über dem Fuß tritt der Knopf zurück — dort stehen Telefon, E-Mail und
   Anschrift, und ein schwebender Kreis mitten darin kostet mehr, als er
   nützt. Gesetzt wird das Attribut in site.js per IntersectionObserver. */
.zum-anfang[data-im-weg="true"] {
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
}

/* Aliase für die bisherigen Namen, damit bestehende Seiten weiterlaufen.
   .btn--akzent war die gefüllte Fassung, .btn--offen die Umrissfassung. */
.btn--akzent { --btn-fg: #FFFFFF; border-color: transparent;
               background: linear-gradient(100deg, var(--c-accent), var(--c-accent-deep)); }
.btn--akzent::before { background: linear-gradient(100deg, var(--c-accent-deep), var(--c-accent)); }
.btn--offen  { /* entspricht der Grundform */ }


/* ==========================================================================
   11 — SEITENKOPF MIT BILD
   --------------------------------------------------------------------------
   Ersetzt den flächig dunklen Kopf der Unterseiten. Eine stumpfe schwarze
   Fläche wirkt wie ein Platzhalter, den jemand zu füllen vergessen hat.
   Mit Foto wird daraus ein Auftakt, der zur Startseite passt.

   Bewusst niedriger als der Hero der Startseite: Eine Unterseite soll
   schnell zum Inhalt kommen, nicht noch einmal groß auftreten.
   ========================================================================== */

.seitenkopf {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(26rem, 52svh);
  padding-block: var(--s-9) var(--s-7);
  overflow: hidden;
  isolation: isolate;
  background: var(--c-ink);
  color: #F5F3EF;
}

.seitenkopf__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gleiche Logik wie im Hero: links dunkler, weil dort der Text steht. */
.seitenkopf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(12,10,9,0.88) 0%, rgba(12,10,9,0.70) 45%, rgba(12,10,9,0.35) 100%),
    linear-gradient(to top, rgba(12,10,9,0.55) 0%, transparent 50%);
}

.seitenkopf .kicker { color: rgba(245, 243, 239, 0.75); }

.seitenkopf h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  max-width: 22ch;
  margin-top: var(--s-3);
}

.seitenkopf__text {
  margin-top: var(--s-5);
  max-width: 60ch;
  font-size: clamp(1rem, 1.15vw, 1.1875rem);
  line-height: 1.55;
  color: rgba(245, 243, 239, 0.85);
}


/* ==========================================================================
   12 — SEKTION MIT BILDHINTERGRUND
   Für Abschnitte, die sich abheben sollen, ohne in eine schwarze Fläche
   zu kippen. Das Bild bleibt erkennbar, der Text bleibt lesbar.
   ========================================================================== */

.sektion--bild {
  position: relative;
  isolation: isolate;
  color: #F5F3EF;
  background: var(--c-ink);
}
.sektion--bild > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sektion--bild::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(12,10,9,0.90) 0%, rgba(12,10,9,0.82) 55%, rgba(12,10,9,0.92) 100%);
}
.sektion--bild .kicker { color: rgba(245, 243, 239, 0.75); }
.sektion--bild .sektion-kopf p { color: rgba(245, 243, 239, 0.82); }


/* ==========================================================================
   13 — ABSCHLUSSBAND (Handlungsaufforderung vor dem Footer)
   --------------------------------------------------------------------------
   Nimmt den Farbton des Footers auf und geht nahtlos in ihn über. Eine
   eigene Signalfarbe an dieser Stelle zerschneidet das Seitenende in zwei
   fremde Blöcke.

   Die Schaltfläche steht in der Markenfarbe und hebt sich damit klar vom
   Untergrund ab. Farbe auf Farbe war der Fehler der ersten Fassung.
   ========================================================================== */

.abschluss {
  padding-block: var(--s-10);
  background: #14110F;
  color: #F5F3EF;
  text-align: center;
}
.abschluss__inner {
  display: grid;
  justify-items: center;
  gap: var(--s-6);
  max-width: 46rem;
  margin-inline: auto;
}
.abschluss h2 {
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  max-width: 20ch;
}
.abschluss p {
  max-width: 52ch;
  color: rgba(245, 243, 239, 0.78);
  margin: 0;
}
.abschluss__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
}
/* Haupt-CTA: gefüllt in der Markenfarbe, damit er auf dem dunklen
   Untergrund sofort ins Auge fällt. */
.abschluss .btn {
  --btn-fg: #FFFFFF;
  --btn-fg-an: #FFFFFF;
  border-color: transparent;
  background: linear-gradient(100deg, var(--c-accent), var(--c-accent-deep));
}
.abschluss .btn::before {
  background: linear-gradient(100deg, var(--c-accent-deep), var(--c-accent));
}
/* Zweitrangig: heller Umriss, keine Füllung.
   border-color muss hier ausgeschrieben werden: Die Regel darüber setzt
   sie für alle .btn im Abschlussband auf transparent, und eine bloße
   Neubelegung von --btn-linie erreicht die bereits aufgelöste
   border-color-Deklaration nicht mehr. */
.abschluss .btn--offen {
  --btn-fg: #F5F3EF;
  --btn-fg-an: #FFFFFF;
  border-color: rgba(245, 243, 239, 0.55);
  background: transparent;
}
.abschluss .btn--offen:hover { border-color: transparent; }

/* Direkt vor dem Footer: keine Kante zwischen beiden Flächen. */
.abschluss + .site-footer { border-top: 0; }


/* ==========================================================================
   14 — BILDRASTER MIT VERSETZTEN HÖHEN (Referenzen)
   --------------------------------------------------------------------------
   Spaltenbasiert statt Zeilenraster: Hoch- und Querformate stehen
   nebeneinander, ohne beschnitten zu werden. Jede Aufnahme behält ihr
   eigenes Seitenverhältnis, das Raster füllt sich von selbst.
   ========================================================================== */

.bildraster {
  columns: 4;
  column-gap: var(--s-4);
}
@media (max-width: 74rem)   { .bildraster { columns: 3; } }
@media (max-width: 52rem)   { .bildraster { columns: 2; } }
@media (max-width: 30rem)   { .bildraster { columns: 1; } }

.bildraster__figur {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 var(--s-4);
  /* Verhindert, dass eine Kachel über den Spaltenumbruch zerrissen wird */
  break-inside: avoid;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-paper-warm);
  text-decoration: none;
  color: inherit;
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.bildraster__figur:hover,
.bildraster__figur:focus-visible {
  transform: translateY(-4px) scale(1.015);
  box-shadow: var(--sh-hoch);
  z-index: 2;
}
.bildraster__figur img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--d-slow) var(--e-out);
}
.bildraster__figur:hover img { transform: scale(1.05); }

/* Beschriftung liegt auf dem Bild, mit Verlauf für die Lesbarkeit.
   Auf dem Handy dauerhaft sichtbar, weil es dort kein Überfahren gibt. */
.bildraster__text {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 2px;
  padding: var(--s-6) var(--s-4) var(--s-4);
  /* Kräftiger Verlauf: Die Bildunterkante ist mal dunkel, mal hell.
     Ein schwacher Verlauf lässt die Schrift auf hellen Motiven
     verschwinden, und man sieht es beim Entwerfen nicht, weil man auf
     das dunkle Beispielbild schaut. */
  background: linear-gradient(to top,
    rgba(12,10,9,0.94) 0%, rgba(12,10,9,0.80) 40%, rgba(12,10,9,0.35) 72%, transparent 100%);
  color: #FFFFFF;
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
@media (hover: hover) {
  .bildraster__text { opacity: 0; transform: translateY(0.75rem); }
  .bildraster__figur:hover .bildraster__text,
  .bildraster__figur:focus-visible .bildraster__text {
    opacity: 1;
    transform: translateY(0);
  }
}
.bildraster__kategorie {
  font-family: var(--f-label);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Helles Blau statt der Signalfarbe: Rot auf dunklem Verlauf hat zu
     wenig Kontrast und war praktisch unlesbar. */
  color: #9DBBF0;
}
.bildraster__titel {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: 1.2;
}


/* ==========================================================================
   15 — KONTAKT MIT GROSSER KARTE
   Kontaktdaten links, Karte rechts, beide über die volle Breite. Eine
   kleine Karte in einer engen Spalte wirkt wie ein nachträglich
   eingeschobener Hinweis; großzügig gesetzt wird sie zur Einladung.
   ========================================================================== */

.kontakt-breit {
  display: grid;
  gap: var(--s-7);
  align-items: stretch;
}
@media (min-width: 62rem) {
  .kontakt-breit { grid-template-columns: 5fr 7fr; gap: var(--s-8); }
}
.kontakt-breit .karte {
  min-height: min(38rem, 74svh);
  height: 100%;
}
.kontakt-breit__daten {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  justify-content: center;
}


/* ==========================================================================
   16 — SEKTIONSÜBERGÄNGE
   --------------------------------------------------------------------------
   Der wichtigste Befund aus der Bremen-Recherche: Bei vier von fünf
   Seiten, die dem Kunden gefielen, ist die Kante zwischen den Sektionen
   NICHT gerade. Gerade Kanten stapeln Blöcke, und genau so liest sich
   eine Vorlage.

   REGEL: Eine Sorte pro Seite. Welle ODER Schräge, nie beides gemischt.
   Nagengast hält die Schräge über die ganze Seite durch, und genau das
   macht den Unterschied zu einem Effekt, der einmal vorkommt.

   Beide Varianten arbeiten mit --uebergang-farbe. Diese Variable muss
   die Farbe der FOLGENDEN Fläche tragen, denn der Übergang gehört
   optisch zur nächsten Sektion, auch wenn er technisch an der
   vorherigen hängt.
   ========================================================================== */

.uebergang {
  /* ZWEI Farben, nicht eine: --von trägt die Fläche darüber, --farbe die
     darunter. Damit braucht der Übergang keine negative Margin und
     schneidet nichts aus der vorherigen Sektion heraus.

     Die erste Fassung überlappte die Sektion darüber und hat prompt die
     letzten beiden Spalten des Zahlenbands angeschnitten. */
  --uebergang-von: var(--c-paper);
  --uebergang-farbe: var(--c-paper);

  /* Deutlich, nicht dezent. Bei 4 vw ist die Schräge über 1440 px so
     flach, dass sie wie ein Renderfehler aussieht statt wie eine
     Gestaltungsentscheidung. Nagengast setzt sie kräftig, und genau das
     macht dort die Wirkung. */
  --uebergang-hoehe: clamp(3rem, 6.5vw, 8rem);

  position: relative;
  display: block;
  width: 100%;
  height: var(--uebergang-hoehe);
  background: var(--uebergang-von);
  overflow: hidden;
  pointer-events: none;
}
.uebergang svg {
  display: block;
  width: 100%;
  height: 100%;
}
.uebergang path { fill: var(--uebergang-farbe); }

/* --- Schräge ------------------------------------------------------------
   Reines clip-path, kein SVG nötig. Die Richtung wird über die Variante
   gesteuert, damit aufeinanderfolgende Schrägen parallel laufen und
   nicht gegeneinander zeigen. */
.uebergang--schraeg::after,
.uebergang--schraeg-links::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--uebergang-farbe);
}
.uebergang--schraeg::after       { clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.uebergang--schraeg-links::after { clip-path: polygon(0 0, 100% 100%, 0 100%); }

/* --- Welle --------------------------------------------------------------
   Als Inline-SVG im Markup, damit die Kurve sauber skaliert. Das Markup
   steht in den Seiten, hier nur die Darstellung. */
.uebergang--welle { background: transparent; }

/* Auf schmalen Geräten flacher: Eine steile Schräge frisst dort zu viel
   Höhe und schneidet Text an. */
@media (max-width: 47.9375rem) {
  .uebergang { --uebergang-hoehe: clamp(1.75rem, 7vw, 2.75rem); }
}


/* ==========================================================================
   17 — FARBKLECKS
   --------------------------------------------------------------------------
   Für einen Malerbetrieb die naheliegendste Bildmarke. Als SVG umgesetzt
   und nicht als Bilddatei: So nimmt der Klecks jede Markenfarbe an,
   skaliert verlustfrei und wiegt nichts.

   Sparsam einsetzen. Zwei bis drei pro Seite, in unterschiedlicher Größe
   und Deckkraft. Fünf Kleckse sind Konfetti.
   ========================================================================== */

.klecks {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  color: var(--c-accent);
  opacity: 0.10;
  width: clamp(12rem, 26vw, 28rem);
  aspect-ratio: 1;
}
.klecks svg { width: 100%; height: 100%; display: block; }
.klecks path { fill: currentColor; }

.klecks--klein  { width: clamp(6rem, 12vw, 12rem); }
.klecks--gross  { width: clamp(18rem, 40vw, 44rem); }
.klecks--zart   { opacity: 0.05; }
.klecks--kraeftig { opacity: 0.18; }

/* Ausrichtung. Der Klecks darf über die Sektionskante hinausragen,
   deshalb sitzt er mit negativen Werten. */
.klecks--oben-rechts  { top: -8%;    right: -6%; }
.klecks--unten-links  { bottom: -10%; left: -8%; }
.klecks--mitte-rechts { top: 30%;    right: -12%; }

/* Sektionen, die einen Klecks tragen, brauchen einen Bezugsrahmen und
   müssen ihren Inhalt darüber legen. */
.hat-klecks { position: relative; overflow: hidden; isolation: isolate; }
.hat-klecks > .wrap { position: relative; z-index: 1; }

@media (max-width: 47.9375rem) {
  /* Auf dem Handy nur der größte, sonst wird es unruhig. */
  .klecks--klein, .klecks--mitte-rechts { display: none; }
}


/* ==========================================================================
   18 — HERO OHNE NAVIGATION
   --------------------------------------------------------------------------
   Aus dem Miro-Beispiel der Bremen-Recherche: Im Hero liegt kein Text
   über dem Foto, deshalb braucht es keinen abdunkelnden Verlauf. Das
   Bild wirkt voll. Die Navigation blendet erst beim Scrollen ein.

   Voraussetzung: Der Hero trägt seine Aussage über eine eigene Fläche,
   etwa ein Banner am Rand. Text mitten im Bild ohne Verlauf ist nicht
   lesbar, und genau das war die Kritik an den bisherigen Entwürfen in
   der Gegenrichtung.

   Aktiviert über <body class="hero-ohne-nav">.
   ========================================================================== */

.hero-ohne-nav .site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  transition: transform var(--d-slow) var(--e-out);
}
/* site.js setzt data-eingeblendet, sobald der Hero verlassen wird. */
.hero-ohne-nav .site-nav[data-eingeblendet="true"] { transform: translateY(0); }

/* Der Hero rückt unter die Leiste, weil sie ihn nicht mehr verdrängt. */
.hero-ohne-nav .hero { min-height: 100svh; }

/* Ohne Text im Bild entfällt der Verlauf vollständig. */
.hero-ohne-nav .hero__medien::after { background: none; }

/* Sprunglink und Mobilschalter müssen trotzdem erreichbar bleiben:
   Ein Menü, das erst nach dem Scrollen existiert, sperrt sonst die
   Bedienung per Tastatur aus. */
.hero-ohne-nav .site-nav:focus-within { transform: translateY(0); }