/* === Base Styles === */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  font-family: 'PT Sans', Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  overflow-x: hidden;
}
.narrow {
  font-family: 'PT Sans Narrow', Arial, sans-serif;
  font-size: 1.2em;
  font-weight: 700;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* === Layout: Kursliste === */
.termine-wrapper {
  width: 100%;
  overflow: hidden;
  transition: max-height 0.5s ease;
}
.offer-course {
  border: 1px solid gray;
  border-radius: 4px;
  color: #333;
  margin-bottom: 10px;
  background-color: #fafafa;
  width: 100%;
}
.offer-course:nth-child(even) {
  background-color: #fafafa;
}
.offer-course-inner {
  padding: 10px;
}
.offer-link,
.void {
  display: block;
  text-decoration: none;
  color: #111;
  padding: 10px;
}

/* Graue Ausgabe (z.B. Rückblick) */
.void .offer-title,
.void .offer-date,
.void .offer-poi,
.void .offer-krz
 {
  color: #444;
  filter: grayscale(100%) brightness(1.5);
}

/* SVG-LED-Ausnahme */
.void .offer-led-ausgebucht {
  filter: none !important;
}

/* === Inhalte === */

.offer-month{
	display:block;
	padding: 10px;
	background-color: #162883;
	color: white;
	text-align: center;
	
}


.offer-title {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid gray;
}
.offer-tab-bezeichnung,
.offer-tab-krz {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  margin-bottom: 0.3em;
}
.offer-kriterien {
  display: block;
  font-style: italic;
  margin-top: 4px;
}
.offer-krz {
  font-weight: bold;
}
.offer-status-text {
  display: block;
  font-size: 0.8em;
  color: #333;
}
.offer-tab-date {
  font-weight: bold;
}
.offer-date,
.offer-poi {
  display: block;
}
.offer-date {
  font-weight: bold;
  font-size: 1.1em;
}

/* === Flex Row Layout === */
.offer-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.offer-box {
  flex: 1 1 50%;
  min-width: 0;
}

/* === Buttons === */
.offer-button,
.offer-button-registration,
.offer-button-waitinglist,
.offer-button-showmore {
  display: inline-block;
  padding: 6px 10px;
  font-size: 0.9em;
  text-decoration: none;
  border-radius: 4px;
  margin-top: 4px;
  white-space: nowrap;
  
  transition: 0.3s ease;
  min-width: 120px;
  text-align: center;
  float: right;
}
.offer-button-registration {
  box-shadow: 1px 1px 3px gray;
  background-color: #d0e9c1;
  color: black;
  font-weight: bold;
}
.offer-button-registration:hover {
  background-color: #ecf4e8;
  box-shadow: 1px 1px 1px gray;
}
.offer-button-waitinglist {
  background-color: #ddd;
  color: #333;
 /* box-shadow: 1px 1px 1px gray; */
}
.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 {
  background-color: #999;
}
a.offer-link:hover ,
.offer-link:hover{
  background-color: #e4f5c9;
  border-radius: 4px;
  text-decoration: none !important;
}

.offer-button-offerpage{
	background-color: #eee;
}

.offer-date::before, .offer-poi::before{
  content: "";
  display: inline-block;	
  width: 20px;
  height: 20px;
  pointer-events: none;
  margin-right: 9px;
}

.offer-date::before{
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%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-poi::before{
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%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;
}


/* === Zustände / Status-Farben === */
svg .offer-led-frei { fill: green; }
svg .offer-led-ausgebucht { fill: red; }
svg .offer-led-vorbei { fill: gray; }
svg .offer-led-aktuell {
  animation: offer-led-aktuell 1s infinite;
}
@keyframes offer-led-aktuell {
  0%, 100% { fill: green; }
  50% { fill: lightgreen; }
}
.offer-rest {
  fill: orange;
}
.offer-led-rest {
  animation: offer-led-rest 1s infinite;
}
@keyframes offer-led-rest {
  0%, 100% { fill: orange; }
  50% { fill: lightgreen; }
}

/* === Tabelle === */
.kurstabelle {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
.kurstabelle th,
.kurstabelle td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  font-size: 0.95em;
  vertical-align: top;
  text-align: left;
}
.kurstabelle th {
  background: #f5f5f5;
}
.kurstabelle tr:hover {
  background: #fafafa;
}

/* === Accordion === */
.monat-accordion {
  margin-top: 1em;
  border-top: 1px solid #ccc;
}
.monat-toggle-button {
  background: #eee;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
  width: 100%;
  text-align: left;
  transition: background 0.2s;
}
.monat-toggle-button:hover {
  background: #ddd;
}

/* === Responsive Tabelle === */
.responsive-table {
  width: 100%;
  display: block;
  font-size: 1em;
}
.table-header,
.table-row {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: stretch;
}
.table-header {
  font-weight: bold;
  background: #f0f0f0;
}
.table-header > div,
.table-row > div {
  flex: 1 0 0;
  padding: 0.7em;
  border: 1px solid #ccc;
  min-width: 0;
}

/* === Spaltenspezifische Regeln === */
.col-kurs {
  max-width: 120px;
  flex: 0 0 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col-bezeichnung {
  flex: 2 1 250px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
}
.col-zeitraum,
.col-ort,
.col-status,
.col-actions {
  flex: 1 1 100px;
  white-space: nowrap;
}

/* === Mobile === */
@media (max-width: 799px) {
  .responsive-table, .table-row {
    width: 100%;
    overflow-x: auto;
  }

  .kurstabelle th,
  .kurstabelle td {
    padding: 6px 8px;
    font-size: 0.9em;
  }

  .table-header {
    display: none;
  }

  .table-row {
    display: block;
    padding: 1em;
    margin-bottom: 1em;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fafafa;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  }

  .table-row > div {
    display: flex;
    border: none;
    padding: 0.3em 0;
    border-bottom: 1px solid #eee;
    width: 100%;
    font-size: 1em;
  }

  .table-row > div:last-child {
    border-bottom: none;
  }

  .table-row > div::before {
    content: attr(data-label);
    font-weight: bold;
    flex: 0 0 120px;
    margin-right: 10px;
  }

  .offer-box {
  /*  flex: 1 1 100%; */
  }

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

  .offer-tab-kriterien {
    font-size: 0.9em;
    font-style: italic;
    color: #333;
  }
}


/* === Mobile === */
@media (max-width: 330px) {

/* === Flex Row Layout === */
.offer-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;
}
.offer-box {
  flex: 1 1 100%;
  min-width: 0;
}
.offer-button{
	margin-top: 15px;
	width: 100%;
}




/* === Utility === */
.nowrap {
  white-space: nowrap;
}