/* ==========================================================================
   Startseite — Ergänzungen (nur index.html)
   - Hero: „Gießen“ beim Laden, Titel zeilenweise aus der Maske, Tagline-Linie
   - Hero auf dem Smartphone: Text über dem Bild statt darauf
   - Über uns: Überschrift ohne verwaistes „in“
   - Masken für die Wort-Animationen aus js/start.js
   Alle Bewegungen nur bei prefers-reduced-motion: no-preference.
   ========================================================================== */

/* Hero: Bildhülle für die Gieß-Maske ------------------------------------- */

@media (min-width: 641px) {
  .hero-pour {
    position: absolute;
    inset: 0;
  }
}

/* Hero-Titel: drei Zeilen (auch ohne Animation) */
.hero-line {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {

  /* A · Gießen: Der Asphaltstrom läuft vom Rechen (oben rechts) mit weicher
     Kante nach unten links ins Bild. Die Maske ist 3× so groß wie das Bild;
     zwischen 10 % und 90 % Position wandert die weiche Kante (40–60 % des
     Verlaufs) genau einmal über die Bildfläche: am Anfang ist alles
     verborgen, am Ende alles sichtbar. */
  @keyframes start-pour {
    from {
      -webkit-mask-position: 10% 90%;
      mask-position: 10% 90%;
    }
    to {
      -webkit-mask-position: 90% 10%;
      mask-position: 90% 10%;
    }
  }

  .hero-pour {
    -webkit-mask-image: linear-gradient(235deg, #000 40%, transparent 60%);
    mask-image: linear-gradient(235deg, #000 40%, transparent 60%);
    -webkit-mask-size: 300% 300%;
    mask-size: 300% 300%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: start-pour 2.2s cubic-bezier(0.45, 0, 0.2, 1) 0.1s both;
  }

  /* B · Titelzeilen steigen nacheinander aus einer Maske auf
     (ersetzt das Einblenden des ganzen Titels aus motion.css) */
  @keyframes start-rise-in {
    from { transform: translateY(112%); }
  }

  .hero-title {
    animation: none;
  }

  .hero-line {
    overflow: hidden;
    padding: 0.06em 0 0.14em;
    margin: -0.06em 0 -0.14em;
  }

  .hero-line__inner {
    display: block;
    animation: start-rise-in 1.15s var(--motion-ease) 0.3s both;
  }

  .hero-line:nth-child(2) .hero-line__inner { animation-delay: 0.41s; }
  .hero-line:nth-child(3) .hero-line__inner { animation-delay: 0.52s; }

  /* B · Tagline: senkrechte Linie wächst von oben */
  @keyframes start-grow-y {
    from { transform: scaleY(0); }
  }

  .hero-tagline-line {
    transform-origin: top;
    animation: start-grow-y 1s var(--motion-ease) 0.9s both;
  }
}

/* Hero: „1895“ füllt sich beim Runterscrollen mit Teer --------------------
   Design-Notiz 1 vom 04.10.2026, Variante A „Füllen“ (Vergleich:
   vergleich/teer-1895.html). js/start.js setzt .is-teer und die Pixelwerte,
   nur ohne reduzierte Bewegung; sonst bleibt die Zahl hellgrau.
   Das bisherige Hellgrau (Tinte, 14 % Deckkraft) liegt als unterste Ebene im
   Hintergrund, der auf die Schrift beschnitten wird. Darüber steigt der Teer,
   oben mit einer welligen Oberfläche (breites Bild statt Kacheln, sonst zieht
   der Browser am Rand eine Pixelreihe herüber). Die Zahl ist um 180° gedreht:
   lokal oben ist sichtbar unten. */

.decorative-year.is-teer {
  opacity: 1;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 30' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230b0b0b'/%3E%3Cstop offset='.62' stop-color='%230b0b0b'/%3E%3Cstop offset='1' stop-color='%232b2b2b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0H480V15C465 24 435 24 420 15S375 6 360 15 315 24 300 15 255 6 240 15 195 24 180 15 135 6 120 15 75 24 60 15 15 6 0 15Z' fill='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(#0b0b0b, #0b0b0b),
    linear-gradient(color-mix(in srgb, var(--color-ink) 14%, transparent), color-mix(in srgb, var(--color-ink) 14%, transparent));
  background-repeat: no-repeat;
  background-size: 480px 30px, 100% var(--teer-hoehe, 0px), 100% 100%;
  background-position: var(--welle-x, 0px) var(--teer-kante, -30px), 0 0, 0 0;
}

/* Hero auf Handy und Tablet hochkant (seit 12.10.2026, Vorbild Tobias
   Püschner, Vergleich vergleich/hero-mobil.html): dasselbe Hero-Bild wie
   auf dem Desktop füllt den ersten Bildschirm, Text und Button liegen
   unten darauf. Das Bild (roefe-hero-asphalt-transparent.png) ist links und
   unten ausgeblendet, ein vollständiges Original gibt es nicht; es liegt
   wie auf dem Desktop auf Weiß (seit 12.10.2026 hell statt dunkel), die
   ausgeblendeten Ränder laufen ins Weiß aus, nichts wird hinzuerfunden.
   Lesbarkeit: weißer Verlauf von unten, im Textbereich fast deckend,
   darüber weich ins Foto; Schrift dunkel wie auf dem Desktop. Bild und Text
   liegen in derselben Gridzelle; der Hero beginnt hinter der Navigation,
   die oben durchsichtig ist und beim Scrollen wie bisher zur Leiste wird.
   Ausschnitt: Rechen, Stiefel und Asphalt (Bild rechts der Mitte, oben).
   Desktop und Tablet quer bleiben unverändert. */

/* Desktop mit niedrigem Fenster (z. B. 1440 × 620): Hero mindestens 600px
   hoch, sonst schnitt die Bildfläche (overflow: hidden) den Button ab */
@media (min-width: 641px) {
  .hero-photo-frame {
    min-height: max(calc(100svh - var(--nav-height)), 600px);
  }
}

/* Niedrige Desktop-Fenster und kleine Laptops (bis 820px hoch): Bild oben
   ausrichten, damit die Asphaltwelle unter Text und Button bleibt (mittig
   lief sie durch „und außen.“ und den Button) */
@media (min-width: 641px) and (max-height: 820px) {
  .hero-photo {
    object-position: center top;
  }
}

/* Sehr breite Bildschirme (breiter als der Inhaltscontainer + Rand): Das
   Foto geht über die ganze Breite, Tagline und „1895“ hingen aber am
   Container und lagen dadurch mitten auf dem Foto. Hier rücken sie an den
   rechten Bildschirmrand, wo das Bild frei ist. */
@media (min-width: 1700px) {
  .hero-tagline-block {
    right: calc(var(--container-pad) - (100vw - min(100vw, var(--container-max))) / 2);
  }

  .decorative-year {
    right: calc(var(--container-pad) + 57px - (clamp(5rem, 10vw, 12rem) / 2) - (100vw - min(100vw, var(--container-max))) / 2);
  }
}

/* Gilt für: Handy hochkant (bis 640px), Tablets hochkant (bis 1366px,
   iPad Pro 12,9″) und niedrige Querformate bis 1100px Breite (Handy quer,
   kleine Android-Tablets 960 × 600; dort lief sonst die Asphaltwelle durch
   den Text). Desktop und große Tablets quer behalten die Desktop-Komposition. */
@media (max-width: 640px), (orientation: portrait) and (max-width: 1366px), (orientation: landscape) and (max-height: 640px) and (max-width: 1100px) {
  .site-nav::before {
    opacity: 0;
  }

  .site-nav__inner {
    background: color-mix(in srgb, var(--color-hero-bg) calc(var(--nav-p) * 100%), transparent);
  }

  .site-nav__toggle {
    background: rgba(255, 255, 255, 0.92);
    border-color: transparent;
  }

  /* Bühne: ein Bildschirm hoch (höchstens 920px), beginnt hinter der
     Navigation; passt der Text nicht drauf, wächst sie mit */
  .hero-photo-frame {
    display: grid;
    grid-template-areas: "stage";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr;
    min-height: clamp(560px, 100svh, 920px);
    margin-top: calc(-1 * var(--nav-height));
    background-color: var(--color-hero-bg);
  }

  .hero-pour {
    grid-area: stage;
    position: relative;
    overflow: hidden;
  }

  /* Bild beginnt etwas unter der Oberkante (Motiv tiefer und mittiger,
     zugleich weniger stark vergrößert); die Oberkante läuft weich ins
     Weiß aus, damit keine harte Bildkante entsteht */
  .hero-photo {
    position: absolute;
    top: var(--hero-bild-oben, 9%);
    left: 0;
    width: 100%;
    height: calc(100% - var(--hero-bild-oben, 9%));
    object-fit: cover;
    object-position: 80% 0%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 70px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 70px);
  }

  .hero-photo-frame__inner {
    grid-area: stage;
    position: relative;
    z-index: 2;
    align-self: end;
    width: 100%;
    /* Textgruppe sitzt höher, nicht an der Unterkante */
    padding: 0 var(--container-pad) calc(clamp(40px, 9svh, 88px) + env(safe-area-inset-bottom, 0px));
  }

  /* Lesbarkeit: Weiß nur hinter dem Text. Von links (wo die Schrift steht)
     fast deckend, nach rechts zum Motiv hin auslaufend; oben ein kurzer
     Übergang (56px) ins Foto. Hängt am Textblock, passt daher bei jeder
     Höhe. Unten trägt die ausgeblendete Asphaltwelle ohnehin Weiß. */
  .hero-photo-frame__inner::before {
    content: '';
    position: absolute;
    inset: -56px 0 calc(-1 * clamp(40px, 9svh, 88px));
    z-index: -1;
    background: linear-gradient(to right,
      rgba(253, 253, 253, 0.94) 0%,
      rgba(253, 253, 253, 0.88) 50%,
      rgba(253, 253, 253, 0.5) 78%,
      rgba(253, 253, 253, 0.15) 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 56px);
    pointer-events: none;
  }

  .hero-content {
    position: relative;
    left: auto;
    top: auto;
    width: min(600px, 100%);
  }

  .hero-eyebrow {
    margin-bottom: 12px;
  }

  .hero-title {
    margin-bottom: 14px;
  }

  .hero-description {
    margin-bottom: 22px;
  }

  /* Deko vom Desktop: Tagline und 1895 haben auf dem Bild keinen Platz */
  .hero-tagline-block,
  .decorative-year {
    display: none;
  }
}

/* Tablet hochkant: breiterer Ausschnitt, Motiv weiter rechts */
@media (orientation: portrait) and (min-width: 641px) and (max-width: 1366px) {
  .hero-photo {
    object-position: 88% 0%;
  }

  /* hohe Tablets: der Hero füllt den Bildschirm fast ganz (statt bei 920px
     zu enden), das Band darunter blitzt nur an */
  .hero-photo-frame {
    min-height: clamp(560px, 92svh, 1180px);
  }
}

/* Handy quer: ganzes Bild, Text links auf dem dunklen Teil */
@media (orientation: landscape) and (max-height: 640px) and (max-width: 1100px) {
  .hero-photo-frame {
    min-height: max(100svh, 460px);
  }

  .hero-photo {
    object-position: 70% 30%;
  }

  .hero-photo-frame__inner::before {
    display: none;
  }

  .hero-pour::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right,
      var(--color-hero-bg) 0%,
      rgba(253, 253, 253, 0.92) 38%,
      rgba(253, 253, 253, 0.4) 52%,
      rgba(253, 253, 253, 0) 64%);
  }

  .hero-photo-frame__inner {
    padding-top: calc(var(--nav-height) + 40px);   /* unter dem hohen Logo-Schild */
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .hero-content {
    width: min(520px, 62%);
  }

  .hero-title {
    font-size: clamp(2rem, 6.5vh + 1rem, 2.8rem);
  }

  .hero-description {
    margin-bottom: 16px;
  }
}

/* D · G · Wort-Masken (js/start.js zerlegt Überschriften und Zitat) ------- */

.st-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.08em 0.03em 0.16em;
  margin: -0.08em -0.03em -0.16em;
}

