@charset "UTF-8";
/* ==========================================================================
   MEERFRISCHE — Design System v2 «Cinematic Coast»
   Marke abgeleitet aus dem Logo: Ozeanblau #0077b6 · Sand #f4d9a0
   ========================================================================== */

/* ------------------------------------------------ 01 · Tokens ------------ */
:root {
  /* Tiefen */
  --night:     #002b42;
  --night-2:   #003957;
  --night-3:   #004366;
  --deep:      #00507a;

  /* Marke */
  --brand:     #0077b6;
  --brand-lit: #1e93d4;
  --brand-dim: #005f92;
  --aqua:      #7ad3ea;
  --sand:      #f4d9a0;
  --sand-lit:  #fbecc9;
  --sand-dim:  #dcb96f;
  --brand-txt: #00618f;   /* dunklere Marke für Text auf hellem Grund */
  --gold-txt:  #a5761c;   /* Sterne auf hellem Grund */
  --sand-txt:  #8a6516;   /* Logo-Sand als lesbare Hoverfarbe auf hellem Grund */

  /* Papier */
  --paper:     #fbf8f3;
  --paper-2:   #f4efe6;
  --paper-3:   #ece5d8;
  --white:     #ffffff;

  /* Text */
  --tx-1:      #073852;
  --tx-2:      #2b6482;
  --tx-3:      #3f728d;
  --dx-1:      #ffffff;
  --dx-2:      rgba(255,255,255,.84);
  --dx-3:      rgba(255,255,255,.76);

  /* Linien */
  --hair:      rgba(0,72,110,.16);
  --hair-2:    rgba(0,72,110,.09);
  --hair-d:    rgba(255,255,255,.16);
  --hair-d2:   rgba(255,255,255,.08);

  /* Signal */
  --warn:      #a8442c;
  --warn-bg:   #fbeeec;
  --good:      #0f6d72;
  --good-bg:   #e6f4f6;

  /* Schrift */
  --f-disp: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-mega: clamp(3.2rem, 1.1rem + 8.6vw, 9.5rem);
  --fs-xxl:  clamp(2.4rem, 1.25rem + 4.6vw, 5.2rem);
  --fs-xl:   clamp(2rem, 1.3rem + 2.9vw, 3.6rem);
  --fs-lg:   clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-md:   clamp(1.18rem, 1.06rem + .5vw, 1.45rem);
  --fs-lead: clamp(1.05rem, 1rem + .38vw, 1.28rem);
  --fs-sm:   .925rem;
  --fs-xs:   .8rem;
  --fs-mono: .715rem;

  /* Raum */
  --wrap: 1280px;
  --wrap-w: 1500px;
  --pad: clamp(1.15rem, .5rem + 2.6vw, 3.5rem);
  --sec: clamp(4.5rem, 2.2rem + 8vw, 9.5rem);

  /* Radius */
  --r1: 8px; --r2: 14px; --r3: 22px; --r4: 32px; --r5: 46px; --rp: 999px;

  /* Schatten */
  --e1: 0 1px 2px rgba(0,43,66,.05), 0 3px 10px rgba(0,43,66,.05);
  --e2: 0 4px 14px rgba(0,43,66,.06), 0 18px 44px rgba(0,43,66,.09);
  --e3: 0 10px 28px rgba(0,43,66,.10), 0 40px 90px rgba(0,43,66,.16);
  --eb: 0 12px 30px rgba(0,119,182,.30);

  /* Bewegung */
  --ez: cubic-bezier(.22,.68,.28,1);
  --ez-out: cubic-bezier(.16,1,.3,1);
  --t1: .32s; --t2: .55s; --t3: .9s;

  --head-h: 78px;
}

/* ------------------------------------------------ 02 · Reset ------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 20px);
}
body {
  font-family: var(--f-sans);
  font-size: 1rem; line-height: 1.68;
  color: var(--tx-2); background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Körnung über allem */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.09'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--f-disp); color: var(--tx-1);
  font-weight: 500; line-height: 1.06; letter-spacing: -.028em;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 90;
  text-wrap: balance;
}
p { text-wrap: pretty; }
:focus-visible { outline: 2.5px solid var(--brand-lit); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--sand); color: var(--night); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------ 03 · Layout ------------ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.wrap-w { width: 100%; max-width: var(--wrap-w); margin-inline: auto; padding-inline: var(--pad); }
.wrap-n { width: 100%; max-width: 820px; margin-inline: auto; padding-inline: var(--pad); }
.sec { padding-block: var(--sec); position: relative; }
.sec-s { padding-block: clamp(3rem, 1.8rem + 4vw, 5.5rem); }
.bg-paper2 { background: var(--paper-2); }
.bg-night { background: var(--night); color: var(--dx-2); }
.bg-night h1, .bg-night h2, .bg-night h3, .bg-night h4 { color: var(--dx-1); }
.bg-deep { background: linear-gradient(160deg, var(--night) 0%, var(--night-2) 55%, var(--deep) 100%); color: var(--dx-2); }
.bg-deep h1, .bg-deep h2, .bg-deep h3, .bg-deep h4 { color: var(--dx-1); }

.g { display: grid; gap: clamp(1.1rem, .5rem + 1.8vw, 2.2rem); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

.skip {
  position: fixed; left: 50%; top: 0; transform: translate(-50%, -130%); z-index: 10000;
  background: var(--night); color: #fff; padding: .85rem 1.5rem;
  border-radius: 0 0 var(--r2) var(--r2); font-weight: 700;
}
.skip:focus { transform: translate(-50%, 0); }

/* ------------------------------------------------ 04 · Typo-Bausteine ---- */
.lab {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--f-mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--brand-txt);
}
.lab::before { content: ""; width: 30px; height: 1px; background: currentColor; opacity: .5; }
.bg-night .lab, .bg-deep .lab, .phero .lab { color: var(--sand-lit); }
.phero .lab::before, .bg-night .lab::before, .bg-deep .lab::before { background: var(--sand-lit); }

.num-tag {
  font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .18em;
  color: var(--tx-3); text-transform: uppercase;
}
.bg-night .num-tag, .bg-deep .num-tag { color: var(--dx-3); }

.h-mega { font-size: var(--fs-mega); line-height: .92; letter-spacing: -.045em; }
.h-xxl  { font-size: var(--fs-xxl); }
.h-xl   { font-size: var(--fs-xl); }
.h-lg   { font-size: var(--fs-lg); }
.h-md   { font-size: var(--fs-md); letter-spacing: -.015em; }
.lead   { font-size: var(--fs-lead); line-height: 1.62; }
.small  { font-size: var(--fs-sm); }
.tx3    { color: var(--tx-3); }
.bg-night .lead, .bg-deep .lead { color: var(--dx-2); }
.ital { font-style: italic; font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 90; }
.sandy { color: var(--sand); }

.head-block { max-width: 760px; }
.head-block .lab { margin-bottom: 1.4rem; }
.head-block p { margin-top: 1.3rem; }
.center { text-align: center; margin-inline: auto; }
.center .lab { justify-content: center; }

/* Reihen-Überschrift mit Zähler rechts */
.row-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
  padding-bottom: 1.6rem; border-bottom: 1px solid var(--hair); margin-bottom: clamp(2rem,1rem + 3vw,3.4rem);
  flex-wrap: wrap;
}
.bg-night .row-head, .bg-deep .row-head { border-color: var(--hair-d); }

/* ------------------------------------------------ 05 · Buttons ----------- */
.b {
  --bg: var(--brand); --fg: #fff; --bd: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: .95rem 1.85rem; border-radius: var(--rp);
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd);
  font-weight: 700; font-size: .95rem; line-height: 1.2; letter-spacing: -.005em;
  overflow: hidden; isolation: isolate;
  transition: transform var(--t1) var(--ez), box-shadow var(--t1) var(--ez), color var(--t1) var(--ez), border-color var(--t1) var(--ez);
  box-shadow: var(--eb);
}
.b::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--night); transform: translateY(101%);
  transition: transform var(--t2) var(--ez-out);
}
.b:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,43,66,.28); }
.b:hover::before { transform: translateY(0); }
.b:active { transform: translateY(0); }
.b svg { flex: none; transition: transform var(--t1) var(--ez); }
.b:hover svg { transform: translateX(4px); }

