@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;
}
/* Auf dunklen Flächen keine durchgezogene Linie unter der Überschrift */
.bg-night .row-head, .bg-deep .row-head { border-bottom: 0; }

/* ------------------------------------------------ 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);
}
/* Logo-Plakette: Farbe und Deckkraft stehen im Dashboard (Einstellungen →
   Website); Vorgabe ist Nachtblau als Glas mit 62 %. Die Seite setzt bei
   anderen Werten --plakette-rgb und --plakette am <html>. */
:root { --plakette-rgb: 4,20,31; --plakette: 0; }
/* Das Logo im Kopf ist immer das Hauptlogo (blau/gold). Über dem Foto oder
   Video liegt es auf einer durchscheinenden Glas-Plakette, damit es nicht mit
   dem Himmel verschmilzt; sobald der Balken beim Scrollen hell wird, löst
   sich die Plakette auf. */
.lg {
  position: relative; flex: none; display: inline-flex; align-items: center;
  padding: .45rem .8rem; border-radius: 8px;
  transition: background-color .4s var(--ez), box-shadow .4s var(--ez);
}
.lg img { height: 36px; width: auto; display: block; }
/* Am Rechner steht das Logo selbst an der Textkante der Seite, die Plakette
   ragt in den Seitenrand hinein; am Handy ist der Rand dafür zu schmal. */
@media (min-width: 761px) { .lg { margin-left: -.8rem; } }
.hd.over:not(.stuck) .lg {
  background: rgba(var(--plakette-rgb), var(--plakette)); box-shadow: 0 4px 18px rgba(0,0,0,calc(.4 * var(--plakette)));
}
/* Erst ab einer sichtbaren Plakette lohnt die Weichzeichnung dahinter. */
@supports (backdrop-filter: blur(1px)) {
  .hd.over:not(.stuck) .lg { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
/* Heller Kopf über hellen Bildern: Menü, Knöpfe und Menüstriche dunkelblau
   statt weiß (Einstellungen → Website → „Menü über Bild oder Video"). Ab der
   Handybreite bleibt es weiß — dort ist vom Bild ein anderer Ausschnitt zu sehen. */
@media (min-width: 761px) {
  .hd.over.hd--dunkel:not(.stuck) .nv a { color: var(--tx-1); }
  .hd.over.hd--dunkel:not(.stuck) .nv a:hover,
  .hd.over.hd--dunkel:not(.stuck) .nv a[aria-current="page"] { color: var(--sand-txt); }
  .hd.over.hd--dunkel:not(.stuck) .icb { border-color: rgba(0,43,66,.22); color: var(--night); }
  .hd.over.hd--dunkel:not(.stuck) .icb:hover { background: var(--sand); color: var(--night); border-color: var(--sand); }
  .hd.over.hd--dunkel:not(.stuck) .brg { border-color: rgba(0,43,66,.22); }
  .hd.over.hd--dunkel:not(.stuck) .brg i { background: var(--night); }
}

.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; } }

/* ---- Foto statt gezeichneter Küste (Dashboard: Startseiten-Kopf → Hintergrundfoto) ----
   Das Bild liegt ganz hinten; Sonne, Dunst und Möwen entfallen. Die animierte
   See bleibt wie gehabt vor dem Foto, samt Schaum und Dünensilhouette — nur
   etwas flacher, damit vom Motiv mehr zu sehen ist. Zwei Verläufe sorgen dafür,
   dass die weiße Überschrift auch auf hellem Sand lesbar bleibt. */
.hero__bild { position: absolute; inset: 0; z-index: -9; overflow: hidden; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero__bild::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(104deg, rgba(0,43,66,.58) 0%, rgba(0,43,66,.28) 40%, rgba(0,43,66,.04) 72%, rgba(0,43,66,0) 100%),
    linear-gradient(180deg, rgba(0,43,66,.30) 0%, rgba(0,43,66,0) 26%, rgba(0,43,66,0) 62%, rgba(0,43,66,.30) 100%);
}
/* Videoschleife über dem Foto: blendet erst ein, wenn sie wirklich läuft (main.js setzt is-on) */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  opacity: 0; transition: opacity 1.2s ease; pointer-events: none;
}
.hero__video.is-on { opacity: 1; }
/* Das Flugzeug mit dem Banner (assets/img/flugzeug.webp) wartet rechts außerhalb des
   Bildes; main.js gibt mit is-los einen Vorbeiflug frei — einmal kurz nach dem Laden,
   danach im Abstand aus dem Dashboard („Startseiten-Kopf“). Es liegt unter den
   Verläufen des Fotos, wird also genauso abgedunkelt wie der Himmel dahinter. */
