/* Cima Elements Massivhaus GmbH - Onepager
 * Design nach Referenz-Template (Record.mov, 28.07.2026), uebertragen auf die
 * verbindliche Cima-Palette (decisions.md 27.07.2026).
 *
 * Farbeinsatzregel: Rot nur fuer CTA, aktive Zustaende, Linkunterstrich und
 * ein hervorgehobenes Wort je Sektion. Greige hell traegt genau ein warmes
 * Band (Sektion "Ueber Cima"). Greige tief nur Linien, nie Text.
 *
 * Formsystem: Buttons = Pill (Template-Vorgabe), Karten = 20 px, Inputs = 10 px.
 */

/* ---------- Fonts (lokal, DSGVO) ---------- */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  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: 'Inter Tight Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-tight-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-tight-latin-ext-wght-normal.woff2') format('woff2-variations');
  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;
}

/* ---------- Tokens ---------- */

:root {
  --creme: #F7F3EC;        /* Haupt-Hintergrund */
  --karte: #FFFFFF;        /* abgehobene Karten */
  --tinte: #241F1B;        /* Text */
  --stein: #6B635A;        /* Sekundaertext */
  --linie: #E4DDD0;        /* Linien und Rahmen */

  --rot: #A72829;          /* Cima-Rot, sparsamer Akzent */
  --rot-tief: #8A1A1C;     /* Hover/Press */

  --greige: #DBCABC;       /* Greige, nur Flaechen/Linien */
  --greige-hell: #F6EDE6;  /* das eine warme Band */
  --greige-tief: #AE968E;  /* nur Linien, nie Text */

  --dunkel: #1C1712;       /* warme dunkle Sektionen */
  --dunkel-karte: #292219; /* Karten auf dunklem Grund */
  --dunkel-linie: #3B332A;
  --hell-auf-dunkel: #F4EFE7;
  --stein-auf-dunkel: #A99F93;

  --sans: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Inter Tight Variable', 'Inter Variable', system-ui, sans-serif;

  --r-karte: 20px;
  --r-input: 10px;
  --r-pill: 999px;

  --w-inhalt: 64rem;
  --nav-h: 4.5rem;
}

/* ---------- Basis ---------- */

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

/* Kein scroll-behavior: smooth. Das Traegheitsscrollen macht Lenis, und beides
   zusammen kaempft gegeneinander. Faellt Lenis aus, setzt site.js die Klasse
   .kein-lenis und der native Weichlauf springt wieder ein. */
html.kein-lenis { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html.kein-lenis { scroll-behavior: auto; }
}

/* Pflichtstyles von Lenis (aus lenis.css, nur der benoetigte Teil) */
html.lenis,
html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinte);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

/* Anker nicht unter der klebenden Navigation verschwinden lassen */
[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }

/* Wichtig: die Sektionshoehe kommt vom ScrollTrigger-Pin-Spacer, nicht aus
   der festen 100dvh-Hoehe der Testseite - sonst ueberlappen die Folgesektionen
   die gepinnte Buehne. Ueberschreibt scroll-sequence.css. */
section.cima-seq { height: auto; min-height: 100dvh; }

/* Weicher Einstieg in die Sequenz: oben laeuft Creme ins Bild, damit der
   Himmel nicht an einer harten Kante beginnt. Liegt ueber dem Canvas,
   unter dem Schritte-Overlay. */
.cima-seq__stage::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(90px, 16vh, 180px);
  background: linear-gradient(to bottom, #F7F3EC 0%, rgba(247, 243, 236, 0.55) 45%, rgba(247, 243, 236, 0) 100%);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.55s ease;
}

/* Ueber dem Film hat das Band nichts zu suchen: dort ist die Oberkante kein
   Uebergang aus der Creme-Sektion mehr, sondern schlicht der obere Bildrand -
   und ein aufgehellter Streifen darueber sieht aus wie ein Fehler.
   Es geht zusammen mit der Filmebene weg, gleiche Dauer, deshalb faellt der
   Wechsel nicht auf.

   Warum es ueberhaupt sichtbar ist, obwohl `.cima-seq__film` auf z-index 4
   liegt und dieses Band auf 1: GSAP setzt beim weichen Einstieg einen
   `filter` auf `.cima-seq__frame` - und ein Filter, auch `blur(0px)`, macht
   aus dem Rahmen einen eigenen Stapelkontext. Damit zaehlt fuer die Buehne nur
   noch der Rahmen selbst (z-index auto, also 0), und alles darin liegt unter
   dem Band. Am Canvas faellt das nicht auf, weil das Band dort gewollt ist.
   Wer die z-Werte in dieser Sektion aendert: erst diesen Absatz lesen. */
.cima-seq.zeigt-film .cima-seq__stage::before { opacity: 0; }

.inhalt {
  width: min(var(--w-inhalt), 100% - 3.25rem);
  margin-inline: auto;
}

/* Sichtbarer Fokus, gleiches System ueberall */
:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 3px;
  border-radius: 4px;
}
.dunkel :focus-visible,
.formular-karte :focus-visible {
  outline-color: var(--hell-auf-dunkel);
}

::selection { background: var(--greige); color: var(--tinte); }

/* Nur fuer Screenreader */
.nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Ladevorhang ----------
 * Sichtbar nur, solange <html> die Klasse .laedt traegt. Die setzt ein kurzes
 * Skript im Kopf, weggenommen wird sie von site.js, sobald Schriften und die
 * nicht-verzoegerten Bilder da sind (Notausstieg nach 7 s im selben Skript).
 * Ohne JavaScript kommt die Klasse nie - dann sieht niemand den Vorhang.
 */

.vorhang { display: none; }

.laedt { overflow: hidden; }
.laedt .vorhang {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--creme);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.laedt .vorhang.ist-weg {
  opacity: 0;
  pointer-events: none;
}

/* Signet mit Ring, darunter die Wortmarke. Die traegt "Massivhaus GmbH"
   bereits als Unterzeile - kein zusaetzlicher Textname noetig. */
.vorhang__mitte {
  display: grid;
  justify-items: center;
  gap: clamp(1.4rem, 3.5vw, 2.1rem);
}

.vorhang__zeichen {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(8rem, 24vw, 10.5rem);
  aspect-ratio: 1;
}

.vorhang__wortmarke {
  width: clamp(11rem, 32vw, 15rem);
  height: auto;
}

.vorhang__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Durchlaufende Drehung. Bewusst langsamer als die ueblichen 1,4 s -
     die Seite soll ruhig wirken, nicht hektisch. */
  animation: vorhang-drehen 2.6s linear infinite;
}

.vorhang__bogen {
  fill: none;
  /* Leicht durchscheinend: das volle Rot wirkt auf der ruhigen Creme-Flaeche
     zu hart, gerade weil der Bogen staendig in Bewegung ist. */
  stroke: color-mix(in srgb, var(--rot) 68%, transparent);
  stroke-width: 2.2;
  stroke-linecap: round;
  transform-origin: 50% 50%;
  /* Der Bogen waechst und schrumpft, waehrend der Ring dreht. Zusammen ergibt
     das die weiche, endlose Bewegung ohne sichtbaren Anfang und Ende.
     Umfang bei r=56: 2*PI*56 = 351,9. Die Werte unten sind Anteile davon. */
  animation: vorhang-bogen 2.1s cubic-bezier(0.4, 0.05, 0.25, 1) infinite;
}

@keyframes vorhang-drehen {
  to { transform: rotate(360deg); }
}

@keyframes vorhang-bogen {
  0% {
    stroke-dasharray: 18 352;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 230 352;
    stroke-dashoffset: -72;
  }
  100% {
    stroke-dasharray: 18 352;
    stroke-dashoffset: -344;
  }
}

.vorhang__signet {
  width: 50%;
  height: auto;
}

/* Weicher Abgang: der Vorhang blendet weg, das Zeichen geht dabei minimal auf.
   Getrennte Kurven, damit sich beides nicht wie ein Schnitt anfuehlt. */