.b--sand { --bg: var(--sand); --fg: var(--night); box-shadow: 0 12px 30px rgba(244,217,160,.35); }
.b--sand::before { background: var(--white); }
.b--sand:hover { color: var(--night); }
.b--white { --bg: #fff; --fg: var(--night); box-shadow: var(--e2); }
.b--white::before { background: var(--night); }
.b--white:hover { color: #fff; }
.b--line { --bg: transparent; --fg: var(--tx-1); --bd: var(--hair); box-shadow: none; }
.b--line::before { background: var(--night); }
.b--line:hover { color: #fff; border-color: var(--night); box-shadow: var(--e2); }
.b--line-d { --bg: rgba(0,43,66,.46); --fg: #fff; --bd: rgba(255,255,255,.42); box-shadow: none;
              backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.b--line-d::before { background: #fff; }
.b--line-d:hover { color: var(--night); border-color: #fff; }
.b--lg { min-height: 60px; padding: 1.1rem 2.3rem; font-size: 1rem; }
.b--full { width: 100%; }

.arw {
  display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: .95rem;
  color: var(--tx-1); min-height: 26px;
}
.arw span {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--hair);
  display: grid; place-items: center; flex: none;
  transition: background-color var(--t1) var(--ez), border-color var(--t1) var(--ez), color var(--t1) var(--ez), transform var(--t1) var(--ez);
}
.arw:hover { color: var(--sand-txt); }
.arw:hover span { background: var(--sand); border-color: var(--sand); color: var(--night); transform: translateX(4px); }
.bg-night .arw, .bg-deep .arw { color: #fff; }
.bg-night .arw span, .bg-deep .arw span { border-color: var(--hair-d); }
.bg-night .arw:hover, .bg-deep .arw:hover { color: var(--sand); }
.bg-night .arw:hover span, .bg-deep .arw:hover span { background: var(--sand); border-color: var(--sand); color: var(--night); }

.btns { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ------------------------------------------------ 06 · Header ------------ */
.hd {
  position: fixed; inset: 0 0 auto 0; z-index: 500; height: var(--head-h);
  display: flex; align-items: center;
  transition: background-color .4s var(--ez), box-shadow .4s var(--ez), height .4s var(--ez);
}
.hd__in { width: 100%; max-width: var(--wrap-w); margin-inline: auto; padding-inline: var(--pad); display: flex; align-items: center; gap: 1rem; }
.hd.stuck {
  background: rgba(251,248,243,.86);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 var(--hair-2), 0 10px 34px rgba(0,43,66,.06);
}
.lg { position: relative; flex: none; display: block; }
.lg img { height: 32px; width: auto; transition: opacity .35s var(--ez); }
.lg__l { position: absolute; inset: 0; opacity: 0; }
.hd.over:not(.stuck) .lg__d { opacity: 0; }
.hd.over:not(.stuck) .lg__l { opacity: 1; }

.nv { margin-left: auto; }
.nv__l { display: flex; align-items: center; gap: clamp(.9rem,.35rem + 1.25vw,2.1rem); }
.nv a {
  position: relative; display: block; padding: .55rem .15rem;
  font-size: .93rem; font-weight: 600; color: var(--tx-1);
  transition: color .3s var(--ez);
}
.nv a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ez-out);
}
.nv a:hover::after, .nv a[aria-current="page"]::after { transform: scaleX(1); }
.nv a:hover { color: var(--sand-txt); }
.nv a[aria-current="page"] { color: var(--sand-txt); }
.hd.over:not(.stuck) .nv a { color: rgba(255,255,255,.9); }
.hd.over:not(.stuck) .nv a:hover, .hd.over:not(.stuck) .nv a[aria-current="page"] { color: var(--sand); }
/* Menüpunkt, der auf eine andere Adresse führt: kleines Zeichen dahinter.
   Muss nach „.nv a" stehen — sonst gewinnt dort das display:block. */
.nv a.nv__ex { display: inline-flex; align-items: center; gap: .34em; white-space: nowrap; }
.nv a.nv__ex svg { opacity: .5; flex: none; transition: opacity .3s var(--ez), transform .3s var(--ez); }
.nv a.nv__ex:hover svg { opacity: .95; transform: translate(1px, -1px); }
.dw__a--ex svg { margin-left: auto; opacity: .45; flex: none; }

.hd__act { display: flex; align-items: center; gap: .6rem; margin-left: 1.4rem; }
.icb {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--hair); color: var(--tx-1);
  transition: background-color .3s var(--ez), border-color .3s var(--ez), color .3s var(--ez), transform .3s var(--ez);
}
.icb:hover { background: var(--sand); border-color: var(--sand); color: var(--night); transform: translateY(-2px); }
.hd.over:not(.stuck) .icb { border-color: rgba(255,255,255,.3); color: #fff; }
.hd.over:not(.stuck) .icb:hover { background: var(--sand); color: var(--night); border-color: var(--sand); }
.hd__act .b { min-height: 46px; padding: .7rem 1.35rem; font-size: .88rem; }

.brg { display: none; width: 48px; height: 48px; border-radius: 50%; position: relative; flex: none; border: 1.5px solid var(--hair); }
.brg i { position: absolute; left: 14px; width: 20px; height: 1.8px; border-radius: 2px; background: var(--tx-1); transition: transform .38s var(--ez), opacity .2s, background-color .3s; }
.brg i:nth-child(1) { top: 19px; } .brg i:nth-child(2) { top: 25px; } .brg i:nth-child(3) { top: 31px; }
.hd.over:not(.stuck) .brg { border-color: rgba(255,255,255,.3); }
.hd.over:not(.stuck) .brg i { background: #fff; }
.brg[aria-expanded="true"] i { background: var(--tx-1) !important; }
.brg[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.brg[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.brg[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) { .nv, .hd__act .b { display: none; } .brg { display: block; } .hd__act { margin-left: auto; } }

/* Drawer */
.dw { position: fixed; inset: 0; z-index: 480; overflow: hidden; visibility: hidden; opacity: 0; transition: opacity .35s var(--ez), visibility .35s; }
.dw.open { visibility: visible; opacity: 1; }
.dw__bd { position: absolute; inset: 0; background: rgba(0,43,66,.5); backdrop-filter: blur(4px); }
.dw__p {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(430px, 90vw);
  background: var(--paper); padding: calc(var(--head-h) + 1.4rem) var(--pad) 2rem;
  display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(100%); transition: transform .5s var(--ez-out);
}
.dw.open .dw__p { transform: none; }
.dw__a {
  display: flex; align-items: baseline; gap: .9rem; padding: 1.05rem 0;
  border-bottom: 1px solid var(--hair-2); font-family: var(--f-disp); font-size: 1.5rem;
  color: var(--tx-1); letter-spacing: -.02em;
  transition: color .3s var(--ez), padding-left .3s var(--ez);
}
.dw__a:hover { color: var(--sand); padding-left: .4rem; }
.dw__a em { font-family: var(--f-mono); font-size: .62rem; font-style: normal; color: var(--tx-3); letter-spacing: .16em; }
.dw__a[aria-current="page"] { color: var(--brand); }
.dw__f { margin-top: auto; padding-top: 2rem; display: grid; gap: .7rem; }

/* ------------------------------------------------ 07 · HERO -------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(178deg, #05203a 0%, #0d4a72 20%, #4a91b6 40%, #a9c6c8 52%, #edcd97 58%, #f7e0b6 66%, #f9e7c6 100%);
  padding-top: calc(var(--head-h) + 1.5rem);
}
.hero > .wrap-w { padding-bottom: clamp(1rem, .4rem + 1.6vw, 2rem); }
.hero__sun {
  position: absolute; left: 73%; top: 34%; width: min(21vw, 250px); aspect-ratio: 1; z-index: -8;
  border-radius: 50%;
  background: radial-gradient(circle, #fff1cf 0%, #ffe1a8 34%, rgba(255,225,168,.42) 52%, rgba(255,225,168,0) 72%);
  filter: blur(.4px);
  animation: sunPulse 9s var(--ez) infinite alternate;
}
@keyframes sunPulse { from { transform: scale(1); opacity: .92; } to { transform: scale(1.09); opacity: 1; } }
.hero__haze {
  position: absolute; inset: 40% 0 0 0; z-index: -7;
  background: linear-gradient(180deg, rgba(255,236,200,0) 0%, rgba(255,236,200,.34) 45%, rgba(255,236,200,0) 100%);
  pointer-events: none;
}
.hero__gulls { position: absolute; inset: 12% 0 auto 0; z-index: -6; pointer-events: none; }
.hero__gulls svg { position: absolute; color: rgba(0,43,66,.32); }
.hero__gulls svg:nth-child(1) { left: 8%;  top: 0;    animation: drift 26s linear infinite; }
.hero__gulls svg:nth-child(2) { left: 22%; top: 42px; animation: drift 34s linear infinite 3s; transform: scale(.7); }
.hero__gulls svg:nth-child(3) { left: 40%; top: 14px; animation: drift 30s linear infinite 8s; transform: scale(.85); }
@keyframes drift { from { transform: translateX(-6vw); } to { transform: translateX(78vw); } }

.hero__type { position: relative; z-index: 4; padding-bottom: clamp(.5rem, .2rem + 1vw, 2rem); }
.hero__type::before {
  content: ""; position: absolute; z-index: -1;
  inset: -2.8rem -3.5rem -2.2rem -3.5rem; border-radius: 2rem;
  background: radial-gradient(130% 118% at 10% 42%, rgba(0,43,66,.58) 0%, rgba(0,43,66,.40) 42%,
              rgba(0,43,66,.16) 68%, rgba(0,43,66,0) 88%);
  pointer-events: none;
}
.hero__kick {
  display: inline-flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem;
  font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .24em;
  text-transform: uppercase; color: rgba(255,255,255,.9);
}
.hero__kick i { display: block; width: 44px; height: 1px; background: currentColor; opacity: .6; }
.hero h1 {
  color: #fff; font-size: clamp(2.55rem, .85rem + 5.5vw, 6.3rem);
  line-height: .93; letter-spacing: -.045em;
  text-shadow: 0 4px 44px rgba(0,43,66,.34);
  max-width: 14ch;
}
.hero h1 .ln { display: block; overflow: hidden; }
.hero h1 .ln > span { display: block; transform: translateY(105%); animation: riseIn 1.15s var(--ez-out) forwards; }
.hero h1 .ln:nth-child(1) > span { animation-delay: .12s; }
.hero h1 .ln:nth-child(2) > span { animation-delay: .24s; }
.hero h1 .ln:nth-child(3) > span { animation-delay: .36s; }
@keyframes riseIn { to { transform: none; } }
.hero h1 em { font-style: italic; color: var(--sand); font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 120; }

.hero__sub {
  margin-top: 1.15rem; max-width: 42ch; color: rgba(255,255,255,.94);
  font-size: clamp(1.02rem,.96rem + .42vw,1.24rem);
  opacity: 0; animation: fadeUp .9s var(--ez-out) .62s forwards;
}
.hero .btns { margin-top: 1.4rem; opacity: 0; animation: fadeUp .9s var(--ez-out) .74s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Wasserebenen */
.hero__sea { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; z-index: -5; pointer-events: none; }
.hero__sea .lay {
  position: absolute; left: 0; bottom: 0; width: 200%; height: auto;
  will-change: transform;
}
.hero__sea .lay img { width: 100%; height: auto; }
/* Wasserkörper unterhalb jeder Wellenkante fortsetzen */
.hero__sea .lay::after {
  content: ""; position: absolute; top: calc(100% - 1px); left: 0; right: 0; height: 70vh;
  background: var(--c);
}
.hero__sea .lay--f::after { display: none; }
.hero__sea .lay--1 { --c: rgba(11,91,134,.55); bottom: 62%; animation: slideX 38s linear infinite; }
.hero__sea .lay--2 { --c: rgba(10,74,112,.80); bottom: 41%; animation: slideX 27s linear infinite reverse; }
.hero__sea .lay--3 { --c: rgba(7,58,88,.96); bottom: 20%; animation: slideX 20s linear infinite; }
.hero__sea .lay--f { bottom: 7%;  animation: slideX 15s linear infinite reverse; opacity: .85; }
@keyframes slideX { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.hero__fg { position: absolute; left: -2%; right: -2%; bottom: -1px; z-index: 5; pointer-events: none; }
.hero__fg img { width: 104%; height: clamp(96px, 13vh, 172px); object-fit: cover; object-position: 50% 22%; }

.hero__scroll {
  position: absolute; right: var(--pad); bottom: 34%; z-index: 6;
  writing-mode: vertical-rl; font-family: var(--f-mono); font-size: var(--fs-mono);
  letter-spacing: .24em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 6px rgba(0,43,66,.75);
  display: flex; align-items: center; gap: .9rem;
}
.hero__scroll::after { content: ""; width: 1px; height: 60px; background: linear-gradient(rgba(255,255,255,.7), transparent); animation: scrollCue 2.4s var(--ez) infinite; }
@keyframes scrollCue { 0%,100% { transform: scaleY(.35); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }
@media (max-width: 900px) { .hero__scroll { display: none; } }

/* Buchungskonsole */
.cons {
  position: relative; z-index: 7; max-width: 1020px; margin-top: clamp(1.3rem, .7rem + 1.6vw, 2.2rem);
  opacity: 0; animation: fadeUp .9s var(--ez-out) .86s forwards;
}
.cons__tabs { display: flex; gap: .3rem; }
.cons__tab {
  font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .18em; text-transform: uppercase;
  padding: .75rem 1.35rem; border-radius: var(--r2) var(--r2) 0 0;
  background: rgba(0,43,66,.46); color: #fff;
  backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.28); border-bottom: 0;
  transition: background-color .3s var(--ez), color .3s var(--ez);
}
.cons__tab[aria-selected="true"] { background: rgba(255,255,255,.97); color: var(--tx-1); border-color: transparent; }
.cons__tab:hover:not([aria-selected="true"]) { background: rgba(0,43,66,.62); }
/* Ohne Ferienwohnungen bleibt nur ein Formular — dann steht dort statt
   zweier Reiter eine einzelne Beschriftung. */
.cons__solo {
  display: inline-block;
  font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .18em; text-transform: uppercase;
  padding: .75rem 1.35rem; border-radius: var(--r2) var(--r2) 0 0;
  background: rgba(255,255,255,.97); color: var(--tx-1);
}
.cons__body {
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(18px);
  border-radius: 0 var(--r3) var(--r3) var(--r3);
  box-shadow: var(--e3); padding: .55rem;
}
.cons__panel[hidden] { display: none; }
.cons__row { display: grid; grid-template-columns: 1.25fr 1fr 1fr .95fr auto; gap: .2rem; }
.fld {
  display: flex; flex-direction: column; gap: .15rem; min-width: 0;
  padding: .8rem 1.1rem; border-radius: var(--r2);
  transition: background-color .25s var(--ez);
}
.fld + .fld { box-shadow: inset 1px 0 0 var(--hair-2); }
.fld:hover, .fld:focus-within { background: var(--paper-2); }
.fld label { font-family: var(--f-mono); font-size: .655rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tx-3); }
.fld input, .fld select {
  border: 0; background: transparent; padding: 0; width: 100%; min-height: 28px;
  font-weight: 700; color: var(--tx-1); font-size: .96rem; text-overflow: ellipsis;
}
.fld input:focus, .fld select:focus { outline: none; }
.cons .b { align-self: stretch; border-radius: var(--r2); padding-inline: 1.7rem; }
@media (max-width: 980px) {
  .cons__row { grid-template-columns: 1fr 1fr; }
  .fld + .fld { box-shadow: none; }
  .cons .b { grid-column: 1 / -1; margin-top: .25rem; }
}
@media (max-width: 480px) { .cons__row { grid-template-columns: 1fr; } .cons__tab { flex: 1; text-align: center; padding-inline: .5rem; } }

/* Laufband */
.mq { position: relative; z-index: 6; overflow: hidden; padding-block: .95rem; margin-top: clamp(1rem,.6rem + 1.2vw,1.8rem); border-top: 1px solid rgba(255,255,255,.22); }
.mq__t { display: flex; gap: 2.6rem; width: max-content; animation: mqRun 34s linear infinite; }
.mq__t span {
  font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.78); display: inline-flex; align-items: center; gap: 2.6rem; white-space: nowrap;
}
.mq__t span::after { content: "◆"; font-size: .5rem; opacity: .55; }
@keyframes mqRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mq--dark { border-color: var(--hair-d); }
.hero .mq { background: rgba(0,43,66,.58); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid rgba(255,255,255,.15); }
.hero .mq__t span { color: rgba(255,255,255,.86); }
.mq--light { border-block: 1px solid var(--hair); }
.mq--light .mq__t span { color: var(--tx-3); }

@media (max-width: 720px) { .hero { min-height: auto; padding-bottom: 2.5rem; } .hero__sea { height: 55%; } }

/* ------------------------------------------------ 08 · Seiten-Hero ------- */
.phero {
  position: relative; isolation: isolate; overflow: hidden; background: var(--night);
  padding-top: calc(var(--head-h) + clamp(3.5rem, 2rem + 6vw, 7.5rem));
  padding-bottom: clamp(3rem, 2rem + 4.5vw, 6.5rem);
  color: var(--dx-2);
}
.phero__m { position: absolute; inset: 0; z-index: -2; }
.phero__m img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.phero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(175deg, rgba(0,43,66,.86) 0%, rgba(0,43,66,.62) 48%, rgba(0,43,66,.90) 100%);
}
.phero h1 { color: #fff; max-width: 16ch; }
.phero p { color: var(--dx-2); max-width: 60ch; margin-top: 1.2rem; font-size: var(--fs-lead); }
.phero .lab { color: var(--sand); margin-bottom: 1.2rem; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.4rem; font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dx-3); }
.crumb a { color: rgba(255,255,255,.7); min-height: 24px; display: inline-flex; align-items: center; }
.crumb a { color: #fff; }
.crumb a:hover { color: var(--sand); }
.crumb--light { color: var(--tx-3); }
.crumb--light a { color: var(--tx-2); }
.crumb--light a:hover { color: var(--sand-txt); }

/* Wellen-Trenner */
.divide { position: relative; line-height: 0; }
.divide svg { width: 100%; height: clamp(38px, 5vw, 78px); display: block; }

/* ------------------------------------------------ 09 · Sofortsuche ------- */
.sr { position: fixed; inset: 0; z-index: 900; visibility: hidden; opacity: 0; transition: opacity .3s var(--ez), visibility .3s; }
.sr.open { visibility: visible; opacity: 1; }
.sr__bd { position: absolute; inset: 0; background: rgba(0,43,66,.62); backdrop-filter: blur(8px); }
.sr__p {
  position: relative; width: min(720px, 92vw); margin: clamp(4rem,10vh,9rem) auto 0;
  background: var(--paper); border-radius: var(--r3); box-shadow: var(--e3); overflow: hidden;
  transform: translateY(-18px) scale(.985); transition: transform .38s var(--ez-out);
  max-height: min(70vh, 640px); display: flex; flex-direction: column;
}
.sr.open .sr__p { transform: none; }
.sr__top { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--hair-2); }
.sr__top svg { color: var(--tx-3); flex: none; }
.sr__top input { flex: 1; border: 0; background: transparent; font-size: 1.12rem; font-weight: 600; color: var(--tx-1); min-height: 34px; }
.sr__top input:focus { outline: none; }
.sr__top input::placeholder { color: var(--tx-3); font-weight: 500; }
.sr__esc { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; border: 1px solid var(--hair); border-radius: 5px; padding: .25rem .45rem; color: var(--tx-3); }
.sr__res { overflow-y: auto; padding: .55rem; }
.sr__grp { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--tx-3); padding: .85rem .85rem .45rem; }
.sr__i {
  display: flex; align-items: center; gap: .95rem; padding: .7rem .85rem; border-radius: var(--r2);
  transition: background-color .18s var(--ez);
}
.sr__i:hover, .sr__i.on { background: var(--paper-3); }
.sr__i img { width: 56px; height: 42px; object-fit: cover; border-radius: 7px; flex: none; }
.sr__ic { width: 38px; height: 38px; border-radius: 9px; background: var(--paper-3); display: grid; place-items: center; color: var(--brand-txt); flex: none; }
.sr__i strong { display: block; color: var(--tx-1); font-size: .96rem; font-weight: 700; }
.sr__i span { font-size: var(--fs-xs); color: var(--tx-3); }
.sr__i em { margin-left: auto; font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--tx-3); font-style: normal; letter-spacing: .1em; }
.sr__none { padding: 2.4rem 1rem; text-align: center; color: var(--tx-3); font-size: .95rem; }
.sr__foot { border-top: 1px solid var(--hair-2); padding: .7rem 1.3rem; display: flex; gap: 1.4rem; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
@media (max-width: 640px) { .sr__foot { display: none; } .sr__p { margin-top: 4.5rem; max-height: 78vh; } }

/* ------------------------------------------------ 10 · Objektkarten ------ */
.ocard { position: relative; display: flex; flex-direction: column; }
.ocard__m {
  position: relative; overflow: hidden; border-radius: var(--r3);
  aspect-ratio: 4 / 3.1; background: var(--paper-3);
}
.ocard__m img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ez-out); }
.ocard:hover .ocard__m img { transform: scale(1.07); }
.ocard__m::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(0,43,66,.62) 0%, rgba(0,43,66,.12) 26%, rgba(0,43,66,.06) 46%,
              rgba(0,43,66,.55) 72%, rgba(0,43,66,.86) 100%);
}
.ocard__no {
  position: absolute; top: .95rem; left: 1rem; z-index: 2;
  font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .2em; color: #fff;
  background: rgba(0,43,66,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: var(--rp); padding: .22rem .6rem .22rem .68rem;
}
.ocard__tag {
  position: absolute; top: .95rem; right: 1rem; z-index: 2;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--night); padding: .4rem .8rem; border-radius: var(--rp);
}
.ocard__tag--sand { background: var(--sand); }
.ocard__bot { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.05rem; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.ocard__loc { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .2em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px rgba(0,43,66,.5); }
.ocard__pr { color: #fff; font-family: var(--f-disp); font-size: 1.3rem; letter-spacing: -.02em; text-align: right; line-height: 1.1; text-shadow: 0 1px 4px rgba(0,43,66,.55); }
.ocard__pr b { font-weight: 500; }
.ocard__pr small { display: block; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; opacity: .92; }
.ocard__b { padding: 1.15rem .2rem 0; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.ocard h3 { font-size: 1.42rem; }
.ocard h3 a { transition: color .3s var(--ez); }
.ocard:hover h3 a { color: var(--sand-txt); }
.ocard__meta { display: flex; flex-wrap: wrap; gap: .3rem .95rem; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.ocard__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.ocard__f { margin-top: auto; padding-top: .9rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; border-top: 1px solid var(--hair-2); }
.ocard__lnk::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--r3); }

.pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.pill {
  font-size: .78rem; font-weight: 600; color: var(--tx-2);
  border: 1px solid var(--hair); border-radius: var(--rp); padding: .26rem .7rem;
  background: var(--white);
}

/* ------------------------------------------------ 11 · Filter ------------ */
.fbar { position: sticky; top: var(--head-h); z-index: 60; background: var(--paper); border-bottom: 1px solid var(--hair-2); padding-block: 1rem; margin-bottom: clamp(1.8rem,1rem + 2.5vw,3rem); }
.fbar__in { display: flex; flex-wrap: wrap; gap: .9rem 1.2rem; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  min-height: 44px; padding: .55rem 1.1rem; border-radius: var(--rp);
  border: 1.5px solid var(--hair); background: var(--white);
  font-size: .87rem; font-weight: 700; color: var(--tx-2);
  transition: all .25s var(--ez); white-space: nowrap;
}
.chip:hover { border-color: var(--sand-dim); color: var(--sand-txt); background: #fffaf0; }
.chip[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: #fff; }
.chip small { font-family: var(--f-mono); font-size: .62rem; opacity: .6; margin-left: .35rem; }

.fgrp { display: flex; align-items: center; gap: .6rem; }
.fgrp > label { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--tx-3); }
.sel {
  min-height: 44px; padding: .5rem 2.1rem .5rem .95rem; border-radius: var(--rp);
  border: 1.5px solid var(--hair); background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2345606f' stroke-width='1.8'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right .9rem center;
  font-size: .87rem; font-weight: 700; color: var(--tx-1); appearance: none;
}
.rng { display: flex; align-items: center; gap: .75rem; }
.rng input[type="range"] { width: 130px; accent-color: var(--brand); }
.rng output { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; color: var(--tx-1); font-weight: 500; min-width: 74px; }
.fbar__r { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.fcount { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--tx-3); }
.freset { font-size: .82rem; font-weight: 700; color: var(--brand-txt); text-decoration: underline; text-underline-offset: 3px; min-height: 26px; }
.empty { grid-column: 1 / -1; text-align: center; padding: 4rem 1rem; }
.empty h3 { margin-bottom: .6rem; }
@media (max-width: 860px) { .fbar { position: static; } .fbar__r { margin-left: 0; width: 100%; justify-content: space-between; } }

/* ------------------------------------------------ 12 · Objekt-Detail ----- */
.gal { display: grid; gap: .6rem; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.gal a { position: relative; overflow: hidden; border-radius: var(--r2); display: block; background: var(--paper-3); }
.gal a:first-child { grid-row: 1 / 3; border-radius: var(--r3); }
.gal img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform .9s var(--ez-out); }
.gal a:first-child img { aspect-ratio: 4/3.4; }
.gal a:hover img { transform: scale(1.06); }
.gal__more {
  position: absolute; right: .8rem; bottom: .8rem; background: rgba(255,255,255,.94);
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .45rem .8rem; border-radius: var(--rp); color: var(--night);
}
@media (max-width: 860px) { .gal { grid-template-columns: 1fr 1fr; } .gal a:first-child { grid-column: 1 / -1; grid-row: auto; } }

/* Kopf der Objektseite */
.dlt { padding-top: calc(var(--head-h) + clamp(1.6rem,1rem + 2.4vw,3rem)); padding-bottom: 1.6rem; }

/* Zweispaltig: links die Beschreibung, rechts die Buchungsbox über die volle Höhe.
   Die Reihenfolge im Quelltext ist die Handy-Reihenfolge; hier wird sie fürs
   große Fenster wieder umsortiert. */
.dl {
  display: grid; align-items: start;
  grid-template-columns: minmax(0,1.55fr) minmax(320px,.95fr);
  column-gap: clamp(2rem,1rem + 4vw,4.5rem);
  row-gap: clamp(2.2rem,1.4rem + 2vw,3.4rem);
}
.dl > * { min-width: 0; grid-column: 1; }
.dl > .bk { grid-column: 2; grid-row: 1 / span 30; }
.dl__facts     { order: 1; }
.dl__blk--woh  { order: 2; }
.dl__blk--aus  { order: 3; }
.dl__blk--avail { order: 4; }
.dl__blk--lage { order: 5; }
.dl__blk--info { order: 6; }

@media (max-width: 1000px) {
  .dl { grid-template-columns: minmax(0, 1fr); row-gap: clamp(1.8rem,1.2rem + 1.6vw,2.6rem); }
  /* Handy: Ausstattung zuerst, danach Zusatzleistungen und Buchung */
  .dl > .bk { grid-column: 1; grid-row: auto; order: 3; }
  .dl__facts     { order: 1; }
  .dl__blk--aus  { order: 2; }
  .dl__blk--avail { order: 4; }
  .dl__blk--woh  { order: 5; }
  .dl__blk--lage { order: 6; }
  .dl__blk--info { order: 7; }
}

.dl__facts { display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem; min-width: 0; padding-block: 1.5rem; border-block: 1px solid var(--hair); }
.fact { display: flex; align-items: center; gap: .7rem; }
.fact svg { color: var(--brand); flex: none; }
.fact b { display: block; color: var(--tx-1); font-size: .98rem; line-height: 1.3; }
.fact span { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }

.amen { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%,220px),1fr)); }
.amen h3 { font-family: var(--f-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-txt); margin-bottom: .85rem; }
.amen ul { display: grid; gap: .5rem; }
.amen li { display: flex; gap: .6rem; align-items: flex-start; font-size: .94rem; }
.amen li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--sand-dim); margin-top: .55rem; }

