/*
Theme Name: Café Schloss Diedersdorf – Café & Pizza
Theme URI: https://cafe-schloss-diedersdorf.de
Author: Fidel Ammar
Description: Schlankes WordPress Block Theme für das Café Schloss Diedersdorf. Fokus auf Café (Frühstück, hausgemachte Torten) und Steinofen-Pizza. Mit interaktiver Tischreservierung über klickbaren SVG-Grundriss sowie Events-Verwaltung im Dashboard. Burgund/Creme/Gold-Farbschema, Playfair Display + Lato, mobil optimiert.
Version: 1.28.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: cafe-pizza-csd
Tags: block-theme, full-site-editing, restaurant, food-and-drink, german, one-column, two-columns
*/

/* ============================================================
   FARB-VARIABLEN
   ============================================================ */
:root {
  --c-primary:        #6b1f2c;
  --c-primary-hover:  #561621;
  --c-accent:         #c9a961;
  --c-accent-hover:   #b08f48;
  /* Gold als TEXTFARBE auf hellem Grund: #c9a961 erreicht nur 2,17:1
     Kontrast und ist damit für viele Menschen schlecht lesbar.
     Dieser dunklere Ton kommt auf 5,56:1 auf Creme und 5,4:1 auf Weiß
     und erfüllt damit WCAG AA. Für Flächen, Rahmen und Gold auf
     Burgund bleibt --c-accent unverändert. */
  --c-accent-text:    #7d6220;
  --c-accent-light:   #f5ecd6;
  --c-bg:             #fffaf3;
  --c-bg-alt:         #faf5ec;
  --c-muted:          #f3ead9;
  --c-text:           #2a1a15;
  --c-text-muted:     #7a665b;
  --c-border:         #e8dcc4;
  --c-white:          #ffffff;
  --c-dark:           #1c0f0d;
  --c-success:        #6b8e23;
  --c-error:          #b03030;

  --c-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --c-font-body:    "Lato", system-ui, -apple-system, sans-serif;

  --c-radius:       12px;
  --c-radius-sm:    8px;
  --c-shadow:       0 4px 16px rgba(28, 15, 13, .08);
  --c-shadow-hover: 0 8px 28px rgba(28, 15, 13, .14);
}

/* ============================================================
   BASIS
   ============================================================ */
body {
  font-family: var(--c-font-body);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--c-font-heading);
  color: var(--c-primary);
}

a { color: var(--c-accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-primary); }

/* Auf dunklem Grund bleibt das helle Gold – dort stimmt der Kontrast. */
.csd-footer a,
.has-dark-background-color a,
.has-primary-background-color a { color: var(--c-accent); }
.csd-footer a:hover,
.has-dark-background-color a:hover,
.has-primary-background-color a:hover { color: var(--c-accent-light); }

.wp-block-button__link {
  border-radius: var(--c-radius);
  font-family: var(--c-font-heading);
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: var(--c-shadow-hover);
}

/* ============================================================
   UTILITY-KLASSEN
   ============================================================ */
.csd-kicker {
  display: inline-block;
  font-family: var(--c-font-heading);
  font-style: italic;
  color: var(--c-accent-text);
  letter-spacing: .04em;
  margin-bottom: .5rem;
}

.csd-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  padding: 1.5rem;
  box-shadow: var(--c-shadow);
}

.csd-menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: .85rem 0;
  border-bottom: 1px dashed var(--c-border);
}
.csd-menu-item:last-child { border-bottom: 0; }
.csd-menu-item__name { font-weight: 700; }
.csd-menu-item__desc { color: var(--c-text-muted); font-size: .95rem; display: block; margin-top: .15rem; }
.csd-menu-item__price {
  font-family: var(--c-font-heading);
  font-weight: 700;
  color: var(--c-primary);
  white-space: nowrap;
}

