/*
 * Time Calendar – Frontend Styles
 * ─────────────────────────────────────────────────────────────────
 * Alle Farben über var(--tc-*) aus design-system.css.
 * Dark Mode wird automatisch über .tc-dark aktiviert.
 * ─────────────────────────────────────────────────────────────────
 */

/* ─── Wrapper ────────────────────────────────────────────────────── */
.tc-frontend-wrap {
  position: static;
  font-family: var(--tc-font-family);
  color: var(--tc-text);
}

/* ─── Filter-Leiste ───────────────────────────────────────────── */
.tc-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.tc-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 2px solid var(--tc-border);
  border-radius: 999px;
  background: var(--tc-bg);
  color: var(--tc-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--tc-transition), background var(--tc-transition), color var(--tc-transition);
  font-family: inherit;
}

.tc-filter-btn:hover {
  border-color: var(--tc-primary);
  color: var(--tc-primary);
}

.tc-filter-btn.is-active {
  background: var(--tc-primary);
  border-color: var(--tc-primary);
  color: #fff;
}

.tc-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tc-filter-btn.is-active .tc-dot {
  background: #fff !important;
}

/* ─── Kalender Container ──────────────────────────────────────── */
.tc-frontend-calendar {
  background: var(--tc-bg);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  padding: 20px;
  color: var(--tc-text);
}

/* ─── FullCalendar Overrides ──────────────────────────────────── */

/* Toolbar */
.tc-frontend-wrap .fc {
  color: var(--tc-text);
}

.tc-frontend-wrap .fc .fc-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.tc-frontend-wrap .fc .fc-toolbar-chunk:first-child {
  justify-self: start;
  display: flex;
  gap: 4px;
}

.tc-frontend-wrap .fc .fc-toolbar-chunk:nth-child(2) {
  justify-self: center;
}

.tc-frontend-wrap .fc .fc-toolbar-chunk:last-child {
  justify-self: end;
  display: flex;
  gap: 4px;
}

.tc-frontend-wrap .fc .fc-toolbar-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tc-text);
  white-space: nowrap;
}

/* Buttons */
.tc-frontend-wrap .fc .fc-button {
  font-family: inherit;
}

.tc-frontend-wrap .fc .fc-button-primary {
  background-color: var(--tc-primary) !important;
  border-color: var(--tc-primary) !important;
  color: #fff !important;
  font-size: 13px;
  box-shadow: none !important;
}

.tc-frontend-wrap .fc .fc-button-primary:hover {
  background-color: var(--tc-primary-dark) !important;
  border-color: var(--tc-primary-dark) !important;
}

.tc-frontend-wrap .fc .fc-button-primary:not(:disabled).fc-button-active,
.tc-frontend-wrap .fc .fc-button-primary:not(:disabled):active {
  background-color: var(--tc-primary-dark) !important;
  border-color: var(--tc-primary-dark) !important;
}

.tc-frontend-wrap .fc .fc-button-primary:disabled {
  background-color: var(--tc-primary) !important;
  border-color: var(--tc-primary) !important;
  opacity: .6;
}

/* Tabelle / Grid */
.tc-frontend-wrap .fc .fc-scrollgrid,
.tc-frontend-wrap .fc .fc-scrollgrid-section > td,
.tc-frontend-wrap .fc td,
.tc-frontend-wrap .fc th {
  border-color: var(--tc-border) !important;
}

