/* Stadtseite. Signatur-Moment: der Pin im Kopf oeffnet sich beim Scrollen zur ganzen Stadt. */

/* Kopf */
/* --pw als Laenge anmelden (15.10.2026): ohne Anmeldung ist der Startwert fuer GSAP der Text "min(46vh, 34vw)". Beim Zurueckscrollen
   setzt GSAP die Maske auf diesen Startwert zurueck, kann ihn nicht rechnen und schreibt 0px, der Pin war oben verschwunden.
   Angemeldet rechnet der Browser den Wert in Pixel um. Aendert nichts beim Laden (LCP, siehe stadt.js). */
@property --pw { syntax: '<length>'; inherits: false; initial-value: 0px; }
.held { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: var(--schwarz); }
.held-hinten { position: absolute; inset: 0; }
.held-hinten video { width: 100%; height: 100%; object-fit: cover; display: block; filter: blur(18px) saturate(1.15) brightness(.5); transform: scale(1.2); }
.held-hinten::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 70%, rgba(7,6,6,.55), rgba(7,6,6,.1) 70%); }
.held-buehne { position: absolute; inset: 0; }
.held-video { position: absolute; inset: 0; --pw: min(46vh, 34vw); -webkit-mask-position: 80% 56%; mask-position: 80% 56%; -webkit-mask-size: var(--pw) auto; mask-size: var(--pw) auto; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.held-video.offen { -webkit-mask-image: none; mask-image: none; }
/* Vorschaubild (.held-bild) liegt unter dem Video und ist sichtbar, bis das erste Videobild kommt (Video ohne poster) */
.held-video video, .held-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.held-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,6,6,.55), rgba(7,6,6,0) 55%), linear-gradient(0deg, rgba(7,6,6,.6), rgba(7,6,6,0) 40%); opacity: var(--dunkel, 0); }
.held-text { position: absolute; z-index: 3; left: var(--rand); bottom: clamp(48px, 9vh, 110px); width: min(760px, 56vw); }
.held-text h1 { margin: 0 0 26px; }
.h1-klein { display: block; font-size: clamp(30px, 3.4vw, 60px); margin-bottom: .22em; }
.h1-gross { display: block; font-size: min(clamp(96px, 13.5vw, 250px), calc(60vw / (var(--z, 8) * .68))); line-height: .8; }
.held-text .lead { margin: 0 0 34px; }
.held-satz { position: absolute; z-index: 3; left: var(--rand); right: var(--rand); top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; }
.held-satz .gross { font-size: clamp(60px, 9.4vw, 176px); text-shadow: 0 6px 60px rgba(0,0,0,.35); }
.held-ort { position: absolute; z-index: 3; right: var(--rand); bottom: 30px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.8); opacity: 0; }
.held-ort svg { width: 12px; height: 16px; fill: var(--sunset); }

