/* ═══════════════════════════════════════════════════════════════
   DREINATH BAUUNTERNEHMUNG — Startseite „Schicht für Schicht“
   Palette: Anthrazit #26282B · Tiefschwarz #17181A · Signal #EA692E
            Putzweiß #EFEDE8 · Beton #A8A5A0
   Typo:    Big Shoulders Display (Display) · Instrument Sans (Text)
            Caveat (handschriftliche Akzente, wie auf dem Briefpapier)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --anthrazit: #26282B;
  --tief: #17181A;
  --signal: #EA692E;
  --signal-hell: #F07E48;
  --putz: #EFEDE8;
  --putz-tief: #E4E1DA;
  --beton: #A8A5A0;
  --weiss: #F7F6F3;

  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-script: "Caveat", cursive;

  --pad-x: clamp(1.25rem, 5vw, 5rem);
  --max-w: 82rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--anthrazit);
  background: var(--tief);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

address { font-style: normal; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--signal); color: #fff; }

/* ── Utility-Typo ─────────────────────────────────────────────── */

.kicker {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
}
.kicker--dark { color: var(--signal); }

h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
}

.script-note {
  font-family: var(--font-script);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  color: var(--signal);
  font-weight: 600;
}

/* ── Buttons ─────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 0.85em 1.7em;
  border: 1.5px solid transparent;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--signal); color: #fff; }
.btn--primary:hover { background: var(--signal-hell); }
.btn--ghost { border-color: rgba(255,255,255,0.45); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn--dark { background: var(--anthrazit); color: #fff; }
.btn--dark:hover { background: var(--tief); }
.btn--big { font-size: 1.05rem; padding: 1em 2em; }


/* ── Header ──────────────────────────────────────────────────── */

.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.9rem var(--pad-x);
  color: #fff;
  transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}
.site-head__logo { line-height: 0; margin-right: auto; }
.site-head__logo img { height: 58px; width: auto; }
.site-head .logo-dark { display: none; }

.site-head__nav { display: flex; gap: 1.8rem; }
.site-head__nav a {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.site-head__nav a:hover { opacity: 1; color: var(--signal); }

.site-head__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 0.55em 1.1em;
  border: 1.5px solid currentColor;
  border-radius: 99px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.site-head__tel:hover { background: var(--signal); border-color: var(--signal); color: #fff; }

/* ── Burger + Menütafel (nur schmale Bildschirme) ────────────── */

.burger {
  display: none;
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
  margin-left: 0.2rem;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}
.burger span,
.burger span::before,
.burger span::after {
  position: absolute;
  left: 50%;
  width: 1.5rem;
  height: 2px;
  margin-left: -0.75rem;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.15s ease;
}
.burger span { top: 50%; margin-top: -1px; }
.burger span::before,
.burger span::after { content: ""; left: 0; margin-left: 0; }
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }

.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--tief);
  color: var(--weiss);
  padding: 6.5rem var(--pad-x) 2.5rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* Wichtig: display:flex oben würde das hidden-Attribut aushebeln — die Tafel
   läge dann unsichtbar über der Seite und würde jeden Klick abfangen. */
.menu-panel[hidden] { display: none; }
.menu-panel:not(.open) { pointer-events: none; }
.menu-panel.open { opacity: 1; pointer-events: auto; }
.menu-panel__nav { display: flex; flex-direction: column; }
.menu-panel__nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: inherit;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(247, 246, 243, 0.14);
}
.menu-panel__nav a:hover,
.menu-panel__nav a:focus-visible { color: var(--signal); }
.menu-panel__nav a[aria-current] { color: var(--signal); }
.menu-panel__tel { margin-top: auto; text-align: center; }

/* Kopf bleibt über der offenen Tafel lesbar: dunkel, helles Logo */
body.menu-offen .site-head {
  background: var(--tief);
  color: var(--weiss);
  box-shadow: none;
  backdrop-filter: none;
}
body.menu-offen .site-head .logo-light { display: block; }
body.menu-offen .site-head .logo-dark { display: none; }
/* schwebende Knöpfe würden sonst über der Menütafel liegen */
body.menu-offen .fab-rueckruf,
body.menu-offen .fab--top { display: none; }

