/* ============================================================
   Schmitt Zimmerei · Startseite (Pitch-Teaser)
   Fachwerk-Bento: 3-px-Ink-Konturen, Radius 0, keine Lücken.
   Linien entstehen über Grid-Gaps auf Ink-Grund (keine Aufdopplung).
   ============================================================ */

/* ---------- Schriften (self-hosted, keine Google-CDN-Requests) ----------
   Bricolage Grotesque und Outfit als Variable Fonts, SIL Open Font License.
   Subsets latin + latin-ext, Vietnamesisch bewusst weggelassen.
   ---------------------------------------------------------------------- */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #ffffff;
  --bone: #f7f5f0;
  --dark: #221d15;
  --ink: #1b1b18;
  --muted: #6b675f;
  --on-dark: #f5f2ea;
  --line-soft: #e8e5de;
  --bernstein: #ffc61a;
  --bernstein-tief: #8a6600;
  --bernstein-hell: #ffd34d;

  --line: 3px;
  --font-display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --font-body: "Outfit", "Segoe UI", sans-serif;

  --pad-x: clamp(20px, 4vw, 56px);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--ink);
}

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

h1, h2, h3, p, dl, dd, dt, figure { margin: 0; }

/* Fachwerk-Rahmen: Gaps auf Ink-Grund erzeugen die Konturlinien */
.site {
  display: grid;
  /* minmax(0, …) statt 1fr: Spalten dürfen unter ihre Min-Content-Breite
     schrumpfen, sonst schiebt ein langes Wort die Seite auf sehr schmalen
     Schirmen über den Viewport hinaus. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--line);
  background: var(--ink);
  border: var(--line) solid var(--ink);
  min-height: 100vh;
}
.site > main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--line);
  background: var(--ink);
}

/* ---------- Sektionen als Layout-Container ----------
   Die inneren Breakpoints der Sektionen hängen an ihrer tatsächlichen
   Spaltenbreite, nicht am Viewport. Nur so bleibt das Bento korrekt, wenn
   sich Sektionen auf breiten Schirmen nebeneinander schieben (siehe den
   Abschnitt „Ultrabreite Schirme" am Dateiende).
   ---------------------------------------------------------------- */
.hero { container: hero / inline-size; }
.leistungen { container: leistungen / inline-size; }
.familie { container: familie / inline-size; }
.handoff { container: handoff / inline-size; }

/* ---------- Typo-Bausteine ---------- */
.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
  text-wrap: balance;
  /* greift ausschließlich, wenn ein Wort schmaler als die Spalte nicht passt
     (z. B. „Ansprechpartner." bei 320 px), sonst ohne Wirkung */
  overflow-wrap: break-word;
}
.lead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.58;
  color: var(--muted);
}
.body {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--ink);
}

/* ---------- Buttons & Text-CTAs ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.0125em;
  text-decoration: none;
  border-radius: 0;
}
.btn--ink {
  background: var(--ink);
  color: var(--paper);
  padding: 18px 28px;
  border: var(--line) solid var(--ink);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.btn--ink:hover { background: var(--bernstein); color: var(--ink); }
.btn--outline {
  border: var(--line) solid var(--ink);
  color: var(--ink);
  padding: 13px 24px;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.btn--outline:hover { background: var(--ink); color: var(--paper); }

.text-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--bernstein-tief);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.text-cta:hover { color: var(--ink); }
.text-cta svg { transition: transform 0.25s ease; }
.text-cta:hover svg { transform: translateX(4px); }

a:focus-visible, button:focus-visible {
  outline: var(--line) solid var(--bernstein-tief);
  outline-offset: 2px;
}
.site-header a:focus-visible, .site-header button:focus-visible {
  outline-color: var(--bernstein);
}
/* Auf Akzentgelb immer Ink: Goldbraun auf Gelb kommt nur auf 3,35:1 */
.karte a:focus-visible, .stoerer a:focus-visible {
  outline-color: var(--ink);
}