.tc-frontend-wrap .fc .fc-col-header-cell {
  background: var(--tc-surface);
  color: var(--tc-text-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 0;
}

.tc-frontend-wrap .fc .fc-col-header-cell-cushion {
  color: var(--tc-text-muted) !important;
  text-decoration: none;
}

.tc-frontend-wrap .fc .fc-daygrid-day {
  background: var(--tc-bg);
}

.tc-frontend-wrap .fc .fc-daygrid-day-number {
  color: var(--tc-text) !important;
  text-decoration: none;
  font-size: 13px;
  padding: 6px 8px;
}

/* Heutiger Tag */
.tc-frontend-wrap .fc .fc-day-today {
  background: var(--tc-primary-light) !important;
}

.tc-frontend-wrap .fc .fc-day-today .fc-daygrid-day-number {
  font-weight: 700;
  color: var(--tc-primary) !important;
}

/* Andere Monate leicht ausgrauen */
.tc-frontend-wrap .fc .fc-day-other .fc-daygrid-day-number {
  color: var(--tc-text-subtle) !important;
  opacity: .6;
}

/* Events */
.tc-frontend-wrap .fc-event {
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 500;
  border: none !important;
}

.tc-frontend-wrap .fc-event * {
  color: var(--tc-text) !important;
}

/* Listenansicht */
.tc-frontend-wrap .fc-list {
  border-color: var(--tc-border) !important;
  border-radius: 8px;
  overflow: hidden;
}

.tc-frontend-wrap .fc-list-day-cushion {
  background: var(--tc-surface) !important;
  color: var(--tc-text) !important;
  font-weight: 600;
}

.tc-frontend-wrap .fc-list-day-text,
.tc-frontend-wrap .fc-list-day-side-text {
  color: var(--tc-text) !important;
  text-decoration: none;
}

.tc-frontend-wrap .fc-list-event {
  background: var(--tc-bg) !important;
}

.tc-frontend-wrap .fc-list-event:hover td {
  background: var(--tc-surface) !important;
}

.tc-frontend-wrap .fc-list-event-title a,
.tc-frontend-wrap .fc-list-event-time {
  color: var(--tc-text) !important;
  text-decoration: none;
}

.tc-frontend-wrap .fc-list-empty {
  background: var(--tc-bg) !important;
  color: var(--tc-text-muted) !important;
}

.tc-frontend-wrap .fc .fc-list-event td {
  border-color: var(--tc-border) !important;
  padding: 8px 14px;
}

/* Wochenansicht Zeitachse */
.tc-frontend-wrap .fc .fc-timegrid-slot-label-cushion,
.tc-frontend-wrap .fc .fc-timegrid-axis-cushion {
  color: var(--tc-text-muted) !important;
  font-size: 11px;
}

.tc-frontend-wrap .fc .fc-timegrid-slot {
  border-color: var(--tc-border) !important;
}

/* ─── Ladeanimation ───────────────────────────────────────────── */
.tc-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--tc-text-muted);
  font-size: 14px;
}

.tc-loader-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--tc-border);
  border-top-color: var(--tc-primary);
  border-radius: 50%;
  animation: tc-spin .7s linear infinite;
  flex-shrink: 0;
}

@keyframes tc-spin {
  to { transform: rotate(360deg); }
}

/* ─── Event-Detail-Popover ────────────────────────────────────── */
.tc-popover {
  position: absolute;
  z-index: 9999;
  background: var(--tc-bg);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  box-shadow: var(--tc-shadow-lg);
  width: 280px;
  padding: 18px 18px 20px;
  color: var(--tc-text);
}

.tc-popover-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--tc-text-muted);
  padding: 0;
}

.tc-popover-close:hover { color: var(--tc-text); }

.tc-popover-type {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.tc-popover-type--training {
  background: var(--tc-primary-light);
  color: var(--tc-primary);
}

.tc-popover-type--seminar {
  background: var(--tc-success-bg);
  color: var(--tc-success);
}

.tc-popover-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--tc-text);
  margin: 0 0 12px;
  padding-right: 16px;
  line-height: 1.3;
}

.tc-popover-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tc-popover-meta li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 13px;
  color: var(--tc-text);
  line-height: 1.4;
}

.tc-popover-meta li span {
  flex-shrink: 0;
  width: 18px;
}

.tc-popover-cta {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tc-popover-cta-text {
  font-size: 13px;
  color: var(--tc-text-muted);
  line-height: 1.5;
  margin: 0;
  font-style: italic;
}

.tc-popover-link {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 16px;
  background: var(--tc-primary);
  color: #fff !important;
  border-radius: var(--tc-radius-sm);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--tc-transition);
}

.tc-popover-link:hover {
  background: var(--tc-primary-dark);
  color: #fff !important;
}