/* Header über hellem Inhalt */
.site-head.on-light {
  background: rgba(239, 237, 232, 0.92);
  backdrop-filter: blur(8px);
  color: var(--anthrazit);
  box-shadow: 0 1px 0 rgba(38, 40, 43, 0.08);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.site-head.on-light .logo-light { display: none; }
.site-head.on-light .logo-dark { display: block; }

/* ── Hero ────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--anthrazit);
  overflow: clip;
  color: #fff;
}

/* Gewölbe-Foto als Hintergrund, darüber ein Schleier für die Lesbarkeit */
.hero__media {
  position: absolute;
  inset: -10% 0;
  pointer-events: none;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  will-change: transform;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Schleier bewusst leicht — das Gewölbe soll zu sehen sein (Kundenwunsch
     12.08.2026, zweimal nachgeregelt). Die Fläche ist rund 2,8-mal so hell
     wie die Urfassung. Getragen wird die Lesbarkeit nicht mehr vom flächigen
     Verlauf, sondern von der engen Ellipse über dem Textblock plus dem
     Schatten an der Unterzeile.
     Nachgemessen über dem Foto: Headline 5,3:1 im schlechtesten Fünftel,
     Median 12,4:1. Die Unterzeile liegt stellenweise darunter — dort trägt
     ihr Textschatten, deshalb den bitte nicht wegnehmen. */
  background:
    radial-gradient(ellipse 50% 44% at 50% 46%, rgba(16, 15, 14, 0.52), rgba(16, 15, 14, 0)),
    linear-gradient(180deg,
      rgba(16, 15, 14, 0.46) 0%,
      rgba(16, 15, 14, 0.13) 26%,
      rgba(16, 15, 14, 0.17) 62%,
      rgba(16, 15, 14, 0.60) 100%);
}

.hero__inner {
  position: relative;
  text-align: center;
  padding: 5.5rem var(--pad-x) 3.5rem;
  max-width: 60rem;
}
.hero__kicker { margin-bottom: 1.4rem; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.2rem, 16vw, 12.5rem);
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.hero__title .word { display: inline-block; white-space: nowrap; }
.hero__title .char { display: inline-block; will-change: transform; }
.hero__script {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(1.7rem, 4.5vw, 3rem);
  color: var(--signal);
  transform: rotate(-2.5deg);
  margin-top: 0.4rem;
}
.hero__sub {
  max-width: 34rem;
  margin: 1.6rem auto 0;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  /* heller und mit Schatten, weil der Schleier dünner geworden ist:
     im Foto liegt hinter dem rechten Zeilenende eine helle Wand.
     Drei Lagen: enge Kante an der Schrift, mittlerer Kern, weiter
     Hof — eine einzelne weiche Lage trägt über der hellen Wand nicht. */
  color: rgba(247, 246, 243, 0.96);
  text-shadow:
    0 1px 2px rgba(10, 10, 12, 0.92),
    0 2px 10px rgba(10, 10, 12, 0.9),
    0 0 30px rgba(10, 10, 12, 0.78);
}
.hero__cta {
  margin-top: 2.2rem;
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero__hint {
  margin: clamp(2.2rem, 6vh, 4rem) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  white-space: nowrap;
  font-size: clamp(0.82rem, 1.05vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(247, 246, 243, 0.95);
  text-shadow:
    0 1px 2px rgba(10, 10, 12, 0.9),
    0 2px 14px rgba(10, 10, 12, 0.8);
}
.hero__hint i {
  width: 2px;
  height: 64px;
  border-radius: 2px;
  background: linear-gradient(var(--signal), rgba(234, 105, 46, 0));
  box-shadow: 0 0 12px rgba(234, 105, 46, 0.55);
  animation: hint 1.8s ease-in-out infinite;
}
/* Pfeilspitze unter der Linie — macht den Hinweis auf einen Blick lesbar */
.hero__hint::after {
  content: "";
  width: 15px;
  height: 15px;
  margin-top: -0.45rem;
  border-right: 2px solid var(--signal);
  border-bottom: 2px solid var(--signal);
  transform: rotate(45deg);
  animation: hint-pfeil 1.8s ease-in-out infinite;
}
@keyframes hint {
  0% { transform: scaleY(0); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: top; }
  56% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes hint-pfeil {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.55; }
  55% { transform: translateY(6px) rotate(45deg); opacity: 1; }
}

/* ── Film-Szenen ─────────────────────────────────────────────── */

.scene {
  position: relative;
  height: 100vh;
  overflow: clip;
  background: var(--tief);
}
.scene__media {
  position: absolute;
  inset: 0;
}
.scene__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.scene__caption {
  position: absolute;
  left: var(--pad-x);
  bottom: clamp(4rem, 12vh, 7rem);
  z-index: 4;
  max-width: 34rem;
  color: #fff;
  text-shadow: 0 2px 26px rgba(10, 10, 12, 0.55);
}
.scene__title {
  font-size: clamp(2.6rem, 7.5vw, 5.6rem);
  margin: 0.5rem 0 0.6rem;
}
.scene__line {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(247, 246, 243, 0.88);
}

/* dunkle Kante unten für Lesbarkeit der Captions */
.scene::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(transparent, rgba(12, 12, 14, 0.55));
  pointer-events: none;
}
.scene--wandel::after { display: none; }

/* ── Signature: Vorher/Nachher-Wipe ──────────────────────────── */

.scene--wandel .scene__media img { will-change: auto; }

.wipe__after {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: inset(0 0 0 calc(var(--wipe) * 1%));
}
.wipe__after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wipe__edge {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: calc(var(--wipe) * 1%);
  width: 3px;
  margin-left: -1.5px;
  background: var(--signal);
  box-shadow: 0 0 18px rgba(234, 105, 46, 0.65);
}

/* Greifer: bleibt nach der Animation auf der Kante stehen, damit der
   Besucher den Vergleich selbst verschieben kann. */
.wipe__griff {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: calc(var(--wipe) * 1%);
  transform: translate(-50%, -50%);
  width: 3.4rem;
  height: 3.4rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--signal);
  border-radius: 50%;
  background: rgba(18, 17, 16, 0.5);
  backdrop-filter: blur(3px);
  color: #fff;
  cursor: ew-resize;
  /* ohne das wird das Wischen auf dem Greifer zum Seitenscrollen */
  touch-action: none;
  box-shadow: 0 0 22px rgba(234, 105, 46, 0.45);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.wipe__griff:hover,
.wipe__griff:focus-visible { background: var(--signal); }
.wipe--zieht .wipe__griff {
  background: var(--signal);
  box-shadow: 0 0 30px rgba(234, 105, 46, 0.7);
}
/* Während des Ziehens keine Textauswahl über dem Bild */
.wipe--zieht { user-select: none; cursor: ew-resize; }

.wipe__label {
  position: absolute;
  z-index: 4;
  top: clamp(5.5rem, 14vh, 8rem);
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  color: #fff;
  text-shadow: 0 2px 18px rgba(10, 10, 12, 0.6);
}
.wipe__label--vorher { left: var(--pad-x); transform: rotate(-3deg); }
.wipe__label--nachher { right: var(--pad-x); transform: rotate(2.5deg); color: var(--signal-hell); }

.scene__caption--wandel { text-shadow: 0 2px 22px rgba(10, 10, 12, 0.75); }

/* Übergang Film → Inhalt */
.seam {
  position: absolute;
  z-index: 6;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(transparent, var(--putz));
  opacity: 0;
  pointer-events: none;
}

/* ── Inhalt (hell) ───────────────────────────────────────────── */

#content {
  position: relative;
  z-index: 5;
  background: var(--putz);
  color: var(--anthrazit);
}

#content h2 {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  margin: 0.6rem 0 1.4rem;
}