.laedt .vorhang__mitte {
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.laedt .vorhang.ist-weg .vorhang__mitte {
  opacity: 0;
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .vorhang__ring,
  .vorhang__bogen { animation: none; }
  /* Statt Bewegung ein ruhender Teilbogen - immer noch als Ladezeichen
     erkennbar, aber ohne Animation. */
  .vorhang__bogen {
    stroke-dasharray: 90 352;
    stroke-dashoffset: 0;
  }
  .laedt .vorhang,
  .laedt .vorhang__mitte { transition: none; }
  .laedt .vorhang.ist-weg .vorhang__mitte { transform: none; }
}

/* ---------- Typo ---------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0;
}

.ueberschrift {
  font-size: clamp(1.6rem, 1rem + 2.1vw, 2.35rem);
  max-width: 24em;
  text-wrap: balance;
}

/* Zweiton-Ueberschrift wie im Template: gedaempfter Teil + voller Teil */
.ueberschrift .leise { color: var(--stein); }
.dunkel .ueberschrift .leise { color: var(--stein-auf-dunkel); }

/* Ein hervorgehobenes Wort je Sektion, mehr nicht */
.wort-rot { color: var(--rot); }

p { margin: 0; }

/* ---------- Buttons ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: 500 0.95rem/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.knopf:active { transform: scale(0.98); }

.knopf--rot {
  background: var(--rot);
  color: #fff;
}
.knopf--rot:hover { background: var(--rot-tief); }

.knopf--dunkel {
  background: var(--tinte);
  color: var(--creme);
}
.knopf--dunkel:hover { background: #3a322a; }

.knopf--kontur {
  background: transparent;
  color: var(--tinte);
  border-color: var(--linie);
}
.knopf--kontur:hover { border-color: var(--greige-tief); }

.knopf--hell {
  background: #fff;
  color: var(--tinte);
}
.knopf--hell:hover { background: var(--creme); }

/* ---------- Navigation ----------
 * Insel-Muster: Die Leiste startet unsichtbar auf dem Creme des Heros und
 * verdichtet sich beim Scrollen zu einer schwebenden Pille (Blur, Linie,
 * getoenter Schatten). Links: Signet + Wortmarke. Mitte: Anker mit
 * Scrollspy-Unterstrich (Rot = aktiver Abschnitt, siehe Farbeinsatzregel).
 * Rechts: Telefon (ab 1120 px) + Kontakt-CTA + Burger.
 */

.ueberspringen {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translate(-50%, calc(-100% - 1.5rem));
  z-index: 60;
  padding: 0.6rem 1.2rem;
  border-radius: var(--r-pill);
  background: var(--tinte);
  color: var(--creme);
  font-size: 0.88rem;
  text-decoration: none;
  transition: transform 0.25s ease;
}
.ueberspringen:focus-visible { transform: translate(-50%, 0); }

.navigation {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  padding-top: 0.6rem;
  transition: transform 0.45s var(--weich), opacity 0.3s ease;
}

/* Waehrend das Begruessungsvideo laeuft, faehrt die Leiste nach oben raus:
   die Buehne fuellt dann den Bildschirm, und eine Pille mit Telefonnummer
   quer ueber Cimas Gesicht ist genau die Stoerung, die ein Film nicht braucht.
   Sie kommt zurueck, sobald weitergescrollt wird oder der Film durch ist -
   beides setzt site.js. Die Leiste bleibt dabei im Fluss, es verschiebt sich
   also nichts. */
body.film-laeuft .navigation {
  transform: translateY(calc(-100% - 1.5rem));
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .navigation { transition: opacity 0.3s ease; }
  body.film-laeuft .navigation { transform: none; }
}

/* Auf dem Telefon faehrt die Leiste erst ein, wenn wirklich gescrollt wurde
   (Martins Vorgabe 13.08.). Am Seitenanfang liegt sie sonst als Pille quer
   ueber Cimas Portrait, und der erste Eindruck ist der Hero, nicht das Menue.
   `.am-anfang` setzt site.js bis 40 px Scrollstand. Auf dem Desktop bleibt
   alles wie es war - dort ist links und rechts genug Platz. */
@media (max-width: 800px) {
  .navigation.am-anfang {
    transform: translateY(calc(-100% - 1.5rem));
    opacity: 0;
    pointer-events: none;
  }
  /* Tastaturbedienung: wer aus dem Ueberspringen-Link weitertabbt, landet im
     Menue - und muss es dann auch sehen. Bewusst kein `visibility: hidden`:
     damit gaebe es keinen Fokus, der die Leiste zurueckholen koennte. */
  .navigation.am-anfang:focus-within {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  /* Offenes Menue schlaegt alles: wer es aufgeklappt hat, hat gescrollt. */
  .navigation.am-anfang.ist-offen {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
}

.navigation__zeile {
  height: 100%;
  display: grid;
  /* Anker links neben dem Logo, nicht mittig: die rechte Gruppe (Sprache,
     Nummer, Kontakt) bekommt dadurch eine sichtbare Luecke davor, statt dass
     alles in einer durchgehenden Reihe steht. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  /* Die Pille ist um den Innenabstand breiter als die Inhaltsspalte, damit
     Logo und Anker weiter auf der Kante der Sektionen darunter sitzen.
     Ueberschreibt width und margin aus .inhalt - beides muss hier stehen,
     sonst gewinnt der Negativabstand gegen margin:auto und die Pille
     klebt links. */
  width: min(calc(var(--w-inhalt) + 2.2rem), calc(100% - 0.8rem));
  margin-inline: auto;
  padding-inline: 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: background-color 0.35s ease, border-color 0.35s ease,
              box-shadow 0.35s ease;
}
.navigation.ist-verdichtet .navigation__zeile {
  background: color-mix(in srgb, var(--creme) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: var(--linie);
  /* Schatten getoent in der Tinte-Farbe statt reinem Schwarz */
  box-shadow: 0 18px 40px -26px rgba(36, 31, 27, 0.45);
}

.navigation__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}
.navigation__signet { height: 2.35rem; width: auto; }
.navigation__wortmarke { height: 1.5rem; width: auto; }

.navigation__anker {
  display: flex;
  gap: 1.9rem;
  justify-self: start;
  margin-left: clamp(1.5rem, 4vw, 3.25rem);
}
.navigation__anker a {
  position: relative;
  padding-block: 0.35rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--stein);
  text-decoration: none;
  transition: color 0.2s ease;
}
/* Unterstrich waechst von links heran; bleibt beim aktiven Abschnitt stehen */
.navigation__anker a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.navigation__anker a:hover,
.navigation__anker a:focus-visible,
.navigation__anker a.ist-aktiv { color: var(--tinte); }
.navigation__anker a:hover::after,
.navigation__anker a:focus-visible::after,
.navigation__anker a.ist-aktiv::after { transform: scaleX(1); }

.navigation__aktion {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

/* Trennt die Sprachwahl von Nummer und Kontakt - zwei Gruppen, nicht eine
   Reihe. Verschwindet mit der Nummer, sonst haengt er allein da. */
.navigation__trenner {
  width: 1px;
  height: 1.35rem;
  background: var(--linie);
}
@media (max-width: 1240px) {
  .navigation__trenner { display: none; }
}

.navigation__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
  text-decoration: none;
  /* Seit die Sprachpille daneben steht, wird die Zeile enger - ohne das hier
     bricht die Rufnummer mitten durch. */
  white-space: nowrap;
  flex: none;
}
.navigation__tel svg { color: var(--rot); }
.navigation__tel:hover {
  text-decoration: underline;
  text-decoration-color: var(--rot);
  text-underline-offset: 0.35em;
}
/* Eine Stufe frueher als vorher (1120 px): mit der Sprachpille daneben wird
   die Leiste sonst zu voll. Die Nummer steht im aufgeklappten Menue weiter. */
@media (max-width: 1240px) {
  .navigation__tel { display: none; }
}

.navigation__mobilkontakt { display: none; }

/* Der Kontakt-Knopf im aufgeklappten Menue. Ueber 800 px gibt es ihn nicht -
   dort steht der Knopf rechts in der Leiste. */
.navigation__menuekontakt { display: none; }

.navigation__burger { display: none; }

@media (max-width: 800px) {
  /* `position: relative` macht die Leiste zum Bezugsrahmen des aufgeklappten
     Menues. Ohne sie hing das Menue an der mittleren Gitterspalte und war bei
     390 px nur 222 statt 369 px breit - gemessen am 13.08., aufgefallen erst,
     als die Wortmarke die linke Spalte breiter gemacht hat. Betrifft sonst
     nichts: das einzige weitere absolut positionierte Element in der Leiste
     ist der Scrollspy-Unterstrich, und der haengt an seinem eigenen `a`. */
  .navigation__zeile { grid-template-columns: auto 1fr auto; position: relative; }

  /* Bis zum 13.08. stand hier `display: none` mit der Begruendung, die
     Wortmarke waere auf schmalen Schirmen kleiner als lesbar. Das stimmte,
     solange rechts noch Flaggen, Nummer UND Kontakt-Knopf standen. Seit der
     Knopf ins Menue gewandert ist, ist Platz da - und ein Signet ohne Namen
     sagt beim ersten Besuch niemandem, wo man gelandet ist (Martins Vorgabe).
     1,05 rem Hoehe sind bei 5,2 : 1 rund 87 px Breite; die Unterzeile
     "Massivhaus GmbH" bleibt dabei lesbar. */
  .navigation__wortmarke { display: block; height: 1.05rem; }
  .navigation__signet { height: 2rem; }
  .navigation__logo { gap: 0.5rem; }
  .navigation__aktion { gap: 0.7rem; }

  .navigation__anker {
    position: absolute;
    /* `grid-column` an einem absolut positionierten Element ist kein Widerspruch:
       die Leiste ist ein Grid, und der Browser nimmt fuer solche Kinder die
       Gitterzelle als Bezug. Ohne diese Zeile hing das Menue in der mittleren
       Spalte und war bei 390 px nur 222 statt 374 px breit - gemessen am
       13.08., nachdem die Wortmarke die linke Spalte breiter gemacht hat.
       Mit `1 / -1` ist der Bezug die ganze Zeile, und left/right greifen wie
       gedacht. */
    grid-column: 1 / -1;
    /* Die Grundregel weiter oben setzt `justify-self: start` und einen linken
       Rand. Beides wirkt hier weiter und hat das Menue trotz `left`/`right`
       auf Inhaltsbreite zusammengezogen - 222 statt 369 px bei 390 px Schirm,
       gemessen am 13.08. Erst mit diesem Zuruecksetzen greifen left/right. */
    justify-self: stretch;
    margin-left: 0;
    width: auto;
    top: calc(var(--nav-h) + 0.4rem);
    /* Bezug ist die Gitterflaeche, und die liegt innerhalb des Innenabstands
       der Pille (1,1 rem). Ohne den Abzug stuende das Menue 25 px innerhalb
       der Pillenkante statt buendig darunter. */
    left: calc(0.4rem - 1.1rem);
    right: calc(0.4rem - 1.1rem);
    flex-direction: column;
    gap: 0;
    background: color-mix(in srgb, var(--creme) 94%, #fff 6%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--linie);
    border-radius: var(--r-karte);
    box-shadow: 0 24px 50px -28px rgba(36, 31, 27, 0.5);
    padding: 0.6rem 1.4rem 1.2rem;
    display: none;
  }
  .navigation.ist-offen .navigation__anker { display: flex; }
  .navigation__anker a {
    padding: 0.85rem 0;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--linie);
  }
  .navigation__anker a::after { content: none; }
  .navigation__anker a.ist-aktiv { color: var(--rot); }

  .navigation__mobilkontakt {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-top: 1rem;
  }

  /* Der Kontakt-Knopf schliesst das Menue ab: volle Breite, damit er als
     Handlungsaufruf liest und nicht als vierter Menuepunkt. Der Knopf in der
     Leiste ist auf dieser Breite ausgeblendet, sichtbar ist also immer nur
     einer von beiden. */
  /* `.navigation__anker a` ist spezifischer als `.knopf--rot` und faerbte die
     Schrift steingrau statt weiss (gemessen rgb(107,99,90) auf rot - 2,6 : 1,
     also unter der Schwelle). Deshalb hier zusammen mit dem Element benannt,
     damit Weiss und der fehlende Untertrich gewinnen. */
  .navigation__anker a.navigation__menuekontakt {
    display: flex;
    width: 100%;
    margin-top: 1rem;
    color: #fff;
    border-bottom: 0;
  }
  .navigation__aktion > .knopf--rot { display: none; }
  /* Die Menuepunkte darueber tragen eine Trennlinie. Beim Telefonlink darf sie
     nicht stehen: sie schoebe sich zwischen Nummer und Oeffnungszeit, obwohl
     beides zusammengehoert. */
  .navigation__mobilkontakt a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 0;
    padding-block: 0;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--tinte);
    text-decoration: none;
  }
  .navigation__mobilkontakt svg { color: var(--rot); }
  .navigation__mobilkontakt span {
    font-size: 0.84rem;
    color: var(--stein);
    padding-left: 1.55rem;
  }

  /* Aufklappen mit versetztem Einstieg, gleiche Handschrift wie .zeigen */
  @media (prefers-reduced-motion: no-preference) {
    .navigation.ist-offen .navigation__anker > * {
      animation: nav-eintritt 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    }
    .navigation.ist-offen .navigation__anker > :nth-child(2) { animation-delay: 0.04s; }
    .navigation.ist-offen .navigation__anker > :nth-child(3) { animation-delay: 0.08s; }
    .navigation.ist-offen .navigation__anker > :nth-child(4) { animation-delay: 0.12s; }
    .navigation.ist-offen .navigation__anker > :nth-child(5) { animation-delay: 0.16s; }
  }

  .navigation__burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: none;
    border: 1px solid var(--linie);
    border-radius: var(--r-pill);
    cursor: pointer;
  }
  .navigation__burger span {
    display: block;
    width: 1.05rem;
    height: 1.5px;
    background: var(--tinte);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  }
  /* Burger wird zum X, wenn das Menue offen ist */
  .navigation.ist-offen .navigation__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .navigation.ist-offen .navigation__burger span:nth-child(2) { opacity: 0; }
  .navigation.ist-offen .navigation__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ---------- Sprachen in der Navigation ----------
 * Drei Flaggen, klein und dicht - zusammen kaum breiter als die frueher hier
 * stehende Klappliste. Die Flaggen liegen als lokale SVG in assets/img.
 * Stand: Platzhalter, siehe Kommentar im Markup.
 *
 * Anmerkung zur Sache: Flaggen stehen fuer Laender, nicht fuer Sprachen -
 * Deutsch spricht man auch in Oesterreich, Englisch nicht nur in
 * Grossbritannien. Fuer diese drei geht es auf, weil die Zuordnung eindeutig
 * genug ist. Bei einer vierten Sprache noch einmal daruebersehen.
 */

.flaggen {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Kurzer Hinweis nach dem Klick. Absolut positioniert, damit die Leiste
   nicht springt, und nach ein paar Sekunden wieder weg. */
.flaggen__notiz {
  position: absolute;
  top: calc(100% + 0.7rem);
  right: 0;
  z-index: 5;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--linie);
  border-radius: var(--r-mini);
  background: color-mix(in srgb, var(--creme) 94%, #fff 6%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px -20px rgba(36, 31, 27, 0.5);
  font-size: 0.76rem;
  white-space: nowrap;
  color: var(--stein);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s var(--weich);
}
.flaggen__notiz.ist-sichtbar {
  opacity: 1;
  transform: none;
}

.flaggen__knopf {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 3px;
  cursor: pointer;
  line-height: 0;
  /* Klickflaeche groesser als das Bild, ohne die Leiste breiter zu machen */
  outline-offset: 3px;
  transition: opacity 0.2s ease, transform 0.2s var(--weich);
}
.flaggen__knopf img {
  width: 1.5rem;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
  /* Haarlinie statt Schatten: Weiss im Union Jack und im Schwarz-Rot-Gold
     braucht eine Kante, sonst franst die Flagge auf dem Creme aus. */
  box-shadow: 0 0 0 1px rgba(36, 31, 27, 0.16);
}

/* Nicht gewaehlt: nur leicht zurueckgenommen. Bei 45 Prozent waren der
   Union Jack blass und der albanische Adler kaum noch zu erkennen - und
   genau die Flaggen zu sehen ist der Zweck. Die aktuelle Sprache markiert
   der rote Strich, nicht der Kontrast. */
.flaggen__knopf:not([aria-current]) { opacity: 0.8; }
.flaggen__knopf:hover { opacity: 1; transform: translateY(-1px); }
.flaggen__knopf:active { transform: translateY(0); }

/* Aktiv: roter Unterstrich, dieselbe Markierung wie beim aktiven Anker. */
.flaggen__knopf[aria-current] {
  position: relative;
}
.flaggen__knopf[aria-current]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--rot);
}