/* Kennzahlen */
.zahlen { padding-block: clamp(70px, 10vh, 120px) clamp(50px, 8vh, 90px); border-bottom: 1px solid var(--linie); }
.zahlen-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-bottom: 56px; }
.zahl { display: grid; gap: 4px; border-left: 2px solid var(--sunset); padding-left: 22px; }
.zahl b { font-size: clamp(44px, 5vw, 86px); font-weight: 900; line-height: .9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.zahl span { font-weight: 700; font-size: 19px; }
.zahl small { color: var(--grau); font-size: 15px; }

/* Drei Wege */
.wege-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.wege-liste li { display: grid; align-content: start; gap: 16px; padding-top: 30px; border-top: 1px solid var(--linie); }
.wege-liste .nr { font-size: clamp(80px, 8vw, 140px); font-weight: 900; line-height: .8; color: transparent; -webkit-text-stroke: 2px var(--sunset); }
.wege-liste p { margin: 0; color: var(--nebel); }

/* Stadtkanal: Profilkarte wie auf Instagram */
.kanal-raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.kanal-text { container-type: inline-size; }
.kanal-text .h2 { margin-bottom: 30px; overflow-wrap: anywhere; }
/* Ueberschrift Stadtkanal: kein Wort breiter als die Spalte (0.7 je Zeichen, Gabarito misst hoechstens 0.622; Handles mit M/W/@/_ breiter) */
.kanal-h2 { font-size: min(clamp(44px, 6.2vw, 112px), calc(100cqi / (var(--lw, 10) * .7))); }
.kanal-h2-unter { display: block; margin-top: .25em; color: var(--sunset); font-size: min(clamp(26px, 3.1vw, 56px), calc(100cqi / (var(--lw2, 14) * .7))); line-height: 1; }
.kanal-text, .profil { min-width: 0; }
.profil-name b { overflow-wrap: anywhere; }
.kanal-text .fliess { margin-bottom: 26px; }
.profil { background: var(--karte); border: 1px solid var(--linie); border-radius: 30px 30px 30px 8px; padding: 26px; }
.profil-kopf { display: flex; align-items: center; gap: 24px; }
.profil-ava { width: 86px; height: 86px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--schwarz); box-shadow: 0 0 0 3px var(--karte), 0 0 0 5px var(--sunset); }
.profil-ava svg { width: 36px; height: 50px; fill: var(--sunset); }
.profil-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: 1; text-align: center; }
.profil-zahlen b { display: block; font-size: 22px; font-weight: 800; }
.profil-zahlen span { font-size: 15px; color: var(--nebel); }
.profil-name { margin: 18px 0; font-size: 17px; line-height: 1.45; }
.profil-name b { display: inline-flex; align-items: center; gap: 5px; font-size: 18px; }
.profil-name small { color: var(--grau); }
.profil-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 12px; overflow: hidden; }
.profil-raster a { aspect-ratio: 4 / 5; overflow: hidden; display: block; background: #111; }
.profil-raster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.profil-raster a:hover img { transform: scale(1.08); }

/* Beispiele: gepinnte seitliche Fahrt */
.faelle { position: relative; border-top: 1px solid var(--linie); overflow: hidden; }
.faelle-buehne { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--kopf-h) + 10px) 50px; }
.faelle-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(26px, 4vh, 50px); width: 100%; }
.faelle-intro { max-width: 26em; color: var(--nebel); margin: 0; font-size: 18px; }
.faelle-reihe { display: flex; gap: clamp(20px, 2.4vw, 40px); padding-inline: var(--rand); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 14px; }
.faelle-reihe .fall { scroll-snap-align: start; }
.faelle.gepinnt .faelle-reihe { width: max-content; overflow: visible; scroll-snap-type: none; will-change: transform; }
.fall { width: max(200px, min(clamp(250px, 22vw, 340px), calc((100svh - var(--kopf-h) - 440px) * 9 / 16 + 1px))); flex: none; }
.fall-medium { aspect-ratio: 9 / 16; width: 100%; }
.fall-text { padding-top: 16px; }
.fall-branche { margin: 4px 0 8px; color: var(--grau); font-size: 16px; }
.fall-zahl { margin: 0 0 8px; font-size: 17px; color: var(--nebel); }
.fall-zahl b { font-size: 30px; font-weight: 900; color: var(--weiss); font-variant-numeric: tabular-nums; }
.fall-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--sunset); text-decoration: none; }
.fall-link svg { width: 16px; height: 16px; transition: transform .3s; }
.fall-link:hover svg { transform: translateX(4px); }
.fall .h3 { font-size: clamp(20px, 1.6vw, 26px); }
.fall:nth-child(even) { margin-top: 3vh; }

/* Gesichter */
.gesichter-reihe { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 30px); }
.gesichter figure { margin: 0; position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 22px 22px 22px 6px; background: #111; }
.gesichter figure:nth-child(even) { transform: translateY(6vh); }
.gesichter img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gesichter figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,0) 45%); }
.gesichter figcaption { position: absolute; z-index: 1; left: 18px; bottom: 16px; display: grid; }
.gesichter figcaption b { font-size: clamp(24px, 2.4vw, 38px); font-weight: 900; text-transform: uppercase; line-height: 1; }
.gesichter figcaption span { font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sunset); }