.hero .hero__flug {
  position: absolute; left: 100%; top: 11%; width: auto; height: clamp(48px, 5.2vw, 76px);
  max-width: none; object-fit: unset; pointer-events: none; will-change: transform;
}
.hero .hero__flug.is-los { animation: flug 9.5s linear forwards; }
@keyframes flug {
  0%   { transform: translate3d(0, 0, 0); }
  35%  { transform: translate3d(calc(-35vw - 35%), -4px, 0); }
  70%  { transform: translate3d(calc(-70vw - 70%), 2px, 0); }
  100% { transform: translate3d(calc(-100vw - 100%), -2px, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero .hero__flug { display: none; } }
.hero--bild .hero__sun, .hero--bild .hero__haze, .hero--bild .hero__gulls { display: none; }
/* Das gezeichnete Wellenband bleibt am Foto schmal, damit vom Motiv unten
   (Schriftzug im Sand) nichts verdeckt wird. */
.hero--bild .hero__sea { height: 17%; }
.hero--bild .hero__sea .lay img { height: clamp(64px, 7.5vw, 104px); }
/* Der Schatten hinter der Überschrift endet auf dem Foto weich statt an der
   Kante seines Kastens: Ellipse bis zur nächsten Kante, dort schon durchsichtig. */
.hero--bild .hero__type::before {
  inset: -4rem -8rem -3rem -8rem; border-radius: 0;
  background: radial-gradient(closest-side at 26% 52%, rgba(0,43,66,.50) 0%, rgba(0,43,66,.30) 55%, rgba(0,43,66,0) 100%);
}

/* Wasserebenen */
.hero__sea { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; z-index: -5; pointer-events: none; }
/* 3D-Wasser (WebGL, Dashboard → Funktionen): die Leinwand liegt in der See-Ebene,
   die gezeichneten Lagen verschwinden erst, wenn das Wasser wirklich läuft */
.hero__wasser { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block; }
.hero--wasser .hero__sea { height: 46%; }
.hero--wasser .hero__sea .lay { display: 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); }
/* Das Laufband ist ein eigenes Kind des Kopfes (nicht im Textrahmen) und läuft
   über die volle Breite — auf breiten Bildschirmen bis an beide Ränder. */
.hero > .mq { width: 100%; flex: none; margin-top: 0; margin-bottom: clamp(1rem, .4rem + 1.6vw, 2rem); }
.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);
  /* Kein row-gap! Der Kasten rechts überspannt 30 Rasterzeilen, damit er
     neben beliebig vielen Blöcken steht. Mit row-gap entstünde zwischen den
     leeren Zeilen jedes Mal ein Abstand — bei vier Blöcken rund 1500 Pixel
     Leere unter der Seite. Der Abstand kommt deshalb über margin. */
  row-gap: 0;
}
.dl > * { margin-bottom: clamp(2.2rem,1.4rem + 2vw,3.4rem); }
.dl > *:last-child { margin-bottom: 0; }
@media (min-width: 1001px) { .dl > .bk { margin-bottom: 0; } }
.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: 0; }
  .dl > * { margin-bottom: 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); }
/* Auf Produktseiten des Shops steht der Kasten fest an seinem Platz. */
.bk--fest { position: static; top: auto; }
@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)); } }
/* „width: auto" ist hier Pflicht: Das Attribut width="500" am Bild wirkt als
   Vorgabe, max-width staucht sie auf die Spaltenbreite — dann wären Breite und
   Höhe beide gesetzt und das Logo würde in die Breite gezogen. */
/* Unten dasselbe Hauptlogo auf derselben Plakette (Innenabstand am Bild selbst:
   36 px Logo + 2 × 7 px ≈ 50 px hoch, die Breite folgt dem Seitenverhältnis).
   Auf dem Nachtblau der Fußzeile ist die dunkle Plakette praktisch unsichtbar —
   erst die helle Fassung aus dem Dashboard zeigt sich hier. */
.ft-w img.lgf { height: 50px; width: auto; box-sizing: border-box; padding: .45rem .8rem; background: rgba(var(--plakette-rgb), var(--plakette)); border-radius: 8px; 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; }
  /* Rechner-Foto ohne eigenes Handybild: dieselbe Abdunkelung wie beim Hochkantbild */
  .hero--bild:not(.hero--foto) { background: var(--night); padding-bottom: 2.4rem; }
  .hero--bild:not(.hero--foto) .hero__bild { z-index: 0; }
  .hero--bild:not(.hero--foto) .hero__bild img { object-position: 50% 50%; }
  .hero--bild:not(.hero--foto) .hero__bild::after {
    background: linear-gradient(172deg, rgba(0,43,66,.88) 0%, rgba(0,43,66,.58) 44%, rgba(6,34,50,.88) 100%);
  }
  .hero--bild:not(.hero--foto) > .wrap-w { position: relative; z-index: 2; }
  /* liegt ein Handybild vor, verschwindet das Rechner-Foto dahinter */
  .hero--foto .hero__bild { display: none; }
  /* Die Hochkant-Schleife deckt sich mit dem Handybild (gleiches Seitenverhältnis, gleicher Ausschnitt) */
  .hero__m .hero__video { object-position: center 32%; }
  /* Flugzeug: im freien Himmelsstreifen zwischen den Menüknöpfen (bis ~60 px) und der
     Überschrift (ab ~100 px), etwas flotter als am Rechner */
  .hero .hero__flug { top: 66px; height: 28px; }
  .hero .hero__flug.is-los { animation-duration: 6.5s; }
  /* Echtes Foto am Handy: Ausschnitt etwas über der Mitte (Horizont und Strand
     der Hochkant-Drohnenschleife), etwas weniger abdunkeln, damit vom Motiv mehr bleibt */
  .hero--bild.hero--foto .hero__m img,
  .hero--bild.hero--foto .hero__m .hero__video { object-position: 50% 40%; }
  .hero--bild.hero--foto .hero__m::after {
    background: linear-gradient(172deg, rgba(0,43,66,.74) 0%, rgba(0,43,66,.30) 46%, rgba(6,34,50,.82) 100%);
  }
  .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; }
/* Die Tüte: Rückwand, darin die Artikel, davor die Vorderseite. Weil die
   Vorderseite über den Artikeln liegt, stecken sie wirklich in der Tüte —
   oben schauen sie aus der Öffnung heraus, unten verschwinden sie dahinter. */
