/* =========================================================
   Städteseiten, Fassung „Drei Blicke“ (Marcels Wahl, 02.11.2026)
   Lädt nach rahmen.css, startseite.css und leistung.css. Präfix st-.
   Hero nach hero-neu.css Abschnitt I (drei hohe, versetzte Streifen auf Dunkel), hier mit Beschriftung je Streifen,
   dem dritten Streifen über der Naht und einem Blick, der beim Scrollen wandert.
   Ohne JS, ohne animation-timeline und bei reduzierter Bewegung stehen die Fotos still und vollständig.
   Mobile-first, Breakpoints 900 / 1280. Farben und Radien nur über Tokens.
   ========================================================= */


/* =========================================================
   1 · HERO
   Mobil: Text, dann drei Streifen nebeneinander (5:9) mit Beschriftung, dann die Buttons.
   Ab 900 px: Spalte 1 bis 6 Text, rechts die Streifen. Der Hero ist nur so hoch wie die Streifen es brauchen
   (8,5 rem + 2,6 mal Streifenbreite), der letzte Streifen ist am Heroende verankert und ragt 3 rem über die Naht.
   ========================================================= */
.st-hero { --ground: var(--teal-deep); overflow: visible; isolation: auto; }
.st-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 74% 34%, rgba(14, 138, 128, .34), transparent 72%);
}
.st-hero .fx-hero__inner { position: relative; z-index: 1; padding-bottom: calc(2rem + var(--radius-card)); row-gap: 2rem; }

.st-hero .fx-hero__title { font-size: clamp(1.7rem, 7.6vw, 2.3rem); margin: .75rem 0 1.25rem; }
.st-hero .fx-hero__sub { color: var(--cream-85); margin-bottom: 0; }
.st-hero .fx-crumb__item { color: var(--teal-accent-soft); }
.st-hero .fx-crumb__item + .fx-crumb__item::before { color: var(--cream-70); }
.st-hero .fx-crumb__a { color: var(--cream); text-decoration-color: var(--cream-70); }
.st-hero .fx-crumb__a:hover { text-decoration-color: var(--teal-accent-soft); }

/* Handy: Besichtigung und Anruf sind zwei gleich breite Buttons. Der Anruf-Button braucht auf Dunkel eine helle Kontur. */
.st-hero .fx-hero__actions { --i: 3; align-items: stretch; }
.st-hero .fx-btn { justify-content: space-between; }
.st-hero .fx-btn--line { color: var(--cream); border-color: var(--cream-70); }
.st-hero .fx-btn--line .fx-btn__ico { background: var(--line-dark); }
.st-hero .fx-btn--line:hover { background: var(--cream); border-color: var(--cream); color: var(--teal-deep); }
.st-hero .fx-btn--line:hover .fx-btn__ico { background: var(--teal-tint); }
/* Handy: Die Knöpfe stehen vor der Fotoreihe, damit der Anruf schon im ersten Bildschirm liegt. Am Computer bleibt die Reihenfolge des HTML. */
.st-hero .fx-hero__actions { order: 2; }
.st-hero .st-reihe { order: 3; }

.st-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: .75rem; align-items: start; }
.st-s { margin: 0; min-width: 0; }
.st-s .fx-frame__in { aspect-ratio: 5 / 9; }
.st-s .fx-frame--ohne::after { display: none; }
.st-s:nth-child(2) { margin-top: 1rem; }
.st-s:nth-child(3) { margin-top: 2rem; }
.st-s__cap { margin-top: .6rem; font-size: 1rem; font-weight: 500; line-height: 1.3; color: var(--cream-85); }

