/* =========================================================================
   FOKALiS – nur Seite „Kontakt“
   Leitidee „Szene 06 · Abspann – die Einladung ans Set“:
   1. Seitenkopf mit Einladungskarte (Kinoticket, goldener Abriss „Eintritt frei“)
      = was im kostenlosen KI-Potenzialcheck passiert.
   2. Vier Wege (Telefon, E-Mail, WhatsApp, Formular) als Karten mit Sucher-Ecken.
   3. Formular (CMS-Formularfunktion data-form) mit Ansprechpartner und „So geht es weiter“.
   4. Drehort: Anschrift + stilisierte Karte (eigenes SVG, keine externe Karte).
   Ruhiger als die anderen Unterseiten: keine Dauerbewegung außer Timecode und
   kaum spürbaren Blenden-Ringen. Bewegungswerte nach DESIGN-KONZEPT.md.
   ========================================================================= */

/* ---------- 0. Kontakt-Button im Menü: „Sie sind hier“ ----------------- */
/* Goldener Punkt unter dem Button, wie bei den aktiven Menüpunkten */
.nav-contact[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:-12px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--gold)}
@media (max-width:1199px){.nav-contact[aria-current="page"]::after{bottom:-14px}}

/* Kopfbild: ruhiges Büro, warmes Licht rechts */
.page-hero-bg img{object-position:60% 55%}

