/* ===== Farben ===== */
:root{
  --tsv-green:#64b230;
  --tsv-dark:#005d38;
  --tsv-border:#e5e7eb;
	  --tsv-header-h: 44px;      /* gemeinsame Höhe für Chip, Select, Button */
}

/* Typo vom Theme erben */
.tsv-header,
.tsv-filterbar select,
.tsv-filterbar .btn,
.tsv-agenda-controls .btn,
.tsv-month-controls .btn,
.tsv-cal-icon,
.tsv-agenda-item,
.tsv-single-title { font-family: inherit; }

/* ===== Header (gemeinsam für Agenda & Monat) =====
   Zeile 1: Titel links, Filter rechts
   Zeile 2: Prev links, Next rechts
*/
.tsv-header{
  display:grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  grid-template-areas:
    "title actions"
    "prev  next";
  align-items:center;
  gap:.5rem 1rem;
  margin:.3rem 0 .9rem 0;
}

/* Titel-Chip – kompakt (10px Radius, wenig Padding) */
.tsv-header .title{
  grid-area:title;
  display:inline-flex; align-items:center; gap:.45rem;
  background:#fff;
  border:1px solid var(--tsv-border);
  border-radius:10px;
  padding:.35rem .8rem;
  color:var(--tsv-dark);
  font-weight:800; text-transform:uppercase; letter-spacing:.05em; line-height:1; font-size:1rem;
	  min-height: var(--tsv-header-h);
  padding: 0 .8rem;                   /* statt .35rem */
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
.tsv-header .title .ico{ color:var(--tsv-green); font-size:1.2rem }
.tsv-header .title .label{ white-space:nowrap }

/* Filter rechts – EINZEILIG */
.tsv-header .actions{
  grid-area:actions;
  display:flex; align-items:center; gap:.4rem;
  flex-wrap: nowrap;
  justify-self:end;
}
.tsv-filterbar.compact select{
  min-width: 180px; max-width: 280px;
  background:#fff; border:1px solid var(--tsv-border); border-radius:10px;
  padding:.35rem .5rem; font-size:.9rem;
	height: var(--tsv-header-h);
  line-height: var(--tsv-header-h);
  padding: 0 .6rem;                   /* vertikal 0, damit die Höhe greift */
  margin: 0;                          /* Browser-Default killen */
  box-sizing: border-box;
  appearance: auto;               
}

/* Zeile 2: Prev/Next */
.tsv-header .prev{ grid-area:prev; justify-self:start }
.tsv-header .next{ grid-area:next; justify-self:end }
.tsv-header .btn.ghost{ padding:.32rem .7rem; font-size:.85rem }

/* ===== Monatskalender ===== */
.tsv-calendar{ width:100%; border-collapse:separate; border-spacing:6px }
.tsv-calendar th{ padding:.5rem .6rem; text-align:left; color:#fff }
.tsv-calendar td{ background:#fff; border:1px solid var(--tsv-border); border-radius:12px; padding:.5rem; vertical-align:top }
.tsv-daynum{ display:inline-block; font-weight:800; color:var(--tsv-dark); background:rgba(100,178,48,.12); padding:.15rem .45rem; border-radius:999px; margin-bottom:.35rem }
.tsv-event{ margin:.3rem 0; padding:.35rem .5rem; border-radius:8px; background:rgba(100,178,48,.12); border:1px solid rgba(100,178,48,.25) }
.tsv-event a{ color:var(--tsv-dark); font-weight:700; text-decoration:none }
.tsv-event a:hover{ text-decoration:underline }
.tsv-event small{ opacity:.75 }

/* Unten: Monats-Navigation (optional zusätzlich) */
.tsv-month-controls{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin:.7rem 0 0 0 }
.btn{ text-decoration:none }
.btn.ghost{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; color:var(--tsv-green);
  border:2px solid var(--tsv-green);
  border-radius:999px; padding:.45rem 1rem;
  font-weight:800; line-height:1; white-space:nowrap; transition:all .2s ease;
}
.btn.ghost:hover{ background:var(--tsv-green); color:#fff; border-color:var(--tsv-dark); box-shadow:0 0 0 3px rgba(100,178,48,.15) }

/* ===== Agenda (nur Tage mit Events) ===== */
.tsv-agenda{ display:grid; gap:.8rem }
.tsv-agenda-day{ border:1px solid var(--tsv-border); border-radius:14px; background:#fff; overflow:hidden }
.tsv-agenda-date{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-weight:800; color:var(--tsv-dark); padding:.8rem 1rem; background:rgba(0,93,56,.05) }
.tsv-agenda-list{ list-style:none; margin:.6rem 0 1rem 0; padding:0 1rem 1rem 1rem }
.tsv-agenda-item{ margin:.35rem 0; border-radius:12px; background:#fff; border:1px solid var(--tsv-border); transition:box-shadow .2s ease,border-color .2s ease; padding:.6rem .7rem }
.tsv-agenda-item:hover{ border-color:var(--tsv-green); box-shadow:0 0 0 3px rgba(100,178,48,.15) }
.tsv-agenda-item .tsv-row{ display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:center }
.tsv-agenda-thumb{ max-width:80px; height:auto; border-radius:10px; display:block } /* kein Crop */
.tsv-agenda-item a{ color:var(--tsv-dark); text-decoration:none }
.tsv-agenda-item a strong{ color:var(--tsv-green); text-transform:uppercase }
.tsv-agenda-item .m{ display:block; opacity:.9; margin-top:2px }

/* Unten: Agenda-Navigation */
.tsv-agenda-controls{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin:.9rem 0 .4rem 0 }

/* Leere-Meldung */
.tsv-empty{ background:#fff; border:1px solid var(--tsv-border); border-radius:12px; padding:.8rem 1rem; color:var(--tsv-dark); margin:.4rem 0 .6rem }

/* ===== Single ===== */
.tsv-single-wrap{ margin-top:75px }
.tsv-single{ max-width:1100px; margin:0 auto }
.tsv-single-title{ margin:0 0 1rem 0; font-size:clamp(1.8rem,3vw,2.6rem); letter-spacing:.04em; color:var(--tsv-dark) }
.tsv-single-grid{ display:grid; grid-template-columns:280px 320px 1fr; gap:22px }
@media(max-width:960px){ .tsv-single-grid{ grid-template-columns:1fr } }
.tsv-single-card{ background:#fff; border:1px solid var(--tsv-border); border-radius:14px; padding:14px }
.tsv-single-meta{ display:grid; gap:.45rem }
.tsv-single-meta .tsv-row strong{ color:var(--tsv-dark) }

/* ===== Next-Event Card ===== */
.tsv-next-card{ border:1px solid var(--tsv-border); border-radius:16px; background:#fff; overflow:hidden }
.tsv-next-card .media img{ display:block; width:100%; height:auto }
.tsv-next-card .body{ padding:12px }
.tsv-next-card h3{ margin:.1rem 0 .4rem 0; font-size:1.2rem; line-height:1.3 }
.tsv-next-card h3 a{ color:var(--tsv-green); text-decoration:none; text-transform: uppercase; }
.tsv-next-card h3 a:hover{ text-decoration:underline }
.tsv-next-meta{ display:grid; gap:4px; margin:.35rem 0 }
.tsv-badge{ display:inline-block; background:var(--tsv-dark); color:#fff; padding:.1rem .5rem; border-radius:999px; font-size:.8rem }

/* ===== „Zum Nord-Kalender“ – verbessert ===== */
/* ===== „Zum Nord-Kalender“-Button ===== */
.tsv-cal-icon{
  display:inline-flex;
  align-items:center;
  gap:.9rem;                      /* mehr Abstand Icon <-> Text */
  background:#fff;
  border-radius:999px;
  padding:1rem 1.6rem;            /* mehr Luft */
  color:var(--tsv-dark);
  text-decoration:none;
  font-weight:900;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-size:1rem;                 /* leicht größer */
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}

/* Button-Grundstil wie gehabt … */

/* Icon als Maske – Farbe kommt von currentColor */
.tsv-cal-icon .ico{
  display:inline-block;
  width:50px;
  height:50px;
  background-color: var(--tsv-green); /* <- bestimmt die Icon-Farbe */
  flex-shrink:0;
}

/* Standardfarbe + Hoverfarbe greifen jetzt tatsächlich */
.tsv-cal-icon{ color: var(--tsv-dark); }
.tsv-cal-icon:hover{
  transform: translateY(-2px);
  border-color: var(--tsv-green);
  color: var(--tsv-green);      /* färbt das Masken-Icon automatisch um */
  box-shadow: 0 8px 20px rgba(0,93,56,.10), 0 0 0 3px rgba(100,178,48,.14);
}

.tsv-cal-label{
  font-size:1rem;
  font-weight:900; /* wenn du es noch kräftiger willst */
}

/* Kalender-Button im Sticky Header */
.header-wrapper.stuck .tsv-cal-icon {
  display: inline-flex;
  align-items: center;
  padding: 0px;  /* gleichmäßigere Polsterung im Button */
  font-size: 0.55rem; /* etwas kleiner im Sticky Header */
}

.header-wrapper.stuck .tsv-cal-icon .ico {
  width: 50px;
  height: 50px;
  margin-right: 6px;
}


/* Responsive Tweaks */
@media (max-width: 640px){
  .tsv-header{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "actions"
      "prev"
      "next";
  }
  .tsv-header .actions{ justify-self:start }
  .tsv-agenda-thumb{ max-width:60px }
 
}

/* === Mobile-Layout: gleich breite Spalten für Prev/Nächster === */
@media (max-width: 640px){
  /* 1. Zeile: Titel vollbreit, 2. Zeile: Filter vollbreit, 3. Zeile: Prev | Next */
  .tsv-header{
    grid-template-columns: 1fr 1fr;                 /* zwei gleiche Spalten */
    grid-template-areas:
      "title   title"
      "actions actions"
      "prev    next";
    gap: .6rem .6rem;
  }

  /* Select über volle Breite */
  .tsv-header .actions{ justify-self: stretch }

  /* Buttons über die jeweils halbe Breite, mittig und gleich hoch */
  .tsv-header .prev,
  .tsv-header .next{ align-self: center; justify-self: stretch }

  .tsv-header .btn.ghost{
    width: 100%;
    text-align: center;
    padding: .42rem .8rem;           /* gleiche Höhe auf beiden Seiten */
    box-sizing: border-box;
  }
}