/* Buchungsbox */
.bk { position: sticky; top: calc(var(--head-h) + 20px); }
@media (max-width: 1000px) { .bk { position: static; top: auto; } }
.bk__c { background: var(--white); border: 1px solid var(--hair); border-radius: var(--r3); box-shadow: var(--e2); overflow: hidden; }
.bk__h { padding: 1.4rem 1.5rem 1.1rem; border-bottom: 1px solid var(--hair-2); display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.bk__h b { font-family: var(--f-disp); font-size: 1.9rem; color: var(--tx-1); font-weight: 500; letter-spacing: -.03em; }
.bk__h span { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
.bk__b { padding: 1.2rem 1.5rem 1rem; display: grid; gap: 1.1rem; }
.bk__f { padding: 1rem 1.5rem 1.4rem; display: grid; gap: .8rem;
  border-top: 1px solid var(--hair-2); background: var(--white); }
.bk__f .sum { border-top: 0; padding-top: 0; }

/* Am Rechner darf der Kasten nie höher werden als der Bildschirm: Preis oben,
   Summe und Knopf unten — beides immer sichtbar. Nur die Mitte scrollt. */
@media (min-width: 1001px) and (min-height: 620px) {
  .bk__c { display: flex; flex-direction: column;
    max-height: calc(100vh - var(--head-h) - 2.6rem); }
  .bk__h, .bk__f { flex: none; }
  /* Als Raster würden die Zeilen bei knapper Höhe zusammengedrückt — deshalb
     hier eine Spalte, in der nichts schrumpft und stattdessen gescrollt wird. */
  .bk__b { display: flex; flex-direction: column; gap: 1.1rem;
    flex: 1 1 auto; min-height: 4.5rem; overflow-y: auto; scrollbar-gutter: stable; }
  .bk__b > * { flex: none; }
  /* Weicher Verlauf über dem Fuß: „hier geht es noch weiter“ */
  .bk__f { position: relative; }
  .bk__c.has-more .bk__f::before {
    content: ""; position: absolute; left: 1px; right: 1px; bottom: 100%; height: 26px;
    pointer-events: none; background: linear-gradient(to top, var(--white), rgba(255,255,255,0));
  }
  .bk__b::-webkit-scrollbar { width: 8px; }
  .bk__b::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 99px; }
  .bk__b::-webkit-scrollbar-thumb:hover { background: var(--sand-dim); }
  .bk__b { scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }
}
.bk__dates { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--hair); border-radius: var(--r2); overflow: hidden; }
.bk__dates > div { padding: .7rem .9rem; }
.bk__dates > div + div { border-left: 1.5px solid var(--hair); }
.bk__dates label { display: block; font-family: var(--f-mono); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tx-3); }
.bk__dates input { border: 0; background: transparent; width: 100%; font-weight: 700; color: var(--tx-1); font-size: .92rem; min-height: 28px; }
.bk__dates input:focus { outline: none; }

.stp { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1.5px solid var(--hair); border-radius: var(--r2); padding: .6rem .9rem; }
.stp__l b { display: block; color: var(--tx-1); font-size: .93rem; }
.stp__l span { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); }
.stp__c { display: flex; align-items: center; gap: .55rem; }
.stp__c button {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--hair);
  display: grid; place-items: center; color: var(--tx-1);
  transition: background-color .22s var(--ez), border-color .22s var(--ez), color .22s var(--ez);
}
.stp__c button:hover:not(:disabled) { background: var(--sand); border-color: var(--sand); color: var(--night); }
.stp__c button:disabled { opacity: .32; cursor: not-allowed; }
.stp__c output { min-width: 22px; text-align: center; font-weight: 800; color: var(--tx-1); font-variant-numeric: tabular-nums; }

.xtra { display: grid; gap: .5rem; }
.xtra__t { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--tx-3); }
.xopt {
  display: flex; align-items: flex-start; gap: .7rem; padding: .6rem .8rem;
  border: 1.5px solid var(--hair); border-radius: var(--r2); cursor: pointer;
  transition: border-color .25s var(--ez), background-color .25s var(--ez);
}
.xopt:hover { border-color: var(--sand-dim); background: rgba(244,217,160,.14); }
.xopt:has(input:checked) { border-color: var(--brand); background: rgba(0,119,182,.06); }
.xopt input { width: 20px; height: 20px; flex: none; margin-top: .18rem; accent-color: var(--brand); }
.xopt__x { flex: 1; min-width: 0; }
.xopt__x b { display: block; color: var(--tx-1); font-size: .91rem; }
.xopt__x span { font-size: .765rem; color: var(--tx-3); display: block; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xopt__p { font-family: var(--f-mono); font-size: .76rem; color: var(--tx-1); font-weight: 500; white-space: nowrap; text-align: right; }
/* „pro Person“, „pro Nacht“ unter dem Preis — am Handy nie unter 11,5 px. */
.xopt__per { opacity: .55; font-size: .66rem; }

.sum { border-top: 1px solid var(--hair-2); padding-top: 1rem; display: grid; gap: .5rem; }
.sum__r { display: flex; justify-content: space-between; gap: .8rem; font-size: .89rem; flex-wrap: wrap; }
.sum__r span:first-child { min-width: 0; overflow-wrap: anywhere; }
.sum__r span:first-child { color: var(--tx-2); }
.sum__r span:last-child { font-family: var(--f-mono); color: var(--tx-1); font-variant-numeric: tabular-nums; }
.sum__r--total { border-top: 1px solid var(--hair); padding-top: .75rem; margin-top: .3rem; align-items: baseline; }
.sum__r--total span:first-child { font-weight: 800; color: var(--tx-1); font-size: 1rem; }
.sum__r--total span:last-child { font-family: var(--f-disp); font-size: 1.65rem; font-weight: 500; letter-spacing: -.03em; }
.sum__note { font-size: .74rem; color: var(--tx-3); line-height: 1.5; }
.bk__warn { font-size: .8rem; color: var(--warn); background: var(--warn-bg); border-radius: var(--r1); padding: .55rem .7rem; }
.bk__warn[hidden] { display: none; }

/* ------------------------------------------------ 13 · Pain-Sektion ------ */
.pn { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(2rem,1rem + 4vw,5rem); align-items: start; }
.pn__aside { position: sticky; top: calc(var(--head-h) + 40px); }
@media (max-width: 940px) {
  .pn { grid-template-columns: 1fr; }
  .pn__aside { position: static; top: auto; }   /* nicht mitscrollen lassen */
}
.pn__big { font-family: var(--f-disp); font-size: clamp(5rem,3rem + 9vw,11rem); line-height: .82; color: var(--sand); letter-spacing: -.06em; font-weight: 500; }
.pn__list { display: grid; }
.pn__i { border-top: 1px solid var(--hair-d); }
.pn__i:last-child { border-bottom: 1px solid var(--hair-d); }
.pn__q {
  width: 100%; text-align: left; display: flex; align-items: flex-start; gap: 1.2rem;
  padding: 1.5rem 0; color: #fff; transition: color .3s var(--ez);
}
.pn__q em { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .18em; font-style: normal; color: var(--dx-3); padding-top: .45rem; flex: none; }
.pn__q h3 { font-size: clamp(1.15rem,1rem + .75vw,1.6rem); flex: 1; color: #fff; transition: color .3s var(--ez); }
.pn__q i {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hair-d);
  display: grid; place-items: center; margin-top: .1rem;
  transition: background-color .3s var(--ez), transform .4s var(--ez), border-color .3s var(--ez);
}
.pn__q:hover h3 { color: var(--sand); }
.pn__q[aria-expanded="true"] h3 { color: var(--sand); }
.pn__q[aria-expanded="true"] i { background: var(--sand); border-color: var(--sand); color: var(--night); transform: rotate(135deg); }
.pn__a { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ez-out); }
.pn__a[data-open="true"] { grid-template-rows: 1fr; }
.pn__a > div { overflow: hidden; }
.pn__a p { padding: 0 0 1.6rem 3.1rem; color: var(--dx-2); max-width: 62ch; }
.pn__a .tagline { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .7rem 3.1rem; font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--sand); }
@media (max-width: 560px) { .pn__a p, .pn__a .tagline { padding-left: 0; margin-left: 0; } }