/* ─── Popover-Backdrop ────────────────────────────────────────── */
.tc-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
}

/* ─── View-Toggle (Kalender / Week Plan) ─────────────────────── */
.tc-view-toggle {
  display: flex;
  margin-bottom: 16px;
  border: 1px solid var(--tc-border);
  border-radius: 8px;
  overflow: hidden;
  width: fit-content;
}

.tc-view-btn {
  padding: 7px 18px;
  background: var(--tc-bg);
  border: none;
  color: var(--tc-text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--tc-transition), color var(--tc-transition);
}

.tc-view-btn + .tc-view-btn {
  border-left: 1px solid var(--tc-border);
}

.tc-view-btn:hover {
  background: var(--tc-surface);
  color: var(--tc-text);
}

.tc-view-btn.is-active {
  background: var(--tc-primary);
  color: #fff;
}

/* ─── Week Plan Container ────────────────────────────────────── */
.tc-week-plan {
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  background: var(--tc-bg);
  overflow: hidden;
}

/* ─── Navigation ──────────────────────────────────────────────── */
.tc-week-plan-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tc-border);
  background: var(--tc-surface);
  gap: 12px;
}

.tc-week-plan-prev {
  justify-self: start;
}

.tc-week-plan-next {
  justify-self: end;
}

.tc-week-plan-prev,
.tc-week-plan-next {
  background: var(--tc-bg);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-sm);
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--tc-text);
  font-family: inherit;
  white-space: nowrap;
  transition: background var(--tc-transition), border-color var(--tc-transition), color var(--tc-transition);
}

.tc-week-plan-prev:hover,
.tc-week-plan-next:hover {
  background: var(--tc-primary);
  border-color: var(--tc-primary);
  color: #fff;
}

.tc-week-plan-label {
  justify-self: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--tc-text);
  text-align: center;
  white-space: nowrap;
}

/* ─── Tabelle ─────────────────────────────────────────────────── */
.tc-week-plan-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.tc-week-plan-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
  min-width: 600px;
}

.tc-week-plan-table th,
.tc-week-plan-table td {
  border: 1px solid var(--tc-border);
  padding: 0;
  vertical-align: top;
}

/* Kopfzeile */
.tc-week-plan-table thead th {
  background: var(--tc-surface);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tc-text-muted);
  padding: 7px 4px 5px;
  white-space: nowrap;
}

.tc-wp-th-time {
  width: 60px;
  min-width: 60px;
}

.tc-wp-th-date {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--tc-text-muted);
  margin-top: 2px;
}

.tc-wp-today {
  background: var(--tc-primary-light) !important;
  color: var(--tc-primary) !important;
}

.tc-wp-today .tc-wp-th-date {
  color: var(--tc-primary) !important;
}

/* Gruppen-Trennzeile (Vormittag / Nachmittag / Abend) */
.tc-wp-group-row td {
  background: var(--tc-surface);
  border-top: 2px solid var(--tc-border);
}

.tc-wp-group-row .tc-wp-group-label {
  padding: 5px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tc-text-muted);
  white-space: nowrap;
}

.tc-wp-group-row .tc-wp-group-spacer {
  padding: 0;
}

/* Zeitspalte */
.tc-wp-time {
  text-align: center;
  padding: 6px 4px;
  background: var(--tc-surface);
  vertical-align: middle !important;
  width: 60px;
  min-width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tc-wp-time-start {
  display: block;
  font-weight: 700;
  font-size: 12px;
  color: var(--tc-text);
}

.tc-wp-time-end {
  display: block;
  font-size: 11px;
  color: var(--tc-text-muted);
  margin-top: 1px;
}

/* Event-Zellen */
.tc-wp-cell {
  height: 100px;
  padding: 4px;
  vertical-align: top;
  word-break: break-word;
}

.tc-wp-cell--empty {
  background: var(--tc-bg);
}

/* Event-Button */
.tc-wp-event {
  display: block;
  width: 100%;
  height: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: box-shadow var(--tc-transition);
  margin-bottom: 3px;
}

.tc-wp-event:last-child {
  margin-bottom: 0;
}

.tc-wp-event:hover {
  box-shadow: 0 0 0 2px currentColor;
}

.tc-wp-event--past {
  opacity: 0.4 !important;
  filter: grayscale(30%) !important;
  pointer-events: none !important;
  cursor: default !important;
}

.tc-wp-event-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--tc-text);
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