.st-w__in {
  display: inline-block;
}

/* Das scroll-gekoppelte Einblenden aus motion.css entfällt für zerlegte
   Elemente – sie steigen stattdessen Wort für Wort auf. */
.section-title.st-split,
.process-section__heading.st-split,
.about-preview__heading.st-split {
  animation: none;
}

/* E · Eigenschaften auf Asphalt: rote Striche zeichnen sich ------------- */

@media (prefers-reduced-motion: no-preference) {
  .trust-intro__qualities.st-ready .trust-quality__label::after {
    transform: translateX(-50%) scaleX(0);
    transition: transform 0.8s var(--motion-ease);
  }

  .trust-intro__qualities.st-ready .trust-quality.is-in .trust-quality__label::after {
    transform: translateX(-50%) scaleX(1);
  }
}

/* E2 · Zahlen füllen sich weiß, mit Glanzpunkten -------------------------
   Design-Notiz 2 vom 04.10.2026, Variante C „Glanzpunkte“ (Vergleich:
   vergleich/flare-zahlen.html). js/start.js setzt .is-glanz und je Zahl den
   Füllstand --fuell (0–1); die Glanzsterne sind seit 12.10.2026 entfernt; nur ohne
   reduzierte Bewegung, sonst bleiben die Zahlen halbtransparent.
   Weiß steigt von unten, darüber bleibt das bisherige 28 %-Weiß. Etwas
   Innenabstand, damit der auf die Schrift beschnittene Hintergrund die
   Ziffern ganz erfasst (Zeilenhöhe 0,78 ist knapper als die Ziffern); die
   Ränder gleichen ihn aus. */