/* ── Kennzeichnung vegan / vegetarisch ── */
.csd-diet {
  display: inline-block;
  vertical-align: middle;
  margin-left: .4rem;
  padding: .05rem .5rem;
  border-radius: 999px;
  border: 1px solid;
  font-family: var(--c-font-body);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .01em;
  white-space: nowrap;
}
.csd-diet--vegan { background: #eaf3da; color: #356a16; border-color: #9bc167; }
.csd-diet--veg   { background: #f3f7e8; color: #5a7d1f; border-color: #c8dca2; }
.csd-diet--meat  { background: #f4e2dc; color: #8a3a24; border-color: #d9ab9b; }
.csd-diet--fish  { background: #dde9f3; color: #2f5d83; border-color: #a9c7e1; }

/* ============================================================
   GRUNDRISS / TISCH-AUSWAHL  (1:1 nach realem Café-Foto)
   ============================================================ */
.csd-floorplan-wrap {
  background: #1f120c;
  border: 3px solid #2a1610;
  border-radius: var(--c-radius);
  padding: 1rem;
  box-shadow:
    var(--c-shadow),
    inset 0 0 0 1px rgba(201,169,97,.18);
  position: relative;
}
.csd-floorplan-wrap::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(201,169,97,.25);
  border-radius: calc(var(--c-radius) - 4px);
  pointer-events: none;
}
.csd-floorplan {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--c-radius-sm);
  overflow: visible;
}

/* ── Tische ── */
.csd-floorplan .csd-table {
  fill: url(#csd-table-wood);
  stroke: #5a3d2a;
  stroke-width: 2.2;
  cursor: pointer;
  transition: stroke-width .2s ease, filter .25s ease, transform .25s ease;
  transform-origin: center;
  transform-box: fill-box;
}
.csd-floorplan .csd-table-inner {
  fill: none;
  stroke: rgba(255,243,210,.35);
  stroke-width: 0.8;
  pointer-events: none;
}
.csd-floorplan .csd-table-group {
  transition: transform .25s ease;
  transform-origin: center;
  transform-box: fill-box;
  cursor: pointer;
}
.csd-floorplan .csd-table:hover {
  stroke: var(--c-primary);
  stroke-width: 3;
  filter: drop-shadow( 0 4px 8px rgba(28,15,13,.4) ) brightness(1.08);
}
.csd-floorplan .csd-table-group:hover {
  transform: translateY(-2px);
}

.csd-floorplan .csd-table.is-selected,
.csd-floorplan .csd-table-group.is-selected .csd-table {
  fill: var(--c-accent);
  stroke: var(--c-primary);
  stroke-width: 3;
  animation: csdTableGlow 2.4s ease-in-out infinite;
}
@keyframes csdTableGlow {
  0%, 100% { filter: drop-shadow( 0 0 8px  rgba(201,169,97,.55) ); }
  50%      { filter: drop-shadow( 0 0 18px rgba(201,169,97,.95) ); }
}
.csd-floorplan .csd-table-group.is-selected {
  transform: translateY(-3px);
}
.csd-floorplan .csd-table-group.is-selected .csd-table-inner {
  stroke: rgba(255,255,255,.55);
}

/* ── Stühle ── */
.csd-floorplan .csd-chair {
  fill: url(#csd-chair-wood);
  stroke: #4a2f1a;
  stroke-width: 1;
  pointer-events: none;
  transition: fill .25s ease;
}
.csd-floorplan .csd-table-group.is-selected .csd-chair {
  fill: var(--c-accent-light);
  stroke: var(--c-primary);
}
.csd-floorplan .csd-chair-group { pointer-events: none; }

/* ── Boden-Schatten unter Tisch ── */
.csd-floorplan .csd-table-floor-shadow {
  pointer-events: none;
  transition: opacity .25s ease;
}
.csd-floorplan .csd-table-group:hover .csd-table-floor-shadow {
  opacity: 0.32;
}

/* ── Belegungs-Status: voll ── */
.csd-floorplan .csd-table-group.is-fully-booked {
  cursor: not-allowed;
}
.csd-floorplan .csd-table-group.is-fully-booked .csd-table {
  fill: #6a5a45;
  stroke: #3c2418;
  opacity: 0.55;
  animation: none !important;
  filter: grayscale(0.5);
}
.csd-floorplan .csd-table-group.is-fully-booked .csd-chair {
  opacity: 0.4;
}
.csd-floorplan .csd-table-group.is-fully-booked:hover {
  transform: none;
}
.csd-floorplan .csd-table-group.is-fully-booked .csd-label {
  opacity: 0.55;
}

/* ── Belegungs-Status: teilweise belegt ── */
.csd-floorplan .csd-table-group.is-partially-booked .csd-table {
  stroke: #c9a961;
  stroke-width: 2.5;
  stroke-dasharray: 4 3;
}

/* ============================================================
   LEISTUNGS-GRID (Café-Seite)
   ============================================================ */
.csd-leistungen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.csd-leistung-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: var(--c-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.csd-leistung-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-primary) 100%);
  opacity: 0.6;
  transition: opacity .2s ease;
}
.csd-leistung-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--c-shadow-hover);
  border-color: var(--c-accent);
}
.csd-leistung-card:hover::before { opacity: 1; }
.csd-leistung-icon {
  display: inline-block;
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 0.75rem;
}
.csd-leistung-card h3 {
  font-family: var(--c-font-heading);
  font-size: 1.35rem;
  color: var(--c-primary);
  margin: 0 0 0.6rem 0;
  font-weight: 700;
}
.csd-leistung-card p {
  font-size: 0.96rem;
  color: var(--c-text);
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   WHATSAPP — Floating Bubble + Inline-Button
   ============================================================ */
:root {
  --csd-wa-green:        #25d366;
  --csd-wa-green-hover:  #1ebe5d;
  --csd-wa-green-dark:   #128c7e;
}

/* ── Floating Bubble unten rechts ── */
.csdm-wa-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--csd-wa-green);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(18,140,126,0.45), 0 2px 6px rgba(0,0,0,0.18);
  transition: transform .2s ease, background-color .2s ease, gap .25s ease, width .25s ease, border-radius .25s ease;
  overflow: hidden;
  white-space: nowrap;
}
.csdm-wa-fab:hover,
.csdm-wa-fab:focus-visible {
  background: var(--csd-wa-green-hover);
  color: #fff;
  transform: translateY(-2px);
  width: auto;
  padding: 0 1.1rem 0 0.95rem;
  border-radius: 32px;
  gap: 0.55rem;
}
.csdm-wa-fab:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--csd-wa-green), 0 6px 22px rgba(18,140,126,0.45);
}
.csdm-wa-fab .csdm-wa-icon { flex-shrink: 0; }
.csdm-wa-fab-bubble {
  max-width: 0;
  overflow: hidden;
  font-family: var(--c-font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: max-width .25s ease;
}
.csdm-wa-fab:hover .csdm-wa-fab-bubble,
.csdm-wa-fab:focus-visible .csdm-wa-fab-bubble {
  max-width: 260px;
}

/* dezenter Puls (FAB signalisiert sich als interaktiv) */
@media (prefers-reduced-motion: no-preference) {
  .csdm-wa-fab::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--csd-wa-green);
    z-index: -1;
    animation: csdmWaPulse 2.4s ease-out infinite;
  }
  @keyframes csdmWaPulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    80%  { transform: scale(1.5); opacity: 0;    }
    100% { transform: scale(1.5); opacity: 0;    }
  }
  .csdm-wa-fab:hover::after { animation-play-state: paused; }
}