.tc-wp-event-time-above {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--tc-text-muted);
  line-height: 1.2;
  margin-bottom: 3px;
  white-space: nowrap;
}

/* 'groups' Modus: schmale Zeitspalte mit vertikalem Gruppenname */
.tc-wp-time--group {
  vertical-align: middle !important;
  background: var(--tc-surface);
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  padding: 6px 0 !important;
  overflow: hidden;
}

.tc-wp-group-label-cell {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tc-text-muted);
  white-space: nowrap;
  text-align: center;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  margin: 0 auto;
}

/* 'groups' Modus: Kopfzelle (th) auf gleiche Breite wie td bringen */
.tc-frontend-wrap.tc-col-groups .tc-wp-th-time {
  width: 32px;
  min-width: 32px;
}

.tc-wp-event-sub {
  display: block;
  font-size: 11px;
  color: var(--tc-text-muted);
  margin-top: 2px;
  font-style: italic;
}

/* Leere Woche */
.tc-wp-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--tc-text-muted);
  font-size: 14px;
}

/* ─── Week-Only Label ─────────────────────────────────────────── */
.tc-week-label {
  display: block;
  text-align: center;
  margin: 0 auto 10px;
  padding: 4px 14px;
  width: fit-content;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tc-primary);
  background: var(--tc-primary-light);
}

/* ─── Week Plan Mobile Layout ────────────────────────────────── */
.tc-week-plan-mobile {
  display: none;
}

.tc-wp-mobile-day {
  border-bottom: 1px solid var(--tc-border);
}

.tc-wp-mobile-day:last-child {
  border-bottom: none;
}

.tc-wp-mobile-day-header {
  padding: 10px 16px 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tc-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--tc-surface);
  border-bottom: 1px solid var(--tc-border);
}

.tc-wp-mobile-day--today .tc-wp-mobile-day-header {
  color: var(--tc-primary);
  background: var(--tc-primary-light);
}

.tc-wp-mobile-events {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tc-wp-mobile-time {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--tc-text-muted);
  margin-bottom: 2px;
}

/* ─── Desktop-Forced Mobile View ─────────────────────────────── */
/*
 * Strategie: JS setzt zoom so, dass der Kalender auf die verfügbare
 * Breite passt. min-width stellt sicher, dass FullCalendar alle 7
 * Spalten in voller Breite rendert, bevor zoom alles proportional
 * verkleinert. overflow-x:auto greift nur als Fallback wenn kein zoom.
 *
 * Die Font-Size-Overrides weiter unten heben die mobilen Reduzierungen
 * aus dem @media-Block auf (höhere Spezifität: 4 Klassen vs. 3),
 * damit Text seine Zellen korrekt füllt und zoom alles gleichmäßig
 * skaliert – nicht doppelt verkleinert.
 */

.tc-frontend-wrap.tc-desktop-forced .tc-frontend-calendar {
  min-width: 600px;
}

.tc-frontend-wrap.tc-desktop-forced .tc-week-plan {
  overflow-x: auto; /* Fallback wenn zoom nicht greift */
}

/* Week-Plan: immer Desktop-Tabelle, nie mobile Card-Ansicht */
.tc-frontend-wrap.tc-desktop-forced .tc-week-plan-table-wrap {
  display: block;
}

.tc-frontend-wrap.tc-desktop-forced .tc-week-plan-mobile {
  display: none;
}

/* Week-Plan-Navigation: Desktop-Layout beibehalten */
.tc-frontend-wrap.tc-desktop-forced .tc-week-plan-nav {
  flex-wrap: nowrap;
  justify-content: space-between;
}

.tc-frontend-wrap.tc-desktop-forced .tc-week-plan-label {
  order: 0;
  width: auto;
}

