/* Schwung: die bewegte Schicht über allen Seiten (NEU am 03.10.2026).
 *
 * Ansage des Inhabers: Wassersport ist ein Lebensgefühl, und die Seite
 * strahlte es nicht aus. Sie soll jung, dynamisch und frech wirken, ein gutes
 * Gefühl geben, genau hier richtig zu sein, "nicht nur ein bisschen".
 *
 * Diese Datei trägt zwei Dinge:
 *   1. Die Handschrift für jede Adresse: Knöpfe mit Schwung, Überschriften,
 *      die sich Wort für Wort heben, Inhalte, die beim Scrollen hereingleiten,
 *      eine Welle über der Fußzeile. Eingebunden global von nm_kopf(), wie
 *      die Seekarte, damit sie auf keiner der rund 26.000 Adressen fehlt.
 *   2. Die Erlebnisstrecke (Klassen xp-*): großes Bild oder Film mit
 *      Überschrift, drei Schritte "Das kriegen wir hin", der Rechner mit dem
 *      Betrag pro Tag, Bilder und der Film als letzter Anstoß vor der Anfrage.
 *      Markup in lib/partials/xp-*.php, Texte in daten/erlebnis/.
 *
 * Grenzen, die gelten:
 *   - Nichts wird versteckt, bevor das Skript läuft. Was beim Laden schon im
 *     Bild ist, bleibt stehen; nur Inhalte weiter unten markiert motion.js
 *     als "kommt noch" (.xp-pre). Ohne Skript sieht man alles sofort.
 *   - Wer weniger Bewegung eingestellt hat (prefers-reduced-motion), bekommt
 *     die Gestaltung ohne jede Bewegung, Filme zeigen ihr Standbild.
 *   - Die Seekarten-Schicht bleibt unangetastet, der Maklerbereich bekommt
 *     keine Erlebnisstrecke.
 */