@media (max-width: 420px) {
  .flaggen { gap: 0.3rem; }
  .flaggen__knopf img { width: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .flaggen__knopf,
  .flaggen__notiz { transition: none; }
}

@keyframes nav-eintritt {
  from { opacity: 0; transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .navigation__zeile,
  .navigation__anker a::after,
  .navigation__burger span { transition: none; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero__bild {
  position: absolute;
  /* Zentriert ueber inset + margin auto, BEWUSST ohne translateX(-50%):
     GSAP liest ein vorhandenes Transform aus der berechneten Matrix als
     Pixelwert und legt seine eigene Verschiebung obendrauf. Das Bild sass
     dadurch eine halbe Bildbreite zu weit links. Ohne Transform im CSS
     gehoert die Transform-Ebene allein GSAP. */
  left: 0;
  right: 0;
  bottom: 0;
  margin-inline: auto;
  width: fit-content;
  /* Groesse ueber --hero-hoehe steuerbar. 98 % der Hero-Hoehe laesst oben
     gerade so viel Luft, dass der Scheitel nicht unter der Navigation klebt.
     Die rem-Grenze deckelt es auf sehr hohen Fenstern. */
  height: min(var(--hero-hoehe, 98%), 64rem);
  pointer-events: none;
  user-select: none;
  /* Wie in der Referenz: das Portrait loest sich schon unterhalb des Gesichts
     auf und ist zum unteren Rand hin ganz verschwunden. Zwei Masken uebereinander,
     senkrecht und waagerecht - dadurch laufen auch die Schultern zu den Seiten
     hin aus, statt an einer Silhouettenkante zu enden.
     Stellschraube: --hero-fade-start (ab wo es weggeht), --hero-fade-ende. */
  --hero-fade-start: 30%;
  --hero-fade-ende: 88%;
  -webkit-mask-image:
    linear-gradient(to bottom,
      #000 var(--hero-fade-start),
      rgba(0, 0, 0, 0.78) 42%,
      rgba(0, 0, 0, 0.48) 55%,
      rgba(0, 0, 0, 0.24) 67%,
      rgba(0, 0, 0, 0.08) 78%,
      transparent var(--hero-fade-ende)),
    linear-gradient(to right,
      transparent 0%, rgba(0, 0, 0, 0.6) 9%, #000 20%,
      #000 80%, rgba(0, 0, 0, 0.6) 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom,
      #000 var(--hero-fade-start),
      rgba(0, 0, 0, 0.78) 42%,
      rgba(0, 0, 0, 0.48) 55%,
      rgba(0, 0, 0, 0.24) 67%,
      rgba(0, 0, 0, 0.08) 78%,
      transparent var(--hero-fade-ende)),
    linear-gradient(to right,
      transparent 0%, rgba(0, 0, 0, 0.6) 9%, #000 20%,
      #000 80%, rgba(0, 0, 0, 0.6) 91%, transparent 100%);
  mask-composite: intersect;
}
/* Zwischenebene fuer die Skalierung beim Scrollen. Eigenes Element, damit
   Parallaxe (Container), Zoom (hier) und Auftritt (Bild) sich nicht dieselbe
   Transform-Eigenschaft teilen muessen. */
.hero__bild-zoom {
  position: relative;
  height: 100%;
  transform-origin: 50% 72%;
  will-change: transform;
}

/* Der Loop liegt deckungsgleich ueber dem Standbild und blendet erst auf,
   wenn er wirklich laeuft. Bis dahin und ohne Video sieht man das Bild. */
/* Standbild und Video kommen aus demselben Bildausschnitt und haben dasselbe
   Seitenverhaeltnis. Deshalb deckt object-fit: fill exakt, ohne Versatz und
   ohne Beschnitt. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  /* Kurz, nicht lang: Bild 0 des Loops ist deckungsgleich mit dem Standbild,
     ein langer Uebergang wuerde nur Bewegungszeit verschenken. */
  transition: opacity 0.35s ease;
  pointer-events: none;
}
/* Die Deckkraft der Videoebene steuert site.js ueber GSAP - der Loop kommt
   als Auftritt herein, nicht als CSS-Klasse. Die Klasse .hat-video gibt es
   deshalb nicht mehr. */

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

.hero__bild img {
  display: block;
  height: 100%;
  width: auto;
  /* Kein Feinausgleich mehr: Standbild und Video werden aus demselben,
     mittig um die Silhouette gelegten Ausschnitt geschnitten. Ein Versatz hier
     wuerde den Container breiter machen als das Bild, und das Video sitzt
     danach nicht mehr deckungsgleich. */
  margin-left: var(--hero-nudge, 0px);
}

/* Kein width:100% hier - das wuerde die Breitenbegrenzung aus .inhalt
   ueberschreiben und den Text an die Fensterkante kleben. */
.hero__inhalt {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(2rem, 5vh, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  /* Oben buendig statt unten: die KI-Kennzeichnung rechts und die Markenpille
     links beginnen damit auf derselben Zeile, ganz ohne Korrekturwert. Vorher
     lagen beide Spalten unten buendig und der rechte Block wurde per top um
     einen gemessenen Betrag nachgeschoben - das griff nur oberhalb einer
     bestimmten Fensterhoehe und fiel darunter ersatzlos weg. */
  align-items: start;
  gap: 2rem;
}

.hero__marke {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--linie);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--creme) 75%, transparent);
  backdrop-filter: blur(6px);
  font-size: 0.85rem;
  color: var(--stein);
  margin-bottom: 1.1rem;
}

.hero__titel {
  font-size: clamp(2.05rem, 1.15rem + 3.4vw, 3.5rem);
  max-width: 11em;
}

.hero__neben {
  justify-self: end;
  max-width: 21rem;
  display: grid;
  gap: 1.1rem;
  justify-items: start;
  /* Feinausgleich: die Markenpille links ist hoeher gepolstert als die
     KI-Pille rechts. Bei gleichem Kastenrand saesse die Schrift rechts rund
     3 px hoeher als links. Der Wert schiebt den rechten Block so weit nach
     unten, dass beide Pillen auf derselben Mittelachse liegen und die Schrift
     buendig steht. Nachmessen, wenn sich Schriftgroesse oder Polsterung einer
     der beiden Pillen aendert: halbe Hoehendifferenz der beiden Pillen. */
  --neben-runter: 3px;
  padding-top: var(--neben-runter);
  position: relative;
}
.hero__neben p {
  font-size: 0.95rem;
  color: var(--stein);
  text-shadow: 0 1px 8px rgba(247, 243, 236, 0.8);
}

@media (max-width: 800px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  /* Portrait steht auf dem Handy ueber dem Text, nicht darunter: es ist der
     Einstieg der Seite und war unter dem Textblock erst nach dem Scrollen zu
     sehen. Auf dem Desktop bleibt es unberuehrt, dort liegt es ohnehin hinter
     dem Text. */
  .hero__bild {
    position: relative;
    left: auto;
    transform: none;
    order: 1;
    height: auto;
    margin-inline: auto;
    margin-top: 0.5rem;
    /* Die untere Maske loest das Portrait ab 78 Prozent auf und ist ab 88
       Prozent ganz durchsichtig. Der leere Rest des Kastens wuerde als Loch
       ueber der Marke stehen, deshalb zieht der Text ihn wieder hoch. */
    margin-bottom: -3rem;
  }
  .hero__bild img { height: min(52vh, 26rem); }
  .hero__inhalt {
    order: 2;
    /* minmax(0, 1fr) statt 1fr: eine einzeilig gehaltene Pille ist breiter als
       ihre Spalte, und ein blosses 1fr laesst das Grid-Element auf seine
       Mindestbreite aufgehen - der Kasten waere dann breiter als der Bildschirm
       und die Messung im Skript wuerde immer "passt" ergeben. (11.08.) */
    grid-template-columns: minmax(0, 1fr);
    padding-top: 1rem;
    padding-bottom: 0;
    gap: 0;
  }
  /* Einspaltig gibt es keine zweite Spalte, an der etwas auszurichten waere -
     der Feinausgleich aus der zweispaltigen Fassung entfaellt.
     Der rechte Block wird ausserdem aufgeloest (display: contents), damit
     seine Kinder direkte Zellen von .hero__inhalt werden. Grund ist die
     KI-Kennzeichnung: sie gehoert zum Portrait, laege einspaltig aber hinter
     Markenpille und Ueberschrift - rund 500 px vom Bild entfernt und damit
     weiter, als der Desktop-Abstand von 313 px, der am 10.08. als zu weit
     verworfen wurde. Ueber order rueckt sie jetzt direkt unter das Portrait.
     Die Abstaende, die sonst .hero__neben als Grid setzt, stehen deshalb hier
     einzeln - .hero__inhalt hat auf dieser Breite gap: 0. (11.08.) */
  .hero__neben {
    display: contents;
  }
  .hero__inhalt > div:first-child { order: 2; }
  /* Reihenfolge und Abstand hier, die Ausrichtung weiter unten beim
     .hero__kizeichen-Block: dessen Basisregel setzt justify-self und steht
     spaeter in der Datei, ein Wert an dieser Stelle bliebe wirkungslos. */
  .hero__kizeichen { order: 1; margin-bottom: 1.4rem; }
  .hero__neben p { order: 3; margin-top: 1.25rem; }
  .hero__neben .knopf { order: 4; margin-top: 1.4rem; justify-self: start; }

  /* Die Markenpille bleibt einzeilig. Zwei Zeilen in einer Pille lesen sich
     wie ein Textblock mit Rahmen, nicht wie eine Beschriftung, und schieben
     die Ueberschrift nach unten. Statt einer festen kleineren Schriftgroesse
     eine an die Containerbreite gebundene: die Uebersetzungen in /en/ und /sq/
     sind unterschiedlich lang, ein fester Wert wuerde je Sprache anders
     ausgehen. 2.95cqi ergibt auf einem 390-px-Fenster rund 10 px.
     Die Untergrenze von 0.6rem ist bewusst gesetzt: laeuft eine Uebersetzung
     darueber hinaus, bricht die Pille lieber um, als unleserlich zu werden.
     Dann gehoert der Text gekuerzt, nicht die Schrift. */
  .hero__inhalt { container-type: inline-size; }
  .hero__marke {
    font-size: clamp(0.6rem, 2.95cqi, 0.85rem);
    padding-inline: 0.85rem;
  }
}

/* ---------- Sektionen, Grundrhythmus ---------- */

.sektion { padding-block: clamp(3.5rem, 7.5vw, 6.25rem); }

.sektion__kopf {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr);
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sektion__label {
  font-size: 0.92rem;
  color: var(--stein);
}
.dunkel .sektion__label { color: var(--stein-auf-dunkel); }

@media (max-width: 800px) {
  .sektion__kopf { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* Einblendung beim Scrollen */
@media (prefers-reduced-motion: no-preference) {
  .zeigen {
    opacity: 0;
    transform: translateY(30px);
    /* Lange, sehr weich auslaufende Kurve - dieselbe Handschrift wie die
       Hero-Bewegung, damit die Seite beim Scrollen aus einem Guss wirkt. */
    transition: opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--zeig-delay, 0s);
  }
  .zeigen.ist-sichtbar {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Bruecke: vom Hero in die Bausequenz ----------
 * Der Uebergang zur gepinnten Scroll-Sequenz. Unten bewusst wenig Abstand:
 * Der Scroll-Hinweis soll optisch in den Creme-Verlauf am Sequenzanfang
 * muenden (siehe .cima-seq__stage::before weiter oben).
 */

/* Der Bauablauf ist seit dem 30.07. kein eigener Abschnitt mehr, sondern der
   dritte Block im Kapitel Massivhausbau - direkt vor der Sequenz. */
.blockkopf--bruecke { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }

/* ---------- Etappen: die Strecke vor der Sequenz ----------
 * Fuenf Marken, gleichmaessig ueber die Inhaltsbreite verteilt. Dieselbe
 * Bildsprache wie die Tafel in der Bau-Sektion (Linie, Punkt, Beschriftung),
 * damit die Seite eine Handschrift behaelt.
 *
 * Die Linie liegt NICHT auf dem Behaelter, sondern als kurzes Stueck an jeder
 * Marke ausser der letzten - von dieser Punktmitte zur naechsten. Eine Linie
 * ueber den ganzen Behaelter lief rechts ueber die letzte Marke hinaus ins
 * Leere, weil die Punkte am Spaltenanfang sassen und nicht am Rand.
 */

.etappen {
  --etappen-spalt: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: var(--etappen-spalt);
}
.etappen__stufe {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.75rem;
  align-content: start;
}
/* Verbindung zur naechsten Marke: von der eigenen Punktmitte eine Spaltenbreite
   plus Spalt weiter - genau bis zur Mitte des naechsten Punkts. */
.etappen__stufe:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 1.25rem;
  left: 50%;
  width: calc(100% + var(--etappen-spalt));
  height: 1px;
  background: var(--linie);
}
.etappen__punkt {
  position: relative;
  z-index: 1;          /* der Punkt schneidet die Linie */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: var(--creme);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  color: var(--stein);
}
.etappen__name {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

@media (max-width: 760px) {
  /* Senkrecht statt fuenf Spalten: bei 390 px passt "Bodenplatte" sonst
     nicht neben "Uebergabe", und die Namen brechen mitten im Wort. */
  .etappen {
    --etappen-spalt: 0rem;
    grid-template-columns: 1fr;
  }
  .etappen__stufe {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    justify-items: start;
    text-align: left;
    align-items: center;
    column-gap: 1rem;
    padding-block: 0.4rem;
  }
  /* Senkrecht laeuft die Verbindung von der Punktmitte bis zur naechsten. */
  .etappen__stufe:not(:last-child)::before {
    top: 1.25rem;
    left: 1.25rem;
    width: 1px;
    height: 100%;
  }
}

/* ---------- Etappenleiste im Sequenz-Overlay ----------
 * Aufbau macht site.js (siehe Kommentar dort). Die Selektoren sind bewusst
 * dreistufig: scroll-sequence.css wird nach dieser Datei geladen, ueber
 * Reihenfolge ist hier also nichts zu gewinnen, nur ueber Spezifitaet.
 */

.cima-seq .etappenleiste {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 1.6rem;
  max-width: min(44rem, calc(100% - 11rem));
}
.cima-seq .etappenleiste .cima-seq__dot {
  position: relative;
  flex: 1 1 0;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.5rem;
  width: auto;
  height: auto;
  background: none;
  transition: none;
}
/* Verbindung zur naechsten Marke, gleiche Loesung wie bei .etappen oben:
   ein Stueck je Marke statt einer Linie ueber den ganzen Behaelter. Die lief
   rechts ueber die letzte Marke hinaus. */
.cima-seq .etappenleiste .cima-seq__dot:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 1.05rem;
  left: 50%;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.etappenleiste__zahl {
  position: relative;
  z-index: 1;          /* die Ziffer schneidet die Linie */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  /* 0.72 statt 0.6: ueber einem hellen Himmel kam die Ziffer sonst nur auf
     Kontrast 3,9. Gemessen im Kontrast-Durchlauf. */
  background: rgba(20, 17, 15, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.78);
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.etappenleiste__name {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
  transition: color 0.4s ease;
}

/* schon durch */
.cima-seq .etappenleiste .ist-erledigt .etappenleiste__zahl {
  border-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.9);
}
.cima-seq .etappenleiste .ist-erledigt .etappenleiste__name {
  color: rgba(255, 255, 255, 0.78);
}

/* gerade dran - die einzige rote Stelle im Overlay */
.cima-seq .etappenleiste .cima-seq__dot.is-active .etappenleiste__zahl {
  background: var(--rot);
  border-color: var(--rot);
  color: #fff;
}
.cima-seq .etappenleiste .cima-seq__dot.is-active .etappenleiste__name {
  color: #fff;
  font-weight: 500;
}

@media (max-width: 700px) {
  /* Auf dem Telefon steht das Overlay unter dem Bild auf Creme. Gleiche
     Strecke, nur dunkel auf hell und eine Nummer kleiner. */
  .cima-seq .etappenleiste {
    max-width: none;
    margin-top: 1.2rem;
  }
  .cima-seq .etappenleiste .cima-seq__dot:not(:last-child)::before {
    background: rgba(36, 31, 27, 0.18);
  }
  .cima-seq .etappenleiste .cima-seq__dot { gap: 0.4rem; }
  .etappenleiste__zahl {
    width: 1.8rem;
    height: 1.8rem;
    border-color: rgba(36, 31, 27, 0.2);
    background: var(--creme);
    font-size: 0.72rem;
    color: rgba(36, 31, 27, 0.55);
  }
  .cima-seq .etappenleiste .cima-seq__dot:not(:last-child)::before { top: 0.9rem; }
  .etappenleiste__name {
    font-size: 0.68rem;
    color: rgba(36, 31, 27, 0.55);
    text-shadow: none;
  }
  .cima-seq .etappenleiste .ist-erledigt .etappenleiste__zahl {
    border-color: rgba(36, 31, 27, 0.35);
    color: rgba(36, 31, 27, 0.8);
  }
  .cima-seq .etappenleiste .ist-erledigt .etappenleiste__name { color: rgba(36, 31, 27, 0.75); }
  /* Der aktive Name steht hier auf Creme, nicht auf dem Bild - Weiss waere
     unlesbar. Die rote Nummer bleibt, sie traegt weissen Text auf Rot. */
  .cima-seq .etappenleiste .cima-seq__dot.is-active .etappenleiste__name {
    color: var(--tinte);
  }
}

@media (prefers-reduced-motion: reduce) {
  .etappenleiste__zahl,
  .etappenleiste__name { transition: none; }
}

/* Scroll-Hinweis: ein Punkt faellt die Linie entlang nach unten, Richtung
   Sequenz. Dezent, kein Dauerblinken. */
.bruecke__cue {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.bruecke__cue-text {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--stein);
}
.bruecke__cue-linie {
  position: relative;
  width: 1px;
  height: 3.4rem;
  background: var(--linie);
}
.bruecke__cue-linie::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--rot);
  animation: cue-fall 2.6s cubic-bezier(0.45, 0, 0.4, 1) infinite;
}
@keyframes cue-fall {
  0%   { transform: translateY(-4px); opacity: 0; }
  18%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { transform: translateY(3.2rem); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bruecke__cue-linie::after { animation: none; opacity: 0.6; top: auto; bottom: 0; }
}


/* ==========================================================================
   Ab hier: alles unterhalb der Scroll-Sequenz (Redesign 30.07.2026)
   Hero, Navigation, Bruecke und Sequenz stehen unveraendert weiter oben.

   Aufbau der Seite nach der Sequenz:
     Tuer (Video)  ->  Weiche (zwei Zweige)  ->  01 Massivhausbau
     ->  Baustelle  ->  02 Immobilien (dunkel)  ->  Ueber Cima (Greige-Band)
     ->  Fragen  ->  Kontakt  ->  Abschluss

   Farbeinsatzregel unveraendert: Rot nur fuer CTA, aktive Zustaende,
   Linkunterstrich und ein hervorgehobenes Wort je Sektion. Greige hell traegt
   genau ein Band (Ueber Cima). Greige tief nur Linien, nie Text.
   ========================================================================== */

:root {
  /* Formsystem feiner gestuft als vorher (war ueberall 20px):
     grosse Flaechen weicher, innenliegende Elemente straffer. */
  --r-gross: 26px;
  --r-klein: 12px;
  --r-mini: 6px;

  /* Cima-Rot hell aus der verbindlichen Palette (decisions.md 27.07.).
     Auf dunklem Grund kommt das normale Rot nur auf Kontrast 2,5 - zu wenig.
     Hell erreicht 3,7 und traegt damit grosse Schrift. Fuer kleine Schrift
     auf Dunkel wird stattdessen Greige verwendet, siehe unten. */
  --rot-hell: #BB4E4A;

  /* Ein einziges Bewegungsprofil fuer die ganze Seite. */
  --weich: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Feines Korn auf den dunklen Flaechen. Ohne das wirken grosse dunkle
   Sektionen wie eine leere Farbflaeche; mit Korn bekommen sie Oberflaeche.
   Rein dekorativ, deshalb pointer-events aus. */
.dunkel {
  position: relative;
  color: var(--hell-auf-dunkel);
  background-color: var(--dunkel);
  background-image:
    radial-gradient(90% 60% at 12% 0%, rgba(167, 40, 41, 0.10), transparent 60%),
    radial-gradient(70% 50% at 100% 100%, rgba(219, 202, 188, 0.06), transparent 60%);
}
.dunkel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dunkel .ueberschrift,
.dunkel h3 { color: var(--hell-auf-dunkel); }
/* Farbregel bleibt (ein hervorgehobenes Wort je Sektion), nur der Ton wird
   auf dunklem Grund aufgehellt, damit der Kontrast reicht. */
.dunkel .wort-rot { color: var(--rot-hell); }
/* Der Inhalt muss ueber dem Kornschleier liegen, sonst legt sich das
   Pseudoelement (absolut positioniert) ueber den Text. */
.dunkel > * { position: relative; z-index: 1; }

/* Kleinere Schwester der Hauptueberschrift, fuer Sektionen, die nicht
   die volle Groesse brauchen. Bricht die Monotonie: vorher hatte jede
   Sektion exakt dieselbe Ueberschriftengroesse. */
.ueberschrift--klein {
  font-size: clamp(1.35rem, 0.95rem + 1.3vw, 1.8rem);
  max-width: 21em;
}

/* Zaehler vor dem Sektionslabel: 01 Massivhausbau, 02 Immobilien.
   Bindet die beiden Zweigsektionen sichtbar an die Weiche darueber. */
.sektion__zaehler {
  display: inline-block;
  margin-right: 0.7rem;
  padding-right: 0.7rem;
  border-right: 1px solid var(--linie);
  font-variant-numeric: tabular-nums;
  color: var(--rot);
}
/* Kleine Schrift: auch das helle Rot bleibt auf Dunkel unter 4,5. Deshalb
   traegt der Zaehler dort Greige statt Rot. */
.dunkel .sektion__zaehler {
  border-right-color: var(--dunkel-linie);
  color: var(--greige);
}

/* ---------- Tuer / Begruessungsvideo ----------
 * Bis zum 12.08. stand unter der Sequenz ein eigener Block (`.tuer-block`) mit
 * dem Standbild der Haustuer links und Text rechts. Der Film liegt jetzt in der
 * gepinnten Sequenz selbst, ueber ihrem letzten Frame und in voller Breite -
 * damit ist der Block ersatzlos entfallen und mit ihm alle `.tuer*`-Regeln.
 * Die Gestaltung der Filmebene steht weiter unten bei der Sequenz, zusammen
 * mit deren KI-Kennzeichnung. Der alte Stand liegt in
 * `05_Website/backup-2026-08-12-video/css/site.css`, falls der Block je
 * zurueckkommen soll.
 */

/* ---------- Weiche: die zwei Geschaeftszweige ----------
 * Der strukturelle Kern. Zwei Wege, gleich gross, aber bewusst unterschiedlich
 * gebaut: der Hausbau traegt ein echtes Baustellenfoto, die Immobilien eine
 * dunkle Flaeche - dieselbe Farbe wie ihre Sektion weiter unten, damit die
 * Zuordnung ohne Erklaerung sitzt.
 */

.sektion--weiche { padding-block: clamp(3rem, 7vw, 6rem); }

.weiche__kopf {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(0, 3.2fr);
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.weiche {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.weiche__weg {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  /* Hoehe des Bildbands. Steht an einer Stelle, weil sowohl das Band selbst
     als auch der Abstand darueber daran haengen - laufen die auseinander,
     verschwindet das Foto hinter dem Textblock. */
  --band: clamp(14rem, 20vw, 18rem);
  min-height: 0;
  justify-content: flex-end;
  padding: var(--band) 0 0;
  border-radius: var(--r-gross);
  overflow: hidden;
  text-decoration: none;
  color: var(--hell-auf-dunkel);
  background: var(--dunkel);
  transition: box-shadow 0.35s var(--weich);
}

/* Bildebene als eigenes Pseudoelement, damit nur sie zoomt und der Text
   gestochen stehen bleibt. */
.weiche__weg--bau::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  inset: 0 0 auto 0;
  height: var(--band);
  background: url('../assets/img/baustelle-dachstuhl.webp') center 62% / cover no-repeat;
  transform: scale(1.02);
  transition: transform 0.9s var(--weich);
}
.weiche__weg--bau::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
}

/* Kein Verlauf mehr. Text und Bild haben getrennte Flaechen: das Foto steht
   oben unverschleiert, der Text auf ruhigem Dunkel. Gemessen steigt der
   schlechteste Kontrast im Label damit von 1,6 auf 11,2 (10.08.). Die Flaeche
   ist so hoch wie ihr Inhalt - kein fester Prozentwert, der bei der englischen
   und albanischen Fassung bricht. */
.weiche__inhalt {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--dunkel);
  border-radius: 0 0 var(--r-gross) var(--r-gross);
}
.weiche__weg--bau:hover::before,
.weiche__weg--bau:focus-visible::before { transform: scale(1.07); }

.weiche__weg--immo {
  border: 1px solid var(--dunkel-linie);
}
/* Bildebene wie bei der Bau-Kachel: nur das Pseudoelement zoomt, der Text
   bleibt gestochen. Das Rauschen von frueher ist entfallen - auf einem Foto
   trug es nichts und lag mit z-index -1 ohnehin ueber dem Bild. */
.weiche__weg--immo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  inset: 0 0 auto 0;
  height: var(--band);
  background: url('../assets/img/immobilien-haus.webp') center 52% / cover no-repeat;
  transform: scale(1.02);
  transition: transform 0.9s var(--weich);
}
.weiche__weg--immo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: transparent;
}
.weiche__weg--immo:hover::before,
.weiche__weg--immo:focus-visible::before { transform: scale(1.07); }

.weiche__nummer {
  position: absolute;
  top: clamp(1.1rem, 2vw, 1.5rem);
  right: clamp(1.1rem, 2vw, 1.5rem);
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--hell-auf-dunkel);
  background: rgba(18, 14, 11, 0.82);
  padding: 0.34rem 0.62rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(244, 239, 231, 0.16);
  line-height: 1;
}

.weiche__zweig {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--greige);
}

