/* ========================================================================
   ICS Calendar – Unified CSS für Grid & Table Layout
   Unterstützt ACF-Werte via CSS Custom Properties (--ics-*)
   ======================================================================== */

/* -------------------------------------------------------------------------
   CSS-Variablen – werden von PHP/ACF am Wrapper überschrieben
   ------------------------------------------------------------------------- */
:root {
  /* Globale Defaults (Fallbacks) */
  --ics-accent: #0066cc;
  --ics-card-accent: var(--ics-accent);
  
  /* Layout */
  --ics-radius: 0px!important;
  --ics-gap: 0rem!important;
 --ics-card-pad: 1rem;
 --ics-shadow: 0 8px 20px rgba(0,0,0,.06);
  
  /* Farben */
  --ics-text: #222;
  --ics-muted: #444;
  --ics-soft: #555;
  --ics-bg: #fff;
  
  /* Typo – Grid (werden von ACF überschrieben) */
  --ics-grid-title-size: 26px;
  --ics-grid-meta-size: 16px;
  --ics-grid-excerpt-size: 15px;
  
  /* Typo – Table (werden von ACF überschrieben) */
  --ics-table-title-size: 22px;
  --ics-table-body-size: 18px;
  --ics-table-chip-size: 13px;
  --ics-table-mobile-scale: 0.85;
}


/* =========================================================================
   GRID LAYOUT (Layout: acf-grid)
   ========================================================================= */

.ics-calendar.layout-acf-grid .ics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ics-gap);
}

/* Karte */
.ics-calendar.layout-acf-grid .ics-card-inner {
  border: 1px solid #e6e6e6;
  border-radius: var(--ics-radius);
  background: var(--ics-bg);
  box-shadow: var(--ics-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
  overflow: hidden;
}

.ics-calendar.layout-acf-grid .ics-card-inner:hover {
  transform: translateY(-3px);
*box-shadow: 0 12px 0px rgba(0,0,0,.08) !important;
}

/* Featured-Karten – dezenter farbiger Rahmen */
.ics-calendar.layout-acf-grid .ics-card-inner.is-featured {
  border-color: var(--ics-card-accent, var(--ics-accent));
  border-width: 2px;
}

/* Medienbereich (optional) */
.ics-calendar.layout-acf-grid .ics-card-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Card Body */
.ics-calendar.layout-acf-grid .ics-card-body {
  padding: var(--ics-card-pad);
}

/* Datum-Badge */
.ics-calendar.layout-acf-grid .ics-date-badge {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  background: var(--ics-card-accent, var(--ics-accent));
  color: #fff;
  border-radius: 8px;
  padding: .3rem .6rem;
  font-size: 14px;
  margin-bottom: .6rem;
}

.ics-calendar.layout-acf-grid .ics-date-badge .ics-day {
  font-weight: 700;
}

.ics-calendar.layout-acf-grid .ics-date-badge .ics-month {
  opacity: .95;
  font-weight: 500;
}

/* Titel */
.ics-calendar.layout-acf-grid .ics-card-title {
  font-size: var(--ics-grid-title-size);
  line-height: 1.25;
  font-weight: 600;
  color: var(--ics-text);
  margin: 0 0 .4rem;
}

/* Meta: Zeit & Ort */
.ics-calendar.layout-acf-grid .ics-time,
.ics-calendar.layout-acf-grid .ics-location {
  font-size: var(--ics-grid-meta-size);
  color: var(--ics-muted);
  margin: .2rem 0;
}

/* Auszug */
.ics-calendar.layout-acf-grid .ics-excerpt {
  font-size: var(--ics-grid-excerpt-size);
  color: var(--ics-soft);
  margin-top: .6rem;
  line-height: 1.5;
}

/* Aktions-Button */
.ics-calendar.layout-acf-grid .ics-actions {
  margin-top: .8rem;
}

.ics-calendar.layout-acf-grid .ics-btn {
  display: inline-block;
  background: var(--ics-card-accent, var(--ics-accent));
  color: #fff;
  text-decoration: none;
  padding: .5rem .95rem;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
  transition: opacity .2s ease;
}

.ics-calendar.layout-acf-grid .ics-btn:hover {
  opacity: .9;
}

/* Mobile – Grid */
@media (max-width: 640px) {
  .ics-calendar.layout-acf-grid .ics-card-title {
    font-size: calc(var(--ics-grid-title-size) * 0.85);
  }
  
  .ics-calendar.layout-acf-grid .ics-time,
  .ics-calendar.layout-acf-grid .ics-location {
    font-size: calc(var(--ics-grid-meta-size) * 0.9);
  }
  
  .ics-calendar.layout-acf-grid .ics-excerpt {
    font-size: calc(var(--ics-grid-excerpt-size) * 0.9);
  }
  
  .ics-calendar.layout-acf-grid .ics-card-body {
    padding: 12px 14px;
  }
}


/* =========================================================================
   TABLE LAYOUT (Layout: table)
   ========================================================================= */

/* Filterleiste */
.ics-calendar.table .ics-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  align-items: center;
  margin: 0 0 1rem;
}