@media (min-width: 900px) {
  .st-hero { --w: min(13vw, 13.5rem); min-height: calc(8.5rem + 2.6 * var(--w)); }
  .st-hero .fx-hero__inner { position: static; z-index: auto; padding-bottom: calc(3rem + var(--radius-card)); }
  .st-hero .fx-hero__copy { position: relative; z-index: 1; grid-column: 1 / 7; }
  .st-hero .fx-hero__title { font-size: clamp(2.1rem, 3.3vw, 3.1rem); margin: 1rem 0 1.25rem; }
  .st-hero .fx-hero__actions { position: relative; z-index: 1; grid-column: 1 / 7; align-items: flex-start; order: 0; }
  .st-hero .st-reihe { order: 0; }

  .st-reihe {
    position: absolute; z-index: 51; bottom: -3rem;
    right: max(var(--gutter), calc((100vw - var(--max)) / 2));
    grid-template-columns: repeat(3, var(--w)); column-gap: 1rem;
  }
  .st-s .fx-frame__in { aspect-ratio: 5 / 13; }
  .st-s:nth-child(2) { margin-top: 2.5rem; }
  .st-s:nth-child(3) { margin-top: 5rem; }
  /* Die Streifen stehen teils auf Dunkel, teils auf Cream: Die Beschriftung liegt deshalb als Schild auf dem Foto */
  .st-reihe .st-s { position: relative; }
  .st-reihe .st-s__cap {
    position: absolute; top: .6rem; left: .6rem; right: .6rem; width: fit-content; margin: 0; padding: .3rem .6rem; font-size: .86rem;
    border-radius: 10px; background: rgba(10, 46, 42, .78); color: var(--cream);
  }
  /* Das Schild kommt erst, wenn der Streifen offen ist */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes st-cap { from { opacity: 0; } to { opacity: 1; } }
    .fx-anim .st-reihe .st-s__cap { animation: st-cap .6s var(--ease) 1s both; }
    .fx-anim .st-reihe .st-s:nth-child(2) .st-s__cap { animation-delay: 1.2s; }
    .fx-anim .st-reihe .st-s:nth-child(3) .st-s__cap { animation-delay: 1.4s; }
  }
  /* Der letzte Streifen steht über der Naht auf Cream: Die Kerbe wechselt den Grund */
  .st-s:nth-child(3) .fx-frame { --ground: var(--bg); }
  .fx-sub.is-stuck { z-index: 52; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .fx-sub__lab { display: none; }
}

/* Die Streifen öffnen sich nacheinander (data-clip, Verzögerung wie in hero-neu.css) */
@media (prefers-reduced-motion: no-preference) {
  .fx-anim .st-s:nth-child(2) .fx-frame[data-clip] .fx-frame__in { transition-delay: .2s; }
  .fx-anim .st-s:nth-child(3) .fx-frame[data-clip] .fx-frame__in { transition-delay: .4s; }
}


/* =========================================================
   BLICK AUS DEM FENSTER
   Der Rahmen steht, das Foto wandert darin um etwa 4 % der Rahmenhöhe (--a in Prozentpunkten je Seite oben und unten).
   Jeder Streifen hat einen eigenen Weg (3, 4, 5), dadurch wandern sie in eigenem Tempo.
   Das Foto ragt um --a über den Rahmen, sonst entstehen Ränder. Der Überstand steht nur, wo auch die Bewegung läuft.
   ========================================================= */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes st-blick {
      from { transform: translateY(calc(var(--a) / (100 + 2 * var(--a)) * -100%)); }
      to   { transform: translateY(calc(var(--a) / (100 + 2 * var(--a)) * 100%)); }
    }
    .st-s, .st-blick__bild { view-timeline: --st-blick block; }
    .st-s:nth-child(1) { --a: 3; }
    .st-s:nth-child(2) { --a: 4; }
    .st-s:nth-child(3) { --a: 5; }
    .st-blick__bild { --a: 4; }
    .st-s .fx-frame__in img, .st-blick__bild .fx-frame__in img {
      position: absolute; left: 0; width: 100%;
      top: calc(var(--a) * -1%); height: calc(100% + var(--a) * 2%);
      animation: st-blick linear both; animation-timeline: --st-blick;
    }
    /* Im Hero stehen die Streifen schon im Bild: Die Bewegung beginnt, wenn sie nach oben hinausgehen */
    .st-s .fx-frame__in img { animation-range: exit 0% exit 100%; }
    .st-blick__bild .fx-frame__in img { animation-range: cover 0% cover 100%; }
  }
}