/* ------------------------------------------------ 14 · Feature/Steps ----- */
.ft { padding: 1.9rem 1.7rem; border: 1px solid var(--hair); border-radius: var(--r3); background: var(--white); height: 100%; transition: transform var(--t2) var(--ez), box-shadow var(--t2) var(--ez); }
.ft:hover { transform: translateY(-6px); box-shadow: var(--e2); }
.ft__i { width: 52px; height: 52px; border-radius: var(--r2); display: grid; place-items: center; color: var(--brand); background: linear-gradient(145deg, rgba(0,119,182,.1), rgba(244,217,160,.28)); margin-bottom: 1.2rem; }
.ft h3 { font-size: 1.24rem; margin-bottom: .5rem; }
.ft p { font-size: .95rem; }
.bg-night .ft, .bg-deep .ft { background: rgba(255,255,255,.045); border-color: var(--hair-d); }
.bg-night .ft:hover, .bg-deep .ft:hover { background: rgba(255,255,255,.07); }
.bg-night .ft__i, .bg-deep .ft__i { background: rgba(244,217,160,.14); color: var(--sand); }
.bg-night .ft p, .bg-deep .ft p { color: var(--dx-2); }

.steps { counter-reset: s; display: grid; gap: clamp(1.6rem,1rem + 2vw,2.6rem); grid-template-columns: repeat(auto-fit, minmax(min(100%,225px),1fr)); }
.step { position: relative; padding-top: 2.6rem; border-top: 1px solid var(--hair); }
.bg-night .step, .bg-deep .step { border-color: var(--hair-d); }
.step::before {
  counter-increment: s; content: counter(s,decimal-leading-zero);
  position: absolute; top: 1rem; left: 0;
  font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .2em; color: var(--brand-txt);
}
.bg-night .step::before, .bg-deep .step::before { color: var(--sand); }
.step h3 { font-size: 1.22rem; margin-bottom: .55rem; }
.step p { font-size: .95rem; }
.bg-night .step p, .bg-deep .step p { color: var(--dx-2); }

/* Statistik */
.stat { border-top: 1px solid var(--hair); padding-top: 1.2rem; }
.bg-night .stat, .bg-deep .stat { border-color: var(--hair-d); }
.stat__n { font-family: var(--f-disp); font-size: clamp(2.6rem,1.6rem + 3.4vw,4.4rem); line-height: .95; letter-spacing: -.045em; color: var(--tx-1); font-weight: 500; font-variant-numeric: tabular-nums; }
.bg-night .stat__n, .bg-deep .stat__n { color: var(--sand); }
.stat__l { margin-top: .6rem; font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--tx-3); }
.bg-night .stat__l, .bg-deep .stat__l { color: var(--dx-3); }

/* Split */
.split { display: grid; gap: clamp(2rem,1rem + 4vw,5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%,360px),1fr)); align-items: center; }
.split--rev > *:first-child { order: 2; }
@media (max-width: 820px) { .split--rev > *:first-child { order: 0; } }
.frame { position: relative; }
.frame img { width: 100%; border-radius: var(--r4); aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--e3); }
.frame::before { content: ""; position: absolute; inset: auto -18px -18px auto; width: 52%; height: 52%; border-radius: var(--r4); background: var(--sand); z-index: -1; }
.frame--alt::before { background: rgba(0,119,182,.16); inset: -18px auto auto -18px; }
.fnote {
  position: absolute; left: -24px; bottom: -24px; background: var(--white);
  border-radius: var(--r3); box-shadow: var(--e3); padding: 1.05rem 1.25rem;
  display: flex; align-items: center; gap: .85rem; max-width: 265px;
}
.fnote i { width: 42px; height: 42px; border-radius: var(--r2); background: var(--good-bg); color: var(--good); display: grid; place-items: center; flex: none; }
.fnote b { display: block; color: var(--tx-1); font-size: .93rem; }
.fnote span { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); }
@media (max-width: 680px) { .fnote { position: static; margin-top: 1rem; max-width: none; } .frame::before { display: none; } }

.chk { display: grid; gap: .75rem; }
.chk li { display: flex; gap: .8rem; align-items: flex-start; font-size: .97rem; }
.chk li::before {
  content: ""; flex: none; width: 21px; height: 21px; border-radius: 50%; margin-top: .28rem;
  background: rgba(0,119,182,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230077b6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.bg-night .chk li, .bg-deep .chk li { color: var(--dx-2); }
.bg-night .chk li::before, .bg-deep .chk li::before {
  background: rgba(244,217,160,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4d9a0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Zitate */
.qt { border-top: 1px solid var(--hair); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; height: 100%; }
.bg-night .qt, .bg-deep .qt { border-color: var(--hair-d); }
.qt__s { display: flex; gap: .15rem; color: var(--gold-txt); }
.bg-night .qt__s, .bg-deep .qt__s { color: var(--sand); }
.qt p { font-family: var(--f-disp); font-size: 1.16rem; line-height: 1.45; color: var(--tx-1); letter-spacing: -.015em; }
.bg-night .qt p, .bg-deep .qt p { color: #fff; }
.qt__a { margin-top: auto; display: flex; align-items: center; gap: .8rem; }
.qt__av { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(140deg, var(--brand-dim), var(--brand)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .88rem; flex: none; }
.qt__a b { display: block; color: var(--tx-1); font-size: .92rem; }
.bg-night .qt__a b, .bg-deep .qt__a b { color: #fff; }
.qt__a span:not(.qt__av) { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); }
.bg-night .qt__a span:not(.qt__av), .bg-deep .qt__a span:not(.qt__av) { color: var(--dx-3); }

/* Pakete */
.plan { background: var(--white); border: 1px solid var(--hair); border-radius: var(--r3); padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: 1.05rem; height: 100%; position: relative; transition: transform var(--t2) var(--ez), box-shadow var(--t2) var(--ez); }
.plan:hover { transform: translateY(-6px); box-shadow: var(--e2); }
.plan--hot { border-color: var(--night); box-shadow: var(--e2); }
.plan--hot::before { content: "Beliebteste Wahl"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--night); color: #fff; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; padding: .32rem .9rem; border-radius: var(--rp); white-space: nowrap; }
.plan__p { font-family: var(--f-disp); font-size: 2.2rem; color: var(--tx-1); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.plan__p small { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); display: block; margin-top: .4rem; }
.plan .b { margin-top: auto; }

/* FAQ */
.faq { display: grid; }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-of-type { border-bottom: 1px solid var(--hair); }
.faq summary { cursor: pointer; list-style: none; padding: 1.35rem 3.2rem 1.35rem 0; position: relative; font-family: var(--f-disp); font-size: 1.2rem; color: var(--tx-1); letter-spacing: -.02em; transition: color .3s var(--ez); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--sand-txt); }
.faq summary::after {
  content: ""; position: absolute; right: .2rem; top: 50%; width: 30px; height: 30px; transform: translateY(-50%);
  border: 1px solid var(--hair); border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1c27' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 12px no-repeat;
  transition: transform .4s var(--ez), background-color .3s var(--ez);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(135deg); }
.faq__a { padding: 0 3rem 1.5rem 0; font-size: .98rem; max-width: 70ch; }

/* Formular */
.form { display: grid; gap: 1.05rem; }
.form__row { display: grid; gap: 1.05rem; grid-template-columns: repeat(auto-fit, minmax(min(100%,210px),1fr)); }
.fi { display: grid; gap: .4rem; }
.fi label { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--tx-3); }
.fi label .rq { color: var(--warn); }
.fi input, .fi select, .fi textarea {
  border: 1.5px solid var(--hair); border-radius: var(--r2); padding: .85rem 1rem; background: var(--white);
  width: 100%; min-height: 50px; transition: border-color .25s var(--ez), box-shadow .25s var(--ez);
}
.fi textarea { min-height: 145px; resize: vertical; }
.fi input:focus, .fi select:focus, .fi textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0,119,182,.1); }
.cbx { display: flex; gap: .75rem; align-items: flex-start; font-size: .89rem; }
.cbx input { width: 20px; height: 20px; flex: none; margin-top: .2rem; accent-color: var(--brand); }
.fnote-s { font-size: .78rem; color: var(--tx-3); }
.fstat { display: none; padding: 1rem 1.2rem; border-radius: var(--r2); background: var(--good-bg); color: var(--good); font-weight: 700; font-size: .94rem; }
.fstat.on { display: block; }
.fcard { background: var(--white); border: 1px solid var(--hair); border-radius: var(--r4); padding: clamp(1.5rem,1rem + 2vw,2.8rem); box-shadow: var(--e2); }

.ctile { display: flex; gap: 1rem; align-items: flex-start; padding: 1.35rem; border: 1px solid var(--hair); border-radius: var(--r3); background: var(--white); transition: transform .3s var(--ez), box-shadow .3s var(--ez), border-color .3s var(--ez); }
.ctile:hover { transform: translateY(-3px); box-shadow: var(--e2); border-color: transparent; }
.ctile i { width: 46px; height: 46px; border-radius: var(--r2); background: rgba(0,119,182,.09); color: var(--brand); display: grid; place-items: center; flex: none; }
.ctile b { display: block; color: var(--tx-1); font-size: .95rem; }
.ctile span { font-size: .85rem; }

/* Abschluss-CTA */
.fcta { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r5); padding: clamp(2.4rem,1.4rem + 3.6vw,4.8rem); background: linear-gradient(140deg, var(--night) 0%, var(--deep) 62%, var(--brand) 130%); color: var(--dx-2); }
.fcta::before { content: ""; position: absolute; z-index: -1; inset: auto -8% -70% auto; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(244,217,160,.32), transparent 68%); }
.fcta h2 { color: #fff; max-width: 17ch; }
.fcta p { color: var(--dx-2); max-width: 52ch; margin-top: 1rem; font-size: var(--fs-lead); }
.fcta__in { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px),1fr)); align-items: center; }

/* Footer */
.ft-w { background: var(--night); color: var(--dx-2); padding-top: clamp(3.5rem,2rem + 4vw,6rem); position: relative; }
.ft-w__g { display: grid; gap: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%,175px),1fr)); padding-bottom: 3.2rem; }
@media (min-width: 1040px) { .ft-w__g { grid-template-columns: 1.8fr repeat(4, minmax(0,1fr)); } }
.ft-w img.lgf { height: 32px; margin-bottom: 1.2rem; }
.ft-w h2 { font-family: var(--f-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sand); margin-bottom: 1.1rem; }
.ft-w ul { display: grid; gap: .3rem; }
.ft-w li, .ft-w li > a { display: inline-flex; align-items: center; min-height: 27px; }
.ft-w a { color: var(--dx-2); font-size: .93rem; transition: color .25s var(--ez); }
.ft-w a:hover { color: var(--sand); }
.ft-w__about { font-size: .93rem; max-width: 34ch; }
.socs { display: flex; gap: .55rem; margin-top: 1.4rem; }
.socs a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hair-d); color: #fff; transition: background-color .3s var(--ez), transform .3s var(--ez), border-color .3s var(--ez); }
.socs a:hover { background: var(--sand); color: var(--night); border-color: var(--sand); transform: translateY(-3px); }
.ft-w__b { border-top: 1px solid var(--hair-d2); padding-block: 1.4rem; display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; align-items: center; justify-content: space-between; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }
.ft-w__b ul { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.ft-w__mark { font-family: var(--f-disp); font-size: clamp(3.4rem,3rem + 7vw,10rem); line-height: .85; letter-spacing: -.05em; color: rgba(255,255,255,.055); padding-bottom: .1em; user-select: none; white-space: nowrap; overflow: hidden; }

/* Mobile CTA */
.mcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; display: none; gap: .55rem;
  padding: .65rem .75rem calc(.65rem + env(safe-area-inset-bottom));
  background: rgba(251,248,243,.94); backdrop-filter: blur(16px);
  border-top: 1px solid var(--hair-2); box-shadow: 0 -8px 28px rgba(0,43,66,.09);
  transform: translateY(115%); transition: transform .45s var(--ez-out);
}
.mcta.on { transform: none; }
.mcta .b { flex: 1; min-height: 48px; padding-inline: .7rem; font-size: .88rem; box-shadow: none; }
@media (max-width: 820px) {
  .mcta { display: flex; }
  .ft-w__b { padding-bottom: 5.2rem; }
  .hero__sun { left: auto; right: -8%; top: 15%; width: min(48vw, 230px); }
  .hero__scroll { display: none; }
}

