/* Buchungsbeispiel: Handy des Kunden, iPad-Woche mit Ziehen — auf der Startseite und der Golfseite
   (gleiches Skript js/buchung.js, Daten je Seite über data-beispiel). Dazu auf der Startseite: Hero-Handy,
   Vorteile, Vergleich.
   Die Handy-Bildschirme sind aus server/web/app.css nachgebaut (Farben, Knöpfe, Karten); ihre
   Schriftgrössen bilden die Web-App ab und bleiben deshalb eigene Werte (siehe test/ordnung.test.mjs).
   Abstände und Radien kommen auch hier aus der Skala in site.css. */
:root{--fuge:1px}   /* Rasterfuge im Wochenkalender: Termine stehen 1 px auseinander */

/* ---------- Hero (Startseite) ---------- */
.trust a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.trust a:hover{color:var(--ink)}
.hero-handy{display:none;margin:0}
.hero-handy figcaption{margin-top:var(--s3);text-align:center;font-size:var(--f-klein);line-height:var(--lh-klein);color:#C9D6CD}
@media (min-width:1024px){
  .hero-raster{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--spalt);align-items:end}
  .hero-handy{display:block}
}

/* ---------- Handy-Rahmen und Web-App-Bildschirm ---------- */
.tel{width:100%;max-width:300px;margin:0 auto;border-radius:var(--r-handy);padding:var(--s2);background:#050806;border:1px solid rgba(238,245,240,.2);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.tel-schirm{position:relative;border-radius:var(--r-handy-schirm);overflow:hidden;min-height:560px;padding:var(--s6) var(--s4) var(--s4)}
.tel-schirm::before{content:"";position:absolute;top:var(--s2);left:50%;width:84px;height:22px;transform:translateX(-50%);border-radius:var(--r-pille);background:#050806}

/* Farben und Formen wie server/web/app.css (dunkles Thema) */
.wa{--wa-bg:#0b1410;--wa-fl:#111c17;--wa-fl2:#16241d;--wa-li:#22322a;--wa-li2:#3b5247;--wa-tx:#eef5f0;--wa-st:#9fb3a7;--wa-pr:#3ddc84;--wa-prtx:#062012;--wa-fe:#e8603f;--wa-fok:#f4d35e;
  background:var(--wa-bg);color:var(--wa-tx);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.45;display:flex;flex-direction:column;gap:var(--s2)}
.wa :focus-visible{outline:3px solid var(--wa-fok);outline-offset:2px;border-radius:var(--r-s)}
.wa p{margin:0;color:inherit}
.wa-titel{font-size:21px;line-height:1.2;font-weight:700;margin:0;color:var(--wa-tx);font-family:inherit;letter-spacing:0;text-wrap:wrap}
.wa-titel:focus{outline:none}
.wa-titel:focus-visible{outline:3px solid var(--wa-fok)}
.wa .wa-still,.wa-still{color:var(--wa-st)}
.wa-klein{font-size:12px;color:var(--wa-st)}
.wa-text{font-size:13.5px}
.wa-schritt{font-size:12.5px;font-weight:600;color:var(--wa-st)!important;letter-spacing:.02em}
.wa-h2{font-size:16px;font-weight:700;margin-top:var(--s1)!important}
.wa-karte{display:flex;flex-direction:column;gap:var(--s0);background:var(--wa-fl);border:1px solid var(--wa-li);border-radius:var(--r-knopf);padding:var(--s2) var(--s3);font-size:13.5px}
.wa-karte b{font-weight:700}
.wa-knopf{display:flex;align-items:center;justify-content:center;min-height:46px;padding:var(--s2) var(--s3);border-radius:var(--r-knopf);border:2px solid transparent;background:var(--wa-pr);color:var(--wa-prtx);font:inherit;font-size:15.5px;font-weight:700;text-align:center;cursor:pointer;width:100%}
button.wa-knopf:hover{background:#5ee69b}
.wa-knopf-zweit{background:transparent;color:var(--wa-tx);border-color:var(--wa-li2)}
button.wa-knopf-zweit:hover{background:var(--wa-fl2)}
.wa-knopf-gefahr{background:transparent;color:var(--wa-fe);border-color:var(--wa-fe);min-height:38px;width:auto;align-self:flex-start;font-size:14px;margin-top:var(--s1)}
.wa-textknopf{background:none;border:0;padding:var(--s2) var(--s0);min-height:var(--h-ziel);font:inherit;font-size:14px;color:var(--wa-pr);text-decoration:underline;text-underline-offset:.18em;cursor:pointer;text-align:left;align-self:flex-start}
.wa-textknopf::before{content:"← "}
.wa-haken{width:48px;height:48px;border-radius:var(--r-rund);display:grid;place-items:center;background:var(--wa-pr);color:var(--wa-prtx);font-size:26px;font-weight:700}
.wa-dl{margin:0;display:grid;gap:var(--s0)}
.wa-dl dt{color:var(--wa-st);font-size:12px;margin-top:var(--s1)}
.wa-dl dt:first-child{margin-top:0}
.wa-dl dd{margin:0;font-weight:700;font-size:14px}
.wa-dl > .wa-klein{margin-top:var(--s1)}
.wa-dl > .wa-klein:first-child{margin-top:0}

/* Angebote */
.wa-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.wa-angebot{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s0);width:100%;min-height:56px;padding:var(--s2) var(--s3);text-align:left;font:inherit;color:var(--wa-tx);background:var(--wa-fl);border:2px solid var(--wa-li);border-radius:var(--r-knopf);cursor:pointer;transition:border-color .2s}
.wa-angebot:hover{border-color:var(--wa-pr)}
.wa-angebot[disabled]{cursor:default;border-style:dashed;opacity:.6}
.wa-angebot[disabled]:hover{border-color:var(--wa-li)}
.wa-angebot b{font-size:16px}
.wa-angebot > span{font-size:13px;color:var(--wa-st)}

/* Tage */
.wa-tage{position:relative;list-style:none;margin:0 calc(var(--s4) * -1);padding:var(--s0) var(--s4) var(--s2);display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none}
.wa-tage::-webkit-scrollbar{display:none}
.wa-tage li{flex:0 0 auto}
.wa-tag{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:50px;min-height:54px;padding:var(--s1);font:inherit;font-size:15px;font-weight:700;color:var(--wa-tx);background:var(--wa-fl);border:2px solid var(--wa-li);border-radius:var(--r-knopf);cursor:pointer}
.wa-tag small{font-size:11.5px;font-weight:600;color:var(--wa-st)}
.wa-tag[aria-pressed="true"]{background:var(--wa-pr);border-color:var(--wa-pr);color:var(--wa-prtx)}
.wa-tag[aria-pressed="true"] small{color:var(--wa-prtx)}
.wa-tag:hover{border-color:var(--wa-pr)}

/* Zeiten */
.wa-zeiten-titel{font-weight:700;font-size:14.5px;margin-top:var(--s0)!important}
.wa-zeiten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.wa-zeit{width:100%;min-height:var(--h-ziel);display:flex;align-items:center;justify-content:center;font:inherit;font-size:15.5px;font-weight:700;color:var(--wa-tx);background:var(--wa-fl);border:2px solid var(--wa-li2);border-radius:var(--r-knopf);cursor:pointer;font-variant-numeric:tabular-nums}
.wa-zeit:hover{border-color:var(--wa-pr)}

/* ---------- Abschnitt Online-Buchung ---------- */
.buchung{background:radial-gradient(90% 50% at 50% 0%,rgba(66,204,112,.10),rgba(6,11,8,0) 70%)}
.bd{position:relative;display:grid;grid-template-columns:1fr;gap:var(--spalt)}
@media (min-width:900px){.bd{grid-template-columns:300px minmax(0,1fr);align-items:start}}
.bd-schild{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s3);font-weight:700;color:var(--ink);font-size:var(--f-klein)}
.bd-schild span{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--r-s);background:rgba(66,204,112,.14);border:1px solid rgba(66,204,112,.4);color:var(--acc);font-size:var(--f-mini)}
.bd-handy .bd-schild{justify-content:center}
@media (min-width:900px){.bd-handy .bd-schild{justify-content:flex-start}}
.bd-handy .tel-schirm{min-height:500px}
@media (min-width:900px){.bd-handy .tel-schirm{min-height:560px}}
.bd-schritt{display:flex;flex-direction:column;gap:var(--s2)}
.bd-schritt[hidden]{display:none}
.bd-schritt.rein{animation:bdRein .35s ease both}
@keyframes bdRein{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* iPad-Woche */
.bd-ipad-rand{position:relative;background:#0B0F0D;border:1px solid rgba(238,245,240,.16);border-radius:var(--r-flaeche);padding:clamp(var(--s3),2vw,var(--s5));box-shadow:0 40px 100px rgba(0,0,0,.5)}
.bd-ipad-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s2) var(--s4);flex-wrap:wrap;margin-bottom:var(--s3)}
.bd-ipad-kopf b{display:block;font-family:var(--disp);font-size:var(--f-h4);line-height:var(--lh-h4);color:var(--ink)}
.bd-klein{display:block;font-size:var(--f-mini);line-height:var(--lh-mini);color:var(--muted);letter-spacing:.03em}
.bd-legende{display:flex;align-items:center;gap:var(--s1) var(--s2);flex-wrap:wrap;font-size:var(--f-mini);color:var(--muted)}
.bd-legende i{display:inline-block;width:10px;height:10px;border-radius:var(--r-xxs);margin-right:calc(var(--s1) * -1);background:var(--k)}
/* Farbe je Kalender (Startseite) bzw. je Ort (Golfseite) */
.k-business{--k:#42CC70}.k-familie{--k:#E8A878}.k-hobby{--k:#6FA8FF}.k-neu{--k:#5FE08A}
.k-range{--k:#42CC70}.k-sim{--k:#6FA8FF}.k-platz{--k:#E8C878}

.bd-woche{position:relative;display:grid;grid-template-columns:22px repeat(5,minmax(0,1fr));grid-template-rows:30px repeat(20,15px);column-gap:var(--s1);row-gap:0;-webkit-user-select:none;user-select:none}
.bd-zeitachse{grid-column:1;grid-row:2 / -1;display:grid;grid-template-rows:repeat(5,60px);font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.bd-zeitachse span{transform:translateY(-6px)}
.bd-tagkopf{grid-row:1;display:flex;align-items:center;justify-content:center;gap:var(--s1);font-size:12px;font-weight:700;color:var(--muted);border-bottom:1px solid var(--line)}
.bd-tagkopf b{color:var(--ink)}
.bd-spalte{grid-row:2 / -1;border-left:1px solid var(--line);background:repeating-linear-gradient(180deg,rgba(238,245,240,.06) 0 1px,transparent 1px 30px)}
.bd-termin{position:relative;z-index:1;margin:var(--fuge) 0;padding:var(--s0) var(--s1);border-radius:var(--r-xs);overflow:hidden;font-size:10.5px;line-height:1.2;color:var(--ink);background:#122019;background:color-mix(in srgb,var(--k) 20%,#0E1812);border-left:3px solid var(--k)}
.bd-termin b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-termin span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.bd-termin.neu{box-shadow:0 0 0 2px var(--acc),0 0 24px rgba(95,224,138,.45)}
.bd-termin.neu.landet{animation:bdLanden .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes bdLanden{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.06)}100%{transform:none}}
.bd-fenster{z-index:0;margin:var(--fuge) 0;border-radius:var(--r-xs);border:1.5px dashed rgba(66,204,112,.45);background:rgba(66,204,112,.05)}
@media (min-width:600px){.bd-woche{grid-template-rows:32px repeat(20,18px);column-gap:var(--s2)}.bd-zeitachse{grid-template-rows:repeat(5,72px)}.bd-spalte{background:repeating-linear-gradient(180deg,rgba(238,245,240,.06) 0 1px,transparent 1px 36px)}.bd-termin{font-size:11.5px;padding:var(--s0) var(--s2)}}
@media (min-width:1100px){.bd-woche{grid-template-rows:34px repeat(20,21px)}.bd-zeitachse{grid-template-rows:repeat(5,84px)}.bd-spalte{background:repeating-linear-gradient(180deg,rgba(238,245,240,.06) 0 1px,transparent 1px 42px)}.bd-termin{font-size:12.5px}}

.bd-toast{position:absolute;z-index:3;top:var(--s3);right:var(--s3);left:var(--s3);margin:0 auto;max-width:360px;display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r-knopf);background:rgba(14,24,18,.96);border:1px solid rgba(66,204,112,.5);box-shadow:0 14px 40px rgba(0,0,0,.5);color:var(--ink);font-size:var(--f-klein)}
.bd-toast[hidden]{display:none}
.bd-toast::before{content:"";flex:0 0 10px;height:10px;border-radius:var(--r-rund);background:var(--acc)}
.bd-toast.rein{animation:bdToast .45s ease both}
@keyframes bdToast{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Flug vom Handy aufs iPad */
.bd-flug{position:absolute;z-index:5;width:16px;height:16px;margin:calc(var(--s2) * -1) 0 0 calc(var(--s2) * -1);border-radius:var(--r-rund);background:var(--acc2);box-shadow:0 0 0 6px rgba(95,224,138,.25),0 0 30px rgba(95,224,138,.8);pointer-events:none;transition:transform .7s cubic-bezier(.5,0,.3,1),opacity .2s ease .6s}

/* Statuszeilen: unter dem Beispiel und unter der Woche, alle gleich */
.bd-status,.bd-zug,.bd-konflikt,.bd-werkzeug{padding:var(--s3) var(--s4);border-radius:var(--r-knopf);font-size:var(--f-klein);line-height:var(--lh-klein)}
.bd-status{grid-column:1 / -1;min-height:3em;margin:0;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.bd-status.gut{color:var(--ink);border-color:rgba(66,204,112,.45)}
.demo-fuss{font-size:var(--f-klein);line-height:var(--lh-klein);margin-top:var(--s4)}
.link-knopf{background:none;border:0;padding:var(--s2) var(--s1);min-height:var(--h-ziel);font:inherit;color:var(--acc);text-decoration:underline;cursor:pointer}

/* ---------- Zwischentitel und Vorteile ---------- */
.bd-zwischen{font-size:var(--f-h3);line-height:var(--lh-h3);letter-spacing:-.02em;font-weight:800;margin:0;text-align:center}
h2.bd-zwischen{font-size:var(--f-h2);line-height:var(--lh-titel)}
.vorteile{list-style:none;margin-bottom:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--raster)}
@media (min-width:600px){.vorteile{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.vorteile{grid-template-columns:repeat(4,minmax(0,1fr))}.buchung-regeln .vorteile{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vorteile li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-karte);padding:var(--karte)}
.vorteile svg{width:40px;height:40px;padding:var(--s2);border-radius:var(--r-knopf);background:rgba(66,204,112,.12);border:1px solid rgba(66,204,112,.32);fill:none;stroke:var(--acc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:var(--s4)}
.vorteile h3,.vorteile h4{margin:0;font-family:var(--disp);font-size:var(--f-h4);line-height:var(--lh-h4);font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.vorteile h3+p{margin-top:var(--s2)}
.vorteile p{font-size:var(--f-karte);line-height:var(--lh-karte)}
@media (max-width:599px){.vorteile li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:var(--s4)}.vorteile svg{grid-row:1 / span 2;margin:0}.vorteile h3,.vorteile h4{align-self:center}}

/* ---------- Vergleich ---------- */
.spart{border:1px solid rgba(66,204,112,.3);border-radius:var(--r-flaeche);padding:var(--flaeche);background:linear-gradient(135deg,rgba(66,204,112,.12),rgba(66,204,112,.02))}
.spart-tabelle{max-width:var(--maxw-mittel);margin-left:auto;margin-right:auto;display:grid;gap:var(--s2)}
.spart-tabelle [role="row"]{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.spart-tabelle [role="cell"],.spart-tabelle [role="columnheader"]{padding:var(--s3) var(--s4);border-radius:var(--r-knopf);font-size:var(--f-klein);line-height:var(--lh-mini)}
.spart-kopf span{font-weight:800;font-size:var(--f-mini)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:var(--s1)!important}
.spart-kopf span+span{color:var(--acc)}
.spart-tabelle [role="cell"]:first-child{color:var(--muted);background:rgba(6,11,8,.4);border:1px solid var(--line)}
.spart-tabelle [role="cell"]+[role="cell"]{color:var(--ink);background:rgba(66,204,112,.10);border:1px solid rgba(66,204,112,.35);font-weight:600}
@media (max-width:520px){.spart-tabelle [role="cell"],.spart-tabelle [role="columnheader"]{padding:var(--s2) var(--s3)}}

@media (prefers-reduced-motion:reduce){
  .bd-flug{display:none}
}

/* ---------- Termine ziehen ---------- */
.bd-zieh-hinweis{display:flex;align-items:center;gap:var(--s2);margin:calc(var(--s1) * -1) 0 var(--s2);font-size:var(--f-mini);color:var(--muted)}
.bd-zieh-hinweis::before{content:"";flex:0 0 14px;height:14px;border-radius:var(--r-xxs);border:1.5px dashed var(--acc);background:rgba(66,204,112,.12)}
.bd-termin[data-id]{cursor:grab;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;transition:opacity .15s}
.bd-termin:focus{outline:none}
.bd-termin:focus-visible,.bd-termin.gewaehlt{outline:2px solid #F4D35E;outline-offset:1px;z-index:2}
.bd-woche.zieht,.bd-woche.zieht .bd-termin{touch-action:none;cursor:grabbing}
/* Griff am unteren Rand: ändert die Dauer */
.bd-griff{position:absolute;left:0;right:0;bottom:0;height:8px;cursor:ns-resize}
.bd-griff::after{content:"";position:absolute;left:calc(50% - 9px);bottom:2px;width:18px;height:3px;border-radius:var(--r-xxs);background:var(--ink);opacity:0;transition:opacity .15s}
.bd-termin:hover .bd-griff::after,.bd-termin.gewaehlt .bd-griff::after,.bd-termin.geist .bd-griff::after{opacity:.75}
/* Original bleibt blass stehen, der Geist folgt dem Zeiger im Raster von 30 Minuten */
.bd-termin.zuletzt{z-index:3}
.bd-termin.platzhalter{opacity:.32;border-left-style:dashed}
.bd-termin.geist{z-index:6;overflow:visible;pointer-events:none;background:color-mix(in srgb,var(--k) 34%,#0E1812);box-shadow:0 0 0 2px var(--acc2),0 14px 34px rgba(0,0,0,.6)}
.bd-termin.geist.hoch{transform:scale(1.05);transition:transform .12s ease}
.bd-termin.geist.dehnt{transform:none}
.bd-wann{position:absolute;left:50%;top:-24px;transform:translateX(-50%);padding:var(--s0) var(--s2);border-radius:var(--r-pille);background:var(--acc2);color:#06200F;font-style:normal;font-weight:800;font-size:11.5px;line-height:1.5;white-space:nowrap;font-variant-numeric:tabular-nums;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.bd-termin.geist.dehnt .bd-wann{top:auto;bottom:-24px}
/* Überschneidung: roter Rand, der Termin bleibt trotzdem liegen */
.bd-termin.konflikt{box-shadow:0 0 0 2px #FF6B57}
.bd-termin.geist.konflikt{box-shadow:0 0 0 2px #FF6B57,0 14px 34px rgba(0,0,0,.6)}
.bd-termin.geist.konflikt .bd-wann{background:#FF8A7A}
/* Zeichen am Termin: Nachricht wartet */
.bd-marke{z-index:4;align-self:start;justify-self:end;display:inline-flex;align-items:center;gap:var(--s0);margin:calc(var(--s4) * -1) calc(var(--s1) * -1) 0 0;padding:var(--fuge) var(--s2);border-radius:var(--r-pille);background:#F4D35E;color:#231C00;font-size:10.5px;font-weight:700;line-height:1.5;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.bd-marke::before{content:"";width:9px;height:7px;border:1.5px solid currentColor;border-radius:var(--r-xxs);background:linear-gradient(to bottom right,transparent 46%,currentColor 47% 53%,transparent 54%) top left/50% 60% no-repeat,linear-gradient(to bottom left,transparent 46%,currentColor 47% 53%,transparent 54%) top right/50% 60% no-repeat}
.bd-marke.ok{background:var(--acc);color:#06200F}
.bd-marke.ok::before{display:none}
.bd-marke-lang{display:none;font-style:normal;font-weight:600}
.bd-marke-lang:empty{display:none!important}
@media (min-width:1100px){.bd-marke-lang{display:inline}}
/* Leiste nach dem Ablegen */
.bd-zug,.bd-konflikt,.bd-werkzeug{margin-top:var(--s3)}
.bd-zug{background:rgba(66,204,112,.08);border:1px solid rgba(66,204,112,.4);color:var(--ink)}
.bd-zug p{margin:0}
.bd-zug-zeile{font-weight:600}
.bd-zug-hinten{white-space:nowrap}
.bd-zug-punkt{color:var(--muted);margin-right:var(--s1)}
.bd-zug-rueck{background:none;border:0;padding:var(--s2) var(--s0);min-height:var(--h-ziel);vertical-align:baseline;font:inherit;font-weight:700;color:var(--acc);text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
.bd-zug-nachricht{margin-top:var(--s0)!important;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s1)}
.bd-zug-nachricht[hidden]{display:none}
.bd-zug-nachricht.laeuft{color:#F4D35E}
.bd-zug-nachricht.informiert{color:var(--acc2)}
.bd-zug-nachricht.keine{color:var(--muted)}
.bd-uhr{font-variant-numeric:tabular-nums}
.bd-zug-fein{margin-top:var(--s1)!important;font-size:var(--f-mini);color:var(--muted)}
.bd-zug-fein[hidden],.bd-konflikt[hidden],.bd-werkzeug[hidden],.bd-zug[hidden]{display:none}
.bd-konflikt{background:rgba(255,107,87,.1);border:1px solid rgba(255,107,87,.55);color:#FFD2CB}
/* Knöpfe statt Ziehen */
.bd-werkzeug{background:var(--surface);border:1px solid var(--line)}
.bd-werkzeug p{margin:0}
.bd-werkzeug-titel{font-weight:700;color:var(--ink)}
.bd-werkzeug-knoepfe{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.bd-wk{min-height:var(--h-ziel);padding:var(--s1) var(--s3);border-radius:var(--r-s);border:1.5px solid var(--line);background:rgba(238,245,240,.04);color:var(--ink);font:inherit;font-size:var(--f-mini);font-weight:600;cursor:pointer}
.bd-wk:hover{border-color:var(--acc)}
.bd-wk:focus-visible,.bd-zug-rueck:focus-visible{outline:3px solid #F4D35E;outline-offset:2px}
.bd-wk-fertig{margin-left:auto;color:var(--acc);border-color:rgba(66,204,112,.5)}
.bd-werkzeug-grenze{margin-top:var(--s2)!important;font-size:var(--f-mini);color:var(--muted)}
.bd-werkzeug-grenze[hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  .bd-termin[data-id],.bd-griff::after{transition:none}
  .bd-termin.geist.hoch{transform:none;transition:none}
}

/* ---------- Navigation der Startseite (body.start): mit «Online-Buchung» ein Link mehr — bleibt einzeilig.
   Ohne obere Grenze: die Kopfzeile ist nie breiter als --maxw, auch auf grossen Bildschirmen nicht. ---------- */
@media (min-width:901px){
  .start .links a[href$="#so-gehts"],.start .links a[href$="#daten"],.start .links a[href$="#fragen"]{display:none}
  .start .links .nav-teilen{padding:0 var(--s3)}
  .start .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:1180px) and (min-width:901px){.start .links a[href$="/golf"]{display:none}}
@media (max-width:1040px) and (min-width:901px){.start .links a[href$="#funktionen"]{display:none}}
/* Die übrigen Sprachen sind länger: dort fehlt der Golf-Link in der Kopfzeile; die Golfseite bleibt über
   den Golf-Abschnitt und die Fusszeile erreichbar */
@media (min-width:901px){html:not([lang^="de"]) .start .links a[href$="/golf"]{display:none}}
@media (max-width:1100px) and (min-width:901px){html:not([lang^="de"]) .start .links .anmelden-link{display:none}}