/* ---------- Header ---------- */
.site-header {
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--pad-x);
  position: relative;
  z-index: 20;
}
.brand { display: inline-flex; align-items: center; }
.brand__logo { width: auto; height: clamp(40px, 3.2vw + 26px, 60px); }

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(20px, 2.8vw, 40px);
}
.site-nav__list a {
  color: var(--paper);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 12px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.site-nav__list a:hover { border-bottom-color: var(--bernstein); color: var(--bernstein); }

.site-nav__toggle {
  display: none;
  background: none;
  border: var(--line) solid var(--paper);
  padding: 0;
  width: 48px;
  height: 48px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.site-nav__bars { display: grid; gap: 7px; width: 22px; }
.site-nav__bars span { height: 2px; background: var(--paper); transition: transform 0.25s ease; }
.site-nav.is-open .site-nav__bars span:first-child { transform: translateY(4.5px) rotate(45deg); }
.site-nav.is-open .site-nav__bars span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 820px) {
  .site-nav__toggle { display: inline-flex; }
  .site-nav__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink);
    flex-direction: column;
    gap: 0;
    padding: 8px var(--pad-x) 20px;
    border-top: var(--line) solid var(--bernstein);
  }
  .site-nav.is-open .site-nav__list { display: flex; }
  .site-nav__list a { display: block; padding: 14px 2px; font-size: 1.0625rem; }
}

/* ---------- Hero ---------- */
/* display: grid, damit das Hero-Band eine gestreckte Spalte ausfüllt und
   darunter keine leere Ink-Fläche stehen bleibt (Mehrspalten-Layout). */
.hero { position: relative; background: var(--ink); display: grid; }
.hero__band {
  display: grid;
  gap: var(--line);
  background: var(--ink);
}
.hero__zimmermann {
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
}
.hero__figur { height: clamp(210px, 30vw, 448px); width: auto; }

.hero__zelle {
  background: var(--ink);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--line);
}
.hero__inhalt {
  background: var(--paper);
  padding: clamp(36px, 5vw, 64px) var(--pad-x) clamp(40px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(20px, 2.4vw, 28px);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.375rem, 1.1rem + 4.6vw, 4.25rem);
  line-height: 1.09;
  letter-spacing: -0.022em;
}
.hero__line { display: block; overflow: hidden; }
.hero__line > span { display: inline-block; }
.hero__line--gold { color: var(--bernstein-tief); }
.hero__lead { max-width: 52ch; }

@container hero (min-width: 901px) {
  .hero__band { grid-template-columns: minmax(320px, 440fr) 1000fr; }
  .hero__zimmermann { min-height: 520px; }
}
@container hero (max-width: 900px) {
  .hero__zelle { display: contents; }
  .marquee { order: -1; }
  .hero__zimmermann { order: 0; }
  .hero__inhalt { order: 1; }
  /* Nur der Inhaltsblock wächst, Marquee und Figur behalten ihre Höhe */
  .hero__band { grid-template-rows: auto auto 1fr; }
}

/* Marquee-Band */
.marquee {
  background: var(--ink);
  overflow: hidden;
  padding: 13px 0;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
}
.marquee__group {
  display: flex;
  gap: 40px;
  padding-right: 40px;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.123em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
}
/* Drei identische Gruppen, Versatz um genau eine davon. Mit zwei Gruppen
   riss die Naht auf, sobald das Sichtfenster breiter wurde als eine Gruppe
   (gemessen ab rund 1.090 px, also im Bereich 1440 bis 1859 px sichtbar). */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-33.3333%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* Stellen-Störer */
.stoerer {
  position: absolute;
  right: clamp(16px, 3vw, 41px);
  bottom: -172px;
  width: 282px;
  height: 282px;
  background: var(--bernstein);
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  z-index: 10;
}
.stoerer__ring {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  pointer-events: none;
}
.stoerer__ringtext {
  font-family: var(--font-body);
  font-weight: 500;
  /* Text läuft nur einmal um den Kreis, dafür etwas größer. Kein textLength
     mehr, das stauchte vorher die Glyphen. */
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  fill: var(--ink);
}
.stoerer__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.875rem;
  line-height: 1.1;
  color: var(--ink);
}
.stoerer__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.stoerer__link:hover svg { transform: translateX(3px); }
.stoerer__link svg { transition: transform 0.25s ease; }

