/* ═══════════════════════════════════════════════════════════
   Spreewaldzeit
   Palette pulled from the hero footage. Never pure black or white.
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:      #0E1613;
  --ink-2:    #16211D;
  --water:    #1B2A25;
  --moss:     #2E4438;
  --reed:     #6E8779;
  --mist:     #C9D3CB;
  --paper:    #EFEBE2;
  --paper-2:  #E4DFD3;
  --ochre:    #C0873C;
  --ochre-soft:#D9A967;

  --f-display:"Fraunces", Georgia, "Times New Roman", serif;
  --f-body:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 64px);

  --r: 3px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* [hidden] must always win. Any author display declaration beats the UA
   stylesheet's display:none, which would leave hidden things on screen. */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--mist);
  font-family:var(--f-body);
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video,svg{ max-width:100%; display:block; }
a{ color:inherit; }

.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ochre); color:var(--ink); padding:12px 18px; font-weight:600;
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid var(--ochre-soft); outline-offset:3px; }

/* ── fixed environment layer ─────────────────────────────── */
.env{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 0%,  #1A2621 0%, transparent 60%),
    radial-gradient(90% 70% at 10% 100%, #16211D 0%, transparent 65%),
    linear-gradient(180deg, #0E1613 0%, #101A16 50%, #0D1512 100%);
}
/* The softness is painted into the gradient stops instead of being produced
   by filter:blur(). A blur on a layer that is also scaling cannot be cached,
   so it was re-rasterising a 1600px surface every frame, twice. This looks
   the same and costs nothing. Drift is translate-only for the same reason:
   the compositor can move a cached layer, it cannot resize one for free. */
.env__mist{
  position:absolute; border-radius:50%; opacity:.17;
  background:radial-gradient(closest-side,
    rgba(159,182,166,.55) 0%, rgba(159,182,166,.34) 34%,
    rgba(159,182,166,.13) 62%, rgba(159,182,166,0) 100%);
  will-change:transform; transform:translateZ(0);
}
.env__mist--a{ width:78vw; height:78vw; left:-22vw; top:2vh;  animation:drift-a 46s var(--ease) infinite alternate; }
.env__mist--b{ width:62vw; height:62vw; right:-18vw; top:48vh; animation:drift-b 61s var(--ease) infinite alternate; opacity:.13; }
@keyframes drift-a{ to{ transform:translate3d(8vw,-6vh,0);} }
@keyframes drift-b{ to{ transform:translate3d(-7vw,7vh,0);} }
.env__grain{
  position:absolute; inset:0; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){ .env__mist{ animation:none; } }

/* ── layout ──────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:820px; }

.sec{ position:relative; z-index:1; padding-block:clamp(72px,10vw,148px); }
.sec--dark{ background:var(--ink-2); }
.sec--flat{ background:var(--paper); color:var(--moss); }
.sec--alt{ background:var(--paper-2); }
.sec--calc{ background:var(--paper); color:var(--moss); }
.sec--faq{ background:var(--paper-2); color:var(--moss); }
.sec--intro{ background:var(--ink); }

.sec__head{ max-width:760px; margin-bottom:clamp(36px,5vw,68px); }

/* ── type ────────────────────────────────────────────────── */
.kicker{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ochre); margin:0 0 18px;
}
.sec--flat .kicker,.sec--calc .kicker,.sec--faq .kicker{ color:#9A6A26; }

.h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.9rem,4.4vw,3.35rem); line-height:1.08;
  letter-spacing:-.02em; margin:0 0 22px; color:var(--paper);
  font-variation-settings:"SOFT" 18,"WONK" 1;
}
.sec--flat .h2,.sec--calc .h2,.sec--faq .h2{ color:var(--ink); }

.lede{ font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--reed); margin:0; max-width:56ch; }
.sec--flat .lede,.sec--calc .lede,.sec--faq .lede{ color:#4E6455; }

.prose p{ margin:0 0 1.15em; max-width:62ch; }
.sec--intro .prose{ color:#A8BAAD; font-size:clamp(1rem,1.4vw,1.14rem); }
.sec--flat .prose{ color:#3E5347; }

.meta{ display:flex; flex-wrap:wrap; gap:8px 0; font-family:var(--f-mono); font-size:.74rem;
  letter-spacing:.08em; color:var(--reed); margin:0 0 16px; }
.meta span + span::before{ content:"·"; margin:0 .7em; opacity:.55; }
.meta--lg{ font-size:.8rem; margin-top:6px; }
.sec--flat .meta{ color:#6B8271; }

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  --bg:var(--ochre); --fg:#14100A;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  background:var(--bg); color:var(--fg);
  font-family:var(--f-body); font-weight:600; font-size:.95rem; letter-spacing:.01em;
  padding:15px 30px; border:1px solid var(--bg); border-radius:var(--r);
  text-decoration:none; cursor:pointer;
  transition:transform .5s var(--ease-out), background .35s var(--ease), box-shadow .5s var(--ease-out);
}
.btn:hover{ transform:translateY(-2px); background:var(--ochre-soft); border-color:var(--ochre-soft);
  box-shadow:0 10px 30px -12px rgba(192,135,60,.6); }
.btn:active{ transform:translateY(0); }
.btn--ghost{ background:transparent; color:currentColor; border-color:currentColor; opacity:.9; }
.btn--ghost:hover{ background:transparent; border-color:var(--ochre); color:var(--ochre); box-shadow:none; }
.btn--sm{ padding:10px 20px; font-size:.86rem; }
.btn--wide{ width:100%; padding:17px 30px; }

.link{
  display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:.92rem;
  color:#9A6A26; text-decoration:none; padding-bottom:2px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .45s var(--ease-out);
}
.link::after{ content:"→"; transition:transform .4s var(--ease-out); }
.link:hover{ background-size:100% 1px; }
.link:hover::after{ transform:translateX(4px); }

/* ── nav ─────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
  padding:16px var(--gut);
  /* backdrop-filter is deliberately NOT transitioned: animating the radius
     forces a fresh backdrop read every frame of the transition. */
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(14,22,19,.9);
  border-bottom-color:rgba(110,135,121,.2); padding-block:11px;
}
/* Only where the compositor can do it cheaply, and a smaller radius without
   the second saturate pass. The background alpha carries most of the effect. */
@supports (backdrop-filter:blur(1px)){
  .nav.is-stuck{ background:rgba(14,22,19,.72); backdrop-filter:blur(10px); }
}
.nav__mark{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--paper); margin-right:auto; }
.nav__glyph{ width:34px; height:20px; color:var(--ochre); flex:none; }
.nav__word{ font-family:var(--f-display); font-size:1.16rem; letter-spacing:-.01em; font-weight:500; }
.nav__links{ display:flex; gap:clamp(14px,2vw,28px); }
.nav__links a{
  font-size:.9rem; color:#A8BAAD; text-decoration:none; padding:4px 0; position:relative;
  transition:color .35s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--ochre); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.nav__links a:hover{ color:var(--paper); }
.nav__links a:hover::after{ transform:scaleX(1); }

.nav__burger{ display:none; width:40px; height:40px; background:none; border:0; cursor:pointer; padding:10px; }
.nav__burger span{ display:block; height:1.5px; background:var(--paper); border-radius:2px;
  transition:transform .4s var(--ease-out), opacity .3s; }
.nav__burger span + span{ margin-top:6px; }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

.nav-mobile{
  position:fixed; inset:64px 0 auto 0; z-index:59; display:grid;
  background:rgba(14,22,19,.985);
  border-bottom:1px solid rgba(110,135,121,.2); padding:8px var(--gut) 20px;
}
.nav-mobile a{ padding:14px 0; text-decoration:none; color:var(--mist); font-size:1.05rem;
  border-bottom:1px solid rgba(110,135,121,.14); }
.nav-mobile a:last-child{ border-bottom:0; color:var(--ochre); font-weight:600; }

@media (max-width:900px){
  .nav__links,.nav__cta{ display:none; }
  .nav__burger{ display:block; }
}

/* ═══════════════════ HERO ═══════════════════ */
.hero{ position:relative; z-index:1; background:var(--ink); }
.hero__track{ height:520vh; }
.hero__stage{ position:sticky; top:0; height:100svh; overflow:hidden; }

.hero__media{ position:absolute; inset:0; }
.hero__poster,.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 46%;
}
.hero__video{ opacity:0; transition:opacity 1.1s var(--ease); }
.hero.is-playing .hero__video{ opacity:1; }
.hero.is-playing .hero__poster{ opacity:0; transition:opacity 1.1s var(--ease); }

.hero__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(8,14,12,.55) 100%),
    linear-gradient(180deg, rgba(8,14,12,.5) 0%, transparent 22%, transparent 62%, rgba(8,14,12,.85) 100%);
}
/* the caption scrim: left third, where the trunks are darkest */
.hero__scrim{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(100deg, rgba(8,14,12,.88) 0%, rgba(8,14,12,.66) 26%, rgba(8,14,12,.22) 48%, transparent 66%);
  transition:opacity .7s var(--ease);
}
.hero.is-banding .hero__scrim{ opacity:1; }

/* loading ring */
.hero__loader{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:grid; justify-items:center; gap:14px; z-index:4;
}
.hero__loader svg{ width:44px; height:44px; transform:rotate(-90deg); }
.ring__bg{ stroke:rgba(201,211,203,.18); }
.ring__fg{ stroke:var(--ochre); transition:stroke-dashoffset .3s linear; }
.hero__loader-text{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--reed); }

/* caption bands */
.bands{ position:absolute; inset:0; z-index:3; pointer-events:none;
  display:flex; align-items:center; padding-inline:var(--gut); }
.band{
  position:absolute; left:var(--gut); max-width:min(30ch,44vw);
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .85s var(--ease), transform 1.05s var(--ease-out);
}
.band.is-on{ opacity:1; transform:none; }
.band__lead{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.7rem,3.9vw,3.1rem); line-height:1.06; letter-spacing:-.02em;
  color:var(--paper); margin:0 0 .35em;
  text-shadow:0 2px 30px rgba(6,12,10,.85), 0 1px 4px rgba(6,12,10,.6);
  font-variation-settings:"SOFT" 22,"WONK" 1;
}
.band__sub{
  font-size:clamp(1rem,1.6vw,1.24rem); color:#C6D2C8; margin:0;
  text-shadow:0 1px 18px rgba(6,12,10,.8);
}