.intro {
  padding: clamp(4.5rem, 10vw, 8rem) var(--pad-x) clamp(3rem, 6vw, 5rem);
  max-width: var(--max-w);
  margin: 0 auto;
}
.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.intro__text p { max-width: 36rem; }
.intro__text p + p { margin-top: 1rem; }

/* Nur noch die vier Schlagworte, ohne Erläuterung — deshalb eine
   umbrechende Reihe statt des früheren Zweispalters. */
.intro__values {
  list-style: none;
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.6rem;
}
.intro__values li {
  border-left: 3px solid var(--signal);
  padding-left: 0.8rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro__figure { position: relative; }
.intro__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: 14px 14px 0 var(--signal);
}
/* Notiz steht unter dem orangen Versatz, nicht darauf — sonst
   liegt orange Schrift auf orangem Grund und ist nicht lesbar.
   Farbe bleibt Orange (.script-note), auf Wunsch. */
.intro__figure .script-note {
  display: block;
  margin-top: 1.9rem;
  padding-right: 0.5rem;
  text-align: right;
  transform: rotate(-2deg);
  transform-origin: right center;
}

.claim {
  margin: clamp(4rem, 9vw, 7rem) auto 0;
  max-width: var(--max-w);
  text-align: center;
}
.claim p {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 5.8rem);
  line-height: 0.95;
  text-transform: uppercase;
}
.claim cite {
  display: block;
  margin-top: 0.9rem;
  font-style: normal;
  font-family: var(--font-script);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--signal);
}