@media (max-width: 1100px) {
  .stoerer { width: 236px; height: 236px; bottom: -130px; }
  .stoerer__title { font-size: 1.625rem; }
}
@media (max-width: 900px) {
  /* Der Störer bleibt absolut positioniert und sitzt als Stempel in der
     oberen rechten Ecke der Figuren-Zelle. Im Fluss wäre er eine eigene
     Grid-Zeile von .hero und würde darunter rund 200 px reine Ink-Fläche
     erzeugen, die wie ein Loch im Fachwerk wirkt. Oben rechts kollidiert er
     außerdem weder mit der Headline noch mit dem Haupt-CTA darunter. */
  .stoerer {
    position: absolute;
    top: clamp(58px, 15vw, 96px);
    right: clamp(8px, 2.5vw, 20px);
    bottom: auto;
    width: clamp(138px, 38vw, 190px);
    height: clamp(138px, 38vw, 190px);
    margin: 0;
    gap: 6px;
  }
  .stoerer__title { font-size: clamp(1.0625rem, 4.4vw, 1.375rem); }
  .stoerer__ringtext { font-size: 9.5px; letter-spacing: 0.14em; }
  .stoerer__link { font-size: 0.75rem; }
}

/* ---------- Leistungen ---------- */
.leistungen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Zusatzhöhe einer gestreckten Spalte nehmen die Karten auf, nicht der Kopf */
  grid-template-rows: auto 1fr;
  gap: var(--line);
  background: var(--ink);
}
.leistungen__kopf {
  background: var(--bone);
  padding: clamp(48px, 6vw, 64px) var(--pad-x) clamp(40px, 5vw, 64px);
  display: grid;
  gap: 22px;
  justify-items: start;
  align-content: start;
}
.leistungen__kopf .h2 { max-width: 900px; }
.leistungen__kopf .lead { max-width: 620px; }

.bento { display: grid; gap: var(--line); background: var(--ink); }
.bento__row { display: grid; gap: var(--line); background: var(--ink); }

/* Karten */
.karte {
  position: relative;
  display: grid;
  grid-template-areas: "bild" "text";
  grid-template-rows: minmax(212px, 1fr) auto;
  background: var(--bernstein);
  overflow: hidden;
}
.karte__text {
  grid-area: text;
  position: relative;
  background: var(--bernstein);
  color: var(--ink);
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  z-index: 2;
}
.karte__bild {
  grid-area: bild;
  position: relative;
  overflow: hidden;
  /* Akzentgelb statt Weiß: falls der Parallax das Bild je um Bruchteile
     versetzt, blitzt die Kartenfarbe durch, kein weißer Balken. */
  background: var(--bernstein);
  z-index: 1;
}
.karte__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.karte__titel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.karte__body { font-size: 0.9375rem; line-height: 1.47; }
.karte__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.karte__cta svg { transition: transform 0.25s ease; }
.karte__cta:hover svg { transform: translateX(4px); }

/* Giebel-Keile (Haus-/Pfeilform der gelben Fläche)
   Grundlage ist der gestapelte Zustand: Bild oben, Text unten, Giebel zeigt
   nach oben ins Bild. Die Querkarten-Variante --r schaltet erst das
   Desktop-Bento ein. Jede Karte hat beide Formen im Markup. */
.karte__giebel { color: var(--bernstein); pointer-events: none; }
.karte__giebel--r { display: none; }
.karte__giebel--o {
  position: absolute;
  left: 0;
  top: -43px;
  width: 100%;
  height: 44px;
}

/* ---------- Dach-Deckel: Karte ist zunächst komplett gelb, beim Hover
   rutscht der Deckel samt Giebelkante zur Seite und gibt das Bild frei.
   Nur auf Zeigergeräten mit echtem Hover. Auf Touch bleiben die Bilder
   dauerhaft sichtbar, dort gibt es keinen Hover-Zustand. ---------- */
.karte__deckel { display: none; }

@media (hover: hover) and (pointer: fine) {
  .karte__deckel {
    display: block;
    position: absolute;
    inset: 0;
    background: var(--bernstein);
    /* Unterkante als Giebel-Kerbe, greift in den nach oben zeigenden Giebel
       des Textfelds, dadurch bleibt die Fläche fugenlos gelb. Die Kerbe ist
       3 px flacher als der Giebel hoch ist, damit sich beide überlappen und
       an der Naht nicht subpixelweise das Bild durchblitzt. */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 41px), 0 100%);
    transition: transform 0.55s cubic-bezier(0.33, 0, 0.15, 1);
    will-change: transform;
  }
  .karte:hover .karte__deckel,
  .karte:focus-within .karte__deckel {
    transform: translateX(101%);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  /* Zustandswechsel bleibt, das Gleiten entfällt */
  .karte__deckel { transition: none; }
}