.weiche__titel {
  margin-top: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 0.85rem + 1.3vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
  max-width: 16ch;
  text-wrap: balance;
}

.weiche__text {
  font-size: 0.95rem;
  color: var(--stein-auf-dunkel);
  max-width: 38ch;
}

.weiche__mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.7rem;
  padding-bottom: 0.2rem;
  width: fit-content;
  font-size: 0.93rem;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.weiche__mehr svg { transition: transform 0.3s var(--weich); }
.weiche__weg:hover .weiche__mehr,
.weiche__weg:focus-visible .weiche__mehr { border-bottom-color: var(--rot); }
.weiche__weg:hover .weiche__mehr svg,
.weiche__weg:focus-visible .weiche__mehr svg { transform: translateX(4px); }
.weiche__weg:active { transform: translateY(1px); }

@media (max-width: 860px) {
  .weiche { grid-template-columns: 1fr; }
  .weiche__kopf { grid-template-columns: 1fr; gap: 0.75rem; }
  .weiche__weg { --band: 13rem; }
  /* Schmal wird das Motiv stark beschnitten - Ausschnitt etwas hoeher, damit
     Dach und Vordach im Band bleiben. */
  .weiche__weg--immo::before { background-position: center 46%; }
}

@media (prefers-reduced-motion: reduce) {
  .weiche__weg--bau::before,
  .weiche__weg--immo::before,
  .weiche__mehr svg { transition: none; }
  .weiche__weg--bau:hover::before,
  .weiche__weg--immo:hover::before { transform: scale(1.02); }
}