.bag__art { position: relative; height: 186px; width: 216px; margin: 0 auto; }
.bag__back {
  position: absolute; inset: 36px 4px 0 4px; border-radius: 9px 9px 14px 14px;
  background: linear-gradient(170deg, #c3a87d, #ac8853);
}
.bag__back::before {                     /* Henkel */
  content: ""; position: absolute; left: 50%; top: -32px; width: 92px; height: 36px;
  transform: translateX(-50%); border: 6px solid #a9854f; border-bottom: 0;
  border-radius: 50px 50px 0 0;
}
.bag__front {
  position: absolute; left: 0; right: 0; bottom: 0; height: 108px; z-index: 40;
  border-radius: 5px 5px 14px 14px;
  /* Die beiden dunkleren Ränder sind die Seitenfalten — dadurch wird aus der
     Fläche eine Papiertüte statt eines Kastens. */
  background:
    linear-gradient(100deg, #cbb083 0 13%, #e9d8b6 13% 87%, #c4a674 87% 100%),
    linear-gradient(180deg, #e9d8b6, #d3b382);
  box-shadow: 0 -8px 18px rgba(0,43,66,.15);
}
.bag__front::before {                    /* Umschlagkante */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 13px;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
}
.bag__front::after {                     /* Mittelfalte */
  content: ""; position: absolute; left: 50%; top: 14px; bottom: 12px; width: 2px;
  background: rgba(120,92,48,.14);
}
.bag__in {
  position: absolute; left: 4px; right: 4px; bottom: 80px; z-index: 20;
  display: flex; justify-content: center; align-items: flex-end;
}
.bag__st {
  position: relative; display: block; margin: 0 -7px;
  transform: rotate(var(--dreh, 0deg)) translateY(calc(var(--hoch, 0px) * -1));
}
.bag__st img {
  display: block; width: 48px; height: 66px; border-radius: 8px 8px 3px 3px;
  object-fit: cover; object-position: center 46%;
  background: #fff; box-shadow: 0 4px 10px rgba(0,43,66,.20);
}
.bag__st u {
  position: absolute; top: -7px; right: -6px; min-width: 20px; height: 20px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 999px; text-decoration: none;
  background: var(--brand); color: #fff; font-family: var(--f-mono); font-size: .66rem;
}
.bag__st.is-neu { animation: bagRein .42s var(--ez-out) both; }
@keyframes bagRein {
  from { transform: translateY(-38px) rotate(0deg) scale(.82); opacity: 0; }
}
.bag__mehr {
  align-self: center; margin-left: .35rem; z-index: 50;
  padding: .2rem .45rem; border-radius: 999px; background: var(--night); color: #fff;
  font-family: var(--f-mono); font-size: .7rem;
}
@media (prefers-reduced-motion: reduce) { .bag__st.is-neu { animation: none; } }

.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: der Hintergrund ist der Abschnitt
   darüber, die Wellen tragen die Farbe des Abschnitts darunter und laufen
   über die ganze Breite. Etwas höher als der frühere starre Bogen, damit
   die Bewegung Raum hat. */
:root { --welle-h: clamp(64px, 8vw, 120px); }
.divide--live {
  position: relative; height: var(--welle-h); overflow: hidden; line-height: 0;
  /* Kein eigener Hintergrund, sondern Überlappung: das Band zieht sich um seine
     Höhe über den Abschnitt davor. Zwischen den Kämmen scheint dessen Fläche
     durch — auch ein wandernder Schein oder aufsteigende Perlen laufen so
     ohne Kante unter die Wellen. Der Abschnitt davor bekommt dafür unten
     genau diese Höhe an Abstand dazu, damit nichts überdeckt wird. */
  background: transparent !important;
  margin-top: calc(var(--welle-h) * -1);
}
.sec:has(+ .divide--live), .sec-s:has(+ .divide--live) { padding-bottom: calc(var(--sec) + var(--welle-h)); }
.divide--live .wellen { height: 100%; bottom: 0; }
.divide--live .wellen__l svg { height: 100%; }
/* Der Abschnitt darunter schließt ohne Haarlinie an */
.divide--live + .sec { margin-top: -1px; }

/* ---- Wellenband am OBEREN Rand eines dunklen Abschnitts -----------------
   Das Band sitzt im Abschnitt selbst. Sein Hintergrund ist der Himmel — die
   Farbe des Abschnitts davor (--himmel) —, darauf laufen drei Lagen in Stufen
   der dunklen Farbe. Das Wasser ist per Maske ausgeschnitten: Unter der
   vierten Wellenlinie ist das Band durchsichtig, dort liegt der Abschnitt
   selbst, mit Schein und Perlen. So gibt es keine Kante mehr zwischen einem
   flachen Wasserstreifen und dem wandernden Schein darunter.
   Die Maske ist die vierte Bahn aus Render::BAHNEN (Fläche ÜBER der Linie),
   wiederholt sich nach 720 Einheiten und wandert wie früher Lage 4. */
.sec--welle-oben { padding-top: calc(var(--sec) + var(--welle-h)); }
.welle-oben {
  position: absolute; top: 0; left: 0; right: 0; height: var(--welle-h); z-index: 1;
  background: var(--himmel, var(--paper)); overflow: hidden; pointer-events: none; line-height: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0,0H1440V118C1320,104 1200,104 1080,118C960,132 840,132 720,118C600,104 480,104 360,118C240,132 120,132 0,118Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0,0H1440V118C1320,104 1200,104 1080,118C960,132 840,132 720,118C600,104 480,104 360,118C240,132 120,132 0,118Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 200% 100%;    mask-size: 200% 100%;
  -webkit-mask-repeat: repeat-x;   mask-repeat: repeat-x;
  -webkit-mask-position: 100% 0;   mask-position: 100% 0;
  animation: welle-oben 13s linear infinite;
}
.welle-oben .wellen { height: 100%; bottom: 0; }
.welle-oben .wellen__l svg { height: 100%; }
@keyframes welle-oben {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 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"] .welle-oben,
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, .welle-oben, .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; }
}

/* ============================================================ Hinweise ====
   Zwei Formen für dieselbe Sache: das schmale Band unter dem Kopfbereich,
   das auf jeder Seite steht, und der große Abschnitt für Startseite und
   Sortiment. Gedacht für Ankündigungen, die niemand übersehen soll. */

.hbar { margin-top: var(--head-h); }
.hbar__in {
  width: 100%; max-width: var(--wrap-w); margin-inline: auto;
  padding: .85rem var(--pad); display: flex; align-items: center;
  gap: .55rem 1rem; flex-wrap: wrap;
}
.hbar__t { margin: 0; flex: 1 1 20rem; font-size: var(--fs-sm); line-height: 1.45; }
.hbar__t b { font-weight: 700; }
.hbar svg { flex: none; }
.hbar__lnk {
  display: inline-flex; align-items: center; min-height: 44px;
  color: inherit; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap;
  text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1.5px;
}
.hbar__lnk:hover { text-decoration-thickness: 2.5px; }
.hbar--sand   { background: var(--sand); color: var(--tx-1); }
.hbar--blau   { background: var(--brand); color: var(--dx-1); }
.hbar--dunkel { background: var(--night); color: var(--dx-1); }

.hnote {
  display: flex; gap: clamp(1rem, .4rem + 2vw, 2.2rem); align-items: flex-start;
  padding: clamp(1.6rem, .9rem + 2.4vw, 3rem); border-radius: var(--r4); box-shadow: var(--e1);
}
.hnote__ic { flex: none; display: grid; place-items: center; width: 3.6rem; height: 3.6rem;
  border-radius: var(--rp); background: rgba(255,255,255,.55); }
.hnote__b { min-width: 0; }
.hnote__b > * + * { margin-top: .7rem; }
.hnote__l { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .45rem; }
.hnote__l li { display: flex; align-items: flex-start; gap: .55rem; }
.hnote__l svg { flex: none; margin-top: .18em; }
.hnote--sand   { background: var(--sand); color: var(--tx-1); }
.hnote--blau   { background: var(--brand); color: var(--dx-1); }
.hnote--dunkel { background: var(--night); color: var(--dx-1); }
.hnote--blau .hnote__ic, .hnote--dunkel .hnote__ic { background: rgba(255,255,255,.14); }
@media (max-width: 640px) { .hnote { flex-direction: column; } }

/* Artikel, die es noch nicht gibt: sichtbar, aber ausgegraut. Kein lautes
   Etikett — die graue Kachel und der stumpfe Knopf sagen genug. */
.pcard--soon { background: var(--paper-2); }
.pcard--soon .pcard__m img { filter: grayscale(1); opacity: .42; }
.pcard--soon .pcard__cat, .pcard--soon .pills, .pcard--soon .pcard__no { opacity: .55; }
.pcard--soon .pcard__b h3 a, .pcard--soon .pcard__pr b { color: var(--tx-3); }
.pcard--soon .pcard__b p { color: var(--tx-3); }
.b.is-soon {
  pointer-events: none; background: transparent; color: var(--tx-3);
  border: 1px solid var(--hair); box-shadow: none;
}
.soonbox {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: 1rem 1.1rem; border-radius: var(--r2);
  background: var(--paper-3); border: 1px solid var(--hair);
}
.soonbox svg { flex: none; margin-top: .12em; }
.soonbox b { display: block; }
.soonbox span { display: block; margin-top: .2rem; font-size: var(--fs-sm); color: var(--tx-2); }

/* ====================================================== Netto und brutto ===
   Groß steht der Nettopreis, klein daneben der Bruttopreis. Der Steuersatz
   hängt am Artikel: die meisten Lebensmittel 7 %, alles andere 19 %. */

.prs b { display: inline; }
.prs__n, .bkp i {
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-3); font-style: normal; margin-left: .34rem;
}
.prs small { display: block; font-size: .75rem; letter-spacing: .06em; }
.bkp { display: block; min-width: 0; }
.bkp b, .prs b { white-space: nowrap; }
.bkp small {
  display: block; margin-top: .15rem; font-family: var(--f-mono); font-size: .75rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3);
}
.sum__r--sub { margin-top: .15rem; }
.sum__r--sub span { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; color: var(--tx-3); }