/* Desktop-Bento: Reihen und Keil-Richtungen wie im Layout */
@container leistungen (min-width: 1020px) {
  .bento__row--a { grid-template-columns: 736fr 704fr; }
  .bento__row--b { grid-template-columns: 520fr 920fr; }
  .bento__row--c { grid-template-columns: 1fr 1fr; }
  .bento__row--a .karte--h { min-height: 280px; }
  .bento__row--b .karte { min-height: 402px; }
  .bento__row--c .karte--h { min-height: 300px; }

  .karte--h {
    grid-template-areas: "text bild";
    grid-template-rows: 1fr;
    /* Erste Zeile ist die Rückfallebene für Browser ohne cqi. Fluide
       Textspalte, damit die Bildspalte bei knapp 1020 px Containerbreite
       kein 126-px-Streifen mehr ist. */
    grid-template-columns: 330px minmax(0, 1fr);
    grid-template-columns: clamp(240px, 23cqi, 330px) minmax(0, 1fr);
  }
  .bento__row--b .karte--h,
  .bento__row--c .karte--h {
    grid-template-columns: 380px minmax(0, 1fr);
    grid-template-columns: clamp(260px, 26.5cqi, 380px) minmax(0, 1fr);
  }

  /* Querkarte: Kerbe an die linke Deckelkante, passend zum --r-Giebel,
     ebenfalls 3 px flacher als der Keil breit ist (Überlappung an der Naht) */
  .karte--h .karte__deckel {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 53px 50%);
  }

  .karte--h .karte__giebel--o { display: none; }
  .karte--h .karte__giebel--r {
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    width: 56px;
    height: 100%;
  }

  .karte--v { grid-template-rows: 232fr 170fr; }
  .karte--v .karte__text { justify-content: flex-start; }
}
@container leistungen (min-width: 640px) and (max-width: 1019.98px) {
  .bento__row { grid-template-columns: 1fr 1fr; }
}

/* ---------- Familienbetrieb ---------- */
.familie { background: var(--ink); display: grid; gap: var(--line); }
.familie__split {
  display: grid;
  gap: var(--line);
  background: var(--ink);
}
.familie__bild {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  min-height: 260px;
}
.familie__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.familie__caption {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--paper);
  border-right: var(--line) solid var(--ink);
  border-bottom: var(--line) solid var(--ink);
  padding: 9px 16px;
  font-weight: 500;
  font-size: 0.875rem;
}
.familie__text {
  background: var(--paper);
  padding: clamp(40px, 5vw, 56px) var(--pad-x);
  display: grid;
  gap: 22px;
  align-content: center;
}
.familie__text .h2 { max-width: 22ch; }
.familie__text .body { max-width: 72ch; }

/* Bild und Text nur nebeneinander, wenn die Spalte wirklich Platz dafür hat.
   Darunter rückt das Foto über den Text, auch auf großen Schirmen, wenn der
   Familienbetrieb dort in einer schmalen Spalte sitzt. */
@container familie (min-width: 1040px) {
  .familie__split { grid-template-columns: 620fr 820fr; }
  .familie__bild { min-height: 446px; }
}

/* ---------- Kontakt (Vorschau, Fade) ---------- */
.handoff {
  position: relative;
  display: grid;
  gap: var(--line);
  background: var(--ink);
}
.kontakt__kopf {
  background: var(--bone);
  padding: clamp(44px, 5vw, 56px) var(--pad-x) clamp(32px, 4vw, 44px);
}
.h2--kontakt { font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem); }
.kontakt__zellen {
  display: grid;
  gap: var(--line);
  background: var(--ink);
}
.kontakt__zelle {
  background: var(--bone);
  padding: 32px var(--pad-x) 56px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.kontakt__icon { color: var(--muted); margin-bottom: 4px; }
.kontakt__label {
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.123em;
  text-transform: uppercase;
  color: var(--muted);
}
.kontakt__wert { font-size: 1.125rem; line-height: 1.5; }
@container handoff (min-width: 760px) {
  .kontakt__zellen { grid-template-columns: repeat(3, 1fr); }
}

.handoff__veil {
  position: absolute;
  /* Bodenverankert mit fester Tiefe statt Prozent der Sektionshöhe: Die
     Sektion ist mobil rund 840 px hoch und auf Desktop rund 350 px, mit
     Prozentstops deckte der Verlauf deshalb völlig unterschiedlich viel ab
     und verschluckte auf Mobil die E-Mail-Adresse.
     Die negativen Werte ziehen die 3-px-Fachwerklinien und die Fuge zur
     Pitch-Sektion mit in den Verlauf, sonst bleibt dort eine schwarze
     Kante stehen statt eines weichen Übergangs. */
  left: calc(var(--line) * -1);
  right: calc(var(--line) * -1);
  bottom: calc(var(--line) * -1);
  top: auto;
  height: clamp(96px, 11vw, 150px);
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.5) 56%,
    rgba(255, 255, 255, 0.9) 84%,
    #ffffff 100%);
}