@media (max-width: 640px) {
  .csdm-wa-fab {
    right: 0.85rem;
    bottom: 0.85rem;
    width: 56px;
    height: 56px;
  }
}

/* ── Prominenter WhatsApp-Block (über Reservierung) ── */
.csdm-wa-hero {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.4rem 1.6rem;
  background: linear-gradient(135deg, #128c7e 0%, #25d366 100%);
  border-radius: var(--c-radius);
  box-shadow: 0 8px 28px rgba(18,140,126,0.3);
  color: #fff;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.csdm-wa-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 95% 50%, rgba(255,255,255,0.1) 0%, transparent 60%);
  pointer-events: none;
}
.csdm-wa-hero-text {
  flex: 1 1 320px;
  min-width: 0;
  position: relative;
}
.csdm-wa-hero-kicker {
  display: inline-block;
  font-family: var(--c-font-heading);
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: #d8ffe5;
  margin-bottom: 0.3rem;
}
.csdm-wa-hero-title {
  font-family: var(--c-font-heading);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  color: #fff;
  margin: 0 0 0.45rem 0;
  line-height: 1.2;
}
.csdm-wa-hero-sub {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.92);
  line-height: 1.5;
}
.csdm-wa-hero .csdm-wa-btn {
  position: relative;
  background: #fff;
  color: var(--csd-wa-green-dark);
  font-size: 1.05rem;
  padding: 0.85rem 1.5rem;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.csdm-wa-hero .csdm-wa-btn:hover,
.csdm-wa-hero .csdm-wa-btn:focus-visible {
  background: var(--c-accent-light);
  color: var(--csd-wa-green-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
}
@media (max-width: 640px) {
  .csdm-wa-hero { padding: 1.1rem 1.2rem; gap: 1rem; }
}

/* ── Inline-Button ── */
.csdm-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.2rem;
  border-radius: var(--c-radius);
  font-family: var(--c-font-heading);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease, color .2s ease;
  line-height: 1.2;
}
.csdm-wa-btn--primary {
  background: var(--csd-wa-green);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37,211,102,0.35);
}
.csdm-wa-btn--primary:hover,
.csdm-wa-btn--primary:focus-visible {
  background: var(--csd-wa-green-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(18,140,126,0.4);
}
.csdm-wa-btn--outline {
  background: transparent;
  color: var(--csd-wa-green-dark);
  border: 2px solid var(--csd-wa-green);
}
.csdm-wa-btn--outline:hover,
.csdm-wa-btn--outline:focus-visible {
  background: var(--csd-wa-green);
  color: #fff;
}

/* ============================================================
   KALENDER-AUFKLAPP (Toggle-Button + Panel)
   ============================================================ */
.csd-calendar-accordion {
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  background: var(--c-bg);
  box-shadow: var(--c-shadow);
  overflow: hidden;
}
.csd-calendar-toggle {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 1.4rem;
  border: 0;
  background: linear-gradient(135deg, var(--c-primary) 0%, #4a1320 100%);
  color: #fff;
  cursor: pointer;
  text-align: left;
  font-family: var(--c-font-body);
  transition: background-color .2s ease;
}
.csd-calendar-toggle:hover {
  background: linear-gradient(135deg, #7a2535 0%, #5a1828 100%);
}
.csd-calendar-toggle-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.csd-calendar-toggle-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.csd-calendar-toggle-text strong {
  font-family: var(--c-font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.csd-calendar-toggle-sub {
  font-size: 0.85rem;
  color: var(--c-accent-light);
  opacity: 0.9;
}
.csd-calendar-toggle-chevron {
  font-size: 1.5rem;
  color: var(--c-accent);
  transition: transform .3s ease;
  flex-shrink: 0;
}
.csd-calendar-accordion[data-state="open"] .csd-calendar-toggle-chevron {
  transform: rotate(180deg);
}
.csd-calendar-toggle:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -3px;
}
.csd-calendar-panel {
  padding: 1.25rem;
  background: var(--c-bg-alt);
  animation: csdCalendarSlideIn .35s ease-out;
}
@keyframes csdCalendarSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.csd-calendar-accordion .csd-calendar {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .csd-calendar-toggle { padding: 0.9rem 1rem; gap: 0.75rem; }
  .csd-calendar-toggle-text strong { font-size: 1rem; }
  .csd-calendar-toggle-sub { font-size: 0.75rem; }
  .csd-calendar-toggle-icon { font-size: 1.3rem; }
}

/* ============================================================
   KALENDER (Monatsansicht mit Verfügbarkeits-Färbung)
   ============================================================ */
.csd-calendar {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  padding: 1.25rem;
  box-shadow: var(--c-shadow);
  margin-bottom: 1.5rem;
}
.csd-calendar-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}
.csd-calendar-title {
  flex: 1;
  margin: 0;
  font-family: var(--c-font-heading);
  font-size: 1.25rem;
  color: var(--c-primary);
  text-align: center;
  letter-spacing: 0.02em;
}
.csd-calendar-nav,
.csd-calendar-today {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  color: var(--c-primary);
  font-family: var(--c-font-heading);
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.csd-calendar-nav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
}
.csd-calendar-today {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
}
.csd-calendar-nav:hover,
.csd-calendar-today:hover {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}

.csd-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
  text-align: center;
  font-family: var(--c-font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
  text-transform: uppercase;
}

.csd-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  position: relative;
}
.csd-calendar-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-muted);
  font-style: italic;
}
.csd-calendar-grid[aria-busy="false"] .csd-calendar-loading { display: none; }