/* In Korb und Tüte steht der Bruttopreis direkt neben dem großen Nettopreis —
   eine eigene Zeile würde die eingeklappte Tüte am Handy zu hoch machen. */
.sumv { display: inline-flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; justify-content: flex-end; }
.sumv u {
  text-decoration: none; font-family: var(--f-mono); font-size: .75rem;
  letter-spacing: .06em; color: var(--tx-3); white-space: nowrap;
}
.btile__b u {
  display: block; text-decoration: none; margin-top: .1rem;
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .06em; color: var(--tx-3);
}

/* ================================================ Einzelne Kacheln ========
   Die Raster füllen die Breite. Bleibt nur eine Kachel übrig — etwa wenn es
   nur einen Konfigurator gibt —, würde sie sich über die ganze Seite ziehen
   und das Bild riesig werden. Ein bis zwei Kacheln bekommen deshalb eine
   feste Höchstbreite; ab drei greift wieder das normale Raster. */

.g:has(> .pcard:only-child),
.g:has(> .pcard--set:only-child) { grid-template-columns: minmax(0, 400px); }
.g:has(> .pcard:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 400px)); }

/* Sicherheitsnetz für Browser ohne :has() — das Bild kann nicht ausufern. */
.pcard__m { max-height: 300px; }

/* ============================================ Galerie mit wenigen Bildern ==
   Die Galerie ist auf fünf Bilder ausgelegt: eines groß links, vier kleine
   rechts. Liegt nur ein Bild vor, blieb die rechte Hälfte leer und das eine
   Bild wurde hoch und schmal. Deshalb je nach Anzahl ein eigenes Raster. */