/* Marken */
.marken .kopfzeile .bewertet { padding: 18px 24px; border: 1px solid var(--linie); border-radius: 22px; background: var(--karte); }

/* Branchen */
.branchen-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.branchen-liste li { border-bottom: 1px solid var(--linie); }
.branchen-liste a { display: grid; grid-template-columns: minmax(220px, 1fr) 1.6fr 40px; gap: 30px; align-items: center; padding: 28px 0; text-decoration: none; transition: padding .35s ease, color .3s; }
.br-titel { font-size: clamp(24px, 2.6vw, 42px); font-weight: 900; text-transform: uppercase; line-height: 1; }
.br-text { color: var(--nebel); }
.br-pfeil { width: 30px; height: 30px; color: var(--sunset); transition: transform .35s ease; }
.branchen-liste a:hover { padding-left: 18px; }
.branchen-liste a:hover .br-titel { color: var(--sunset); }
.branchen-liste a:hover .br-pfeil { transform: translateX(8px); }

/* Ablauf */
.ablauf-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 40px); counter-reset: ab; position: relative; }
.ablauf-liste::before { content: ""; position: absolute; left: 0; right: 0; top: 33px; height: 2px; background: linear-gradient(90deg, var(--sunset), var(--linie)); }
.ablauf-liste li { position: relative; display: grid; gap: 12px; align-content: start; }
.ab-nr { width: 66px; height: 66px; display: grid; place-items: center; font-size: 26px; font-weight: 900; color: var(--sunset-tief); position: relative; z-index: 1; margin-bottom: 10px; }
.ab-nr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sunset); border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); }
.ablauf-liste p { margin: 0; color: var(--nebel); }

/* Stadt fuer Unternehmen */
.stadt-raster { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 110px); }
.h3-gross { font-size: clamp(36px, 4vw, 66px); margin-bottom: 26px; }
.weitere ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.weitere li { border-bottom: 1px solid var(--linie); }
.weitere a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; text-decoration: none; font-weight: 800; font-size: 20px; text-transform: uppercase; }
.weitere a svg { width: 20px; height: 20px; color: var(--sunset); transition: transform .3s; }
.weitere a:hover svg { transform: translateX(6px); }

/* Handy */
@media (max-width: 860px) {
  .held { min-height: 560px; }
  .held-video { --pw: min(54vw, 30vh); -webkit-mask-position: 50% 11%; mask-position: 50% 11%; }
  .held-text { width: auto; right: var(--rand); bottom: 30px; }
  .held-video video, .held-bild { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
  .held-video:not(.offen) video, .held-video:not(.offen) .held-bild { transform: translateY(-34%) scale(1.75); }
  .h1-klein { font-size: clamp(22px, 6.4vw, 34px); }
  .h1-gross { font-size: min(22vw, calc((100vw - 44px) / (var(--z, 8) * .74))); }
  .held-text h1 { margin-bottom: 16px; }
  .held-text .lead { font-size: 16px; margin-bottom: 22px; }
  .held-satz .gross { font-size: clamp(44px, 13vw, 70px); }
  .held-satz { top: auto; bottom: 70px; transform: none; }
  .zahlen-raster { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
  .zahl { padding-left: 14px; min-width: 0; }
  .zahl b { font-size: clamp(26px, 7.6vw, 40px); }
  .zahl span { font-size: 16px; }
  .zahl small { font-size: 13px; overflow-wrap: anywhere; }
  .wege-liste, .kanal-raster, .stadt-raster { grid-template-columns: 1fr; }
  .fall { width: 66vw; min-width: 0; }
  .faelle-reihe { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none; }
  .faelle-reihe::-webkit-scrollbar { display: none; }
  .fall { scroll-snap-align: center; }
  .fall:nth-child(even) { margin-top: 0; }
  .gesichter-reihe { grid-template-columns: 1fr 1fr; }
  .gesichter figure:nth-child(even) { transform: translateY(3vh); }
  .branchen-liste a { grid-template-columns: 1fr 30px; gap: 8px 14px; }
  .br-text { grid-column: 1; grid-row: 2; font-size: 16px; }
  .br-pfeil { grid-row: 1 / span 2; grid-column: 2; }
  .ablauf-liste { grid-template-columns: 1fr; gap: 26px; }
  .ablauf-liste::before { left: 32px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--sunset), var(--linie)); }
  .ablauf-liste li { grid-template-columns: 66px 1fr; column-gap: 18px; }
  .ablauf-liste li .ab-nr { grid-row: 1 / span 2; margin: 0; }
  .profil { padding: 18px; }
  .profil-ava { width: 64px; height: 64px; }
  .profil-ava svg { width: 26px; height: 36px; }
  .profil-zahlen b { font-size: 17px; }
}


