html, body {
  font-family: 'PT Sans', Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  box-sizing: border-box; 
  background-color: #f2f2f2;/* globales box-sizing für bessere Breitenkontrolle */
}

/* Übernimmt box-sizing auch für alle Pseudoelemente */
*, *::before, *::after {
  box-sizing: inherit;
}

#termine-wrapper{
	background-color: red;
	border 1px solid yellow;
	width:99%;
}

/* ---------- Allgemeines Flexbox-Layout ---------- */

.responsive-table {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.table-row {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid lightgray;
  background-color: white;
  max-width: calc(100% - .2em);
  margin-bottom: .8em;
  box-sizing: border-box;
  border-radius: 6px;
  box-shadow: 1px 1px 2px gray;
}

/*------------------Filter Orte, Kriterien, Inhalte --------------*/

#filterbar {
  background-color: #ddd;
  padding: .5em;
  width: 100%;
  max-width: calc(100%);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: flex-end;
}

/* Checkbox komplett ausblenden */
.filter-season input[type="checkbox"],
.filter-ort input[type="checkbox"],
.filter-kriterien input[type="checkbox"],
.filter-inhalte input[type="checkbox"] {
  position: absolute;  /* aus dem Layout nehmen */
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none; /* keine Interaktion mit der Box, nur Label */
}

/* Container: flex mit Wrap für Umbruch */
.filter-season,
.filter-ort,
.filter-kriterien,
.filter-inhalte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}

/* Label als Button mit inline-flex (checkbox + text zusammen) */
.filter-season label,
.filter-ort label,
.filter-kriterien label,
.filter-inhalte label {
  display: inline-flex;
  align-items: center;
  padding: 0.5em 0.7em;
  border: 1px solid #999;
  border-radius: 0.25em;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  font-size: 0.9em;
  color: #333;
  background-color: white;
  white-space: nowrap;        /* Kein Umbruch innerhalb Label */
  margin-right: 0.3em;
  margin-bottom: 0.3em;       /* Abstand Zeilen bei Umbruch */
}

/* Aktiv (Checkbox gechecked) */
.filter-season input[type="checkbox"]:checked + label,
.filter-ort input[type="checkbox"]:checked + label,
.filter-kriterien input[type="checkbox"]:checked + label,
.filter-inhalte input[type="checkbox"]:checked + label {
  background-color: #28a745;
  color: white;
  border-color: #28a745;
}

/* Hover für nicht-gecheckte Labels */
.filter-season input[type="checkbox"]:not(:checked) + label:hover,
.filter-ort input[type="checkbox"]:not(:checked) + label:hover,
.filter-kriterien input[type="checkbox"]:not(:checked) + label:hover,
.filter-inhalte input[type="checkbox"]:not(:checked) + label:hover {
  background-color: #166534;
  color: white;
  border-color: #666;
}

/* Fokus für nicht-gecheckte Labels */
.filter-season input[type="checkbox"]:not(:checked):focus + label,
.filter-ort input[type="checkbox"]:not(:checked):focus + label,
.filter-kriterien input[type="checkbox"]:not(:checked):focus + label,
.filter-inhalte input[type="checkbox"]:not(:checked):focus + label {
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.5);
  outline: none;
  background-color: #e5f0e3; /* Optional sanfter Fokus-Hintergrund */
  color: #166534;
}

/* Fokus für gecheckte Labels (optional) */
.filter-season input[type="checkbox"]:checked:focus + label,
.filter-ort input[type="checkbox"]:checked:focus + label,
.filter-kriterien input[type="checkbox"]:checked:focus + label,
.filter-inhalte input[type="checkbox"]:checked:focus + label {
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.8);
}

.filter-season-wrapper{
	width: 100%;
}

/* ---------- Headerzeile (nur in Desktop-Ansicht) ---------- */

.table-row.header {
  display: flex;
  flex-direction: row;
  font-weight: bold;
  background-color: #f6f6f6;
}

/* Spalten-Zellen */
.table-row > div {
  box-sizing: border-box;
  padding: 0.5rem;
  overflow: visible;
  white-space: normal;
}