/* genau ein Bild — breites Band über die volle Breite */
.gal:has(> :nth-child(1):last-child) { grid-template-columns: 1fr; grid-template-rows: auto; }
.gal:has(> :nth-child(1):last-child) a:first-child {
  grid-row: auto; aspect-ratio: 16 / 6; max-height: 360px;
}
.gal:has(> :nth-child(1):last-child) a:first-child img { aspect-ratio: auto; height: 100%; }

/* genau zwei Bilder — nebeneinander, gleich groß */
.gal:has(> :nth-child(2):last-child) { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.gal:has(> :nth-child(2):last-child) a:first-child { grid-row: auto; }
.gal:has(> :nth-child(2):last-child) a:first-child img { aspect-ratio: 4/3; }

/* genau drei — eines groß, zwei gestapelt; vier — zwei mal zwei */
.gal:has(> :nth-child(3):last-child) { grid-template-columns: 2fr 1fr; }
.gal:has(> :nth-child(4):last-child) { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
.gal:has(> :nth-child(4):last-child) a:first-child { grid-row: auto; }
.gal:has(> :nth-child(4):last-child) a:first-child img { aspect-ratio: 4/3; }

/* ================================================== Kachel mit Bild oben ==
   Eine Kachel der Kachelreihe, die ein Bild bekommen hat, wird zur Bildkarte:
   Bild randlos oben, Text darunter. Gedacht für die „drei Wege" auf der
   Startseite — ein Bild sagt schneller, worum es geht, als ein Symbol. */
.ft--img { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ft__m { aspect-ratio: 4 / 3; background: var(--paper-3); overflow: hidden; }
.ft__m img { width: 100%; height: 100%; object-fit: cover; display: block;
             transition: transform .9s var(--ez-out); }
.ft--img:hover .ft__m img { transform: scale(1.04); }
.ft__b { padding: 1.5rem 1.7rem 1.8rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.ft__b .chk { margin-top: .9rem; }
.ft__b .chk li { font-size: .92rem; }
.ft__b .arw { margin-top: auto; padding-top: 1.1rem; }
@media (prefers-reduced-motion: reduce) { .ft--img:hover .ft__m img { transform: none; } }

/* ================================================= Formular mit Versand ==
   Honigtopf-Feld: für Menschen unsichtbar (nicht display:none, das lassen
   manche Programme aus), für Programme ein ganz normales Textfeld. */
.hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.fstat--err { background: var(--warn-bg); color: var(--warn); }

/* ======================================================= Kurtaxe-Rechner ==
   Links das Formular, rechts der Betrag — auf dem Handy untereinander. */
.kt { display: grid; gap: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); align-items: start; }
@media (max-width: 880px) { .kt { grid-template-columns: minmax(0, 1fr); } }
.kt__f { background: var(--white); border: 1px solid var(--hair); border-radius: var(--r3); padding: clamp(1.2rem, 1rem + 1.2vw, 1.8rem); }
.kt__combo { position: relative; }
.kt__combo input { padding-right: 3rem; }
.kt__pfeil { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  border-radius: 50%; display: grid; place-items: center; color: var(--tx-3); background: transparent; }
.kt__pfeil:hover { background: var(--paper-2); color: var(--tx-1); }
.kt__liste { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; list-style: none; margin: 0; padding: .4rem;
  background: var(--white); border: 1px solid var(--hair); border-radius: var(--r2); box-shadow: var(--e2); max-height: 280px; overflow-y: auto; }
.kt__liste li { padding: .6rem .8rem; border-radius: var(--r1); cursor: pointer; display: grid; gap: .1rem; }
.kt__liste li b { font-weight: 600; font-size: .96rem; }
.kt__liste li small { color: var(--tx-3); font-size: .8rem; }
.kt__liste li:hover, .kt__liste li.is-aktiv { background: var(--paper-2); }
.kt__liste li[aria-selected="true"] { background: rgba(0,119,182,.08); }
.kt__liste .kt__none { color: var(--tx-3); cursor: default; font-size: .9rem; }
.kt__grp { border-top: 1px solid var(--hair-2); padding-top: .9rem; display: grid; gap: .6rem; }
.kt__grph { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }
.kt__grph > span { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--tx-3); }
.kt__add { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .9rem; border-radius: 999px;
  border: 1px solid var(--hair); background: var(--white); color: var(--brand-txt); font-weight: 600; font-size: .88rem; }
.kt__add:hover { border-color: var(--brand); background: rgba(0,119,182,.06); }
.kt__rows { display: grid; gap: .5rem; }
.kt__rows:empty { display: none; }
.kt__row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: var(--paper-2); border-radius: var(--r2); padding: .5rem .6rem .5rem .9rem; }
.kt__row > label:not(.kt__cbx) { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); }
.kt__row input[type="number"] { width: 5.2rem; min-height: 44px; border: 1.5px solid var(--hair); border-radius: var(--r1); padding: .4rem .6rem; background: var(--white); }
.kt__row input[type="number"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0,119,182,.1); }
.kt__einheit { color: var(--tx-3); font-size: .9rem; }
.kt__cbx { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--tx-2); min-height: 44px; cursor: pointer; }
.kt__cbx input { width: 18px; height: 18px; accent-color: var(--brand); }
.kt__x { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; background: transparent; color: var(--tx-3); font-size: 1.3rem; line-height: 1; display: grid; place-items: center; }
.kt__x:hover { background: var(--warn-bg); color: var(--warn); }
.kt__fehler { color: var(--warn); font-size: .9rem; font-weight: 600; }
.kt__fehler[hidden] { display: none; }
.kt__erg { background: var(--night); color: var(--dx-2); border-radius: var(--r3); padding: clamp(1.3rem, 1rem + 1.4vw, 2rem); position: sticky; top: calc(var(--head-h) + 20px); }
@media (max-width: 880px) { .kt__erg { position: static; } }
.kt__leer { color: var(--dx-2); font-size: 1rem; line-height: 1.6; }
.kt__sum { display: grid; gap: .3rem; padding-bottom: 1rem; border-bottom: 1px solid var(--hair-d); margin-bottom: 1rem; }
.kt__lab { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--sand-lit); }
.kt__sum b { font-family: var(--f-disp); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; color: #fff; }
.kt__sub { font-size: .9rem; color: var(--dx-3); line-height: 1.5; }
.kt__erg .tw { overflow-x: auto; }
.kt__tbl { width: 100%; border-collapse: collapse; font-size: .93rem; }
.kt__tbl td { padding: .55rem 0; border-bottom: 1px solid var(--hair-d); vertical-align: top; }
.kt__tbl td small { display: block; color: var(--dx-3); font-size: .78rem; }
.kt__tbl td:nth-child(2) { white-space: nowrap; color: var(--dx-3); padding-left: .8rem; }
.kt__b { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: #fff; font-weight: 600; padding-left: .8rem; }
.kt__hin { margin-top: 1rem; font-size: .9rem; line-height: 1.55; color: var(--dx-2); }
.kt__saetze { margin-top: 1rem; border-top: 1px solid var(--hair-d); padding-top: .8rem; }
.kt__saetze summary { cursor: pointer; font-weight: 600; color: var(--sand-lit); font-size: .92rem; list-style: none; display: flex; align-items: center; gap: .4rem; }
.kt__saetze summary::before { content: "+"; font-family: var(--f-mono); width: 1.2em; }
.kt__saetze[open] summary::before { content: "–"; }
.kt__saetze table { width: 100%; border-collapse: collapse; font-size: .86rem; margin-top: .6rem; }
.kt__saetze th { text-align: left; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dx-3); padding: .3rem 0; font-weight: 400; }
.kt__saetze td { padding: .4rem 0; border-top: 1px solid var(--hair-d); vertical-align: top; }
.kt__saetze td small { display: block; color: var(--dx-3); font-size: .76rem; }
.kt__saetze th:not(:first-child), .kt__saetze td:not(:first-child) { text-align: right; white-space: nowrap; padding-left: .8rem; }
.kt__saetze .fnote-s { margin-top: .6rem; color: var(--dx-3); }
.kt__q { margin-top: 1rem; color: var(--dx-3); line-height: 1.5; }
.kt__q a { color: var(--sand-lit); text-decoration: underline; text-underline-offset: 3px; }
.kt__cta { grid-column: 1 / -1; display: flex; justify-content: center; }
@media (max-width: 480px) { .kt__row { padding-left: .7rem; } .kt__row input[type="number"] { width: 4.6rem; } }
/* Zeile: das × immer oben rechts, die Begleitperson-Zeile darf umbrechen */
.kt__row { position: relative; padding-right: 3.1rem; }
.kt__row .kt__x { position: absolute; right: .25rem; top: .25rem; margin: 0; }
/* Handy: kleine Leiste mit dem Betrag, solange das Ergebnis nicht im Bild ist */
.kt__mini { display: none; }
@media (max-width: 880px) {
  .kt__mini { position: fixed; left: 50%; transform: translateX(-50%); bottom: 82px; z-index: 210;
    display: none; align-items: baseline; gap: .6rem; padding: .6rem 1.1rem; border-radius: 999px;
    background: var(--night); color: #fff; box-shadow: var(--e2); font-size: .86rem; white-space: nowrap;
    border: 1px solid rgba(255,255,255,.14); }
  .kt__mini.is-on { display: flex; }
  .kt__mini b { font-family: var(--f-disp); font-size: 1.25rem; letter-spacing: -.02em; }
  .kt__mini span { color: var(--dx-3); font-family: var(--f-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
}

/* ==========================================================================
   Großes Feld (Notfall), Kosten, Vorher/Nachher, Bild mit Text, Ortsmarke
   ========================================================================== */

/* ---------- Großes Feld: soll nicht untergehen ---------- */
.sec-nf { padding-block: clamp(3rem, 1.6rem + 5vw, 6.5rem); }
.nf {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center;
  gap: clamp(1.8rem, 1rem + 3vw, 4rem);
  padding: clamp(1.8rem, .9rem + 3.8vw, 4.8rem); border-radius: var(--r5); box-shadow: var(--e3);
}
.nf--solo { grid-template-columns: minmax(0, 1fr); }
.nf::before {                                /* großer Schein oben rechts */
  content: ""; position: absolute; z-index: -1; inset: -35% -12% auto auto; width: min(760px, 80vw); aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 66%);
}
.nf::after {                                 /* zarte Wellenlinie unten */
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 90px; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 52 C180 20 360 20 540 52 S900 84 1080 52 1260 20 1440 52' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M0 70 C180 40 360 40 540 70 S900 98 1080 70 1260 40 1440 70' fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='1.5'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
.nf--sand   { background: linear-gradient(128deg, var(--sand-lit) 0%, var(--sand) 52%, #e9c77f 100%); color: var(--tx-1); }
.nf--blau   { background: linear-gradient(128deg, var(--brand-lit) 0%, var(--brand) 45%, var(--deep) 100%); color: var(--dx-2); }
.nf--dunkel { background: linear-gradient(135deg, var(--night) 0%, var(--night-2) 55%, var(--deep) 100%); color: var(--dx-2); }
.nf--blau::before, .nf--dunkel::before { background: radial-gradient(circle, rgba(244,217,160,.26), rgba(244,217,160,0) 66%); }
.nf--blau .nf__t, .nf--dunkel .nf__t { color: #fff; }
.nf__badge {
  display: inline-flex; align-items: center; gap: .7rem; padding: .55rem 1.05rem .55rem .85rem; border-radius: var(--rp);
  background: var(--night); color: #fff; box-shadow: 0 8px 22px rgba(0,43,66,.22);
  font-family: var(--f-mono); font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
}
.nf--dunkel .nf__badge { background: var(--sand); color: var(--night); }
.nf__badge i { flex: none; width: .7rem; height: .7rem; border-radius: 50%; background: #ff6a48; animation: nfPuls 1.9s ease-out infinite; }
@keyframes nfPuls {
  0%   { box-shadow: 0 0 0 0 rgba(255,106,72,.6); }
  70%  { box-shadow: 0 0 0 13px rgba(255,106,72,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,106,72,0); }
}
.nf__t { font-size: var(--fs-xxl); line-height: .98; letter-spacing: -.04em; margin-top: 1.35rem; max-width: 15ch; }
.nf__t .ital { color: var(--brand-txt); }
.nf--blau .nf__t .ital, .nf--dunkel .nf__t .ital { color: var(--sand); }
.nf__lead { font-size: var(--fs-lead); line-height: 1.6; margin-top: 1.3rem; max-width: 54ch; }
.nf__l { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .75rem; }
.nf__l li { display: flex; align-items: flex-start; gap: .75rem; font-weight: 600; line-height: 1.45; }
.nf__l svg { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: rgba(255,255,255,.72); color: var(--brand-txt); margin-top: -.1rem; }
.nf--blau .nf__l svg, .nf--dunkel .nf__l svg { background: rgba(255,255,255,.14); color: var(--sand); }
.nf__karte {
  position: relative; display: grid; gap: .95rem; align-content: start;
  padding: clamp(1.5rem, 1rem + 1.8vw, 2.4rem); border-radius: var(--r4);
  background: var(--white); color: var(--tx-1); box-shadow: var(--e3);
}
.nf__kl { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--tx-3); }
.nf__nr {
  display: flex; align-items: center; gap: .85rem; color: var(--night);
  font-family: var(--f-disp); font-weight: 500; letter-spacing: -.02em; line-height: 1.05;
  font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.85rem); font-variant-numeric: tabular-nums;
}
a.nf__nr { min-height: 48px; transition: color var(--t1) var(--ez); }
a.nf__nr:hover { color: var(--brand); }
.nf__nri { flex: none; display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 10px 24px rgba(0,119,182,.35); }
.nf__kn { font-size: var(--fs-sm); color: var(--tx-2); }
.nf__btns { display: grid; gap: .7rem; margin-top: .3rem; }
.nf__btns .b { width: 100%; }
.b--wa { --bg: #157a45; box-shadow: 0 12px 28px rgba(21,122,69,.26); }   /* WhatsApp-Grün, dunkel genug für weiße Schrift */
@media (max-width: 940px) { .nf { grid-template-columns: minmax(0, 1fr); } .nf__t { max-width: 18ch; } }
@media (max-width: 760px) { .nf { border-radius: var(--r4); } .nf__nr { gap: .7rem; } .nf__nri { width: 2.7rem; height: 2.7rem; } }
@media (max-width: 520px) {
  .nf { padding: 1.6rem 1.2rem; }
  .nf__karte { padding: 1.3rem 1.1rem; }
  .nf__nr { font-size: clamp(1.25rem, 6.2vw, 1.75rem); white-space: nowrap; gap: .6rem; }
  .nf__nri { width: 2.4rem; height: 2.4rem; }
  .nf__nri svg { width: 20px; height: 20px; }
}

/* ---------- Kosten ---------- */
.ko { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5.5rem); align-items: center; }
.ko--solo { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.ko__ft { margin-top: 1.8rem; font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--tx-3); }
.ko__fl { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.ko__fl li { padding: .55rem 1rem; border-radius: var(--rp); background: var(--white); border: 1px solid var(--hair); font-size: .92rem; font-weight: 600; color: var(--tx-1); }
.bg-paper2 .ko__fl li { background: var(--paper); }
.ko__karte { position: relative; padding: clamp(1.6rem, 1rem + 2.4vw, 3rem); border-radius: var(--r4); background: var(--white); border: 1px solid var(--hair); box-shadow: var(--e2); }
.ko__gross { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem 1rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--hair); }
.ko__gross span {
  font-family: var(--f-disp); font-weight: 500; letter-spacing: -.05em; line-height: .9;
  font-size: clamp(4.2rem, 2.6rem + 6vw, 7.5rem); color: var(--brand);
  background: linear-gradient(120deg, var(--brand) 20%, var(--deep) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ko__gross small { font-size: var(--fs-lead); line-height: 1.35; color: var(--tx-2); max-width: 17ch; }
.ko__sl { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1.15rem; }
.ko__sl li { display: flex; gap: 1rem; align-items: flex-start; }
.ko__sl h3 { font-size: 1.14rem; margin-bottom: .2rem; }
.ko__sl p { color: var(--tx-2); }
.ko__i { flex: none; width: 46px; height: 46px; 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,.32)); }
@media (max-width: 940px) { .ko { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Vorher / Nachher ---------- */
.vn { margin: 0; }
.vn__bild {
  --vn: 50%;
  position: relative; overflow: hidden; border-radius: var(--r4); aspect-ratio: 3 / 2; box-shadow: var(--e3);
  width: 100%; max-height: max(360px, calc(100svh - 150px));   /* ganz im Bild, auch auf flachen Laptops */
  background: var(--paper-3); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize;
}
.vn__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vn__vor { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--vn)) 0 0); }
.vn__linie { position: absolute; top: 0; bottom: 0; left: var(--vn); width: 0; pointer-events: none; }
.vn__linie::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0,43,66,.12), 0 0 18px rgba(0,43,66,.25); }
.vn__griff {
  position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
  width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--night); box-shadow: 0 10px 28px rgba(0,43,66,.3);
  transition: transform var(--t1) var(--ez), box-shadow var(--t1) var(--ez);
}
.vn__bild:hover .vn__griff, .vn.is-zieh .vn__griff { transform: translate(-50%, -50%) scale(1.08); }
.vn__bild:focus-within .vn__griff { box-shadow: 0 0 0 4px var(--sand), 0 10px 28px rgba(0,43,66,.3); }
.vn__tag {
  position: absolute; top: clamp(.8rem, .5rem + 1vw, 1.4rem); padding: .5rem .95rem; border-radius: var(--rp);
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; pointer-events: none;
  background: rgba(0,43,66,.72); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity var(--t2) var(--ez);
}
.vn__tag--vor { left: clamp(.8rem, .5rem + 1vw, 1.4rem); }
.vn__tag--nach { right: clamp(.8rem, .5rem + 1vw, 1.4rem); background: rgba(255,255,255,.88); color: var(--night); }
.vn.links-leer .vn__tag--vor, .vn.rechts-leer .vn__tag--nach { opacity: 0; }
.vn__regler {                                   /* unsichtbar, aber mit Tastatur und Screenreader bedienbar */
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 44px; margin: 0; opacity: 0; pointer-events: none;
}
.vn__cap { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .8rem 2rem; margin-top: 1.1rem; }
.vn__l { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.vn__l li { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 600; color: var(--tx-1); }
.vn__l li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sand-dim); }
.vn__hinweis { margin-left: auto; font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--tx-3); }
@media (max-width: 760px) {
  .vn__bild { aspect-ratio: 4 / 3; border-radius: var(--r3); }
  .vn__griff { width: 3rem; height: 3rem; }
  .vn__tag { font-size: .74rem; padding: .4rem .72rem; letter-spacing: .16em; }
}