/* Prosa */
.prose h2 { font-size: 1.55rem; margin-top: 2.8rem; margin-bottom: .8rem; }
.prose h3 { font-size: 1.15rem; margin-top: 1.9rem; margin-bottom: .5rem; }
.prose p, .prose ul { margin-bottom: 1rem; }
.prose ul { list-style: disc; padding-left: 1.3rem; }
.prose li { margin-bottom: .35rem; }
.prose a { color: var(--brand-txt); text-decoration: underline; text-underline-offset: 3px; }
.notice { background: var(--sand-lit); border: 1px solid var(--sand); border-radius: var(--r2); padding: 1rem 1.2rem; font-size: .9rem; color: var(--tx-1); }

/* Reveal */
.rv { opacity: 0; transform: translateY(30px); transition: opacity .85s var(--ez-out), transform .85s var(--ez-out); }
.rv.in { opacity: 1; transform: none; }
.rv[data-d="1"] { transition-delay: .09s; } .rv[data-d="2"] { transition-delay: .18s; }
.rv[data-d="3"] { transition-delay: .27s; } .rv[data-d="4"] { transition-delay: .36s; }
.rv[data-d="5"] { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* Utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mt1 { margin-top: .6rem; } .mt2 { margin-top: 1.2rem; } .mt3 { margin-top: 1.9rem; } .mt4 { margin-top: 2.8rem; }
.mb2 { margin-bottom: 1.2rem; } .mb3 { margin-bottom: 1.9rem; }
.noscroll { overflow: hidden; }


/* ==========================================================================
   MOBIL — kompakte Fassung
   Weniger Text, kleinere Schrift, engere Abstände. Ziel: Die Ferienwohnungen
   sind nach einem einzigen Wischen sichtbar.
   ========================================================================== */

.only-narrow { display: none; }
.only-wide { display: inline; }
/* das Hochkantbild gehört ausschließlich der Handy-Ansicht */
.hero__m { display: none; }

@media (max-width: 760px) {
  .only-narrow { display: inline; }
  .only-wide { display: none; }

  :root {
    --sec: 2.75rem;
    --pad: 1.15rem;
    --fs-mega: 2.35rem;
    --fs-xxl:  1.85rem;
    --fs-xl:   1.6rem;
    --fs-lg:   1.28rem;
    --fs-md:   1.05rem;
    --fs-lead: .99rem;
    --head-h: 66px;
  }
  body { font-size: .96rem; line-height: 1.6; }
  h1, h2, h3 { line-height: 1.08; letter-spacing: -.03em; }

  /* ---- Kopfbereich der Startseite ------------------------------------- */
  .hero {
    min-height: 0;
    padding-top: calc(var(--head-h) + 1rem);
    padding-bottom: 2.1rem;
    background: linear-gradient(178deg, #05203a 0%, #0d4a72 22%, #4a91b6 44%,
                #a9c6c8 56%, #edcd97 64%, #f7e0b6 74%, #f9e7c6 100%);
  }
  .hero > .wrap-w { padding-bottom: 0; }
  .hero__kick { margin-bottom: .55rem; font-size: .6rem; letter-spacing: .16em; }
  .hero__kick i { width: 22px; }
  .hero h1 { font-size: 2.2rem; line-height: .97; max-width: 17ch; letter-spacing: -.04em; }
  .hero__sub { margin-top: .6rem; font-size: .95rem; line-height: 1.45; max-width: 34ch; }
  /* Zwei Knöpfe nebeneinander, aber der Text darf umbrechen — auf 320 Pixeln
     passt „Paket selbst zusammenstellen“ sonst nicht in eine Zeile. */
  .hero .btns { margin-top: .9rem; gap: .45rem; flex-wrap: wrap; }
  .hero .btns .b { flex: 1 1 46%; min-width: 0; min-height: 46px; font-size: .84rem;
                   padding-inline: .55rem; white-space: normal; line-height: 1.25; }
  .hero .btns .b svg { display: none; }
  .hero__sea { height: 40%; }
  .hero__sun { top: 12%; width: min(42vw, 190px); }
  .hero__fg img { height: 64px; }
  .hero__gulls { display: none; }
  /* die Vertrauens-Laufschrift steckt schon im Abschnitt darunter */
  .hero .mq { display: none; }
  /* kurze Fassung: die mittlere Überschriftzeile entfällt */
  .hero--kurz h1 .ln:nth-child(2) { display: none; }

  /* Hochkantbild statt Farbverlauf */
  .hero--foto { background: var(--night); padding-bottom: 2.4rem; }
  .hero--foto .hero__sun,
  .hero--foto .hero__haze,
  .hero--foto .hero__sea,
  .hero--foto .hero__fg { display: none; }
  .hero__m { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; }
  .hero__m img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
  .hero__m::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(172deg, rgba(0,43,66,.88) 0%, rgba(0,43,66,.58) 44%, rgba(6,34,50,.88) 100%);
  }
  .hero--foto > .wrap-w { position: relative; z-index: 2; }
  .hero .btns .b--white { background: #fff; color: var(--night); }

  /* Suchkonsole: Ort und Suchknopf nebeneinander */
  .cons { margin-top: 1rem; }
  .cons__tabs { display: none; }
  .cons__body { padding: 0; background: none; box-shadow: none; backdrop-filter: none;
                border-radius: 0; }
  .cons__row { grid-template-columns: minmax(0,1fr) 54px; gap: .5rem; }
  .cons__row .fld:nth-of-type(n+2) { display: none; }
  .fld { padding: .5rem .9rem; background: rgba(255,255,255,.97); border-radius: 15px;
         box-shadow: 0 6px 22px rgba(0,43,66,.18); }
  .fld + .fld { box-shadow: 0 6px 22px rgba(0,43,66,.18); }
  .fld label { font-size: .58rem; }
  .fld input, .fld select { min-height: 27px; }
  .cons .b { grid-column: auto; margin-top: 0; min-height: 52px; height: 100%; padding: 0;
             border-radius: 15px; background: var(--sand); color: var(--night);
             box-shadow: 0 6px 22px rgba(0,43,66,.18); }
  .cons .b span, .cons .b > *:not(svg) { display: none; }
  .cons .b { font-size: 0; gap: 0; }
  .cons .b svg { width: 20px; height: 20px; }

  .mq { padding-block: .7rem; margin-top: .9rem; }
  .mq__t { gap: 1.6rem; }
  .mq__t span { font-size: .58rem; letter-spacing: .18em; gap: 1.6rem; }

  /* ---- Abschnittsköpfe: knapper ---------------------------------------- */
  .row-head { flex-direction: column; align-items: flex-start; padding-bottom: .7rem; margin-bottom: 1rem; gap: .55rem; }
  .row-head .arw { font-size: .84rem; }
  /* am Handy soll nichts durch die Kopfleiste durchscheinen */
  .hd.stuck { background: rgba(251,248,243,.975); }
  .head-block .lab { margin-bottom: .5rem; }
  .head-block p { margin-top: .55rem; }
  .lab { font-size: .6rem; letter-spacing: .16em; gap: .5rem; }
  .lab::before { width: 18px; }
  .num-tag { font-size: .6rem; letter-spacing: .12em; }
  .g { gap: 1rem; }

  /* ---- Der Abschnitt direkt unter dem Kopf liegt wie ein Blatt darauf ---- */
  .hero + .sec, .hero + .sec-s {
    position: relative; z-index: 3;
    margin-top: -1.35rem;
    border-radius: 1.7rem 1.7rem 0 0;
    padding-top: 1.5rem;
    background: var(--paper);
  }
  .hero + .sec-s { background: var(--paper-2); }
  .hero + .bg-night, .hero + .bg-deep { background: var(--night); }

  /* ---- Wohnungen als Wischreihe ---------------------------------------- */
  .sec--rail > .wrap-w { padding-inline: 0; }
  .sec--rail .row-head { margin-inline: var(--pad); }
  .g--rail {
    display: flex; gap: .8rem; overflow-x: auto; overflow-y: hidden;
    padding: .25rem var(--pad) .5rem; margin: -.25rem 0 0;
    scroll-snap-type: x mandatory; scroll-padding-left: var(--pad);
    scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain;
  }
  .g--rail::-webkit-scrollbar { display: none; }
  .g--rail > .ocard {
    flex: none; width: 74vw; max-width: 264px; scroll-snap-align: start;
    background: var(--white); border-radius: var(--r3); overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,43,66,.11);
  }
  .g--rail .ocard__m { border-radius: 0; aspect-ratio: 16 / 11; }
  .g--rail .ocard__b { padding: .7rem .8rem .85rem; }
  .g--rail .ocard__b p { display: none; }
  .g--rail .ocard__f { display: none; }
  .g--rail .ocard h3 { font-size: 1.08rem; }
  .g--rail .ocard__meta { margin-top: .3rem; }
  .g--rail .ocard__no { font-size: .58rem; }

  /* ---- Objektkacheln: kompakter ---------------------------------------- */
  .ocard__m { aspect-ratio: 16 / 11; }
  .ocard__b { padding-top: .85rem; gap: .4rem; }
  .ocard h3 { font-size: 1.2rem; }
  .ocard__b p {
    font-size: .9rem; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ocard .pills { display: none; }
  .ocard__meta { font-size: .62rem; gap: .25rem .7rem; }
  .ocard__f { padding-top: .7rem; }

  /* ---- Seitenköpfe der Unterseiten -------------------------------------- */
  .phero { padding-top: calc(var(--head-h) + 1.7rem); padding-bottom: 1.8rem; }
  .crumb { margin-bottom: .8rem; font-size: .58rem; gap: .35rem; }
  .phero .lab { margin-bottom: .7rem; }
  .phero h1 { max-width: 15ch; }
  .phero p { margin-top: .7rem; font-size: .95rem; line-height: 1.5; }
  .phero .btns { margin-top: 1rem !important; gap: .45rem; }
  .phero .btns .b { flex: 1 1 100%; min-height: 46px; font-size: .92rem; }

  /* ---- Filterleiste: kompakter ----------------------------------------- */
  .fbar { padding-block: .7rem; margin-bottom: 1.2rem; }
  .fbar__in { gap: .55rem .6rem; }
  /* Ortsfilter als eine Reihe zum Wischen statt drei Zeilen */
  .fbar .chips {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: .35rem;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .fbar .chips::-webkit-scrollbar { display: none; }
  .chip { min-height: 38px; padding: .4rem .85rem; font-size: .82rem; flex: none; }
  .chip small { display: none; }
  /* Gäste und Sortierung nebeneinander, Preis darunter */
  .fbar__in > .chips { order: 0; }
  .fbar__in .fgrp:not(.rng) { order: 1; flex: 1 1 calc(50% - .3rem); min-width: 0; gap: .4rem; }
  .fbar__in .rng { order: 2; }
  .fbar__in .fbar__r { order: 3; }
  .fbar__in .fgrp:not(.rng) .sel { flex: 1 1 auto; min-width: 0; }
  .fgrp > label { font-size: .55rem; letter-spacing: .1em; flex: none; }
  .sel { min-height: 38px; padding: .4rem 1.7rem .4rem .7rem; font-size: .82rem; background-position: right .65rem center; }
  .rng { flex: 1 1 100%; gap: .55rem; }
  .rng input[type="range"] { flex: 1; width: auto; min-width: 0; }
  .rng output { font-size: .68rem; min-width: 68px; }
  .fbar__r { gap: .7rem; }

  /* ---- Fließtext ------------------------------------------------------- */
  .lead { font-size: .99rem; line-height: 1.55; }
  .split { gap: 1.6rem; }
  .chk { gap: .55rem; }
  .chk li { font-size: .92rem; }
  .ft { padding: 1.2rem 1.1rem; }
  .ft__i { width: 44px; height: 44px; margin-bottom: .8rem; }
  .ft h3 { font-size: 1.08rem; }
  .ft p { font-size: .89rem; }
  .steps { gap: 1.2rem; }
  .step { padding-top: 2.1rem; }
  .step p { font-size: .89rem; }
  .stat__n { font-size: 2.4rem; }
  .stat__l { font-size: .6rem; margin-top: .4rem; }
  .qt { padding-top: 1.1rem; }
  .qt p { font-size: 1.02rem; }
  .plan { padding: 1.4rem 1.2rem; }
  .faq summary { font-size: 1.05rem; padding-block: 1.05rem; }
  .faq__a { font-size: .92rem; padding-right: 2.4rem; }
  .frame img { border-radius: var(--r3); }
  .fnote { padding: .8rem 1rem; }

  /* ---- Sorgen-Abschnitt ------------------------------------------------ */
  .pn { gap: 1.6rem; }
  .pn__big { font-size: 4.6rem; line-height: .85; }
  .pn__q { padding: 1.1rem 0; gap: .8rem; }
  .pn__q h3 { font-size: 1.06rem; }
  .pn__q em { font-size: .6rem; padding-top: .3rem; }
  .pn__q i { width: 28px; height: 28px; }
  .pn__a p { font-size: .91rem; padding-bottom: 1.2rem; }

  /* ---- Abschluss und Fußzeile ------------------------------------------ */
  .fcta { padding: 1.8rem 1.4rem; border-radius: var(--r4); }
  .fcta__in { gap: 1.2rem; }
  .fcta .btns { justify-content: flex-start !important; }
  .fcta .btns .b { flex: 1 1 100%; }
  .ft-w { padding-top: 2.6rem; }
  .ft-w__g { gap: 1.6rem; padding-bottom: 2rem; }
  .ft-w__about { font-size: .89rem; }
  .ft-w__mark { font-size: 3.2rem; }
  .divide svg { height: 30px; }

  /* ---- Objektseite am Handy -------------------------------------------- */
  .dlt { padding-top: calc(var(--head-h) + .8rem); padding-bottom: 1.4rem; }
  .dlt__crumb { margin-top: 1rem; }
  .dlt__head  { gap: .8rem; align-items: flex-start; }
  .dlt__head .lead { margin-top: .5rem; }
  /* Bilderfeld: randlos zum Wischen */
  .dlt__gal {
    display: flex; gap: .45rem;
    grid-template-columns: none; grid-template-rows: none;
    overflow-x: auto; overflow-y: hidden;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
    scroll-snap-type: x mandatory; scroll-padding-left: var(--pad);
    scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain;
  }
  .dlt__gal::-webkit-scrollbar { display: none; }
  .dlt__gal a,
  .dlt__gal a:first-child {
    flex: none; width: 84vw; max-width: 420px; aspect-ratio: 7 / 5;
    grid-column: auto; grid-row: auto; border-radius: var(--r3);
    scroll-snap-align: start;
  }
  .dlt__gal img { width: 100%; height: 100%; object-fit: cover; }
  .dlt__price { text-align: left !important; display: flex; align-items: baseline;
                gap: .55rem; flex-wrap: wrap; }
  .dlt__price > div:nth-child(2) { font-size: 1.9rem !important; }

  /* ---- Formulare und Detailseiten -------------------------------------- */
  .fcard { padding: 1.2rem 1.1rem; }
  .gal { gap: .4rem; }
  /* Eckdaten und Ausstattung zweispaltig statt untereinander */
  .dl__facts { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1rem; padding-block: 1rem; }
  .fact { gap: .5rem; }
  .fact svg { width: 18px; height: 18px; }
  .fact b { font-size: .89rem; }
  .fact span { font-size: .58rem; letter-spacing: .13em; }
  .amen { grid-template-columns: 1fr 1fr; gap: 1.1rem .9rem; }
  .amen h3 { font-size: .58rem; letter-spacing: .16em; margin-bottom: .5rem; }
  .amen ul { gap: .38rem; }
  .amen li { font-size: .85rem; gap: .45rem; line-height: 1.35; }
  .amen li::before { width: 5px; height: 5px; margin-top: .48rem; }
  .bk__b { padding: 1rem 1.1rem 1.2rem; }
  .xopt { padding: .65rem .75rem; }
  .xopt__x span { font-size: .74rem; }
}

@media (max-width: 400px) {
  :root { --fs-xxl: 1.7rem; --fs-xl: 1.5rem; }
  .hero h1 { font-size: 2.1rem; }
  .ocard h3 { font-size: 1.12rem; }
  .pn__big { font-size: 3.8rem; }
}

/* ================================================================ 22 · Shop */
.b--sm { min-height: 42px; padding: .55rem 1.05rem; font-size: .84rem; gap: .45rem; border-radius: var(--rp); }

/* Zähler an der Korb-Schaltfläche */
.icb--ck { position: relative; }
.icb__n {
  position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--sand); color: var(--night);
  font-family: var(--f-mono); font-size: .62rem; font-weight: 500; line-height: 19px; text-align: center;
  box-shadow: 0 2px 8px rgba(0,43,66,.28);
}
.icb__n[hidden] { display: none; }

/* Bereichs-Schaltflächen */
.shopchips { margin-bottom: .9rem; }
.shopnote { color: var(--tx-2); font-size: .95rem; max-width: 62ch; margin-bottom: .4rem; }
.shopvat { margin-top: 1.6rem; font-family: var(--f-mono); font-size: var(--fs-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); }

/* Produktkachel */
.pcard {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--hair); border-radius: var(--r3); overflow: hidden; min-width: 0;
  transition: transform var(--t2) var(--ez), box-shadow var(--t2) var(--ez), border-color var(--t2) var(--ez);
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--e2); border-color: transparent; }
.pcard:hover h3 a { color: var(--sand-txt); }
.pcard[hidden] { display: none; }
.pcard__m { position: relative; display: block; aspect-ratio: 16 / 11; background: var(--paper-3); overflow: hidden; }
.pcard__m img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ez); }
.pcard:hover .pcard__m img { transform: scale(1.05); }
.pcard__no {
  position: absolute; left: .8rem; top: .8rem; z-index: 2;
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .16em; color: var(--tx-3);
  background: rgba(255,255,255,.86); backdrop-filter: blur(6px);
  border-radius: 999px; padding: .2rem .55rem;
}
.pcard__tag {
  position: absolute; right: .8rem; top: .8rem; z-index: 2;
  background: var(--sand); color: var(--night); border-radius: 999px; padding: .3rem .75rem;
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .13em; text-transform: uppercase;
}
.pcard__b { padding: 1.05rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.pcard__cat { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--brand-txt); }
.pcard h3 { font-size: 1.22rem; line-height: 1.15; }
.pcard h3 a { color: inherit; }
.pcard h3 a::after { content: ""; position: absolute; inset: 0; }
.pcard { position: relative; }
.pcard__f {
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--hair-2);
  display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap;
}
.pcard__pr b { display: block; font-family: var(--f-disp); font-size: 1.45rem; font-weight: 500;
  letter-spacing: -.03em; color: var(--tx-1); line-height: 1.05; }