.trust-intro__qualities.is-glanz .trust-quality__number {
  padding-block: 0.08em;
  margin-top: -0.08em;
  margin-bottom: -0.2em;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(to top,
    #fff calc(var(--fuell, 0) * 100%),
    rgba(255, 255, 255, 0.28) calc(var(--fuell, 0) * 100% + 3%));
}

/* ==========================================================================
   Prozess „So arbeiten wir“ — Hintergrund-Deko
   Umschalten in index.html am Abschnitt: data-deko="bauplan" | "skizzen" | "ohne"
   (Anleitung: Dokumente/Startseite – Prozess-Hintergrund umschalten.md,
   Vorschau aller Varianten: vergleich/prozess-hintergrund.html)
   Die Elemente erzeugt js/start.js; die Deko ist rein dekorativ (aria-hidden).
   ========================================================================== */

.process-section[data-deko] {
  position: relative;
  isolation: isolate;
  /* Konstruktionslinien am schmalen letzten Schritt ragen sonst über den
     rechten Rand und erzeugen einen waagerechten Scrollbalken */
  overflow-x: clip;
}

.process-section[data-deko] > .container {
  position: relative;
  z-index: 1;
}

.process-section[data-deko] .process-section__grid {
  position: relative;
}

/* ---- Bauplan: Planraster ------------------------------------------------ */

.process-deco__paper {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, rgba(20, 20, 20, 0.07) 1px, transparent 1px),
    linear-gradient(to right, rgba(20, 20, 20, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 20, 20, 0.028) 1px, transparent 1px),
    linear-gradient(to right, rgba(20, 20, 20, 0.028) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: var(--container-pad) 0;
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 62% 62%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 85% 80% at 62% 62%, #000 25%, transparent 80%);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.is-deco-in .process-deco__paper {
  clip-path: inset(0 0 0 0);
}

/* ---- Bauplan: Konstruktionslinien am offenen Rundbogen ------------------ */

[data-deko="bauplan"] .process-step__stage {
  position: relative;
  isolation: isolate;
}

