/* Hochwertig Reisebüro (01.11.2026): Korrekturen aus der Durchsicht aller Unterseiten und zusätzliche Licht- und Bewegungseffekte.
   Texte, Aufbau und Farben bleiben; bei „Bewegung reduzieren“ bleibt alles ruhig. */

/* ---------- Korrekturen ---------- */
/* Angebote am Handy: Sortierung nicht mehr abgeschnitten */
@media (max-width:420px){label:has(> #offer-sort),label:has(#offer-sort){grid-column:1/-1}}
/* Gutschein: Foto läuft weich in den dunklen Übergang statt mit harter Kante */
.gb-hero img{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
/* Impressum/Datenschutz am Handy: Kopf nicht doppelt eingerückt */
.page-hero.shell > .shell{padding-inline:0!important;max-width:none!important;width:auto!important}
/* Abschnitt „Gemeinsame Zeit …“ bündig mit den übrigen Abschnitten */
@media (min-width:900px){.journey-section:not(.qf-integrated) .journey-inner:not(.journey-faq){width:min(1280px,calc(100% - 96px))!important;max-width:none!important}}
/* Reisewunsch: Häkchen auf Höhe der ersten Textzeile, Platzhalter am Handy lesbar */
label.consent{display:flex!important;align-items:flex-start;gap:.6rem}
label.consent input{margin-top:.25em!important;flex:none}
@media (max-width:420px){main form input::placeholder,main form textarea::placeholder{font-size:.875rem}}
/* Angebote: Reisekalender als aufklappbar erkennbar */
.reise-calendar summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.reise-calendar summary::-webkit-details-marker{display:none}
.reise-calendar summary::after{content:"+";font-size:1.6rem;line-height:1;color:#a76c37;transition:transform .3s}
.reise-calendar details[open] summary::after{transform:rotate(45deg)}
/* AIDA/Mein Schiff „Von deinem Reisewunsch …“: Überschrift mit Abstand, Knopf mit Luft */
#persoenliche-beratung .shell > h2{margin-bottom:clamp(28px,4vw,48px)!important}
#persoenliche-beratung .shell > p:last-child{margin-top:32px}
#persoenliche-beratung .button.outline{text-wrap:balance}
/* Reisewelten: Textlink im Einleitungstext ohne Zeilenlücke */
.section-heading p > .text-link{display:inline!important;min-height:0!important;padding-block:12px}
/* Reiseziele: weitere Ziele als Reihe statt gebrochener Pillen */
@media (min-width:761px){.dest-related{display:flex!important;flex-wrap:wrap;gap:10px}.dest-related .btn{white-space:nowrap}}
/* Flitterwochen: Einleitung der Fragen mit Abstand zur ersten Linie */
.journey-faq .qf-heading{margin-bottom:2rem!important}
/* Hafenkarte: Ortsnamen mit Rand, damit Routen sie nicht durchschneiden */
.hr-route svg text,.hr-map svg text{paint-order:stroke;stroke:#0b1f2a;stroke-width:4px;stroke-linejoin:round}
/* Kreuzfahrten: Knöpfe und Links in einer ruhigen Reihe */
.offers-section .actions{align-items:center;gap:12px 28px}

/* ---------- Effekte ---------- */
/* Reiseziele „Insel für Insel …“: eine durchgehende Linie füllt sich, erreichte Stationen leuchten */
.dest-route.hw-beam{position:relative}
.dest-route.hw-beam .dest-stop .n::after{display:none!important}
.dest-route.hw-beam::before,.dest-route.hw-beam::after{content:"";position:absolute;left:7px;top:var(--hw-a,0);height:var(--hw-len,0);width:2px;margin-left:-.5px;border-radius:2px;pointer-events:none}
.dest-route.hw-beam::before{background:rgba(176,138,78,.22)}
.dest-route.hw-beam::after{background:linear-gradient(180deg,#d9b277,#a76c37);transform-origin:top;transform:scaleY(var(--hw-fill,0));box-shadow:0 0 12px rgba(217,178,119,.45)}
.dest-route.hw-beam .dest-stop .n::before{z-index:1;transition:background .45s,box-shadow .45s,transform .45s}
.dest-route.hw-beam .dest-stop.hw-an .n::before{background:#d9b277!important;transform:scale(1.12);box-shadow:0 0 0 6px rgba(217,178,119,.22),0 0 18px rgba(217,178,119,.6)!important}

/* Abschluss „Die schönste Reise beginnt …“ und Reiseziel-Kontakt: weiches, langsam wanderndes Licht, einmal Glanz auf dem Hauptknopf */
.cta-section,section.dark#kontakt{position:relative;isolation:isolate;overflow:hidden}
.cta-section::before,section.dark#kontakt::before{content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;
  background:radial-gradient(32% 40% at 22% 30%,rgba(217,178,119,.14),transparent 70%),radial-gradient(30% 38% at 78% 70%,rgba(94,160,170,.12),transparent 70%);
  animation:hw-licht 18s ease-in-out infinite alternate}
@keyframes hw-licht{to{transform:translate(4%,-3%) rotate(4deg)}}
.cta-section .button.sand,section.dark#kontakt .acts .btn:first-child,.finder .button{position:relative;overflow:hidden;isolation:isolate}
.hw-glanz::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 48%,transparent 64%);transform:translateX(-120%);animation:hw-glanz 1.4s ease-out .2s 1 both}
@keyframes hw-glanz{to{transform:translateX(120%)}}

/* Fragen: Antworten öffnen weich statt zu springen */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  main details::details-content{block-size:0;overflow:hidden;transition:block-size .38s cubic-bezier(.3,.7,.2,1),content-visibility .38s allow-discrete}
  main details[open]::details-content{block-size:auto}
}
main details[open] > :not(summary){animation:hw-auf .4s ease both}
@keyframes hw-auf{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Beratungstermin: sobald Tag und Uhrzeit stehen, leuchtet „Weiter zur Anfrage“ auf */
.sp-go{transition:transform .3s,box-shadow .3s}
.sp-go.hw-bereit{animation:hw-puls .7s ease 1}
@keyframes hw-puls{40%{transform:scale(1.05);box-shadow:0 0 0 8px rgba(217,178,119,.25)}}

/* Drei Schritte „Aus Wünschen wird …“: die Linie über jedem Schritt zieht sich golden auf */
.editorial-grid > article.hw-linie{position:relative}
.editorial-grid > article.hw-linie::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:linear-gradient(90deg,#d9b277,#a76c37);transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.3,.7,.2,1) var(--hw-d,0s)}
.editorial-grid > article.hw-linie.hw-an::before{transform:scaleX(1)}

/* Startseite „Welche Kreuzfahrt passt zu dir?“: einmal läuft eine goldene Lichtkante herum */
@property --hw-w{syntax:'<angle>';inherits:false;initial-value:0deg}
.finder{position:relative;isolation:isolate}
.finder::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--hw-w),transparent 0deg,transparent 250deg,#d9b277 310deg,#fff1d8 335deg,#d9b277 350deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.finder.hw-an::after{animation:hw-umlauf 3s cubic-bezier(.45,.05,.3,1) .2s 1 both}
@keyframes hw-umlauf{0%{opacity:0;--hw-w:0deg}10%{opacity:1}90%{opacity:1}100%{opacity:0;--hw-w:360deg}}

/* Reisewelten „Vier Reisewelten …“: die gezeigte Karte bleibt klar, die übrigen treten zurück */
@media (hover:hover){
  .world-grid > .world-card{transition:filter .4s,opacity .4s,transform .4s}
  .world-grid:hover > .world-card:not(:hover){filter:saturate(.75) brightness(.92);opacity:.78}
  .world-grid > .world-card:hover{transform:translateY(-3px)}
}

/* Gutschein: Betrag rollt beim Wechseln */
.hw-rollt{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .cta-section::before,section.dark#kontakt::before,.hw-glanz::after,.finder.hw-an::after,.sp-go.hw-bereit,main details[open] > :not(summary){animation:none!important}
  .dest-route.hw-beam::after,.editorial-grid > article.hw-linie::before{transition:none}
  main details::details-content{transition:none!important}
}
/* Am Handy steht der Text direkt neben den Punkten: dort leuchten nur die Punkte, ohne Linie */
@media (max-width:760px){.dest-route.hw-beam::before,.dest-route.hw-beam::after{display:none}}

/* ---------- Runde 2 (01.11.2026) ---------- */
/* Neue oder gefilterte Angebote, Reiseideen und Uhrzeiten blenden weich ein */
.hw-ein{animation:hw-ein .55s cubic-bezier(.3,.7,.2,1) both;animation-delay:var(--hw-d,0s)}
@keyframes hw-ein{from{opacity:0;filter:blur(6px);transform:translateY(10px)}to{opacity:1;filter:none;transform:none}}
/* Wechselnde Texte (Reisegefühl, Reisekompass, Trefferzahl) blenden weich um */
.hw-wechsel{animation:hw-wechsel .45s ease both}
@keyframes hw-wechsel{from{opacity:.2;filter:blur(5px)}to{opacity:1;filter:none}}
.compass-mark{display:inline-block;transition:transform .6s cubic-bezier(.3,.7,.2,1)}
/* Lichtschein unter der Maus: Reedereien und Beratungswege */
.hw-spot{position:relative;isolation:isolate}
.hw-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;z-index:1;
  background:radial-gradient(340px circle at var(--hw-x,50%) var(--hw-y,50%),rgba(217,178,119,.16),transparent 60%)}
.hw-spot.hw-schein::after{opacity:1}
/* Kreuzfahrten „Von Fjorden bis Inselglück“: Bilder zoomen sanft unter der Maus */
.route-grid article{overflow:hidden}
.route-grid article img{transition:transform .9s cubic-bezier(.3,.7,.2,1)}
@media (hover:hover){.route-grid article:hover img{transform:scale(1.05)}}
/* Flusskreuzfahrten: ruhiges Flusslicht im Kopf ohne Foto */
html.hw-fluss .page-hero{position:relative;isolation:isolate}
html.hw-fluss .page-hero::before{content:"";position:absolute;inset:-10% -20%;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 30% at 70% 40%,rgba(94,160,170,.14),transparent 70%),radial-gradient(35% 26% at 85% 75%,rgba(217,178,119,.12),transparent 70%),repeating-linear-gradient(170deg,rgba(94,160,170,.05) 0 2px,transparent 2px 18px);
  animation:hw-fluss 20s ease-in-out infinite alternate}
@keyframes hw-fluss{to{transform:translateX(-4%) translateY(2%)}}
/* Reiseziele: Bild löst sich beim Hineinscrollen sanft aus der Nähe */
.dest-figure{overflow:hidden}
.dest-figure img{transform:scale(var(--hw-s,1));transition:transform .2s linear;will-change:transform}
@media (prefers-reduced-motion:reduce){.hw-ein,.hw-wechsel,html.hw-fluss .page-hero::before{animation:none}.dest-figure img{transform:none}.route-grid article img,.compass-mark{transition:none}}