/* =========================================================
   2 · DAS GEBIET
   Fahrzeit als Satz, daneben das Schild aus Vorschlag A auf seinem Pfosten, darunter die Stadtteile als ruhige Laufzeile.
   Das Schild ist aria-hidden, dieselbe Aussage steht im Satz. Der Strich läuft einmal, wenn das Schild ins Bild kommt.
   ========================================================= */
.st-gebiet__grid { row-gap: 2rem; align-items: start; }
.st-gebiet__text { max-width: 34rem; font-size: clamp(1.12rem, 1.5vw, 1.25rem); line-height: 1.6; }
/* Der Trennpunkt steht vor jedem Namen und ragt am Zeilenanfang aus dem Block, der ihn abschneidet: So hängt nie ein Punkt am Zeilenende */
.st-lauf { overflow: hidden; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.st-lauf__liste {
  display: flex; flex-wrap: wrap; margin-left: -1.65em;
  font-family: var(--font-heading); font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 500; line-height: 1.5; letter-spacing: -0.025em;
  color: var(--teal-deep);
}
.st-lauf__liste li { position: relative; padding-left: 1.65em; white-space: nowrap; }
.st-lauf__liste li::before { content: '·'; content: '·' / ''; position: absolute; left: .7em; font-weight: 700; color: var(--teal-primary); }
.st-lauf__rueck { margin-top: 1.25rem; }

.st-schild { width: min(100%, 22rem); margin-bottom: -2rem; }
.st-schild::after { content: ''; display: block; width: 10px; height: 3.25rem; margin-inline: auto; background: var(--teal-primary); }
.st-tafel { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2px 20px rgba(10, 46, 42, .1)); }
.st-tafel__flaeche { fill: var(--white); }
.st-tafel__rand { fill: none; stroke: var(--teal-deep); stroke-width: 3; }
.st-tafel text { font-family: var(--font-heading); fill: var(--teal-deep); }
.st-tafel__alt { font-size: 68px; font-weight: 500; letter-spacing: -0.03em; }
.st-tafel__neu { font-size: 82px; font-weight: 800; letter-spacing: -0.03em; }
.st-tafel__fahrt { font-size: 21px; font-weight: 600; letter-spacing: .02em; fill: var(--teal-primary); }
.st-strich { fill: none; stroke: var(--teal-primary); stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .fx-anim .st-schild .st-strich { stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease) .5s; }
  .fx-anim .st-schild.is-visible .st-strich { stroke-dashoffset: 0; }
}

@media (min-width: 900px) {
  .st-gebiet__kopf { grid-column: 1 / 7; }
  .st-gebiet__text { grid-column: 1 / 7; }
  .st-schild { grid-column: 8 / 13; grid-row: 1 / 3; justify-self: center; align-self: end; }
  .st-lauf { grid-column: 1 / -1; }
}


/* =========================================================
   3 · MARCEL MUSKALLA
   Kleines Porträt, zwei bis drei Sätze in Ich-Form.
   ========================================================= */
.st-mensch { row-gap: 2rem; align-items: start; }
.st-mensch__bild { max-width: 14rem; }
.st-mensch__bild .fx-frame__in { aspect-ratio: 4 / 5; }
.st-mensch__bild img { object-position: 50% 30%; }
.st-mensch__hinweis { margin-top: .75rem; font-size: 1rem; }
.st-mensch__satz { margin-top: 1.25rem; max-width: 34rem; font-size: 1.12rem; line-height: 1.65; }
.st-mensch__text .fx-h2 + .st-mensch__satz { margin-top: 1.5rem; }
.st-mensch__text .fx-mensch__fakten { max-width: 34rem; }
.st-mensch__text .fx-call { margin-top: 1.75rem; max-width: 34rem; }

@media (min-width: 900px) {
  .st-mensch__bild { grid-column: 1 / 4; max-width: none; }
  .st-mensch__text { grid-column: 5 / 12; }
}