.process-deco__construct {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: clamp(240px, 20vw, 390px);
  aspect-ratio: 3 / 4;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: rgba(20, 20, 20, 0.42);
  stroke-width: 1.1;
  stroke-linecap: round;
}

.process-deco__construct .is-accent {
  stroke: var(--color-accent);
  stroke-width: 1.4;
}

.process-deco__construct .is-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 0s linear 0.3s, opacity 0.25s ease;
}

.process-step.is-open .process-deco__construct .is-draw {
  stroke-dashoffset: 0;
  opacity: 1;
  transition:
    stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1) calc(0.25s + var(--d, 0s)),
    opacity 0.2s ease calc(0.25s + var(--d, 0s));
}

/* Zirkelschlag schwenkt ein, Mittelachse blendet ein */
.process-deco__construct .is-arc {
  stroke-dasharray: 3 7;
  opacity: 0;
  transform-box: view-box;
  transform-origin: 150px 150px;
  transform: rotate(-24deg);
  transition: opacity 0.25s ease, transform 0s linear 0.3s;
}

.process-deco__construct .is-axis {
  stroke-dasharray: 14 4 2 4;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.process-step.is-open .process-deco__construct .is-arc {
  opacity: 1;
  transform: rotate(0deg);
  transition: opacity 0.4s ease 0.3s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.process-step.is-open .process-deco__construct .is-axis {
  opacity: 1;
  transition: opacity 0.5s ease 0.55s;
}

.process-deco__construct text {
  fill: var(--color-accent);
  stroke: none;
  font: 700 15px var(--font-sans);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.process-step.is-open .process-deco__construct text {
  opacity: 1;
  transition: opacity 0.4s ease 0.95s;
}

/* ---- Bauplan: Maßkette am Fuß der Schritte ------------------------------
   Die Schrägstriche sind ::before der Schritte (statische Position = linke
   Kante des Schritts) und wandern deshalb mit, wenn sich Spalten verbreitern. */

[data-deko="bauplan"] .process-section__grid::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1px;
  background: rgba(20, 20, 20, 0.32);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}

[data-deko="bauplan"].is-deco-in .process-section__grid::after {
  transform: scaleX(1);
}

[data-deko="bauplan"] .process-step::before,
.process-deco__endtick {
  content: '';
  position: absolute;
  bottom: 1px;
  width: 1.5px;
  height: 15px;
  margin-left: -1px;
  background: var(--color-accent);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.process-deco__endtick {
  right: 0;
}

[data-deko="bauplan"] .process-step::after {
  content: attr(data-deko-label);
  position: absolute;
  bottom: 14px;
  margin-left: 14px;
  font: 700 0.66rem/1 var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.42);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s ease;
}

[data-deko="bauplan"].is-deco-in .process-step::before,
[data-deko="bauplan"].is-deco-in .process-step::after {
  opacity: 1;
  transition-delay: calc(0.5s + var(--i, 0) * 0.18s);
}

[data-deko="bauplan"].is-deco-in .process-deco__endtick {
  opacity: 1;
  transition-delay: 1.5s;
}

/* Höhenkote am Anfang der Maßkette */
.process-deco__level {
  position: absolute;
  left: 0;
  bottom: -26px;
  font: 700 0.66rem/1 var(--font-sans);
  letter-spacing: 0.08em;
  color: rgba(20, 20, 20, 0.5);
  opacity: 0;
  transition: opacity 0.5s ease 0.4s;
}

.process-deco__level::before {
  content: '';
  display: inline-block;
  margin-right: 6px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--color-accent);
  vertical-align: 1px;
}

.is-deco-in .process-deco__level {
  opacity: 1;
}

/* ---- Ruhig: nur die Ablaufzeile ----------------------------------------
   Andrés Feedback vom 2026-09-30: kein Raster, keine Konstruktionslinien,
   keine Schraffur, kein Plankopf. Es bleiben die fünf Begriffe an einer
   feinen Linie – ohne Schrägstriche und ohne Höhenkote. */

[data-deko="ruhig"] {
  background: #fff;
  padding-bottom: clamp(56px, 5vw, 88px);
}

[data-deko="ruhig"] .process-step__stage {
  margin-bottom: 28px;
}

/* Mehr Luft zwischen dem Text des offenen Schritts und der Ablaufzeile
   (Grundwert 50px in styles.css; die 8px mehr Abstand am Bild kommen dazu) */
[data-deko="ruhig"] .process-section__grid {
  /* 112 statt 88 px (19.10.2026): Schritt 05 hat jetzt vier Zeilen Text und
     stand sonst geöffnet direkt auf der Beschriftung „Ausführung“ */
  --process-bottom-air: 112px;
}

[data-deko="ruhig"] .process-section__grid::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1px;
  background: rgba(20, 20, 20, 0.16);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}

[data-deko="ruhig"].is-deco-in .process-section__grid::after {
  transform: scaleX(1);
}

[data-deko="ruhig"] .process-step::after {
  content: attr(data-deko-label);
  position: absolute;
  bottom: 22px;
  font: 700 0.66rem/1 var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.42);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s ease;
}

[data-deko="ruhig"].is-deco-in .process-step::after {
  opacity: 1;
  transition-delay: calc(0.4s + var(--i, 0) * 0.15s);
}