.csd-calendar-day {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding: 0.35rem 0.4rem 0.3rem;
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-sm);
  background: var(--c-bg);
  font-family: var(--c-font-body);
  color: var(--c-text);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
  text-align: left;
  overflow: hidden;
}
.csd-calendar-day:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: var(--c-shadow);
  border-color: var(--c-accent);
}
.csd-calendar-day-num {
  font-family: var(--c-font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-primary);
  line-height: 1;
}
.csd-calendar-day-dot {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: auto;
  background: var(--c-success);
  align-self: flex-start;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.8);
}
.csd-calendar-day-free {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--c-text-muted);
  margin-top: 2px;
}
.csd-calendar-day-closed {
  font-size: 0.7rem;
  color: var(--c-text-muted);
  font-style: italic;
  align-self: flex-end;
}

.csd-calendar-day.is-other-month {
  background: transparent;
  border-color: transparent;
  pointer-events: none;
}
.csd-calendar-day.is-status-past {
  background: var(--c-muted);
  color: var(--c-text-muted);
  cursor: default;
  opacity: 0.5;
}
.csd-calendar-day.is-status-past .csd-calendar-day-num { color: var(--c-text-muted); }
.csd-calendar-day.is-status-closed {
  background: repeating-linear-gradient(45deg, #f3ead9 0 6px, #ece1c5 6px 12px);
  color: var(--c-text-muted);
  cursor: not-allowed;
}
.csd-calendar-day.is-status-closed .csd-calendar-day-num { color: var(--c-text-muted); }

.csd-calendar-day.is-status-free   .csd-calendar-day-dot { background: #6b8e23; }
.csd-calendar-day.is-status-low    .csd-calendar-day-dot { background: #9bb83a; }
.csd-calendar-day.is-status-medium .csd-calendar-day-dot { background: #d4a83c; }
.csd-calendar-day.is-status-high   .csd-calendar-day-dot { background: #d97631; }
.csd-calendar-day.is-status-full   .csd-calendar-day-dot { background: #b03030; }
.csd-calendar-day.is-status-full {
  background: rgba(176,48,48,0.06);
  cursor: not-allowed;
}
.csd-calendar-day.is-status-full .csd-calendar-day-num { color: #b03030; }

.csd-calendar-day.is-today {
  border-color: var(--c-accent);
  box-shadow: inset 0 0 0 2px var(--c-accent);
}
.csd-calendar-day.is-today .csd-calendar-day-num { color: var(--c-accent); }

.csd-calendar-day.is-picked {
  background: var(--c-primary);
  border-color: var(--c-primary);
  box-shadow: 0 4px 14px rgba(107,31,44,0.35);
  transform: translateY(-2px);
}
.csd-calendar-day.is-picked .csd-calendar-day-num,
.csd-calendar-day.is-picked .csd-calendar-day-free { color: #fff; }
.csd-calendar-day.is-picked .csd-calendar-day-dot {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
}

.csd-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--c-border);
  font-size: 0.82rem;
  color: var(--c-text-muted);
}
.csd-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.csd-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.csd-legend-dot.is-free   { background: #6b8e23; }
.csd-legend-dot.is-low    { background: #9bb83a; }
.csd-legend-dot.is-medium { background: #d4a83c; }
.csd-legend-dot.is-high   { background: #d97631; }
.csd-legend-dot.is-full   { background: #b03030; }
.csd-legend-closed {
  padding: 2px 8px;
  background: repeating-linear-gradient(45deg, #f3ead9 0 6px, #ece1c5 6px 12px);
  border-radius: 4px;
  color: var(--c-text);
}

@media (max-width: 640px) {
  .csd-calendar-day { padding: 0.25rem 0.3rem; }
  .csd-calendar-day-num { font-size: 0.85rem; }
  .csd-calendar-day-free,
  .csd-calendar-day-closed { font-size: 0.6rem; }
  .csd-calendar-weekdays { font-size: 0.65rem; }
}

/* ── Availability-Badge ── */
.csd-floorplan .csd-availability-badge {
  pointer-events: none;
  font-family: var(--c-font-body);
  font-weight: 700;
}
.csd-floorplan .csd-availability-badge rect {
  filter: drop-shadow( 0 1.5px 3px rgba(0,0,0,.35) );
}
.csd-floorplan .csd-availability-badge text {
  font-size: 11px;
  fill: #fff;
  paint-order: stroke;
  stroke: rgba(0,0,0,.4);
  stroke-width: 0.5;
}
.csd-floorplan .csd-availability-badge.is-partial rect {
  fill: #c9a961;
  stroke: #6b1f2c;
  stroke-width: 1.2;
}
.csd-floorplan .csd-availability-badge.is-full rect {
  fill: #6b1f2c;
  stroke: #3a0e16;
  stroke-width: 1.2;
}

/* ── Label ── */
.csd-floorplan .csd-label {
  font-family: var(--c-font-heading);
  font-weight: 700;
  font-size: 14px;
  fill: #fff3d2;
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(20,10,5,.85);
  stroke-width: 3.5;
  letter-spacing: 0.04em;
}
.csd-floorplan .csd-table-group.is-selected .csd-label {
  fill: var(--c-accent);
  stroke: rgba(20,10,5,.95);
}

/* ── Idle-Pulse (sehr dezent, signalisiert Klickbarkeit) ── */
@media (prefers-reduced-motion: no-preference) {
  .csd-floorplan .csd-table-group:not(.is-selected) .csd-table {
    animation: csdTableBreath 4.5s ease-in-out infinite;
  }
  .csd-floorplan .csd-table-group:nth-of-type(2n) .csd-table { animation-delay: -1.5s; }
  .csd-floorplan .csd-table-group:nth-of-type(3n) .csd-table { animation-delay: -2.8s; }
  @keyframes csdTableBreath {
    0%, 100% { filter: drop-shadow( 0 2px 4px rgba(28,15,13,.25) ); }
    50%      { filter: drop-shadow( 0 3px 8px rgba(28,15,13,.4)  ) brightness(1.04); }
  }
  .csd-floorplan .csd-table-group:hover .csd-table,
  .csd-floorplan .csd-table-group.is-selected .csd-table {
    animation: csdTableGlow 2.4s ease-in-out infinite;
  }
}

.csd-floorplan-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: .75rem;
  padding: .5rem .25rem 0;
  font-size: .85rem;
  color: var(--c-text-muted);
}
.csd-floorplan-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.csd-floorplan-legend i {
  width: 14px; height: 14px;
  border: 1.5px solid var(--c-primary);
  border-radius: 3px;
  display: inline-block;
}
.csd-floorplan-legend i.is-free      { background: #d8b888; }
.csd-floorplan-legend i.is-selected  { background: var(--c-accent); }
.csd-floorplan-legend-hint {
  margin-left: auto;
  color: var(--c-text-muted);
  font-style: italic;
}

.csd-selected-table {
  margin-top: .75rem;
  padding: .85rem 1rem;
  background: var(--c-accent-light);
  border: 1.5px solid var(--c-accent);
  border-radius: var(--c-radius-sm);
  font-family: var(--c-font-heading);
  font-weight: 700;
  color: var(--c-primary);
  text-align: center;
}
.csd-selected-table.is-empty {
  background: var(--c-muted);
  border-color: var(--c-border);
  color: var(--c-text-muted);
  font-style: italic;
  font-weight: 400;
}

/* ============================================================
   RESERVIERUNGS-FORMULAR
   ============================================================ */
.csd-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.25rem;
}
.csd-form .csd-field-wide { grid-column: 1 / -1; }
.csd-form label {
  display: block;
  font-weight: 700;
  font-size: .92rem;
  margin-bottom: .3rem;
  color: var(--c-text);
}
.csd-form input,
.csd-form select,
.csd-form textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-sm);
  background: var(--c-white);
  font-family: inherit;
  font-size: 1rem;
  color: var(--c-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.csd-form input:focus,
.csd-form select:focus,
.csd-form textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, .25);
}
.csd-form textarea { min-height: 110px; resize: vertical; }

.csd-form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: .5rem;
}
.csd-btn {
  display: inline-block;
  background: var(--c-accent);
  color: var(--c-white);
  border: 0;
  padding: .85rem 1.75rem;
  border-radius: var(--c-radius);
  font-family: var(--c-font-heading);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.csd-btn:hover { background: var(--c-accent-hover); transform: translateY(-1px); box-shadow: var(--c-shadow-hover); }
.csd-btn:disabled { background: var(--c-text-muted); cursor: not-allowed; transform: none; box-shadow: none; }

.csd-form-feedback {
  grid-column: 1 / -1;
  padding: 1rem 1.15rem;
  border-radius: var(--c-radius-sm);
  font-weight: 500;
  display: none;
}
.csd-form-feedback.is-visible { display: block; }
.csd-form-feedback.is-success { background: #eef4e0; color: #3f5e10; border: 1px solid var(--c-success); }
.csd-form-feedback.is-error   { background: #fbeaea; color: #7a1f1f; border: 1px solid var(--c-error); }

.csd-field-hint {
  display: block;
  margin-top: .35rem;
  font-size: .8rem;
  color: var(--c-text-muted);
}

/* Honeypot */
.csd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 640px) {
  .csd-form { grid-template-columns: 1fr; }
}

/* ============================================================
   HERO + LAYOUT
   ============================================================ */
.csd-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: var(--c-white);
}
.csd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(28,15,13,.55), rgba(107,31,44,.5));
}
.csd-hero > * { position: relative; z-index: 1; }
.csd-hero h1 { color: var(--c-white); }

.csd-section-title {
  text-align: center;
  margin-bottom: 2.5rem;
}
.csd-section-title .csd-kicker { display: block; margin-bottom: .5rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.csd-footer {
  background: var(--c-dark);
  color: var(--c-bg-alt);
  padding: 3rem 0 1.5rem;
}
.csd-footer a { color: var(--c-accent-light); }
.csd-footer a:hover { color: var(--c-accent); }
.csd-footer h3, .csd-footer h4 { color: var(--c-white); }

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.csd-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-primary);
  color: var(--c-white);
  padding: .75rem 1rem;
  z-index: 9999;
  text-decoration: none;
}
.csd-skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* ============================================================
   EVENTS / VERANSTALTUNGEN
   ============================================================ */
.csd-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1.75rem;
}

.csd-event-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.csd-event-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--c-shadow-hover);
}

.csd-event-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.csd-event-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.csd-event-card:hover .csd-event-card__img { transform: scale(1.04); }

.csd-event-card__body {
  display: flex;
  gap: 1rem;
  padding: 1.35rem 1.5rem 1.5rem;
  flex: 1;
}

.csd-event-date {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 64px;
  border-radius: var(--c-radius-sm);
  background: var(--c-primary);
  color: var(--c-white);
  line-height: 1;
}
.csd-event-date__day  { font-family: var(--c-font-heading); font-weight: 800; font-size: 1.7rem; }
.csd-event-date__mon  { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }
.csd-event-date__year { font-size: .66rem; opacity: .75; margin-top: 2px; }

.csd-event-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.csd-event-card__title { margin: 0 0 .5rem; font-size: 1.25rem; line-height: 1.25; }
.csd-event-card__title a { color: var(--c-primary); text-decoration: none; }
.csd-event-card__title a:hover { color: var(--c-accent-hover); }

.csd-event-meta { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.csd-event-meta li { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; color: var(--c-text); }
.csd-event-meta__ico { flex: 0 0 1.1em; }

.csd-event-card__excerpt { margin: 0 0 1rem; color: var(--c-text-muted); font-size: .92rem; }

.csd-event-card__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: .6rem; }

.csd-event-btn {
  display: inline-block;
  font-family: var(--c-font-heading);
  font-weight: 700;
  font-size: .9rem;
  padding: .5rem 1rem;
  border-radius: var(--c-radius-sm);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.csd-event-btn--solid { background: var(--c-accent); color: var(--c-white); }
.csd-event-btn--solid:hover { background: var(--c-accent-hover); color: var(--c-white); transform: translateY(-1px); box-shadow: var(--c-shadow-hover); }
.csd-event-btn--ghost { background: transparent; color: var(--c-primary); border: 1px solid var(--c-border); }
.csd-event-btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent-hover); }

/* Leerer Zustand */
.csd-events-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--c-bg-alt);
  border: 1px dashed var(--c-border);
  border-radius: var(--c-radius);
  color: var(--c-text-muted);
}
.csd-events-empty__icon { font-size: 2.5rem; margin: 0 0 .5rem; }
.csd-events-empty p { margin: .25rem 0; }
.csd-events-empty strong { color: var(--c-primary); }