.tc-frontend-wrap.tc-desktop-forced .tc-week-plan-prev,
.tc-frontend-wrap.tc-desktop-forced .tc-week-plan-next {
  flex: none;
}

/* Desktop-Schriftgrößen wiederherstellen (überschreiben @media-Reduktion) */
.tc-frontend-wrap.tc-desktop-forced .fc .fc-toolbar-title {
  font-size: 1.15em;
}

.tc-frontend-wrap.tc-desktop-forced .fc .fc-button {
  font-size: 13px;
  padding: 6px 10px;
}

.tc-frontend-wrap.tc-desktop-forced .fc .fc-col-header-cell {
  font-size: 12px;
  padding: 8px 0;
}

.tc-frontend-wrap.tc-desktop-forced .fc .fc-daygrid-day-number {
  font-size: 13px;
  padding: 6px 8px;
}

.tc-frontend-wrap.tc-desktop-forced .fc-event {
  font-size: 12px;
  padding: 2px 6px;
}

.tc-frontend-wrap.tc-desktop-forced .fc .fc-list-event td {
  padding: 8px 14px;
}

.tc-frontend-wrap.tc-desktop-forced .fc-list-event-title a {
  font-size: inherit;
}

.tc-frontend-wrap.tc-desktop-forced .fc .fc-timegrid-slot-label-cushion,
.tc-frontend-wrap.tc-desktop-forced .fc .fc-timegrid-axis-cushion {
  font-size: 11px;
}

/* ─── Einstellung 1: Zeitspalte — Tagesgruppen (tc-col-groups) ── */

.tc-frontend-wrap.tc-col-groups .fc .fc-timegrid-axis,
.tc-frontend-wrap.tc-col-groups .fc .fc-timegrid-slot-label {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
}