/* ---------- Pitch-CTA (Silberschmidt Media) ---------- */
.pitch {
  background: var(--paper);
  padding: clamp(56px, 7vw, 88px) var(--pad-x);
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 760px) {
  .pitch { grid-template-columns: 180px 1fr; }
}
.pitch__photo { display: grid; gap: 12px; justify-items: center; width: 180px; }
.pitch__photo img { width: 180px; height: 180px; object-fit: cover; }
.pitch__photo figcaption { font-size: 0.9375rem; color: var(--muted); }
.pitch__body { display: grid; gap: 14px; justify-items: start; }
.pitch__eyebrow {
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.123em;
  text-transform: uppercase;
  color: var(--muted);
}
.pitch__eyebrow-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pitch__eyebrow-link:hover { color: var(--ink); }
.pitch__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.pitch__lead { color: var(--muted); font-size: 1.0625rem; }
.pitch__cta { margin-top: 8px; }
.pitch__fine { margin-top: 16px; font-size: 0.8125rem; color: var(--muted); }

/* ---------- Reveal-Grundlage (Startzustand NUR bei aktivem JS) ---------- */
html.is-ready .reveal {
  opacity: 0;
  transform: translateY(26px);
}
html.is-ready .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
@media (prefers-reduced-motion: reduce) {
  html.is-ready .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Ultrabreite Schirme: das Bento setzt sich horizontal neu zusammen
   Statt nur nach unten zu stapeln, erweitert sich das Holzgerüst nach
   rechts. Ab 1600 px wandern die Leistungen neben den Hero, ab 2300 px
   kommt der Familienbetrieb als dritte Spalte dazu. Die Sektionen sind
   Container (siehe oben), ihre inneren Layouts richten sich also nach der
   Spaltenbreite und nicht nach dem Viewport.
   Die Spalten werden vom Grid auf gleiche Höhe gezogen, damit die
   3-px-Linien durchlaufen und keine Treppe entsteht.
   ============================================================ */
/* Die Schwellen sind so gewählt, dass die Leistungsspalte NIE unter 1020 px
   fällt, also nie ihr Querkarten-Layout verliert. Deshalb bekommt sie die
   breitere Bahn und die Teilung beginnt erst bei 1860 px, nicht früher.
   @supports, damit Browser ohne Container-Query-Support einspaltig bleiben
   statt in einen Mischzustand aus geteiltem main und gestapelten Sektionen
   zu laufen. */
@supports (container-type: inline-size) {
  @media (min-width: 1860px) {
    .site > main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
    .hero       { grid-column: 1; grid-row: 1; }
    .leistungen { grid-column: 2; grid-row: 1 / span 2; }
    .familie    { grid-column: 1; grid-row: 2; }
    .handoff    { grid-column: 1 / -1; grid-row: 3; }
    /* Störer bleibt innerhalb des Hero, statt in die Nachbarspalte zu ragen.
       Dafür wird ihm unten Platz reserviert, sonst liegt er auf der Headline. */
    .stoerer { bottom: clamp(24px, 2.5vw, 56px); }
    .hero__inhalt { padding-bottom: 330px; }
  }
  @media (min-width: 2440px) {
    .site > main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); }
    .hero       { grid-column: 1; grid-row: 1; }
    .leistungen { grid-column: 2; grid-row: 1; }
    .familie    { grid-column: 3; grid-row: 1; }
    .handoff    { grid-column: 1 / -1; grid-row: 2; }
  }
}