/* ── Ausklang: Ruhepunkt nach dem zweiten Vergleich ───────────
   Der Film endet, bevor der Kontakt-Block anfängt. Großzügig Luft
   nach oben und unten, damit das Zitat für sich steht. */

.ausklang {
  padding: clamp(5.5rem, 13vw, 10rem) var(--pad-x);
  max-width: var(--max-w);
  margin: 0 auto;
}
.ausklang .claim { margin-top: 0; }

/* ── Marquee ─────────────────────────────────────────────────── */

.marquee {
  margin-top: clamp(4rem, 9vw, 7rem);
  padding: 1.1rem 0;
  background: var(--signal);
  color: #fff;
  overflow: clip;
  transform: rotate(-1.2deg) scale(1.02);
}
.marquee__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  will-change: transform;
}

/* ── Leistungen ──────────────────────────────────────────────── */

.services {
  padding: clamp(4.5rem, 10vw, 8rem) var(--pad-x);
  max-width: var(--max-w);
  margin: 0 auto;
}
.services__grid {
  list-style: none;
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  /* Außenlinien über padding statt border: die inneren Linien sind
     durchscheinender Hintergrund im gap. Als border gerendert fällt die
     untere Linie bei krummen Zeilenhöhen dem Subpixel-Runden zum Opfer. */
  padding: 1px;
  background: rgba(38, 40, 43, 0.14);
}
.services__grid li {
  background: var(--putz);
  transition: background 0.25s ease, color 0.25s ease;
  /* hält den Zoom beim Überfahren in der Kachel */
  overflow: clip;
}
/* Füllzelle: 8 Kacheln gehen im Dreierraster nicht auf — ohne sie
   bliebe unten rechts die graue Rasterfläche stehen. */
.services__grid::after { content: ""; background: var(--putz); }
.services__grid li:hover {
  background: var(--anthrazit);
  color: var(--weiss);
}
/* ganze Kachel ist der Link zum Abschnitt auf der Leistungsseite.
   Kein Innenabstand mehr am Link selbst — das Bild läuft oben bis an
   die Kante, der Abstand sitzt jetzt im Textteil. */
.services__grid a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  color: inherit;
  text-decoration: none;
}
.services__grid img {
  display: block;
  width: 100%;
  /* ohne height:auto bliebe die Höhe aus dem HTML-Attribut height="450"
     stehen — das Bild wäre senkrecht gestreckt */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.services__grid li:hover img { transform: scale(1.04); }
.kachel {
  padding: 1.5rem 1.6rem 1.9rem;
}
.kachel::after {
  content: "";
  display: block;
  width: 1.6rem;
  height: 2px;
  margin-top: 1rem;
  background: var(--signal);
  transition: width 0.25s ease;
}
.services__grid li:hover .kachel::after { width: 3rem; }
.services__grid h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.55rem;
}
.services__grid li:hover h3 { color: var(--signal-hell); }
.services__grid p { font-size: 0.95rem; color: inherit; opacity: 0.82; }
.services__more { margin-top: 2.4rem; }