/* Hochformat-Quelle: auf dem Rechner sitzt das Reel rechts in voller Hoehe (wie das iPhone der Startseite) */
@media (min-width: 861px) {
  .held--hoch .held-video { left: auto; right: max(var(--rand), 5vw); top: 96px; bottom: 26px; width: calc((100svh - 122px) * 9 / 16); border-radius: 28px; overflow: hidden; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; }
  .held--hoch .held-video::after { background: linear-gradient(0deg, rgba(7,6,6,.45), rgba(7,6,6,0) 35%); }
  .held--hoch .held-text { width: min(760px, calc(100vw - (100svh - 122px) * 9 / 16 - 12vw)); }
  .held--hoch .held-satz { right: calc((100svh - 122px) * 9 / 16 + 9vw); }
  .held--hoch .held-satz .gross { font-size: clamp(54px, 6.6vw, 130px); }
  .held--hoch .h1-gross { font-size: min(clamp(70px, 9.6vw, 190px), calc(44vw / (var(--z, 8) * .68))); }
}

/* Scroll-Effekte */
.riesen-raum { position: relative; overflow: hidden; }
.riesen { position: absolute; z-index: -1; left: 0; top: 38%; white-space: nowrap; font-weight: 900; text-transform: uppercase; font-size: clamp(150px, 22vw, 400px); line-height: .8; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 2px rgba(255,87,87,.32); pointer-events: none; will-change: transform; }
.wort { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.wort > span { display: inline-block; will-change: transform; }
.zahlen-raster .zahl b { display: inline-block; transform-origin: left bottom; }
.profil { transform-origin: 50% 100%; }
.faelle-reihe .fall { will-change: transform; transform-origin: 50% 40%; }
.gesichter figure img { will-change: transform; transform: scale(1.18); }
.ablauf-liste::before { transform-origin: left center; transform: scaleX(var(--linie, 1)); }
.ablauf-liste li.an .ab-nr::before { box-shadow: 0 0 0 8px rgba(255,87,87,.18), 0 0 40px rgba(255,87,87,.55); }
.ab-nr::before { transition: box-shadow .4s ease; }
.schluss-band .zeichen path { transform-box: fill-box; transform-origin: 50% 50%; }
@media (max-width: 860px) {
  .riesen { font-size: 38vw; -webkit-text-stroke-width: 1.5px; }
  .ablauf-liste::before { transform-origin: center top; transform: scaleY(var(--linie, 1)); }
}

@media (prefers-reduced-motion: reduce) {
  .held-video { -webkit-mask-image: none; mask-image: none; --dunkel: 1; }
  .held-video:not(.offen) video, .held-video:not(.offen) .held-bild { transform: none; }
}

/* Moderatorin mit echtem Reel ueber dem Foto */
.gesichter figure.mit-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.gesichter figure.mit-reel::after { z-index: 1; } .gesichter figure.mit-reel figcaption { z-index: 2; }

/* Link aufs ueberregionale Mediakit unter den Kopf-Knoepfen */
.mk-alle { margin: 18px 0 0; font-size: 15px; }
.mk-alle a { color: var(--nebel); text-decoration: underline; text-decoration-color: var(--sunset); text-underline-offset: 4px; }
.mk-alle a:hover { color: var(--weiss); }
.profil-ava.mit-logo { background: none; overflow: hidden; }
.profil-ava.mit-logo img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }