/* Golfseite: Bildergeschichte, Tarifwahl, Film, Leiste. Nur für /golf.
   Das Buchungsbeispiel mit der Woche kommt aus buchung.css (dasselbe wie auf der Startseite). */

/* ---------- Bildergeschichte ---------- */
.story-schritte{list-style:none;margin:0;padding:0}
.story-schritt h3{margin-bottom:var(--s3)}
.story-punkte{display:none}

/* Breit: Text links scrollt, iPad rechts bleibt stehen und blendet über. */
@media (min-width:900px){
  .story-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--spalt)}
  .story-schritt{min-height:72vh;display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity .5s ease}
  .story-schritt.ist{opacity:1}
  .story-schritt .story-bild{display:none}
  .story-geraet{position:sticky;top:calc(50vh - min(34vw,300px));align-self:start;height:min(68vw,600px);display:flex;align-items:center}
  .story-geraet .tablet{max-width:430px;width:100%}
  .story-stapel{position:relative;aspect-ratio:900/1252;border-radius:var(--r-karte);overflow:hidden;background:#0B0F0D}
  .story-stapel picture{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
  .story-stapel picture.ist{opacity:1}
  .story-stapel img{width:100%;height:100%;object-fit:cover}
}
/* Schmal: waagrecht wischen, mit Einrastpunkten und Punkten darunter. Jeder Schritt ist eine Karte. */
@media (max-width:899px){
  .story-geraet{display:none}
  .story-schritte{display:grid;grid-auto-flow:column;grid-auto-columns:min(84%,360px);gap:var(--raster);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:var(--s1) var(--gut) var(--s3);scroll-padding:0 var(--gut)}
  .story-schritte::-webkit-scrollbar{display:none}
  .story-schritt{scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-karte);padding:var(--karte)}
  .story-schritt .story-bild{max-width:none;margin:0 0 var(--s4);box-shadow:none}
  .story-schritt p{font-size:var(--f-karte);line-height:var(--lh-karte)}
  .story-punkte{display:flex;justify-content:center;gap:var(--s1);margin-top:var(--s3)}
  .story-punkte button{width:var(--h-ziel);height:var(--h-ziel);border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
  .story-punkte button::before{content:"";width:8px;height:8px;border-radius:var(--r-pille);background:rgba(238,245,240,.28);transition:width .3s ease,background-color .3s ease}
  .story-punkte button[aria-current="true"]::before{width:24px;background:var(--acc)}
}

/* ---------- Tarifwahl ---------- */
.tarif{max-width:var(--maxw-mittel);margin-left:auto;margin-right:auto}
.tarif-wahl{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s1);padding:var(--s1);border-radius:var(--r-karte);background:var(--surface);border:1px solid var(--line)}
.tarif-wahl button{min-height:60px;border-radius:var(--r-knopf);border:0;background:transparent;color:var(--muted);font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s0);padding:var(--s2) var(--s1);transition:background-color .25s,color .25s}
.tarif-wahl button b{font-size:var(--f-text);color:inherit}
.tarif-wahl button span{font-size:var(--f-mini);line-height:var(--lh-knopf)}
.tarif-wahl button:hover{color:var(--ink)}
.tarif-wahl button[aria-checked="true"]{background:var(--acc);color:var(--accInk)}
.tarif-karte{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--spalt);margin-top:var(--raster);padding:var(--flaeche);border-radius:var(--r-flaeche);border:1px solid rgba(66,204,112,.35);background:linear-gradient(135deg,rgba(66,204,112,.12),rgba(66,204,112,.02))}
@media (max-width:760px){.tarif-karte{grid-template-columns:1fr}}
.tarif-preis{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.gratis{display:inline-flex;align-items:center;min-height:30px;padding:0 var(--s3);border-radius:var(--r-pille);background:rgba(66,204,112,.16);border:1px solid rgba(66,204,112,.45);color:var(--acc2);font-weight:700;font-size:var(--f-mini)}
.tarif-preis .betrag{font-size:var(--f-betrag);font-weight:800;color:var(--ink);line-height:var(--lh-titel)}
.tarif-fuer{font-size:var(--f-karte);line-height:var(--lh-karte)}
.tarif-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.tarif-liste li{position:relative;padding-left:var(--s6);color:var(--ink);font-size:var(--f-karte);line-height:var(--lh-karte);transition:opacity .3s ease,color .3s ease}
.tarif-liste li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:var(--r-rund);background:var(--acc)}
.tarif-liste li::after{content:"";position:absolute;left:7px;top:6px;width:5px;height:9px;border:solid var(--accInk);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.tarif-liste li small{display:inline-block;margin-left:var(--s2);font-size:var(--f-mini);color:var(--muted)}
.tarif-liste li.nicht{color:var(--muted);opacity:.55}
.tarif-liste li.nicht::before{background:transparent;border:1.5px solid rgba(238,245,240,.3)}
.tarif-liste li.nicht::after{display:none}
.tarif-alle{text-align:center;font-size:var(--f-klein);line-height:var(--lh-klein);margin-top:var(--s5)}

/* ---------- Film als Karte ---------- */
.film-karte{margin-left:auto;margin-right:auto;max-width:var(--maxw-film)}
.film-buehne{position:relative;border-radius:var(--r-karte);overflow:hidden;border:1px solid rgba(238,245,240,.12);box-shadow:0 30px 80px rgba(0,0,0,.5);background:#000;aspect-ratio:16/9}
.film-buehne video{display:block;width:100%;height:100%;object-fit:cover}
.film-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);border:0;cursor:pointer;color:var(--ink);font:inherit;background:linear-gradient(0deg,rgba(6,11,8,.65),rgba(6,11,8,.15) 60%)}
.film-play[hidden]{display:none}
.film-play-kreis{width:clamp(64px,10vw,92px);height:clamp(64px,10vw,92px);border-radius:var(--r-rund);background:var(--acc);color:var(--accInk);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 40px rgba(66,204,112,.35);transition:transform .25s ease}
.film-play-kreis svg{width:42%;height:42%;margin-left:6%}
.film-play:hover .film-play-kreis{transform:scale(1.05)}
.film-play-text{font-weight:700;font-size:var(--f-text)}
.film-dauer{position:absolute;top:var(--s3);right:var(--s3);padding:var(--s1) var(--s2);border-radius:var(--r-pille);background:rgba(6,11,8,.7);font-size:var(--f-mini);font-weight:700}
.film-karte figcaption{margin-top:var(--s3);text-align:center;font-size:var(--f-klein);line-height:var(--lh-klein);color:var(--muted)}

/* ---------- Leiste unten (nur schmal) ---------- */
.leiste{display:none}
@media (max-width:700px){
  body.golf{padding-bottom:calc(var(--h-knopf) + var(--s5))}
  .leiste{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--gut) calc(var(--s3) + env(safe-area-inset-bottom));background:rgba(6,11,8,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);visibility:hidden;transition:transform .35s ease,visibility 0s linear .35s}
  .leiste.da{transform:none;visibility:visible;transition:transform .35s ease,visibility 0s}
  .leiste-text{display:flex;flex-direction:column;line-height:var(--lh-knopf)}
  .leiste-text b{font-size:var(--f-klein);color:var(--ink)}
  .leiste-text span{font-size:var(--f-mini);color:var(--acc)}
  .leiste .store-badge{min-height:var(--h-ziel)}
  .leiste .store-badge img{height:var(--h-ziel);width:auto}
}

@media (prefers-reduced-motion:reduce){
  .story-stapel picture,.story-schritt,.leiste{transition:none!important}
  .story-schritte{scroll-behavior:auto}
}

/* Kopfzeile der Golfseite einzeilig halten, auch mit Sprachmenü und längeren Sprachen.
   «Teilen» ist breit nur ein Symbol (der Text bleibt für Vorleser); in den längeren Sprachen fehlt
   unter 1100 px «Für alle Bereiche» — die Startseite bleibt über das Logo erreichbar. */
@media (min-width:901px){
  .links .nav-teilen{padding:0 var(--s3)}
  .links .nav-teilen .teilen-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:1100px) and (min-width:901px){.links a[href$="#fragen"]{display:none}}
@media (max-width:1040px) and (min-width:901px){.links a[href$="#preise"]{display:none}}
@media (max-width:1100px) and (min-width:901px){html:not([lang^="de"]) .golf .links a:not(.btn)[href$="/"]{display:none}}