/* ---- Bauplan: Plankopf mit Nordpfeil ------------------------------------ */

.process-deco__titleblock {
  display: flex;
  width: fit-content;
  margin: clamp(44px, 5vw, 64px) 0 clamp(16px, 2vw, 28px) auto;
  border: 1px solid rgba(20, 20, 20, 0.38);
  background: rgba(253, 253, 253, 0.85);
  font-family: var(--font-sans);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease 1.2s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.2s;
}

.is-deco-in .process-deco__titleblock {
  opacity: 1;
  transform: none;
}

.process-deco__north {
  display: grid;
  place-items: center;
  width: 84px;
  border-right: 1px solid rgba(20, 20, 20, 0.38);
}

.process-deco__north svg {
  width: 46px;
  height: 56px;
  overflow: visible;
}

.process-deco__needle {
  transform-box: view-box;
  transform-origin: 24px 30px;
  transform: rotate(-80deg);
  transition: transform 1.6s cubic-bezier(0.22, 1.4, 0.36, 1) 1.5s;
}

.is-deco-in .process-deco__needle {
  transform: rotate(0deg);
}

.process-deco__fields {
  display: grid;
  grid-template-columns: auto auto;
  margin: 0;
}

.process-deco__fields > div {
  display: grid;
  gap: 4px;
  padding: 9px 16px 10px;
  border-bottom: 1px solid rgba(20, 20, 20, 0.2);
}

.process-deco__fields > div:nth-child(odd) {
  border-right: 1px solid rgba(20, 20, 20, 0.2);
}

.process-deco__fields > div:nth-last-child(-n + 2) {
  border-bottom: none;
}

.process-deco__fields dt {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.45);
}

.process-deco__fields dd {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}

/* ---- Skizzen (Reserve-Variante): Strichzeichnung je Schritt ------------- */

[data-deko="skizzen"] .process-step {
  position: relative;
}

.process-deco__sketch {
  position: absolute;
  top: 100%;
  left: -4px;
  width: min(190px, 100%);
  margin-top: clamp(22px, 2.6vw, 40px);
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: rgba(20, 20, 20, 0.4);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process-deco__sketch .is-accent {
  stroke: var(--color-accent);
}

.process-deco__sketch path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 0s linear 0.3s, opacity 0.25s ease;
}

.is-deco-in .process-step:not(.is-open) .process-deco__sketch path {
  stroke-dashoffset: 0;
  opacity: 1;
  transition:
    stroke-dashoffset 1.1s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--sd, 0s) + var(--d, 0s)),
    opacity 0.3s ease calc(var(--sd, 0s) + var(--d, 0s));
}

/* Tablet/Smartphone: Schritte stehen untereinander – dort nur das Raster
   (Bauplan) bzw. keine Skizzen; der Plankopf erst ab Tablet-Breite */
@media (max-width: 1100px) {
  .process-deco__construct,
  .process-deco__sketch,
  .process-deco__endtick,
  .process-deco__level,
  [data-deko="bauplan"] .process-step::before,
  [data-deko="bauplan"] .process-step::after,
  [data-deko="bauplan"] .process-section__grid::after,
  [data-deko="ruhig"] .process-step::after,
  [data-deko="ruhig"] .process-section__grid::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .process-deco__titleblock {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-deco__paper,
  .process-deco__construct *,
  .process-deco__titleblock,
  .process-deco__needle,
  .process-deco__sketch path,
  .process-deco__level,
  .process-deco__endtick,
  [data-deko="bauplan"] .process-step::before,
  [data-deko="bauplan"] .process-step::after,
  [data-deko="bauplan"] .process-section__grid::after,
  [data-deko="ruhig"] .process-step::after,
  [data-deko="ruhig"] .process-section__grid::after {
    transition: none !important;
  }
}

/* ==========================================================================
   „Wie dürfen wir Sie unterstützen?“ — Karten 01 / 02
   - Button mittig (die Striche daneben sind entfernt)
   - Die ganze Karte ist klickbar (der Button-Link spannt sich über die Karte)
   - Hover/Fokus: Die Spalte wird zur Karte (Fläche, Schatten, Leuchten unter
     der Maus), die große Ziffer färbt sich Bordeaux, der Button reagiert,
     die andere Karte tritt zurück. Auf Touch-Geräten ist die Karte immer sichtbar.
   ========================================================================== */

@property --card-mx {
  syntax: '<length-percentage>';
  inherits: true;
  initial-value: 50%;
}

@property --card-my {
  syntax: '<length-percentage>';
  inherits: true;
  initial-value: 40%;
}

.next-step-card {
  --card-pad-x: clamp(28px, 4vw, 64px);   /* = padding-inline aus styles.css */
  --card-edge: clamp(8px, 1.2vw, 16px);    /* Abstand der Kartenfläche zum Spaltenrand */
  --card-bleed-y: clamp(36px, 4.4vw, 64px); /* Kartenfläche ragt über/unter den Inhalt */
  transition:
    opacity 0.5s ease,
    border-color 0.4s ease,
    --card-mx 0.45s ease-out,
    --card-my 0.45s ease-out;
}

.next-step-card__cta {
  justify-content: center;
}

/* Kartenfläche: liegt im Stacking-Kontext der Karte ganz unten */
.next-step-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--card-bleed-y)) var(--card-edge);
  border-radius: 28px;
  background:
    radial-gradient(560px circle at var(--card-mx) var(--card-my), rgba(227, 6, 19, 0.11), transparent 62%),
    linear-gradient(180deg, #ffffff, #fdfdfd);
  border: 1px solid rgba(20, 20, 20, 0.06);
  box-shadow:
    0 1px 2px rgba(20, 20, 20, 0.04),
    0 34px 70px -30px rgba(20, 20, 20, 0.32);
  opacity: 0;
  transform: scale(0.965);
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Ganze Karte klickbar: der Link spannt sich über die Kartenfläche.
   Bezug ist .next-step-card__body (position: relative in styles.css). */
.next-step-card__cta::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: calc(-1 * var(--card-bleed-y)) calc(-1 * (var(--card-pad-x) - var(--card-edge)));
  border-radius: 28px;
}