:root {
  --xp-sea: #16c8ff;
  --xp-pink: #ff47ab;
  --xp-sun: #ffb347;
  --xp-coral: #ff6f5b;
  --xp-night: #05070d;
  --xp-grad: linear-gradient(100deg, #16c8ff 0%, #8f8cff 34%, #ff47ab 66%, #ffb347 100%);
  --xp-grad-warm: linear-gradient(100deg, #ff47ab 0%, #ff6f5b 50%, #ffb347 100%);
  --xp-serif: var(--font-serife, "Fraunces", Georgia, serif);
  --xp-ease: cubic-bezier(.22, 1, .36, 1);
  --xp-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- 1. Knöpfe mit Schwung ------------------------------------- */

html .btn {
  border-radius: 999px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: transform .35s var(--xp-spring), box-shadow .35s var(--xp-ease),
              background-position .7s var(--xp-ease), border-color .25s ease, color .25s ease !important;
  will-change: transform;
}
html .btn:hover { transform: translateY(-3px); }
html .btn:active { transform: translateY(0) scale(.98); }

html .btn-primary {
  background-image: linear-gradient(100deg, var(--color-accent) 0%, var(--color-accent) 38%,
                    #a9ecff 50%, var(--color-accent) 62%, var(--color-accent) 100%) !important;
  background-size: 260% 100% !important;
  background-position: 100% 0 !important;
  font-weight: 600 !important;
}
html .btn-primary:hover {
  background-position: 0 0 !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
              0 14px 34px -14px var(--color-accent) !important;
}
/* Kopfleiste: auf mittleren Breiten reichte der Innenrand von 72px nicht für
   alle Einträge (in der österreichischen Fassung mit dem Länderschild ragte
   "Beitrag berechnen" 70px über den Fensterrand, schon vor diesem Umbau).
   Weniger Innenrand, gleiche Ordnung. */
@media (min-width: 1100px) and (max-width: 1620px) {
  nav.nav > div:first-child { max-width: 1480px !important; padding-inline: clamp(18px, 2vw, 32px) !important; }
}

/* Der kleine Pfeil, den Knöpfe der Strecke tragen, schiebt beim Zeigen nach. */
.xp-arrow { display: inline-block; margin-left: .45em; transition: transform .35s var(--xp-spring); }
.btn:hover .xp-arrow { transform: translateX(4px); }

/* ---------- 2. Bewegung beim Scrollen --------------------------------- */

.xp-rv { transition: opacity .9s var(--xp-ease), transform .9s var(--xp-ease); transition-delay: var(--xp-delay, 0ms); }
.xp-pre { opacity: 0; transform: translate3d(0, 34px, 0); }

/* Überschriften heben sich Wort für Wort. motion.js packt jedes Wort in
   ein .xp-w; der Text selbst bleibt unverändert im Dokument. */
.xp-w { display: inline-block; animation: xp-rise .95s var(--xp-ease) both; animation-delay: calc(var(--i, 0) * 55ms + 80ms); }
@keyframes xp-rise {
  from { opacity: 0; transform: translate3d(0, .5em, 0) rotate(1.5deg); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Verlaufsschrift für das eine Wort, auf das es ankommt. */
.xp-grad-text {
  background: var(--xp-grad); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: xp-shift 8s ease-in-out infinite alternate;
}
@keyframes xp-shift { from { background-position: 0 0; } to { background-position: 100% 0; } }

/* Die Welle über der Fußzeile: zwei Bahnen, gegeneinander versetzt. */
.xp-footwave { display: block; width: 100%; height: 46px; margin: 0 0 -1px; overflow: hidden; pointer-events: none; }
.xp-footwave svg { width: 200%; height: 100%; display: block; }
.xp-footwave .xp-wv1 { animation: xp-wave 14s linear infinite; }
.xp-footwave .xp-wv2 { animation: xp-wave 22s linear infinite reverse; opacity: .55; }
@keyframes xp-wave { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Die vorhandene Wellenlinie der deutschen Fußzeile wiegt sich mit. */
.xp-ownwave { animation: xp-sway 7s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes xp-sway { from { transform: translateX(-1.5%) scaleY(.85); } to { transform: translateX(1.5%) scaleY(1.15); } }

/* Lesefortschritt als Wasserlinie oben am Fenster. */
.xp-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 300; pointer-events: none;
  background: var(--xp-grad); transform-origin: 0 50%; transform: scaleX(var(--xp-p, 0)); opacity: .9; }


/* ---------- 2b. Der übrige Inhalt im neuen Look (03.10.2026 abends) ----
   Damit sich der Look durch die ganze Seite zieht und nicht nach der
   Erlebnisstrecke in den alten, technischen Stil kippt: Kästen weich
   gerundet und mit etwas Auftrieb beim Darüberfahren, die Passermarken der
   Seekarte (seite.css, 24.09.2026) bleiben als Erkennungszeichen, jetzt im
   warmen Verlauf der Strecke. Abschnittsüberschriften in der Serife wie oben,
   Kicker im Sonnenton. Nicht im Menü und nicht im Maklerbereich, der seine
   eigene Aktenoptik hat. */
body:not(.nm-bereich-makler) main :is(.nm-weich, .card, .karte, .bk-card, .bk-situ-card):not(nav *) {
  border-radius: 18px !important;
  transition: transform .45s var(--xp-spring), box-shadow .45s var(--xp-ease), border-color .3s ease !important;
}
body:not(.nm-bereich-makler) main :is(.nm-weich, .card, .karte, .bk-card, .bk-situ-card):not(nav *):hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px -30px color-mix(in srgb, var(--xp-pink) 70%, transparent),
              0 0 0 1px color-mix(in srgb, var(--xp-pink) 26%, transparent) !important;
}
/* Kästen mit Formularen oder Reglern heben nicht ab: dort stört Bewegung. */
body:not(.nm-bereich-makler) main :is(.nm-weich, .card, .karte):has(input, select, textarea, form):hover { transform: none; }
/* Kästen mit Tabellen heben sich nicht (sonst Rollbalken im Tabellenrahmen, 04.10.2026). */
body:not(.nm-bereich-makler) main :is(.nm-weich, .card, .karte, .bk-card):has(table):hover { transform: none; }
body:not(.nm-bereich-makler) main :is(.nm-weich, .card, .karte, .bk-card, .bk-situ-card):not(nav *)::after {
  border-radius: 18px;
  background-image:
    linear-gradient(90deg, var(--xp-sun), var(--xp-pink)), linear-gradient(180deg, var(--xp-sun), var(--xp-pink)),
    linear-gradient(270deg, var(--xp-sun), var(--xp-pink)), linear-gradient(180deg, var(--xp-pink), var(--xp-sea)),
    linear-gradient(90deg, var(--xp-pink), var(--xp-sea)), linear-gradient(0deg, var(--xp-pink), var(--xp-sea)),
    linear-gradient(270deg, var(--xp-pink), var(--xp-sea)), linear-gradient(0deg, var(--xp-sun), var(--xp-sea)) !important;
  opacity: .9;
}
/* Bilder in Kästen und Bildleisten bekommen dieselben weichen Ecken. */
body:not(.nm-bereich-makler) main :is(figure, .nm-weich, .card) > img,
body:not(.nm-bereich-makler) main figure img { border-radius: 14px; }
/* Abschnittsüberschriften in der Serife (wie die h1 und die Strecke). */
body:not(.nm-bereich-makler) main h2:not([class*="xp-"]):not(.card-title) {
  font-family: var(--xp-serif) !important; letter-spacing: -.022em;
}
/* Kicker über den Abschnitten im Sonnenton, die Peilstriche davor bleiben. */
body:not(.nm-bereich-makler) :is(main > p, section > p, article > p):first-child[style*="text-transform: uppercase"] {
  color: var(--xp-sun) !important; font-weight: 700; letter-spacing: .16em !important;
}
/* Häufige Fragen: Zeilen mit weicher Kante, die sich beim Öffnen färben. */
body:not(.nm-bereich-makler) main details:not(nav *) > summary { transition: color .25s ease; }
body:not(.nm-bereich-makler) main details[open]:not(nav *) > summary { color: var(--xp-sun); }

/* ---------- 3. Die Erlebnisstrecke ------------------------------------ */

/* Einbettung in den Hauptteil. seite.css (Teil 10) gibt jedem Kind von
   <main> Abstand, Rand und Hintergrund; randlos laufen dort nur .bande.
   Die Strecke trägt deshalb .bande, und der übrige Inhalt der Seite steht in
   einer .spalte (die führt Breite und Seitenabstand selbst). Hier nehmen wir
   der Bande nur ihre Linien und ihren Verlauf wieder ab. */
main > .bande:is(.xp-hero, .xp-steps, .xp-daily, .xp-gallery, .xp-marquee, .xp-film) { border: 0; margin-block: 0 !important; }
main > .bande:is(.xp-steps, .xp-daily, .xp-gallery) { background: none; }
main > .xp-hero.bande:first-child { margin-top: 0 !important; }
main > .xp-film.bande { margin-top: clamp(72px, 9vw, 120px) !important; }
main > .xp-film.bande:last-child { margin-bottom: 0 !important; }
.xp-hero.bande, .xp-film.bande { background: #04080f; }

.xp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.xp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
.xp-kicker {
  margin: 0 0 12px; font-family: var(--font-body); font-size: 14.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--xp-sun);
  display: inline-flex; align-items: center; gap: 10px;
}
.xp-kicker::before { content: ""; width: 28px; height: 2px; background: var(--xp-grad-warm); border-radius: 2px; }
.xp-h2 { font-family: var(--xp-serif); font-weight: 600; font-size: clamp(30px, 4vw, 52px); line-height: 1.08;
  letter-spacing: -.02em; margin: 0 0 18px; max-width: 22ch; text-wrap: balance; }
.xp-p { font-size: 18px; line-height: 1.6; max-width: 62ch; margin: 0 0 18px; color: color-mix(in srgb, var(--color-text) 82%, transparent); }

/* 3.1 Kopf: Bild sofort, Film darüber, sobald er läuft. */
.xp-hero { position: relative; min-height: clamp(620px, 92vh, 940px); display: flex; align-items: flex-end;
  overflow: hidden; background: #04080f; color: #fff; isolation: isolate; }
.xp-hero .xp-hero-media, .xp-hero .xp-hero-video { position: absolute; inset: -4% 0 0 0; max-width: none; width: 100%; height: 104%; object-fit: cover;
  object-position: var(--xp-focus, 60% 45%); transform: translate3d(0, var(--xp-par, 0px), 0) scale(1.06);
  transform-origin: 50% 40%; }
.xp-hero-media { animation: xp-kenburns 22s ease-in-out infinite alternate; }
@keyframes xp-kenburns { from { scale: 1; } to { scale: 1.07; } }
.xp-hero-video { opacity: 0; transition: opacity 1.2s ease; }
.xp-hero-video.xp-on { opacity: 1; }
.xp-hero-veil { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(90deg, rgba(4,8,15,.84) 0%, rgba(4,8,15,.55) 34%, rgba(4,8,15,.1) 66%, rgba(4,8,15,0) 100%),
    linear-gradient(0deg, rgba(4,8,15,.92) 0%, rgba(4,8,15,.3) 34%, rgba(4,8,15,0) 58%),
    radial-gradient(120% 80% at 85% 10%, rgba(255,179,71,.14), transparent 60%); }
.xp-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto;
  padding: 150px clamp(20px, 5vw, 72px) clamp(86px, 9vw, 120px); }
.xp-crumbs { margin: 0 0 18px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.xp-crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.xp-hero h1 { font-family: var(--xp-serif); font-weight: 600; font-size: clamp(44px, 7vw, 96px); line-height: .98;
  letter-spacing: -.035em; margin: 0 0 0 -.04em; max-width: 12.5ch; text-wrap: balance; color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.xp-hero h1 .xp-term { display: block; width: max-content; max-width: calc(100vw - 40px); font-family: var(--font-body);
  font-size: clamp(13px, 1.3vw, 17px); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--xp-sun);
  margin: 0 0 16px; text-shadow: none; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.xp-lead { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; max-width: 42ch; margin: 26px 0 0; color: rgba(255,255,255,.94); }
.xp-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.xp-hero-cta .btn { min-height: 56px; padding: 14px 28px !important; font-size: 17.5px; }
.btn-light { background: rgba(255,255,255,.1) !important; border: 1px solid rgba(255,255,255,.55) !important;
  color: #fff !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-light:hover { background: rgba(255,255,255,.2) !important; }
.xp-points { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px;
  font-size: 15.5px; line-height: 22px; color: rgba(255,255,255,.9); }
.xp-points li { display: flex; gap: 8px; align-items: center; }
.xp-points li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 50%, #fff 0 3px, transparent 3.5px), var(--xp-grad-warm); }
/* Der Tagesbetrag als leise Zeile neben den Knoepfen (seit 04.10.2026, vorher
   ein schwebendes Schild im Bild, das dem Inhaber nicht gefiel). */
.xp-sticker { align-self: center; display: inline-flex; align-items: baseline; gap: 6px; margin-left: 6px;
  color: rgba(255,255,255,.82); text-decoration: none; font-size: 15px; white-space: nowrap; }
.xp-sticker small { font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.72); }
.xp-sticker b { font-family: var(--xp-serif); font-size: 22px; font-weight: 500; color: #fff; }
.xp-sticker:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.xp-hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; height: 64px; overflow: hidden; pointer-events: none; }
.xp-hero-wave svg { width: 200%; height: 100%; display: block; }
.xp-hero-wave .xp-wv1 { animation: xp-wave 12s linear infinite; }
.xp-hero-wave .xp-wv2 { animation: xp-wave 19s linear infinite reverse; opacity: .5; }
.xp-scroll { position: absolute; z-index: 3; left: 50%; bottom: 74px; width: 28px; height: 46px; margin-left: -14px;
  border: 2px solid rgba(255,255,255,.6); border-radius: 16px; }
.xp-scroll::after { content: ""; position: absolute; left: 50%; top: 9px; width: 4px; height: 9px; margin-left: -2px;
  border-radius: 2px; background: #fff; animation: xp-scrollcue 1.8s var(--xp-ease) infinite; }
@keyframes xp-scrollcue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@media (max-width: 760px) {
  .xp-hero { min-height: auto; }
  .xp-crumbs, .xp-scroll { display: none; }
  /* Am Telefon steht das Bild ganz und unbeschnitten oben (16:9), darunter
     der Text auf dunklem Grund. Ohne Versatz und Zoom, sonst fehlen oben die
     Köpfe (gesehen beim Hausboot und beim E-Foil). */
  .xp-hero .xp-hero-media, .xp-hero .xp-hero-video { inset: 0 0 auto 0; width: 100%; height: auto; aspect-ratio: 16 / 9;
    object-position: var(--xp-focus-m, 50% 50%); transform: none; animation: none; scale: 1; }
  .xp-hero-inner { padding-top: calc(56.25vw + 18px); padding-bottom: 92px; }
  .xp-hero h1 .xp-term { letter-spacing: .1em; }
  .xp-hero-veil { background: linear-gradient(0deg, rgba(4,8,15,.97) 0%, rgba(4,8,15,.86) 50%, rgba(4,8,15,.15) 80%, rgba(4,8,15,0) 100%); }
  .xp-hero-cta .btn { flex: 1 1 100%; }
  .xp-sticker { margin: 6px 0 0; }
}

/* 3.2 Laufband: die Reviere ziehen vorbei. Rein dekorativ (aria-hidden).
   GEAENDERT am 04.10.2026 ("nicht so kitschig"): eine schlichte Zeile in
   kleinen Versalien, gedaempft, langsam, ohne Farbwechsel und Konturschrift. */
.xp-marquee { overflow: hidden; white-space: nowrap; padding: 13px 0; border-block: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.xp-marquee-track { display: inline-flex; gap: 0; animation: xp-marquee 90s linear infinite; }
.xp-marquee span { font-size: 12.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; padding: 0 18px;
  color: color-mix(in srgb, var(--color-text) 52%, transparent); }
.xp-marquee i { font-style: normal; font-size: 0; }
.xp-marquee i::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; vertical-align: middle;
  background: color-mix(in srgb, var(--color-text) 35%, transparent); }
@keyframes xp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 3.3 Drei Schritte: "Das kriegen wir hin". */
.xp-steps { padding: clamp(72px, 9vw, 120px) 0 0; position: relative; }
.xp-steps-track { position: relative; margin: 34px 0 0; }
.xp-steps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; position: relative; z-index: 1; }
.xp-steps-line { position: absolute; left: 6%; right: 6%; top: 56px; width: 88%; height: 4px; z-index: 0; pointer-events: none; overflow: visible; }
.xp-steps-line path { stroke: url(#xp-steps-grad); stroke-width: 3; fill: none; stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 2.2s var(--xp-ease); }
.xp-steps.xp-drawn .xp-steps-line path { stroke-dashoffset: 0; }
.xp-step { position: relative; z-index: 1; padding: 28px 26px 30px; border-radius: 22px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--xp-sea) 12%, var(--xp-night)) 0%, color-mix(in srgb, var(--xp-night) 92%, transparent) 70%);
  border: 1px solid color-mix(in srgb, var(--xp-sea) 22%, transparent);
  transition: transform .5s var(--xp-spring), border-color .3s ease, box-shadow .4s ease; }
.xp-step:hover { transform: translateY(-6px) rotate(-.4deg); border-color: color-mix(in srgb, var(--xp-pink) 60%, transparent);
  box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--xp-pink) 70%, transparent); }
.xp-step-num { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; margin: 0 0 18px;
  font-family: var(--xp-serif); font-size: 28px; font-weight: 600; color: #160a12; background: var(--xp-grad-warm);
  box-shadow: 0 10px 26px -12px rgba(255,111,91,.8); }
.xp-step:nth-child(2) .xp-step-num { background: linear-gradient(135deg, #8f8cff, #ff47ab); }
.xp-step:nth-child(3) .xp-step-num { background: linear-gradient(135deg, #16c8ff, #8f8cff); }
.xp-step-t { font-family: var(--xp-serif); font-weight: 600; font-size: 23px; line-height: 1.22; margin: 0 0 8px; }
.xp-step p:last-child { margin: 0; font-size: 16.5px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
@media (max-width: 860px) { .xp-steps-list { grid-template-columns: 1fr; } .xp-steps-line { display: none; } }

/* 3.4 Der Rechner mit dem Betrag pro Tag. */
.xp-daily { padding: clamp(72px, 9vw, 120px) 0 0; scroll-margin-top: 90px; }
.xp-daily-box { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0; border-radius: 28px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  background: color-mix(in srgb, var(--color-text) 3%, var(--xp-night)); }
@media (max-width: 860px) { .xp-daily-box { grid-template-columns: 1fr; } }
.xp-daily-in { padding: clamp(24px, 3.4vw, 44px); display: grid; gap: 22px; align-content: start; }
.xp-daily-in .xp-h2 { font-size: clamp(28px, 3.2vw, 42px); }
.xp-field { display: grid; gap: 10px; }
.xp-field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 16px; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.xp-field-head output { font-family: var(--font-num); font-size: 22px; color: var(--color-text); }
.xp-range { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 10px; outline-offset: 6px; cursor: pointer;
  background: linear-gradient(90deg, var(--xp-sea) 0, var(--xp-pink) var(--xp-fill, 30%), color-mix(in srgb, var(--color-text) 14%, transparent) var(--xp-fill, 30%)); }
.xp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff;
  border: 6px solid var(--xp-pink); box-shadow: 0 6px 18px -6px rgba(255,71,171,.9); transition: transform .3s var(--xp-spring); }
.xp-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 6px solid var(--xp-pink); }
.xp-range:active::-webkit-slider-thumb { transform: scale(1.18); }
.xp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-chip { appearance: none; border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent); background: transparent; color: var(--color-text);
  border-radius: 999px; padding: 10px 18px; font: 600 15.5px/1 var(--font-body); cursor: pointer; transition: all .3s var(--xp-ease); min-height: 44px; }
.xp-chip[aria-checked="true"] { background: var(--color-text); color: var(--xp-night); border-color: var(--color-text); }
.xp-chip:hover { border-color: var(--xp-pink); }
.xp-daily-out { position: relative; padding: clamp(28px, 3.6vw, 48px); display: grid; gap: 14px; align-content: center; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,71,171,.30), transparent 60%),
              radial-gradient(110% 90% at 0% 100%, rgba(22,200,255,.26), transparent 60%),
              color-mix(in srgb, var(--xp-night) 88%, #1a1030); }
.xp-daily-out[aria-busy="true"] .xp-day { opacity: .45; }
.xp-daily-label { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--xp-sun); }
.xp-day { margin: 0; font-family: var(--font-num); font-weight: 600; font-size: clamp(56px, 8vw, 104px); line-height: .95; letter-spacing: -.04em;
  background: linear-gradient(100deg, #fff 0%, #ffe3f2 40%, #ffd08a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: opacity .3s ease; }
.xp-day small { display: block; margin-top: 10px; font-family: var(--font-body); font-size: 18px; letter-spacing: 0; font-weight: 600; color: rgba(255,255,255,.86); -webkit-text-fill-color: rgba(255,255,255,.86); }
.xp-year { margin: 0; font-size: 17px; color: rgba(255,255,255,.82); }
.xp-year b { font-family: var(--font-num); font-weight: 600; color: #fff; }
.xp-joke { margin: 4px 0 0; font-family: var(--xp-serif); font-size: clamp(21px, 2vw, 26px); line-height: 1.25; color: #fff; min-height: 1.3em; }
.xp-joke.xp-swap { animation: xp-pop .6s var(--xp-spring); }
@keyframes xp-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.xp-daily-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.xp-share { appearance: none; background: none; border: 0; color: #fff; font: 600 15.5px/1 var(--font-body); padding: 12px 6px; min-height: 48px;
  cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 4px; }
.xp-share:hover { text-decoration-color: var(--xp-pink); }
.xp-share[hidden] { display: none; }
.xp-note { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.62); max-width: 52ch; }
.xp-bubble { position: absolute; border-radius: 50%; pointer-events: none; opacity: .5; filter: blur(.5px);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(255,255,255,.08) 60%, transparent 70%);
  animation: xp-bubble linear infinite; }
@keyframes xp-bubble { from { transform: translateY(40px); opacity: 0; } 15% { opacity: .55; } to { transform: translateY(-420px); opacity: 0; } }

/* 3.5 Bilder: zwei Aufnahmen, leicht versetzt, mit Zeile im Bild. */
.xp-gallery { padding: clamp(72px, 9vw, 120px) 0 0; }
.xp-gallery-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; margin-top: 26px; align-items: start; }
.xp-gallery-grid figure:nth-child(2) { margin-top: clamp(30px, 6vw, 90px); }
@media (max-width: 760px) { .xp-gallery-grid { grid-template-columns: 1fr; } .xp-gallery-grid figure:nth-child(2) { margin-top: 0; } }
.xp-fig { position: relative; margin: 0; border-radius: 24px; overflow: hidden; transform: perspective(900px) rotateX(var(--xp-rx, 0deg)) rotateY(var(--xp-ry, 0deg));
  transition: transform .5s var(--xp-ease), box-shadow .5s ease; box-shadow: 0 30px 60px -40px rgba(0,0,0,.9); }
.xp-fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--xp-ease); }
.xp-fig:hover img { transform: scale(1.05); }
.xp-fig figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 22px 20px; font-family: var(--xp-serif);
  font-size: clamp(20px, 2vw, 27px); line-height: 1.2; color: #fff; background: linear-gradient(0deg, rgba(4,8,15,.86), rgba(4,8,15,0)); }

/* 3.6 Der Film: letzter Anstoß vor der Anfrage. */
.xp-film { position: relative; margin: 0; min-height: clamp(520px, 78vh, 820px); display: flex; align-items: center;
  overflow: hidden; color: #fff; background: #04080f; isolation: isolate; }
.xp-film-video, .xp-film-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xp-film-video { opacity: 0; transition: opacity 1.2s ease; }
.xp-film-video.xp-on { opacity: 1; }
.xp-film-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(4,8,15,.86) 0%, rgba(4,8,15,.5) 45%, rgba(4,8,15,.08) 100%),
              linear-gradient(0deg, rgba(4,8,15,.6), transparent 50%); }
.xp-film-inner { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; padding: 80px clamp(20px, 5vw, 72px); }
.xp-film-t { font-family: var(--xp-serif); font-weight: 600; font-size: clamp(36px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -.03em;
  margin: 0 0 18px; max-width: 14ch; text-wrap: balance; }
.xp-film-p { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; max-width: 44ch; margin: 0 0 28px; color: rgba(255,255,255,.9); }
.xp-film-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.xp-film-cta .btn { min-height: 56px; padding: 14px 28px !important; font-size: 17.5px; }
.xp-film-tel { margin: 22px 0 0; font-size: 16px; color: rgba(255,255,255,.8); }
.xp-film-tel a { color: #fff; font-family: var(--font-num); }
.xp-film-sound { position: absolute; z-index: 3; right: 18px; bottom: 18px; }
@media (max-width: 760px) {
  .xp-film { min-height: 560px; align-items: flex-end; }
  .xp-film-veil { background: linear-gradient(0deg, rgba(4,8,15,.95) 0%, rgba(4,8,15,.7) 50%, rgba(4,8,15,.1) 100%); }
  .xp-film-cta .btn { flex: 1 1 100%; }
}

/* Der Abschlussstreifen auf allen übrigen Seiten: dieselbe Idee, kleiner. */
.xp-film--band { min-height: clamp(380px, 52vh, 560px); margin-top: 0; }
.xp-film--band .xp-film-t { font-size: clamp(30px, 4vw, 54px); }

/* Mitlaufender Knopf am Telefon: erscheint, wenn der Kopf aus dem Bild ist. */
.xp-dock { position: fixed; z-index: 250; left: 12px; right: 76px; bottom: 12px; display: none; }
.xp-dock .btn { width: 100%; min-height: 54px; box-shadow: 0 16px 40px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.15) !important; }
@media (max-width: 760px) { .xp-dock { display: block; transform: translateY(140%); transition: transform .5s var(--xp-spring); }
  .xp-dock.xp-on { transform: none; } }

/* ---------- 4. Weniger Bewegung --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .xp-w, .xp-ownwave, .xp-hero-media, .xp-sticker, .xp-marquee-track, .xp-grad-text, .xp-footwave svg, .xp-hero-wave svg,
  .xp-bubble, .xp-scroll::after, .xp-joke.xp-swap { animation: none !important; }
  .xp-rv, .xp-step, .xp-fig, .xp-fig img, html .btn { transition: none !important; }
  main :is(.nm-weich, .card, .karte, .bk-card, .bk-situ-card):hover { transform: none !important; }
  .xp-pre { opacity: 1 !important; transform: none !important; }
  .xp-hero-video, .xp-film-video { display: none !important; }
  .xp-steps-line path { stroke-dashoffset: 0 !important; transition: none !important; }
  .xp-progress { display: none; }
}
@media print {
  .xp-hero-video, .xp-film-video, .xp-marquee, .xp-dock, .xp-progress, .xp-footwave, .xp-hero-wave, .xp-sticker, .xp-scroll { display: none !important; }
  .xp-pre { opacity: 1 !important; transform: none !important; }
}

/* ---------- 5. Abstaende in Vertiefungen (04.10.2026) -------------------
   Zugeklappte Abschnitte brachten ihren alten Abschnittsabstand mit (76 bis
   130 px oben, bis 140 px unten): aufgeklappt stand der Inhalt weit unter
   dem Titel (Ansage des Inhabers, z. B. "Jede Marke, drei Bueros am Wasser").
   Reine Huellen (ohne Rahmen und Hintergrund) verlieren hier ihren Abstand
   nach oben und unten; Kaesten mit Rahmen behalten ihren Innenabstand. */
.nm-vertiefung-inhalt > :is(section, div, article):first-child:not(.nm-weich, .card, .karte, .bk-card, [style*="border"], [style*="background"]),
.nm-vertiefung-inhalt > .nm-vertiefung-antwort + :is(section, div, article):not(.nm-weich, .card, .karte, .bk-card, [style*="border"], [style*="background"]),
.nm-vertiefung-inhalt > :is(section, div, article):first-child:not(.nm-weich, .card, .karte, .bk-card, [style*="border"], [style*="background"]) > :is(section, div, article):first-child:not(.nm-weich, .card, .karte, .bk-card, [style*="border"], [style*="background"]),
.nm-vertiefung-inhalt > .nm-vertiefung-antwort + :is(section, div, article) > :is(section, div, article):first-child:not(.nm-weich, .card, .karte, .bk-card, [style*="border"], [style*="background"]) {
  padding-top: 0 !important; margin-top: 0 !important; }
.nm-vertiefung-inhalt > :is(section, div, article):last-child:not(.nm-weich, .card, .karte, .bk-card, [style*="border"], [style*="background"]),
.nm-vertiefung-inhalt > :is(section, div, article):last-child:not(.nm-weich, .card, .karte, .bk-card, [style*="border"], [style*="background"]) > :is(section, div, article):last-child:not(.nm-weich, .card, .karte, .bk-card, [style*="border"], [style*="background"]) {
  padding-bottom: 0 !important; margin-bottom: 0 !important; }
.nm-vertiefung-inhalt > :first-child > h2:first-child, .nm-vertiefung-inhalt > :first-child > p:first-child { margin-top: 0; }
/* Aussenabstaende (margin) fallen in den ersten und letzten drei Ebenen immer
   weg, auch bei Kaesten mit Rahmen: deren Innenabstand bleibt, der Abstand
   davor und danach nicht. */
.nm-vertiefung-inhalt > :first-child, .nm-vertiefung-inhalt > :first-child > :first-child,
.nm-vertiefung-inhalt > :first-child > :first-child > :first-child,
.nm-vertiefung-antwort + *, .nm-vertiefung-antwort + * > :first-child, .nm-vertiefung-antwort + * > :first-child > :first-child {
  margin-top: 0 !important; }
.nm-vertiefung-inhalt > :last-child, .nm-vertiefung-inhalt > :last-child > :last-child,
.nm-vertiefung-inhalt > :last-child > :last-child > :last-child { margin-bottom: 0 !important; }
/* Die Pflichtfrage bringt eigenen Abschnittsabstand und Seitenrand mit. */
.nm-vertiefung-inhalt .nm-pflicht { padding: 0 !important; }