/* =========================================================================
   Kegelbahn-Buchung – SV Bosporus Coburg
   Aufbau wie bei Calendly: zentrierte Karte, links die Infospalte,
   rechts Kalender und Uhrzeiten. Farben und Schrift von bosporuscoburg.de.

   Barrierefreiheit: sichtbarer Fokus, Zustände nie nur über Farbe,
   Kontraste geprüft (Rot auf getönter Tagesfläche 5,7:1).
   ========================================================================= */

.bosk{
  --bosk-rot:#B5191A;
  --bosk-rot-dunkel:#8E1315;
  --bosk-rot-hauch:#F8E8E8;
  --bosk-rot-hauch-stark:#F2D6D6;
  --bosk-dunkel:#1D1D1B;
  --bosk-grau:#54595F;
  --bosk-grau-hell:#8A857F;
  --bosk-linie:#E6E2DD;
  --bosk-hell:#FAF8F6;
  --bosk-weiss:#fff;
  --bosk-gold:#d3b574;
  --bosk-gruen:#1c6b3a;
  --bosk-radius:14px;
  --bosk-font:"Roboto","Helvetica Neue",Arial,sans-serif;

  font-family:var(--bosk-font);
  font-size:16px;
  line-height:1.6;
  color:var(--bosk-dunkel);
  background:var(--bosk-weiss);
  border:1px solid var(--bosk-linie);
  border-radius:var(--bosk-radius);
  box-shadow:0 4px 24px rgba(29,29,27,.07);
  max-width:960px;
  margin-inline:auto;
  overflow:hidden;
}
.bosk *,.bosk *::before,.bosk *::after{box-sizing:border-box}

.bosk :is(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--bosk-dunkel);
  outline-offset:2px;
  border-radius:6px;
}
.bosk-slot input:focus-visible + span,
.bosk-dauer input:focus-visible + span{outline:3px solid var(--bosk-dunkel);outline-offset:2px}

.bosk-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Grundraster: Info links, Bühne rechts ---------- */
.bosk-karte{display:grid;grid-template-columns:1fr}
@media (min-width:840px){
  .bosk-karte{grid-template-columns:340px 1fr}
  .bosk-buehne{border-left:1px solid var(--bosk-linie)}
}

/* ---------- Infospalte ---------- */
.bosk-info{padding:2rem 1.75rem}
.bosk-info .bosk-verein{font-size:.9rem;font-weight:600;color:var(--bosk-grau);margin:0 0 .2rem}
.bosk-info :is(h2,h3,h4){margin:0 0 1.1rem;font-size:1.7rem;font-weight:700;line-height:1.2;color:var(--bosk-dunkel)}

.bosk-eck{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.65rem;
  font-size:.97rem;color:var(--bosk-grau)}
.bosk-eck li{display:flex;gap:.6rem;align-items:flex-start}
.bosk-eck svg{flex:0 0 20px;margin-top:.2rem;fill:none;stroke:var(--bosk-grau);stroke-width:1.8}
.bosk-eck strong{color:var(--bosk-dunkel);font-weight:600}

.bosk-info p{margin:0 0 1rem;color:var(--bosk-grau);font-size:.97rem}
.bosk-info hr{border:0;border-top:1px solid var(--bosk-linie);margin:1.4rem 0}

/* ---------- Gruppenangaben in der Infospalte ---------- */
.bosk-feld{margin-bottom:1.1rem}
.bosk-feld > label,.bosk-feld .bosk-label,.bosk-dauer legend{
  display:block;font-weight:600;font-size:.95rem;margin-bottom:.35rem;color:var(--bosk-dunkel)}
.bosk-tipp{display:block;font-weight:400;color:var(--bosk-grau);font-size:.87rem;margin-bottom:.4rem}
.bosk-feld input[type=text],.bosk-feld input[type=email],.bosk-feld input[type=tel],
.bosk-feld input[type=number],.bosk-feld select,.bosk-feld textarea{
  width:100%;min-height:46px;padding:.55rem .75rem;font:inherit;color:var(--bosk-dunkel);
  background:var(--bosk-weiss);border:1px solid var(--bosk-grau-hell);border-radius:8px}
.bosk-feld input:hover,.bosk-feld select:hover{border-color:var(--bosk-grau)}
.bosk-feld textarea{min-height:104px;line-height:1.6}
.bosk-feld [aria-invalid="true"]{border:2px solid var(--bosk-rot);background:#fff8f8}

.bosk-dauer{border:0;margin:0 0 1.1rem;padding:0}
.bosk-dauer legend{padding:0}
.bosk-dauer-reihe{display:flex;flex-wrap:wrap;gap:.5rem}
.bosk-dauer label{position:relative;flex:1 1 auto}
.bosk-dauer input{position:absolute;opacity:0;width:1px;height:1px}
.bosk-dauer span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:.4rem .9rem;
  border:1px solid var(--bosk-linie);border-radius:999px;background:var(--bosk-weiss);
  color:var(--bosk-grau);font-weight:600;font-size:.95rem;cursor:pointer;white-space:nowrap}