.table-header {
  display: flex;
  flex-direction: row;
  width: 100%;
  font-weight: bold;
  background-color: #f0f0f0;
  display: none;
}

.table-row.header {
  display: none;
}

/* Spaltenbreiten laut Vorgabe */
.col-kurs        { flex: 0 0 10%; min-width: 120px; }
.col-bild        { flex: 0 0 10%; }
.col-bezeichnung { flex: 0 0 28%; }
.col-zeitraum    { flex: 0 0 17%; }
.col-ort         { flex: 0 0 15%; display: flex; flex-direction: column; }
.col-actions     {
  flex: 0 0 20%;
  display: flex;
  min-width: 220px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding-left: 0.5em; /* links ein bisschen Padding */
  box-sizing: border-box;
}

/* ♥ Bilder mit 4:3 Seitenverhältnis */
.col-bild img {
  max-width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.col-zeitraum {
  /* background-color: #f8f8f8; */
}

.void .table-row {
  background-color: blue;
}

.filter-ort-wrapper,
.filter-kriterien-wrapper,
.filter-inhalte-wrapper{
	
}

#season-container,
#orte-container,
#inhalte-container,
#kriterien-container{
	padding: .5em;
	border: 1px solid gray;
	border-radius: 6px;
	background-color: #ecf4e8;
	margin-bottom: .3em;
	margin-top: .3em;
}
button#show-season,
button#show-orte,
button#show-inhalte,
button#show-kriterien,
#filter-season,
#filter-von,
#filter-bis,
#filter-season {
  padding: 0.8em;
  width: 100%;
  background-color: #ecf4e8;
  border: 1px solid gray;
  box-sizing: border-box;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
}


button#show-season:hover,
button#show-orte:hover,
button#show-inhalte:hover,
button#show-kriterien:hover,
#filter-season:hover,
#filter-von:hover,
#filter-bis:hover,
#filter-season:hover {
  background-color: white;
}

div.row-2 div{
	padding-top: .5em;
}

button#show-kriterien{
	margin-bottom: 0;
}

button#filter-reset,
button#toggle-compact{
	width: 100%;
	justify-content: center;
}

#filterbar label{
	font-size: .9em;
}


/* ---------- Fonts ---------- */

.offer-krz {
  font-weight: bold;
}

.offer-tab-bezeichnung {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  margin-bottom: .3em;
}
.offer-tab-date {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
}

/* Graue Ausgabe (z.B. Rückblick) */
.void .offer-tab-bezeichnung,
.void .offer-tab-date,
.void .offer-krz,
.void .offer-tab-status,
.void .offer-tab-poi,
.void .spec {
  color: #888;
}

.table-row.course:hover {
  background-color: #f7fff3;
  box-shadow: 1px 1px 4px lightgray;
}
.table-row.void:hover {
  background-color: #f5eeee;
}

/* === Icons für Tabellen === */
.offer-tab-date::before,
.offer-tab-status::before,
.offer-tab-kriterien::before,
.offer-tab-poi::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  position: relative;
}

.offer-tab-kriterien {
  font-size: 1em;
  font-style: italic;
  color: #333;
  position: relative;
  padding-left: 32px;
}
.offer-tab-kriterien::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  /* Optional: Icon-URL hier */
}

.offer-tab-date::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23777' d='M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L64 64C28.7 64 0 92.7 0 128l0 16 0 48L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-256 0-48 0-16c0-35.3-28.7-64-64-64l-40 0 0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L152 64l0-40zM48 192l80 0 0 56-80 0 0-56zm0 104l80 0 0 64-80 0 0-64zm128 0l96 0 0 64-96 0 0-64zm144 0l80 0 0 64-80 0 0-64zm80-48l-80 0 0-56 80 0 0 56zm0 160l0 40c0 8.8-7.2 16-16 16l-64 0 0-56 80 0zm-128 0l0 56-96 0 0-56 96 0zm-144 0l0 56-64 0c-8.8 0-16-7.2-16-16l0-40 80 0zM272 248l-96 0 0-56 96 0 0 56z'/%3E%3C/svg%3E") no-repeat center left;
}

.offer-tab-poi::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23777' d='M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E") no-repeat center left;
}

