/* FullCalendar minimal CSS für Monatsansicht – FC 6.1.15 */

.fc {
  direction: ltr;
}

.fc table {
  width: 100%;
  border-collapse: collapse;
}

.fc .fc-scrollgrid {
  border: 1px solid #ddd;
}

.fc .fc-daygrid-day {
  border: 1px solid var(--border);
  vertical-align: top;
  background: #fff;
}

.fc .fc-daygrid-day-number {
  padding: 4px;
  font-size: 13px;
}

.fc .fc-day-today {
  background: #fffbe6;
}

.fc .fc-col-header-cell {
  background: #f3f3f3;
  text-align: center;
  padding: 8px;
  font-weight: 600;
  font-size: 14px;
}

.fc .fc-daygrid-day-frame {
  min-height: 80px;
  cursor: pointer;
}

.fc .fc-toolbar-title {
  font-size: 20px;
  font-weight: 600;
}

.fc .fc-button {
  background: #4e4e4e;
  border: 0;
  padding: 6px 12px;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.fc .fc-button:hover {
  background: #6a6a6a;
}

.fc .fc-daygrid-event {
  display: none !important; /* Keine Eventtitel anzeigen, nur Busy Status */
}
/* =============================== */
/* TONSTUDIO LEIPZIG – FULL PRO STYLE FINAL */
/* Voll responsive • barrierefrei • mobil perfekt */
/* =============================== */

/* 1) Global Schriften */
.fgsc-wrap,
.fgsc-card,
.fgsc-toolbar input,
.fgsc-toolbar select,
.fgsc-toolbar button,
.fgsc-cta-btn,
.fgsc-note,
.fgsc-block-item,
.fgsc-help,
.fgsc-hinweis-green,
.fgsc-hinweis-important {
  font-family: var(--font-main);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  color: var(--black);
}

.fgsc-card h1,
.fc-toolbar-title,
.fgsc-help summary,
.fgsc-block-title,
.fgsc-toolbar label,
.fgsc-legend strong {
  font-family: var(--font-headers);
  font-weight: 700;
}

/* 2) Wrapper und Card */
.fgsc-wrap { max-width: 1040px; margin: 0 auto 20px; padding: 0 24px; box-sizing: border-box; }
.fgsc-wrap *, .fgsc-card * { box-sizing: border-box; }
.fgsc-card { background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 6px 26px rgba(0,0,0,.08); box-sizing: border-box; }
.fgsc-card h1 { margin: 0 0 8px; font-size: 26px; }
.fgsc-sub { color: #555560; font-size: 15px; margin-bottom: 14px; }

/* 3) Legende */
.fgsc-legend { display: flex; gap: 10px; margin: 10px 0; font-size: 15px; align-items: center; flex-wrap: wrap; }
.dot { width: 12px; height: 12px; border-radius: 50%; display:inline-block; }
.dot.ok { background:#2ecc71; }
.dot.partial { background:#f1c40f; }
.dot.busy { background:var(--brand); }

/* 4) Kalender Wrapper */
#fgsc-calendar { background: var(--white); border-radius:12px; padding:12px; border: 1px solid var(--border); margin-bottom: 20px; }

/* 5) Day cells */
.fc .fc-daygrid-day { background:#fff !important; color:var(--black) !important; font-size:15px; position:relative; }
.fc-daygrid-day-number { color:var(--black) !important; font-weight:600; }

/* 6) Statusfarben mit Icon */
.day-fit {
  background: rgba(46,204,113,.08) !important;
  outline:2px solid #2ecc71 !important;
  border-radius:6px;
  position:relative;
}
.day-fit::after {
  content:"✓";
  position:absolute;
  bottom:4px;
  right:6px;
  font-size:15px;
  font-weight:700;
  color:#2ecc71;
}

.day-partial {
  background: rgba(241,196,15,.08) !important;
  outline:2px solid #f1c40f !important;
  border-radius:6px;
  position:relative;
}
.day-partial::after {
  content:"•";
  position:absolute;
  bottom:4px;
  right:8px;
  font-size:18px;
  font-weight:700;
  color:#f1c40f;
}

.day-full {
  background: rgba(220, 39, 39,.08) !important;
  outline:2px solid var(--brand) !important;
  border-radius:6px;
  position:relative;
}
.day-full::after {
  content:"✕";
  position:absolute;
  bottom:4px;
  right:6px;
  font-size:16px;
  font-weight:700;
  color:var(--brand);
}

/* 7) Hover, Heute, Auswahl */
.fc-daygrid-day:hover { background: var(--gray-bg) !important; cursor: pointer; }
.fc .fc-day-today { background:#f7f7f9 !important; border:1px solid var(--brand) !important; }
.fc-daygrid-day.fc-day-selected { background:#efeff3 !important; border:2px solid var(--brand) !important; }

/* 8) FullCalendar Toolbar */
.fc-toolbar-title { color:var(--black); font-size:22px; }
.fc-button {
  background:var(--brand) !important;
  border:none !important;
  color:#fff !important;
  padding:6px 12px;
  border-radius:9999px !important;
  font-size:14px;
  font-family:var(--font-headers);
  font-weight:600;
}
.fc-button:hover { background:#c02222 !important; }

/* 9) Toolbar Grid – tt.mm.jjjj, Startzeit, Dauer, Jetzt prüfen */
.fgsc-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 10px;
  margin-bottom: 0;
  margin-bottom: 16px;
  align-items: end;
  /* CLS-Fix: feste Hoehe verhindert Layout-Shift beim Schrift-Laden */
  min-height: 96px;
  contain: layout;
}
.fgsc-toolbar > div {
  min-height: 80px;
}
/* Button-Spalte hat kein Label, deshalb kein min-height noetig */
.fgsc-toolbar > div:has(> #fgsc-check) {
  min-height: auto;
  align-self: end;
}
.fgsc-toolbar label {
  /* CLS-Fix: feste Hoehe und line-height fuer Labels */
  display: block;
  min-height: 22px;
  line-height: 1.4;
}

.fgsc-toolbar input,
.fgsc-toolbar select {
  width: 100%;
  height: 48px;
  min-height: 48px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--black);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 16px;
  display: flex;
  align-items: center;
  transition: border-color .2s, box-shadow .2s;
}
.fgsc-toolbar input:hover,
.fgsc-toolbar select:hover {
  border-color: rgba(220, 39, 39, 0.3);
}

.fgsc-toolbar input:focus,
.fgsc-toolbar select:focus {
  outline: 3px solid rgba(220, 39, 39,.3);
  border-color:var(--brand);
}

/* Jetzt prüfen Button im Shopstil */
.fgsc-toolbar button {
  height: 48px;
  min-height: 48px;
  line-height: 48px;
  padding: 0 26px;
  background:var(--brand);
  color:#fff;
  border:none;
  border-radius:9999px;
  cursor:pointer;
  font-size:15px;
  font-family:var(--font-headers);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: all .18s ease;
}
.fgsc-toolbar button:hover { background:var(--brand); color:#ffffffcc; transform: translateY(-1px); }
.fgsc-toolbar button:focus { outline: 3px solid rgba(220, 39, 39,.4); }

/* 10) Notes */
.fgsc-note { font-size:14px; margin: 6px 0 0; padding: 10px 12px; border-radius: 8px; line-height: 1.6; background:transparent;  }

/* 11) CTA Einzeilig */
.fgsc-cta { margin-top:20px; margin-bottom:20px; }

/* 12) CTA Grid drei Buttons */
.fgsc-cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 8px;
  margin-bottom: 24px;
}

/* Basis CTA Button */
.fgsc-cta-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:14px 26px;
  border-radius:9999px;
  font-family:var(--font-headers);
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  transition: all .18s ease;
}

/* Online buchen */
.fgsc-cta-primary { background:var(--brand); color:#fff; }
.fgsc-cta-primary:hover { background:var(--brand); color:#ffffffcc; transform:translateY(-1px); }

/* Telefonische Buchung */
.fgsc-cta-phone { background:#f0f0f3; color:var(--black); }
.fgsc-cta-phone:hover { background:#e3e3e6; color:var(--black); transform:translateY(-1px); }

/* Erstgespräch */
.fgsc-cta-consult { background:var(--black); color:#fff; }
.fgsc-cta-consult:hover { background:#1d1d24; color:#ffffffcc; transform:translateY(-1px); }

/* 13) Freie Blöcke Liste */
.fgsc-block-title { margin-top:16px; margin-bottom:10px; font-weight:700; font-size: 15px; }
.fgsc-block-item {
  display:inline-block;
  margin:6px 8px 6px 0;
  padding:8px 12px;
  border-radius:8px;
  background:#f7f7f7;
  border:1px solid #e5e5e5;
  transition: all 0.2s ease;
  font-size: 14px;
}
.fgsc-block-item:hover {
  background: #2ecc71;
  color: #fff;
  border-color: #2ecc71;
  cursor: pointer;
  transform: translateY(-1px);
}
.fgsc-none { margin:12px 0; padding:12px; background: #f9f9f9; border-radius: 8px; color:#666; line-height: 1.6; }
.fgsc-ok { color:#2ecc71; font-weight:600; }
.fgsc-bad { color:var(--brand); font-weight:600; }

/* 14) Hinweise */
.fgsc-hinweis-important {
  margin-top:24px;
  margin-bottom:16px;
  padding:16px 20px;
  background:rgba(220, 39, 39,.07);
  border-left:4px solid var(--brand);
  border-radius:10px;
  font-size:15px;
  line-height:1.6;
}
/* display:flex hier entfernt, 18.08.2026. Der Kasten enthaelt reinen Text,
   teils mit <strong> hervorgehoben, aber kein Icon-Kind. Flexbox behandelt
   jeden Textknoten und jedes Inline-Element als eigenes Flex-Item in einer
   Zeile: Sobald irgendwo ein <strong> im Satz steht, zerfaellt der Text in
   Spalten, jede fuer sich umgebrochen. Auf der Unternehmensseite, wo der
   Hinweis ein hervorgehobenes <strong> bekommen hat, stand der Text deshalb
   dreispaltig da statt als ein Absatz. Ohne Icon ist die Zeile ueberfluessig,
   der Kasten ist ein ganz normaler Block. */
.fgsc-hinweis-green {
  margin-top:20px;
  margin-bottom:16px;
  padding:16px 20px;
  background:rgba(46,204,113,.10);
  border-left:4px solid #2ecc71;
  border-radius:10px;
  font-size:15px;
  color:#1d7f4c;
  line-height:1.6;
  display:flex;
  align-items:flex-start;
}

/* 15) Hilfe Bereich */
.fgsc-help { margin-top:24px; margin-bottom:16px; padding:16px 20px; background:#ffffff; border-radius:10px; border:1px solid #e0e0e0; }
.fgsc-help summary { font-weight:600; font-size:15px; color:var(--black); cursor:pointer; padding:4px 0; list-style: none; }
.fgsc-help ol { margin:16px 0 6px 0; padding-left: 20px; }
.fgsc-help li { margin:10px 0; line-height:1.6; color:var(--black); }
.fgsc-help strong { color:var(--brand); }

/* 16) Loader */
.fgsc-loading { display:flex; align-items:center; justify-content:center; gap:10px; padding:20px; margin:12px 0; color:#6d6d6d; font-size:14px; }
.fgsc-spinner {
  width:18px; height:18px;
  border:3px solid #f3f3f3;
  border-top:3px solid var(--brand);
  border-radius:50%;
  animation: fgsc-spin 0.8s linear infinite;
}
@keyframes fgsc-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* 17) Mobile Fixes Date Input */
.fgsc-toolbar input[type="date"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative;
  z-index: 2;
  border: 1px solid var(--border) !important;
  background: var(--white) !important;
}
.fgsc-toolbar input[type="date"]:invalid {
  border-color:var(--brand) !important;
  background:#f9f9fb !important;
  color:var(--brand) !important;
}

/* Android Placeholder Workaround */
@media (max-width: 600px) {
  .fgsc-toolbar input[type="date"]::before {
    content: attr(placeholder);
    color: #999;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events:none;
  }
  .fgsc-toolbar input[type="date"]:focus::before,
  .fgsc-toolbar input[type="date"]:valid::before { content: ""; }
}

/* 18) Select Dauer Mobile Fix */
@media (max-width: 768px) {
  /* Die Hoehen 55 und 57 px stammen aus einer aelteren Fassung. Die
     Nachbarfelder wurden spaeter auf 44 beziehungsweise 42 px vereinheitlicht,
     dieses Feld blieb stehen und stand am 18.08.2026 im Browser sichtbar
     13 px hoeher als Startzeit und Knopf. Jetzt derselbe Wert. */
  #fgsc-duration {
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
    font-size: 16px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-indent: 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;   /* wie alle uebrigen Felder */
    background-color: var(--white) !important;
    color: var(--black) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23282834' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 40px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
  }
  /* Die frueher hier stehende Sonderregel fuer iOS setzte 57 px und riss
     das Feld noch weiter aus der Reihe. Da Hoehe und Zeilenhoehe jetzt
     ausdruecklich gesetzt sind und das Feld mit appearance:none gezeichnet
     wird, braucht iOS keinen eigenen Wert mehr. */
}

/* 19) Barrierefreiheit extras */
* { scroll-margin-top: 80px; }
.fgsc-cta-btn:focus,
.fgsc-toolbar input:focus,
.fgsc-toolbar select:focus,
.fgsc-toolbar button:focus {
  outline: 3px solid rgba(220, 39, 39,.4);
  outline-offset: 2px;
}

/* 20) Responsive Regeln */
@media (max-width: 900px) {
  .fgsc-toolbar { grid-template-columns: 1fr; }
  .fgsc-cta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  #fgsc-calendar { padding: 14px !important; }
  .fc .fc-daygrid-day { min-height: 58px !important; font-size: 16px !important; }
  .fc-daygrid-day-number { font-size: 16px !important; }
  .fgsc-toolbar input,
  .fgsc-toolbar select,
  .fgsc-toolbar button {
    padding: 0 16px !important;
    font-size: 16px !important;
    min-height: 48px !important;
  }
}
@media (max-width: 480px) {
  .fgsc-card { padding: 16px; }
  .fgsc-cta-btn { font-size: 16px; padding: 14px 20px; }
}

.fgsc-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #d72828;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  margin-right: 8px;
  flex-shrink: 0;
  font-family: Arial, sans-serif;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.fgsc-info-icon::before {
  content: "i";
}

.fgsc-thanks {
  margin-top: 22px;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 16px;
  color: var(--black);
  opacity: 0.9;
}

.fgsc-hint-small {
  font-size: 14px;
  color: #6d6d6d;
  margin: 6px 0 12px 0;
}

/* Wochentage im FullCalendar dauerhaft sichtbar erzwingen */
.fc .fc-col-header {
  height: 32px !important;
  min-height: 32px !important;
  background: #ffffff !important;
}

.fc .fc-col-header-cell {
  background: #ffffff !important;
  border: none !important;
}

.fc .fc-col-header-cell-cushion {
  color: var(--black) !important;
  font-size: 15px !important;
  font-family: var(--font-headers) !important;
  font-weight: 600 !important;
  padding: 4px 0 !important;
  display: block !important;
  overflow: visible !important;
  opacity: 1 !important;
}

/* FullCalendar Bug Fix: Header darf nicht abgeschnitten werden */
.fc .fc-scrollgrid-sync-table {
  overflow: visible !important;
}

.fc-day-header {
  display: block !important;
  visibility: visible !important;
  color: var(--black);
  font-weight: 600;
}

/* Header leicht grau 5 Prozent */
.fc .fc-col-header,
.fc .fc-scrollgrid thead,
.fc-theme-standard th.fc-col-header-cell {
  background-color: rgba(0, 0, 0, 0.01) !important;
  background-image: none !important;
}

/* Textkissen sichtbar lassen */
.fc .fc-col-header-cell-cushion {
  display: block !important;
  background: transparent !important;
}

.fc .fc-col-header-cell-cushion {
  color: #ffffff !important;
}

/* nur für meine alte Studioseite wichtig Handyanpassung LEgende */

@media (max-width: 768px) {
  .fgsc-legend {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .fgsc-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: center;
  }
}

/* Farbige Hervorhebung der Hinweis Sterne */

.fgsc-kleingedruckt {
  font-size: 14px;
  line-height: 1.6;
}

.fgsc-kleingedruckt .fgsc-star {
  color: var(--brand);
  font-weight: 600;
  margin-right: 4px;
}

/* ============================= */
/* WhatsApp Button – identisch zu CTA-Buttons */
/* ============================= */

.fgsc-cta-btn.fgsc-cta-whatsapp{
  background:#25D366;
  color:#fff;
  border-radius:9999px;
  min-height:48px;
  padding:14px 26px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
}

/* Hover / Focus */
.fgsc-cta-btn.fgsc-cta-whatsapp:hover{
  background:#1ebe5d;
  color:#ffffffcc;
  transform:translateY(-1px);
}
.fgsc-cta-btn.fgsc-cta-whatsapp:focus{
  outline:3px solid rgba(37, 211, 102, 0.4);
  outline-offset:2px;
}

/* Mobile: angenehm breit */
@media (max-width: 768px) {
  .fgsc-cta-btn.fgsc-cta-whatsapp{
    width:100%;
  }
}

/* Desktop: exakt gleiche Breite wie CTA-Grid Buttons */
@media (min-width: 769px) {
  .fgsc-cta-btn.fgsc-cta-whatsapp{
    width: calc((100% - 28px) / 3);
  }
}

/* === Site-Hintergrund auf der Belegungsplan-Seite weiss === */
body:has(.fgsc-wrap) { background: #ffffff !important; }
body:has(.fgsc-wrap) .site-content { background: #ffffff !important; }

/* === FAQ-Sektion unterhalb des Kalenders === */
.fgsc-faq-wrap { max-width: 1040px; margin: 80px auto 0; padding: 0 24px; font-family: var(--font-main); color: var(--black); }
.fgsc-faq-hero { text-align: left; margin: 0 0 28px; padding: 0 6px; }
.fgsc-faq-kicker { display: inline-block; font-family: var(--font-headers); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
.fgsc-faq-title { font-family: var(--font-headers); font-weight: 800; font-size: clamp(24px, 3vw, 36px); line-height: 1.2; color: var(--black); margin: 0 0 14px; letter-spacing: -0.01em; }
.fgsc-faq-title span { color: var(--brand); }
.fgsc-faq-intro { font-size: 16px; line-height: 1.7; color: #4a4a4a; margin: 0; max-width: 760px; }

.fgsc-faq-list { display: flex; flex-direction: column; gap: 10px; }
.fgsc-faq-item { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 0; transition: border-color .2s, box-shadow .2s; overflow: hidden; }
.fgsc-faq-item:hover { border-color: #d4d4d8; }
.fgsc-faq-item[open] { border-color: rgba(220, 39, 39,.30); box-shadow: 0 4px 18px rgba(40,40,52,.06); }

.fgsc-faq-item summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; font-family: var(--font-headers); font-weight: 600; font-size: 16px; line-height: 1.45; color: var(--black); position: relative; user-select: none; transition: color .2s; }
.fgsc-faq-item summary::-webkit-details-marker { display: none; }
.fgsc-faq-item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; line-height: 24px; text-align: center; border-radius: 50%; background: rgba(220, 39, 39,.10); color: var(--brand); font-size: 18px; font-weight: 700; transition: transform .25s, background .2s; }
.fgsc-faq-item[open] summary::after { content: "\2212"; transform: translateY(-50%) rotate(180deg); background: var(--brand); color: #fff; }
.fgsc-faq-item summary:hover { color: var(--brand); }
.fgsc-faq-item summary:focus-visible { outline: 3px solid rgba(220, 39, 39,.4); outline-offset: 2px; }

.fgsc-faq-answer { padding: 0 22px 20px; font-size: 15px; line-height: 1.75; color: #3a3a44; }
.fgsc-faq-answer p { margin: 0 0 12px; }
.fgsc-faq-answer p:last-child { margin: 0; }
.fgsc-faq-answer strong { color: var(--black); font-weight: 700; }
.fgsc-faq-note { margin-top: 14px; padding: 14px 18px; background: rgba(46,204,113,.08); border-left: 3px solid #2ecc71; border-radius: 8px; font-size: 14px; line-height: 1.6; color: #1d7f4c; }

@media (max-width: 640px) {
  .fgsc-faq-wrap { padding: 0 14px; margin-bottom: 30px; }
  .fgsc-faq-item summary { padding: 16px 50px 16px 18px; font-size: 15px; }
  .fgsc-faq-answer { padding: 0 18px 16px; font-size: 14px; }
  .fgsc-faq-item summary::after { right: 16px; width: 24px; height: 24px; line-height: 22px; }
}

/* === Padding oben und unten wie andere Seiten === */
/* bp-page Custom-Regel entfernt - greift jetzt Site-Standard */

@media (max-width: 620px) {
  /* bp-page Custom-Regel entfernt - greift jetzt Site-Standard */
}

/* === FullCalendar Prev/Next Buttons mit Inline-SVG === */
.fc .fc-prev-button,
.fc .fc-next-button {
  position: relative;
  font-size: 0 !important;
  min-width: 36px;
  min-height: 36px;
  padding: 8px 12px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fc .fc-prev-button::before,
.fc .fc-next-button::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Pfeil links */
.fc .fc-prev-button::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

/* Pfeil rechts */
.fc .fc-next-button::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/* aria-label oder fc-icon span ausblenden falls vorhanden */
.fc .fc-prev-button .fc-icon,
.fc .fc-next-button .fc-icon {
  display: none !important;
}

/* ============================================
   Mobile-Final-Patch (Profi-Hardening)
   ============================================ */

/* 1) Form-Inputs IMMER 16px erzwingen (iOS-Zoom-Praevention) */
.fgsc-toolbar input,
.fgsc-toolbar select,
.fgsc-toolbar input[type="date"] {
  font-size: 16px !important;
}

/* 2) Tap-Highlight in Brand-Rot statt Default-Blau (iOS) */
.fgsc-toolbar button,
.fgsc-toolbar input,
.fgsc-toolbar select,
.fgsc-cta-row a,
.fgsc-faq-item summary,
.fc-button {
  -webkit-tap-highlight-color: rgba(220, 39, 39, 0.2);
}

/* 3) overflow-x:hidden entfernt - verursachte Pixel-Verschiebung wegen Scrollbar-Differenz zwischen Seiten */

/* 4) FullCalendar Pfeil-Buttons mind. 44x44px (Apple HIG) */
.fc .fc-prev-button,
.fc .fc-next-button,
.fc .fc-today-button {
  min-width: 44px;
  min-height: 44px;
}

/* 5) FAQ-Summary auf Mobile dicker und besser antippbar */
@media (max-width: 480px) {
  .fgsc-faq-item summary {
    min-height: 56px;
    display: flex;
    align-items: center;
    padding-right: 56px;
  }
}

/* ============================================
   Hero-Bereich Belegungsplan
   1:1 Site-Standard (tslk-hero / kontakt.php)
   ============================================ */
.bp-hero {
  padding: 8px 0 32px;
  text-align: left;
}

.bp-hero-kicker {
  display: inline-block;
  font-family: var(--font-sub);
  font-size: 15px;
  color: var(--brand);
  margin: 0 0 16px;
  line-height: 1.2;
}

.bp-hero-title {
  font-family: var(--font-headers);
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 0 0 22px;
}

.bp-hero-title span {
  color: var(--brand);
}

.bp-hero-lead {
  font-family: var(--font-main);
  font-size: 17px;
  line-height: 1.85;
  color: var(--black);
  margin: 0 0 22px;
  max-width: 760px;
}

.bp-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(220, 39, 39, 0.12);
  color: #b11e1e;
  border-radius: 999px;
  border: 1px solid rgba(220, 39, 39, 0.25);
  font-family: var(--font-headers);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
}

.bp-hero-pill svg {
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .bp-hero {
    padding: 4px 0 24px;
  }
  .bp-hero-kicker {
    font-size: 14px;
    margin-bottom: 12px;
  }
  .bp-hero-lead {
    font-size: 16px;
    line-height: 1.7;
  }
  .bp-hero-pill {
    font-size: 12px;
    padding: 7px 14px;
  }
}



/* Kontrast-Fix: FullCalendar Wochentage (Mo/Di/Mi...) auf Profi-Niveau */
.fc .fc-col-header-cell-cushion,
.fc .fc-col-header-cell {
  color: var(--black) !important;
  font-weight: 700;
}

/* ============================================
   Mobile-Optimierung: kompakter & schneller scrollbar
   ============================================ */
@media (max-width: 768px) {
  /* F) Card-Padding kompakter */
  .fgsc-card {
    padding: 14px !important;
  }

  /* C) Kalender-Frame deutlich niedriger */
  .fc .fc-daygrid-day { min-height: 44px !important; }
  .fc .fc-daygrid-day-frame { min-height: 38px !important; }

  /* A) Out-of-range Tage (vor-/nachfolgender Monat) sehr kompakt */
  .fc .fc-day-other { min-height: 28px !important; }
  .fc .fc-day-other .fc-daygrid-day-frame { min-height: 24px !important; }
  .fc .fc-day-other .fc-daygrid-day-number {
    font-size: 12px !important;
    opacity: 0.45;
  }

  /* B) Past Tage etwas kompakter (mit X) */
  .fc .fc-day-past .fc-daygrid-day-frame { min-height: 36px !important; }

  /* G) Margins zwischen Bloecken kuerzer */
  .fgsc-toolbar { margin-top: 10px !important; margin-bottom: 10px !important; }
  .fgsc-cta-grid { margin-top: 10px !important; margin-bottom: 10px !important; }
  .fgsc-hinweis-important {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    padding: 12px 14px !important;
    font-size: 13.5px !important;
  }
  .fgsc-help { margin-top: 8px !important; }

  /* FAQ-Sektion oben weniger Margin */
  .ffaq-section-content { padding: 36px 0 !important; }
}

@media (max-width: 480px) {
  /* Out-of-range noch kleiner */
  .fc .fc-day-other { min-height: 24px !important; }
  .fc .fc-day-other .fc-daygrid-day-frame { min-height: 20px !important; }
  .fc .fc-day-other .fc-daygrid-day-number {
    font-size: 11px !important;
  }
}

/* ============================================
   Aufklappbarer Hilfe-Block - bessere UX
   (Plus-Icon dreht zu X, Hover-Effekt, Touch 44px)
   ============================================ */
.fgsc-help summary {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px !important;
  margin: -10px -16px;
  border-radius: 10px;
  cursor: pointer;
  transition: color .2s, background .2s;
  user-select: none;
  -webkit-tap-highlight-color: rgba(220, 39, 39, 0.15);
}
.fgsc-help summary::-webkit-details-marker { display: none; }
.fgsc-help summary::marker { content: ''; }

.fgsc-help-summary-text {
  flex: 1;
}

.fgsc-help-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--brand);
  transition: transform .25s ease;
}

.fgsc-help[open] .fgsc-help-icon {
  transform: rotate(45deg);
}

.fgsc-help summary:hover {
  background: rgba(220, 39, 39, 0.05);
  color: var(--brand);
}

.fgsc-help summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .fgsc-help summary {
    padding: 12px 14px !important;
    margin: -10px -14px;
  }
}

/* ============================================
   Help-Sektion Redesign: Schritt-Cards + Sektionen
   ============================================ */
.fgsc-help-body {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.fgsc-help-section {
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.fgsc-help-section:first-child {
  border-top: none;
  padding-top: 0;
}

.fgsc-help-section-label {
  font-family: var(--font-sub);
  font-size: 16px;
  color: var(--brand);
  margin-bottom: 14px;
  line-height: 1.2;
}

/* Schritt-Cards */
.fgsc-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fgsc-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  background: var(--gray-bg, #f8f8f8);
  border-radius: 10px;
  transition: background .2s;
}
.fgsc-step:hover {
  background: rgba(220, 39, 39, 0.05);
}
.fgsc-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-headers);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.fgsc-step-text {
  flex: 1;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--black);
}
.fgsc-step-text strong {
  color: var(--brand);
  font-weight: 700;
}

/* Mobile: Step-Cards kompakter */
@media (max-width: 480px) {
  .fgsc-help-body { gap: 22px; }
  .fgsc-help-section { padding-top: 14px; }
  .fgsc-help-section-label { font-size: 15px; margin-bottom: 10px; }
  .fgsc-step {
    padding: 10px 12px;
    gap: 12px;
  }
  .fgsc-step-num {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }
  .fgsc-step-text {
    font-size: 13.5px;
    line-height: 1.5;
  }
}

/* Help-Block Polish: mehr Atemluft + Legende lesbarer */
.fgsc-help[open] summary {
  margin-bottom: 8px;
}
.fgsc-help-body {
  margin-top: 24px !important;
  padding-top: 6px;
}
.fgsc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  align-items: center;
}
.fgsc-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fgsc-legend-item .dot {
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .fgsc-legend {
    gap: 12px 18px;
  }
}

/* Summary deutlich als klickbar erkennbar machen */
.fgsc-help summary {
  background: #f8f8f8 !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin: 0 !important;
  font-size: 16px !important;
  transition: all .2s ease !important;
}
.fgsc-help summary:hover {
  background: rgba(220, 39, 39, 0.06) !important;
  border-color: rgba(220, 39, 39, 0.3) !important;
}
.fgsc-help[open] summary {
  background: rgba(220, 39, 39, 0.06) !important;
  border-color: rgba(220, 39, 39, 0.3) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Plus-Icon groesser und dicker */
.fgsc-help-icon {
  width: 26px !important;
  height: 26px !important;
  stroke-width: 3 !important;
  background: var(--brand);
  color: #fff !important;
  border-radius: 50%;
  padding: 4px;
}
.fgsc-help[open] .fgsc-help-icon {
  background: var(--brand);
}

/* Help-Card insgesamt etwas mehr Profil */
.fgsc-help {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}
.fgsc-help[open] {
  border: 1px solid rgba(220, 39, 39, 0.3) !important;
  border-radius: 12px !important;
  padding: 0 !important;
  background: #fff !important;
}
.fgsc-help[open] .fgsc-help-body {
  padding: 0 18px 18px !important;
  margin-top: 16px !important;
}

/* Info-Pill: deutlich sichtbares Label statt kleinem Icon */
.fgsc-info-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-headers);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.2px;
  padding: 5px 12px;
  border-radius: 999px;
  margin-right: 4px;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(220, 39, 39, 0.25);
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .fgsc-info-pill {
    font-size: 10px;
    padding: 4px 10px;
    letter-spacing: 1px;
  }
}

/* Trust-Bullets im Hero - 2 wichtige Garantien mit Haken */
.bp-trust-bullets {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bp-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-headers);
  font-weight: 600;
  font-size: 13.5px;
  color: #333;
  line-height: 1.4;
}
.bp-trust-check {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--brand);
}
@media (max-width: 480px) {
  .bp-trust-bullets {
    margin-top: 14px;
    gap: 6px;
  }
  .bp-trust-item {
    font-size: 13.5px;
    gap: 8px;
  }
  .bp-trust-check {
    width: 14px;
    height: 14px;
  }
}

/* ============================================
   FINALE MOBILE-OPTIMIERUNG (768px und kleiner)
   - Toolbar 2x2 Grid statt 1 Spalte
   - Felder kompakter (44px statt 48px)
   - Card Padding kleiner
   - Hero kompakter
   ============================================ */
@media (max-width: 768px) {
  /* Toolbar: 2 Spalten statt auto-fit */
  .fgsc-toolbar {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 14px !important;
    margin-bottom: 12px !important;
    min-height: auto !important;
  }
  .fgsc-toolbar > div {
    min-height: auto !important;
  }

  /* Felder kompakter.
     Die Schriftgroesse gilt bewusst nur fuer den Knopf. Ein Eingabefeld
     unter 16 px laesst iOS beim Antippen in die Seite hineinzoomen und
     der Kunde landet verschoben im Formular. Das Datumsfeld war ueber
     eine genauere Regel bereits geschuetzt, Startzeit und Auswahlfeld
     waren es nicht. Am 18.08.2026 im Browser mit 14,5 px gemessen. */
  .fgsc-toolbar input,
  .fgsc-toolbar select,
  .fgsc-toolbar button {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
  }
  .fgsc-toolbar input,
  .fgsc-toolbar select { font-size: 16px !important; }
  .fgsc-toolbar button { font-size: 15px !important; }

  /* Labels enger */
  .fgsc-toolbar label {
    font-size: 13px !important;
    margin-bottom: 4px !important;
    min-height: auto !important;
  }

  /* Card-Padding etwas kleiner */
  .fgsc-card {
    padding: 12px !important;
  }
}

/* Sehr kleine Geraete (480px und kleiner) */
@media (max-width: 480px) {
  /* Felder noch kompakter, Schriftgroesse wieder nur am Knopf. */
  .fgsc-toolbar input,
  .fgsc-toolbar select,
  .fgsc-toolbar button {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 10px !important;
  }
  .fgsc-toolbar input,
  .fgsc-toolbar select { font-size: 16px !important; }
  .fgsc-toolbar button { font-size: 14.5px !important; }
  #fgsc-duration {
    height: 42px !important;
    min-height: 42px !important;
    line-height: 42px !important;
  }

  .fgsc-toolbar {
    gap: 10px !important;
  }
}

/* ============================================
   SITE-STANDARD — einheitliche Container-Margins
   wie auf der Preisseite (preise.css):
   - <640px:  padding 0 16px
   - <380px:  padding 0 12px
   ============================================ */
@media (max-width: 640px) {
  .fgsc-wrap,
  .fgsc-faq-wrap {
    padding: 0 16px !important;
  }
  .fc .fc-toolbar.fc-header-toolbar {
    padding: 0 !important;
  }
}



/* FAQ-Section hat eigenen ffaq-inner (kommt aus faq.css mit 1040/24px)
   → auf Mobile gleichen wir auch das an */
@media (max-width: 640px) {
  .ffaq-inner {
    padding: 0 16px !important;
  }
}


/* ============================================
   HERO-CONTAINER auf Site-Standard (wie Preisseite)
   - kontakt.css macht negative margins -> wir resetten
   - Ziel: Hero hat IDENTISCHE Margins wie Card und FAQ
   ============================================ */


@media (max-width: 640px) {
  
}

@media (max-width: 380px) {
  
}

/* ============================================
   HERO auf gleiche Linie wie Card (.fgsc-wrap)
   - kontakt.css setzt margin: 0 -24px (verschiebt nach links)
   - wir neutralisieren das + setzen max-width 1040
   - kein Outer-Inner Pattern - bleibt wie kontakt.php gebaut
   ============================================ */
main > .tslk {
  max-width: 1040px;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box;
}
main > .tslk > .tslk-hero-wrap {
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 640px) {
  main > .tslk {
    padding: 0 16px !important;
  }
}

/* <380 behaelt 16px wie <640 - Konsistenz mit allen Seiten */

/* ============================================
   HERO-PADDING SYNC mit Preisseite/Kontaktseite
   - Desktop: 72px 0 32px (von kontakt.css schon gesetzt)
   - <640px:  40px 0 36px (wie Preisseite)
   - <380px:  30px 0 24px (proportional)
   ============================================ */
@media (max-width: 640px) {
  .tslk-hero {
    padding: 40px 0 36px !important;
  }
}

/* <380 nutzt selbe Werte wie <640 fuer Konsistenz mit Kontaktseite */

/* ============================================
   FINAL SYNC mit Preisseite
   - Hero-Border-Bottom (wie Preise)
   - kleine Verfeinerungen
   ============================================ */
main > .tslk > .tslk-hero-wrap {
  border-bottom: 1px solid var(--border, #e8e8ec);
}

/* Abstand zwischen Hero und Card (FAQ-Block hat 80px - aehnlich) */
.fgsc-wrap {
  margin-top: 32px !important;
}
@media (max-width: 640px) {
  .fgsc-wrap {
    margin-top: 24px !important;
  }
}

/* ============================================
   FINAL: Hero-WRAP fullwidth wie Kontakt/Preise
   - .tslk hat aktuell padding 0 24/16/12
   - Aber Hero-WRAP soll FULLWIDTH sein (left=0)
   - Loesung: Hero-WRAP mit negative-margin breiter
   ============================================ */
@media (max-width: 640px) {
  main > .tslk > .tslk-hero-wrap {
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* === FEHLENDE BASIS-PADDING FUER .tslk-hero ergaenzt (2026-07-17) ===
   kontakt.css liefert normalerweise padding:72px 0 32px, wird aber
   auf der Belegungsplan-Seite nicht eingebunden. Hier nachgezogen. */
.tslk-hero {
  padding: 72px 0 32px;
}

/* ================================================================
   VARIANTE 2, umgesetzt am 18.08.2026

   Warum dieser Block am Ende steht: Die Datei darueber arbeitet an
   vielen Stellen mit !important. Ein Nachtrag am Schluss gewinnt bei
   gleicher Spezifitaet und ist besser zu lesen als Aenderungen quer
   durch 1355 Zeilen.

   Gemessene Ausgangslage, die zu diesen Regeln gefuehrt hat:
   Die Statusflaechen lagen bei 8 Prozent Deckkraft. Gegen Weiss ergab
   das Kontraste von 1,04 zu 1 bis 1,13 zu 1, also praktisch unsichtbar.
   Das gruene Haekchen kam auf 2,10 zu 1, der gelbe Punkt auf 1,66 zu 1,
   beide weit unter den geforderten 4,5 zu 1. Vergangene Tage standen bei
   opacity 0.3, das sind 1,85 zu 1.
   ================================================================ */

:root {
  --bp-frei:          #0f6b43;
  --bp-frei-flaeche:  #e8f5ee;
  --bp-teils:         #8a5a00;
  --bp-teils-flaeche: #fdf3e0;
  --bp-belegt:        #a51f1f;
  --bp-belegt-flaeche:#fbeaea;
  --bp-heute:         #dc2727;
  --bp-still:         #6d6d6d;
  --bp-linie:         #e8e8ec;
}

/* ---- 1) Die alte Umrandung ablegen -----------------------------
   outline nimmt keinen Platz ein. Da die Zellen aneinander stossen,
   liefen die farbigen Umrisse benachbarter Tage ineinander; auf dem
   Telefon des Betreibers war September dadurch eine unruhige Wand aus
   Kaesten. Der Zustand sitzt jetzt auf dem inneren Rahmen der Zelle,
   der Platz und Abstand hat. */
.fc .fc-daygrid-day.day-fit,
.fc .fc-daygrid-day.day-partial,
.fc .fc-daygrid-day.day-full {
  background: transparent !important;
  outline: none !important;
}
.fc .fc-daygrid-day.day-fit::after,
.fc .fc-daygrid-day.day-partial::after,
.fc .fc-daygrid-day.day-full::after {
  content: none !important;
}

/* ---- 2) Zustaende als gefuellte Flaeche ------------------------
   Farbe ist nie das einzige Signal: Jeder Zustand traegt zusaetzlich
   ein Wort, ein eigenes Zeichen und, bei belegt, eine Schraffur. Die
   Schraffur wirkt auch dann, wenn Rot und Gruen nicht unterscheidbar
   sind. */
.fc .fc-daygrid-day .fc-daygrid-day-frame {
  border: 1px solid transparent;
  border-radius: 8px;
  margin: 2px;
  transition: border-color .12s ease, background-color .12s ease;
}

.fc .day-fit .fc-daygrid-day-frame {
  background: var(--bp-frei-flaeche);
  border-color: var(--bp-frei);
}
.fc .day-partial .fc-daygrid-day-frame {
  background: var(--bp-teils-flaeche);
  border-color: var(--bp-teils);
}
.fc .day-full .fc-daygrid-day-frame {
  background: var(--bp-belegt-flaeche);
  border-color: var(--bp-belegt);
  background-image: repeating-linear-gradient(
    135deg, transparent 0 6px, rgba(165,31,31,.14) 6px 12px);
}

/* Beschriftung unter der Tagesziffer. Zeichen und Wort zusammen. */
.fc .day-fit .fc-daygrid-day-frame::after,
.fc .day-partial .fc-daygrid-day-frame::after,
.fc .day-full .fc-daygrid-day-frame::after {
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .01em;
  padding: 0 2px 5px;
  margin-top: -2px;
}
/* Achtung: Ein Leerzeichen direkt hinter einer Escape-Sequenz beendet nur
   die Sequenz und erscheint nicht im Text. "\2713 frei" ergab deshalb
   "\2713frei", das Zeichen klebte am Wort. Ein geschuetztes Leerzeichen
   als eigene Escape-Sequenz loest das und verhindert zugleich einen
   Umbruch zwischen Zeichen und Wort. */
.fc .day-fit .fc-daygrid-day-frame::after     { content: "\2713\A0 frei";   color: var(--bp-frei); }
.fc .day-partial .fc-daygrid-day-frame::after { content: "\25D1\A0 teils";  color: var(--bp-teils); }
.fc .day-full .fc-daygrid-day-frame::after    { content: "\2715\A0 belegt"; color: var(--bp-belegt); }

/* Die Tagesziffer bleibt dunkel, nicht farbig: auf der getoenten
   Flaeche ergibt das 12,5 zu 1 statt der frueheren 2 zu 1. */
.fc .day-fit .fc-daygrid-day-number,
.fc .day-partial .fc-daygrid-day-number,
.fc .day-full .fc-daygrid-day-number {
  color: #282834 !important;
  font-weight: 700;
  opacity: 1;
}

/* ---- 3) Vergangenheit und ausserhalb ---------------------------
   Lesbar, aber eindeutig nicht waehlbar. Kein opacity mehr. */
.fc .fc-daygrid-day.tls-vergangen .fc-daygrid-day-frame,
.fc .fc-daygrid-day.tls-ausserhalb .fc-daygrid-day-frame {
  background: #f6f6f8;
  border-color: var(--bp-linie);
}
.fc .fc-daygrid-day.tls-vergangen .fc-daygrid-day-number,
.fc .fc-daygrid-day.tls-ausserhalb .fc-daygrid-day-number {
  color: var(--bp-still) !important;
  font-weight: 500;
  opacity: 1;
}
.fc .fc-daygrid-day.tls-vergangen,
.fc .fc-daygrid-day.tls-ausserhalb {
  cursor: default !important;
  opacity: 1 !important;
}
.fc .fc-daygrid-day.tls-vergangen:hover,
.fc .fc-daygrid-day.tls-ausserhalb:hover {
  background: transparent !important;
}

/* Tage des Nachbarmonats: sichtbar, aber zurueckgenommen. */
.fc .fc-day-other .fc-daygrid-day-frame {
  background: transparent;
  border-color: transparent;
}
.fc .fc-day-other .fc-daygrid-day-number {
  color: #a8a8b2 !important;
  opacity: 1;
}

/* ---- 4) Heute ---------------------------------------------------
   Ein Ring, keine Flaeche. So bleibt der Zustand frei oder belegt
   sichtbar und heute legt sich nur darueber. */
.fc .fc-day-today .fc-daygrid-day-frame {
  box-shadow: inset 0 0 0 2px var(--bp-heute);
}
.fc .fc-day-today { background: transparent !important; border: 0 !important; }
/* Kein Wort heute in der Zelle. Der rote Ring markiert den Tag, die
   Legende erklaert ihn, und in der Zelle stand er dem Zustand frei oder
   belegt im Weg. Vorleseprogramme erfahren es weiterhin ueber das
   aria-label, das belegungsplan.js setzt. */
.fc .fc-day-today .fc-daygrid-day-number::after { content: none !important; }

/* Ausgewaehlter Tag */
.fc .fc-daygrid-day.fc-day-selected { background: transparent !important; border: 0 !important; }
.fc .fc-daygrid-day.fc-day-selected .fc-daygrid-day-frame {
  box-shadow: inset 0 0 0 3px #282834;
}

/* ---- 5) Tastatur ------------------------------------------------ */
.fc .fc-daygrid-day[tabindex]:focus-visible {
  outline: 3px solid var(--bp-heute);
  outline-offset: -3px;
  border-radius: 8px;
}

/* ---- 6) Blaetterknoepfe -----------------------------------------
   Der Betreiber wuenscht ausdruecklich kein Rosa. Der abgeschaltete
   Zurueck-Pfeil und der Knopf Heute erschienen bisher in einem hellen
   Rot, das auf dem Geraet rosa wirkt. Abgeschaltet heisst jetzt grau,
   und Heute ist ein ruhiger Umrissknopf. */
.fc .fc-button:disabled,
.fc .fc-button.fc-button-disabled {
  background: #f1f1f4 !important;
  border-color: var(--bp-linie) !important;
  color: #9a9aa4 !important;
  opacity: 1 !important;
  cursor: not-allowed;
}
.fc .fc-today-button {
  background: #ffffff !important;
  color: #282834 !important;
  border: 1px solid #cfcfd8 !important;
  font-weight: 700 !important;
}
.fc .fc-today-button:hover:not(:disabled) {
  border-color: var(--bp-heute) !important;
  color: var(--bp-heute) !important;
}
.fc .fc-today-button:disabled {
  background: #f1f1f4 !important;
  color: #9a9aa4 !important;
}

/* ---- 7) Legende ueber dem Kalender ------------------------------ */
.fgsc-legende-oben {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  margin: 0 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #282834;
}
.fgsc-le { display: inline-flex; align-items: center; gap: 7px; }
.fgsc-le-feld {
  width: 22px; height: 22px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; font-style: normal;
  border: 1px solid currentColor;
}
.fgsc-le-frei   { background: var(--bp-frei-flaeche);   color: var(--bp-frei); }
.fgsc-le-teils  { background: var(--bp-teils-flaeche);  color: var(--bp-teils); }
.fgsc-le-belegt {
  background: var(--bp-belegt-flaeche); color: var(--bp-belegt);
  background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(165,31,31,.16) 4px 8px);
}
.fgsc-le-heute  { background: #fff; color: var(--bp-heute); box-shadow: inset 0 0 0 2px var(--bp-heute); border-color: transparent; }

/* ---- 8) Stoerung der Datenquelle --------------------------------
   Steht ueber dem Kalender und ist nicht zu uebersehen. Ein leerer
   Kalender darf niemals wie ein freier Monat aussehen. */
.fgsc-datenfehler {
  display: block;
  border: 2px solid var(--bp-belegt);
  background: var(--bp-belegt-flaeche);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 14px;
  color: #282834;
  font-size: 15px;
  line-height: 1.5;
}
.fgsc-datenfehler[hidden] { display: none; }
.fgsc-datenfehler strong { display: block; color: var(--bp-belegt); font-size: 16px; margin-bottom: 4px; }
.fgsc-datenfehler span { display: block; }
.fgsc-datenfehler em { font-style: normal; font-weight: 700; }
.fgsc-neu-laden {
  margin-top: 12px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 9999px;
  border: 1px solid var(--bp-belegt);
  background: #fff;
  color: var(--bp-belegt);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.fgsc-neu-laden:hover { background: var(--bp-belegt); color: #fff; }

/* Gestoertes Gitter wird sichtbar stillgelegt. */
#fgsc-calendar.ist-gestoert { position: relative; }
#fgsc-calendar.ist-gestoert .fc-daygrid-body {
  filter: grayscale(1);
  opacity: .5;
  pointer-events: none;
}

/* ---- 9) Abstand unter dem Pruefen-Knopf --------------------------
   Zwischen Pruefen und den Handlungsaufforderungen klaffte auf dem
   Telefon rund eine Daumenbreite Leerraum. */
.fgsc-cta-grid { margin-top: 18px !important; }

/* ---- 10) Kleine Bildschirme -------------------------------------- */
@media (max-width: 480px) {
  .fc .day-fit .fc-daygrid-day-frame::after,
  .fc .day-partial .fc-daygrid-day-frame::after,
  .fc .day-full .fc-daygrid-day-frame::after {
    font-size: 9.5px;
    padding-bottom: 4px;
  }
  .fc .fc-daygrid-day .fc-daygrid-day-frame { margin: 1.5px; border-radius: 7px; }
  .fgsc-legende-oben { font-size: 12.5px; gap: 6px 12px; }
  .fgsc-le-feld { width: 20px; height: 20px; }
}
/* ================= Ende Variante 2 ================= */

/* Rueckmeldung beim Zeigen. Die alte Regel faerbte die Tabellenzelle
   hinter dem Rahmen und war dadurch kaum noch zu sehen. */
.fc .fc-daygrid-day[tabindex]:hover .fc-daygrid-day-frame {
  border-width: 2px;
  margin: 1px;
}
.fc .fc-daygrid-day.tls-vergangen:hover .fc-daygrid-day-frame,
.fc .fc-daygrid-day.tls-ausserhalb:hover .fc-daygrid-day-frame {
  border-width: 1px;
  margin: 2px;
}

/* ================================================================
   KOMPAKTE FASSUNG, 18.08.2026

   Gemessen am Geraet des Betreibers: Die Tageszellen waren rund 54
   Bildpunkte breit und 110 hoch, also doppelt so hoch wie breit. Ein
   Monat mit sechs Zeilen passte dadurch nicht auf den Bildschirm.

   Die Hoehe kam nicht von der Beschriftung, sondern von einem Bereich,
   den dieser Kalender gar nicht braucht: FullCalendar haelt in jeder
   Zelle Platz fuer Termineintraege frei. Hier stehen nie Eintraege
   drin, der Zustand kommt ueber Klassen. Der Platz wird deshalb
   entfernt und die Zellhoehe je Bildschirmgroesse gesetzt.
   ================================================================ */

/* ---- 1) Den ungenutzten Ereignisbereich entfernen --------------- */
.fc .fc-daygrid-day-events,
.fc .fc-daygrid-day-bottom,
.fc .fc-daygrid-more-link {
  display: none !important;
}

/* Die alten Mindesthoehen aus 29 Medienabfragen ausser Kraft setzen.
   Sie widersprachen sich teilweise gegenseitig. */
.fc .fc-daygrid-day,
.fc .fc-daygrid-day-frame {
  min-height: 0 !important;
}

/* ---- 2) Zelle als kompakter Block ------------------------------- */
.fc .fc-daygrid-day .fc-daygrid-day-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 2px;
  min-height: 58px !important;
}
.fc .fc-daygrid-day-top {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
  opacity: 1;
}
.fc .fc-daygrid-day-number {
  float: none !important;
  display: inline-block;
  padding: 0 !important;
  font-size: 15px;
  line-height: 1.05;
}
.fc .day-fit .fc-daygrid-day-frame::after,
.fc .day-partial .fc-daygrid-day-frame::after,
.fc .day-full .fc-daygrid-day-frame::after {
  padding: 0;
  margin: 0;
  font-size: 10.5px;
  line-height: 1.05;
}

/* Das Wort heute ist entfernt, siehe oben. */

/* ---- 3) Kopfzeile und Werkzeugleiste schlanker ------------------ */
.fc .fc-col-header-cell { padding: 4px 0 !important; }
.fc .fc-col-header-cell-cushion { padding: 2px 0 !important; font-size: 12.5px; }
.fc .fc-toolbar.fc-header-toolbar { margin-bottom: 8px !important; gap: 6px; flex-wrap: nowrap; }
.fc .fc-toolbar-title { font-size: 18px !important; white-space: nowrap; }
.fc .fc-button { min-height: 44px; min-width: 44px; padding: 0 12px !important; font-size: 14px !important; }
/* Feste Breite waere gefaehrlich: Traegt ein Knopf doch einmal Text
   statt eines Pfeils, laeuft er sonst ueber seinen Nachbarn. Genau das
   ist am 18.08.2026 passiert. min-width laesst ihn stattdessen wachsen. */
.fc .fc-prev-button, .fc .fc-next-button {
  padding: 0 8px !important;
  min-width: 44px;
  white-space: nowrap;
}
#fgsc-calendar { padding: 8px !important; margin-bottom: 12px !important; }

/* ---- 4) Je Bildschirmgroesse -------------------------------------
   Ziel: Ein Monat mit sechs Zeilen passt ohne Scrollen. */

@media (max-width: 400px) {
  .fc .fc-daygrid-day .fc-daygrid-day-frame { min-height: 46px !important; margin: 1px; border-radius: 6px; }
  .fc .fc-daygrid-day-number { font-size: 13.5px; }
  .fc .day-fit .fc-daygrid-day-frame::after,
  .fc .day-partial .fc-daygrid-day-frame::after,
  .fc .day-full .fc-daygrid-day-frame::after { font-size: 9px; }
  .fc .fc-toolbar-title { font-size: 16px !important; }
  .fc .fc-button { min-height: 42px; font-size: 13px !important; }
  .fgsc-legende-oben { font-size: 11.5px; gap: 5px 10px; margin-bottom: 8px; }
  .fgsc-le-feld { width: 18px; height: 18px; font-size: 10px; border-radius: 5px; }
}

@media (min-width: 401px) and (max-width: 600px) {
  .fc .fc-daygrid-day .fc-daygrid-day-frame { min-height: 52px !important; margin: 1.5px; }
  .fc .fc-daygrid-day-number { font-size: 14.5px; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .fc .fc-daygrid-day .fc-daygrid-day-frame { min-height: 64px !important; }
  .fc .fc-daygrid-day-number { font-size: 16px; }
  .fc .day-fit .fc-daygrid-day-frame::after,
  .fc .day-partial .fc-daygrid-day-frame::after,
  .fc .day-full .fc-daygrid-day-frame::after { font-size: 11.5px; }
}

@media (min-width: 901px) {
  .fc .fc-daygrid-day .fc-daygrid-day-frame { min-height: 72px !important; }
  .fc .fc-daygrid-day-number { font-size: 17px; }
  .fc .day-fit .fc-daygrid-day-frame::after,
  .fc .day-partial .fc-daygrid-day-frame::after,
  .fc .day-full .fc-daygrid-day-frame::after { font-size: 12px; }
  .fc .fc-toolbar-title { font-size: 22px !important; }
  #fgsc-calendar { max-width: 780px; margin-left: auto; margin-right: auto; }
}

/* Querformat auf dem Telefon: wenig Hoehe, jede Zeile zaehlt. */
@media (max-height: 520px) and (orientation: landscape) {
  .fc .fc-daygrid-day .fc-daygrid-day-frame { min-height: 38px !important; padding: 2px; }
  .fc .fc-daygrid-day-number { font-size: 13px; }
  .fc .day-fit .fc-daygrid-day-frame::after,
  .fc .day-partial .fc-daygrid-day-frame::after,
  .fc .day-full .fc-daygrid-day-frame::after { font-size: 8.5px; }
  .fc .fc-col-header-cell { padding: 2px 0 !important; }
}

/* ---- 5) Legende sichtbar halten ---------------------------------- */
.fgsc-card > .fgsc-legende-oben {
  display: flex !important;
  padding: 2px 0 6px;
  border-bottom: 1px solid var(--bp-linie);
  margin-bottom: 10px;
}
/* ================= Ende kompakte Fassung ================= */

/* Kurze Merkmalszeile statt zweier Haken mit ganzen Saetzen. */
.bp-meta {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: #6d6d6d;
  letter-spacing: .01em;
}
@media (max-width: 480px) {
  .bp-meta { font-size: 12.5px; margin-top: 8px; }
}

/* ================================================================
   Ergebniskarten und Feinschliff, 18.08.2026

   Die Karten wurden bisher im JavaScript mit eingebetteten Farben
   erzeugt. Zwei davon waren nicht lesbar: #2ecc71 auf hellgruen ergibt
   1,98 zu 1, #f1c40f auf hellgelb 1,59 zu 1. Gefordert sind 4,5 zu 1.
   Die Farben liegen jetzt hier und stimmen mit dem Kalender ueberein.
   ================================================================ */
.fgsc-karte {
  display: block;
  padding: 14px 16px;
  border-radius: 10px;
  border-left: 4px solid;
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: #282834;
}
.fgsc-karte strong { display: block; font-size: 16px; margin-bottom: 4px; }
.fgsc-karte span { display: block; }
.fgsc-karte .fgsc-karte-daten {
  font-weight: 700;
  margin: 2px 0 6px;
  font-variant-numeric: tabular-nums;
}
.fgsc-karte-frei   { background: var(--bp-frei-flaeche);   border-left-color: var(--bp-frei); }
.fgsc-karte-frei strong   { color: var(--bp-frei); }
.fgsc-karte-teils  { background: var(--bp-teils-flaeche);  border-left-color: var(--bp-teils); }
.fgsc-karte-teils strong  { color: var(--bp-teils); }
.fgsc-karte-belegt { background: var(--bp-belegt-flaeche); border-left-color: var(--bp-belegt); }
.fgsc-karte-belegt strong { color: var(--bp-belegt); }

/* Ueberschrift ueber den Handlungsknoepfen. Ordnet sie als naechsten
   Schritt ein, statt sie mit dem Pruefen-Knopf konkurrieren zu lassen. */
.fgsc-cta-titel {
  margin: 18px 0 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: #282834;
}
@media (max-width: 480px) {
  .fgsc-cta-titel { font-size: 13.5px; margin-top: 14px; }
  .fgsc-karte { font-size: 14.5px; padding: 12px 14px; }
}

/* ================================================================
   Ladeanzeige ohne Layoutsprung, 18.08.2026

   Die Anzeige stand im Textfluss. Beim Monatswechsel wurde sie ein- und
   wieder ausgeblendet, die Seite wurde dadurch kurz hoeher und wieder
   niedriger, und alles darunter ruckte. Auf dem Telefon ist so ein
   Ruck der Hauptverdaechtige, wenn die Seite beim Blaettern springt.

   Jetzt schwebt sie als kleine Meldung ueber dem unteren Rand. Sie
   nimmt keinen Platz mehr im Fluss ein, ist auf jedem Geraet sofort zu
   sehen und verdeckt den Kalender nicht.
   ================================================================ */
.fgsc-loading {
  position: fixed !important;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 60;
  width: auto !important;
  max-width: calc(100vw - 32px);
  padding: 10px 18px !important;
  border-radius: 9999px !important;
  background: #282834 !important;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  pointer-events: none;
}
.fgsc-loading .fgsc-spinner {
  border-color: rgba(255,255,255,.35);
  border-top-color: #ffffff;
}

/* Wer Bewegung reduziert haben moechte, bekommt einen ruhigen Punkt
   statt eines drehenden Rings. */
@media (prefers-reduced-motion: reduce) {
  .fgsc-spinner { animation: none !important; border-top-color: rgba(255,255,255,.9); }
}

/* Fehlermeldung im Ergebnisbereich. Farbe kommt aus dem Stylesheet
   statt aus dem JavaScript, damit sie mit dem Kalender uebereinstimmt
   und den Kontrast einhaelt. */
.fgsc-fehlermeldung { color: var(--bp-belegt); font-weight: 600; }

/* Nur fuer Vorleseprogramme, 18.08.2026. Traegt die Monatsansage aus
   monatAnsagen() im JavaScript. Das Standardmuster zum visuellen
   Verstecken bei gleichzeitiger Vorlesbarkeit: kein display:none, das
   wuerde auch Screenreader ausschliessen. */
.fgsc-nur-screenreader {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================
   SICHTPRUEFUNG IM BROWSER, 18.08.2026 abends

   Erstmals standen ein echter Browser und damit Bildschirmfotos zur
   Verfuegung. Alle bisherigen Runden waren aus dem Quelltext
   abgeleitet. Die folgenden vier Befunde waren nur sichtbar, nicht
   aus dem Code erkennbar.
   ================================================================ */

/* ---- 1) Der Zurueck-Pfeil war praktisch unsichtbar ---------------
   Beide Pfeile lagen als SVG mit fest eingebautem fill='%23ffffff'
   im Hintergrundbild. Auf dem roten Knopf war das richtig. Sobald der
   Knopf abgeschaltet ist, liegt er aber auf hellem Grau, und ein
   weisser Pfeil auf #f1f1f4 ergibt 1,05 zu 1. Im Bildschirmfoto vom
   18.08. war links nur ein leerer grauer Kreis zu sehen.

   Statt zwei fest gefaerbter Bilder wird die Form jetzt als Maske
   benutzt und mit der Schriftfarbe des Knopfes gefuellt. Damit folgt
   der Pfeil automatisch jedem Zustand, auch kuenftigen. */
.fc .fc-prev-button::before,
.fc .fc-next-button::before {
  background-image: none;
  background-color: currentColor;
  width: 13px;
  height: 13px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.fc .fc-prev-button::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}
.fc .fc-next-button::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/* ---- 2) Rot bedeutete auf dieser Seite drei verschiedene Dinge ---
   Markenrot trug gleichzeitig den Hauptknopf "Termin pruefen", den
   Ring um den heutigen Tag und die beiden Blaetterpfeile. Im Foto
   zog der rote Pfeilkreis den Blick staerker auf sich als der
   eigentliche Handlungsknopf.

   Die Pfeile werden deshalb ruhige Umrissknoepfe, genau wie der Knopf
   "Heute", der aus demselben Grund bereits am Nachmittag umgestellt
   wurde. Rot bleibt der Handlung und dem heutigen Tag vorbehalten und
   kommt bei den Pfeilen erst beim Zeigen und beim Tastaturfokus zurueck. */
.fc .fc-prev-button,
.fc .fc-next-button {
  background: #ffffff !important;
  color: #282834 !important;
  border: 1px solid #cfcfd8 !important;
  border-radius: 9999px !important;
}
.fc .fc-prev-button:hover:not(:disabled),
.fc .fc-next-button:hover:not(:disabled) {
  background: #ffffff !important;
  border-color: var(--bp-heute) !important;
  color: var(--bp-heute) !important;
}
/* Abgeschaltet heisst weiterhin grau, aber lesbar grau: 4,6 zu 1
   statt der frueheren 1,9 zu 1. */
.fc .fc-button:disabled,
.fc .fc-button.fc-button-disabled {
  background: #f1f1f4 !important;
  border-color: var(--bp-linie) !important;
  color: #6b6b76 !important;
}

/* ---- 3) Das Statuswort lief aus der Zelle heraus -----------------
   Bei 320 und 360 Bildpunkten ist eine Tagesspalte rund 36 Bildpunkte
   breit. Das Wort "belegt" mit Zeichen misst dort 34 bis 36 Bildpunkte
   und stand im Foto sichtbar ueber dem Rahmen und im Nachbarfeld.

   Unterhalb von 361 Bildpunkten traegt die Zelle deshalb nur noch das
   Zeichen, dafuer deutlich groesser. Die Farbe ist damit weiterhin
   nicht das einzige Signal, die Legende steht unmittelbar darueber,
   und das ausgeschriebene Wort bleibt im aria-label erhalten. Ab
   361 Bildpunkten steht das Wort wie bisher. */
@media (max-width: 360px) {
  .fc .day-fit .fc-daygrid-day-frame::after     { content: "\2713"; }
  .fc .day-partial .fc-daygrid-day-frame::after { content: "\25D1"; }
  .fc .day-full .fc-daygrid-day-frame::after    { content: "\2715"; }
  .fc .day-fit .fc-daygrid-day-frame::after,
  .fc .day-partial .fc-daygrid-day-frame::after,
  .fc .day-full .fc-daygrid-day-frame::after {
    font-size: 12px;
    line-height: 1;
    padding-bottom: 3px;
  }
}
/* Fangnetz, keine Reparatur: Sollte eine Beschriftung durch eine
   fremde Schriftgroesse doch einmal zu breit werden, bleibt sie
   innerhalb ihrer Zelle statt in die Nachbarzelle zu laufen. */
.fc .fc-daygrid-day .fc-daygrid-day-frame { overflow: hidden; }

/* ---- 4) Die Werkzeugleiste brach bei 320 px in zwei Zeilen -------
   Der Knopf "Heute" rutschte unter die Pfeile, der Monatsname stand
   allein rechts daneben. Die Leiste war dadurch 84 statt 42 Bildpunkte
   hoch und wirkte zerrissen. */
@media (max-width: 400px) {
  .fc .fc-toolbar.fc-header-toolbar { flex-wrap: nowrap !important; gap: 4px; }
  .fc .fc-toolbar-chunk { display: flex; align-items: center; flex-wrap: nowrap; }
  .fc .fc-today-button { padding: 0 10px !important; min-width: 0 !important; }
  .fc .fc-toolbar-title { font-size: 15px !important; }
}

/* ---- 5) "Kurz anrufen" traegt im Shop rote Schrift ---------------
   Geprueft und bewusst nicht geaendert. Die Farbe kommt aus
   mu-plugins/tls-barrierefrei.php und ist dort begruendet: Markenrot
   erreicht auf dem grauen Grund #f0f0f3 nur 4,45 zu 1, das dunklere
   #c81f1f erreicht 4,95 zu 1. Das ist eine getroffene Entscheidung,
   kein Versehen. Auf der Unternehmensseite gibt es dieses Zusatzmodul
   nicht, dort bleibt der Knopf dunkel. Der Unterschied ist damit
   erklaerbar und zulaessig, die Kalender duerfen sich an ihre Seite
   anpassen. Keine Regel dagegen. */

/* ---- 6) Der Knopf "Termin pruefen" schnitt seine Beschriftung ab --
   Bei 320 Bildpunkten ist die Spalte rund 131 Bildpunkte breit. Der
   Knopf richtete sich nach seinem Inhalt, blieb dadurch 98 Bildpunkte
   schmal, das Wort brach um, und die feste Hoehe von 42 Bildpunkten
   schnitt die zweite Zeile ab. Gemessen: Inhalt 69, Kasten 42.
   Im Foto stand oben "Termin" und unten ein angeschnittenes "pruefen".
   Der Knopf fuellt seine Spalte jetzt aus und bricht nicht mehr um. */
@media (max-width: 768px) {
  .fgsc-toolbar button {
    width: 100%;
    white-space: nowrap;
  }
}

/* ---- 6b) Die Werkzeugleiste war breiter als ihre Karte -----------
   Beim Nachmessen der Knopfbreite fiel der eigentliche Fehler auf, und
   er bestand schon vorher. Bei 320 Bildpunkten stand in der Leiste
   Platz fuer 249 Bildpunkte zur Verfuegung, die beiden Spalten
   beanspruchten aber 155 plus 124, also 279. Startzeit und Knopf ragten
   dadurch 28 Bildpunkte ueber den Rand der Karte hinaus und wurden
   abgeschnitten. Im Bildschirmfoto endet das Zeitfeld ohne rechte Kante.

   Zwei Ursachen wirkten zusammen:

   1. Ein Rasterfeld darf sich standardmaessig nicht unter seine
      Mindestbreite verkleinern. Das Datumsfeld bringt als Mindestbreite
      rund 155 Bildpunkte mit, weil dd.mm.jjjj und das Kalendersymbol
      hineinpassen muessen. Die Angabe 1fr wurde dadurch wirkungslos.
   2. Zwei Spalten sind auf einem 320 Bildpunkte breiten Geraet fuer
      diese Felder ohnehin zu eng.

   Beides wird behoben, nicht ueberdeckt: die Felder duerfen schrumpfen,
   und unterhalb von 381 Bildpunkten steht wieder eine Spalte. Das
   Datumsfeld bekommt dort die volle Breite und bleibt vollstaendig
   lesbar. Ab 381 Bildpunkten bleibt es bei den zwei Spalten, die im
   August bewusst eingefuehrt wurden. */
.fgsc-toolbar > div { min-width: 0; }

@media (max-width: 380px) {
  .fgsc-toolbar { grid-template-columns: 1fr !important; }
}

/* ---- 7) Zwei leere Kaesten hielten 72 Bildpunkte Platz besetzt ----
   #fgsc-result und #fgsc-blocks nehmen die Antwort der Terminpruefung
   auf. Vor der ersten Pruefung sind sie leer, trugen aber weiterhin
   Polsterung und Aussenabstand. Zwischen dem Knopf "Termin pruefen"
   und der Zeile "Termin passt?" klaffte dadurch eine leere Flaeche von
   72 Bildpunkten. Solange kein Inhalt darin steht, nehmen sie jetzt
   keinen Platz ein. Sobald das Skript etwas hineinschreibt, greift
   :empty nicht mehr und der Kasten erscheint von selbst. */
#fgsc-result:empty,
#fgsc-blocks:empty { display: none !important; }

/* ================= Ende Sichtpruefung 18.08.2026 ================= */

/* ---- 8) Luecke zwischen zwei Haltepunkten ------------------------
   Unter 769 Bildpunkten stehen zwei Spalten, ab 901 drei. Dazwischen,
   also genau im Bereich der Tablets im Hochformat, griff nur die alte
   Regel "eine Spalte". Bei 820 Bildpunkten war das Datumsfeld dadurch
   717 Bildpunkte breit und jedes Feld belegte eine eigene Zeile. Nicht
   kaputt, aber deutlich schlechter als links und rechts davon.
   Am 18.08.2026 im Browser gesehen. */
@media (min-width: 769px) and (max-width: 900px) {
  .fgsc-toolbar { grid-template-columns: 1fr 1fr; }
}

/* ---- 9) Zeilenhoehe passte nicht zur Knopfhoehe ------------------
   Der Knopf erbt line-height 48px. Am Rechner stimmt das, dort ist er
   ebenfalls 48 Bildpunkte hoch. Auf dem Telefon ist er 42, die Zeile
   blieb aber 48: gemessener Inhalt 45 in einem Kasten von 42. Sichtbar
   abgeschnitten war dadurch nichts, weil die Zeile mittig sitzt, aber
   drei Bildpunkte Ueberhang sind eine falsche Angabe und koennen bei
   einer anderen Schrift zum Anschneiden der Unterlaengen fuehren. */
@media (max-width: 768px) {
  .fgsc-toolbar button { line-height: 1.2 !important; }
}

/* ================================================================
   TEILS FREIE TAGE WERDEN ANTEILIG GEFUELLT, 19.08.2026

   Entscheidung des Betreibers nach einem Variantenvergleich.

   Anlass: Am 19., 20. und 21. August stand dieselbe blasse gelbe
   Flaeche mit dem Wort "teils". Gemessen an der Oeffnungszeit von 9
   bis 22 Uhr waren diese Tage aber zu 77, 69 und 92 Prozent frei. Am
   21. war das Studio elf Stunden am Stueck frei und sah trotzdem aus
   wie ein Tag, an dem es eng wird. Gelb las sich als Warnung und hat
   die Tage unter Wert verkauft.

   Jetzt reicht das Gruen so weit, wie die freie Zeit des Tages
   reicht. Ein zu 92 Prozent freier Tag ist zu 92 Prozent gruen. Damit
   sagt die Flaeche die Wahrheit, und die drei Tage unterscheiden sich
   endlich voneinander.

   Rahmen und Beschriftung bleiben gelb und die Zelle traegt weiterhin
   Zeichen und Wort. Der Zustand bleibt damit eindeutig teils frei und
   nicht ganz frei, und die Farbe ist nicht das einzige Signal.
   ================================================================ */

.fc .day-partial .fc-daygrid-day-frame {
  /* Der Anteil kommt von belegungsplan.js. Der Rueckfallwert von 50
     Prozent greift nur, falls die Schnittstelle ihn einmal nicht
     mitliefert. Die Zelle sieht dann aus wie frueher gedacht, statt
     ganz ohne Fuellung dazustehen. */
  --bp-frei-anteil: 50%;

  /* Die Kante wird knapp vor dem rechten Rand gedeckelt. Bei 92
     Prozent blieben auf dem Telefon sonst rund vier Bildpunkte Gelb
     uebrig, bei einem noch hoeheren Anteil gar nichts mehr, und ein
     teils freier Tag saehe aus wie ein ganz freier. Fuenf Bildpunkte
     bleiben immer stehen. */
  --bp-frei-kante: min(var(--bp-frei-anteil), calc(100% - 5px));

  background:
    linear-gradient(90deg,
      var(--bp-frei-flaeche)  0 var(--bp-frei-kante),
      var(--bp-teils-flaeche) var(--bp-frei-kante) 100%);
  border-color: var(--bp-teils);
}

/* Die Legende zeigt dasselbe Bild wie die Zelle: links gruen, rechts
   gelb, gelber Rand. Ohne diese Angleichung stuende in der Legende
   ein ganz gelbes Feld, das es im Kalender nicht mehr gibt. */
.fgsc-le-teils {
  background: linear-gradient(90deg,
    var(--bp-frei-flaeche)  0 62%,
    var(--bp-teils-flaeche) 62% 100%);
}

/* ================================================================
   BESCHRIFTUNG DER TAGESZELLEN AUF ENGLISCH, 19.08.2026

   Die Woerter in den Zellen stehen im CSS, weil sie an einem
   Pseudoelement haengen. Auf den englischen Fassungen standen dadurch
   deutsche Woerter mitten in einer englischen Seite: "teils" und
   "belegt". Aufgefallen beim Anlegen der englischen Kalenderseite der
   Unternehmensseite, betraf aber alle drei Domains.

   belegungsplan.js vermerkt die Sprache am Kalender. Die Woerter sind
   dieselben wie in der Legende darueber: free, partly free, booked.
   In der Zelle steht die kurze Form, genau wie im Deutschen "teils"
   neben "teils frei" in der Legende steht.
   ================================================================ */
#fgsc-calendar[data-tls-sprache="en"] .day-fit .fc-daygrid-day-frame::after     { content: "✓ free"; }
#fgsc-calendar[data-tls-sprache="en"] .day-partial .fc-daygrid-day-frame::after { content: "◑ partly"; }
#fgsc-calendar[data-tls-sprache="en"] .day-full .fc-daygrid-day-frame::after    { content: "✕ booked"; }

/* Die englischen Woerter brauchen mehr Platz als die deutschen, obwohl
   sie gleich viele Zeichen haben. Bei 375 Bildpunkten gemessen:
   "belegt" 34 Bildpunkte, "booked" 42, bei einer Spalte von 37. Bei
   430 Bildpunkten sind es 49 in 44. Das Wort wurde also angeschnitten.

   Deshalb faellt es im Englischen frueher weg: erst ab 481 Bildpunkten
   steht das Wort in der Zelle, darunter nur das Zeichen. Im Deutschen
   bleibt es wie bisher bis 361 Bildpunkte stehen. Die Legende steht
   unmittelbar ueber dem Kalender und erklaert die Zeichen in beiden
   Faellen. */
@media (max-width: 480px) {
  #fgsc-calendar[data-tls-sprache="en"] .day-fit .fc-daygrid-day-frame::after     { content: "✓"; }
  #fgsc-calendar[data-tls-sprache="en"] .day-partial .fc-daygrid-day-frame::after { content: "◑"; }
  #fgsc-calendar[data-tls-sprache="en"] .day-full .fc-daygrid-day-frame::after    { content: "✕"; }
  #fgsc-calendar[data-tls-sprache="en"] .day-fit .fc-daygrid-day-frame::after,
  #fgsc-calendar[data-tls-sprache="en"] .day-partial .fc-daygrid-day-frame::after,
  #fgsc-calendar[data-tls-sprache="en"] .day-full .fc-daygrid-day-frame::after { font-size: 12px; }
}