/* ---------- Kopf der beiden Zweigsektionen ---------- */

.zweig__kopf {
  display: grid;
  gap: 1rem;
  max-width: 52rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
.zweig__kopf .sektion__label { display: flex; align-items: center; }
.zweig__lead {
  color: var(--stein);
  max-width: 58ch;
  text-wrap: pretty;
}
.dunkel .zweig__lead { color: var(--stein-auf-dunkel); }

/* ---------- Marken: Merkmale als Textzeile statt als Pillen ---------- */

.marken {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1.15rem;
  margin: 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--linie);
  list-style: none;
  font-size: 0.92rem;
  color: var(--stein);
}
.marken li { display: flex; align-items: center; }
.marken li + li::before {
  content: '';
  width: 1px;
  height: 0.85em;
  margin-right: 1.15rem;
  background: var(--greige-tief);
}

@media (max-width: 720px) {
  /* Sobald die Zeile umbricht, haengen die Trennstriche am Zeilenanfang in
     der Luft. Auf schmalen Schirmen deshalb untereinander, mit einem
     kurzen Strich davor statt dazwischen. */
  .marken {
    display: grid;
    gap: 0.55rem;
  }
  .marken li { padding-left: 1.35rem; position: relative; }
  .marken li::before,
  .marken li + li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 0.6rem;
    height: 1px;
    margin: 0;
    background: var(--greige-tief);
  }
}

/* ---------- Von der Baustelle ---------- */

/* Zwischenkopf fuer die Bloecke innerhalb eines Kapitels. Das Kapitel
   Massivhausbau ist lang, ohne diese Zwischenkoepfe waere es eine Wand. */
.blockkopf {
  display: grid;
  gap: 0.8rem;
  max-width: 48rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.blockkopf p { color: var(--stein); max-width: 54ch; text-wrap: pretty; }
.blockkopf .sektion__label { margin-bottom: -0.35rem; }

.baustelle {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(150px, 15vw, 215px);
  gap: clamp(0.65rem, 1.2vw, 1rem);
}
.baustelle figure {
  position: relative;
  margin: 0;
  border-radius: var(--r-klein);
  overflow: hidden;
  background: var(--greige-hell);
}

/* Die ganze Kachel ist der Ausloeser. Button statt Klick-Handler auf dem
   Bild, damit Tastatur und Screenreader sie ohne Zusatzarbeit bedienen. */
.baustelle__oeffnen {
  display: block;
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.baustelle__oeffnen:focus-visible {
  outline: 3px solid var(--tinte);
  outline-offset: -3px;
}

.baustelle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--weich);
}
.baustelle__oeffnen:hover img { transform: scale(1.04); }

/* Abspielzeichen nur auf den Kacheln, hinter denen ein Clip liegt */
.baustelle__oeffnen[data-medium="video"]::after {
  content: '';
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(20, 17, 15, 0.55) no-repeat center/0.75rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M0 0l12 7-12 7z' fill='%23fff'/%3E%3C/svg%3E");
  backdrop-filter: blur(4px);
  transition: background-color 0.25s ease, transform 0.25s var(--weich);
}
.baustelle__oeffnen[data-medium="video"]:hover::after {
  background-color: var(--rot);
  transform: scale(1.06);
}

.baustelle figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2rem 1.1rem 0.95rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(to top, rgba(20, 17, 15, 0.78), rgba(20, 17, 15, 0.25) 55%, transparent);
  transition: padding-bottom 0.35s var(--weich);
}
.baustelle__oeffnen:hover figcaption { padding-bottom: 1.35rem; }

/* Sechs Kacheln in Bauablauf-Reihenfolge. Oben drei gleich grosse Etappen,
   darunter links die beiden letzten Bauschritte, rechts das gedeckte Dach
   gross als Schlusspunkt. Kommt eine Etappe dazu, hier weiterschreiben. */
.baustelle figure:nth-child(1) { grid-column: 1 / 5;  grid-row: 1; }
.baustelle figure:nth-child(2) { grid-column: 5 / 9;  grid-row: 1; }
.baustelle figure:nth-child(3) { grid-column: 9 / 13; grid-row: 1; }
.baustelle figure:nth-child(4) { grid-column: 1 / 6;  grid-row: 2; }
.baustelle figure:nth-child(5) { grid-column: 1 / 6;  grid-row: 3; }
.baustelle figure:nth-child(6) { grid-column: 6 / 13; grid-row: 2 / 4; }

@media (max-width: 800px) {
  .baustelle { grid-template-columns: 1fr; grid-auto-rows: 215px; }
  .baustelle figure { grid-column: auto !important; grid-row: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  .baustelle img,
  .baustelle figcaption { transition: none; }
  .baustelle__oeffnen:hover img { transform: none; }
}

/* ---------- Lichtkasten (Bild oder Clip gross) ---------- */

.lichtkasten {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lichtkasten[hidden] { display: none; }

.lichtkasten__grund {
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 15, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.lichtkasten.ist-offen .lichtkasten__grund { opacity: 1; }

.lichtkasten__box {
  position: relative;
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  max-width: min(70rem, 100%);
  opacity: 0;
  transform: scale(0.97) translateY(10px);
  transition: opacity 0.4s var(--weich), transform 0.4s var(--weich);
}
.lichtkasten.ist-offen .lichtkasten__box {
  opacity: 1;
  transform: none;
}

.lichtkasten__medium {
  display: grid;
  border-radius: var(--r-klein);
  overflow: hidden;
  background: #100d0b;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8);
}
.lichtkasten__medium img,
.lichtkasten__medium video {
  display: block;
  max-width: 100%;
  /* Platz für Titelzeile und Rand lassen, sonst läuft Hochkant unten raus */
  max-height: calc(100dvh - 11rem);
  width: auto;
  height: auto;
}

.lichtkasten__titel {
  font-size: 0.95rem;
  color: var(--stein-auf-dunkel);
  text-align: center;
}

.lichtkasten__zu {
  position: absolute;
  top: -3.1rem;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.lichtkasten__zu:hover { background: rgba(255, 255, 255, 0.18); }
.lichtkasten__zu:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .lichtkasten__zu { top: -2.9rem; right: 50%; transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) {
  .lichtkasten__grund,
  .lichtkasten__box { transition: none; }
  .lichtkasten__box { transform: none; }
}

/* ---------- Zweig 2: Immobilien ----------
 * Bewusst als Leistungstafel gebaut, nicht als Kartenraster: vier Zeilen an
 * einer gemeinsamen Linie, wie ein Verzeichnis. Damit bekommt das zweite
 * Standbein Gewicht, ohne nach Immobilienportal auszusehen.
 */

.dienste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
}
.dienst {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.15rem;
  row-gap: 0.35rem;
  padding: clamp(1.4rem, 2.5vw, 1.9rem) 0;
  border-top: 1px solid var(--linie);
}
/* Die letzte Zeile jeder Spalte schliesst die Tafel unten ab. */
.dienst:nth-last-child(-n+2) { border-bottom: 1px solid var(--linie); }

.dienst__zeichen {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-mini);
  color: var(--stein);
  background: var(--greige-hell);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.dienst:hover .dienst__zeichen {
  background: color-mix(in srgb, var(--rot) 12%, transparent);
  color: var(--rot);
}
.dienst h3 { font-size: 1.12rem; align-self: center; }
.dienst p {
  font-size: 0.94rem;
  color: var(--stein);
  max-width: 40ch;
  text-wrap: pretty;
}

/* Die vier Schritte der Zusammenarbeit: gleiche Tafel, statt Zeichen eine
   Nummer. Bewusst nicht noch eine Strecke mit Linie - die traegt weiter
   unten der Bauablauf, und zwei gleiche Strecken in einem Kapitel lesen
   sich als Wiederholung. */
.dienste--schritte .dienst__zeichen {
  border-radius: 50%;
  background: none;
  border: 1px solid var(--linie);
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dienste--schritte .dienst:hover .dienst__zeichen {
  border-color: var(--rot);
  background: none;
}

/* Dunkle Fassung: das Kapitel Immobilien. */
.dunkel .dienst { border-top-color: var(--dunkel-linie); }
.dunkel .dienst:nth-last-child(-n+2) { border-bottom-color: var(--dunkel-linie); }
.dunkel .dienst__zeichen {
  color: var(--greige);
  background: rgba(219, 202, 188, 0.07);
}
.dunkel .dienst:hover .dienst__zeichen {
  background: rgba(167, 40, 41, 0.18);
  color: var(--hell-auf-dunkel);
}
.dunkel .dienst p { color: var(--stein-auf-dunkel); }

@media (max-width: 800px) {
  .dienste { grid-template-columns: 1fr; }
  .dienst:nth-last-child(-n+2) { border-bottom: 0; }
  .dienst:last-child { border-bottom: 1px solid var(--linie); }
  .dunkel .dienst:last-child { border-bottom-color: var(--dunkel-linie); }
}

/* Dreierreihe: bei drei Leistungen laesst die 2x2-Tafel unten ein Loch.
   Hier steht das Zeichen ueber dem Titel, damit die Spalten schmal sein
   duerfen, ohne dass der Text zerfaellt. */
.dienste--drei {
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
}
.dienste--drei .dienst {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0.6rem;
  /* Ohne align-content: start ziehen die Zeilen einer kurzen Spalte
     auseinander - die dritte Ueberschrift sass sichtbar tiefer als die
     beiden daneben. */
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2rem) 0 0;
  border-bottom: 0;
}
.dienste--drei .dienst__zeichen {
  grid-row: auto;
  margin-bottom: 0.35rem;
}
.dienste--drei .dienst h3 { align-self: auto; }
.dienste--drei .dienst p { max-width: 34ch; }

@media (max-width: 800px) {
  .dienste--drei { grid-template-columns: 1fr; }
  .dienste--drei .dienst {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.15rem;
    row-gap: 0.35rem;
  }
  .dienste--drei .dienst__zeichen { grid-row: 1 / span 2; margin-bottom: 0; }
  .dienste--drei .dienst h3 { align-self: center; }
}

/* ---------- Was dazugehoert ----------
 * Der eigentliche Unterschied zum Maklergeschaeft. Bewusst anders gebaut als
 * die Tafel darueber: Aussage links, Belege rechts, dazwischen eine Linie.
 * Keine Nummern - es ist eine Liste dessen, was dazugehoert, kein Ablauf,
 * und drei nummerierte Strecken auf einer Seite waeren eine zu viel.
 */

.dabei {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--dunkel-linie);
}

.dabei__text { display: grid; gap: 0.85rem; }
.dabei__text .sektion__label { margin-bottom: -0.3rem; }
.dabei__text p {
  color: var(--stein-auf-dunkel);
  max-width: 46ch;
  text-wrap: pretty;
}

.dabei__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.dabei__liste li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  padding: 0.95rem 0;
  font-size: 0.97rem;
  color: var(--stein-auf-dunkel);
  border-top: 1px solid var(--dunkel-linie);
}
.dabei__liste li:first-child { border-top: 0; padding-top: 0; }
.dabei__liste li:last-child { padding-bottom: 0; }
.dabei__liste svg {
  margin-top: 0.18em;
  color: var(--greige);
}
.dabei__liste strong {
  display: block;
  font-weight: 500;
  color: var(--hell-auf-dunkel);
}

@media (max-width: 800px) {
  .dabei { grid-template-columns: 1fr; }
}

/* Helle Variante fuer das Massivbau-Kapitel: gleiche Struktur, Farben der
   hellen Sektion. Seit dem 06.08. Zuhause der Bauueberwachung, die vorher
   im Immobilien-Block stand. */
.dabei--hell { border-top-color: var(--linie); }
.dabei--hell .dabei__text p { color: var(--stein); }
.dabei--hell .dabei__liste li { color: var(--stein); border-top-color: var(--linie); }
.dabei--hell .dabei__liste svg { color: var(--greige-tief); }
.dabei--hell .dabei__liste strong { color: var(--tinte); }

/* Suchauftrag statt Objektliste: der bewusste Verzicht auf eine Galerie,
   ausgesprochen und mit einem Weg ins Formular versehen. */
.suchauftrag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border: 1px solid var(--dunkel-linie);
  border-radius: var(--r-gross);
  background: rgba(41, 34, 25, 0.55);
}
.suchauftrag__text { display: grid; gap: 0.4rem; }
.suchauftrag h3 { font-size: 1.18rem; }
.suchauftrag p {
  font-size: 0.94rem;
  color: var(--stein-auf-dunkel);
  max-width: 52ch;
}
.suchauftrag .knopf { flex: none; }