/* ── Kontakt-CTA ─────────────────────────────────────────────── */

.cta {
  position: relative;
  background: var(--putz);
}
.cta__band {
  position: relative;
  background: var(--anthrazit);
  /* unten 2px über die Box hinaus schneiden: sonst bleibt bei krummer
     Elementhöhe eine halbdurchsichtige Pixelreihe stehen, durch die der
     helle Sektionsgrund als weißer Strich zum Footer scheint */
  clip-path: polygon(0 5vw, 100% 0, 100% calc(100% + 2px), 0 calc(100% + 2px));
  color: #fff;
  padding: calc(5vw + clamp(3.5rem, 7vw, 6rem)) var(--pad-x) clamp(3.5rem, 7vw, 6rem);
}
/* Orange Diagonalkante entlang der Schräge — Zitat vom Briefkopf */
.cta__band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--signal);
  clip-path: polygon(0 5vw, 100% 0, 100% 0.6vw, 0 calc(5vw + 0.6vw));
  pointer-events: none;
}
.cta__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.5rem;
  align-items: center;
}
.cta h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); color: #fff; }
.cta__line { color: rgba(247, 246, 243, 0.8); max-width: 26rem; }
.cta__actions {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: stretch;
  text-align: center;
}
.cta__meta {
  font-size: 0.88rem;
  color: rgba(247, 246, 243, 0.65);
}
.cta__meta a { text-decoration: none; }
.cta__meta a:hover { color: var(--signal-hell); }

/* ── Footer ──────────────────────────────────────────────────── */

.foot {
  background: var(--tief);
  color: rgba(247, 246, 243, 0.85);
  padding: clamp(3rem, 6vw, 4.5rem) var(--pad-x) 5rem;
}
.foot__grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.foot__brand img { height: 48px; width: auto; }
.foot__web {
  margin-top: 1rem;
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--signal);
}
.foot__block h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 0.7rem;
}
.foot__block p { font-size: 0.95rem; font-style: normal; }
.foot__block a { text-decoration: none; }
.foot__block a:hover { color: var(--signal-hell); }
.foot__maps { display: inline-block; }