/* Rückblick (vergangene Events) */
.csd-events-past { margin-top: 2.75rem; border-top: 1px solid var(--c-border); padding-top: 2rem; }
.csd-events-past__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--c-font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--c-primary);
  padding: .85rem 1.1rem;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-sm);
}
.csd-events-past__summary::-webkit-details-marker { display: none; }
.csd-events-past__summary:hover { background: var(--c-muted); }
.csd-events-past__count {
  background: var(--c-primary);
  color: var(--c-white);
  font-family: var(--c-font-body);
  font-size: .8rem;
  font-weight: 700;
  padding: .1rem .6rem;
  border-radius: 999px;
}
.csd-events-past__chevron { margin-left: auto; transition: transform .2s ease; }
.csd-events-past[open] .csd-events-past__chevron { transform: rotate(180deg); }
.csd-events-grid--past { margin-top: 1.75rem; }

.csd-event-card--past { opacity: .82; }
.csd-event-card--past .csd-event-date { background: var(--c-text-muted); }

/* Einzel-Event-Seite */
.csd-event-meta--single { font-size: 1rem; gap: .5rem; margin-bottom: 1.25rem; }
.csd-event-meta--single li { font-size: 1.02rem; }
.csd-event-single-past {
  display: inline-block;
  background: var(--c-muted);
  color: var(--c-text-muted);
  font-weight: 700;
  font-size: .85rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  margin: 0 0 1rem;
}
.csd-event-single-cta { margin: 1.25rem 0; }
.csd-event-single-back { margin-top: 1.5rem; }
.csd-event-single-back a { font-weight: 700; }