.next-step-card__cta:focus-visible {
  outline: none;
}

.next-step-card:focus-within::before {
  opacity: 1;
  transform: none;
  box-shadow:
    0 0 0 2px var(--color-accent),
    0 34px 70px -30px rgba(20, 20, 20, 0.32);
}

/* Position und Größe der Ziffer steuert GSAP (Drift + Hineingleiten beim
   Hover, js/start.js) – hier nur Farbe und Deckkraft */
.next-step-card__number {
  transition: color 0.6s ease, opacity 0.6s ease;
}

.next-step-card__body {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.next-step-card__kicker {
  transition: color 0.4s ease;
}

.next-step-card__btn {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s ease;
}

@media (hover: hover) {
  .next-step-card:hover::before {
    opacity: 1;
    transform: none;
  }

  .next-step-card:hover .next-step-card__number {
    color: var(--color-accent);
    opacity: 0.2;
  }

  .next-step-card:hover .next-step-card__body {
    transform: translateY(-4px);
  }

  .next-step-card--secondary:hover .next-step-card__kicker {
    color: var(--color-accent);
  }

  .next-step-card:hover .next-step-card__btn--primary {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    box-shadow: 0 14px 30px -10px rgba(227, 6, 19, 0.6);
  }

  .next-step-card:hover .next-step-card__btn--secondary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    box-shadow: 0 14px 30px -10px rgba(227, 6, 19, 0.6);
  }

  .next-step-card:hover .next-step-card__btn svg {
    transform: translateX(5px);
  }

  /* Die andere Karte tritt zurück, die Trennlinie verschwindet */
  .next-step__grid:hover .next-step-card:not(:hover) {
    opacity: 0.5;
  }

  .next-step__grid:hover .next-step-card {
    border-left-color: transparent;
  }
}

@media (max-width: 1100px) {
  .next-step-card {
    --card-pad-x: clamp(20px, 3vw, 40px);
  }
}

/* Touch-Geräte und Smartphone: ohne Hover bleibt die Karte sichtbar,
   damit klar ist, dass man sie antippen kann */
@media (hover: none), (max-width: 640px) {
  .next-step-card::before {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .next-step-card {
    --card-pad-x: 4px;
    --card-edge: -16px;
    --card-bleed-y: 24px;
  }

  .next-step__grid {
    row-gap: clamp(64px, 16vw, 88px);
  }

  .next-step-card--secondary {
    padding-top: 0;
    border-top: none;
  }

  .next-step-card::before {
    border-radius: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .next-step-card,
  .next-step-card::before,
  .next-step-card__number,
  .next-step-card__body {
    transition: none;
  }
}

/* ==========================================================================
   „Tradition trifft Fortschritt“ — Szene anstelle des Schichtaufbaus
   Mit JS (.is-enhanced): lange Scrollstrecke, darin eine stehende Bühne.
   Die Jahreszahl zählt 1895 → heute und färbt sich von Sepia zu Bordeaux,
   im Rundbogen schiebt eine Zeitlinie das historische Bild weg.
   Ohne JS / bei reduzierter Bewegung: ruhiger Abschnitt, Bild geteilt
   (damals oben, heute unten), beide Texte sichtbar.
   ========================================================================== */

.tradition {
  position: relative;
  background: var(--tradition-bg, #f3ede3);
}

.tradition.is-enhanced {
  height: 260vh;
}

.tradition__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(24px, 5vw, 96px);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--section-pad-y) var(--container-pad);
}

.tradition.is-enhanced .tradition__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding-block: calc(var(--nav-height) * 0.7) 0;
  overflow: hidden;
}

.tradition__eyebrow {
  color: var(--color-accent);
}

.tradition__year {
  margin: 0;
  font-family: var(--font-num);
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.01em;
  font-size: clamp(6rem, 17vw, 17rem);
  font-variant-numeric: tabular-nums;
  color: var(--tradition-year, #8b755d);
}

.tradition__beats {
  display: grid;
  gap: 18px;
  margin-top: clamp(16px, 2.4vw, 32px);
  max-width: 36ch;
}

.tradition__beat {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--color-ink-soft);
}

.tradition__beat b {
  display: block;
  margin-bottom: 8px;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink);
}

/* Mit JS stehen die beiden Texte übereinander und wechseln sich ab */
.tradition.is-enhanced .tradition__beats {
  position: relative;
  display: block;
  min-height: 7.5em;
}