.offer-tab-kriterien::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23777' d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM305 273L177 401c-9.4 9.4-24.6 9.4-33.9 0L79 337c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L271 239c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E") no-repeat center left;
}

.offer-tab-status::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23777' d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z'/%3E%3C/svg%3E") no-repeat center left;
}

/* === Accordion === */
.monat-accordion {
  margin-top: .5em;
  /* border-top: 1px solid #ccc; */
}
.monat-toggle-button {
  font-size: 1.1em;
  background: #e4e8fa;
  color: #333;
  border: 1px solid black;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
  text-align: left;
  transition: background 0.2s;
  width: 100%;
  max-width: calc(100% - .3rem);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem !important;
  border-radius: 6px;
}

.monat-toggle-button:hover {
  background: #eee;
}

/* === Buttons === */
.offer-button,
.offer-button-registration,
.offer-button-waitinglist,
.offer-button-showmore {
  display: inline-block;
  padding: 6px 10px;
  font-size: 1.1em;
  text-decoration: none;
  border-radius: 4px;
  margin-top: 4px;
  white-space: nowrap;
  transition: 0.3s ease;
  min-width: 10px;
  text-align: center;
  float: right;
  padding-left: .5rem;
}

#filter-reset,
#toggle-compact {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: .8em;
  border: 0;
  cursor: pointer;
}

#filter-reset{
	background-color: darkred;
	color: white;
}

#toggle-compact{
	background-color: navy;
	color: white;
	margin-bottom: 0;
}

.offer-button {
  width: 100%;
}

.offer-button-registration {
  box-shadow: 1px 1px 3px gray;
  background-color: #166534;
  color: white;
  font-weight: bold;
}
.offer-button-registration:hover {
  background-color: #15803d;
  box-shadow: 1px 1px 1px gray;
}
.offer-button-waitinglist {
  background-color: #ddd;
  color: #333;
  font-weight: bold;
}
.offer-button-waitinglist:hover {
  background-color: white;
}
.offer-button-showmore {
  background-color: #162883;
  color: white;
  margin-bottom: 2em;
}
.kurstabelle .offer-button {
  background-color: #0073aa;
}
.kurstabelle .offer-button-waitinglist,
.void .offer-button-registration {
  background-color: #999;
}
a.offer-link:hover {
  background-color: #e4f5c9;
  border-radius: 4px;
}

.compact-view .col-bild,
.compact-view .col-ort,
.compact-view .offer-tab-kriterien {
  display: none !important;
}

/* ---------- Navibar für mobilen Filterbutton (fest oben) ---------- */
#navbar-filter {
  display: none; /* sichtbar nur mobil */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 10000;
  background: #fff;
  border-bottom: 1px solid #ddd;
  box-shadow: 0 2px 8px rgba(80, 80, 80, 0.07);
  padding: 0.75em 1em;
  justify-content: center;
  align-items: center;
}

#navbar-filter button,
#navbar-filter .topbar-call-btn  {
  font-size: 1.15em;
  padding: 0.5em 1.2em;
  background: #2444cc;
  color: white;
  border: none;
  border-radius: 0.2em;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
}


#navbar-filter .topbar-call-btn:hover,
#navbar-filter .topbar-call-btn:focus {
  /* background: #15803d; */
}

#navbar-filter .topbar-call-icon {
  font-size: 1.1em;
  line-height: 1;
}

/* Stil für das neue oben stehende Div */
.filterbar-top {
 display: flex;
  flex-direction: column; 
  align-items: center;
  width: 100%;            /* Wichtig: volle Breite */
  padding: 0.3em;
  font-weight: bold;
  text-align: center;     /* Optional zentrierter Text */
  box-sizing: border-box;
  /* Optional noch Rahmen etc. */
}

.filterbar-top h1{
	margin-top: 0;
	margin-bottom: 0;
}

/* ---------- Responsive Regeln ---------- */

