/* „Kino+“ – Startseite (index.html). Basis: base.css */
.welcome-quote{font-size:clamp(1.45rem,1.05rem + 1.9vw,2.5rem);font-weight:300;line-height:1.25;letter-spacing:-.02em;margin:0 0 1.5rem;text-wrap:balance}
.triptych{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:auto auto;gap:clamp(.6rem,1.4vw,1rem)}
.triptych a{border-radius:var(--r);overflow:hidden;position:relative;display:block;cursor:zoom-in}
.triptych a:first-child{grid-row:span 2;aspect-ratio:3/4}
.triptych a:not(:first-child){aspect-ratio:4/3}
.triptych picture{height:100%}
.facts-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:1px;margin-top:clamp(3rem,6vw,5rem);background:var(--c-line);border:1px solid var(--c-line);border-radius:var(--r);overflow:hidden}
.facts-row div{background:var(--c-bg);padding:1.3rem 1.2rem}
/* 5 Kacheln ohne leere graue Zelle: Telefon 2 + 2 + 1 (breit), mittlere Breiten 3 + 2, ab 900 px eine Reihe (auto-fit) */
@media (max-width:899px){.facts-row{grid-template-columns:1fr 1fr}
.facts-row div:last-child:nth-child(odd){grid-column:span 2}
}
@media (min-width:560px) and (max-width:899px){.facts-row{grid-template-columns:repeat(6,1fr)}
.facts-row div{grid-column:span 2}
.facts-row:has(> :nth-child(5):last-child) div:nth-child(n+4){grid-column:span 3}
}
.facts-row b{display:block;font-size:clamp(1.6rem,1.25rem + 1.4vw,2.3rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--c-primary)}
.facts-row span{font-size:.92rem;color:var(--c-muted)}
.host{display:flex;gap:1rem;align-items:center;margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--c-line)}
.host .mono{width:3.2rem;height:3.2rem;border-radius:50%;display:grid;place-items:center;background:var(--c-primary);color:var(--c-primary-ink);font-size:1.3rem;font-weight:600;flex:none}
.host p{margin:0;font-size:.95rem}
.story{display:grid;gap:1.5rem}
.story__media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.5rem,1.4vw,1rem);width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto}
.story__media picture{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.story__panels{display:grid;gap:1rem;width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto}
@media (min-width:700px){.story__panels{grid-template-columns:1fr 1fr}
}
.panel__card{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r);padding:clamp(1.4rem,3vw,2.4rem);box-shadow:var(--shadow)}
.panel__card h3{margin-bottom:.4em}
.panel__card p:last-child,.panel__card ul:last-child{margin-bottom:0}
.moment{position:relative;height:clamp(26rem,80svh,56rem);overflow:hidden;display:grid;align-items:end;color:#fff;background:var(--c-water)}
.moment > picture{position:absolute;inset:0}
.moment::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--c-hero-overlay),color-mix(in srgb,var(--c-hero-overlay) 45%,transparent) 30%,transparent 55%)}
.moment__text{position:relative;z-index:1;padding-block:clamp(2rem,6vw,4.5rem);text-shadow:var(--tshadow)}
.moment__text h2{font-size:clamp(2.3rem,1.4rem + 4.4vw,5.4rem);letter-spacing:-.035em;font-weight:700;margin-bottom:.2em}
.moment__text p{font-size:clamp(1.05rem,1rem + .45vw,1.3rem);max-width:36rem;margin:0;font-weight:500}
.moment .kicker{color:inherit}
/* .rail / .rail-ctrl / .gallery: alte Wischreihen – nur noch von varianten/ benutzt (Startseite: .mag-rail aus base.css) */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:var(--col,min(82%,22rem));gap:clamp(.75rem,1.6vw,1.25rem);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:.5rem var(--gutter) 1.5rem;scrollbar-width:thin;scrollbar-color:var(--c-line) transparent}
.rail > *{scroll-snap-align:start}
.rail-ctrl{display:none;gap:.5rem}
.rail-ctrl button{width:44px;height:44px;border-radius:50%;border:1px solid var(--c-line);background:var(--c-bg);color:var(--c-text);cursor:pointer;display:grid;place-items:center}
.rail-ctrl button:hover{background:var(--c-surface-2)}
@media (hover:hover) and (min-width:700px){.rail-ctrl{display:flex}
.rail-ctrl[hidden]{display:none}
}
.rail-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
.rail-head h3{margin:0}
.rail-head p{margin:.3rem 0 0;color:var(--c-muted);font-size:.95rem}
.gallery{--col:min(85%,30rem)}
.gallery figure{margin:0}
.gallery a,.vid-card{display:block;position:relative;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:var(--c-surface-2)}
.gallery a{cursor:zoom-in}
.gallery picture{height:100%}
.gallery figcaption{font-size:.9rem;color:var(--c-muted);padding:.55rem .2rem 0}
.vid-card video,.vid-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid-card video{opacity:0;transition:opacity .6s}
.vid-card video.is-playing{opacity:1}
.pool-grid{display:grid;gap:clamp(2rem,5vw,4rem);margin-bottom:clamp(2.5rem,5vw,4rem)}
@media (min-width:900px){.pool-grid{grid-template-columns:1fr 1fr}
}
.feature-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.75rem;list-style:none;margin:0;padding:0}
.feature-list li{padding:1rem 1.1rem;border-radius:16px;background:var(--c-surface);border:1px solid var(--c-line)}
.feature-list b{display:block;font-size:1.08rem;font-weight:600;letter-spacing:-.01em}
.feature-list span{font-size:.92rem;color:var(--c-muted)}
.seasons{display:grid;gap:1rem}
@media (min-width:800px){.seasons{grid-template-columns:repeat(3,1fr)}
}
.season{padding:1.5rem;border-radius:var(--r);background:var(--c-surface);border-top:4px solid var(--c-water)}
.season .kicker{margin:0 0 .3rem}
.season h3{margin-bottom:.1em}
.season .temp{display:inline-block;line-height:1.35;margin:.3rem 0 .8rem;padding:.2rem .7rem;border-radius:.9em;font-size:.85rem;font-weight:600;background:var(--c-dark);color:var(--c-dark-ink)}
.season p{font-size:.95rem;margin:0}
.fav-h{margin:clamp(2.5rem,5vw,4rem) 0 1rem}
.favs{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));align-items:stretch}
.favs li{display:grid}
.favs a{display:grid;gap:.1rem;padding:.85rem 1rem;border-radius:14px;border:1px solid var(--c-line);background:var(--c-surface);color:inherit;text-decoration:none;transition:translate .3s var(--ease),border-color .3s}
.favs a:hover{translate:0 -2px;border-color:var(--c-primary)}
.favs b{font-weight:600}
.favs span{font-size:.85rem;color:var(--c-primary);font-weight:500}
.contact{position:relative;color:var(--c-text);background:var(--c-surface);overflow:hidden}
.contact > picture{position:absolute;inset:-12px;filter:blur(3px) saturate(.9)}
.contact::after{content:"";position:absolute;inset:0;background:linear-gradient(175deg,color-mix(in srgb,var(--c-surface) 74%,transparent),color-mix(in srgb,var(--c-bg) 84%,transparent) 45%,color-mix(in srgb,var(--c-bg) 94%,transparent) 85%)}
.contact .wrap{position:relative;z-index:1}
.contact-grid{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:980px){.contact-grid{grid-template-columns:.85fr 1.15fr;align-items:start}
.contact-intro{position:sticky;top:calc(var(--head-h) + 2rem)}
}
.contact-intro a:not(.btn){color:var(--c-primary)}
/* Handy/Tablet: Formular gleich nach der Einleitung, Telefon/WhatsApp/E-Mail darunter (die Gäste sollen das Formular nutzen) */
.quick-alt{display:none}
@media (max-width:979px){.contact-intro{display:contents}
.contact-intro > *{order:1}
.contact-grid > .form-card{order:2}
.contact-intro > .quick-alt{order:3;display:block;margin:0 0 -1.2rem;font-weight:600}
.contact-intro > .quick{order:4;margin:0}
.contact-intro > .arrive{order:5}
.contact-grid{gap:clamp(1.25rem,4vw,2rem)}
}
.quick{display:grid;gap:.7rem;margin:1.6rem 0}
.quick a{display:flex;align-items:center;gap:.9rem;min-height:64px;padding:.7rem 1rem;border-radius:18px;text-decoration:none;color:var(--c-text);background:color-mix(in srgb,var(--c-bg) 88%,transparent);border:1px solid var(--c-line);box-shadow:var(--shadow);transition:background-color .2s,translate .2s var(--ease)}
.quick a:hover{background:var(--c-bg);translate:4px 0}
.quick .ico{width:2.6rem;height:2.6rem;padding:.55rem;border-radius:50%;background:var(--c-primary);color:var(--c-primary-ink)}
.quick b{display:block;font-size:1.02rem}
.quick small{font-size:.85rem;color:var(--c-muted)}
.form-card{background:var(--c-bg);color:var(--c-text);border:1px solid var(--c-line);border-radius:calc(var(--r) + 6px);padding:clamp(1.3rem,4vw,2.5rem);box-shadow:0 30px 70px -34px color-mix(in srgb,var(--c-dark) 45%,transparent)}
.form-card a{color:var(--c-primary)}
.form-card :focus-visible{outline-color:var(--c-primary)}
.form-card h3{margin-bottom:.2em}
form{display:grid;gap:1.1rem}
fieldset{border:0;margin:0;padding:0;display:grid;gap:.8rem;min-width:0}
legend{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c-primary);padding:0;margin-bottom:.8rem}
.row{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr))}
.field{display:grid;gap:.3rem}
.field label,.field > span{font-size:.9rem;font-weight:600}
.field label i{font-style:normal;font-weight:400;color:var(--c-muted)}
input,select,textarea{font:inherit;font-size:1rem;color:var(--c-text);background:var(--c-bg);width:100%;min-height:48px;padding:.65rem .85rem;border:1.5px solid var(--c-line);border-radius:12px;transition:border-color .2s,box-shadow .2s}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--c-text) 35%,var(--c-line))}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-primary) 22%,transparent)}
textarea{min-height:7rem;resize:vertical}
/* Handy: Felder dürfen schmaler werden als ihr Inhalt (iOS gibt Datumsfeldern sonst eine feste Mindestbreite → das Formular läuft
   rechts über), einheitliches Aussehen statt nativer iOS-Felder (Verlauf, zentriertes Datum, eigener Pfeil) */
.field{min-width:0}
input,select,textarea{min-width:0;max-width:100%;-webkit-appearance:none;appearance:none}
select{padding-right:2.6rem;background:var(--c-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b5897' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center / 1.15rem}
input[type=date]{display:block;text-align:left;line-height:1.4}
input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
input[type=date]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}
@supports (-webkit-touch-callout:none){   /* nur iOS Safari: dort gibt es kein Kalender-Symbol im Feld */
  input[type=date]{padding-right:2.6rem;background:var(--c-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b5897' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat right .8rem center / 1.15rem}
  input[type=date]:not(:focus)[value=""],input[type=date]:not(:focus):not([value]){color:var(--c-muted)}
}
input:user-invalid,textarea:user-invalid{border-color:var(--c-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-accent) 14%,transparent)}
.seg{display:flex;flex-wrap:wrap;gap:.5rem}
.seg label{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:.45rem 1rem;border-radius:999px;border:1.5px solid var(--c-line);cursor:pointer;font-size:.95rem;font-weight:500}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;min-height:0;margin:0;cursor:pointer}
.seg label:has(:checked){background:var(--c-primary);color:var(--c-primary-ink);border-color:var(--c-primary)}
.seg label:has(:focus-visible){outline:3px solid var(--c-primary);outline-offset:2px}
.more-addr summary{cursor:pointer;font-size:.92rem;font-weight:600;color:var(--c-primary);min-height:44px;display:flex;align-items:center}
.more-addr .row{margin-top:.4rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.submit{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center}
.submit .hint{flex:1 1 14rem}
/* Belegung + Preis im Formular (app.js avRender) */
.form-card{--av-ok:#1f6b3e;--av-ok-bg:#e3f4e8;--av-ok-line:#8fcca3;--av-busy:#8a2a35;--av-busy-bg:#fbe9ea;--av-busy-line:#e7b3b8}
.seg label .seg__st{margin-left:.45em;font-size:.78rem;font-weight:600}
.seg label.is-free:not(:has(:checked)){background:var(--av-ok-bg);border-color:var(--av-ok-line);color:var(--av-ok)}
.seg label.is-busy:not(:has(:checked)){background:var(--av-busy-bg);border-color:var(--av-busy-line);color:var(--av-busy)}
.seg label.is-free:has(:checked){background:var(--av-ok);border-color:var(--av-ok)}
.seg label.is-busy:has(:checked){background:var(--av-busy);border-color:var(--av-busy)}
.avail{display:grid;gap:.55rem;padding:.9rem 1rem;border-radius:12px;background:var(--c-surface);font-size:.92rem;line-height:1.45;outline:0}
.avail[hidden]{display:none}
.avail p{margin:0}
.avail__sum{font-weight:600}
.avail__sum.is-free{color:var(--av-ok)}
.avail__sum.is-busy{color:var(--av-busy)}
.avail__rule{border-left:3px solid var(--c-primary);padding-left:.7rem}
.avail__price span{color:var(--c-muted)}
.avail__alt{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.avail__alt > span{flex:1 0 100%;font-weight:600}
.avail__alt button{display:inline-grid;text-align:left;min-height:44px;padding:.35rem .9rem;border-radius:14px;border:1.5px solid var(--av-ok-line);background:var(--av-ok-bg);color:var(--av-ok);font:inherit;font-weight:600;cursor:pointer}
.avail__alt button:hover{border-color:var(--av-ok)}
.avail__alt small{font-weight:400;font-size:.8rem}
.avail__note{font-size:.8rem;color:var(--c-muted)}
.form-msg{margin:0;padding:.9rem 1rem;border-radius:12px;background:var(--c-surface);border-left:4px solid var(--c-primary)}
.success{text-align:center;padding:clamp(1.5rem,6vw,3rem) .5rem;display:grid;justify-items:center;gap:.3rem;transition:opacity .5s,translate .5s var(--ease)}
@starting-style{.success:not([hidden]){opacity:0;translate:0 12px}
}
.success .ok{width:4.5rem;height:4.5rem;border-radius:50%;display:grid;place-items:center;background:var(--c-primary);color:var(--c-primary-ink);margin-bottom:.8rem}
.success .ok .ico{width:2.2rem;height:2.2rem;stroke-width:2.4}
form[aria-busy="true"] button[type=submit]{opacity:.6;pointer-events:none}
.arrive{margin-top:clamp(2.5rem,5vw,4rem);display:grid;gap:1rem}
.arrive ul{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.arrive li{font-size:.85rem;padding:.3rem .75rem;border-radius:999px;border:1px solid var(--c-line);background:color-mix(in srgb,var(--c-bg) 80%,transparent)}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){.hero--cine{height:165svh;view-timeline:--hero block;view-timeline-inset:0}
.hero--cine .hero__stage{position:sticky;top:0;background:var(--c-bg)}
.hero--cine .hero__media{animation:tocard linear both;animation-timeline:--hero;animation-range:contain 0% contain 85%}
@keyframes tocard{to{clip-path:inset(calc(var(--head-h) + 1.5svh) 5vw 7svh round var(--r))}
}
.hero--cine .hero__media img,.hero--cine .hero__media video{animation:kenburns linear both;animation-timeline:--hero;animation-range:contain 0% contain 100%}
@keyframes kenburns{to{scale:1.1}
}
.hero--cine .hero__content{animation:lift linear both;animation-timeline:--hero;animation-range:contain 0% contain 45%}
@keyframes lift{to{opacity:0;translate:0 -10svh}
}
.hero--cine .scroll-cue{animation:fade linear both;animation-timeline:--hero;animation-range:contain 0% contain 12%}
@keyframes fade{to{opacity:0}
}
.hero--cine .hero__place{animation:appear linear both;animation-timeline:--hero;animation-range:contain 55% contain 85%;left:calc(5vw + 1.2rem);bottom:calc(7svh + 1rem)}
@keyframes appear{to{opacity:1}
}
.hero--cine .hero__media::after{animation:fade linear both;animation-timeline:--hero;animation-range:contain 0% contain 85%}
.hero--cine + .chapter{padding-top:clamp(1.5rem,4vw,3.5rem)}
.reveal-img{animation:unclip linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
@keyframes unclip{from{clip-path:inset(12% 8% round var(--r));scale:1.08}
to{clip-path:inset(0 round var(--r))}
}
.moment > picture{inset:-10% 0;animation:par linear both;animation-timeline:view()}
@keyframes par{from{translate:0 -8%}
to{translate:0 8%}
}
.moment__text{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
.rail > *{animation:slidein linear both;animation-timeline:view(inline);animation-range:entry 0% entry 90%}
@keyframes slidein{from{opacity:.25;scale:.92}
}
.facts-row div{animation:rise linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
}
@supports (animation-timeline:view()) and (timeline-scope:--a){.story{timeline-scope:--s1,--s2,--s3,--s4;grid-template-areas:"s";gap:0}
.story__media{display:block;grid-area:s;position:sticky;top:0;height:100svh;align-self:start;overflow:hidden;width:auto;margin:0}
.story__media picture{position:absolute;inset:0;border-radius:0;aspect-ratio:auto}
.story__media picture + picture{opacity:0;animation:xfade linear both;animation-range:entry 40% entry 100%}
.story__media picture:nth-child(2){animation-timeline:--s2}
.story__media picture:nth-child(3){animation-timeline:--s3}
.story__media picture:nth-child(4){animation-timeline:--s4}
@keyframes xfade{from{opacity:0;scale:1.06}
to{opacity:1;scale:1}
}
.story__panels{grid-area:s;position:relative;z-index:1;display:block;width:auto;margin:0}
.panel{min-height:100svh;display:grid;align-content:end;padding:0 var(--gutter) 12svh}
.panel:nth-child(1){view-timeline-name:--s1}
.panel:nth-child(2){view-timeline-name:--s2}
.panel:nth-child(3){view-timeline-name:--s3}
.panel:nth-child(4){view-timeline-name:--s4}
.panel__card{max-width:30rem;background:color-mix(in srgb,var(--c-bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:card linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
@keyframes card{from{opacity:0;translate:0 18svh}
}
.story-wrap{padding-block:0 clamp(3rem,6vw,5rem)}
.story-wrap .story-intro{padding-block:clamp(4.5rem,10vw,8.5rem) 2rem}
@media (min-width:900px){.story{grid-template-columns:1.15fr .85fr;grid-template-areas:"m p"}
.story__media{grid-area:m;height:calc(100svh - var(--head-h) - 3rem);top:calc(var(--head-h) + 1.5rem);margin-left:var(--gutter);border-radius:var(--r)}
.story__panels{grid-area:p}
.panel{min-height:85svh;align-content:center;padding:0 var(--gutter) 0 clamp(1.5rem,4vw,4rem)}
.panel__card{background:var(--c-bg);backdrop-filter:none}
}
}
}
.ebike-teaser__pic{margin:0}
.ebike-teaser__pic picture{aspect-ratio:4 / 3;border-radius:var(--r);overflow:hidden}
.ebike-teaser__pic figcaption{margin-top:.5rem}
.incl--mini{padding:clamp(1.1rem,3vw,1.6rem)}
.incl--mini .incl__tag{margin-bottom:.9rem}
.incl--mini ul{gap:.8rem}
.incl--mini .incl__ico{width:2.6rem;height:2.6rem}
.incl--mini .incl__ico .ico{width:1.4rem;height:1.4rem}
.incl--mini li b{font-size:1.05rem;margin:0}
@media (min-width:600px){.incl--mini ul{grid-template-columns:1fr 1fr}
}
/* Below-the-fold sections: the browser skips style/layout/paint until they come near the viewport
   (on a slow phone ~30 % less main-thread work during load). 2000px ≈ average real section height (phone and desktop), so scrollbar and progress line stay roughly right; replaced by the real height once rendered. */
main > section:not(.hero){content-visibility:auto;contain-intrinsic-size:auto 2000px}
/* Sprung zu einem Anker (#wohnungen, #preise …): alles rendern, sonst landet der Browser wegen der 2000px-Schätzung zu früh (app.js / Inline-Skript in index.html setzen .cv-all) */
html.cv-all main > section{content-visibility:visible}

/* Region-Teaser: Themen des Region-Magazins als Bildkarten in einer Seitwärts-Leiste (.mag-rail, base.css), letzte Karte = Karte der Region */
.themes{--col:min(72%,17.5rem)}
.theme-card{position:relative;display:block;aspect-ratio:3 / 4;border-radius:var(--r);overflow:hidden;color:#fff;text-decoration:none;background:var(--c-water);box-shadow:var(--shadow)}
.theme-card picture{position:absolute;inset:0}
.theme-card img{transition:transform .9s var(--ease)}
.theme-card:hover img{transform:scale(1.05)}
.theme-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(27 36 64 / .85),rgb(27 36 64 / .35) 45%,transparent 68%)}
.theme-card__t{position:absolute;z-index:1;left:0;right:0;bottom:0;display:grid;gap:.25rem;padding:1rem 1.1rem 1.15rem;text-shadow:0 1px 3px rgb(0 0 0 / .35)}
.theme-card__no{display:inline-flex;align-items:center;font-size:.78rem;font-weight:600;letter-spacing:.14em;opacity:.9}
.theme-card__no .ico{width:1.15rem;height:1.15rem}
.theme-card__t b{font-size:1.25rem;letter-spacing:-.01em;line-height:1.2}
.theme-card__t small{font-size:.88rem;opacity:.92;line-height:1.4;min-height:4.2em}
.theme-card:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px}
.theme-card--map{background:var(--c-dark)}
.theme-card--map::after{background:linear-gradient(to top,rgb(27 36 64 / .6),transparent 60%)}
.theme-card__map{position:absolute;inset:0;display:grid;place-items:center;color:var(--c-dark-ink);background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--c-primary) 55%,transparent),transparent 62%),repeating-linear-gradient(45deg,rgb(255 255 255 / .05) 0 1px,transparent 1px 22px),repeating-linear-gradient(-45deg,rgb(255 255 255 / .05) 0 1px,transparent 1px 22px)}
.theme-card__map .ico{width:4.5rem;height:4.5rem;stroke-width:1.2;translate:0 -2.5rem;transition:translate .6s var(--ease)}
.theme-card--map:hover .theme-card__map .ico{translate:0 -2.9rem}
.themes-head{margin-top:clamp(2.5rem,5vw,4rem)}
#region .band .ctas{display:flex;flex-wrap:wrap;gap:.6rem}
@media (max-width:699px){#region .band .ctas{width:100%}#region .band .ctas .btn{flex:1 1 auto}}
@media (prefers-reduced-motion:reduce){.theme-card img,.theme-card__map .ico{transition:none}}
/* Seitwärts-Leisten der Startseite (.mag-rail aus base.css): Kartenbreiten und Anpassungen.
   Immer Leiste: Pool-Fotos, „Heute schön bei …“, Themen. Nur auf Telefonen (.mag-rail--m): Pool-Ausstattung, Jahreszeiten, Wohnungen, Ausstattung. */
.poolrail{--col:min(80%,22rem);--pc:var(--c-water)}
.poolrail .zoom{cursor:zoom-in}
.poolrail .zoom::after{bottom:auto;top:.6rem;opacity:.92}
.poolrail img{transition:transform .9s var(--ease)}
.poolrail .zoom:hover img{transform:scale(1.04)}
.rcard .vid-card{border-radius:0}
.home-picks{margin-top:clamp(2.5rem,5vw,4rem)}
.picks-head{flex-wrap:wrap;align-items:end;margin-bottom:.75rem}
.picks-head .wxseg{margin-top:0}
.feature-list.mag-rail--m{--col:min(64%,15rem)}
.seasons.mag-rail--m{--col:min(82%,19rem)}
.equip-grid.mag-rail--m{--col:min(88%,22rem)}
@media (prefers-reduced-motion:reduce){.poolrail img{transition:none}}
@media (max-width:699px){.equip-grid.mag-rail--m .equip li{padding:.5rem 0;font-size:.94rem}
}