.foot__legal {
  max-width: var(--max-w);
  margin: 3rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(247, 246, 243, 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  font-size: 0.82rem;
  color: rgba(247, 246, 243, 0.55);
}
.foot__legal a { color: inherit; }
.foot__legal a:hover { color: var(--signal-hell); }

/* ── Haus-Strichzeichnung im CTA ─────────────────────────────── */

.cta__haus {
  display: block;
  width: clamp(210px, 26vw, 340px);
  height: auto;
  margin-bottom: 1.8rem;
  overflow: visible;
}
.cta__haus .haus-line {
  stroke: rgba(247, 246, 243, 0.92);
}
.cta__haus .haus-line--dach {
  stroke: var(--signal);
  filter: drop-shadow(0 0 10px rgba(234, 105, 46, 0.45));
}

/* ── Floating Buttons (Rückruf / Scroll-to-top) ──────────────── */

.fab {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(23, 24, 26, 0.35);
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.3s ease;
}
.fab:hover { transform: translateY(-2px); }

.fab-rueckruf {
  position: fixed;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 58;
}
.fab--phone {
  background: var(--signal);
  color: #fff;
  animation: fab-halo 4.5s ease-out infinite;
}
.fab--phone:hover { background: var(--signal-hell); animation-play-state: paused; }
.fab--phone svg { animation: klingeln 4.5s ease-in-out infinite; }

/* Halo-Schein: weicher orangefarbener Ring, synchron zum Klingeln */
@keyframes fab-halo {
  0%, 100% { box-shadow: 0 6px 22px rgba(23, 24, 26, 0.35), 0 0 0 0 rgba(234, 105, 46, 0.5); }
  10%      { box-shadow: 0 6px 22px rgba(23, 24, 26, 0.35), 0 0 0 0 rgba(234, 105, 46, 0.5); }
  38%      { box-shadow: 0 6px 22px rgba(23, 24, 26, 0.35), 0 0 0 16px rgba(234, 105, 46, 0); }
  39%      { box-shadow: 0 6px 22px rgba(23, 24, 26, 0.35), 0 0 0 0 rgba(234, 105, 46, 0); }
}
@keyframes klingeln {
  0%, 8%, 100% { transform: rotate(0); }
  1%, 3%, 5%   { transform: rotate(-14deg); }
  2%, 4%, 6%   { transform: rotate(12deg); }
}

/* Rückruf-Dialog */
.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.modal[hidden] { display: none; }
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(23, 24, 26, 0.62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.modal__card {
  position: relative;
  width: min(26rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: #fff;
  color: var(--anthrazit);
  border-top: 4px solid var(--signal);
  padding: 2rem 1.8rem 1.5rem;
  box-shadow: 0 24px 70px rgba(23, 24, 26, 0.4);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.modal.open .modal__overlay { opacity: 1; }
.modal.open .modal__card { opacity: 1; transform: none; }

.modal__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--anthrazit);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.modal__close:hover { background: var(--putz-tief); color: var(--signal); }

.modal__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
  text-transform: uppercase;
  margin: 0.5rem 0 0.6rem;
}
.modal__sub { font-size: 0.95rem; color: #55575B; }

.modal__form {
  margin-top: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.modal__form label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.modal__form input,
.modal__form select {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.72em 0.85em;
  font: inherit;
  font-size: 0.95rem;
  color: var(--anthrazit);
  background: var(--weiss);
  border: 1.5px solid rgba(38, 40, 43, 0.28);
  border-radius: 0;
  transition: border-color 0.2s ease;
}
.modal__form input:focus,
.modal__form select:focus {
  outline: none;
  border-color: var(--signal);
}
.modal__form input:user-invalid {
  border-color: #C43D2E;
}
.modal__form .btn { margin-top: 0.3rem; }
.modal__meta {
  font-size: 0.78rem;
  color: #6B6D71;
  text-align: center;
}
.modal__meta a { font-weight: 600; text-decoration: none; color: var(--anthrazit); }
.modal__meta a:hover { color: var(--signal); }

/* Honeypot — für Menschen unsichtbar, Bots füllen es aus */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Versand-Status unter dem Absende-Button */
.form-status {
  margin-top: 0.7rem;
  font-size: 0.92rem;
  font-weight: 500;
}
.form-status:empty { display: none; }
.form-status--ok {
  color: #2E7D42;
  border-left: 3px solid #2E7D42;
  padding-left: 0.7rem;
}
.form-status--fehler {
  color: #C43D2E;
  border-left: 3px solid #C43D2E;
  padding-left: 0.7rem;
}

.fab--top {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 58;
  background: var(--anthrazit);
  color: #fff;
  border: 1.5px solid rgba(247, 246, 243, 0.25);
  opacity: 0;
  pointer-events: none;
}
.fab--top.show {
  opacity: 1;
  pointer-events: auto;
}
.fab--top:hover { background: var(--signal); border-color: var(--signal); }

/* ── Footer-Credit ───────────────────────────────────────────── */

.foot__credit {
  margin-top: 1.6rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(247, 246, 243, 0.45);
}
.foot__credit a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.foot__credit a:hover { color: var(--signal-hell); }
.foot__credit .heart { color: var(--signal); }

/* nur für Screenreader */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 900px) {
  .site-head__nav { display: none; }
  .burger { display: block; }
  .site-head__logo img { height: 46px; }

  .intro__grid { grid-template-columns: 1fr; }
  .intro__figure { max-width: 30rem; }

  /* zwei bzw. eine Spalte: 8 Kacheln gehen auf, Füllzelle stört nur */
  .services__grid { grid-template-columns: 1fr 1fr; }
  .services__grid::after { display: none; }

  .cta__inner { grid-template-columns: 1fr; }
  .cta__actions { align-items: flex-start; text-align: left; }

  .foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .site-head__tel span { display: none; }
  .site-head__tel { padding: 0.55em 0.7em; }
  .services__grid { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .wipe__label { top: auto; bottom: clamp(11rem, 30vh, 14rem); }
}

/* ── Reduzierte Bewegung: ruhige Bildstrecke statt Scroll-Effekt ── */

@media (prefers-reduced-motion: reduce) {
  .hero__hint i, .hero__hint::after { animation: none; }
  .hero__hint::after { opacity: 1; }
  .fab--phone, .fab--phone svg { animation: none; }
  .modal__overlay, .modal__card { transition: none; }
}

html.reduced .scene { height: auto; min-height: 100svh; }
html.reduced .scene--wandel { --wipe: 50; }
html.reduced .seam { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   UNTERSEITEN (Kontakt, Leistungen, Impressum, Datenschutz)
   ═══════════════════════════════════════════════════════════════ */

/* Unterseiten: Body hell, sonst scheint unter der geclippten
   Hero-Schräge der dunkle Body durch (Keil-Artefakt) */
body:has(.page-hero) { background: var(--putz); }

.page-hero {
  position: relative;
  background: var(--anthrazit);
  color: #fff;
  padding: calc(5rem + 4rem) var(--pad-x) calc(4vw + 3.5rem);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 4vw));
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--signal);
  clip-path: polygon(0 calc(100% - 4vw - 0.6vw), 100% calc(100% - 0.6vw), 100% 100%, 0 calc(100% - 4vw));
  pointer-events: none;
}
.page-hero__inner { max-width: var(--max-w); margin: 0 auto; }
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0.5rem 0 0.2rem;
}
.page-hero__script {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  color: var(--signal);
  transform: rotate(-2deg);
  display: inline-block;
}
.page-hero__lead {
  max-width: 38rem;
  margin-top: 1.4rem;
  color: rgba(247, 246, 243, 0.82);
}

#page {
  position: relative;
  z-index: 5;
  background: var(--putz);
  color: var(--anthrazit);
}
#page h2 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  margin: 0.6rem 0 1.2rem;
}
.page-section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--pad-x);
}
.page-section + .page-section { padding-top: 0; }