/* ---------- Ueber Cima (das eine warme Band) ----------
 * Bilder links, Text rechts - andersherum als die Sektionen darueber, damit
 * die Seite nicht in ein Muster faellt. Die beiden Portraits sind nicht mehr
 * gleich gross nebeneinander, sondern gestaffelt und ueberlappend.
 */

.ueber {
  background: var(--greige-hell);
  border-top: 1px solid var(--greige);
  border-bottom: 1px solid var(--greige);
}

.ueber__raster {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.ueber__bilder {
  position: relative;
  margin: 0;
  padding: 0 0.9rem 0.9rem 0;
}
/* Versetzter Rahmen hinter dem Bild: gibt Tiefe, ohne ein zweites Foto zu
   brauchen. Greige tief ist hier eine Linie, kein Text - Farbregel bleibt. */
.ueber__bilder::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(100% - 2.6rem);
  height: calc(100% - 2.6rem);
  border: 1px solid var(--greige-tief);
  border-radius: var(--r-gross);
}
.ueber__bild-gross {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-gross);
}

.ueber__text { display: grid; gap: 1.05rem; }
.ueber__text .ueberschrift { margin-bottom: 0.3rem; }
.ueber__text p { color: var(--stein); max-width: 54ch; }

.ueber__zitat {
  margin: 0.4rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--rot);
  display: grid;
  gap: 0.5rem;
}
.ueber__zitat p {
  font-family: var(--display);
  font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.35rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--tinte);
  max-width: 30ch;
}
.ueber__zitat cite {
  font-style: normal;
  font-size: 0.86rem;
  color: var(--stein);
}

.ueber__merkmale {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.ueber__merkmale li {
  position: relative;
  padding: 0.8rem 0 0.8rem 1.5rem;
  font-size: 0.97rem;
  color: var(--tinte);
}
.ueber__merkmale li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 0.5rem;
  height: 1px;
  background: var(--greige-tief);
}
.ueber__merkmale li + li { border-top: 1px solid var(--greige); }

/* Nur belegte Angaben. Zahlen tabellarisch, damit sie ruhig stehen. */
.fakten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--greige);
}
.fakten div { display: grid; gap: 0.3rem; }
.fakten dt {
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--stein);
}
.fakten dd {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1rem, 0.85rem + 0.5vw, 1.22rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
}

@media (max-width: 900px) {
  .ueber__raster { grid-template-columns: 1fr; }
  .ueber__bilder { max-width: 26rem; }
  .fakten { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}

/* ---------- Fragen ----------
 * Kein Karten-Akkordeon mehr, sondern eine Liste an durchlaufenden Linien.
 * Ruhiger, und die geoeffnete Antwort haengt sichtbar an ihrer Frage.
 */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.faq__links { display: grid; gap: 1.2rem; justify-items: start; }
.faq__links p { color: var(--stein); max-width: 34ch; }

.faq__liste { display: grid; }

.frage { border-top: 1px solid var(--linie); }
.frage:last-child { border-bottom: 1px solid var(--linie); }

.frage summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem 0;
  font-weight: 500;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover { color: var(--rot); }
.frage summary::after {
  content: '';
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  background:
    linear-gradient(var(--stein), var(--stein)) center / 100% 1px no-repeat,
    linear-gradient(var(--stein), var(--stein)) center / 1px 100% no-repeat;
  transition: transform 0.3s var(--weich);
}
.frage[open] summary::after { transform: rotate(135deg); }

.frage__antwort { padding: 0 0 1.35rem; }
.frage__antwort p {
  color: var(--stein);
  font-size: 0.96rem;
  max-width: 62ch;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .faq { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .frage summary::after { transition: none; }
}

/* ---------- Kontakt ---------- */

.kontakt__kopf {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(0, 3.2fr);
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.kontakt__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: clamp(1rem, 2vw, 1.4rem);
  align-items: start;
}

.formular-karte {
  position: relative;
  background: var(--dunkel);
  background-image: radial-gradient(80% 60% at 100% 0%, rgba(167, 40, 41, 0.13), transparent 62%);
  color: var(--hell-auf-dunkel);
  border-radius: var(--r-gross);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 1.15rem;
  align-content: start;
}

.feld { display: grid; gap: 0.45rem; }
.feld label {
  font-size: 0.88rem;
  font-weight: 500;
}
.feld__paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
}
.feld input,
.feld textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--dunkel-karte);
  border: 1px solid var(--dunkel-linie);
  border-radius: var(--r-input);
  color: var(--hell-auf-dunkel);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s ease;
}
.feld input::placeholder,
.feld textarea::placeholder { color: #8d8377; }
.feld input:hover,
.feld textarea:hover { border-color: #4d4437; }
.feld input:focus,
.feld textarea:focus {
  outline: 2px solid var(--hell-auf-dunkel);
  outline-offset: 1px;
  border-radius: var(--r-input);
}
.feld textarea { min-height: 7.5rem; resize: vertical; }

.feld--fehler input,
.feld--fehler textarea { border-color: var(--rot-hell); }
.feld__fehler {
  font-size: 0.83rem;
  color: #E5A9A2;
  display: none;
}
.feld--fehler .feld__fehler { display: block; }

/* Auswahl Massivhausbau / Immobilien - dieselbe Zweiteilung wie in der
   Weiche weiter oben, damit die Entscheidung wiedererkennbar ist. */
.feld--wahl {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}
.feld--wahl legend {
  padding: 0;
  font-size: 0.88rem;
  font-weight: 500;
}
.segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.segment label {
  position: relative;
  display: flex;
  padding: 0.85rem 1rem;
  border: 1px solid var(--dunkel-linie);
  border-radius: var(--r-klein);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.segment label:hover { border-color: #4d4437; }
.segment input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.segment__inhalt { display: grid; gap: 0.15rem; }
.segment__titel { font-size: 0.95rem; font-weight: 500; }
.segment__zusatz { font-size: 0.79rem; color: var(--stein-auf-dunkel); }
.segment label:has(input:checked) {
  border-color: var(--rot);
  background: color-mix(in srgb, var(--rot) 16%, transparent);
}
.segment label:has(input:focus-visible) {
  outline: 2px solid var(--hell-auf-dunkel);
  outline-offset: 2px;
}

.einwilligung {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.84rem;
  color: var(--stein-auf-dunkel);
}
.einwilligung input {
  margin-top: 0.2rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--rot);
  flex: none;
}
.einwilligung a {
  color: var(--hell-auf-dunkel);
  text-decoration: underline;
  text-decoration-color: var(--rot);
  text-underline-offset: 0.25em;
}

/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein normales Feld */
.hp-feld {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular-karte .knopf { width: 100%; }

.formular__status {
  font-size: 0.88rem;
  color: var(--stein-auf-dunkel);
  display: none;
}
.formular__status.ist-sichtbar { display: block; }

.kontakt-karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.kontakt-karte__kopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}
.kontakt-karte img {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--r-klein);
  object-fit: cover;
}
.kontakt-karte h3 { font-size: 1.12rem; margin-bottom: 0.3rem; }
.kontakt-karte p { color: var(--stein); font-size: 0.93rem; }

.kontakt-karte__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linie);
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: var(--tinte);
}
.kontakt-karte__tel svg { color: var(--rot); flex: none; }
.kontakt-karte__tel:hover {
  text-decoration: underline;
  text-decoration-color: var(--rot);
  text-underline-offset: 0.28em;
}
.kontakt-karte__mail {
  font-size: 0.95rem;
  color: var(--tinte);
  text-decoration: underline;
  text-decoration-color: var(--greige-tief);
  text-underline-offset: 0.28em;
}
.kontakt-karte__mail:hover { text-decoration-color: var(--rot); }

.kontakt-karte__zeiten {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
}
.kontakt-karte__zeiten div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
}
.kontakt-karte__zeiten dt { color: var(--stein); }
.kontakt-karte__zeiten dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.kontakt-karte address {
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
  font-style: normal;
  font-size: 0.9rem;
  color: var(--stein);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .kontakt__kopf { grid-template-columns: 1fr; gap: 0.75rem; }
  .kontakt__raster { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .feld__paar,
  .segment { grid-template-columns: 1fr; }
  /* Rechtsbuendige Werte brechen auf schmalen Schirmen unschoen um. */
  .kontakt-karte__zeiten div { flex-direction: column; gap: 0.1rem; }
  .kontakt-karte__zeiten dd { text-align: left; }
}

/* ---------- Fusszeile ----------
 * Der grosse Abschluss-Aufruf ist am 30.07. rausgeflogen: direkt darueber
 * steht bereits die Kontaktsektion, ein zweiter Kontakt-Knopf zwei
 * Bildschirmhoehen spaeter war eine Wiederholung ohne Nutzen.
 */

.fusszeile {
  padding-top: clamp(3.25rem, 6vw, 5rem);
  padding-bottom: 2rem;
}

.fusszeile__spalten {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 2rem;
  padding-bottom: 2.5rem;
}
.fusszeile__marke { display: grid; gap: 1.1rem; align-content: start; }

/* Dieselbe Sperrung wie in der Navigation: Signet, daneben die Wortmarke.
   Beides steht auf einer hellen Trageflaeche, weil das "CIMA" in der
   Wortmarke im Markenrot gesetzt ist und dieses Rot auf dem dunklen Grund
   nur Kontrast 2,5 erreicht. Die Flaeche ist der Originalzustand der Datei
   (weisser Hintergrund), nur gerundet - kein Eingriff in die Logofarben. */
.fusszeile__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  width: fit-content;
  padding: 0.9rem 1.25rem;
  border-radius: var(--r-klein);
  background: var(--hell-auf-dunkel);
  text-decoration: none;
  transition: background-color 0.25s ease;
}
.fusszeile__logo:hover { background: #fff; }
.fusszeile__signet { width: 2.5rem; height: auto; }
.fusszeile__wortmarke { width: 9.5rem; height: auto; }

.fusszeile__marke p {
  font-size: 0.92rem;
  color: var(--stein-auf-dunkel);
  max-width: 30ch;
}
.fusszeile__spalten h3 {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--stein-auf-dunkel);
  margin-bottom: 0.9rem;
}
.fusszeile__spalten ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.fusszeile__spalten a {
  color: var(--hell-auf-dunkel);
  text-decoration: none;
  font-size: 0.93rem;
}
.fusszeile__spalten a:hover {
  text-decoration: underline;
  text-decoration-color: var(--rot);
  text-underline-offset: 0.3em;
}
.fusszeile__spalten address {
  font-style: normal;
  font-size: 0.93rem;
  color: var(--hell-auf-dunkel);
  line-height: 1.7;
}