.pcard__pr small { display: block; font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); margin-top: .2rem; }
.pcard__f .b { position: relative; z-index: 2; }
.b.is-in { --bg: var(--good-bg); --fg: var(--good); box-shadow: none; }
.b.is-in::before { background: var(--good); }
.b.is-in:hover { color: #fff; }

/* Mengenbox auf der Produktseite */
.pbox__note { font-size: .78rem; color: var(--tx-3); line-height: 1.5; margin-top: .2rem; }
.pbox .bk__h span { max-width: 12ch; text-align: right; }

/* ------------------------------------------------ Anfragekorb */
.ck { position: fixed; inset: 0; z-index: 520; visibility: hidden; opacity: 0;
  transition: opacity .35s var(--ez), visibility .35s; }
.ck.on { visibility: visible; opacity: 1; }
.ck__bd { position: absolute; inset: 0; background: rgba(0,43,66,.55); backdrop-filter: blur(5px); }
.ck__p {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(430px, 92vw);
  background: var(--paper); display: flex; flex-direction: column;
  box-shadow: -20px 0 60px rgba(0,43,66,.28);
  transform: translateX(100%); transition: transform .45s var(--ez-out);
}
.ck.on .ck__p { transform: none; }
.ck__h {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: calc(var(--head-h) * .45 + .9rem) var(--pad) 1rem;
  border-bottom: 1px solid var(--hair);
}
.ck__h b { font-family: var(--f-disp); font-size: 1.4rem; font-weight: 500; letter-spacing: -.03em; }
.ck__x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hair);
  display: grid; place-items: center; color: var(--tx-2); flex: none; }
.ck__x:hover { background: var(--sand); color: var(--night); border-color: var(--sand); }
.ck__scroll { flex: 1; overflow-y: auto; padding: 1rem var(--pad); }
.ck__empty { color: var(--tx-2); font-size: .95rem; line-height: 1.6; padding: 1.4rem 0; }
.ck__empty[hidden] { display: none; }
.ck__l { display: grid; gap: .85rem; list-style: none; }
.ck__i { display: grid; grid-template-columns: 62px minmax(0,1fr) auto; gap: .8rem; align-items: start;
  padding-bottom: .85rem; border-bottom: 1px solid var(--hair-2); }
.ck__im { display: block; width: 62px; height: 52px; border-radius: var(--r1);
  overflow: hidden; background: var(--paper-3); flex: none; }
.ck__im img { width: 100%; height: 100%; object-fit: cover; }
.ck__t { min-width: 0; }
.ck__t b { display: block; font-size: .96rem; line-height: 1.25; color: var(--tx-1); }
.ck__t a { color: inherit; }
.ck__t > span { display: block; font-family: var(--f-mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tx-3); margin-top: .2rem; }
.ck__q { display: flex; align-items: center; gap: .35rem; margin-top: .5rem; flex-wrap: wrap; }
.ck__q button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hair);
  display: grid; place-items: center; font-size: 1rem; line-height: 1; color: var(--tx-1); }
.ck__q button:hover { background: var(--sand); color: var(--night); border-color: var(--sand); }
.ck__q output { font-family: var(--f-mono); font-size: .84rem; min-width: 24px; text-align: center; }
.ck__rm { margin-left: .4rem; font-size: .74rem; color: var(--tx-3); text-decoration: underline;
  text-underline-offset: 3px; width: auto !important; height: auto !important; border: 0 !important;
  border-radius: 0 !important; }
.ck__rm:hover { color: var(--danger, #b0352d); background: none !important; }
.prose a:hover, .fnote a:hover, .ft-w__b a:hover { color: var(--sand-txt); }
.ck__pr { font-family: var(--f-mono); font-size: .86rem; color: var(--tx-1);
  white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: .1rem; }
.ck__f { padding: 1rem var(--pad) calc(1.1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hair); background: var(--white); display: grid; gap: .7rem; }
.ck__f[hidden] { display: none; }
.ck__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ck__sum span { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--tx-3); }
.ck__sum b { font-family: var(--f-disp); font-size: 1.6rem; font-weight: 500; letter-spacing: -.03em; }
.ck__note { font-size: .78rem; line-height: 1.5; color: var(--tx-3); }
.ck__clear { font-size: .8rem; color: var(--tx-3); text-decoration: underline;
  text-underline-offset: 3px; justify-self: center; min-height: 30px; }
.ck__clear:hover { color: var(--sand-txt); }

@media (max-width: 760px) {
  .ck__p { width: 100%; }
  .ck__h { padding-top: 1rem; }
  .pcard h3 { font-size: 1.1rem; }
  .pcard__b { padding: .85rem .9rem 1rem; gap: .4rem; }
  .pcard__b p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pcard .pills { display: none; }
  .pcard__pr b { font-size: 1.28rem; }
  .pcard__f { padding-top: .7rem; gap: .5rem; }
  .pcard__f .b { flex: 1 1 100%; }
  .shopchips { flex-wrap: nowrap; overflow-x: auto; gap: .35rem;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
    scrollbar-width: none; }
  .shopchips::-webkit-scrollbar { display: none; }
}

/* Hinweiszeile im Kopfbereich: für Besucher, die nur eine Reinigung suchen */
.hero__hint {
  display: flex; align-items: flex-start; gap: .65rem; margin-top: 1.1rem;
  padding: .8rem 1.05rem; border-radius: var(--r2);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  color: var(--dx-2); font-size: .92rem; line-height: 1.5; max-width: 62ch;
}
.hero__hint > svg { flex: none; color: var(--sand); margin-top: .12rem; }
.hero__hint a {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  color: var(--sand); font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.hero__hint a:hover { color: #fff; }
.hero__hint a svg { transition: transform var(--t1) var(--ez); }
.hero__hint a:hover svg { transform: translateX(3px); }
@media (max-width: 760px) {
  .hero__hint { margin-top: .8rem; padding: .65rem .8rem; gap: .5rem; font-size: .84rem;
                line-height: 1.45; border-radius: 13px; }
  .hero__hint > svg { width: 15px; height: 15px; }
}

/* ================================================ 23 · Objektkopf neu ordnen
   Zuerst das Bild, dann erst der Text — und deutlich kleiner als vorher.
   Gilt auf allen Bildschirmgrößen, nicht nur am Handy. */
.dlt > .wrap-w { display: flex; flex-direction: column; }
.dlt__gal   { order: 1; }
.dlt__crumb { order: 2; margin: 1.15rem 0 0; }
.dlt__head  { order: 3; margin-bottom: 0 !important; padding-bottom: 0 !important;
              gap: 1.4rem clamp(1.5rem, 1rem + 2vw, 3rem); align-items: flex-end; }
/* Überschrift und Beschreibung zurücknehmen: das Bild soll führen */
.dlt__head h1 {
  font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.5rem) !important;
  line-height: 1.08; letter-spacing: -.025em; margin-top: .45rem;
}
.dlt__head .lead {
  font-size: clamp(.95rem, .9rem + .2vw, 1.05rem) !important;
  line-height: 1.55; margin-top: .6rem; max-width: 68ch !important; color: var(--tx-2);
}
.dlt__head .lab { font-size: .6rem; letter-spacing: .17em; }
.dlt__price > div:nth-child(2) { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2rem) !important; }

/* Galerie am Rechner: großes Leitbild, drei kleine daneben */
@media (min-width: 861px) {
  .dlt { padding-top: calc(var(--head-h) + clamp(1rem, .6rem + 1.2vw, 1.9rem)); padding-bottom: 1.2rem; }
  .dlt__gal { grid-template-columns: 2.1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .5rem; }
  .dlt__gal a { aspect-ratio: auto; }
  .dlt__gal a:first-child { grid-row: 1 / 3; }
  .dlt__gal { max-height: 62vh; }
}

/* ============================================== 24 · Set-Konfigurator ===== */
.bset { padding-top: calc(var(--head-h) + clamp(1.2rem,.8rem + 1.6vw,2.4rem)); padding-bottom: .6rem; }
.bset__head { max-width: 62ch; }
.bset__head .lead { font-size: clamp(.98rem,.94rem + .2vw,1.08rem); color: var(--tx-2); }
.bset__grid {
  display: grid; align-items: start;
  grid-template-columns: minmax(0,1.5fr) minmax(320px,.9fr);
  column-gap: clamp(1.8rem,1rem + 3vw,3.4rem); row-gap: 2rem;
}
.bset__text p { color: var(--tx-2); margin-bottom: .9rem; max-width: 64ch; }
.bgroup {
  font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .18em;
  text-transform: uppercase; color: var(--brand-txt); margin: 1.6rem 0 .7rem;
}
.bgroup:first-child { margin-top: 0; }

/* Artikelkacheln */
.btiles { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%,215px),1fr)); }
.btile {
  position: relative; display: grid; grid-template-columns: 62px minmax(0,1fr); gap: .75rem;
  align-items: center; text-align: left; padding: .6rem .8rem .6rem .6rem;
  background: var(--white); border: 1.5px solid var(--hair); border-radius: var(--r2);
  transition: border-color .2s var(--ez), background-color .2s var(--ez), transform .2s var(--ez), box-shadow .2s var(--ez);
}
.btile:hover { border-color: var(--sand-dim); background: #fffdf7; transform: translateY(-2px); }
.btile.is-on { border-color: var(--brand); background: #f2f9fd; box-shadow: 0 8px 22px rgba(0,119,182,.14); }
.btile__m { width: 62px; height: 62px; border-radius: var(--r1); overflow: hidden; background: var(--paper-2); flex: none; }
.btile__m img { width: 100%; height: 100%; object-fit: cover; }
.btile__b { min-width: 0; display: block; }
.btile__b b { display: block; font-size: .95rem; line-height: 1.25; color: var(--tx-1); }
.btile__b small { display: block; font-size: .78rem; line-height: 1.4; color: var(--tx-3); margin-top: .18rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.btile__b em { display: block; font-style: normal; font-family: var(--f-mono); font-size: .8rem;
  color: var(--brand-txt); margin-top: .3rem; font-weight: 500; }
.btile__chk {
  position: absolute; top: .5rem; right: .5rem; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand); color: #fff;
  opacity: 0; transform: scale(.6); transition: opacity .2s var(--ez), transform .2s var(--ez);
}
.btile.is-on .btile__chk { opacity: 1; transform: none; }
.btile__q {
  position: absolute; right: .5rem; bottom: .5rem; display: flex; align-items: center; gap: .1rem;
  background: var(--white); border: 1px solid var(--hair); border-radius: 999px; padding: .1rem;
}
.btile__q[hidden] { display: none; }
.btile__qb { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  color: var(--tx-1); cursor: pointer; }
.btile__qb:hover { background: var(--sand); }
.btile__q [data-qn] { min-width: 20px; text-align: center; font-family: var(--f-mono); font-size: .8rem; }
.btiles--pack .btile { grid-template-columns: 54px minmax(0,1fr); }
.btiles--pack .btile__m { width: 54px; height: 54px; }

/* Die Tüte */
.bag { position: sticky; top: calc(var(--head-h) + 20px); }
.bag__c { background: var(--white); border: 1px solid var(--hair); border-radius: var(--r3);
  box-shadow: var(--e2); overflow: hidden; }
.bag__tg { display: none; }
.bag__h { padding: 1.1rem 1.3rem .9rem; border-bottom: 1px solid var(--hair-2);
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.bag__h b { font-family: var(--f-disp); font-size: 1.35rem; font-weight: 500; letter-spacing: -.03em; }
.bag__h span { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tx-3); }
.bag__body { padding: 1rem 1.3rem 1.3rem; display: grid; gap: .85rem; }
.bag__art {
  position: relative; height: 116px; border-radius: var(--r2) var(--r2) 14px 14px;
  background: linear-gradient(170deg, #e6d3ae, #cdae7d); overflow: hidden;
}
.bag__lid { position: absolute; inset: 0 0 auto 0; height: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); }
.bag__art::after {
  content: ""; position: absolute; left: 50%; top: -12px; width: 74px; height: 26px;
  transform: translateX(-50%); border: 5px solid #a9854f; border-bottom: 0;
  border-radius: 40px 40px 0 0;
}
.bag__in { position: absolute; left: .5rem; right: .5rem; bottom: .45rem; display: flex;
  flex-wrap: wrap; gap: .3rem; justify-content: center; }
.bag__in img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover;
  box-shadow: 0 3px 8px rgba(0,43,66,.22); background: #fff;
  animation: bagIn .35s var(--ez-out) both; }
@keyframes bagIn { from { transform: translateY(14px) scale(.7); opacity: 0; } }
.bag__empty { font-size: .88rem; line-height: 1.55; color: var(--tx-3); }
.bag__empty[hidden] { display: none; }
.bag__l { display: grid; gap: .45rem; list-style: none; }
.bag__i { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: .5rem;
  align-items: baseline; font-size: .9rem; padding-bottom: .45rem; border-bottom: 1px solid var(--hair-2); }
.bag__i--pack .bag__n { color: var(--tx-3); }
.bag__n { min-width: 0; color: var(--tx-1); }
.bag__p { font-family: var(--f-mono); font-size: .84rem; font-variant-numeric: tabular-nums; }
.bag__x { width: 20px; height: 20px; border-radius: 50%; color: var(--tx-3); font-size: 1rem; line-height: 1;
  display: grid; place-items: center; }
.bag__x:hover { background: var(--warn-bg); color: var(--warn); }
.bag__hint { font-size: .82rem; color: var(--warn); background: var(--warn-bg);
  border-radius: var(--r1); padding: .5rem .7rem; }
.bag__hint[hidden] { display: none; }
.bag__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--hair); padding-top: .8rem; }
.bag__sum span { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--tx-3); }
.bag__sum b { font-family: var(--f-disp); font-size: 1.75rem; font-weight: 500; letter-spacing: -.03em; }
.bag__note { font-size: .78rem; line-height: 1.5; color: var(--tx-3); }
.b[disabled] { opacity: .45; pointer-events: none; }
.pcard--set .pcard__m { background: var(--paper-2); }