.tradition.is-enhanced .tradition__beat {
  position: absolute;
  inset: 0 auto auto 0;
  will-change: opacity, transform;
}

.tradition.is-enhanced .tradition__beat + .tradition__beat {
  opacity: 0;
}

/* Rundbogen wie bei „So arbeiten wir“ */
.tradition__arch {
  position: relative;
  justify-self: center;
  width: clamp(260px, 30vw, 460px);
  aspect-ratio: 2 / 3;
  max-height: 78svh;
  border-radius: 999px 999px 24px 24px;
  overflow: hidden;
  background: #191919;
  box-shadow: 0 30px 70px -30px rgba(20, 20, 20, 0.45);
}

.tradition__arch img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Grundzustand (ohne JS): geteiltes Bild, Zeitlinie in der Mitte */
.tradition__now {
  clip-path: inset(50% 0 0 0);
}

.tradition.is-enhanced .tradition__now {
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}

.tradition__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 2;
  height: 2px;
  background: var(--color-accent);
  box-shadow: 0 0 18px rgba(227, 6, 19, 0.8);
}

.tradition.is-enhanced .tradition__line {
  top: 100%;
  opacity: 0;
}

.tradition__label {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 3;
  display: none;
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(253, 253, 253, 0.92);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink);
  white-space: nowrap;
}

.tradition.is-enhanced .tradition__label {
  display: block;
}

@media (max-width: 900px) {
  .tradition__stage {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 18px;
  }

  .tradition__year {
    font-size: clamp(5rem, 26vw, 8rem);
  }

  .tradition.is-enhanced .tradition__beats {
    min-height: 6.5em;
    margin-top: 10px;
  }

  .tradition__arch {
    width: min(64vw, 300px);
    max-height: 46svh;
  }
}


/* ==========================================================================
   „Darauf können Sie bauen“: Link „Vorteile von Gussasphalt entdecken“
   Der lange Linktext bekommt auf dem Handy etwas weniger Laufweite; auf sehr
   schmalen Geräten bricht er ausgewogen um und der Pfeil bleibt am Text.
   ========================================================================== */

@media (max-width: 480px) {
  .trust-intro__more {
    letter-spacing: 0.07em;
  }
}

@media (max-width: 374px) {
  .trust-intro__more {
    display: inline;
    line-height: 2;
    text-wrap: balance;
  }

  .trust-intro__more svg {
    margin-left: 6px;
    vertical-align: -2px;
  }
}

/* ==========================================================================
   Referenzkarten „Projekte, die Bestand haben“: Fotos statt Platzhalter
   Das Bild füllt die Kartenfläche (object-fit: cover). Die Fläche wechselt
   je nach Fenster zwischen Hochformat (Tablet) und breitem Querformat
   (Desktop), deshalb bestimmt je Karte ein Fokuspunkt den Ausschnitt:
   --pos (Desktop/Tablet) und --pos-m (Smartphone) am <img> in index.html.
   ========================================================================== */

.showcase-card__media--photo {
  padding: 0;
  overflow: hidden;
  background: #282828;
  border: none;
}

.showcase-card__media--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  background: #282828;
}

@media (max-width: 640px) {
  .showcase-card__media--photo {
    border: none;
  }

  .showcase-card__media--photo img {
    object-position: var(--pos-m, var(--pos, 50% 50%));
  }
}

/* ==========================================================================
   Referenzbereich: Kopf „Unsere Referenzen“ + Beschreibung
   Größe kommt aus dem Typografie-System (styles.css, --fs-section-title).
   Auf der ruhigen Asphaltfläche (.asphalt, wie Band 01–04) ohne Textschatten.
   ========================================================================== */

.showcase__lead {
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: rgba(244, 244, 244, 0.88);
}

/* bga-Siegel in der Vertrauenskarte (seit 10.10.2026): eigenes Siegel statt
   Platzhalter-Logo, so groß wie das Siegel daneben (.trust-card__logos--double) */
.trust-seal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(58px, 5vw, 78px);
  height: clamp(58px, 5vw, 78px);
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px var(--color-line-accent);
  color: var(--color-accent);
  text-align: center;
  line-height: 1;
}

.trust-seal__num {
  font-family: var(--font-num);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.trust-seal__text {
  margin-top: 2px;
  color: var(--color-ink);
  font-size: clamp(0.48rem, 0.62vw, 0.58rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.15;
  text-transform: uppercase;
}

/* Allein auf der Karte (seit 11.10.2026): so groß wie ein einzelnes Siegel */
.trust-card__logos:not(.trust-card__logos--double) .trust-seal {
  width: clamp(72px, 6vw, 92px);
  height: clamp(72px, 6vw, 92px);
}

.trust-card__logos:not(.trust-card__logos--double) .trust-seal__num {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
}

.trust-card__logos:not(.trust-card__logos--double) .trust-seal__text {
  font-size: clamp(0.54rem, 0.7vw, 0.64rem);
}

/* Vertrauenskarten auf schmalen Handys: Siegel über dem Text, damit der
   Text die volle Kartenbreite hat (sonst bleiben neben zwei Siegeln
   nur ~90 px und die Wörter brechen einzeln um) */
@media (max-width: 480px) {
  .trust-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .trust-card__logos {
    justify-content: flex-start;
  }
}

/* Referenzen: Link zur Übersicht (referenzen.html) unter dem Einleitungstext */
.showcase__all {
  margin-top: clamp(14px, 1.6vw, 20px);
}

/* „Über Karl Röfe“: Google-Bewertung als kompakte Vertrauenszeile unter dem
   Text: feine Linie oben, „4,7/5“ kräftig, Sterne in Bordeaux, Anzahl klein.
   Keine Karte. Die ganze Zeile ist ein Link (neuer Tab). Werte und Link trägt
   werkzeuge/pilot_bauen.py aus GOOGLE ein. Einblenden: wie alle Elemente des
   Abschnitts über .about-preview__text > * (css/motion.css). */
.about-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  width: 100%;
  max-width: 34rem;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
  color: var(--color-ink);
  border-radius: 2px;
}

.about-rating__score {
  font-family: var(--font-num);
  font-size: clamp(1.6rem, 1.3rem + 0.6vw, 1.9rem);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-ink);
}