.fusszeile__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  border-top: 1px solid var(--dunkel-linie);
  padding-top: 1.4rem;
  font-size: 0.85rem;
  color: var(--stein-auf-dunkel);
}
.fusszeile__recht { display: flex; gap: 1.25rem; }
.fusszeile__recht a {
  color: var(--stein-auf-dunkel);
  text-decoration: none;
}
.fusszeile__recht a:hover {
  color: var(--hell-auf-dunkel);
  text-decoration: underline;
  text-decoration-color: var(--rot);
  text-underline-offset: 0.3em;
}

@media (max-width: 800px) {
  .fusszeile__spalten { grid-template-columns: 1fr 1fr; }
  .fusszeile__marke { grid-column: span 2; }
}
@media (max-width: 520px) {
  .fusszeile__spalten { grid-template-columns: 1fr; }
  .fusszeile__marke { grid-column: auto; }
}

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */

.unterseite {
  max-width: 44rem;
  margin-inline: auto;
  padding-block: 3.5rem 5rem;
}
/* `hyphens` mit Absicht: "Datenschutzerklärung" ist bei 2 rem auf einem 390er
   Telefon 411 px breit und schob die ganze Seite waagerecht heraus - gemessen
   am 13.08. Der Browser trennt mit `lang="de"` am html-Element sauber nach
   deutschen Regeln; `overflow-wrap` ist die Reissleine, falls eine Sprache
   ohne Trennmuster ausgeliefert wird. Betrifft alle Unterseiten, in allen
   drei Sprachen. */
.unterseite h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  hyphens: auto;
  overflow-wrap: break-word;
}
.unterseite h2 {
  font-size: 1.25rem;
  margin: 2.2rem 0 0.6rem;
  hyphens: auto;
  overflow-wrap: break-word;
}
.unterseite p, .unterseite address { color: var(--stein); font-style: normal; margin-bottom: 0.8rem; }
.unterseite a {
  color: var(--tinte);
  text-decoration: underline;
  text-decoration-color: var(--rot);
  text-underline-offset: 0.25em;
}


/* ============================================================
   KENNZEICHNUNG KI-INHALTE (Art. 50 AI Act, in Kraft seit 02.08.2026)
   Wiederhergestellt am 10.08.2026. Diese Regeln standen im ausgelieferten
   Vorschau-Stand vom 05.08., fehlten aber im Arbeitsstand - zusammen mit den
   zugehoerigen Elementen in index.html. Zweiter Vorfall dieser Art nach dem
   04.08. Nicht entfernen, ohne die Auszeichnung in index.html mit zu pruefen.
   ============================================================ */

/* ---------- KI-Zeichen am Hero (AI Act Art. 50) ----------
 * Knapp gehalten: die Erlaeuterung steht gesammelt auf ki-hinweis.html, hier
 * markiert nur eine Pille das Bild. Sie sitzt oben rechts und damit weit weg
 * vom Textblock - stuende sie darueber, laese man sie als Vorspann zu „Cima
 * Trumm baut ..." statt als Angabe zum Portrait.
 * Beschriftung ausgeschrieben und nicht als zwei Buchstaben: die Leitlinien
 * verlangen einen Hinweis, der ohne Zusatzhandlung verstaendlich ist (03.08.).
 * Sichtbar nur, solange der Loop laeuft: bei Datensparmodus, 2G oder
 * abgelehntem Autoplay bleibt Cimas unveraendertes Foto stehen, und dann waere
 * das Zeichen schlicht falsch. site.js setzt dafuer .hat-loop am Hero, sobald
 * das Video wirklich anlaeuft (frueher lief das ueber .hat-video am Zoom-
 * Wrapper - die Klasse gibt es nicht mehr, seit GSAP die Deckkraft steuert).
 */
.hero__kizeichen {
  /* Steht seit dem 10.08. im Textfluss von .hero__neben statt absolut in der
     Ecke des Abschnitts: als Angabe zum Portrait muss sie beim Portrait sein,
     vorher lagen 313 px dazwischen. Bleibt im Fluss, auch solange sie
     unsichtbar ist - sonst springt das Layout, wenn der Loop anlaeuft. */
  justify-self: start;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.38rem 0.75rem;
  /* Kraeftiger gezeichnet als die erste Fassung, aber weiter die helle Pille
     der Seite und kein dunkler Block: voll deckender Grund statt Milchglas,
     dunkle Kontur und Schrift in Tinte mit 600er Schnitt. Der rote Punkt davor
     ist am 10.08. wieder entfallen. Gemessen 14,75 : 1 statt vorher 5,4 : 1. */
  border: 1.5px solid var(--tinte);
  border-radius: var(--r-pill);
  background: var(--creme);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-decoration: none;
  color: var(--tinte);
  opacity: 0;
  transition: opacity 0.6s ease, background-color 0.2s ease, color 0.2s ease;
}


.hero__kizeichen:hover,
.hero__kizeichen:focus-visible {
  background: var(--tinte);
  color: var(--hell-auf-dunkel);
}

.hero.hat-loop .hero__kizeichen { opacity: 1; }

@media (max-width: 800px) {
  /* Einspaltig an den rechten Rand: damit steht die Kennzeichnung ueber der
     rechten Seite des Portraits und nicht ueber dem Textanfang - dieselbe
     Seite wie auf dem Desktop, wo sie im rechten Block sitzt. Muss hier
     stehen und nicht oben in der Hero-Query: die Basisregel darueber setzt
     justify-self: start und kommt in der Datei spaeter. (11.08.) */
  .hero__kizeichen { justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung laeuft der Loop nicht - dann zeigt der Hero Cimas
     unveraendertes Foto und das Zeichen waere eine falsche Angabe. */
  .hero__kizeichen { display: none; }
}

/* Bis zum 11.08. stand hier eine zweite Ausblendung fuer max-width: 800px,
   weil der Loop unterhalb dieser Breite gar nicht geladen wurde. Seit dem
   11.08. laeuft er auch auf dem Telefon (eigene, kleinere Datei), und damit
   muss die Kennzeichnung dort ebenfalls erscheinen. Die Sichtbarkeit haengt
   jetzt allein an .hat-loop - also an der Frage, ob wirklich ein bewegtes
   Portrait zu sehen ist, und nicht an der Fensterbreite. Faellt der Loop aus
   (Sparmodus, 2G, verweigertes Autoplay), bleibt das Zeichen von selbst weg. */

/* ---------- Kennzeichnung der Sequenz (AI Act Art. 50) ----------
 * Die Bausequenz ist KI-generiert und muss das seit dem 02.08.2026 sagen.
 * Sitzt im Bild, nicht darunter: die Buehne ist gepinnt, eine Zeile unterhalb
 * waere waehrend der ganzen Sequenz unsichtbar. Eigene Trageflaeche, weil der
 * Untergrund von hellem Himmel bis zur Abenddaemmerung alles durchlaeuft und
 * blanker Text sonst nur in der Haelfte der Frames lesbar ist.
 * Steht hier und nicht in scroll-sequence.css - die wird beim naechsten
 * Sequenz-Neubau aus scroll-sequence/src/ ueberschrieben.
 */
.cima-seq .cima-seq__hinweis {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 3;
  margin: 0;
  /* Seit dem 13.08. dieselbe Pille wie `.hero__kizeichen` im Kopf der Seite:
     voll deckendes Creme, dunkle Kontur, Tinte in 600, Pillenradius. Vorher
     war das hier eine eigene, deutlich zurueckhaltendere Form - halbdurch-
     sichtige Flaeche, kein Rahmen, 0,68 rem in 78 Prozent Deckkraft. Zwei
     Formen fuer dieselbe Pflichtangabe sind weder einheitlich noch besonders
     sichtbar; Martins Vorgabe war der Kopf als Massstab.
     Der `backdrop-filter` ist damit entfallen - bei voll deckendem Grund
     bringt er nichts und steht ohnehin auf der Liste der Bremsen aus dem
     Performance-Befund vom 06.08. */
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.75rem;
  border: 1.5px solid var(--tinte);
  border-radius: var(--r-pill);
  background: var(--creme);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--tinte);
  /* Bewusst kein Link, anders als im Kopf: diese Pille liegt ueber dem
     Startknopf des Films, der die ganze Flaeche einnimmt. Ein Klick daneben
     wuerde dann die Seite wechseln statt den Film zu starten. Der Weg zur
     Erklaerung steht im Kopf und in der Fusszeile. */
  pointer-events: none;
}

@media (max-width: 700px) {
  /* Auf dem Telefon nur naeher an die Ecke und etwas schmaler gepolstert -
     Schriftgroesse und Form bleiben wie im Kopf, sonst waere die Angabe hier
     wieder die kleinere von zweien. */
  .cima-seq .cima-seq__hinweis {
    right: 0.6rem;
    bottom: 0.6rem;
    padding: 0.32rem 0.62rem;
  }
}

/* ---------- Begruessungsvideo ueber dem letzten Frame (12.08.2026) ----------
 * Der Film liegt als eigene Ebene im gepinnten Rahmen der Sequenz, ueber dem
 * Canvas und in dessen voller Breite. Sichtbar wird er erst, wenn die Sequenz
 * durchgelaufen ist (`.zeigt-film` setzt scroll-sequence.js). Danach haelt die
 * Sequenz noch rund eine Bildschirmhoehe lang das letzte Frame, damit der Film
 * nicht in dem Moment vorbeirauscht, in dem er auftaucht.
 *
 * Steht hier und nicht in scroll-sequence.css - die wird beim naechsten
 * Sequenz-Neubau aus scroll-sequence/src/ ueberschrieben.
 *
 * Kein Autoplay. Der Film hat Ton, und Ton ohne Zutun ist auf einer Firmenseite
 * eine Zumutung - abgesehen davon verweigern die Browser ihn ohnehin.
 * `preload="none"` im Markup: bis zum Klick laedt kein einziges Byte.
 */

.cima-seq__film {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  /* `visibility` statt nur `opacity`: eine unsichtbare Ebene mit Knopf und
     Videosteuerung waere sonst mit der Tabulatortaste erreichbar. */
  transition: opacity 0.55s ease, visibility 0s linear 0.55s;
}
.cima-seq.zeigt-film .cima-seq__film {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.55s ease, visibility 0s linear 0s;
}

/* Derselbe Beschnitt wie im Canvas: fuellen, senkrecht auf FOCUS_Y (0.68)
   gewichtet. Sonst springt das Bild beim Einblenden. */
.cima-seq__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 68%;
  background: var(--creme);
}

/* Weiche Blende beim Start (12.08.2026).
 * Zwischen Klick und laufendem Bild liegt immer eine Anlaufzeit: Verbindung
 * aufbauen, den Anfang puffern, dekodieren. Ohne Deckung sieht man dabei den
 * Sprung vom Standbild ins erste Bewegtbild - und der faellt hier besonders
 * hart aus, weil das Standbild das letzte Frame der Sequenz ist und der Film
 * mit einer weiteren Einstellung derselben Szene beginnt.
 * Also: auf den Klick kommt Weiss (0,25 s), es steht, bis 0,6 s seit dem Klick
 * vergangen sind, und geht dann in 0,45 s wieder weg - nach gut einer Sekunde
 * ist es ganz raus. Die erste Fassung war mit 0,4/1,0/0,6 s deutlich laenger
 * und fuehlte sich wie eine Pause an (Martins Rueckmeldung 12.08.).
 * Der Film laeuft dahinter schon - was aus dem Weiss auftaucht, bewegt sich
 * also bereits.
 * Bei `prefers-reduced-motion` wird die Blende uebersprungen (site.js): ein
 * grosser weisser Aufblitzer ist genau das, was diese Einstellung vermeidet.
 */