@media (max-width: 1160px) {
  .table-row {
    flex-direction: column;
  }

  .table-row > div {
    width: 100%;
    padding: 0.3rem;
  }

  .table-header {
    display: none;
  }

  /* Spalten mit mehreren Einträgen */
  .col-ort {
    align-items: flex-start;
  }

  .offer-tab-bezeichnung {
    font-size: 1.4em;
  }

  .col-kurs {
    padding: 0;
  }

  .col-actions {
    justify-content: flex-end;
    align-items: center;
  }

  /* Optional: Bilder in mobiler Ansicht ausblenden */
  .col-bild {
    /* display: none; */
  }
}

/* Zusätzliche Mobilerleichterung: Padding statt margin für 100% Breiten */
@media (max-width: 1064px) {
  .table-row,
  .monat-toggle-button,
  #filterbar {
    margin: 0;
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
  .table-row {
    margin-bottom: 1em;
  }
}

 @media (min-width: 799px) {
  /* Falls row-4 oder row-5 vorhanden sind, sicherheitshalber mit aufnehmen */
  #filterbar .row-2,
  #filterbar .row-3,
  #filterbar .row-4,
  #filterbar .row-5 {
    display: flex;
    flex-direction: row;   /* Horizontale Anordnung */
    flex-wrap: nowrap;     /* Alle Elemente in einer Zeile, kein Umbruch */
    gap: .5em;              /* Abstand zwischen den Elementen */
    justify-content: flex-start; /* Links bündig, je nach Wunsch auch center oder space-between */
    align-items: center;   /* Vertikal zentriert */
    width: 100%;
    box-sizing: border-box;
  }
  
  #filterbar .row-2{
	  flex-direction: column;
	  gap: 0;
  }
  
  #filterbar .row-4
  {
	  flex-direction: column;
	  
  }
  


}

/* ------------------ Mobile Layout für Filterbar als Grid mit Reihen ------------------ */
@media (max-width: 800px) {
  /* Navbar fixiert */
	#navbar-filter {
	  display: flex; /* Immer anzeigen, Mobilität und Sichtbarkeit wird per JS geregelt! */
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  z-index: 10000;
	  background: #fff;
	  border-bottom: 1px solid #ddd;
	  box-shadow: 0 2px 8px rgba(80,80,80,0.07);
	  padding: 0.75em 1em;
	  justify-content: center;
	  align-items: center;
	  gap: 0.5rem;  
	  transform: translateY(-100%);
	  transition: transform 0.3s ease-in-out;
	  will-change: transform;
	}
	
	#navbar-filter .topbar-call-icon {
		background: #2444cc;
		
	}

  /* Filterbar: Grid mit Reihen */
  #filterbar {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-row-gap: 0.75em;
    max-width: calc(100%);
    width: 100%;
    box-sizing: border-box;
    gap: 1em;
    align-items: start;
  }

  /* Reihenanordnung */
  #filterbar > div,
  #filterbar > .button-row {
    margin: 0 !important;
  }
  #filterbar .row-1 { grid-row: 1; }
  #filterbar .row-2 {
    grid-row: 2;
    display: flex;
    gap: 0.5em;
    flex-wrap: nowrap;
	align-items: center;
  }
  
  #filterbar .row-2{
	  flex-direction: column;
  }
  
  
  #filterbar .row-3 {
  grid-row: 3;
    display: flex;
    gap: 0.1em;
    flex-wrap: wrap;
    align-items: flex-start;      /* oben ausgerichtet */
    justify-content: space-between;
  }
  
    #filterbar .row-4 button {
	margin-bottom: .5em;
	
	}		
  
  #filterbar .button-row {
    grid-row: 5;
    display: flex;
    gap: 0.5em;
    flex-wrap: nowrap;
  }

  /* Dropdowns: volle Breite mit Box-Sizing */
  #filterbar select
  {
    width: 99%;
    max-width: 100%;
    font-size: 1rem;
    padding: 0.8em;
    border-radius: 4px;
    border: 1px solid gray;
    background-color: white;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23777' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.7em center;
    background-size: 1em;
    padding-right: 2em;
  }

  /* Buttons nebeneinander, max 48% Breite */
  #filterbar .button-row button {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: 48%;
    box-sizing: border-box;
    padding: 0.6em;
    font-size: 1em;
    cursor: pointer;
  }
  #filter-reset{
	  margin-bottom: 0;
  }
  
}