/* =========================================================
   3 · LEISTUNGEN: DIE BILD-BÜHNE (Marcels Favorit, 02.11.2026, auch für künftige Seiten gedacht)
   Das Foto steht, die weißen Karten ziehen beim Scrollen vorbei, das neue Foto wischt von unten herein.
   Jeder Schritt ist so hoch wie die Bühne (Computer) oder der freie Bereich darunter (Handy): So steht eine Karte
   nach der anderen mittig im Blick, und die Bühne löst sich erst, wenn die letzte Karte dort steht.
   Der Bildlauf bleibt normal. Ohne JS steht das erste Foto, alle Karten sind sichtbar.
   ========================================================= */
.st-l-kopf { row-gap: 1rem; align-items: end; }
.st-l-kopf .fx-h2 { grid-column: 1 / -1; }
.st-l-gegen { grid-column: 1 / -1; max-width: 26rem; font-size: clamp(1.12rem, 1.5vw, 1.25rem); line-height: 1.5; }

.st-lb { --h: 34svh; --oben: 5.25rem; --frei: calc(100svh - var(--h) - var(--oben) - 5.5rem); margin-top: clamp(2rem, 4vw, 3.5rem); }
.st-lb__buehne { position: sticky; top: var(--oben); z-index: 2; height: var(--h); margin-bottom: var(--frei); }
.st-lb__buehne .fx-frame__in { height: 100%; }
.st-lb__foto { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transform: scale(1.06); transition: clip-path 1.1s var(--ease), transform 1.8s var(--ease); }
.st-lb__foto.is-aktiv { z-index: 1; clip-path: inset(0); transform: none; }
.st-lb__foto.war-aktiv { clip-path: inset(0); transform: none; transition: none; }
.st-lb__foto:nth-child(1) { object-position: 50% 62%; }
.st-lb__marken { position: absolute; left: .85rem; bottom: .85rem; z-index: 2; display: flex; gap: .45rem; padding: .5rem .6rem; border-radius: var(--radius-btn); background: rgba(10, 46, 42, .62); }
.st-lb__marken span { width: 8px; height: 8px; border-radius: 0 0 var(--radius-mark) 0; background: var(--cream-70); transition: background .6s var(--ease), transform .6s var(--ease); }
.st-lb__marken span.is-aktiv { background: var(--teal-accent); transform: scale(1.25); }

.st-lb__liste { position: relative; margin-top: calc(-1 * var(--frei)); }
.st-lb__schritt { display: flex; align-items: center; min-height: var(--frei); padding-block: 1rem; }
.st-lb__karte {
  display: block; width: 100%; padding: 1.5rem; color: inherit; background: var(--white); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft); transition: opacity .8s var(--ease), transform 1s var(--ease), box-shadow .6s var(--ease);
}
.fx-js .st-lb__karte:not(.is-aktiv):not(:hover):not(:focus-visible) { opacity: .4; transform: translateY(14px); }
.st-lb__karte.is-aktiv, .st-lb__karte:hover { box-shadow: var(--shadow-lift); }

.st-l-fall { font-size: .95rem; font-weight: 600; line-height: 1.35; color: var(--teal-primary); }
.st-l-titel { margin-top: .4rem; font-family: var(--font-heading); font-size: clamp(1.65rem, 2.6vw, 2.25rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.03em; color: var(--teal-deep); }
.st-l-satz { margin-top: .75rem; font-size: 1.05rem; line-height: 1.6; color: var(--text); }
.st-l-mehr { display: inline-flex; align-items: center; gap: .75rem; margin-top: 1.25rem; font-size: 1rem; font-weight: 600; color: var(--teal-deep); }
.st-l-mehr__ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; background: var(--teal-tint); color: var(--teal-primary); transition: transform .6s var(--ease), background .4s var(--ease), color .4s var(--ease); }
.st-lb__karte:hover .st-l-mehr__ico { transform: translateX(6px); background: var(--teal-primary); color: var(--white); }