.about-rating__stars {
  position: relative;
  display: inline-block;
  width: max-content;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 2px;
  color: #d4d4d4;
}

.about-rating__stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-accent);
}

.about-rating__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-ink-soft);
  transition: color 0.25s ease;
}

.about-rating__count-text {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s ease;
}

.about-rating__ext {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--color-ink-faint);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.25s ease;
}

.about-rating:hover .about-rating__count,
.about-rating:focus-visible .about-rating__count {
  color: var(--color-ink);
}

.about-rating:hover .about-rating__count-text,
.about-rating:focus-visible .about-rating__count-text {
  text-decoration-color: currentColor;
}

.about-rating:hover .about-rating__ext,
.about-rating:focus-visible .about-rating__ext {
  color: var(--color-accent);
  transform: translate(2px, -2px);
}

.about-rating:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .about-rating__ext {
    transition: none;
  }

  .about-rating:hover .about-rating__ext,
  .about-rating:focus-visible .about-rating__ext {
    transform: none;
  }
}

/* „Über Karl Röfe“: Film (seit 30.09. öffentlich, vorerst Platzhaltervideo).
   Beim Abspielen vollständig sichtbar (contain statt cover, dunkle Ränder),
   Schließen-Knopf oben rechts führt zurück zum Teamfoto (js/start.js). */
.about-video.is-active .about-video__media {
  object-fit: contain;
}

.about-video__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.62);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.about-video__close svg {
  width: 20px;
  height: 20px;
}

.about-video.is-active .about-video__close {
  display: inline-flex;
}

.about-video__close:hover {
  background: rgba(20, 20, 20, 0.82);
}

.about-video__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* „Ihr nächster Schritt“: Überschrift fest zweizeilig („Wie dürfen wir“ /
   „Sie unterstützen?“), die zweite Zeile bricht nie. Auf sehr schmalen
   Handys (unter ca. 380 px) wird die Schrift proportional kleiner, damit
   „Sie unterstützen?“ in die Zeile passt – darüber bleibt die Größe gleich. */
.next-step__title-line {
  white-space: nowrap;
}

.next-step__intro .section-title {
  /* volle Breite des Containers (überbrückt nur dessen Innenabstand) */
  margin-inline: calc(-1 * var(--container-pad));
  font-size: min(var(--fs-section-title), 9.6vw);
}

/* Hero-Gestaltung A „Welle, neu geformt“ (seit 30.10.2026, Domenic; Vergleich
   vergleich/hero-gestaltung.html). Das Hero-Foto (roefe-hero-halle-*.webp) ist
   vollständig, die Welle nicht mehr ins Bild eingebrannt: Drei Masken formen es
   passend zu jeder Fenstergröße. Foto rechts, läuft weich nach links ins Weiß
   aus, unten die Asphaltwelle (assets/images/roefe-hero-welle.svg), unten
   rechts bleibt Platz für „1895“. Gieß-Animation und Titel wie bisher.
   Variante C „Dunkel mit Dampf“ liegt in _uebergabe/hero-alternativen/. */

/* Desktop und Tablet quer (Gegenstück zur Handy-Abfrage oben) */
@media (orientation: landscape) and (min-width: 1101px), (orientation: landscape) and (min-width: 641px) and (min-height: 641px) {
  .hero-photo {
    left: auto;
    right: 0;
    width: 72%;
    object-position: 86% 62%;
    /* Welle unten, weich nach links, kurz nach oben */
    -webkit-mask-image: url("../assets/images/roefe-hero-welle.svg"), linear-gradient(to right, transparent 0, #000 36%), linear-gradient(to bottom, transparent 0, #000 14%);
    mask-image: url("../assets/images/roefe-hero-welle.svg"), linear-gradient(to right, transparent 0, #000 36%), linear-gradient(to bottom, transparent 0, #000 14%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-in, source-in;
    mask-composite: intersect, intersect;
  }

  /* Tagline sitzt auf dem Foto: weiß statt mit hellem Schein */
  .hero-tagline {
    color: #fff;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
  }

  .hero-tagline-line {
    background: #fff;
    box-shadow: none;
    opacity: 0.75;
  }
}

/* Handy und Tablet hochkant: Ausschnitt auf Hand und Streichbrett */
@media (max-width: 640px), (orientation: portrait) and (max-width: 1366px), (orientation: landscape) and (max-height: 640px) and (max-width: 1100px) {
  .hero-photo {
    object-position: 87% 50%;
  }
}