.cima-seq__blende {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;  /* Abgang */
}
.cima-seq.blendet .cima-seq__blende {
  opacity: 1;
  transition: opacity 0.25s ease;  /* Auftritt */
}
/* Die KI-Kennzeichnung bleibt ueber der Blende stehen - sie ist auch waehrend
   der Sekunde Weiss die Angabe zum Film. Dunkler Text auf Creme auf Weiss
   bleibt lesbar. */
.cima-seq .cima-seq__hinweis--film { z-index: 5; }

/* Der Startknopf ist die ganze Flaeche. Auf dem Telefon ist ein Kreis allein
   ein knappes Ziel, und getippt wird ohnehin irgendwo aufs Bild. */
.cima-seq__start {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 2vh, 1.4rem);
  width: 100%;
  padding: clamp(1rem, 4vh, 3rem) 1.5rem;
  border: 0;
  background: linear-gradient(to bottom,
              rgba(28, 23, 18, 0.36), rgba(28, 23, 18, 0.14) 42%, rgba(28, 23, 18, 0.58));
  color: var(--hell-auf-dunkel);
  text-align: center;
  cursor: pointer;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.cima-seq__start-titel {
  max-width: 20ch;
  font: 600 clamp(1.15rem, 3.2vw, 2.5rem)/1.15 var(--display);
  letter-spacing: -0.015em;
  text-shadow: 0 2px 20px rgba(28, 23, 18, 0.6);
}
/* Auf dem dunklen Abendbild kommt das normale Cima-Rot nur auf Kontrast 2,5.
   Die helle Fassung traegt grosse Schrift (3,7), siehe Palette-Kommentar oben. */
.cima-seq__start-titel .wort-rot { color: var(--rot-hell); }

.cima-seq__start-kreis {
  display: grid;
  place-items: center;
  width: clamp(3.25rem, 6vw, 4.75rem);
  height: clamp(3.25rem, 6vw, 4.75rem);
  border-radius: var(--r-pill);
  background: var(--rot);
  color: #fff;
  box-shadow: 0 18px 40px -16px rgba(28, 23, 18, 0.85);
  transition: transform 0.25s var(--weich), background-color 0.2s ease;
}
/* Groesse ueber CSS statt ueber die width/height im Markup: so laesst sie sich
   pro Breite anpassen, ohne drei HTML-Dateien anzufassen. Das Dreieck stand
   mit 24 px in einem 76-px-Kreis zu verloren da (13.08.).
   Das Dreieck sitzt geometrisch mittig und wirkt dadurch zu weit links, daher
   der kleine Versatz nach rechts. */
.cima-seq__start-kreis svg {
  width: 2.1rem;
  height: 2.1rem;
  margin-left: 4px;
}

.cima-seq__start-text {
  display: grid;
  gap: 0.2rem;
  font: 500 clamp(0.9rem, 1.1vw, 1rem)/1.25 var(--sans);
  text-shadow: 0 1px 12px rgba(28, 23, 18, 0.7);
}
.cima-seq__start-dauer {
  max-width: 34ch;
  font-weight: 400;
  font-size: 0.8rem;
  color: rgba(244, 239, 231, 0.85);
}

.cima-seq__start:hover .cima-seq__start-kreis,
.cima-seq__start:focus-visible .cima-seq__start-kreis {
  transform: scale(1.07);
  background: var(--rot-tief);
}
.cima-seq__start:focus-visible { outline: 2px solid var(--hell-auf-dunkel); outline-offset: -6px; }

/* ----- Nach dem Film: der Hinweis, dass es weitergeht -----
 * Ist der Film durch, faellt die Seite auf das Standbild zurueck - und man
 * steht vor einem Bild, ohne zu wissen, ob die Seite noch etwas vorhat. Die
 * gepinnte Buehne verstaerkt das, weil sich beim Scrollen erst mal nichts
 * bewegt. Deshalb dieselbe Sprache wie an der Bruecke vor der Sequenz: ein
 * Punkt, der die Linie entlangfaellt. Hier hell, weil der Untergrund das
 * Abendbild ist. `pointer-events: none`, damit ein Tipp darauf weiter den
 * Startknopf trifft - wer den Film nochmal sehen will, soll das koennen.
 */
/* Der Hinweis ist seit dem 13.08. ein Geschwister des Rahmens, kein Kind mehr.
   Grund ist die Telefonansicht (weiter unten): dort soll er UNTER dem Video
   stehen, und aus dem Rahmen kommt er wegen `overflow: hidden` nicht heraus.
   Auf dem Desktop fuellt der Rahmen die Buehne, absolut positioniert sitzt er
   damit weiter genau dort, wo er vorher sass. */
.cima-seq__weiter {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3.5vh, 2.2rem);
  /* 5, nicht 3. Solange der Hinweis im Rahmen sass, lag er ueber dem Video,
     weil er ein Kind der Filmebene war. Als Geschwister des Rahmens zaehlt er
     wieder auf Buehnenebene mit - und dort steht die Filmebene auf 4. Der
     Rahmen selbst hat z-index auto und ist waehrend des Pins auch kein eigener
     Stapelkontext (`filter: none`), also verdeckt die Filmebene alles
     Niedrigere. Mit 3 war der Hinweis auf dem Desktop unsichtbar, obwohl
     `opacity` gemessen 1 war - auf dem Telefon fiel es nicht auf, dort steht
     er als statisches Element unter dem Video und z-index greift gar nicht. */
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
/* `zeigt-film` mit in der Bedingung: `film-fertig` allein wuerde den Hinweis
   auch dann zeigen, wenn jemand direkt nach dem Ende zurueck in die Sequenz
   scrollt und die Filmebene schon weg ist. */
.cima-seq.zeigt-film.film-fertig .cima-seq__weiter {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease 0.35s, visibility 0s linear 0s;
}
.cima-seq__weiter-text {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(244, 239, 231, 0.92);
  text-shadow: 0 1px 12px rgba(28, 23, 18, 0.75);
}
.cima-seq__weiter-linie {
  position: relative;
  width: 1px;
  height: 2.6rem;
  background: rgba(255, 255, 255, 0.32);
}
.cima-seq__weiter-linie::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--rot-hell);
  animation: cue-fall 2.6s cubic-bezier(0.45, 0, 0.4, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cima-seq__weiter-linie::after { animation: none; opacity: 0.9; }
}

/* Auf dem Telefon ist der Rahmen ein 16:9-Streifen von rund 220 px Hoehe.
   Mit den Desktop-Groessen stossen Titel, Knopf und Zeile aneinander und die
   Zeile laeuft in die KI-Kennzeichnung unten rechts. Deshalb hier durchgehend
   kleiner, und unten so viel Polster, dass die Kennzeichnung frei steht. */
@media (max-width: 700px) {
  .cima-seq__start { gap: 0.55rem; padding: 0.9rem 1.1rem 2.2rem; }
  .cima-seq__start-titel { font-size: 1rem; max-width: 26ch; }
  .cima-seq__start-kreis { width: 3rem; height: 3rem; }
  .cima-seq__start-kreis svg { width: 1.6rem; height: 1.6rem; margin-left: 3px; }
  .cima-seq__start-text { font-size: 0.85rem; }
  .cima-seq__start-dauer { font-size: 0.7rem; }

  /* Bis zum 13.08. wich hier nach dem Film die Ueberschrift, weil der
     Weiterscroll-Hinweis im Streifen Platz brauchte. Der steht jetzt unter dem
     Video - damit bleibt die Ueberschrift stehen und das Overlay unveraendert,
     egal ob der Film schon durch ist oder nicht. */
  /* Der Weiterscroll-Hinweis steht auf dem Telefon UNTER dem Video statt darin
     (Martins Hinweis 13.08.): auf dem 16:9-Streifen ging er zwischen Knopf,
     Sekundenangabe und Kennzeichnung unter. Hier ist er ein normales Element
     im Fluss der Buehne, hinter der Schrittliste - deshalb dunkel auf Creme
     statt hell auf Bild, genau wie die Schritttexte in dieser Breite.
     `visibility` statt `display`: der Platz bleibt reserviert, sonst rutscht
     die ganze Buehne in dem Moment hoch, in dem der Film endet. Unten ist
     ohnehin Creme frei, der reservierte Streifen kostet also nichts. */
  .cima-seq__weiter {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    margin: 0 auto;
    gap: 0.35rem;
  }
  .cima-seq__weiter-text {
    font-size: 0.75rem;
    color: rgba(36, 31, 27, 0.72);
    text-shadow: none;
  }
  .cima-seq__weiter-linie {
    height: 1.6rem;
    background: rgba(36, 31, 27, 0.22);
  }
  .cima-seq__weiter-linie::after { background: var(--rot); }
}

/* Laeuft der Film, geht der Knopf weg - ueber `visibility`, damit er nicht
   per Tabulator zurueckkommt. Die Verzoegerung schiebt das hinter die Blende. */
.cima-seq.laeuft-film .cima-seq__start {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* Zwei Kennzeichnungen an derselben Stelle: die der Illustration gehoert zum
   Canvas, die des Films zur Filmebene. Sichtbar ist immer genau eine. */
.cima-seq .cima-seq__hinweis { transition: opacity 0.4s ease; }
.cima-seq.zeigt-film .cima-seq__frame > .cima-seq__hinweis { opacity: 0; }

/* Die Kennzeichnung gehoert ueber den dunklen Verlauf der Schrittliste, nicht
   darunter. Dass sie darunter lag, war kein z-index-Fehler: `.cima-seq__frame`
   traegt waehrend der gepinnten Sequenz noch den ausgelaufenen Filter des
   weichen Einstiegs (`blur(0px)`), und ein Filter - auch ein wirkungsloser -
   macht aus dem Rahmen einen eigenen Stapelkontext. Damit zaehlt fuer die
   Buehne nur noch der Rahmen selbst (z-index auto), und alles darin liegt
   unter der Schrittliste (z-index 2). Gemessen: die Trageflaeche der
   Kennzeichnung kam auf dem Desktop als (72, 69, 66) heraus statt als
   (238, 233, 224), war also verdeckt. Auf dem Telefon gibt es den Filter
   nicht (matchMedia ab 800 px), dort stimmte es schon.
   `.ist-gepinnt` setzt scroll-sequence.js; waehrend des Pins schreibt die
   Blende ohnehin nicht mehr, sie ist vorher durch. */
.cima-seq.ist-gepinnt .cima-seq__frame { filter: none !important; }
/* Waehrend der Wiedergabe sitzt unten die Steuerleiste des Browsers - dann
   nach oben rechts, wo die Hausregel den Hinweis ohnehin haben will.
   Auf dem Desktop fuellt die Buehne den Bildschirm, und oben liegt die fixierte
   Kopfleiste darueber: gemessen ueberlappt der Hinweis dort ab 1024 px abwaerts
   den Kontakt-Knopf. Deshalb um die Hoehe der Leiste nach unten. Auf dem Telefon
   steht der Rahmen als Streifen in der Mitte, dort gibt es das Problem nicht. */
.cima-seq.laeuft-film .cima-seq__hinweis--film {
  top: calc(var(--nav-h) + 0.5rem);
  bottom: auto;
}
@media (max-width: 700px) {
  .cima-seq.laeuft-film .cima-seq__hinweis--film { top: 0.6rem; }
}

/* Die Schrittliste gehoert zur Sequenz, nicht zum Film.
   Den Weiter-Knopf (`.cima-seq__skip`, "Weiter zum Video") gibt es seit dem
   13.08. nicht mehr - Martins Vorgabe. Seine Regeln stehen weiter in
   `css/scroll-sequence.css`; die wird beim naechsten Sequenz-Neubau ohnehin aus
   `scroll-sequence/src/` ueberschrieben, deshalb bleibt sie unangetastet. Ohne
   Markup greift dort nichts. `scroll-sequence.js` sucht den Knopf weiterhin und
   arbeitet ohne ihn weiter (`if (skip)`). */
.cima-seq.zeigt-film .cima-seq__steps {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
/* `.has-step` steht mit im Selektor, weil `.cima-seq.has-step .cima-seq__steps
   { opacity: 1 }` aus scroll-sequence.css sonst gewinnt: gleiche Spezifitaet,
   und die Datei wird nach site.css geladen. */
.cima-seq.zeigt-film.has-step .cima-seq__steps { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .cima-seq__film,
  .cima-seq__start,
  .cima-seq__start-kreis { transition: none; }
}