/* Gleiche Regel wie beim Buchungskasten: Die Tüte bleibt am Rechner im Bild,
   Summe und Knopf immer sichtbar — nur die Liste darin scrollt. */
@media (min-width: 1001px) and (min-height: 620px) {
  .bag__c { display: flex; flex-direction: column;
    max-height: calc(100vh - var(--head-h) - 2.6rem); }
  .bag__body { display: flex; flex-direction: column; gap: .85rem; flex: 1 1 auto; min-height: 0; }
  .bag__body > * { flex: none; }
  .bag__l { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
  .bag__l { scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }
  .bag__l::-webkit-scrollbar { width: 8px; }
  .bag__l::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 99px; }
}
@media (max-width: 1000px) {
  .bset__grid { grid-template-columns: minmax(0,1fr); }
  .bag { position: sticky; top: auto; bottom: 0; z-index: 200; margin-inline: calc(var(--pad) * -1); }
  .bag__c { border-radius: var(--r3) var(--r3) 0 0; border-bottom: 0;
    box-shadow: 0 -12px 40px rgba(0,43,66,.18); }
  .bag__art { display: none; }
}
@media (max-width: 760px) {
  .btiles { grid-template-columns: 1fr; gap: .5rem; }
  .btile { padding: .5rem .7rem .5rem .5rem; grid-template-columns: 54px minmax(0,1fr) auto; }
  .btile__m { width: 54px; height: 54px; }
  .btile__b small { -webkit-line-clamp: 1; }
  .btile__q { position: static; margin-left: auto; }
  .btile__chk { top: .35rem; right: .35rem; width: 18px; height: 18px; }
  /* Die Tüte klebt unten — sie darf nicht den halben Bildschirm fressen.
     Deshalb ist die Liste eingeklappt: sichtbar bleiben Anzahl, Preis und Knopf.
     Ein Tipp auf den Kopf klappt den Inhalt auf. */
  .bag__body { padding: .6rem .9rem .8rem; gap: .5rem; }
  .bag__h { padding: .55rem .9rem .5rem; cursor: pointer; gap: .6rem; align-items: center; }
  .bag__h b { font-size: 1.1rem; }
  .bag__h > span { margin-left: auto; }
  .bag__tg { display: grid; place-items: center; width: 30px; height: 30px; margin: -3px -6px -3px 0;
    border: 0; background: transparent; color: var(--tx-2); border-radius: 50%; cursor: pointer; flex: none; }
  /* Zugeklappt zeigt der Pfeil nach oben: „hier lässt sich etwas aufziehen“. */
  .bag__tg svg { transition: transform .25s var(--ez); transform: rotate(180deg); }
  .bag[data-open] .bag__tg svg { transform: none; }
  .bag__h.is-pulse { animation: bagpulse .5s var(--ez); }
  @keyframes bagpulse {
    0% { background: transparent; } 35% { background: var(--sand-lit); } 100% { background: transparent; }
  }
  .bag:not([data-open]) .bag__l,
  .bag:not([data-open]) .bag__empty { display: none; }
  .bag__l { max-height: 21vh; overflow-y: auto; }
  .bag__i { font-size: .85rem; padding-bottom: .32rem; }
  .bag__empty { font-size: .82rem; }
  .bag__sum { padding-top: .55rem; }
  .bag__sum b { font-size: 1.35rem; }
  .bag__hint { font-size: .76rem; padding: .4rem .6rem; }
  .bag__note { font-size: .7rem; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bag__c .b--lg { min-height: 48px; font-size: .92rem; }
  /* Platz schaffen, damit die letzten Kacheln nicht unter der Tüte verschwinden */
  .bset__pick { padding-bottom: .5rem; }
}

/* ---------------------------------------------------- 25 · Verfügbarkeit */
.av { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.av__m h3 { font-family: var(--f-disp); font-size: 1.02rem; font-weight: 500; color: var(--tx-1);
  letter-spacing: -.01em; margin-bottom: .5rem; }
.av__wd, .av__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.av__wd span { font-family: var(--f-mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-3); text-align: center; padding-bottom: .25rem; }
.av__d { aspect-ratio: 1; display: grid; place-items: center; font-size: .78rem; border-radius: 6px;
  font-variant-numeric: tabular-nums; color: var(--tx-2); }
.av__d--pad { visibility: hidden; }
.av__d--free { background: rgba(0,119,182,.05); }
.av__d--busy { background: var(--brand); color: #fff; font-weight: 600; }
.av__d--past { color: var(--tx-3); opacity: .4; }
.av__leg { display: flex; align-items: center; gap: .45rem; margin-top: .9rem;
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.av__key { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.av__key--free { background: rgba(0,119,182,.12); }
.av__key--busy { background: var(--brand); margin-left: .9rem; }
.bk__busy { font-size: .82rem; color: var(--warn); background: var(--warn-bg);
  border-radius: var(--r1); padding: .55rem .7rem; }
.bk__busy[hidden] { display: none; }
.ocard__busy { position: absolute; left: .9rem; top: .9rem; z-index: 3;
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(0,43,66,.86); color: #fff; padding: .3rem .55rem; border-radius: 99px; }
@media (max-width: 560px) { .av { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); } }

/* Filterleiste im Sortiment — dieselbe Optik wie bei den Ferienwohnungen */
.sec--tight { padding-top: 0; }
.fbar--shop .shopchips { flex-basis: 100%; }
.fgrp--suche { flex: 1 1 240px; }
.finp { flex: 1; min-width: 0; min-height: 44px; padding: .5rem .9rem;
  border: 1.5px solid var(--hair); border-radius: var(--r2); background: var(--white);
  color: var(--tx-1); font: inherit; font-size: .92rem; }
.finp:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,119,182,.12); }
.finp::placeholder { color: var(--tx-3); }
.finp::-webkit-search-cancel-button { cursor: pointer; }
@media (max-width: 700px) {
  /* Am Handy jede Gruppe auf eigener Zeile — sonst wird das Suchfeld zum Schlitz. */
  .fbar--shop .fbar__in .fgrp { flex: 1 1 100%; min-width: 100%; gap: .5rem; }
  .fbar--shop .fbar__in .fgrp > label { flex: none; min-width: 5.2rem; }
  .fbar--shop .fbar__in .fgrp .sel,
  .fbar--shop .fbar__in .fgrp .finp { flex: 1 1 auto; min-width: 0; }
  .fbar--shop .fbar__in .rng input[type="range"] { flex: 1 1 auto; min-width: 0; }
  .fbar--shop .fbar__r { width: 100%; justify-content: space-between; }
}

/* Produktkacheln einer Reihe gleich hoch — sonst tanzen die Knöpfe. */
.g3 > .pcard, .g > .pcard { height: 100%; }
.pcard { display: flex; flex-direction: column; }
.pcard__b { flex: 1; display: flex; flex-direction: column; }
.pcard__f { margin-top: auto; }

/* ---------------------------------------------------- 26 · Bewegung ------
   Alles Lebendige an einer Stelle. Wie viel davon läuft, steuert
   html[data-motion] — einstellbar im Dashboard unter Design → Bewegung:

     lebhaft   alles an (Voreinstellung)
     ruhig     nur Reaktionen auf Maus und Scrollen, nichts läuft von selbst
     aus       gar nichts

   Wer im Betriebssystem „Bewegung reduzieren" eingeschaltet hat, bekommt
   ohnehin nichts davon zu sehen — das steht weiter unten und gewinnt immer. */

/* ---- Wellenband: mehrere Lagen, die unterschiedlich schnell wandern */
.wellen {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 0;
  height: clamp(120px, 19vh, 260px); pointer-events: none; overflow: hidden;
}
.wellen__l { position: absolute; left: 0; bottom: 0; width: 200%; will-change: transform; }
.wellen__l svg { width: 100%; height: 100%; display: block; }
/* Lage 1 hat den höchsten Kamm und ist am blassesten, Lage 4 schließt unten
   in der Farbe des nächsten Abschnitts ab. */
.wellen__l--1 { height: 100%; animation: wandern 34s linear infinite; }
.wellen__l--2 { height: 86%;  animation: wandern 25s linear infinite reverse; }
.wellen__l--3 { height: 70%;  animation: wandern 18s linear infinite; }
.wellen__l--4 { height: 54%;  animation: wandern 13s linear infinite reverse; }
@keyframes wandern { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* Sanftes Heben und Senken, damit es nicht nur seitwärts läuft */
.wellen__l--2 { animation-name: wandern, atmen; animation-duration: 25s, 9s;
  animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite;
  animation-direction: reverse, alternate; }
.wellen__l--3 { animation-name: wandern, atmen; animation-duration: 18s, 7s;
  animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate; }
@keyframes atmen { from { translate: 0 4px; } to { translate: 0 -5px; } }

/* Der Kopfbereich der Unterseiten bekommt das Band unten hinein */
.phero { overflow: hidden; }
.phero > .wrap-w, .phero > .wrap-n, .phero > .wrap { position: relative; z-index: 2; }
.phero .wellen { z-index: 1; }

/* Als Trenner zwischen zwei Abschnitten */
.divide--live { position: relative; height: clamp(52px, 7vw, 104px); overflow: hidden; }
.divide--live .wellen { height: 100%; bottom: 0; }

/* ---- Perlen, die im dunklen Wasser aufsteigen */
.perlen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.perlen i {
  position: absolute; bottom: -12%; border-radius: 999px; display: block;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.75), rgba(122,211,234,.22) 62%, transparent 70%);
  animation: steigen var(--t, 17s) linear infinite; animation-delay: var(--v, 0s);
  width: var(--s, 12px); height: var(--s, 12px); left: var(--x, 50%); opacity: 0;
}
@keyframes steigen {
  0%   { transform: translate3d(0, 0, 0) scale(.7); opacity: 0; }
  12%  { opacity: .5; }
  50%  { transform: translate3d(14px, -46vh, 0) scale(1); }
  88%  { opacity: .34; }
  100% { transform: translate3d(-10px, -96vh, 0) scale(1.15); opacity: 0; }
}

/* ---- Ein heller Schein, der langsam über dunkle Flächen zieht */
.schein { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.schein::before {
  content: ""; position: absolute; top: -40%; left: -30%; width: 55%; height: 180%;
  background: linear-gradient(100deg, transparent, rgba(122,211,234,.13) 45%, transparent);
  filter: blur(26px); animation: ziehen 19s ease-in-out infinite;
}
@keyframes ziehen {
  0%, 100% { transform: translateX(0) rotate(6deg); }
  50%      { transform: translateX(120%) rotate(6deg); }
}

/* ---- Gestaffeltes Einblenden, beliebig viele Kacheln */
.rv[style*="--d"] { transition-delay: calc(var(--d) * 70ms); }

/* ---- Kacheln: das Bild atmet leicht, auch ohne Maus */
.pcard__m img { transition: transform 1.1s var(--ez), filter .5s var(--ez); }
.pcard:hover .pcard__m img, .pcard:focus-within .pcard__m img { transform: scale(1.07); }
.pcard { transition: transform .3s var(--ez-out), box-shadow .3s var(--ez-out), border-color .3s var(--ez); }
.pcard:focus-within { transform: translateY(-6px); box-shadow: var(--e2); }
.pcard__tag { transition: transform .3s var(--ez-out); }
.pcard:hover .pcard__tag { transform: translateY(-2px) scale(1.04); }

/* Sanftes Auftauchen, wenn ein Filter eine Kachel wieder hereinholt.
   Bewusst nur dann — beim Laden übernimmt das Einblenden beim Scrollen (.rv). */
.pcard.neu { animation: auftauchen .42s var(--ez-out) both; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.pcard[hidden] { display: none; }

/* ---- Rückmeldung, wenn etwas in den Korb wandert */
@keyframes stups {
  0% { transform: scale(1); } 35% { transform: scale(1.38); }
  60% { transform: scale(.94); } 100% { transform: scale(1); }
}
.stups { animation: stups .5s var(--ez-out); }

/* Der Punkt am Korb im Kopfbereich */
@keyframes ring {
  0%   { box-shadow: 0 0 0 0 rgba(0,119,182,.45); }
  100% { box-shadow: 0 0 0 14px rgba(0,119,182,0); }
}
.ringen::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  animation: ring .7s var(--ez-out); pointer-events: none;
}

/* Das fliegende Bildchen auf dem Weg zum Korb */
.flieger {
  position: fixed; z-index: 1200; border-radius: 14px; overflow: hidden;
  pointer-events: none; box-shadow: var(--e2); background: var(--paper-2);
  transition: transform .72s cubic-bezier(.4, .05, .35, 1), opacity .72s ease-in, border-radius .72s ease-in;
}
.flieger img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Der Knopf bekommt beim Überfahren einen kurzen Glanz */
.b--brand, .b--sand { position: relative; overflow: hidden; }
.b--brand::after, .b--sand::after {
  content: ""; position: absolute; top: -60%; left: -80%; width: 45%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg); transition: left .55s var(--ez); pointer-events: none;
}
.b--brand:hover::after, .b--sand:hover::after { left: 130%; }

/* ---- Die Tüte am Handy klopft an, wenn etwas hineingelegt wurde */
@keyframes wippen {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-7px); }
  55%      { transform: translateY(0); }
  72%      { transform: translateY(-3px); }
}
.wippt { animation: wippen .62s var(--ez-out); }