/* ---------- 1. EINLADUNGSKARTE (TICKET) -------------------------------- */
.ticket{--notch:11px;margin:0;align-self:end;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 64px;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.5))}
.ticket-main{position:relative;display:grid;gap:14px;padding:20px 22px 22px;background:var(--paper);color:var(--anth);border-radius:var(--radius) 0 0 var(--radius);
  /* halbrunde Kerben an der Abrisskante */
  -webkit-mask:radial-gradient(circle var(--notch) at 100% 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at 100% 100%,transparent 98%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle var(--notch) at 100% 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at 100% 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
.ticket-head{display:flex;justify-content:space-between;align-items:center;gap:6px 16px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line-light);
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-light-muted)}
.ticket-scene{color:var(--anth)}
.ticket-scene::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:8px;vertical-align:1px}
.ticket-title{font-family:var(--font-head);font-weight:400;font-size:clamp(26px,2.3vw,36px);line-height:1.05;text-transform:uppercase;letter-spacing:.01em}
.ticket-rows{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-light)}
.ticket-row{grid-column:1 / -1;display:grid;gap:2px;padding:9px 0 10px;border-bottom:1px solid var(--line-light)}
.ticket-row--half{grid-column:auto}
.ticket-row--half+.ticket-row--half{padding-left:16px;border-left:1px solid var(--line-light)}
.ticket-row dt{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-light-muted)}
.ticket-row dd{margin:0;font-family:var(--font-head);font-weight:400;font-size:clamp(17px,1.35vw,20px);line-height:1.2;text-transform:uppercase;letter-spacing:.02em}
.ticket-person{display:flex;align-items:center;gap:10px}
.ticket-person img{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:none}
/* Abriss in Gold: senkrecht „Eintritt frei“, Perforation als gestrichelte Kante */
.ticket-stub{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:12px;padding:20px 0;
  background:var(--gold);color:var(--anth);border-radius:0 var(--radius) var(--radius) 0;
  -webkit-mask:radial-gradient(circle var(--notch) at 0 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at 0 100%,transparent 98%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle var(--notch) at 0 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at 0 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
.ticket-stub::before{content:"";position:absolute;left:0;top:var(--notch);bottom:var(--notch);border-left:2px dashed rgba(34,35,35,.35)}
.ticket-stub-text{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-family:var(--font-head);font-weight:500;font-size:22px;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.ticket-stub-no{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
@media (max-width:1020px){.ticket{max-width:520px;width:100%}}
/* Flache Laptop-Fenster: Karte kompakter */
@media (min-width:1021px) and (max-height:760px){
  .ticket-main{gap:10px;padding:16px 20px 18px}
  .ticket-head{padding-bottom:9px}
  .ticket-title{font-size:26px}
  .ticket-row{padding:7px 0 8px}
  .ticket-row dd{font-size:17px}
}
@media (max-width:760px){
  .ticket-main{padding:16px 18px 18px}
  .ticket-title{font-size:26px}
  .ticket-row dd{font-size:17px}
}
@media (max-width:420px){
  .ticket{grid-template-columns:minmax(0,1fr) 52px}
  .ticket-stub-text{font-size:19px}
}

/* ---------- 2. VIER WEGE --------------------------------------------- */
.shots--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.way{gap:16px}
/* Alle Karten einer Reihe teilen dieselben Zeilen: Wert, Text und Fußzeile stehen auf gleicher Höhe */
@supports (grid-template-rows:subgrid){
  .shots--4{row-gap:0}
  .way{display:grid;grid-row:span 5;grid-template-rows:subgrid;align-content:start;row-gap:16px}
  .way .shot-for{margin-top:0;align-content:start}
}
.way-icon{width:30px;height:30px;color:var(--anth)}
.way .shot-num{font-size:clamp(40px,3.4vw,56px)}
.way h3{font-size:clamp(22px,1.9vw,28px)}
.way-value{align-self:start;font-family:var(--font-head);font-weight:300;font-size:clamp(24px,2.05vw,32px);line-height:1.15;letter-spacing:.005em;
  text-decoration:none;color:var(--anth);border-bottom:1px solid rgba(34,35,35,.3);padding-bottom:3px;transition:border-color .6s}
.way-value:hover{border-bottom-color:var(--anth)}
.way .shot-text{font-size:15px;line-height:1.6}
.way .shot-for{padding-top:16px;border-top:1px solid var(--line-light);line-height:1.55}
/* Formular-Karte in Gold: die Einladung, sich in Ruhe zu melden */
.way--gold{--frame-c:rgba(34,35,35,.4);background:var(--gold)}
.way--gold:hover,.way--gold:focus-within{--frame-c:var(--anth);background:var(--gold)}
.way--gold .shot-text,.way--gold .shot-for>span:first-child{color:#2E2E2E}
.way--gold .shot-for{border-top-color:rgba(34,35,35,.25)}
.way--gold .way-value{border-bottom-color:rgba(34,35,35,.45)}
@media (max-width:1199px){.shots--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.shots--4{grid-template-columns:1fr}}

.ways-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:clamp(28px,3vw,40px);font-size:14px;color:var(--on-light-muted)}
.ways-social{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px}
.ways-social a{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--anth);border-bottom:1px solid rgba(34,35,35,.3);padding-bottom:2px;transition:border-color .6s}
.ways-social a:hover{border-bottom-color:var(--anth)}

/* ---------- 3. FORMULAR ---------------------------------------------- */
.form-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px clamp(40px,6vw,112px);align-items:start}
.form-side{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;justify-items:start;position:sticky;top:calc(var(--header-h) + 32px)}
.form-side .h2{width:100%}
.form-person{display:flex;align-items:center;gap:16px;width:100%;padding:16px 0;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.form-person-photo{margin:0;width:64px;height:64px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 1px var(--black),0 0 0 2px rgba(236,176,20,.6)}
.form-person-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.form-person-name{font-family:var(--font-head);font-weight:500;font-size:22px;text-transform:uppercase;letter-spacing:.04em;line-height:1.1;color:var(--white)}
.form-person-role{font-size:13px;color:var(--on-dark-muted)}
.form-person-tag{margin-left:auto;background:var(--white);color:var(--anth)}
.form-next{width:100%}
.form-next-title{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:6px}
.form-steps{list-style:none}
.form-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line-dark)}
.form-steps li:last-child{border-bottom:0}
.form-step-num{font-family:var(--font-head);font-weight:200;font-size:30px;line-height:1;color:var(--gold)}
.form-step-title{font-family:var(--font-head);font-weight:400;font-size:18px;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;color:var(--white);margin-bottom:2px}
.form-steps p:not(.form-step-title){font-size:14.5px;line-height:1.55;color:#BDBDBD}

/* Formular selbst: ruhige Linien wie auf einem Drehplan */
.formular{display:grid;gap:30px;padding:clamp(28px,3.4vw,52px);background:#111;border:1px solid var(--line-dark);border-radius:var(--radius)}
.form-group{margin:0;padding:0;border:0;min-width:0}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 32px}
.form-field{display:grid;align-content:start;gap:6px;min-width:0}
.form-label{display:block;padding:0;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
legend.form-label{margin-bottom:12px}
.form-req{color:var(--gold)}
.formular input[type="text"],.formular input[type="email"],.formular input[type="tel"],.formular textarea{
  width:100%;min-width:0;font:inherit;font-size:17px;font-weight:300;color:var(--on-dark);background:transparent;border:0;border-radius:0;
  border-bottom:1px solid rgba(255,255,255,.28);padding:10px 0 11px;transition:border-color .6s,box-shadow .6s}
.formular textarea{resize:vertical;min-height:132px;line-height:1.6}
.formular ::placeholder{color:#8A8A8A;opacity:1}
.formular input:hover,.formular textarea:hover{border-bottom-color:rgba(255,255,255,.5)}
.formular input[type="text"]:focus,.formular input[type="email"]:focus,.formular input[type="tel"]:focus,.formular textarea:focus{
  outline:none;border-bottom-color:var(--gold);box-shadow:0 1px 0 0 var(--gold)}
/* Fehler erst nach einer Eingabe zeigen (gestrichelte Linie + Hinweis über den Browser) */
.formular input:user-invalid,.formular textarea:user-invalid{border-bottom-style:dashed;border-bottom-color:var(--gold)}
.formular input:-webkit-autofill{-webkit-text-fill-color:var(--on-dark);box-shadow:0 0 0 60px #111 inset;caret-color:var(--on-dark)}

/* Auswahl als Pillen (Radio) */
.form-pills{display:flex;flex-wrap:wrap;gap:10px}
.form-pill{position:relative;display:inline-flex}
.form-pill input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.form-pill span{display:inline-flex;align-items:center;min-height:42px;padding:9px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.28);
  font-size:13px;font-weight:400;letter-spacing:.02em;color:#CFCFCF;cursor:pointer;transition:background-color .6s,border-color .6s,color .6s;white-space:nowrap}
.form-pill span:hover{border-color:rgba(255,255,255,.6);color:var(--white)}
.form-pill input:checked+span{background:var(--gold);border-color:var(--gold);color:var(--anth);font-weight:600}
.form-pill input:focus-visible+span{outline:2px solid var(--gold);outline-offset:3px}
.form-pills--small span{min-height:40px;padding:8px 16px}

/* Pflicht- und freiwillige Felder */
.form-required{margin-bottom:-12px;font-size:13px;line-height:1.5;color:var(--on-dark-muted)}
.form-opt{font-weight:400;letter-spacing:.08em;color:#8F8F8F}

/* Datenschutz-Hinweis direkt über dem Button (kein Häkchen: Kontaktanfrage = Vertragsanbahnung) */
.form-privacy{font-size:13.5px;line-height:1.6;color:#BDBDBD;max-width:62ch}
.form-privacy a{color:var(--on-dark);text-underline-offset:3px;transition:color .5s}
.form-privacy a:hover{color:var(--gold)}

.form-submit{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:-6px}
.form-submit .btn{flex:none}
.form-status{font-size:14px;line-height:1.55;color:var(--on-dark)}
.form-status:empty{display:none}
.form-status{padding:14px 18px;border:1px dashed rgba(236,176,20,.55);border-radius:var(--radius)}

@media (max-width:1020px){
  .form-layout{grid-template-columns:1fr}
  .form-side{position:static}
}
@media (max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .formular{padding:24px 18px 28px;margin-inline:calc(var(--gutter) * -.4)}
  .form-submit .btn{width:100%;justify-content:space-between}
}

/* ---------- 4. DREHORT + KARTE --------------------------------------- */
.place-layout{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px clamp(40px,6vw,112px);align-items:center}
.place-text{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;justify-items:start;min-width:0}
.place-text .h2{width:100%}
.place-facts{margin:0;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-light)}
.place-facts>div{display:grid;align-content:start;gap:4px;padding:16px 16px 16px 0;border-bottom:1px solid var(--line-light)}
.place-facts>div:nth-child(2n){padding-left:20px;border-left:1px solid var(--line-light)}
.place-facts dt{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-light-muted)}
.place-facts dd{margin:0;font-size:15.5px;line-height:1.6;color:var(--on-light)}
.place-facts address{font-style:normal}

.map{position:relative;margin:0;padding:clamp(14px,1.6vw,22px);background:var(--anth);border-radius:var(--radius);color:var(--on-dark)}
.map-frame{position:absolute;inset:12px;pointer-events:none;z-index:1;--c:var(--gold);--l:26px;
  background:
    linear-gradient(var(--c),var(--c)) left top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px var(--l) no-repeat;
  transition:inset 1.4s var(--ease-glide)}
.map:hover .map-frame{inset:7px}
.map-svg{width:100%;height:auto}
.map-dot{fill:rgba(255,255,255,.12)}
.map-ring{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1}
.map-ring--outer{stroke-dasharray:2 9;stroke:rgba(255,255,255,.2)}
.map-ring--mid{stroke:rgba(236,176,20,.55);stroke-dasharray:6 6}
.map-ring--inner{stroke:rgba(255,255,255,.3)}
.map-cross{stroke:rgba(255,255,255,.35);stroke-width:1}
.map-places circle{fill:#BDBDBD}
.map-places text{font-family:var(--font-body);font-size:13px;font-weight:400;fill:#BDBDBD;letter-spacing:.02em}
.map-places .map-minor circle{fill:#8A8A8A}
.map-places .map-minor text{font-size:11.5px;fill:#8F8F8F}
.map-home{fill:var(--gold)}
.map-pulse{fill:rgba(236,176,20,.16);stroke:rgba(236,176,20,.5);stroke-width:1;transform-origin:300px 280px}
.map-home-label{font-family:var(--font-head);font-size:24px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;fill:var(--white)}
.map-legend{list-style:none;position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:6px 24px;padding:10px 16px 0;
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;line-height:1.5}
.map-legend li{display:flex;align-items:center;gap:10px}
.map-legend li::before{content:"";width:24px;flex:none;border-top:1.5px dashed rgba(236,176,20,.85)}
.map-legend--near{color:var(--gold)}
.map-legend--far{color:var(--on-dark-muted)}
.map-legend li.map-legend--far::before{border-top-style:dotted;border-top-color:rgba(255,255,255,.5)}
.map-caption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;padding:12px 30px 4px;border-top:1px solid var(--line-dark);
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-muted)}
/* kaum spürbare Bewegung: Ringe drehen sehr langsam, der Punkt atmet */
@media (prefers-reduced-motion:no-preference){
  .map-ring--mid{transform-origin:300px 280px;animation:map-turn 140s linear infinite}
  .map-ring--outer{transform-origin:300px 280px;animation:map-turn 200s linear infinite reverse}
  .map-pulse{animation:map-breathe 4s ease-in-out infinite}
}
@keyframes map-turn{to{transform:rotate(360deg)}}
@keyframes map-breathe{50%{transform:scale(1.35);opacity:.35}}
@media (max-width:1020px){
  .place-layout{grid-template-columns:1fr}
  .map{max-width:640px;width:100%}
}
/* Auf dem Handy: Ortsnamen größer, sonst wären sie nach dem Verkleinern unlesbar */
@media (max-width:640px){
  .map-places text{font-size:22px}
  .map-places .map-minor,.map-places .map-sm-hide{display:none}
  .map-places circle{r:5px}
  .map-home-label{font-size:34px;transform:translateY(-22px)}
  .map-legend{padding-inline:8px}
}
@media (max-width:480px){.form-person-tag{display:none}}
@media (max-width:420px){
  .place-facts{grid-template-columns:1fr}
  .place-facts>div:nth-child(2n){padding-left:0;border-left:0}
}

/* Hinweis auf die Online-Terminbuchung im Formular (springt zum Abschnitt #termin) */
.form-booking{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:20px 22px;border:1px solid var(--line-dark);border-left:2px solid var(--gold);border-radius:var(--radius)}
.form-booking p{display:grid;gap:4px;min-width:0;flex:1 1 260px}
.form-booking .form-label{color:var(--white)}
.form-booking-text{font-size:14.5px;line-height:1.55;color:#BDBDBD}
.form-booking .btn{min-height:48px;padding:12px 22px;font-size:12.5px}
@media (max-width:640px){.form-booking .btn{width:100%;justify-content:space-between}}

/* Mehr Zeilenabstand im Titel: Ö-Punkte von „HÖREN“ stießen an „ERZÄHLEN“ */
.page-title{line-height:1.16}

/* Link „Termin online buchen“ auf der Einladungskarte */
.ticket-link{justify-self:start;display:inline-flex;align-items:center;gap:10px;margin-top:2px;padding-bottom:3px;border-bottom:1px solid rgba(34,35,35,.4);
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--anth);transition:gap .9s var(--ease-glide),border-color .6s}
.ticket-link:hover{gap:14px;border-bottom-color:var(--anth)}
.ticket-link:focus-visible{outline:2px solid var(--anth);outline-offset:4px}
.ticket-link svg{width:15px;height:15px;flex:none}

/* =========================================================================
   5. TERMIN ONLINE BUCHEN (CMS-Terminbuchung, Standard 7c)
   Das CMS ersetzt <div data-termine> beim Veröffentlichen durch die Buchung
   (Klassen .fk-termine-…, live geladen von /_site/termine.js + termine.css).
   Deren CSS lädt NACH dieser Datei – deshalb beginnt jede Regel hier mit
   „.booking .fk-termine-w“ bzw. „:is(.booking,.fk-termine-dialog) .fk-termine-w“
   (höhere Gewichtung, gewinnt sicher).
   Ohne Zusatzpaket entfernt das CMS das Buchungs-Element: Dann verschwinden der
   Abschnitt und alle Links dorthin (Formular-Box, Einladungskarte).
   ========================================================================= */
.booking:not(:has([data-termine],[data-fk-termine])){display:none}
body:not(:has([data-termine],[data-fk-termine])) :is(.form-booking,.ticket-link){display:none}

/* Farben, Schrift und Rundung für Buchung und Buchungsfenster (CSS-Variablen des CMS) */
.booking,dialog.fk-termine-dialog{
  --fk-schrift:var(--font-body);--fk-text:var(--on-dark);--fk-hintergrund:#111;--fk-akzent:var(--gold);--fk-akzent-text:var(--anth);
  --fk-flaeche:rgba(255,255,255,.04);--fk-linie:rgba(255,255,255,.4);--fk-leise:#A9A9A9;--fk-fehler:var(--gold);--fk-radius:var(--radius)}

.booking-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px clamp(40px,6vw,112px);align-items:start}
.booking-side{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;justify-items:start;min-width:0}
.booking-side .h2{width:100%}
.booking-side .lead{color:#BDBDBD}
.booking-facts{margin:0;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-dark)}
.booking-facts>div{display:grid;align-content:start;gap:4px;padding:15px 16px 15px 0;border-bottom:1px solid var(--line-dark)}
.booking-facts>div:nth-child(2n){padding-left:20px;border-left:1px solid var(--line-dark)}
.booking-facts dt{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
.booking-facts dd{margin:0;font-size:15px;line-height:1.55;color:var(--on-dark)}

/* Die Bühne der Buchung: dunkle Karte mit goldenen Sucher-Ecken (wie die Karte im Drehort) */
.booking-panel{position:relative;min-width:0;min-height:440px;padding:clamp(26px,3vw,44px);background:#111;border:1px solid var(--line-dark);border-radius:var(--radius)}
.booking-frame{position:absolute;inset:10px;pointer-events:none;--c:rgba(236,176,20,.7);--l:22px;
  background:
    linear-gradient(var(--c),var(--c)) left top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px var(--l) no-repeat}
.booking-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:26px;padding-bottom:14px;border-bottom:1px solid var(--line-dark);
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
.booking-head span:first-child::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:10px;vertical-align:1px}

/* Lokale Vorschau (kontakt.js) – deutlich als Vorschau gekennzeichnet */
.booking-preview-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin-bottom:24px;padding:12px 16px;border:1px dashed rgba(236,176,20,.55);border-radius:var(--radius);
  font-size:13px;line-height:1.55;color:#BDBDBD}
.booking-preview-note .tag{flex:none;font-size:10px;padding:4px 9px}
.booking-preview-note span:last-child{flex:1 1 220px}
.booking-widget[data-termine]:empty{display:none}
.no-js .booking-widget[data-termine]:empty{display:block;padding:18px;border:1px dashed rgba(236,176,20,.55);border-radius:var(--radius)}
.no-js .booking-widget[data-termine]:empty::before{content:"Vorschau: Hier setzt das FOKALiS CMS beim Veröffentlichen die Online-Buchung ein.";font-size:14px;color:#BDBDBD}

/* ---------- Vom CMS erzeugte Buchung ---------- */
:is(.booking,.fk-termine-dialog) .fk-termine-w{max-width:none;font-family:var(--font-body);color:var(--on-dark);line-height:1.55}
:is(.booking,.fk-termine-dialog) .fk-termine-w p{margin:0 0 14px}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-titel{margin:0 0 18px;font-family:var(--font-head);font-weight:400;font-size:clamp(24px,2vw,30px);line-height:1.15;
  text-transform:uppercase;letter-spacing:.03em;color:var(--white)}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-klein{font-size:13.5px;color:var(--on-dark-muted)}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-klein a,:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-summe a{color:var(--on-dark);text-underline-offset:3px}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-klein a:hover{color:var(--gold)}
:is(.booking,.fk-termine-dialog) .fk-termine-w :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-flaeche{transition:opacity .6s}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-flaeche[aria-busy="true"]{opacity:.45}

/* Auswahl: Terminarten als Karten, Tage als Pillen */
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-liste{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-wahl{display:grid;gap:4px;width:100%;min-height:52px;padding:16px 20px;font:inherit;text-align:left;color:var(--on-dark);cursor:pointer;
  background:transparent;border:1px solid var(--fk-linie);border-radius:var(--radius);transition:border-color .6s,background-color .6s,color .6s}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-wahl:hover{border-color:var(--gold);background:rgba(236,176,20,.06)}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-wahl strong{font-family:var(--font-head);font-weight:400;font-size:19px;line-height:1.2;text-transform:uppercase;letter-spacing:.04em;color:var(--white)}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-wahl span{font-size:13.5px;line-height:1.5;color:#BDBDBD}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-tage{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-tage .fk-termine-wahl{display:inline-flex;align-items:center;width:auto;min-height:44px;padding:9px 18px;border-radius:999px;
  font-size:13.5px;letter-spacing:.02em;color:#CFCFCF;white-space:nowrap}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-tage .fk-termine-wahl:hover{color:var(--white)}

/* Formulare: Linien wie im Kontaktformular, Uhrzeiten als Pillen */
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-form fieldset{margin:0 0 20px;padding:0;border:0;min-width:0}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-form legend,
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-feld label,
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-gruppe{display:block;margin:0 0 10px;padding:0;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-gruppe{margin:16px 0 10px;color:#8F8F8F}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-gruppe:first-of-type{margin-top:0}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-feld label .fk-termine-klein{font-size:inherit;letter-spacing:.08em;font-weight:400;color:#8F8F8F}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-reihe{display:flex;flex-wrap:wrap;gap:10px}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-zeiten label{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0;padding:9px 18px;
  border:1px solid var(--fk-linie);border-radius:999px;box-shadow:none;font-size:13.5px;font-weight:400;letter-spacing:.02em;text-transform:none;color:#CFCFCF;cursor:pointer;
  transition:background-color .6s,border-color .6s,color .6s}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-zeiten label:hover{border-color:rgba(255,255,255,.7);color:var(--white)}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-zeiten input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-zeiten label:has(input:checked){background:var(--gold);border-color:var(--gold);box-shadow:none;color:var(--anth);font-weight:600}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-zeiten label:has(input:checked) .fk-termine-klein{color:var(--anth)}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-zeiten label:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:3px}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-feld{margin:0 0 22px}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-feld input,
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-feld textarea{width:100%;min-height:44px;padding:10px 0 11px;font:inherit;font-size:17px;font-weight:300;color:var(--on-dark);
  background:transparent;border:0;border-bottom:1px solid var(--fk-linie);border-radius:0;transition:border-color .6s,box-shadow .6s}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-feld textarea{min-height:110px;line-height:1.6;resize:vertical}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-feld input:hover,
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-feld textarea:hover{border-bottom-color:rgba(255,255,255,.65)}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-feld input:focus-visible,
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-feld textarea:focus-visible{outline:none;border-bottom-color:var(--gold);box-shadow:0 1px 0 0 var(--gold)}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-feld [aria-invalid="true"]{border-bottom-style:dashed;border-bottom-color:var(--gold)}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-hilfe{margin-top:6px;font-size:13px;color:var(--on-dark-muted)}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-fehler{margin-top:6px;font-size:13.5px;color:var(--gold)}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-haken{display:flex;gap:12px;align-items:flex-start;margin:0 0 18px;font-size:14px;line-height:1.55;color:#CFCFCF}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-haken input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--gold)}

/* Kästen und Hinweise */
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-kasten{display:grid;gap:4px;margin:0 0 22px;padding:16px 20px;background:rgba(255,255,255,.04);
  border:1px solid var(--line-dark);border-left:2px solid var(--gold);border-radius:var(--radius)}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-kasten strong{font-family:var(--font-head);font-weight:400;font-size:20px;line-height:1.25;text-transform:uppercase;letter-spacing:.03em;color:var(--white)}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-kasten span{font-size:14px;color:#BDBDBD}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-kasten.fk-termine-erfolg{border:1px solid var(--gold);border-left-width:4px;background:rgba(236,176,20,.07)}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-hinweis{margin:0 0 14px;padding:12px 16px;font-size:14px;line-height:1.55;color:#CFCFCF;
  background:rgba(236,176,20,.07);border:0;border-left:2px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-ausfall{border:1px solid rgba(236,176,20,.7);border-left-width:4px}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-summe{margin:0 0 20px;padding:14px 18px;border:1px dashed var(--gold);border-radius:var(--radius);font-size:14px}

/* Knöpfe wie die Buttons der Website */
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-leiste{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:22px}
:is(.booking,.fk-termine-dialog) .fk-termine-w :is(.fk-termine-haupt,.fk-termine-leise){display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 26px;
  border-radius:999px;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.25;cursor:pointer;
  transition:background-color .5s,color .5s,border-color .5s}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-haupt{background:var(--gold);color:var(--anth);border:1px solid var(--gold)}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-haupt:hover{background:var(--white);border-color:var(--white)}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-haupt:disabled{opacity:.55;cursor:wait}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-leise{background:transparent;color:var(--on-dark);border:1px solid var(--fk-linie)}
:is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-leise:hover{border-color:var(--gold);color:var(--gold)}

/* Rückfall-Link, solange das Buchungs-Skript lädt (oder ohne JavaScript) */
.booking .fk-termine-rueckfall a{display:inline-flex;align-items:center;min-height:50px;padding:13px 26px;border-radius:999px;background:var(--gold);color:var(--anth);
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}

/* Buchungsfenster (nur falls später ein Knopf mit data-termine-knopf dazukommt) */
dialog.fk-termine-dialog{background:#111;color:var(--on-dark);border:1px solid var(--line-dark);border-radius:var(--radius);padding:28px 26px 26px}
dialog.fk-termine-dialog::backdrop{background:rgba(10,10,10,.8);backdrop-filter:blur(6px)}
dialog.fk-termine-dialog .fk-termine-zu{color:var(--on-dark)}

/* Ruhiger Szenenwechsel: jeder neue Schritt gleitet sanft ins Bild */
@media (prefers-reduced-motion:no-preference){
  .booking .fk-termine-flaeche>*{animation:bk-in .9s var(--ease-glide) both}
  .booking .fk-termine-flaeche>:nth-child(2){animation-delay:.08s}
  .booking .fk-termine-flaeche>:nth-child(n+3){animation-delay:.16s}
}
@keyframes bk-in{from{opacity:0;transform:translateY(10px)}}

@media (max-width:1020px){.booking-layout{grid-template-columns:1fr}}
@media (max-width:640px){
  .booking-panel{min-height:0;padding:24px 18px 28px;margin-inline:calc(var(--gutter) * -.4)}
  .booking-frame{inset:7px;--l:16px}
  :is(.booking,.fk-termine-dialog) .fk-termine-w .fk-termine-leiste>*{flex:1 1 auto}
}
@media (max-width:420px){
  .booking-facts{grid-template-columns:1fr}
  .booking-facts>div:nth-child(2n){padding-left:0;border-left:0}
}
.booking-preview .fk-termine-leiste+.fk-termine-hinweis{margin-top:18px}
.booking .fk-termine-w .fk-termine-feld label{margin-bottom:4px}
@media (min-width:1021px){.booking-side{position:sticky;top:calc(var(--header-h) + 32px)}}

.ticket-row{align-content:start} /* „Kosten“ und „Dauer“ auf einer Höhe */