.ics-calendar.table .ics-select {
  padding: .45rem .7rem;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
}

.ics-calendar.table .ics-chipbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.ics-calendar.table .ics-chip {
  padding: .4rem .75rem;
  border-radius: 999px;
  border: 1px solid #d9d9d9;
  background: #f7f7f7;
  font-size: var(--ics-table-chip-size);
  cursor: pointer;
  transition: all .15s ease;
}

.ics-calendar.table .ics-chip:hover {
  background: #efefef;
}

.ics-calendar.table .ics-chip.active {
  background: var(--ics-accent);
  color: #fff;
  border-color: var(--ics-accent);
}

/* Tabellen-Wrapper */
.ics-calendar.table .ics-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tabelle */
.ics-calendar.table table.ics-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
}

/* Tabellenkopf */
.ics-calendar.table table.ics-table thead th {
  text-align: left;
  font-weight: 400;
  font-size: 15px;
  color: var(--ics-soft);
  padding: .6rem .9rem;
  border-bottom: 2px solid #e7e7e7;
}

/* Tabellenzeilen */
.ics-calendar.table table.ics-table tbody tr {
border-radius:0px; 
    font-weight: 400;
background: var(--ics-bg);
  box-shadow: var(--ics-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}

.ics-calendar.table table.ics-table tbody tr:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* Tabellenzellen */
.ics-calendar.table table.ics-table tbody td {
  padding: 1.2rem 1rem;
  vertical-align: top;
  font-size: var(--ics-table-body-size);
  color: var(--ics-text);
  border-left: 4px solid var(--row-accent, var(--ics-accent));
}

/* Erste Spalte (Titel) */
.ics-calendar.table table.ics-table tbody td:first-child {
  border-radius: 8px 0 0 8px;
  font-size: var(--ics-table-title-size);
  font-weight: 400;
  color: var(--ics-accent);
}

/* Letzte Spalte */
.ics-calendar.table table.ics-table tbody td:last-child {
  border-radius: 0 8px 8px 0;
}

/* Datum/Zeit – kein Umbruch */
.ics-calendar.table .ics-date,
.ics-calendar.table .ics-time {
  white-space: nowrap;
}

/* Ort */
.ics-calendar.table .ics-loc {
  color: var(--ics-muted);
}


/* Mobile – Table */
@media (max-width: 640px) {
  /* Kopfzeile ausblenden */
  .ics-calendar.table table.ics-table thead {
    display: none;
  }
  
  /* Alles als Block */
  .ics-calendar.table table.ics-table,
  .ics-calendar.table table.ics-table tbody,
  .ics-calendar.table table.ics-table tr,
  .ics-calendar.table table.ics-table td {
    display: block;
    width: 100%;
  }
  
  /* Zeilen als Karten */
  .ics-calendar.table table.ics-table tbody tr {
    margin: 0 0 14px;
    border-radius: 10px;
  }
  
  /* Zellen mit Labels */
  .ics-calendar.table table.ics-table tbody td {
    padding: .7rem 1rem .7rem 7.8rem;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
    font-size: calc(var(--ics-table-body-size) * var(--ics-table-mobile-scale));
    border-left: none;
  }
  
  .ics-calendar.table table.ics-table tbody td:last-child {
    border-bottom: none;
  }
  
  /* Data-Labels (vor jeder Zelle) */
  .ics-calendar.table table.ics-table tbody td::before {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    top: .75rem;
    width: 6.2rem;
    font-size: 12px;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    white-space: normal;
  }
  
  /* Erste Zelle (Titel) – kein Label */
  .ics-calendar.table table.ics-table tbody td:first-child {
    border-radius: 10px 10px 0 0;
    font-size: calc(var(--ics-table-title-size) * var(--ics-table-mobile-scale));
    font-weight: 700;
    padding-left: 1rem;
  }
  
  .ics-calendar.table table.ics-table tbody td:first-child::before {
    display: none;
  }
}


/* =========================================================================
   Utility Classes & Allgemein
   ========================================================================= */

.ics-calendar .ics-meta {
  margin: .3rem 0;
}

.ics-calendar .ics-no-events {
  padding: 2rem;
  text-align: center;
  color: var(--ics-muted);
  font-style: italic;
}


/* === Month header rows (ACF ICS Table) === */
.ics-calendar.table table.ics-table tr.ics-month-row td{
  font-weight: 700 !important;
  background: var(--month-color, var(--ics-accent)) !important;
  color: #fff !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
}

@media (max-width:640px){
  .ics-calendar.table table.ics-table tr.ics-month-row td{
    padding: .8rem 1rem !important;
  }
  .ics-calendar.table table.ics-table tr.ics-month-row td::before{
    display:none !important;
    content:none !important;
  }
}
/* Monatsfarbe als Hintergrund pro Terminzeile */
.ics-calendar.table table.ics-table tbody tr:not(.ics-month-row){
  background: color-mix(in srgb, var(--month-color, transparent) 70%, transparent) !important;
}
.ics-calendar.table table.ics-table tbody tr:not(.ics-month-row) td{
  background: transparent !important;
}

/* Monatsüberschrift: schwarz + 400 */
.ics-calendar.table table.ics-table tr.ics-month-row td{
  color:#000 !important;
  font-weight:400 !important;
	font-size:26px !important;
}


.ics-calendar.table .ics-month-row td,
.ics-calendar.table .ics-month-cell{
  border-radius: 0 !important;
}


/* ALLES eckig (Monatszeile + Terminzeilen + mobile cards) */
html body .ics-calendar.table,
html body .ics-calendar.table .ics-table-wrap,
html body .ics-calendar.table table.ics-table,
html body .ics-calendar.table table.ics-table tbody,
html body .ics-calendar.table table.ics-table tbody tr,
html body .ics-calendar.table table.ics-table tbody td,
html body .ics-calendar.table table.ics-table tbody td:first-child,
html body .ics-calendar.table table.ics-table tbody td:last-child,
html body .ics-calendar.table table.ics-table tbody tr.ics-month-row td,
html body .ics-calendar.table table.ics-table tbody tr.ics-month-row .ics-month-cell {
  border-radius: 0 !important;
}

/* falls irgendwo "card-look" über overflow entsteht */
html body .ics-calendar.table table.ics-table tbody tr {
  overflow: visible !important;
}


/* Monatsüberschrift – 4px Border links mit 70% Transparenz */
html body .ics-calendar.table table.ics-table tr.ics-month-row td{
  color: #000 !important;
  font-weight: 600 !important;

  border-left: 4px solid color-mix(
    in srgb,
    var(--month-color) 70%,
    transparent
  ) !important;

  padding-left: 12px !important;
  border-radius: 0 !important;
}

/* === ICS Chipbar – größer, eckig, Kalenderfarbe === */

/* Chip-Leiste insgesamt etwas luftiger */
html body .ics-calendar.table .ics-chipbar{
  gap: .75rem .75rem;
  margin-top: .4rem;
}

/* Einzelne Chips */
html body .ics-calendar.table .ics-chip{
  font-size: 24px;                 /* größer */
  padding: .65rem 1.2rem;          /* mehr Fläche */
  border-radius: 3px !important;   /* leicht eckig */
  border: 3px solid var(--ics-accent) !important;
  background: transparent;
  color: var(--ics-accent);
  font-weight: 500;
  line-height: 1.25;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}

/* === Erster Chip (z.B. "Alle Kalender") korrekt einfärben === */
html body .ics-calendar.table .ics-chipbar .ics-chip:first-child{
  border-color: var(--ics-accent) !important;
  color: var(--ics-accent) !important;
  background: transparent;
}

/* aktiv */
html body .ics-calendar.table .ics-chipbar .ics-chip:first-child.active{
  background: var(--ics-accent) !important;
  color: #fff !important;
}


/* Aktiver Chip */
html body .ics-calendar.table .ics-chip.active{
  background: var(--ics-accent);
  color: #fff;
}

/* Hover */
html body .ics-calendar.table .ics-chip:hover{
  transform: translateY(-1px);
}

/* Mobile etwas kompakter */
@media (max-width: 640px){
  html body .ics-calendar.table .ics-chip{
    font-size: 16px;
    padding: .45rem .9rem;
  }
}

/* Titel-Spalte darf farbiger bleiben, Rest schwarz */
html body .ics-calendar.table table.ics-table tbody tr:not(.ics-month-row) td{
  color:#111 !important;
}
html body .ics-calendar.table table.ics-table tbody tr:not(.ics-month-row) td:first-child{
  color: #111 !important; /* oder: var(--month-color) */
}