/* ---- Zahlen, die sich ändern, blitzen kurz auf */
@keyframes aufblitzen { from { color: var(--brand-lit); } to { color: inherit; } }
.frisch { animation: aufblitzen .55s ease-out; }

/* ---- Regler aus dem Dashboard ------------------------------------------ */
/* „ruhig": nichts läuft von selbst, Reaktionen bleiben */
html[data-motion="ruhig"] .wellen__l,
html[data-motion="ruhig"] .perlen i,
html[data-motion="ruhig"] .schein::before,
html[data-motion="ruhig"] .hero__sea .lay,
html[data-motion="ruhig"] .mq__t { animation: none !important; }
html[data-motion="ruhig"] .perlen { display: none; }

/* „aus": auch Ein- und Ausblenden entfällt */
html[data-motion="aus"] *, html[data-motion="aus"] *::before, html[data-motion="aus"] *::after {
  animation: none !important; transition: none !important;
}
html[data-motion="aus"] .rv { opacity: 1; transform: none; }
html[data-motion="aus"] .perlen, html[data-motion="aus"] .schein { display: none; }

/* Die Einstellung des Besuchers gewinnt immer */
@media (prefers-reduced-motion: reduce) {
  .wellen__l, .perlen i, .schein::before, .pcard { animation: none !important; }
  .perlen, .schein { display: none; }
  .flieger { display: none; }
}

/* ---------------------------------------------------- 27 · Am Handy -------
   Alles, was nur auf kleinen Geräten gilt. Zwei Regeln stehen über allem:

     1. Jede Bedienfläche ist mindestens 44 × 44 Pixel groß. Das ist die
        Größe einer Fingerkuppe — darunter tippt man daneben.
     2. Keine Schrift unter 11,5 Pixel. Kleiner liest niemand mehr.

   Verweise mitten im Fließtext sind ausgenommen: Sie sollen wie Text
   aussehen, und die Richtlinie WCAG 2.2 nimmt sie ausdrücklich aus. */

@media (max-width: 860px) {

  /* ---- 1. Bedienflächen ------------------------------------------------ */

  /* Knöpfe: nie unter 44, und der Text darf umbrechen statt abgeschnitten
     zu werden — „Paket selbst zusammenstellen“ passt auf 320 px sonst nicht. */
  .b, .b--sm, .b--lg { min-height: 46px; white-space: normal; text-align: center; }
  .b--sm { padding: .7rem 1.1rem; }
  /* Steht nur ein Knopf in der Reihe, darf er die ganze Breite nehmen. */
  @media (max-width: 400px) {
    .btns > .b { flex: 1 1 100%; }
  }

  /* Das Logo im Kopfbereich ist ein Verweis zur Startseite */
  .hd__logo, .side__logo-link, a.lg { min-height: 44px; display: inline-flex; align-items: center; }

  /* Filterschaltflächen im Sortiment */
  .fbar__c .chip, .chip, .tabbar__t, [data-cat-filter] { min-height: 44px; }

  /* Mengenwahl auf den Produktseiten */
  .qty button, .qty__b, [data-q], .pq button { min-width: 44px; min-height: 44px; }

  /* Die Tüte im Set-Konfigurator auf- und zuklappen */
  [data-bag-toggle], .bag__t { min-width: 44px; min-height: 44px; }

  /* Textverweise mit Pfeil („Ganzes Sortiment ansehen“), Zurücksetzen im
     Filter, Auswahlfelder und die Symbole in der Fußzeile */
  a.arw, .arw { min-height: 44px; display: inline-flex; align-items: center; }
  .freset, button.freset { min-height: 44px; padding-inline: .6rem; }
  select, select.sel { min-height: 46px; }
  .fut a[aria-label], .fu a[aria-label], footer a[aria-label] { min-width: 44px; min-height: 44px; }

  /* Schieberegler: der sichtbare Strich bleibt schmal, die Fläche zum
     Anfassen wird groß. */
  input[type="range"] {
    min-height: 44px; background: transparent; -webkit-appearance: none; appearance: none;
  }
  input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
    width: 26px; height: 26px; border-radius: 50%; background: var(--brand); border: 0;
    box-shadow: 0 1px 4px rgba(0,43,66,.3); }
  input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%;
    background: var(--brand); border: 0; }

  /* Ankreuzfelder: 24 Pixel ist das Mindestmaß, die Beschriftung daneben
     macht die Reihe insgesamt gut treffbar. */
  input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 44px; }

  /* Eingabefelder mindestens 46 hoch — und 16 Pixel Schrift, sonst zoomt
     iPhone-Safari beim Antippen ungefragt in die Seite hinein. */
  input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
  input[type="date"], input[type="number"], select, textarea {
    min-height: 46px; font-size: max(16px, 1rem);
  }
  textarea { min-height: 120px; }

  /* ---- 2. Schriftgrößen ------------------------------------------------ */

  :root { --fs-mono: .74rem; }          /* ≈ 11,8 px */

  /* Kein Text unter 11,5 Pixel — egal wo er steht. Die Regel greift breit,
     damit nicht bei jedem neuen Baustein wieder etwas durchrutscht. */
  body, p, li, span, a, button, label, output, small, td, th, figcaption, em, strong, time, dd, dt {
    font-size: max(11.5px, 1em);
  }
  .lab, .crumb, .pcard__cat, .pcard__no, .pcard__tag, .ocard__no, .mono, .pill, .num-tag,
  .fbar__l, .sr__grp, .sr__i em, .mq span, .stat__l, .ft__n, .tag,
  .bag__l, .bag__note, .ck__u, .prodbox__k, .kasten__k, .av__wd, .av__leg {
    font-size: max(11.5px, var(--fs-mono));
  }
  small, .small, .tdim, figcaption, .fut p, .fut a, footer p, footer a, footer span {
    font-size: max(12px, .86rem);
  }
  label, .fbar label, output { font-size: max(11.5px, var(--fs-mono)); }

  /* Buchstabenabstand zurücknehmen — gesperrte Großbuchstaben brauchen bei
     kleiner Schrift mehr Platz, als auf 320 Pixeln da ist. */
  .lab, .crumb, .pcard__cat { letter-spacing: .1em; }
}

/* Auf sehr schmalen Geräten wird es sonst eng */
@media (max-width: 380px) {
  .lab, .crumb, .pcard__cat { letter-spacing: .07em; }
  .b, .b--lg { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* --- Untergrenze für die Schriftgröße am Handy
   Erzeugt aus allen Regeln oben, die kleiner als 11,5 px werden. Jede steht
   hier noch einmal mit max(11.5px, …): am Rechner bleibt alles wie es war,
   am Handy wird nichts kleiner als lesbar. */
@media (max-width: 860px) {
  .amen h3 { font-size: max(11.5px, .58rem); }
  .av__leg { font-size: max(11.5px, .62rem); }
  .av__wd span { font-size: max(11.5px, .56rem); }
  .bag__h span { font-size: max(11.5px, .64rem); }
  .bag__note { font-size: max(11.5px, .7rem); }
  .bag__sum span { font-size: max(11.5px, .62rem); }
  .bk__dates label { font-size: max(11.5px, .625rem); }
  .bk__h span { font-size: max(11.5px, .64rem); }
  .chip small { font-size: max(11.5px, .62rem); }
  .ck__sum span { font-size: max(11.5px, .62rem); }
  .ck__t > span { font-size: max(11.5px, .58rem); }
  .crumb { font-size: max(11.5px, .58rem); }
  .dlt__head .lab { font-size: max(11.5px, .6rem); }
  .dw__a em { font-size: max(11.5px, .62rem); }
  .fact span { font-size: max(11.5px, .58rem); }
  .fgrp > label { font-size: max(11.5px, .55rem); }
  .fld label { font-size: max(11.5px, .58rem); }
  .fnote span { font-size: max(11.5px, .62rem); }
  .ft-w__b { font-size: max(11.5px, .64rem); }
  .g--rail .ocard__no { font-size: max(11.5px, .58rem); }
  .gal__more { font-size: max(11.5px, .64rem); }
  .hero__kick { font-size: max(11.5px, .6rem); }
  .icb__n { font-size: max(11.5px, .62rem); }
  .lab { font-size: max(11.5px, .6rem); }
  .mq__t span { font-size: max(11.5px, .58rem); }
  .mq__t span::after { font-size: max(11.5px, .5rem); }
  .num-tag { font-size: max(11.5px, .6rem); }
  .ocard__busy { font-size: max(11.5px, .58rem); }
  .ocard__meta { font-size: max(11.5px, .62rem); }
  .ocard__pr small { font-size: max(11.5px, .6rem); }
  .ocard__tag { font-size: max(11.5px, .64rem); }
  .pcard__cat { font-size: max(11.5px, .6rem); }
  .pcard__no { font-size: max(11.5px, .64rem); }
  .pcard__pr small { font-size: max(11.5px, .58rem); }
  .pcard__tag { font-size: max(11.5px, .6rem); }
  .plan--hot::before { font-size: max(11.5px, .62rem); }
  .plan__p small { font-size: max(11.5px, .64rem); }
  .pn__q em { font-size: max(11.5px, .6rem); }
  .qt__a span:not(.qt__av) { font-size: max(11.5px, .62rem); }
  .rng output { font-size: max(11.5px, .68rem); }
  .sr__esc { font-size: max(11.5px, .62rem); }
  .sr__foot { font-size: max(11.5px, .64rem); }
  .stat__l { font-size: max(11.5px, .6rem); }
  .stp__l span { font-size: max(11.5px, .62rem); }
}

/* --- Zwei Nachbesserungen für schmale Geräte ---------------------------- */
@media (max-width: 560px) {
  /* Die Eckdaten unter dem Produktbild standen zu zweit nebeneinander; lange
     Wörter wie „Unverträglichkeiten“ liefen dabei über den rechten Rand.
     Weiter oben ist daraus ein zweispaltiges Raster geworden — hier eine
     Spalte, sonst greift die Änderung nicht. */
  .dl__facts { display: grid; grid-template-columns: 1fr; gap: .9rem; }
  .fact, .fact > div { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 860px) {
  /* Verweise mitten im Text sollen wie Text aussehen und trotzdem gut zu
     treffen sein: etwas Luft nach oben und unten vergrößert die Fläche,
     ohne den Zeilenabstand zu verändern. */
  .prose a, .fld a, .note a, .hinweis a, .ck__note a, address a, .ft-w a[href^="tel"],
  .ft-w a[href^="mailto"] { padding-block: .28em; }
}

/* Das zugeklappte Menü liegt rechts außerhalb des Bildes. Auf manchen Seiten
   machte es die Seite dadurch ein paar Pixel breiter als das Display —
   „clip“ schneidet das ab, ohne (anders als „hidden“) das Kleben von
   Kopfzeile und Leiste zu zerstören. */
@supports (overflow-x: clip) {
  body { overflow-x: clip; }
}

@media (max-width: 860px) {
  label a, .cbx a { padding-block: .28em; }
}

/* --- Nachtrag Handy: die letzten drei Stellen ---------------------------- */
@media (max-width: 860px) {
  /* Der Zusatz „pro Person“, „pro Nacht“ im Preisrechner */
  .xopt__per, .xopt__p span, .xopt__p small { font-size: max(11.5px, .66rem); }

  /* Plus und Minus bei der Gästezahl */
  .stp__c button, .stp button, [data-g] { min-width: 44px; min-height: 44px; }

  /* Auswahlfelder ohne eigene Klasse (Ort, Gäste im Kopfbereich) */
  .fld select, .cons select, select { min-height: 46px; }
}