.tc-frontend-wrap.tc-col-groups .fc .fc-timegrid-slot-label-cushion {
  font-size: 9px !important;
  color: var(--tc-text-muted, #6b7280) !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
  padding: 4px 0 !important;
  letter-spacing: 0.03em;
}

/* ─── Einstellung 1: Zeitspalte — Beides (tc-col-both) ──────── */

.tc-frontend-wrap.tc-col-both .fc .fc-timegrid-axis,
.tc-frontend-wrap.tc-col-both .fc .fc-timegrid-slot-label {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
}

.tc-frontend-wrap.tc-col-both .fc .fc-timegrid-slot-label-cushion {
  padding: 2px 4px !important;
  line-height: 1.2 !important;
}

/* ─── Einstellung 2: Kein Zeitstempel (tc-event-none) ────────── */

.tc-frontend-wrap.tc-event-none .fc .fc-event-time {
  display: none !important;
}

/* ─── Einstellung 2: Zeitstempel Normal (tc-event-normal) ────── */

.tc-frontend-wrap.tc-event-normal .fc .fc-event-time {
  display: block !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  opacity: 0.85 !important;
  margin-bottom: 2px !important;
}

/* ─── Einstellung 2: Zeitstempel Prominent (tc-event-prominent) ─ */

.tc-frontend-wrap.tc-event-prominent .fc .fc-event-time {
  display: block !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  margin-bottom: 3px !important;
  letter-spacing: .01em !important;
}

/* ─── Week-Plan: Einstellung 2 – Zeitstempel im Event ────────── */

.tc-frontend-wrap.tc-event-none .tc-wp-event-time-above {
  display: none !important;
}

.tc-frontend-wrap.tc-event-normal .tc-wp-event-time-above {
  font-size: 10px !important;
  font-weight: 500 !important;
  opacity: .85 !important;
}

.tc-frontend-wrap.tc-event-prominent .tc-wp-event-time-above {
  font-size: 13px !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  margin-bottom: 4px !important;
}

/* ─── Week-Plan: 'both' Modus – Gruppen-Header-Zeile ─────────── */

.tc-wp-group-header-row td {
  background: var(--tc-surface);
  border-top: 2px solid var(--tc-border);
  padding: 6px;
}

.tc-wp-group-header {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tc-text-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ─── Einstellung 3: Mobile Scaled (tc-mobile-scaled) ────────── */

.tc-frontend-wrap.tc-mobile-scaled {
  overflow-x: hidden !important;
  overflow-y: visible;
}

.tc-frontend-wrap.tc-mobile-scaled .tc-frontend-calendar {
  transform-origin: top left;
}

/* ─── Hinweis-Box (Mobile Slider, nur Mobile) ───────────────── */
.tc-hint-box {
  display: none;
}

@media (max-width: 768px) {
  .tc-hint-box {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    margin-bottom: 10px;
    background: var(--tc-primary-light, rgba(79, 70, 229, 0.12));
    border-radius: var(--tc-radius-sm, 4px);
    font-size: 12px;
    color: var(--tc-primary, #4f46e5);
    font-weight: 500;
  }

  .tc-hint-swipe,
  .tc-hint-rotate {
    display: flex;
    align-items: center;
    gap: 6px;
  }
}

/* ─── Mobile Slider (horizontaler Tages-Scroll) ─────────────── */
@media (max-width: 768px) {

  /* Scroll-Container: der View-Harness */
  .tc-frontend-wrap.tc-mobile-slider .fc-view-harness {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--tc-border, #e5e7eb) transparent;
  }

  .tc-frontend-wrap.tc-mobile-slider .fc-view-harness::-webkit-scrollbar {
    height: 4px;
  }

  .tc-frontend-wrap.tc-mobile-slider .fc-view-harness::-webkit-scrollbar-thumb {
    background: var(--tc-border, #e5e7eb);
    border-radius: 2px;
  }

  /* Scrollgrid: volle 7-Tage-Breite erzwingen */
  .tc-frontend-wrap.tc-mobile-slider .fc-scrollgrid {
    min-width: calc(60px + 7 * 140px);
  }

  /* Tages-Spalten: feste Mindestbreite pro Tag */
  .tc-frontend-wrap.tc-mobile-slider .fc-col-header-cell {
    min-width: 140px;
  }

  .tc-frontend-wrap.tc-mobile-slider .fc-timegrid-col {
    min-width: 140px;
  }

  /* Innere Tabellen: mindestens 7 × 140px */
  .tc-frontend-wrap.tc-mobile-slider .fc-scrollgrid-sync-table,
  .tc-frontend-wrap.tc-mobile-slider .fc-col-header {
    min-width: calc(7 * 140px);
  }

  /* Zeitspalte links: sticky + sichtbar im Slider */
  .tc-frontend-wrap.tc-mobile-slider .fc .fc-timegrid-axis,
  .tc-frontend-wrap.tc-mobile-slider .fc .fc-timegrid-slot-label {
    position: sticky !important;
    left: 0 !important;
    z-index: 3 !important;
    background: var(--tc-bg, #fff) !important;
    min-width: 52px !important;
    width: 52px !important;
  }

  .tc-frontend-wrap.tc-mobile-slider .fc .fc-timegrid-slot-label-cushion {
    font-size: 10px !important;
    color: var(--tc-text-muted, #6b7280) !important;
    padding: 2px 4px !important;
    white-space: nowrap !important;
  }

  .tc-frontend-wrap.tc-mobile-slider .fc .fc-scrollgrid thead > tr > th:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 4 !important;
    background: var(--tc-surface, #f9fafb) !important;
    min-width: 52px !important;
  }

  .tc-frontend-wrap.tc-mobile-slider .fc .fc-scrollgrid tbody > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--tc-bg, #fff);
  }

  /* Tages-Header: nicht abschneiden */
  .tc-frontend-wrap.tc-mobile-slider .fc .fc-col-header {
    overflow-x: visible;
  }

  /* Toolbar: vereinfacht, nicht mitscrollen */
  .tc-frontend-wrap.tc-mobile-slider .fc .fc-toolbar {
    flex-wrap: wrap;
    gap: 6px;
  }

  .tc-frontend-wrap.tc-mobile-slider .fc .fc-toolbar-title {
    font-size: 1em;
  }

  /* Events in der TimeGrid-Ansicht */
  .tc-frontend-wrap.tc-mobile-slider .fc-timegrid-event {
    font-size: 11px;
    border-radius: 4px;
  }

  /* ── Week-Plan-Tabelle: Mobile Slider ─────────────────────── */

  /* Tabelle statt Karten-Ansicht zeigen */
  .tc-frontend-wrap.tc-mobile-slider .tc-week-plan-table-wrap {
    display: block !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--tc-border, #e5e7eb) transparent;
  }

  .tc-frontend-wrap.tc-mobile-slider .tc-week-plan-table-wrap::-webkit-scrollbar {
    height: 4px;
  }

  .tc-frontend-wrap.tc-mobile-slider .tc-week-plan-table-wrap::-webkit-scrollbar-thumb {
    background: var(--tc-border, #e5e7eb);
    border-radius: 2px;
  }

  .tc-frontend-wrap.tc-mobile-slider .tc-week-plan-mobile {
    display: none !important;
  }

  /* Tabelle breiter als Viewport */
  .tc-frontend-wrap.tc-mobile-slider .tc-week-plan-table {
    min-width: calc(60px + 7 * 120px);
  }

  /* Tages-Spalten: feste Mindestbreite */
  .tc-frontend-wrap.tc-mobile-slider .tc-week-plan-table th:not(:first-child),
  .tc-frontend-wrap.tc-mobile-slider .tc-week-plan-table td:not(:first-child):not(.tc-wp-group-spacer) {
    min-width: 120px;
  }

  /* Erste Spalte (Zeit / Gruppen): sticky links */
  .tc-frontend-wrap.tc-mobile-slider .tc-week-plan-table th:first-child,
  .tc-frontend-wrap.tc-mobile-slider .tc-week-plan-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--tc-surface, #f9fafb);
  }

  /* Gruppen-Label in der sticky Spalte */
  .tc-frontend-wrap.tc-mobile-slider .tc-wp-group-row .tc-wp-group-label {
    z-index: 3;
    background: var(--tc-surface, #f9fafb);
  }

  /* Navigation: vereinfacht, kein Wrapping */
  .tc-frontend-wrap.tc-mobile-slider .tc-week-plan-nav {
    flex-wrap: nowrap;
    justify-content: center;
  }
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .tc-frontend-calendar {
    padding: 10px 6px;
  }

  .tc-frontend-wrap .fc .fc-toolbar {
    grid-template-columns: auto 1fr auto;
    gap: 6px;
    margin-bottom: 12px;
  }

  .tc-frontend-wrap .fc .fc-toolbar-chunk:first-child,
  .tc-frontend-wrap .fc .fc-toolbar-chunk:last-child {
    flex-wrap: wrap;
    gap: 4px;
  }

  .tc-frontend-wrap .fc .fc-toolbar-title {
    font-size: 0.9rem;
    text-align: center;
  }

  .tc-frontend-wrap .fc .fc-button {
    padding: 5px 10px;
    font-size: 12px;
  }

  .tc-frontend-wrap .fc .fc-list-event td {
    padding: 10px;
  }

  .tc-frontend-wrap .fc-list-event-title a {
    font-size: 14px;
  }

  .tc-frontend-wrap .fc .fc-daygrid-day-number {
    font-size: 11px;
    padding: 4px 5px;
  }

  .tc-frontend-wrap .fc .fc-col-header-cell {
    font-size: 10px;
    padding: 5px 0;
  }

  .tc-frontend-wrap .fc-event {
    font-size: 10px;
    padding: 1px 4px;
  }

  .tc-popover {
    position: fixed !important;
    width: calc(100vw - 32px) !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%);
    max-height: 80vh;
    overflow-y: auto;
    z-index: 10000;
  }

  .tc-week-plan-table-wrap {
    display: none;
  }

  .tc-week-plan-mobile {
    display: block;
  }

  .tc-week-plan-nav {
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    padding: 10px 12px;
  }

  .tc-week-plan-prev,
  .tc-week-plan-next {
    font-size: 12px;
    padding: 5px 10px;
  }
}