@media (max-width: 600px) {
  .csd-events-grid { grid-template-columns: 1fr; }
  .csd-event-card__body { padding: 1.15rem 1.15rem 1.25rem; }
}

/* ============================================================
   BEREICHSWAHL: INNEN ODER AUSSEN
   ============================================================
   Draußen gibt es keine festen Tische, sondern ein Platzkontingent.
   Die Auswahl blendet den Grundriss und das Tischfeld entsprechend
   ein oder aus.
   ============================================================ */

.csd-area-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.7rem;
  margin-top: 0.35rem;
}

.csd-area-option {
  display: block;
  position: relative;
  padding: 0.85rem 0.95rem 0.85rem 2.6rem;
  border: 2px solid var(--c-border, #e8dcc4);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.csd-area-option:hover { border-color: #d8c49a; }

.csd-area-option input {
  position: absolute;
  top: 1.05rem;
  left: 0.95rem;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--c-primary, #6b1f2c);
}

.csd-area-option:has(input:checked) {
  border-color: var(--c-primary, #6b1f2c);
  background: #fff8f2;
  box-shadow: 0 6px 18px -12px rgba(107, 31, 44, 0.6);
}

.csd-area-option input:focus-visible {
  outline: 2px solid var(--c-accent, #c9a961);
  outline-offset: 2px;
}

.csd-area-option__title {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-primary, #6b1f2c);
  line-height: 1.25;
}

.csd-area-option__sub {
  display: block;
  font-size: 0.84rem;
  color: #7a665b;
  margin-top: 0.1rem;
}

/* Freie Plätze im Außenbereich */
.csd-outdoor-status {
  margin-top: 0.7rem;
  padding: 0.75rem 0.95rem;
  border-radius: 10px;
  border-left: 4px solid;
  font-size: 0.92rem;
  font-weight: 600;
}

.csd-outdoor-status.is-free  { background: #e6f4ea; border-color: #1f6b3a; color: #1f6b3a; }
.csd-outdoor-status.is-tight { background: #fff5d6; border-color: #c9a961; color: #8a6d00; }
.csd-outdoor-status.is-full  { background: #fbe8e8; border-color: #8c2f2f; color: #8c2f2f; }
.csd-outdoor-status:not([class*="is-"]) { background: #faf5ec; border-color: #e8dcc4; color: #7a665b; }

/* Grundriss verschwindet, wenn draußen reserviert wird */
.csd-floorplan-wrap[hidden],
#csdm-tisch-field[hidden] { display: none !important; }

/* ---------------------------------------------------------------
   Reservierung in Schritten
   Vier benannte Abschnitte statt einer langen Feldliste. Das
   fieldset trägt die Gruppen-Semantik für Screenreader, das Raster
   liegt im inneren div – legend und Grid vertragen sich nicht.
   --------------------------------------------------------------- */
.csd-step {
  grid-column: 1 / -1;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.csd-step + .csd-step { margin-top: 1.9rem; }

.csd-step__legend {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 0;
  margin-bottom: .3rem;
  font-family: var(--c-font-head);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--c-text);
}

.csd-step__nr {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  font-family: var(--c-font-body);
  font-size: .82rem;
  font-weight: 700;
}

.csd-step__hint {
  margin: 0 0 .9rem 2.4rem;
  font-size: .85rem;
  color: var(--c-text-muted);
}

.csd-step__legend + .csd-step__grid { margin-top: .9rem; }

.csd-step__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.25rem;
}

.csd-form-note {
  margin: 0;
  font-size: .85rem;
  color: var(--c-text-muted);
  line-height: 1.5;
}

.csd-form-note strong { color: var(--c-text); }

@media (max-width: 700px) {
  .csd-step__grid { grid-template-columns: 1fr; }
  .csd-step + .csd-step { margin-top: 1.5rem; }
}