/* ---------- Großes Bild mit Text darauf ---------- */
.bb {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(440px, 22rem + 18vw, 680px); border-radius: var(--r5); box-shadow: var(--e2); background: var(--paper-3);
}
.bb__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--bb-pos, 50% 50%); }
.bb::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.bb--dunkel::before { background: linear-gradient(90deg, rgba(251,248,243,.93) 0%, rgba(251,248,243,.8) 30%, rgba(251,248,243,.25) 54%, rgba(251,248,243,0) 68%); }
.bb--hell::before   { background: linear-gradient(90deg, rgba(0,43,66,.84) 0%, rgba(0,43,66,.6) 34%, rgba(0,43,66,0) 66%); }
.bb--rechts { justify-content: flex-end; }
.bb--rechts::before { transform: scaleX(-1); }
.bb__text { width: min(100%, 38rem); padding: clamp(1.8rem, .8rem + 4vw, 5rem); }
.bb__t { font-size: var(--fs-xxl); line-height: .96; letter-spacing: -.045em; margin-top: 1.2rem; }
.bb__t .ital { color: var(--brand-txt); }
.bb__p { font-size: var(--fs-lead); line-height: 1.6; margin-top: 1.3rem; max-width: 36ch; color: var(--tx-1); }
.bb .btns { margin-top: 1.9rem; }
.bb--hell .bb__t, .bb--hell .bb__p { color: #fff; }
.bb--hell .bb__t .ital { color: var(--sand); }
.bb--hell .lab { color: var(--sand-lit); }
@media (max-width: 760px) {
  .bb { align-items: flex-start; min-height: 580px; border-radius: var(--r4); }
  .bb__img { object-position: var(--bb-pos-m, 75% 50%); }
  .bb--dunkel::before { background: linear-gradient(180deg, rgba(251,248,243,.95) 0%, rgba(251,248,243,.86) 42%, rgba(251,248,243,0) 70%); }
  .bb--hell::before   { background: linear-gradient(180deg, rgba(0,43,66,.86) 0%, rgba(0,43,66,.6) 45%, rgba(0,43,66,0) 72%); }
  .bb--rechts::before { transform: none; }
  .bb__text { padding: 1.9rem 1.5rem; }
}

/* ---------- Orte: hervorgehobener Ort ---------- */
.ft--haupt { position: relative; border-color: var(--sand-dim); background: linear-gradient(160deg, var(--white) 0%, var(--sand-lit) 140%); }
.ft__tag {
  position: absolute; top: 1.25rem; right: 1.25rem; padding: .38rem .8rem; border-radius: var(--rp);
  background: var(--night); color: #fff; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
}
.ft--haupt .ft__i { background: var(--sand); color: var(--night); }
.orte__nach {
  display: flex; align-items: center; justify-content: center; gap: .8rem; text-align: left;
  margin-top: clamp(1.1rem, .5rem + 1.8vw, 2.2rem); padding: 1.2rem 1.6rem; border-radius: var(--r3);
  border: 1.5px dashed var(--sand-dim); background: rgba(255,255,255,.55);
  font-size: var(--fs-lead); line-height: 1.45; color: var(--tx-1); font-weight: 500;
}
.orte__nach svg { flex: none; color: var(--brand); }
.bg-night .orte__nach, .bg-deep .orte__nach { background: rgba(255,255,255,.05); border-color: var(--hair-d); color: var(--dx-1); }
@media (max-width: 760px) { .orte__nach { justify-content: flex-start; padding: 1rem 1.1rem; font-size: 1rem; } }

@media (prefers-reduced-motion: reduce) {
  .nf__badge i { animation: none; }
}