/* Startseite: Scroll-Reise. Aus dem Prototyp entwurf-neubau uebernommen, Grundregeln kommen aus system.css. */

  /* Knoepfe im Inhalt der Startseite (aus dem Prototyp). Nur unter main: ohne die Einschraenkung griffen die Regeln auch auf
     den Termin-Knopf im Seitenkopf (Pin 54 statt 42 px), der Kopf war auf der Startseite 12 px hoeher und sprang beim
     Wechsel auf die Startseite (Vince 14.10.2026). Der Kopf-Knopf kommt jetzt wie ueberall aus system.css. */

  main .tat { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; font-weight: 800; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; color: var(--weiss); }
  main .tat .pinknopf { position: relative; width: 54px; height: 54px; flex: none; }
  main .tat .pinknopf::before { content: ""; position: absolute; inset: 0; background: var(--sunset); border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
  main .tat .pinknopf svg { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; color: #1a0505; transition: transform .35s ease; }
  main .tat .text { position: relative; padding: 6px 0; }
  main .tat .text::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--sunset); transform: scaleX(.25); transform-origin: left; transition: transform .35s ease; }
  main .tat:hover .pinknopf::before { transform: rotate(-45deg) translate(3px, -3px); }
  main .tat:hover .pinknopf svg { transform: translateX(3px); }
  main .tat:hover .text::after { transform: scaleX(1); }
  .vertrauen { display: flex; align-items: center; gap: 14px; margin-top: 30px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--nebel); }
  .vertrauen img { width: 58px; height: 58px; display: block; }
  .gesichter { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--schwarz); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding-top: 104px; }
  .gesichter .kopfzeile { padding: 0 var(--rand); padding-left: calc(var(--rand) + clamp(0px, 3vw, 40px)); margin-bottom: 4vh; display: flex; align-items: end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
  .gesichter .kopfzeile h2 { font-size: clamp(48px, 6.6vw, 120px); }
  .gesichter .kopfzeile p { color: var(--nebel); max-width: 26em; margin: 0; }
  @media (max-height: 820px) and (min-width: 861px) { .gesichter .kopfzeile h2 { font-size: clamp(40px, 5vw, 84px); } .gesichter .kopfzeile p { font-size: 15px; } }
  .gesichter .reihe { display: flex; gap: clamp(16px, 2vw, 32px); padding-left: calc(var(--rand) + clamp(0px, 3vw, 40px)); will-change: transform; }
  .gesichter figure { margin: 0; flex: none; width: min(clamp(220px, 21vw, 340px), calc((100svh - 104px - 6vh - 4vh - clamp(130px, 16vw, 260px)) * 9 / 16)); aspect-ratio: 9 / 16; position: relative; overflow: hidden; background: #111; }
  .gesichter figure:nth-child(even) { margin-top: 6vh; }
  .gesichter figure 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) 40%); }
  .gesichter figcaption { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; }
  .gesichter figcaption b { display: block; font-size: clamp(30px, 2.8vw, 46px); font-weight: 900; text-transform: uppercase; line-height: .9; }
  .gesichter figcaption span { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sunset-60); }
  .siegel-zeile { display: flex; align-items: center; gap: 22px; margin-top: 50px; color: var(--nebel); max-width: 44em; }
  .siegel-zeile img { width: 96px; height: 96px; flex: none; }
  /* Fortschritt: die Kapsel aus dem Logo als Spur */
  .spur { transition: opacity .4s ease; position: fixed; z-index: 55; right: calc(var(--rand) - 6px); flex-direction: row-reverse; top: 50%; transform: translateY(-50%); display: flex; gap: 14px; align-items: center; pointer-events: none; }
  .spur .rohr { width: 6px; height: 34vh; border-radius: 6px; background: rgba(255,255,255,.14); position: relative; overflow: hidden; }
  .spur .rohr b { position: absolute; left: 0; right: 0; top: 0; height: 0%; background: var(--sunset); border-radius: 6px; }
  .spur ol { text-align: right; list-style: none; margin: 0; padding: 0; height: 34vh; display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.35); }
  .spur ol li.an { color: var(--weiss); }
  .spur ol li i { font-style: normal; margin-right: 8px; color: var(--sunset); opacity: .5; font-variant-numeric: tabular-nums; }
  .spur ol li.an i { opacity: 1; }

  /* Reise */
  .reise { position: relative; }
  .mit-reise .reise { height: 1400vh; }
  .buehne { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--schwarz); }
  .mit-reise .buehne { position: sticky; top: 0; }
  .satz, .zaehler, .kunden-text, .kunden-zitat, .schluss, .ort, .handy { pointer-events: none; }
  .schluss { visibility: hidden; }
  .schluss.aktiv { pointer-events: auto; visibility: visible; }
  .auftakt.aus { pointer-events: none; visibility: hidden; }
  .schicht { position: absolute; inset: 0; }
  .schicht video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pin-maske { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%2262.4%20-0.2%2044.8%2061.3%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M65.73%2C33.61l15.67%2C25.43c1.42%2C2.31%2C4.78%2C2.31%2C6.21%2C0l15.67-25.43c1.9-3.08%2C2.94-6.44%2C3.21-9.81.03-.35.05-.71.06-1.06%2C0-.18%2C0-.35%2C0-.53%2C0-.53-.01-1.06-.05-1.59-.05-.71-.13-1.41-.24-2.1-.44-2.71-1.39-5.34-2.8-7.72l-.19-.3c-.78-1.26-1.66-2.42-2.64-3.47-.01-.02-.03-.03-.04-.05-.1-.11-.21-.22-.32-.33-.07-.07-.13-.14-.2-.2-.1-.1-.2-.2-.3-.29-1.11-1.06-2.35-2.03-3.71-2.87-.2-.12-.41-.24-.61-.36-.06-.03-.12-.07-.18-.1-.17-.1-.34-.19-.52-.28-.04-.02-.07-.04-.11-.06-.19-.1-.38-.19-.57-.28-.03-.02-.06-.03-.09-.05-.03-.01-.05-.02-.08-.04-.11-.05-.23-.11-.34-.16-.1-.04-.2-.09-.3-.14-.02%2C0-.04-.02-.06-.03-.02%2C0-.03-.01-.05-.02-2.53-1.08-5.24-1.68-7.98-1.76-.02%2C0-.03%2C0-.05%2C0-.19%2C0-.39%2C0-.58%2C0-.05%2C0-.1%2C0-.15%2C0-.15%2C0-.31%2C0-.46%2C0-.07%2C0-.13%2C0-.2%2C0-.16%2C0-.33.01-.49.02-.05%2C0-.09%2C0-.14%2C0-.21.01-.42.03-.62.05-.05%2C0-.1.01-.15.02-.16.02-.32.03-.48.05-.07%2C0-.13.02-.2.03-.15.02-.31.04-.46.07-.05%2C0-.11.02-.16.02-.21.03-.41.07-.62.11-.03%2C0-.06.01-.09.02-.18.03-.35.07-.53.11-.06.01-.12.03-.18.04-.16.04-.31.07-.47.11-.05.01-.1.03-.16.04-.41.1-.81.22-1.21.35-.05.01-.09.03-.14.05-.16.05-.31.1-.47.16-.06.02-.11.04-.17.06-.17.06-.34.13-.52.19-.02%2C0-.05.02-.07.03-.2.08-.39.16-.59.24-.04.02-.09.04-.13.06-.08.03-.16.07-.24.11-.13.06-.27.12-.4.18-.05.02-.1.05-.16.08-.19.09-.39.19-.58.29%2C0%2C0-.02.01-.03.02-.46.24-.91.5-1.35.77-.97.6-1.88%2C1.26-2.72%2C1.97%2C0%2C0%2C0%2C0%2C0%2C0-.14.12-.28.24-.41.36%2C0%2C0%2C0%2C0%2C0%2C0-.12.11-.24.22-.37.33-.02.02-.04.04-.07.06-.05.05-.1.1-.15.14-.09.08-.18.17-.26.26-.01.01-.02.02-.03.03-.03.03-.07.07-.1.1-.14.14-.27.28-.4.42-.03.04-.07.07-.1.11-.11.12-.23.25-.34.37-.05.05-.09.1-.14.16-.11.12-.21.25-.32.37-.04.04-.07.09-.11.13-.14.17-.27.34-.41.52-.02.03-.04.06-.07.09-.11.15-.22.3-.33.45-.04.06-.08.11-.12.17-.09.13-.18.26-.27.4-.04.06-.07.11-.11.17-.12.19-.24.37-.36.57l-.19.3c-4.04%2C6.82-4.26%2C15.6.19%2C22.82Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%2262.4%20-0.2%2044.8%2061.3%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M65.73%2C33.61l15.67%2C25.43c1.42%2C2.31%2C4.78%2C2.31%2C6.21%2C0l15.67-25.43c1.9-3.08%2C2.94-6.44%2C3.21-9.81.03-.35.05-.71.06-1.06%2C0-.18%2C0-.35%2C0-.53%2C0-.53-.01-1.06-.05-1.59-.05-.71-.13-1.41-.24-2.1-.44-2.71-1.39-5.34-2.8-7.72l-.19-.3c-.78-1.26-1.66-2.42-2.64-3.47-.01-.02-.03-.03-.04-.05-.1-.11-.21-.22-.32-.33-.07-.07-.13-.14-.2-.2-.1-.1-.2-.2-.3-.29-1.11-1.06-2.35-2.03-3.71-2.87-.2-.12-.41-.24-.61-.36-.06-.03-.12-.07-.18-.1-.17-.1-.34-.19-.52-.28-.04-.02-.07-.04-.11-.06-.19-.1-.38-.19-.57-.28-.03-.02-.06-.03-.09-.05-.03-.01-.05-.02-.08-.04-.11-.05-.23-.11-.34-.16-.1-.04-.2-.09-.3-.14-.02%2C0-.04-.02-.06-.03-.02%2C0-.03-.01-.05-.02-2.53-1.08-5.24-1.68-7.98-1.76-.02%2C0-.03%2C0-.05%2C0-.19%2C0-.39%2C0-.58%2C0-.05%2C0-.1%2C0-.15%2C0-.15%2C0-.31%2C0-.46%2C0-.07%2C0-.13%2C0-.2%2C0-.16%2C0-.33.01-.49.02-.05%2C0-.09%2C0-.14%2C0-.21.01-.42.03-.62.05-.05%2C0-.1.01-.15.02-.16.02-.32.03-.48.05-.07%2C0-.13.02-.2.03-.15.02-.31.04-.46.07-.05%2C0-.11.02-.16.02-.21.03-.41.07-.62.11-.03%2C0-.06.01-.09.02-.18.03-.35.07-.53.11-.06.01-.12.03-.18.04-.16.04-.31.07-.47.11-.05.01-.1.03-.16.04-.41.1-.81.22-1.21.35-.05.01-.09.03-.14.05-.16.05-.31.1-.47.16-.06.02-.11.04-.17.06-.17.06-.34.13-.52.19-.02%2C0-.05.02-.07.03-.2.08-.39.16-.59.24-.04.02-.09.04-.13.06-.08.03-.16.07-.24.11-.13.06-.27.12-.4.18-.05.02-.1.05-.16.08-.19.09-.39.19-.58.29%2C0%2C0-.02.01-.03.02-.46.24-.91.5-1.35.77-.97.6-1.88%2C1.26-2.72%2C1.97%2C0%2C0%2C0%2C0%2C0%2C0-.14.12-.28.24-.41.36%2C0%2C0%2C0%2C0%2C0%2C0-.12.11-.24.22-.37.33-.02.02-.04.04-.07.06-.05.05-.1.1-.15.14-.09.08-.18.17-.26.26-.01.01-.02.02-.03.03-.03.03-.07.07-.1.1-.14.14-.27.28-.4.42-.03.04-.07.07-.1.11-.11.12-.23.25-.34.37-.05.05-.09.1-.14.16-.11.12-.21.25-.32.37-.04.04-.07.09-.11.13-.14.17-.27.34-.41.52-.02.03-.04.06-.07.09-.11.15-.22.3-.33.45-.04.06-.08.11-.12.17-.09.13-.18.26-.27.4-.04.06-.07.11-.11.17-.12.19-.24.37-.36.57l-.19.3c-4.04%2C6.82-4.26%2C15.6.19%2C22.82Z%22/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 80% 50%; mask-position: 80% 50%; -webkit-mask-size: var(--pw, 30vh) auto; mask-size: var(--pw, 30vh) auto; }
  .pin-maske.offen { -webkit-mask-image: none; mask-image: none; }
  .kapsel-maske { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-1%20-1%2076%2097%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M53.3%2C94.79c-7.4%2C0-14.63-3.72-18.79-10.49L3.28%2C33.61C-3.11%2C23.25.12%2C9.67%2C10.49%2C3.28%2C20.85-3.11%2C34.43.12%2C40.82%2C10.49l31.23%2C50.69c6.39%2C10.37%2C3.16%2C23.95-7.21%2C30.33-3.6%2C2.22-7.6%2C3.28-11.54%2C3.28Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-1%20-1%2076%2097%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M53.3%2C94.79c-7.4%2C0-14.63-3.72-18.79-10.49L3.28%2C33.61C-3.11%2C23.25.12%2C9.67%2C10.49%2C3.28%2C20.85-3.11%2C34.43.12%2C40.82%2C10.49l31.23%2C50.69c6.39%2C10.37%2C3.16%2C23.95-7.21%2C30.33-3.6%2C2.22-7.6%2C3.28-11.54%2C3.28Z%22/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-size: var(--kw, 0px) auto; mask-size: var(--kw, 0px) auto; }
  .kapsel-maske.offen { -webkit-mask-image: none; mask-image: none; }
  .tonung { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,6,6,.72), rgba(7,6,6,0) 45%); pointer-events: none; }

  .auftakt { position: absolute; left: var(--rand); right: var(--rand); bottom: clamp(40px, 9vh, 110px); z-index: 5; padding-left: clamp(0px, 3vw, 40px); }
  .auftakt .gross { font-size: clamp(46px, min(8.8vw, 12.5vh), 160px); }
  @media (max-height: 780px) and (min-width: 861px) { .auftakt p { margin: 16px 0 18px; } .auftakt { bottom: 26px; } .vertrauen { margin-top: 16px; } }
  .auftakt .gross span { display: block; }
  .auftakt p { max-width: 30em; font-size: clamp(18px, 1.4vw, 21px); color: var(--nebel); margin: 28px 0 30px; }
  .ort { position: absolute; z-index: 6; right: var(--rand); bottom: 32px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.8); display: flex; gap: 10px; align-items: center; opacity: 0; }
  .ort svg { width: 10px; height: 14px; color: var(--sunset); }

  .satz { position: absolute; z-index: 6; left: var(--rand); right: var(--rand); top: 50%; transform: translateY(-50%); opacity: 0; padding-left: clamp(0px, 3vw, 40px); pointer-events: none; }
  .satz .gross { font-size: clamp(54px, 9vw, 168px); text-shadow: 0 6px 60px rgba(0,0,0,.35); }
  .satz p { font-size: clamp(18px, 1.5vw, 22px); color: var(--weiss); max-width: 26em; margin: 26px 0 0; text-shadow: 0 2px 20px rgba(0,0,0,.6); }

  .hinten { z-index: 0; }
  .hinten video, .hinten canvas { filter: blur(38px) saturate(1.15) brightness(.42); transform: scale(1.25); }
  .handy { position: absolute; z-index: 4; border-radius: 46px; overflow: hidden; background: #000; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%2262.4%20-0.2%2044.8%2061.3%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M65.73%2C33.61l15.67%2C25.43c1.42%2C2.31%2C4.78%2C2.31%2C6.21%2C0l15.67-25.43c1.9-3.08%2C2.94-6.44%2C3.21-9.81.03-.35.05-.71.06-1.06%2C0-.18%2C0-.35%2C0-.53%2C0-.53-.01-1.06-.05-1.59-.05-.71-.13-1.41-.24-2.1-.44-2.71-1.39-5.34-2.8-7.72l-.19-.3c-.78-1.26-1.66-2.42-2.64-3.47-.01-.02-.03-.03-.04-.05-.1-.11-.21-.22-.32-.33-.07-.07-.13-.14-.2-.2-.1-.1-.2-.2-.3-.29-1.11-1.06-2.35-2.03-3.71-2.87-.2-.12-.41-.24-.61-.36-.06-.03-.12-.07-.18-.1-.17-.1-.34-.19-.52-.28-.04-.02-.07-.04-.11-.06-.19-.1-.38-.19-.57-.28-.03-.02-.06-.03-.09-.05-.03-.01-.05-.02-.08-.04-.11-.05-.23-.11-.34-.16-.1-.04-.2-.09-.3-.14-.02%2C0-.04-.02-.06-.03-.02%2C0-.03-.01-.05-.02-2.53-1.08-5.24-1.68-7.98-1.76-.02%2C0-.03%2C0-.05%2C0-.19%2C0-.39%2C0-.58%2C0-.05%2C0-.1%2C0-.15%2C0-.15%2C0-.31%2C0-.46%2C0-.07%2C0-.13%2C0-.2%2C0-.16%2C0-.33.01-.49.02-.05%2C0-.09%2C0-.14%2C0-.21.01-.42.03-.62.05-.05%2C0-.1.01-.15.02-.16.02-.32.03-.48.05-.07%2C0-.13.02-.2.03-.15.02-.31.04-.46.07-.05%2C0-.11.02-.16.02-.21.03-.41.07-.62.11-.03%2C0-.06.01-.09.02-.18.03-.35.07-.53.11-.06.01-.12.03-.18.04-.16.04-.31.07-.47.11-.05.01-.1.03-.16.04-.41.1-.81.22-1.21.35-.05.01-.09.03-.14.05-.16.05-.31.1-.47.16-.06.02-.11.04-.17.06-.17.06-.34.13-.52.19-.02%2C0-.05.02-.07.03-.2.08-.39.16-.59.24-.04.02-.09.04-.13.06-.08.03-.16.07-.24.11-.13.06-.27.12-.4.18-.05.02-.1.05-.16.08-.19.09-.39.19-.58.29%2C0%2C0-.02.01-.03.02-.46.24-.91.5-1.35.77-.97.6-1.88%2C1.26-2.72%2C1.97%2C0%2C0%2C0%2C0%2C0%2C0-.14.12-.28.24-.41.36%2C0%2C0%2C0%2C0%2C0%2C0-.12.11-.24.22-.37.33-.02.02-.04.04-.07.06-.05.05-.1.1-.15.14-.09.08-.18.17-.26.26-.01.01-.02.02-.03.03-.03.03-.07.07-.1.1-.14.14-.27.28-.4.42-.03.04-.07.07-.1.11-.11.12-.23.25-.34.37-.05.05-.09.1-.14.16-.11.12-.21.25-.32.37-.04.04-.07.09-.11.13-.14.17-.27.34-.41.52-.02.03-.04.06-.07.09-.11.15-.22.3-.33.45-.04.06-.08.11-.12.17-.09.13-.18.26-.27.4-.04.06-.07.11-.11.17-.12.19-.24.37-.36.57l-.19.3c-4.04%2C6.82-4.26%2C15.6.19%2C22.82Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%2262.4%20-0.2%2044.8%2061.3%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M65.73%2C33.61l15.67%2C25.43c1.42%2C2.31%2C4.78%2C2.31%2C6.21%2C0l15.67-25.43c1.9-3.08%2C2.94-6.44%2C3.21-9.81.03-.35.05-.71.06-1.06%2C0-.18%2C0-.35%2C0-.53%2C0-.53-.01-1.06-.05-1.59-.05-.71-.13-1.41-.24-2.1-.44-2.71-1.39-5.34-2.8-7.72l-.19-.3c-.78-1.26-1.66-2.42-2.64-3.47-.01-.02-.03-.03-.04-.05-.1-.11-.21-.22-.32-.33-.07-.07-.13-.14-.2-.2-.1-.1-.2-.2-.3-.29-1.11-1.06-2.35-2.03-3.71-2.87-.2-.12-.41-.24-.61-.36-.06-.03-.12-.07-.18-.1-.17-.1-.34-.19-.52-.28-.04-.02-.07-.04-.11-.06-.19-.1-.38-.19-.57-.28-.03-.02-.06-.03-.09-.05-.03-.01-.05-.02-.08-.04-.11-.05-.23-.11-.34-.16-.1-.04-.2-.09-.3-.14-.02%2C0-.04-.02-.06-.03-.02%2C0-.03-.01-.05-.02-2.53-1.08-5.24-1.68-7.98-1.76-.02%2C0-.03%2C0-.05%2C0-.19%2C0-.39%2C0-.58%2C0-.05%2C0-.1%2C0-.15%2C0-.15%2C0-.31%2C0-.46%2C0-.07%2C0-.13%2C0-.2%2C0-.16%2C0-.33.01-.49.02-.05%2C0-.09%2C0-.14%2C0-.21.01-.42.03-.62.05-.05%2C0-.1.01-.15.02-.16.02-.32.03-.48.05-.07%2C0-.13.02-.2.03-.15.02-.31.04-.46.07-.05%2C0-.11.02-.16.02-.21.03-.41.07-.62.11-.03%2C0-.06.01-.09.02-.18.03-.35.07-.53.11-.06.01-.12.03-.18.04-.16.04-.31.07-.47.11-.05.01-.1.03-.16.04-.41.1-.81.22-1.21.35-.05.01-.09.03-.14.05-.16.05-.31.1-.47.16-.06.02-.11.04-.17.06-.17.06-.34.13-.52.19-.02%2C0-.05.02-.07.03-.2.08-.39.16-.59.24-.04.02-.09.04-.13.06-.08.03-.16.07-.24.11-.13.06-.27.12-.4.18-.05.02-.1.05-.16.08-.19.09-.39.19-.58.29%2C0%2C0-.02.01-.03.02-.46.24-.91.5-1.35.77-.97.6-1.88%2C1.26-2.72%2C1.97%2C0%2C0%2C0%2C0%2C0%2C0-.14.12-.28.24-.41.36%2C0%2C0%2C0%2C0%2C0%2C0-.12.11-.24.22-.37.33-.02.02-.04.04-.07.06-.05.05-.1.1-.15.14-.09.08-.18.17-.26.26-.01.01-.02.02-.03.03-.03.03-.07.07-.1.1-.14.14-.27.28-.4.42-.03.04-.07.07-.1.11-.11.12-.23.25-.34.37-.05.05-.09.1-.14.16-.11.12-.21.25-.32.37-.04.04-.07.09-.11.13-.14.17-.27.34-.41.52-.02.03-.04.06-.07.09-.11.15-.22.3-.33.45-.04.06-.08.11-.12.17-.09.13-.18.26-.27.4-.04.06-.07.11-.11.17-.12.19-.24.37-.36.57l-.19.3c-4.04%2C6.82-4.26%2C15.6.19%2C22.82Z%22/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-size: var(--pw, 120px) auto; mask-size: var(--pw, 120px) auto; }
  /* Groesse schon im CSS (12.10.2026): ohne sie war der Rahmen 0x0, bis start.js lief, und das Vorschaubild des Flugs
     (LCP-Element) wurde erst nach ~200 KB Skripten gemalt (Handynetz 3,7 s statt 1,5 s). Formeln wie handyRect() in start.js,
     das Skript setzt danach dieselben Werte in Pixeln. Rechner: unter dem Kopf, Reel-Format 9:17, ragt unten heraus. */
  .handy { --hh: min(calc((100svh - 100px) * 1.14), 1100px); --hw: calc(var(--hh) * 9 / 17); top: 100px; width: var(--hw); height: var(--hh); left: calc(min(74%, 100% - var(--hw) / 2 - 210px) - var(--hw) / 2); --unten: max(0px, calc(100px + var(--hh) - 100svh)); }
  .handy.offen { -webkit-mask-image: none; mask-image: none; }
  .handy.gerahmt { box-shadow: 0 0 0 9px #050404, 0 0 0 10px rgba(255,255,255,.16), 0 80px 140px -40px rgba(0,0,0,.95); }
  .handy-flug, .handy-reel { position: absolute; inset: 0; overflow: hidden; }
  /* iPhone-Safari schneidet Video/Canvas an runden Ecken nur mit Maske ab: innere Ebenen uebernehmen die Rundung des Rahmens
     und bekommen nach dem Oeffnen des Pins eine volle Maske (in der Pin-Phase greift die Pin-Maske des Rahmens) */
  .handy.offen .handy-flug, .handy.offen .handy-reel { border-radius: inherit; -webkit-mask-image: -webkit-radial-gradient(white, black); }
  /* iPhone malt Canvas und Video auf eigener Ebene und ignoriert dort das Abschneiden durch den Rahmen. Zuverlaessig ist nur der
     eigene Eckradius des Elements: Medien im Handy runden sich deshalb selbst ab (Vince 05.10.: Ecken beim weissen Uebergang). */
  .handy-flug, .handy-reel { border-radius: inherit; }
  .handy-flug canvas, .handy-flug video, .handy-reel video { border-radius: inherit; }
  /* auch Blitz, Verlauf und Herzen liegen flaechig im Handy und werden animiert (eigene Ebene): eigener Eckradius, sonst eckig (Simulator 05.10.) */
  .handy > .blitz, .handy > .verlauf, .handy > .herzen { border-radius: inherit; }
  .handy-flug video, .handy-reel video { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform, filter; }
  /* visibility zusaetzlich (07.10.): Chrome wertete das erste Reel-Bild trotz opacity 0 als groesstes Element (LCP),
     Lighthouse rechnete dessen Ladezeit hoch (Handy-LCP 16,5 s). start.js schaltet beides beim Schnitt um. */
  .handy-reel { opacity: 0; visibility: hidden; }
  .verlauf { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 20%, transparent 62%, rgba(0,0,0,.7)); opacity: 0; pointer-events: none; }
  .handy .ui-o { position: absolute; z-index: 1; top: 20px; left: 16px; right: 16px; display: flex; gap: 10px; align-items: center; font-size: 13px; opacity: 0; }
  .handy .ui-o b { font-weight: 700; } .handy .ui-o small { display: block; font-size: 11px; opacity: .8; }
  .ava { width: 34px; height: 34px; border-radius: 50%; background: var(--sunset); display: grid; place-items: center; color: #1a0505; box-shadow: 0 0 0 2px #000, 0 0 0 3.5px var(--sunset); flex: none; }
  .ava svg { width: 12px; height: 17px; }
  .handy .ui-u { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: calc(22px + var(--unten, 0px)); font-size: 13px; line-height: 1.4; text-shadow: 0 1px 10px rgba(0,0,0,.7); opacity: 0; }
  .handy .ui-u b { display: block; font-size: 15px; }
  .zaehler { position: absolute; z-index: 7; left: var(--rand); top: 50%; transform: translateY(-50%); opacity: 0; padding-left: clamp(0px, 3vw, 40px); }
  .zaehler .zahl { font-weight: 900; font-size: clamp(110px, 17vw, 300px); line-height: .8; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
  .zaehler .zahl small { font-size: .32em; letter-spacing: 0; color: var(--sunset); margin-left: .1em; }
  .zaehler p { font-size: clamp(18px, 1.4vw, 21px); color: var(--nebel); max-width: 22em; margin: 26px 0 0; }
  .zaehler p b { color: var(--weiss); }

  .bahn { position: absolute; z-index: 4; top: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: clamp(28px, 4vw, 70px); padding: 0 10vw 0 100vw; will-change: transform; }
  .bahn-titel { flex: none; width: min(42vw, 640px); }
  .bahn-titel .gross { font-size: clamp(54px, 7.5vw, 140px); }
  .bahn-titel p { color: var(--nebel); font-size: clamp(17px, 1.3vw, 20px); max-width: 24em; margin: 24px 0 0; }
  .stadt { flex: none; position: relative; width: clamp(240px, 27vw, 430px); height: 74vh; }
  .stadt .bild { position: absolute; inset: 0; overflow: hidden; background: #111; }
  .stadt .bild video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.12); }
  .stadt .name { position: absolute; z-index: 2; left: -0.06em; bottom: -0.18em; font-weight: 900; text-transform: uppercase; font-size: clamp(44px, 5vw, 96px); line-height: .8; letter-spacing: -0.03em; white-space: nowrap; mix-blend-mode: normal; text-shadow: 0 10px 50px rgba(0,0,0,.5); }
  .stadt .daten { position: absolute; z-index: 2; top: 18px; left: 18px; right: 18px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  .stadt .daten span:last-child { color: var(--sunset-60); }
  .stadt:nth-child(odd) { transform: translateY(5vh); }
  .stadt:nth-child(even) { transform: translateY(-5vh); }

  .marke-laden { opacity: 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
  .marke-laden video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .marke-laden.offen { -webkit-mask-image: none !important; mask-image: none !important; }
  .kunden-text { position: absolute; z-index: 8; left: var(--rand); top: 22%; width: min(30vw, 480px); opacity: 0; padding-left: clamp(0px, 3vw, 40px); }
  .kunden-text .gross { font-size: clamp(44px, 5.4vw, 98px); }
  .kunden-text p { color: var(--nebel); margin: 22px 0 0; }
  .kunden-zitat { position: absolute; z-index: 8; left: calc(var(--rand) + clamp(0px, 3vw, 40px)); bottom: 14%; width: min(28vw, 440px); border-left: 3px solid var(--sunset); padding-left: 20px; opacity: 0; }
  .kunden-zitat blockquote { margin: 0; font-size: clamp(20px, 1.7vw, 26px); font-weight: 500; line-height: 1.35; }
  .kunden-zitat cite { display: block; margin-top: 16px; font-style: normal; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--grau); }

  .schluss { position: absolute; z-index: 9; inset: 0; display: grid; place-content: center; text-align: center; opacity: 0; padding: 0 var(--rand); background: var(--schwarz); }
  .schluss .gross { font-size: clamp(56px, 10vw, 190px); }
  .schluss p { color: var(--nebel); font-size: clamp(18px, 1.4vw, 21px); margin: 26px auto 34px; max-width: 30em; }
  .schluss .zeichen { width: clamp(70px, 7vw, 110px); margin: 0 auto 30px; display: block; }

  /* Nach der Reise: normaler Lesefluss */
  .block { padding: clamp(90px, 14vh, 170px) var(--rand); position: relative; z-index: 2; background: var(--schwarz); }
  .block .innen { max-width: 1440px; margin: 0 auto; padding-left: clamp(0px, 3vw, 40px); }
  .block .augen { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sunset); margin: 0 0 22px; }
  .block h2.gross { font-size: clamp(48px, 7vw, 128px); }
  .stimmen { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1px; background: var(--linie); margin-top: 60px; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
  .stimmen figure { margin: 0; background: var(--schwarz); padding: 36px 32px 36px 0; }
  .stimmen figure + figure { padding-left: 32px; }
  .stimmen blockquote { margin: 0; font-size: clamp(19px, 1.5vw, 24px); line-height: 1.4; }
  .stimmen figure:first-child blockquote { font-size: clamp(24px, 2.2vw, 34px); font-weight: 600; }
  .stimmen cite { display: block; margin-top: 18px; font-style: normal; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--grau); }
  .staedte-liste { list-style: none; margin: 50px 0 0; padding: 0; border-top: 1px solid var(--linie); }
  .staedte-liste li { border-bottom: 1px solid var(--linie); }
  .staedte-liste a { display: grid; grid-template-columns: 1fr auto auto; gap: 30px; align-items: baseline; padding: 18px 0; text-decoration: none; transition: padding .3s ease, color .3s ease; }
  .staedte-liste a:hover { padding-left: 18px; color: var(--sunset); }
  .staedte-liste .n { font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 4.4vw, 76px); line-height: 1; letter-spacing: -0.02em; }
  .staedte-liste .k { color: var(--grau); font-size: 15px; }
  .staedte-liste .n small { font-size: 13px; letter-spacing: .14em; color: var(--sunset); vertical-align: middle; margin-left: 8px; }
  .staedte-liste .f { font-weight: 800; font-size: clamp(18px, 1.6vw, 26px); font-variant-numeric: tabular-nums; min-width: 7ch; text-align: right; }

  @media (max-width: 860px) {
    .gesichter figure { width: min(66vw, calc((100svh - 104px - 4vh - 230px) * 9 / 16)); }
    .gesichter figure:nth-child(even) { margin-top: 3vh; }
    .gesichter figcaption { left: 12px; right: 12px; bottom: 12px; }
    .gesichter figcaption b { font-size: clamp(16px, 5.2vw, 26px); white-space: nowrap; }
    .gesichter .kopfzeile p { font-size: 14px; }
    .gesichter .kopfzeile h2 { font-size: clamp(34px, 10vw, 52px); }
    .siegel-zeile { flex-direction: column; align-items: flex-start; }
    .mit-reise .reise { height: 1100vh; }
    .pin-maske { -webkit-mask-position: 50% 30%; mask-position: 50% 30%; }
    .auftakt { padding-left: 0; bottom: 30px; }
    .auftakt .gross { font-size: clamp(30px, 9.4vw, 60px); }
    .handy { -webkit-mask-position: 50% 2%; mask-position: 50% 2%; }
    /* Handy: oben mittig unter der Kopfleiste (90 px + 18 Luft), Hoehe aus dem Format; wie handyRect() */
    .handy { width: min(calc(min(58svh, 560px) * 9 / 17), calc(100% - 48px)); height: auto; aspect-ratio: 9 / 17; left: max(24px, calc(50% - min(58svh, 560px) * 9 / 34)); top: max(calc(env(safe-area-inset-top, 0px) + 108px), 10svh); --unten: 0px; }
    /* Eckradius 24 + Rand 10: die eckige Bildkante (24 * Wurzel 2 = 34) liegt dann innerhalb der Randrundung (24 + 10 = 34),
       auch wenn iPhone-Safari Video/Abdeckung nicht rund abschneidet (sonst ragen Ecken heraus) */
    .handy.offen, .handy.gerahmt { border-radius: 24px; box-shadow: 0 0 0 10px #050404, 0 0 0 11px rgba(255,255,255,.16), 0 60px 110px -40px rgba(0,0,0,.95); }
    .satz { top: auto; bottom: 64px; transform: none; padding-left: 0; }
    /* Startbild: der Pin sitzt oben, also den Ausschnitt auf die Lichter statt auf den Nachthimmel legen */
    #handy-flug { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
    .handy:not(.offen) #handy-flug { transform: translateY(-24%) scale(1.25); }
    .satz .gross { font-size: clamp(40px, 12vw, 64px); }
    .satz p { font-size: 15px; margin-top: 12px; }
    .vertrauen { gap: 14px 22px; margin-top: 22px; font-size: 10px; }
    .vertrauen img { width: 44px; height: 44px; }
    .vertrauen .bewertet { padding-left: 0; border-left: 0; }
    .bw-note { font-size: 34px; }
    .bewertet b { font-size: 13px; } .bewertet small { font-size: 11px; }
    .mk-kopf .bewertet { padding: 14px 18px; }
    .mk-band img { height: 72px; } .mk-band img.jh { height: 22px; margin: 0 26px; }
    .auftakt p { margin: 18px 0 22px; font-size: 16px; }
    .satz, .zaehler, .kunden-text { padding-left: 0; }
    .zaehler { top: auto; bottom: 34px; transform: none; }
    .zaehler .zahl { font-size: clamp(84px, 26vw, 130px); }
    .zaehler p { font-size: 15px; margin-top: 12px; }
    .bahn { padding-left: 100vw; gap: 20px; }
    .bahn-titel { width: 80vw; }
    .stadt { width: 70vw; height: 62vh; }
    .stadt .name { font-size: clamp(54px, 17vw, 88px); }
    .kunden-text { top: auto; }
    .kunden-text { top: auto; bottom: 26px; transform: none; width: auto; right: var(--rand); }
    .kunden-text .gross { font-size: 40px; }
    .kunden-text p, .kunden-zitat { display: none; }
    .stimmen { grid-template-columns: 1fr; }
    .stimmen figure, .stimmen figure + figure { padding: 28px 0; }
    .staedte-liste a { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
    .staedte-liste .n { font-size: clamp(24px, 7.6vw, 34px); overflow-wrap: anywhere; }
    .staedte-liste .f { font-size: 15px; min-width: 0; }
    .staedte-liste .k { display: none; }
  }

  .handy .tags { color: #e0f0ff; font-weight: 600; }
  .ig-leiste { position: absolute; z-index: 2; right: 12px; bottom: calc(96px + var(--unten, 0px)); display: grid; gap: 18px; justify-items: center; font-size: 11px; font-weight: 700; opacity: 0; }
  .ig-leiste div { display: grid; justify-items: center; gap: 3px; }
  .ig-leiste svg { width: 28px; height: 28px; color: #fff; filter: drop-shadow(0 1px 6px rgba(0,0,0,.5)); }
  .ig-leiste .ig-herz svg { color: var(--sunset); }
  .ig-kommentare { position: absolute; z-index: 2; left: 14px; right: 64px; bottom: calc(96px + var(--unten, 0px)); display: flex; flex-direction: column; gap: 6px; }
  .ig-kommentare p { margin: 0; font-size: 12.5px; line-height: 1.35; opacity: 0; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
  .ig-kommentare b { font-weight: 700; margin-right: 6px; }
  .herzen { position: absolute; z-index: 3; right: 18px; bottom: calc(150px + var(--unten, 0px)); width: 40px; height: 0; pointer-events: none; }
  .herzen .herz { position: absolute; left: 0; bottom: 0; width: 30px; height: 30px; color: var(--sunset); opacity: 0; }
  .herzen .herz:nth-child(3n) { color: #fff; }
  .herzen .herz svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
  .blitz { position: absolute; inset: 0; z-index: 4; background: radial-gradient(circle at 70% 25%, #fff6e8, rgba(255,240,220,.85) 40%, rgba(255,220,200,.6)); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
  .riesen-tag { position: absolute; z-index: 1; left: 0; top: 50%; transform: translateY(-50%); font-weight: 900; text-transform: uppercase; font-size: clamp(160px, 24vw, 420px); line-height: .8; letter-spacing: -0.04em; white-space: nowrap; color: transparent; -webkit-text-stroke: 2px rgba(255,87,87,.55); opacity: 0; pointer-events: none; }
  .stimmen-buehne { position: relative; min-height: 100vh; min-height: 100svh; background: var(--schwarz); overflow: hidden; display: grid; align-items: center; padding: clamp(90px, 12vh, 140px) var(--rand) clamp(60px, 8vh, 100px); }
  .sb-innen { max-width: 1440px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 110px); align-items: start; position: relative; padding-left: clamp(0px, 3vw, 40px); }
  .stimmen-buehne .augen { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sunset); margin: 0 0 22px; }
  .stimmen-buehne h2.gross { font-size: clamp(54px, 7.4vw, 136px); }
  .sb-zahlen { display: grid; gap: 22px; margin-top: 48px; }
  .sb-zahlen div { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 10px; border-top: 1px solid var(--linie); padding-top: 18px; }
  .sb-zahlen b { font-weight: 900; font-size: clamp(54px, 5.6vw, 96px); line-height: .85; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .sb-zahlen small { font-weight: 800; color: var(--sunset); font-size: 22px; }
  .sb-zahlen span { color: var(--nebel); font-size: 15px; }
  .sb-feed { display: grid; gap: 14px; }
  .sb-feed-kopf { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--grau); }
  .sb-k { display: grid; grid-template-columns: 46px 1fr; gap: 14px; background: #141010; border: 1px solid var(--linie); border-radius: 22px; padding: 18px 20px; }
  .sb-ava { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 20px; color: #1a0505; background: var(--sunset); }
  .sb-k:nth-child(odd) .sb-ava { background: var(--weiss); }
  .sb-name { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 15px; }
  .sb-name span { color: var(--grau); font-size: 13px; }
  .sb-sterne { margin: 2px 0 6px; color: #ffbe3d; letter-spacing: 2px; font-size: 14px; }
  .sb-text { margin: 0; font-size: 16px; line-height: 1.45; }
  .sb-fuss { margin: 10px 0 0; display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--grau); }
  .sb-herz { width: 16px; height: 16px; color: var(--sunset); display: inline-block; }
  .sb-herz svg { width: 100%; height: 100%; }
  .sb-vertrauen { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin: -4px 0 8px; }
  .sb-feed .sb-vertrauen .bewertet { margin: 0; }
  .sb-siegel { display: flex; align-items: center; gap: 12px; }
  .sb-siegel img { width: 54px; height: 54px; flex: none; }
  .sb-siegel p { margin: 0; font-size: 13px; color: var(--grau); line-height: 1.35; }
  .sb-siegel b { color: var(--weiss); display: block; font-size: 15px; }
  .staedte-liste li { overflow: hidden; }
  .vorschau { position: fixed; z-index: 70; left: 0; top: 0; width: 220px; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.85); transition: opacity .25s ease, transform .25s ease; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }
  .vorschau.an { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
  @media (max-width: 860px) {
    .sb-innen { grid-template-columns: 1fr; padding-left: 0; }
    .riesen-tag { font-size: 34vw; }
    .vorschau { display: none; }
  }
  /* Baustein Städtefahrt (Codex) */
.vh-sf { --vh-red:#ff5757; position:relative; width:100%; height:100%; overflow:hidden; isolation:isolate; background:#080808; color:#fff; font-family:Gabarito,Arial,sans-serif; }
.vh-sf *, .vh-sf *::before, .vh-sf *::after { box-sizing:border-box; }
.vh-sf__heading { position:absolute; top:29%; left:5%; z-index:5; pointer-events:none; }
.vh-sf__heading p { font-size:12px; letter-spacing:.14em; font-weight:700; margin:0 0 25px; }
.vh-sf__heading h2 { margin:0; font-size:clamp(35px,5.1vw,84px); font-weight:900; line-height:.9; letter-spacing:-.045em; }
.vh-sf__heading h2 span { color:var(--vh-red); }
.vh-sf__index { position:absolute; top:8%; right:5%; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; z-index:5; }
.vh-sf__card { margin:0; position:relative; }
/* Echter Link ueber der ganzen Stadtkarte (12.10.2026, statt role="link" am article; kartenVerlinken in start.js).
   Im 3D-Raum (preserve-3d) zaehlt die DOM-Reihenfolge, der Link wird zuletzt angehaengt und liegt damit oben. */
.vh-karte-link { position:absolute; inset:0; z-index:3; border-radius:var(--radius, 22px); }
.vh-karte-link:focus-visible { outline:2px solid var(--sunset); outline-offset:4px; }
.vh-sf__frame { position:absolute; left:0; top:0; overflow:hidden; transform-origin:0 0; will-change:transform; }
.vh-sf__media { position:absolute; left:0; top:0; transform-origin:0 0; }
.vh-sf__media img, .vh-sf__video { position:absolute; width:100%; height:100%; inset:0; display:block; object-fit:cover; object-position:50% 50%; }
.vh-sf__caption { position:absolute; left:0; top:0; z-index:4; padding-top:20px; will-change:transform; }
.vh-sf__handle { display:block; font-size:12px; font-weight:600; color:#b5b5b5; margin-bottom:7px; }
.vh-sf__caption h3 { font-weight:900; text-transform:uppercase; letter-spacing:-.04em; line-height:.9; margin:0 0 8px; white-space:nowrap; }
.vh-sf__followers { color:var(--vh-red); font-weight:600; font-size:14px; }
.vh-sf__foot { position:absolute; left:5%; right:5%; bottom:4%; display:flex; gap:30px; align-items:center; font-size:10px; letter-spacing:.14em; font-weight:600; pointer-events:none; z-index:5; }
.vh-sf__line { height:1px; background:#303030; flex:1; }
.vh-sf--mobile .vh-sf__heading { top:5%; left:6%; }
.vh-sf--mobile .vh-sf__heading p { font-size:10px; margin-bottom:14px; }
.vh-sf--mobile .vh-sf__heading h2 { font-size:clamp(27px,7.5vw,50px); }
.vh-sf--mobile .vh-sf__index { top:5%; right:6%; font-size:10px; }
.vh-sf--mobile .vh-sf__caption { padding-top:16px; }
.vh-sf--mobile .vh-sf__foot { font-size:8px; }
.vh-sf--reduced { height:auto; overflow:visible; padding:40px 5%; }
.vh-sf--reduced .vh-sf__heading { position:static; opacity:1 !important; margin-bottom:36px; }
.vh-sf--reduced .vh-sf__heading h2 { font-size:clamp(32px,6vw,74px); }
.vh-sf--reduced .vh-sf__index, .vh-sf--reduced .vh-sf__foot { display:none; }
.vh-sf--reduced .vh-sf__cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 24px; }
.vh-sf--reduced .vh-sf__card { visibility:visible !important; opacity:1 !important; min-width:0; }
.vh-sf--reduced .vh-sf__card--target { grid-column:1 / -1; }
.vh-sf--reduced .vh-sf__frame { position:relative; width:100% !important; height:auto !important; aspect-ratio:4 / 3; transform:none !important; will-change:auto; }
.vh-sf--reduced .vh-sf__card--target .vh-sf__frame { aspect-ratio:16 / 9; }
.vh-sf--reduced .vh-sf__media { width:100% !important; height:100% !important; transform:none !important; }
.vh-sf--reduced .vh-sf__video { display:none; }
.vh-sf--reduced .vh-sf__caption { position:static; width:100% !important; transform:none !important; opacity:1 !important; will-change:auto; }
.vh-sf--reduced .vh-sf__caption h3 { font-size:clamp(24px,4vw,56px) !important; white-space:normal; overflow-wrap:anywhere; }
@media(max-width:560px) { .vh-sf--reduced .vh-sf__cards { grid-template-columns:1fr; } }

  #staedtefahrt { z-index: 3; }
  /* Baustein 3D-Raum (Codex) */
/* Component-only stylesheet. No body, button, root or host layout changes. */
.vh-space{--coral:#ff5757;--radius:22px;position:relative;width:100%;height:100%;overflow:hidden;background:#080808;color:white;font-family:Gabarito,Arial,sans-serif;isolation:isolate}
.vh-space,.vh-space *{box-sizing:border-box}
.vh-space__viewport{position:absolute;inset:0;perspective-origin:50% 50%;pointer-events:none}
.vh-space__world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.vh-space__card{position:absolute;left:0;top:0;width:320px;height:570px;margin:-285px 0 0 -160px;transform-style:preserve-3d}
.vh-space__flach{position:absolute;inset:0;pointer-events:none}
.vh-space__flach .vh-space__card{transform-style:flat;pointer-events:auto}
.vh-space__surface{position:absolute;inset:0;overflow:hidden;border-radius:var(--radius);backface-visibility:hidden;background:#151515}
.vh-space__surface>img,.vh-space__surface>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vh-space__surface>video{z-index:1}
.vh-space__reel-ui{position:absolute;inset:0;z-index:2;transform-origin:0 0;background:linear-gradient(#0009,transparent 25%,transparent 52%,#000c);font-weight:400}
.vh-space__profile{position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:8px;padding:16px 13px}
.vh-space__avatar{width:34px;height:34px;flex:none;display:grid;place-items:center;background:#080808;border:1px solid #ffffffb0;border-radius:50%}
.vh-space__avatar svg{width:17px;height:24px;fill:var(--coral)}
.vh-space__account{min-width:0;flex:1;line-height:1.2}
.vh-space__account-line{display:flex;gap:4px;align-items:center;min-width:0}
.vh-space__handle{font-size:15px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.02em}
.vh-space__followers{display:block;font-size:11px;margin-top:3px;color:#fff;line-height:1.25}
.vh-space__verified{width:15px;height:15px;flex:none;background:#3897f0;border-radius:50%;display:grid;place-items:center}
.vh-space__verified svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.vh-space__follow{font-size:12px;font-weight:650;border:1px solid #ffffffb0;border-radius:4px;padding:5px 7px;flex:none}
.vh-space__actions{position:absolute;right:12px;bottom:118px;display:flex;flex-direction:column;gap:19px;align-items:center}
.vh-space__action{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;line-height:1.1;max-width:64px}
.vh-space__action svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 50%}
.vh-space__metric{font-variant-numeric:tabular-nums;text-align:center}
.vh-space__caption{position:absolute;inset:auto 53px 20px 16px;display:flex;flex-direction:column;gap:6px}
.vh-space__city{font-size:29px;font-weight:900;letter-spacing:-.035em;line-height:.95;text-transform:uppercase}
.vh-space__copy,.vh-space__hashtags{font-size:13px;line-height:1.3;font-weight:450;overflow-wrap:anywhere}
.vh-space__hashtags{font-weight:650}
.vh-space__edge{position:absolute;top:22px;bottom:22px;left:0;width:7px;background:var(--coral);transform-origin:left center;transform:rotateY(90deg);backface-visibility:visible}
.vh-space__back{position:absolute;inset:0;background:#181818;border:1px solid #ff575744;border-radius:var(--radius);transform:translateZ(-7px) rotateY(180deg);backface-visibility:hidden}
.vh-space__word{position:absolute;left:-1000px;top:-175px;width:2200px;font-size:240px;line-height:.85;letter-spacing:-.065em;font-weight:900;color:var(--coral);transform:translateZ(-1500px);backface-visibility:hidden}
.vh-space__hud{position:absolute;inset:auto 32px 32px;z-index:4;display:flex;justify-content:space-between;align-items:end;gap:24px;pointer-events:none}
.vh-space__title{margin:0;font-size:clamp(30px,4.4vw,72px);line-height:.9;letter-spacing:-.04em;font-weight:900;text-transform:uppercase;max-width:10em}
.vh-space__step{font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:right;line-height:1.6}
.vh-space__progress{position:absolute;inset:auto 0 0;height:3px;background:var(--coral);transform-origin:left;z-index:5}
/* At the exact endpoint: native box, no transforms or perspective anywhere above the video. */
.vh-space.is-flat .vh-space__viewport{perspective:none!important}
.vh-space.is-flat .vh-space__world{left:0;top:0;width:100%;height:100%;transform:none!important;transform-style:flat}
.vh-space.is-flat .vh-space__flach>.vh-space__card{left:0;top:0;width:100%!important;height:100%!important;margin:0!important;transform:none!important;transform-style:flat}
.vh-space.is-flat .vh-space__word,.vh-space.is-flat .vh-space__world .vh-space__card{visibility:hidden}
.vh-space.is-flat .vh-space__progress{visibility:hidden}
.vh-space.is-landing .vh-space__flach .vh-space__edge,.vh-space.is-landing .vh-space__flach .vh-space__back{display:none}
.vh-space.is-reduced{height:auto;overflow:visible;padding:100px 24px 40px}
.vh-space.is-reduced .vh-space__viewport{position:static;perspective:none!important}
.vh-space.is-reduced .vh-space__world{position:static;transform:none!important;width:auto;height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.vh-space.is-reduced .vh-space__card{position:relative;inset:auto;margin:0!important;width:100%!important;height:auto!important;aspect-ratio:320/570;transform:none!important;--radius:22px!important}
.vh-space.is-reduced .vh-space__reel-ui{opacity:1!important;transform:none!important;width:100%!important;height:100%!important}
.vh-space.is-reduced video,.vh-space.is-reduced .vh-space__edge,.vh-space.is-reduced .vh-space__back,.vh-space.is-reduced .vh-space__word,.vh-space.is-reduced .vh-space__hud,.vh-space.is-reduced .vh-space__progress{display:none}
.vh-space.is-reduced .vh-space__action svg{transform:none!important;color:white!important}
/* Mobil: Ueberschrift ueber dem schwebenden Termin-Knopf (ca. 62 px hoch inkl. Abstand), sonst verdeckt er "EIN NETZWERK." */
@media(max-width:700px){.vh-space__caption{display:none}.vh-space__hud{inset:auto 18px calc(84px + env(safe-area-inset-bottom, 0px))}.vh-space__step{max-width:9em;font-size:9px}.vh-space__title{font-size:clamp(28px,9.4vw,39px)}.vh-space.is-reduced .vh-space__world{grid-template-columns:1fr}}
  #staedtefahrt { --coral: #ff5757; }
  #staedtefahrt .vh-space__progress { display: none; }

  /* Referenzen: Logo-Band und Bewertungssiegel */
  .bewertet { display: inline-flex; align-items: center; gap: 14px; text-transform: none; letter-spacing: 0; }
  .bw-note { font-size: 44px; font-weight: 900; line-height: 1; color: var(--weiss); }
  .bw-rest { display: grid; gap: 2px; line-height: 1.2; }
  .bw-sterne { color: #ffbe3d; letter-spacing: 3px; font-size: 15px; }
  .bewertet b { font-size: 15px; font-weight: 700; color: var(--weiss); }
  .bewertet small { font-size: 12px; font-weight: 500; color: var(--grau); }
  .vertrauen { flex-wrap: wrap; gap: 18px 34px; }
  .v-tuev { display: flex; align-items: center; gap: 14px; line-height: 1.35; }
  .vertrauen .bewertet { padding-left: 34px; border-left: 1px solid var(--linie); }
  .sb-feed .bewertet { margin: -4px 0 8px; }
  .marken { position: relative; background: var(--schwarz); padding: clamp(110px, 16vh, 180px) 0 clamp(90px, 12vh, 140px); overflow: hidden; }
  .mk-kopf { max-width: 1440px; margin: 0 auto clamp(56px, 8vh, 90px); padding: 0 var(--rand); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 30px; }
  .mk-kopf .augen { width: 100%; margin: 0 0 -8px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sunset); }
  .mk-kopf h2 { margin: 0; font-size: clamp(54px, 7.4vw, 136px); }
  .mk-kopf .bewertet { padding: 18px 24px; border: 1px solid var(--linie); border-radius: 22px; background: #141010; }
  .mk-reihe { overflow: hidden; padding: clamp(10px, 2vh, 22px) 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .mk-band { display: flex; align-items: center; width: max-content; will-change: transform; }
  .mk-band img { height: clamp(90px, 11vw, 170px); width: auto; margin: 0 clamp(4px, 1vw, 18px); opacity: .9; transition: opacity .3s, transform .3s; }
  .mk-band img.jh { height: clamp(26px, 3.1vw, 48px); margin: 0 clamp(36px, 4vw, 70px); filter: brightness(0) invert(1); }
  .mk-band img:hover { opacity: 1; transform: scale(1.06); }
  /* Logos verlinken auf die Kampagne (08.10.) */
  .mk-band .mk-link { display: block; flex: none; line-height: 0; border-radius: 14px; }
  .mk-band .mk-link img { display: block; }
  .mk-band .mk-link:focus-visible { outline: 2px solid var(--sunset); outline-offset: 4px; }
  .mk-reihe + .mk-reihe { border-top: 1px solid var(--linie); }

  /* Starker Handlungsknopf: Pin-Ecke unten links als Formzitat der Bildmarke */
  .tat.stark { gap: 14px; padding: 14px 34px 14px 14px; background: var(--sunset); color: #1a0505; border-radius: 26px 26px 26px 6px; letter-spacing: .04em; font-size: clamp(19px, 1.5vw, 24px); box-shadow: 0 18px 50px -18px rgba(255,87,87,.65); transition: transform .3s cubic-bezier(.3,1.6,.5,1), box-shadow .3s; }
  .tat.stark .pinknopf { width: 62px; height: 62px; }
  .tat.stark .pinknopf::before { background: #1a0505; }
  .tat.stark .pinknopf::after { content: ""; position: absolute; inset: 0; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); box-shadow: 0 0 0 0 rgba(26,5,5,.5); animation: tat-puls 2.6s ease-out infinite; }
  .tat.stark .pinknopf svg { color: var(--sunset); }
  .tat.stark .text { padding: 0; display: grid; gap: 2px; line-height: 1.1; }
  .tat.stark .text small { font-size: 13px; font-weight: 700; letter-spacing: .14em; opacity: .8; } /* Kontrast 4,85 (12.10.2026) */
  .tat.stark .text::after { display: none; }
  .tat.stark:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 26px 60px -18px rgba(255,87,87,.85); }
  @keyframes tat-puls { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255,255,255,0); } }
  @media (max-width: 860px) {
    .tat.stark { font-size: 16px; padding-right: 20px; }
    .tat.stark .pinknopf { width: 44px; height: 44px; }
  }
  @media (max-width: 860px) { .vertrauen .bewertet { padding-left: 0; border-left: 0; } }
  @media (prefers-reduced-motion: reduce) { .tat.stark .pinknopf::after { animation: none; } }

/* Gesichter: Moderatorin mit echtem Reel (Video ueber dem Foto, startet sichtbar) */
.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; }
.reel-zeichen { position: absolute; z-index: 2; top: 14px; left: 14px; font-size: 12px; font-weight: 700; letter-spacing: .08em; padding: 5px 10px 5px 26px; border-radius: 8px; background: rgba(7,6,6,.55); backdrop-filter: blur(6px); }
.reel-zeichen::before { content: ""; position: absolute; left: 10px; top: 50%; width: 0; height: 0; margin-top: -5px; border-left: 9px solid var(--sunset); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

/* Kapitelspur nur auf dem Rechner (die Regel stand im Prototyp zusammen mit dem Kopf) */
@media (max-width: 860px) { .spur { display: none; } }

/* Play-Knopf: Reise als Video abspielen (Musik + automatisches Scrollen) */
.auftakt-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.reise-play { display: inline-flex; align-items: center; gap: 14px; background: none; border: 0; color: var(--weiss); cursor: pointer; padding: 0; font: inherit; text-align: left; }
.rp-kreis { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.7); position: relative; transition: transform .3s cubic-bezier(.3,1.6,.5,1), background .3s; }
.rp-kreis::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(255,87,87,.6); animation: rp-ring 2.4s ease-out infinite; }
.rp-kreis svg { width: 24px; height: 24px; fill: var(--weiss); margin-left: 3px; }
.rp-pause { display: none; }
.reise-play.an .rp-play { display: none; } .reise-play.an .rp-pause { display: block; } .reise-play.an svg { margin-left: 0; }
.reise-play:hover .rp-kreis { transform: scale(1.08); background: rgba(255,87,87,.25); }
.rp-text { display: grid; line-height: 1.1; }
.rp-text small { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sunset); }
.rp-text b { font-size: 18px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
/* Grosser Play-Knopf mittig auf dem Pin-Kopf (Vince 05.10.); --d setzt start.js nach Pin-Groesse */
.reise-play--gross { position: absolute; z-index: 6; flex-direction: column; gap: 12px; transform: translateX(-50%); text-align: center; transition: opacity .3s ease; }
.reise-play--gross[hidden] { display: none; }
.reise-play--gross .rp-kreis { width: var(--d, 92px); height: var(--d, 92px); background: var(--sunset); border-color: transparent; box-shadow: 0 18px 50px -12px rgba(0,0,0,.85); }
.reise-play--gross .rp-kreis svg { width: 42%; height: 42%; fill: #fff; margin-left: 7%; }
.reise-play--gross .rp-kreis::after { inset: -10px; border-color: rgba(255,255,255,.55); }
.reise-play--gross:hover .rp-kreis { transform: scale(1.08); background: var(--sunset); }
.reise-play--gross .rp-text { justify-items: center; text-shadow: 0 2px 14px rgba(0,0,0,.85); }
.reise-play--gross.weg, .reise-laeuft .reise-play--gross { opacity: 0; pointer-events: none; }
/* Kleiner Film-Knopf in der Knopfzeile: mit JS von Anfang an aus (12.10.2026, CLS: die Zeile war bis start.js 138 statt 72 px
   hoch), weil setzeFilmKnopf() fast immer den grossen Knopf auf den Pin setzt (film-mittig). Nur wenn der Pin zu klein ist
   (film-zeile), bleibt er in der Zeile. */
.js .auftakt-knoepfe .reise-play { display: none; }
.buehne.film-zeile .auftakt-knoepfe .reise-play { display: inline-flex; }
@media (max-width: 860px) { .reise-play--gross .rp-text { display: none; } }
@keyframes rp-ring { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.reise-laeuft .schwebe-tat { opacity: 0 !important; pointer-events: none; }
.rp-leiste { position: fixed; z-index: 70; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(160%); display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 16px; background: rgba(7,6,6,.86); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 50px -20px rgba(0,0,0,.9); color: var(--weiss); font-size: 13px; font-variant-numeric: tabular-nums; transition: transform .45s cubic-bezier(.2,1.1,.3,1); }
.reise-laeuft .rp-leiste { transform: translateX(-50%); }
/* Ausserhalb des Films komplett weg: Verschieben allein reichte auf dem iPhone nicht (Abstand zur Home-Leiste, Streifen sichtbar) */
.rp-leiste { opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(calc(100% + 120px)) !important; }
.reise-laeuft .rp-leiste { opacity: 1; visibility: visible; transform: translateX(-50%) !important; }
.rp-k { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: rgba(255,255,255,.08); color: var(--weiss); cursor: pointer; }
.rp-k:hover { background: rgba(255,255,255,.16); }
.rp-k:focus-visible, .rp-fortschritt:focus-visible { outline: 2px solid var(--sunset); outline-offset: 2px; }
.rp-k svg { width: 18px; height: 18px; fill: currentColor; }
.rp-haupt { width: 42px; height: 42px; background: var(--sunset); color: var(--sunset-tief); }
.rp-haupt:hover { background: var(--sunset); filter: brightness(1.08); }
.rp-zu { background: none; opacity: .7; } .rp-zu:hover { opacity: 1; background: rgba(255,255,255,.08); }
.rp-fortschritt { position: relative; width: clamp(140px, 22vw, 300px); height: 22px; cursor: pointer; touch-action: none; margin: 0 4px; }
.rp-fortschritt::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); }
.rp-fortschritt i { position: absolute; left: 0; top: 9px; height: 4px; width: 0; border-radius: 4px; background: var(--sunset); }
.rp-fortschritt b { position: absolute; top: 4px; left: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--weiss); box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.rp-zeit { min-width: 76px; text-align: center; color: var(--nebel); }
@media (max-width: 560px) { .rp-leiste { gap: 4px; padding: 6px; } .rp-fortschritt { width: 34vw; } .rp-zeit { display: none; } .rp-k { width: 32px; height: 32px; } .rp-haupt { width: 38px; height: 38px; } }
@media (prefers-reduced-motion: reduce) { .reise-play { display: none; } }
@media (max-width: 860px) { .rp-kreis { width: 48px; height: 48px; } .rp-text b { font-size: 15px; } }

/* Finale: Bildmarke als schlagendes Herz. Ruhezustand ohne JS = fertiges Logo mit Schriftzug. */
.finale { position: relative; background: var(--schwarz); overflow: hidden; border-top: 1px solid var(--linie); }
.fin-buehne { position: relative; height: 100vh; height: 100svh; min-height: 620px; display: grid; place-items: center; }
.fin-marke { position: absolute; left: 50%; top: 40%; width: clamp(150px, 20vw, 300px); transform: translate(-50%, -50%); overflow: visible; filter: drop-shadow(0 30px 80px rgba(255,87,87,.35)); }
.fin-marke path { transform-box: fill-box; transform-origin: 50% 50%; }
.fin-echos { position: absolute; left: 50%; top: 40%; width: clamp(150px, 20vw, 300px); aspect-ratio: 112 / 100; transform: translate(-50%, -50%); pointer-events: none; }
.fin-echo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; }
.fin-echo path { fill: none; stroke: var(--sunset); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.fin-herzen { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; }
.fin-herz { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; color: var(--sunset); opacity: 0; }
.fin-herz:nth-child(3n) { color: var(--weiss); }
.fin-text { position: absolute; left: 0; right: 0; bottom: clamp(50px, 10vh, 110px); text-align: center; padding: 0 var(--rand); }
.fin-wort { font-size: clamp(56px, 10vw, 190px); line-height: .9; margin: 0 0 14px; white-space: nowrap; }
.fin-wort span { display: inline-block; }
.fin-wort .lz { width: .3em; }
.fin-claim { margin: 0 0 30px; font-size: clamp(17px, 1.5vw, 24px); color: var(--nebel); }
.js .finale.bewegt .fin-text { bottom: clamp(40px, 8vh, 90px); }
@media (max-width: 860px) {
  .fin-marke, .fin-echos { width: 46vw; top: 34%; }
  .fin-herzen { top: 34%; }
  .fin-wort { font-size: 12vw; }
}
.reise-laeuft .schwebe-tat { opacity: 0 !important; pointer-events: none; transform: translateY(140%) !important; }

/* Player-Leiste nur nach Tippen (Handy) bzw. Mausbewegung (Rechner, Vince 05.10.); in der Pause bleibt sie (rp-sichtbar) */
.reise-laeuft .rp-leiste:not(.rp-sichtbar) { transform: translateX(-50%) translateY(calc(100% + 120px)) !important; opacity: 0; visibility: hidden; pointer-events: none; }
.rp-leiste { transition: transform .35s ease, opacity .35s ease, visibility .35s; }
/* Tastatur: solange der Fokus sichtbar in der Leiste steht, bleibt sie (ohne :has-Unterstuetzung entfaellt nur diese Regel) */
.reise-laeuft .rp-leiste:has(:focus-visible) { transform: translateX(-50%) !important; opacity: 1; visibility: visible; pointer-events: auto; }

.handy .ava.mit-logo, .vh-space__avatar.mit-logo { background: none; border: 0; overflow: hidden; padding: 0; }
.handy .ava.mit-logo img, .vh-space__avatar.mit-logo img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }

/* Niedrige Handy-Bildschirme (Safari-Leisten, Cookie-Banner; Vince 05.10.: Pin lag hinter dem Text): TÜV/Bewertung im
   Auftakt ausblenden (stehen weiter unten bei den Kundenstimmen), damit der Start-Pin Platz ueber der Ueberschrift hat.
   Die Pin-Groesse misst start.js (startPin) am freien Platz. */
@media (max-width: 860px) and (max-height: 800px) { .auftakt .vertrauen { display: none; } }