/* ── Kontakt: Karten ─────────────────────────────────────────── */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}
.contact-card {
  background: #fff;
  border-top: 3px solid var(--signal);
  box-shadow: 0 10px 30px rgba(38, 40, 43, 0.07);
  padding: 1.5rem 1.4rem;
}
.contact-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
  color: var(--signal);
}
.contact-card p { font-size: 0.98rem; }
.contact-card a { text-decoration: none; font-weight: 600; }
.contact-card a:hover { color: var(--signal); }
.contact-card .sub { font-size: 0.82rem; color: #6B6D71; font-weight: 400; }

/* ── Formulare (Kontaktseite) ────────────────────────────────── */

.form-card {
  background: #fff;
  border-top: 4px solid var(--signal);
  box-shadow: 0 14px 44px rgba(38, 40, 43, 0.09);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  max-width: 46rem;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.2rem;
}
.form-grid .field--full { grid-column: 1 / -1; }
.field { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; }
.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.72em 0.85em;
  font: inherit;
  font-size: 0.95rem;
  color: var(--anthrazit);
  background: var(--weiss);
  border: 1.5px solid rgba(38, 40, 43, 0.28);
  border-radius: 0;
  transition: border-color 0.2s ease;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--signal);
}
.form-note { font-size: 0.78rem; color: #6B6D71; }
.form-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 0.4rem; }

/* ── FAQ ─────────────────────────────────────────────────────── */

.faq { max-width: 52rem; }
.faq details {
  background: #fff;
  border-left: 3px solid var(--signal);
  box-shadow: 0 6px 20px rgba(38, 40, 43, 0.06);
  margin-bottom: 0.8rem;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--signal);
  line-height: 1;
  transition: transform 0.25s ease;
  flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p {
  padding: 0 1.3rem 1.2rem;
  font-size: 0.98rem;
  max-width: 44rem;
}

/* ── Leistungen: Detailblöcke & Karten ───────────────────────── */

.leistung {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(1.6rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  border-top: 1px solid rgba(38, 40, 43, 0.12);
}
.leistung:first-of-type { border-top: none; }
/* Sprungziele nicht unter den festen Header schieben */
.leistung,
#kernleistungen,
#ergebnisse { scroll-margin-top: 8rem; }
.leistung h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.leistung ul {
  list-style: none;
  margin-top: 1rem;
  display: grid;
  gap: 0.4rem;
}
.leistung ul li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.95rem;
}
.leistung ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.52em;
  width: 0.5rem; height: 0.28rem;
  background: var(--signal);
}
.leistung figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: 10px 10px 0 var(--signal);
}
.leistung--pair figure {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.leistung--pair figure img { aspect-ratio: 3 / 4; box-shadow: none; }
.leistung--pair figure { box-shadow: 10px 10px 0 var(--signal); }

/* Sprungziel liegt hier auf der Überschrift, nicht auf dem Block */
.leistung h3[id] { scroll-margin-top: 8rem; }

/* Gestapeltes Paar: für Aufnahmen im Breitformat. Nebeneinander im
   Hochformat beschnitten bliebe von einem Panorama nur ein Streifen,
   und das Vorher/Nachher wäre nicht mehr als solches zu erkennen. */
.leistung--stapel figure {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  box-shadow: 10px 10px 0 var(--signal);
}
.leistung--stapel figure img { aspect-ratio: 16 / 9; box-shadow: none; }

/* ── Referenzen-Galerie ──────────────────────────────────────── */

.ref-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 2.2rem;
}
.ref-grid figure {
  position: relative;
  background: #fff;
  box-shadow: 0 10px 30px rgba(38, 40, 43, 0.08);
}
.ref-grid figure > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.ref-grid .ref-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ref-grid .ref-pair img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
.ref-grid figcaption {
  padding: 0.85rem 1rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
}
.ref-grid figcaption .sub {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: #6B6D71;
}
.ref-tag {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 2;
  background: var(--signal);
  color: #fff;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.3em 0.6em;
  transform: rotate(-2deg);
}

/* ── Karriere ────────────────────────────────────────────────── */

.benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}
.benefit {
  border-left: 3px solid var(--signal);
  padding-left: 1rem;
}
.benefit strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}
.benefit span { font-size: 0.92rem; color: #55575B; }

.jobs {
  display: grid;
  /* auto-fit: bei drei Stellen drei Spalten, bei vier vier — die
     Reihe bleibt voll, egal wie viele Karten gerade offen sind. */
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.4rem;
  margin-top: 2.2rem;
}
.job-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-top: 3px solid var(--signal);
  box-shadow: 0 10px 30px rgba(38, 40, 43, 0.07);
  padding: 1.7rem 1.6rem 1.6rem;
}
.job-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  text-transform: uppercase;
}
.job-card .job-meta {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0.5rem 0 0.8rem;
}
.job-card p { font-size: 0.95rem; }
.job-card ul {
  list-style: none;
  margin: 0.8rem 0 1.2rem;
  display: grid;
  gap: 0.35rem;
}
.job-card ul li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
}
.job-card ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 0.5rem; height: 0.28rem;
  background: var(--signal);
}
.job-card .btn { margin-top: auto; text-align: center; }

@media (max-width: 900px) {
  .benefits { grid-template-columns: 1fr 1fr; }
  .jobs { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .benefits { grid-template-columns: 1fr; }
}

/* ── Rechtstexte ─────────────────────────────────────────────── */

.legal-text { max-width: 46rem; }
.legal-text h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem) !important; margin-top: 2.4rem !important; }
.legal-text h3 { font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; margin: 1.6rem 0 0.5rem; }
.legal-text p, .legal-text li { font-size: 0.97rem; }
.legal-text ul { padding-left: 1.2rem; margin: 0.5rem 0; }
.legal-text a { color: var(--signal); word-break: break-word; }
.legal-text h4 { font-size: 1rem; font-weight: 600; margin: 1.3rem 0 0.4rem; }
.legal-text p { margin: 0.6rem 0; }

/* ── Responsive (Unterseiten) ────────────────────────────────── */

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .leistung { grid-template-columns: 1fr; }
  .leistung figure { max-width: 30rem; }
  .ref-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .contact-grid { grid-template-columns: 1fr; }
  .ref-grid { grid-template-columns: 1fr; }
}