@media (min-width: 900px) {
  /* Gleiche Spalten wie die Bühne: Der Gegentext beginnt genau an der linken Kante der Karten */
  .st-l-kopf { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 4.5rem); }
  .st-l-kopf .fx-h2, .st-l-gegen { grid-column: auto; }
  .st-l-gegen { padding-bottom: .35rem; }
  .st-lb {
    --h: min(calc(100svh - 11rem), 42rem);
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
  }
  .st-lb__buehne { top: max(9rem, calc(50svh + 3.5rem - var(--h) / 2)); margin-bottom: 0; }
  .st-lb__liste { margin-top: 0; }
  .st-lb__schritt { min-height: var(--h); padding-block: 0; }
  .st-lb__karte { padding: clamp(1.75rem, 2.8vw, 2.5rem); }
  .st-lb__marken { left: 1.1rem; bottom: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .st-lb__foto, .st-lb__foto.is-aktiv { clip-path: none; transform: none; transition: none; opacity: 0; }
  .st-lb__foto.is-aktiv { opacity: 1; }
  .fx-js .st-lb__karte:not(.is-aktiv):not(:hover):not(:focus-visible) { opacity: 1; transform: none; }
  .st-lb__karte, .st-lb__marken span { transition: none; }
}


/* =========================================================
   5 · PREIS
   Mobil: erst der Satz, dann die dunkle Karte. Ab 900 px nebeneinander.
   Die globalen Regeln für .fx-rechner (Blatt der Leistungsseiten) werden hier überstimmt.
   ========================================================= */
.st-preis { row-gap: 2rem; align-items: center; }
.st-preis__satz {
  margin-top: 1.5rem; max-width: 34rem;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 500; line-height: 1.4; letter-spacing: -0.02em; color: var(--teal-deep);
}
.st-preis .fx-rechner { margin-top: 0; }

@media (min-width: 900px) {
  .st-preis__text { grid-column: 1 / 7; }
  .st-preis .fx-rechner { grid-column: 8 / 13; grid-row: 1; grid-template-columns: minmax(0, 1fr); margin-top: 0; }
}


/* =========================================================
   6 · FRAGEN
   Einspaltig, ab 900 px in den Spalten 2 bis 9.
   ========================================================= */
.st-fragen { grid-column: 1 / -1; }
.st-fragen__liste { margin-top: clamp(2rem, 4vw, 3rem); }

@media (min-width: 900px) {
  .st-fragen { grid-column: 2 / 10; }
}


/* =========================================================
   7 · DER LETZTE BLICK
   Das dritte Foto kehrt zurück, begrenzt auf dunklem Grund. Mobil: Einladung, Foto, Drei Fragen.
   ========================================================= */
.st-blick { row-gap: 2.5rem; align-items: start; }
.st .fx-cta { overflow: clip; } /* schneidet wie hidden, lässt aber das mitlaufende Foto zu */
.st-blick__bild { --ground: var(--teal-deep); margin: 0; max-width: min(100%, 22rem); }
.st-blick__bild .fx-frame__in { aspect-ratio: 4 / 5; }
.st-blick__bild img { object-position: 50% 62%; }

@media (min-width: 900px) {
  /* Die Visitenkarte ist höher als das Foto: Das Foto bleibt beim Scrollen daneben stehen (04.11.2026) */
  .st-blick__bild { grid-column: 1 / 6; grid-row: 1 / 3; max-width: 26rem; position: sticky; top: 7.5rem; }
  .st-blick__links { grid-column: 7 / 13; grid-row: 1; align-self: end; }
  .st-blick .fx-vk { grid-column: 7 / 13; grid-row: 2; align-self: start; }
}

/* Bildnachweis: Pflicht bei CC-Fotos, klein unter den Kontaktdaten */
.st-nachweis { margin-top: 1.5rem; max-width: 46rem; font-size: .86rem; line-height: 1.7; color: var(--cream-70); }
.st-nachweis a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.st-nachweis a:hover { color: var(--cream); }