/* the settle */
.settle{
  position:absolute; inset:auto 0 clamp(56px,9vh,110px) 0; z-index:3;
  display:grid; justify-items:center; text-align:center; gap:14px;
  padding-inline:var(--gut);
  opacity:0; transform:translate3d(0,30px,0); pointer-events:none;
  transition:opacity 1s var(--ease), transform 1.2s var(--ease-out);
}
.settle.is-on{ opacity:1; transform:none; pointer-events:auto; }
.settle__kicker{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ochre-soft); margin:0; }
.settle__word{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(2.7rem,8.5vw,6.4rem); line-height:.94; letter-spacing:-.035em;
  color:var(--paper); margin:0;
  text-shadow:0 4px 50px rgba(6,12,10,.8);
  font-variation-settings:"SOFT" 30,"WONK" 1;
}
.settle__line{ font-size:clamp(1rem,1.7vw,1.28rem); color:#C6D2C8; margin:0 0 8px;
  text-shadow:0 1px 18px rgba(6,12,10,.8); }
.settle__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.settle__actions .btn--ghost{ color:var(--paper); border-color:rgba(239,235,226,.5); }

.hero__hint{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  display:grid; justify-items:center; gap:8px;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(201,211,203,.6); transition:opacity .6s var(--ease);
}
.hero__hint svg{ width:12px; height:28px; animation:bob 2.6s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.5 } 50%{ transform:translateY(5px); opacity:1 } }
.hero.is-moving .hero__hint{ opacity:0; }
@media (prefers-reduced-motion:reduce){ .hero__hint svg{ animation:none; } }

/* static hero: the five gates fall back to this */
.hero.is-static .hero__track{ height:auto; }
.hero.is-static .hero__stage{ position:relative; height:100svh; min-height:560px; }
.hero.is-static .hero__loader,.hero.is-static .hero__hint{ display:none; }
.hero.is-static .bands{ display:none; }
.hero.is-static .hero__scrim{ opacity:1;
  background:linear-gradient(180deg, rgba(8,14,12,.55) 0%, transparent 35%, rgba(8,14,12,.9) 100%); }
.hero.is-static .settle{ opacity:1; transform:none; pointer-events:auto;
  inset:auto 0 clamp(44px,8vh,90px) 0; }

/* ── trust bar ───────────────────────────────────────────── */
.trust{ position:relative; z-index:1; background:var(--ochre); color:#14100A; }
.trust__list{
  display:flex; flex-wrap:wrap; justify-content:center; gap:0;
  list-style:none; margin:0 auto; padding:16px var(--gut); max-width:var(--wrap);
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
}
.trust__list li{ padding:4px 0; }
.trust__list li + li::before{ content:"·"; margin:0 clamp(12px,2.4vw,28px); opacity:.5; }

/* ── the Fließ line ──────────────────────────────────────── */
.fliess{
  position:absolute; left:50%; transform:translateX(-50%);
  width:min(760px,92vw); height:1400px; margin-top:-40px;
  color:var(--ochre); opacity:.22; z-index:0; pointer-events:none;
}
.fliess path{ stroke-dasharray:var(--len); stroke-dashoffset:var(--len); }

/* ── cards ───────────────────────────────────────────────── */
.cards{ display:grid; gap:clamp(20px,3vw,34px); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.card{
  background:var(--water); border:1px solid rgba(110,135,121,.2); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .6s var(--ease-out), border-color .5s var(--ease), box-shadow .6s var(--ease-out);
}
.card:hover{ transform:translateY(-4px); border-color:rgba(192,135,60,.45);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.8); }
.card__media{ display:block; aspect-ratio:4/3; position:relative; overflow:hidden; background:var(--ink-2); }
.card__body{ padding:clamp(20px,2.6vw,30px); display:flex; flex-direction:column; gap:10px; }
.card__title{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.35rem,2.4vw,1.8rem);
  margin:0; color:var(--paper); letter-spacing:-.015em; }
.card__body p{ margin:0; color:#A8BAAD; }
.card__price{ display:flex; align-items:baseline; gap:.4em; margin-top:6px !important; }
.price__from{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--reed); }
.price__num{ font-family:var(--f-display); font-size:1.7rem; color:var(--ochre-soft); }
.price__unit{ font-size:.86rem; color:var(--reed); }
.card .link{ color:var(--ochre-soft); margin-top:6px; align-self:flex-start; }

/* photo slots, until the real photographs arrive */
.slot{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--reed); padding:20px;
  background:
    repeating-linear-gradient(135deg, rgba(110,135,121,.05) 0 12px, transparent 12px 24px),
    var(--ink-2);
  border:1px dashed rgba(110,135,121,.3);
}
.slot--wide{ position:relative; aspect-ratio:21/7; }
.sec--flat .slot,.sec--alt .slot{ color:#8A9E90; background:
  repeating-linear-gradient(135deg, rgba(46,68,56,.06) 0 12px, transparent 12px 24px), rgba(46,68,56,.05);
  border-color:rgba(46,68,56,.25); }

/* ── flat detail ─────────────────────────────────────────── */
.flat{ display:grid; gap:clamp(28px,4vw,60px); grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  align-items:start; }
@media (max-width:860px){ .flat{ grid-template-columns:1fr; } }

.chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:26px 0 0; }
.chips li{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em;
  padding:7px 13px; border:1px solid rgba(46,68,56,.28); border-radius:100px; color:#4E6455;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.chips li:hover{ border-color:rgba(154,106,38,.6); color:#8A5F22; }

.flat__rates{
  background:rgba(46,68,56,.055); border:1px solid rgba(46,68,56,.16);
  border-radius:var(--r); padding:clamp(22px,2.8vw,32px); position:sticky; top:96px;
}
@media (max-width:860px){ .flat__rates{ position:static; } }
.rates__title{ font-family:var(--f-display); font-weight:400; font-size:1.5rem; margin:0 0 4px; color:var(--ink); }
.rates__note{ font-size:.86rem; color:#6B8271; margin:0 0 18px; }
.rates{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.rates th,.rates td{ text-align:right; padding:11px 0; border-bottom:1px solid rgba(46,68,56,.14); }
.rates thead th{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:#6B8271; font-weight:500; padding-bottom:8px; }
.rates tbody th{ text-align:left; font-weight:500; color:#3E5347; font-size:.95rem; }
.rates td{ font-family:var(--f-display); font-size:1.12rem; color:var(--ink); }
.rates tbody tr:last-child th,.rates tbody tr:last-child td{ border-bottom:0; }
.rates__fine{ list-style:none; padding:0; margin:18px 0 22px; font-size:.84rem; color:#6B8271; display:grid; gap:7px; }
.flat__rates .btn--ghost{ color:#8A5F22; width:100%; }

.gallery{ margin-top:clamp(34px,5vw,60px); display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); }
.gallery .slot--wide{ grid-column:1/-1; }

/* ── inclusive section ───────────────────────────────────── */
.incl{ display:grid; gap:clamp(30px,4vw,64px); grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:start; }
@media (max-width:860px){ .incl{ grid-template-columns:1fr; } }
.incl__list{ list-style:none; padding:0; margin:0 0 32px; display:grid; gap:0; }
.incl__list li{
  display:flex; align-items:center; gap:14px; padding:14px 0;
  border-bottom:1px solid rgba(110,135,121,.16); color:var(--paper); font-size:1.02rem;
}
.incl__list li::before{
  content:""; width:18px; height:18px; flex:none; border-radius:50%;
  background:var(--ochre);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.incl__extra{ border-left:2px solid var(--ochre); padding-left:20px; margin-bottom:28px; }
.incl__extra h3{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ochre); margin:0 0 8px; font-weight:500; }
.incl__extra p{ margin:0; color:#A8BAAD; }
.incl__punch{ font-family:var(--f-display); font-size:clamp(1.25rem,2.4vw,1.75rem); line-height:1.25;
  color:var(--paper); margin:0; letter-spacing:-.015em; }

/* ── calculator ──────────────────────────────────────────── */
.calc{
  background:rgba(46,68,56,.055); border:1px solid rgba(46,68,56,.16); border-radius:var(--r);
  padding:clamp(22px,3.2vw,40px); display:grid; gap:clamp(20px,2.6vw,30px);
}
.calc__group{ border:0; padding:0; margin:0; }
.calc__group legend{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:#6B8271; padding:0; margin-bottom:12px; display:flex; align-items:baseline; gap:.6em;
}
.calc__out{ font-family:var(--f-display); font-size:1.25rem; color:#8A5F22; letter-spacing:0; }

.seg{ display:grid; gap:10px; grid-template-columns:1fr 1fr; }
@media (max-width:620px){ .seg{ grid-template-columns:1fr; } }
.seg__opt{ position:relative; cursor:pointer; }
.seg__opt input{ position:absolute; opacity:0; width:0; height:0; }
.seg__opt span{
  display:grid; gap:3px; padding:15px 18px; border-radius:var(--r);
  border:1px solid rgba(46,68,56,.24); background:rgba(239,235,226,.55);
  font-weight:500; color:#3E5347;
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .45s var(--ease-out);
}
.seg__opt small{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.06em; color:#7C9080; font-weight:400; }
.seg__opt:hover span{ border-color:rgba(154,106,38,.45); }
.seg__opt input:checked + span{
  border-color:var(--ochre); background:rgba(192,135,60,.12); color:var(--ink);
}
.seg__opt input:focus-visible + span{ outline:2px solid var(--ochre-soft); outline-offset:2px; }

.calc__row{ display:grid; gap:clamp(20px,2.6vw,30px); grid-template-columns:1fr 1fr; }
@media (max-width:620px){ .calc__row{ grid-template-columns:1fr; } }

.range{
  -webkit-appearance:none; appearance:none; width:100%;
  /* A real, thumb-sized touch target. The visible 2px line lives on the track
     below, not on the input, so a finger has 34px to land in. */
  height:40px; background:transparent; outline:none; margin:4px 0 0;
  touch-action:pan-y;
}
.range::-webkit-slider-runnable-track{
  height:2px; border-radius:2px; background:rgba(46,68,56,.25);
}
.range::-moz-range-track{
  height:2px; border-radius:2px; background:rgba(46,68,56,.25);
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--ochre); border:3px solid var(--paper); cursor:pointer;
  box-shadow:0 2px 10px rgba(154,106,38,.5);
  transition:transform .3s var(--ease-out);
  margin-top:-10px;            /* centre the thumb on a 2px track */
}
.range::-webkit-slider-thumb:hover{ transform:scale(1.12); }
.range::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:var(--ochre);
  border:3px solid var(--paper); cursor:pointer; box-shadow:0 2px 10px rgba(154,106,38,.5);
}
.range__ticks{ display:flex; justify-content:space-between; font-family:var(--f-mono);
  font-size:.66rem; color:#7C9080; }

.calc__warn{
  margin:0; padding:12px 16px; border-left:2px solid var(--ochre);
  background:rgba(192,135,60,.1); color:#8A5F22; font-size:.88rem;
}

.calc__result{
  display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,50px); align-items:flex-end;
  padding-top:clamp(18px,2.4vw,26px); border-top:1px solid rgba(46,68,56,.16);
}
.result__label{ display:block; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:#6B8271; margin-bottom:6px; }
.result__num{ font-family:var(--f-display); font-size:clamp(1.6rem,3vw,2.1rem); color:var(--ink);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.result__num--big{ font-size:clamp(2.4rem,6vw,3.6rem); color:#9A6A26; }
.result__total{ margin-left:auto; text-align:right; }
@media (max-width:620px){ .result__total{ margin-left:0; text-align:left; } }
.calc__fine{ margin:0; font-size:.86rem; color:#6B8271; }

/* ── Gegend ──────────────────────────────────────────────── */
.gegend{ display:grid; gap:clamp(28px,4vw,56px); grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:start; }
@media (max-width:900px){ .gegend{ grid-template-columns:1fr; } }
.places{ list-style:none; padding:0; margin:0; display:grid; gap:0; }
.place{ padding:20px 0; border-bottom:1px solid rgba(110,135,121,.16);
  display:grid; grid-template-columns:88px 1fr; gap:0 22px; align-items:baseline; }
@media (max-width:520px){ .place{ grid-template-columns:1fr; gap:6px; } }
.place__dist{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ochre); }
.place h3{ font-family:var(--f-display); font-weight:400; font-size:1.22rem; margin:0 0 5px; color:var(--paper); }
.place p{ margin:0; grid-column:2; color:#A8BAAD; font-size:.96rem; }
@media (max-width:520px){ .place p{ grid-column:1; } }
.gegend__fig{ margin:0; position:sticky; top:96px; }
@media (max-width:900px){ .gegend__fig{ position:static; } }
.gegend__fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r); }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq{ display:grid; }
.q{ border-bottom:1px solid rgba(46,68,56,.16); }
.q summary{
  list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative;
  font-family:var(--f-display); font-size:clamp(1.05rem,1.9vw,1.3rem); color:var(--ink);
  transition:color .35s var(--ease);
}
.q summary::-webkit-details-marker{ display:none; }
.q summary:hover{ color:#8A5F22; }
.q summary::after{
  content:""; position:absolute; right:6px; top:50%; width:12px; height:12px; margin-top:-6px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .45s var(--ease-out); color:var(--ochre);
}
.q[open] summary::after{ transform:rotate(135deg); }
.q__a{ padding:0 0 22px; color:#4E6455; max-width:64ch; overflow:hidden; }
.q__a p{ margin:0; }
.q[open] .q__a{ animation:unfold .5s var(--ease-out); }
@keyframes unfold{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){ .q[open] .q__a{ animation:none; } }

/* ── Anfrage ─────────────────────────────────────────────── */
.anfrage{ display:grid; gap:clamp(30px,4vw,64px); grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:start; }
@media (max-width:900px){ .anfrage{ grid-template-columns:1fr; } }
.direct{ margin-top:32px; padding-left:20px; border-left:2px solid var(--ochre); }
.direct__title{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ochre); margin:0 0 10px; }
.direct p{ margin:0 0 4px; }
.direct a{ color:var(--paper); text-decoration:none; border-bottom:1px solid rgba(192,135,60,.5);
  transition:border-color .35s var(--ease), color .35s var(--ease); }
.direct a:hover{ color:var(--ochre-soft); border-color:var(--ochre-soft); }

.form{ display:grid; gap:16px; grid-template-columns:1fr 1fr; }
.field{ display:grid; gap:7px; grid-column:1/-1; }
.field--half{ grid-column:span 1; }
.field--full{ grid-column:1/-1; }
@media (max-width:560px){ .field--half{ grid-column:1/-1; } }
.field label{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--reed); }
.opt{ text-transform:none; letter-spacing:.04em; opacity:.7; }
.field input,.field select,.field textarea{
  font-family:var(--f-body); font-size:1rem; color:var(--paper);
  background:rgba(239,235,226,.05); border:1px solid rgba(110,135,121,.26); border-radius:var(--r);
  padding:13px 15px; width:100%; transition:border-color .35s var(--ease), background .35s var(--ease);
}
.field input:hover,.field select:hover,.field textarea:hover{ border-color:rgba(110,135,121,.5); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--ochre); background:rgba(192,135,60,.07);
}
.field input[aria-invalid="true"]{ border-color:#B4623F; }
.field textarea{ resize:vertical; min-height:110px; }
.field select{ appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E8779' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:12px; padding-right:40px; }
.form__consent{ grid-column:1/-1; font-size:.82rem; color:var(--reed); margin:0; }
.form__consent a{ color:var(--ochre-soft); }
.form button{ grid-column:1/-1; }
.form__status{ grid-column:1/-1; margin:0; font-size:.92rem; min-height:1.4em; }
.form__status.is-ok{ color:var(--ochre-soft); }
.form__status.is-err{ color:#D98A6B; }
.form.is-sent .field,.form.is-sent .form__consent,.form.is-sent button{ display:none; }
.form.is-sent .form__status{ font-family:var(--f-display); font-size:1.35rem; }

/* ── footer ──────────────────────────────────────────────── */
.foot{ position:relative; z-index:1; background:var(--ink); padding-block:clamp(48px,6vw,80px) 40px;
  border-top:1px solid rgba(110,135,121,.16); }
.foot__top{ display:flex; flex-wrap:wrap; gap:20px; align-items:baseline; justify-content:space-between;
  padding-bottom:26px; border-bottom:1px solid rgba(110,135,121,.14); }
.foot__mark{ font-family:var(--f-display); font-size:clamp(1.6rem,3.4vw,2.3rem); color:var(--paper);
  margin:0; letter-spacing:-.02em; font-weight:300; }
.foot__links{ display:flex; gap:24px; }
.foot__links a{ color:var(--reed); text-decoration:none; font-size:.92rem;
  transition:color .35s var(--ease); }
.foot__links a:hover{ color:var(--ochre-soft); }
.foot__bottom{ padding-top:26px; display:grid; gap:16px; font-size:.88rem; color:var(--reed); }
.foot__bottom a{ color:#A8BAAD; text-decoration:none; border-bottom:1px solid rgba(110,135,121,.35); }
.foot__bottom a:hover{ color:var(--ochre-soft); }
.foot__note{ max-width:70ch; font-size:.82rem; opacity:.8; margin:0; }
.foot__copy{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; margin:0; opacity:.7; }
.foot__bottom p{ margin:0; }

/* ── reveal on scroll ─────────────────────────────────────
   Only ever hidden when JavaScript is actually running. With JS off,
   or if the observer never fires, every section stays readable. The
   animation is a nicety; being visible is the requirement. */
.js .reveal{ opacity:0; transform:translate3d(0,22px,0);
  transition:opacity .9s var(--ease), transform 1.05s var(--ease-out); }
.js .reveal.is-in{ opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:.07s; }
.reveal:nth-child(3){ transition-delay:.14s; }
.place.is-in:nth-child(n){ transition-delay:calc(var(--i,0) * .06s); }

@media (prefers-reduced-motion:reduce){
  .reveal,.band,.settle,.card,.btn,.q__a{ transition:none !important; }
  .js .reveal,.reveal{ opacity:1; transform:none; }
  .band,.settle{ opacity:1; transform:none; }
}

/* ═══════════════════════ BELEGUNGSKALENDER ═══════════════════════ */
.kal{
  background:rgba(46,68,56,.055); border:1px solid rgba(46,68,56,.16); border-radius:var(--r);
  padding:clamp(20px,3vw,38px); display:grid; gap:clamp(20px,2.6vw,30px);
}
.kal__group{ border:0; padding:0; margin:0; }
.kal__group legend{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:#6B8271; padding:0; margin-bottom:12px; display:flex; align-items:baseline; gap:.6em;
}
.kal__out{ font-family:var(--f-display); font-size:1.25rem; color:#8A5F22; letter-spacing:0; }
.kal__group--guests{ max-width:360px; }

.kal__nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.kal__title{ font-family:var(--f-display); font-size:clamp(1.05rem,2vw,1.35rem); color:var(--ink);
  margin:0; text-align:center; flex:1; }
.kal__arrow{
  width:40px; height:40px; flex:none; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid rgba(46,68,56,.28); border-radius:50%; color:#3E5347;
  transition:border-color .35s var(--ease), color .35s var(--ease), transform .4s var(--ease-out);
}
.kal__arrow svg{ width:15px; height:15px; }
.kal__arrow:hover:not(:disabled){ border-color:var(--ochre); color:#8A5F22; }
.kal__arrow:disabled{ opacity:.3; cursor:not-allowed; }

.kal__grid{ display:grid; gap:clamp(18px,3vw,40px); grid-template-columns:1fr; }
@media (min-width:760px){ .kal__grid{ grid-template-columns:1fr 1fr; } }

.kal__caption{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:#6B8271; margin:0 0 10px; text-align:center;
}
.kal__week{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.kal__week--head{ margin-bottom:6px; }
.kal__week--head span{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.08em; color:#8A9E90;
  text-align:center; padding:4px 0;
}
.kal__pad{ }
.kal__day{
  aspect-ratio:1/1; display:grid; place-items:center; cursor:pointer;
  font-family:var(--f-body); font-size:.9rem; font-variant-numeric:tabular-nums;
  color:#3E5347; background:rgba(239,235,226,.6);
  border:1px solid transparent; border-radius:3px; padding:0;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.kal__day.is-high{ background:rgba(192,135,60,.09); }
.kal__day:hover:not(:disabled){ border-color:var(--ochre); color:var(--ink); }
.kal__day:disabled{ cursor:not-allowed; color:#B3BFB6; background:transparent; }
.kal__day.is-blocked{ color:#A3AFA6; background:rgba(46,68,56,.13); text-decoration:line-through; }
.kal__day.is-mid{ background:rgba(192,135,60,.26); color:var(--ink); border-radius:0; }
.kal__day.is-from,.kal__day.is-to{
  background:var(--ochre); color:#14100A; font-weight:600; border-color:var(--ochre);
}
.kal__day.is-from{ border-radius:3px 0 0 3px; }
.kal__day.is-to{ border-radius:0 3px 3px 0; }
.kal__day.is-from.is-to{ border-radius:3px; }

.kal__legend{ display:flex; flex-wrap:wrap; gap:16px; margin-top:18px; }
.kal__key{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; color:#6B8271;
  display:inline-flex; align-items:center; gap:7px; }
.kal__key::before{ content:""; width:13px; height:13px; border-radius:3px; flex:none; }
.kal__key--high::before{ background:rgba(192,135,60,.18); }
.kal__key--blocked::before{ background:rgba(46,68,56,.2); }
.kal__key--pick::before{ background:var(--ochre); }
.kal__note{ margin:12px 0 0; font-size:.84rem; color:#6B8271; max-width:62ch; }

.kal__summary{
  display:flex; flex-wrap:wrap; gap:clamp(16px,3vw,36px); align-items:flex-end;
  padding-top:clamp(16px,2.2vw,24px); border-top:1px solid rgba(46,68,56,.16);
}
.kal__lab{ display:block; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:#6B8271; margin-bottom:5px; }
.kal__val{ font-family:var(--f-display); font-size:1.15rem; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.kal__reset{
  margin-left:auto; background:none; border:0; cursor:pointer; padding:4px 0;
  font-family:var(--f-body); font-size:.86rem; color:#8A5F22;
  border-bottom:1px solid rgba(154,106,38,.4);
}
.kal__reset:hover{ border-bottom-color:#8A5F22; }
.calc__warn.is-hint{ border-left-color:var(--reed); background:rgba(46,68,56,.07); color:#4E6455; }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.btn:disabled:hover{ transform:none; background:var(--ochre); border-color:var(--ochre); box-shadow:none; }

/* ═══════════════════════ BILDERGALERIE ═══════════════════════ */
.gallery-wrap{ margin-top:clamp(34px,5vw,64px); }
.gallery__title{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:#9A6A26; margin:0 0 18px; font-weight:500;
}
.gallery{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.shot{
  padding:0; border:0; background:var(--ink-2); cursor:pointer; display:block;
  border-radius:var(--r); overflow:hidden; position:relative; line-height:0;
}
.shot img{
  width:100%; height:100%; aspect-ratio:3/2; object-fit:cover; display:block;
  transition:transform .8s var(--ease-out), opacity .5s var(--ease);
}
.shot::after{
  content:""; position:absolute; inset:0; border:1px solid transparent; border-radius:var(--r);
  transition:border-color .35s var(--ease); pointer-events:none;
}
.shot:hover img{ transform:scale(1.05); }
.shot:hover::after{ border-color:var(--ochre); }
.card__media img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1s var(--ease-out); }
.card:hover .card__media img{ transform:scale(1.04); }

/* ═══════════════════════ LIGHTBOX ═══════════════════════ */
.lb{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(8,14,12,.965); padding:clamp(16px,4vw,56px);
  animation:lb-in .3s var(--ease-out);
}
@keyframes lb-in{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ .lb{ animation:none; } }
.lb__figure{ margin:0; display:grid; gap:14px; justify-items:center; max-width:100%; max-height:100%; }
.lb__img{
  max-width:min(1400px,92vw); max-height:78svh; width:auto; height:auto;
  object-fit:contain; border-radius:var(--r);
}
.lb__cap{ font-size:.92rem; color:#A8BAAD; text-align:center; margin:0; max-width:60ch; }
.lb__count{
  position:absolute; bottom:clamp(14px,3vw,26px); left:50%; transform:translateX(-50%);
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; color:var(--reed); margin:0;
}
.lb__close,.lb__nav{
  position:absolute; display:grid; place-items:center; cursor:pointer;
  background:rgba(239,235,226,.08); border:1px solid rgba(201,211,203,.22); border-radius:50%;
  color:var(--paper); transition:background .3s var(--ease), border-color .3s var(--ease);
}
.lb__close:hover,.lb__nav:hover{ background:rgba(192,135,60,.25); border-color:var(--ochre); }
.lb__close{ top:clamp(14px,3vw,26px); right:clamp(14px,3vw,26px); width:46px; height:46px; }
.lb__close svg{ width:19px; height:19px; }
.lb__nav{ top:50%; transform:translateY(-50%); width:46px; height:46px; }
.lb__nav svg{ width:16px; height:16px; }
.lb__nav--prev{ left:clamp(10px,2vw,26px); }
.lb__nav--next{ right:clamp(10px,2vw,26px); }
@media (max-width:560px){
  .lb__nav{ top:auto; bottom:clamp(48px,12vw,70px); transform:none; }
}

/* ── small screens: bigger day targets, two photos per row ── */
@media (max-width:560px){
  .kal{ padding:16px 14px; }
  .kal__week{ gap:2px; }
  .kal__summary{ gap:14px 22px; }
  .gallery{ gap:6px; grid-template-columns:repeat(2,1fr); }
  .kal__legend{ gap:10px 14px; }
}

/* ═══════════════════════ RUNDGANG (walkthrough video) ═══════════════════════ */
.tour{ margin:clamp(34px,5vw,60px) 0 0; }
.tour__title{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:#9A6A26; margin:0 0 18px; font-weight:500;
}
.tour__frame{
  position:relative; border-radius:var(--r); overflow:hidden; background:var(--ink);
  aspect-ratio:16/9; box-shadow:0 30px 60px -40px rgba(0,0,0,.7);
}
.tour__video{ width:100%; height:100%; object-fit:cover; display:block; }

/* The still lives in the markup as a real, lazy <img> rather than in the
   video's poster attribute: a poster is fetched the moment the page loads
   however preload is set, so every visitor paid for it whether or not they
   ever pressed play. */
.tour__still{ position:absolute; inset:0; z-index:1; }
.tour__still img{ width:100%; height:100%; object-fit:cover; display:block; }
.tour__play{ z-index:2; }
.tour.is-playing .tour__still{ display:none; }

.tour__play{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(180deg, rgba(8,14,12,.15) 0%, rgba(8,14,12,.5) 100%);
  border:0; cursor:pointer; color:var(--paper);
  font-family:var(--f-body); font-weight:600; font-size:.95rem;
  transition:background .4s var(--ease), opacity .4s var(--ease);
}
.tour__play svg{
  width:64px; height:64px; padding:18px; border-radius:50%;
  background:var(--ochre); color:#14100A;
  transition:transform .5s var(--ease-out), background .35s var(--ease);
}
.tour__play:hover{ background:linear-gradient(180deg, rgba(8,14,12,.05) 0%, rgba(8,14,12,.4) 100%); }
.tour__play:hover svg{ transform:scale(1.08); background:var(--ochre-soft); }
.tour.is-playing .tour__play{ opacity:0; pointer-events:none; }

.tour__cap{
  margin:16px 0 0; font-size:.88rem; color:#6B8271; max-width:66ch;
}
.sec--alt .tour__cap{ color:#6B8271; }


/* ── containment ──────────────────────────────────────
   Layout and style only. Deliberately NOT content-visibility: that also
   contains size, so a section that has not been reached yet is shorter than
   it will be, and every anchor below it lands in the wrong place. On a page
   whose entire navigation is anchor links that trade is not worth the paint
   it saves. This just stops one gallery's recalculation from walking the rest
   of the document, and it changes no geometry at all. */
.gallery, .cards, .q{ contain:layout style; }

/* <picture> is an inline box by default, which would put a text baseline gap
   under every photograph inside a grid cell. */
picture{ display:block; }


/* ── mobile ──────────────────────────────────────────────────────────────
   Everything below is about a finger rather than a cursor. Measured on a
   375px viewport: thirteen controls came in under 40px tall, and the mono
   labels bottomed out near 10px, which is legible on a desktop at arm's
   length and not on a phone. */

/* Touch targets are about the input device, not the screen width. A 768px
   tablet is still a finger, and the nav already switches to the burger at
   900px, so the touch rules cover the same ground the mobile layout does. */
@media (hover:none) and (pointer:coarse), (max-width:900px){

  /* Touch targets. 44px is the figure both Apple and Google publish, and the
     links that failed it were the inline ones whose height was pure line-box:
     "Wohnung ansehen", the footer column, the contact details. Padding is
     added rather than min-height so nothing is stretched into a block. */
  .link{ padding-block:9px; }
  .foot__links a,
  .foot__bottom a,
  .foot__note a{ display:inline-block; padding-block:11px; }

  /* The consent line sits inside a paragraph, so the link cannot become a
     block without breaking the sentence. Padding plus a negative margin grows
     the hit area without moving the text or opening a gap in the line. */
  .form__consent a{
    display:inline-block; padding-block:12px; margin-block:-12px;
  }
  .nav__mark{ min-height:44px; }

  /* A tel: or mailto: link is the one a visitor is most likely to be aiming
     at one-handed, so it gets the most room. */
  a[href^="tel:"], a[href^="mailto:"]{ display:inline-block; padding-block:12px; }

  /* The calendar is the one grid where every cell is a control. 42px was
     workable; this takes it to the full 44 and stops the row wrapping. */
  .kal__day, .kal__pad{ min-height:44px; }
  .kal__arrow{ width:44px; height:44px; }
}

/* Type floor. Unlike the tap targets this really is about screen size: the
   mono labels are set in em against a small base and compound down to about
   10px, which is legible on a desktop at arm's length and not on a phone. */
@media (max-width:760px){
  .kicker, .settle__kicker{ font-size:.72rem; }
  .kal__lab, .kal__key, .result__label,
  .meta, .opt{ font-size:.74rem; }
  .kal__title{ font-size:1.05rem; }
  .seg__opt small, .card__body small, .flat small{ font-size:.76rem; }
}

/* The drifting mist is decoration. On a phone it is a full-screen fixed layer
   animating for the entire visit, which costs battery for something nobody
   scrolled here to see. Held still on coarse pointers; the gradient stays. */
@media (hover:none) and (pointer:coarse){
  .env__mist{ animation:none; }
}