.bosk-dauer label:hover span{border-color:var(--bosk-rot);color:var(--bosk-rot)}
.bosk-dauer input:checked + span{background:var(--bosk-rot);border-color:var(--bosk-rot);color:#fff}
.bosk-dauer input:checked + span::before{content:"\2713";margin-right:.4rem;font-weight:700}

/* ---------- Ausgewählter Termin in der Infospalte ---------- */
.bosk-wahl{background:var(--bosk-hell);border:1px solid var(--bosk-linie);border-radius:10px;
  padding:.9rem 1rem;font-size:.95rem}
.bosk-wahl dt{color:var(--bosk-grau);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.bosk-wahl dd{margin:0 0 .6rem;font-weight:600}
.bosk-wahl dd:last-child{margin-bottom:0}

/* ---------- Bühne (Kalender / Formular / Bestätigung) ---------- */
.bosk-buehne{padding:2rem 1.75rem;min-height:520px}
.bosk-buehne > h3{margin:0 0 1.5rem;font-size:1.3rem;font-weight:700;color:var(--bosk-dunkel)}
.bosk-buehne > h3:focus{outline:none}

.bosk-zurueck{display:inline-flex;align-items:center;gap:.4rem;background:none;border:0;padding:.4rem 0;
  color:var(--bosk-rot);font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;margin-bottom:.75rem}
.bosk-zurueck:hover{text-decoration:underline}
.bosk-zurueck::before{content:"\2190";font-size:1.1em}


/* ---------- Schutz vor Styles der umgebenden Seite ----------
   Themes und Seitenvorlagen bringen eigene Regeln für Tabellen, Absätze und
   Listen mit (z. B. eine farbige Kopfzeile über `thead th` oder gestreifte
   Zeilen). Ohne diesen Block bekäme der Kalender einen roten Balken über den
   Wochentagen und graue Streifen hinter den Tagen. Die Selektoren sind bewusst
   so gewählt, dass sie typische Seitenregeln überstimmen, aber unter den
   eigenen Regeln weiter unten bleiben. */
.bosk p{max-width:none}
.bosk :is(ul,ol){list-style:none}
table.bosk-gitter{min-width:0;background:none;box-shadow:none}
table.bosk-gitter :is(th,td){padding:0;border:0;background:none;
  vertical-align:middle;color:inherit;font-weight:inherit}
table.bosk-gitter thead th{background:none;color:var(--bosk-grau)}
table.bosk-gitter tbody tr:nth-child(even) :is(th,td){background:none}
table.bosk-gitter caption{caption-side:top;text-align:center;color:inherit}

/* ---------- Kalender und Uhrzeiten nebeneinander ---------- */
.bosk-waehler{display:grid;gap:2rem}
@media (min-width:1040px){
  .bosk-waehler[data-zeiten="ja"]{grid-template-columns:minmax(0,1fr) 190px}
}

.bosk-kal-kopf{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1rem}
.bosk-monat{font-weight:700;font-size:1.05rem;min-width:11ch;text-align:center}
.bosk-pfeil{width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--bosk-rot);
  font-size:1.2rem;line-height:1;cursor:pointer}
.bosk-pfeil:hover:not(:disabled){background:var(--bosk-rot-hauch)}
.bosk-pfeil:disabled{color:#C9C4BE;cursor:not-allowed}

table.bosk-gitter{border-collapse:separate;border-spacing:2px 6px;width:100%;table-layout:fixed}
table.bosk-gitter th{font-size:.8rem;font-weight:600;color:var(--bosk-grau);padding:.2rem 0 .5rem;text-align:center}
table.bosk-gitter td{padding:0;text-align:center}

.bosk-tag{
  width:44px;height:44px;margin-inline:auto;padding:0;border:0;border-radius:50%;
  background:none;color:var(--bosk-grau-hell);font:inherit;font-size:1rem;
  cursor:not-allowed;display:grid;place-items:center;position:relative;line-height:1;
}
.bosk-tag[data-frei="ja"]{background:var(--bosk-rot-hauch);color:var(--bosk-rot);font-weight:700;cursor:pointer}
.bosk-tag[data-frei="ja"]:hover{background:var(--bosk-rot-hauch-stark)}
.bosk-tag[aria-pressed="true"]{background:var(--bosk-rot);color:#fff}
/* Verfügbarkeit zusätzlich als Punkt – nicht nur über die Farbe erkennbar. */
.bosk-tag[data-frei="ja"]::after{content:"";position:absolute;bottom:5px;width:4px;height:4px;
  border-radius:50%;background:currentColor}
.bosk-tag[data-heute="ja"]{box-shadow:inset 0 0 0 2px var(--bosk-gold)}
.bosk-tag-leer{visibility:hidden}

.bosk-legende{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:.4rem 1.25rem;font-size:.85rem;color:var(--bosk-grau)}
.bosk-legende li{display:flex;align-items:center;gap:.45rem}
.bosk-legende i{width:16px;height:16px;border-radius:50%;background:var(--bosk-hell);display:inline-block}
.bosk-legende i.frei{background:var(--bosk-rot-hauch)}
.bosk-legende i.heute{box-shadow:inset 0 0 0 2px var(--bosk-gold)}

/* ---------- Uhrzeiten ---------- */
.bosk-zeiten{border:0;margin:0;padding:0}
.bosk-zeiten legend{padding:0;font-weight:700;font-size:1rem;margin-bottom:.9rem}
.bosk-zeiten-liste{display:grid;gap:.55rem;max-height:430px;overflow-y:auto;padding-right:.25rem}
@media (max-width:1039px){
  .bosk-zeiten-liste{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));max-height:none}
}
.bosk-slot{position:relative;display:block}
.bosk-slot input{position:absolute;opacity:0;width:1px;height:1px}
.bosk-slot span{display:flex;align-items:center;justify-content:center;min-height:46px;padding:.5rem;
  border:1px solid var(--bosk-rot);border-radius:8px;background:var(--bosk-weiss);
  color:var(--bosk-rot);font-weight:600;cursor:pointer;text-align:center}
.bosk-slot span:hover{background:var(--bosk-rot-hauch)}
.bosk-slot input:checked + span{background:var(--bosk-rot);color:#fff}
.bosk-slot input:disabled + span{border-color:var(--bosk-linie);color:var(--bosk-grau-hell);
  background:var(--bosk-hell);cursor:not-allowed;text-decoration:line-through}

/* ---------- Formular ---------- */
.bosk-check{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:1.1rem}
.bosk-check input{width:22px;height:22px;margin-top:.2rem;flex:0 0 22px;accent-color:var(--bosk-rot)}
.bosk-check label{font-weight:400;font-size:.95rem;color:var(--bosk-grau)}
.bosk-check a{color:var(--bosk-rot)}

.bosk-fehler{display:block;color:#96131f;font-weight:600;font-size:.9rem;margin-top:.3rem}
.bosk-fehler:empty{display:none}
.bosk-fehler::before{content:"\26A0\FE0E  "}

.bosk-honig{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Buttons ---------- */
.bosk-aktionen{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem;align-items:center}
.bosk-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:.8rem 1.9rem;font:inherit;font-weight:600;cursor:pointer;border-radius:999px;
  border:1px solid var(--bosk-rot);background:var(--bosk-rot);color:#fff;text-decoration:none}
.bosk-btn:hover{background:var(--bosk-rot-dunkel);border-color:var(--bosk-rot-dunkel);color:#fff}
.bosk-btn--still{background:none;color:var(--bosk-rot)}
.bosk-btn--still:hover{background:var(--bosk-rot-hauch);border-color:var(--bosk-rot);color:var(--bosk-rot)}
.bosk-btn[disabled]{border-color:var(--bosk-linie);background:var(--bosk-hell);
  color:var(--bosk-grau-hell);cursor:not-allowed}

/* ---------- Meldungen ---------- */
.bosk-meldung{padding:.9rem 1.1rem;border-radius:10px;background:var(--bosk-hell);
  border-left:4px solid var(--bosk-rot);margin:0 0 1.25rem;font-size:.95rem}
.bosk-meldung--fehler{border-left-color:#96131f;background:#fdf1f1;color:#96131f}
.bosk-meldung ul{margin:.5rem 0 0;padding-left:1.2rem}
.bosk-meldung a{color:inherit}
.bosk-lade{color:var(--bosk-grau);font-style:italic}

.bosk-erfolg h3{color:var(--bosk-gruen);margin-top:0}
.bosk-erfolg p{color:var(--bosk-grau)}
.bosk-erfolg .bosk-wahl{margin:1.25rem 0}
.bosk-export{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}

@media (prefers-reduced-motion:reduce){.bosk *{transition:none!important;animation:none!important}}
@media (prefers-contrast:more){
  .bosk-tag[data-frei="ja"]{outline:1px solid var(--bosk-rot);outline-offset:-1px}
  .bosk-slot span{border-width:2px}
}
@media print{
  .bosk-aktionen,.bosk-export,.bosk-kal-kopf,.bosk-zurueck{display:none}
  .bosk{border:0;box-shadow:none}
}