/* Stile spezifisch für die Termin-Seite */
.hero-bar {
  max-width: var(--max);
  margin: 20px auto 0;
  padding: 0 16px;
}

.bar {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  align-items: center;
}

.bar h1 {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.12;
}

.content-container {
  max-width: var(--max);
  margin: 20px auto;
  padding: 0 16px;
}

#event-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

#event-list li {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

#event-list li:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

/* Zeigt standardmäßig nur die ersten 10 Termine an */
#event-list li:nth-child(n+11) {
  display: none;
}

#event-list li .event-title {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 8px;
}

#event-list li .event-date {
  font-size: 0.95rem;
  color: var(--accent);
  margin-bottom: 12px;
  font-weight: 700;
}

#event-list li .event-description {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.5;
}
/* === Mobile Responsive Fix für termine1.php ========================= */
@media (max-width: 720px) {
  .term-row {
    display: block; /* statt grid oder flex in dieser Ansicht */
  }
  .term-row .info {
    margin-bottom: 8px;
    white-space: normal;
  }
  .term-row .btn-req {
    display: block;
    width: 100%;
    margin-top: 4px;
    text-align: center;
    justify-self: stretch;
  }
}
/* ==== UI-Optimierung (nur Layout) =========================================
   - Mehr Abstand zwischen Banner und dem ersten Eintrag
   - Ruhiger Zeilen-Look (keine harte Zweifarbigkeit in der Reihe)
   - Dezente linke Akzentleiste je Termin
   - Keine Funktionsänderungen
============================================================================ */

/* zusätzlicher Abstand unter dem Banner, damit der erste Eintrag nicht „klebt“ */
.hero-bar + .termine-wrap{margin-top:16px}

/* Grundlayout wie bisher */
.termine-wrap{max-width:1200px;margin:0 auto;padding:0 14px}
.termine-head{margin:12px 0 14px 0}
.term-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}

/* Terminzeile – ruhiger Hintergrund statt 2. Farbfläche, plus Akzentleiste */
.term-row{
  position:relative;
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:16px;
  padding:14px 16px 14px 20px;
  border-radius:14px;
  background: var(--panel2);
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  overflow:clip;
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.term-row::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, #5ab0ff, #3a8fe0);
  border-radius:14px 0 0 14px;
}
.term-row:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  border-color: rgba(90,176,255,.28);
}

/* Info-Zeile unverändert */
.term-row .info{
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  display:flex; gap:10px; align-items:center; min-width:0;
  font-size:15px;
}
.term-row .info .title{font-weight:700}
.term-row .info .sep{opacity:.5}
.term-row .info .date{opacity:.9; font-variant-numeric:tabular-nums}
.term-row .info .place{opacity:.8}

/* CTA-Button wie gehabt */
.term-row .btn-req{
  justify-self:end;
  padding:10px 16px;
  border-radius:999px;
  background:linear-gradient(180deg, #294571 0%, #203956 100%);
  color:#eaf2ff; border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  cursor:pointer; font-weight:700;
}
.term-row .btn-req:hover{filter:brightness(1.05)}
.term-row .btn-req:active{transform:translateY(1px)}

/* Lade-Mehr */
.load-more-bar{display:flex;justify-content:center;margin:18px 0 6px}
.load-more{padding:12px 20px;border-radius:999px;background:var(--panel2);color:var(--text);border:1px solid rgba(255,255,255,.06)}
.load-more.loading{opacity:.6;pointer-events:none}

/* ==== Modal – eindeutig, mit Statusbereich & Scroll-Lock ==== */
.req-modal-backdrop{
  position:fixed; inset:0; display:none;
  background:rgba(0,0,0,.5);
  z-index:9997;
}
.req-modal{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(720px, calc(100vw - 24px));
  border-radius:18px; background:#182634;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  display:none; z-index:9998;
}
.req-modal.show, .req-modal-backdrop.show{display:block}
.req-head{padding:16px 18px 10px 18px; border-bottom:1px solid rgba(255,255,255,.08)}
.req-head h3{margin:0;font-size:20px}
.req-sub{opacity:.9;margin-top:4px;font-size:14px}
.req-body{padding:16px 18px 8px 18px}
.req-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.req-grid .full{grid-column:1 / -1}
.req-field label{display:block;font-size:13px;margin:0 0 4px}
.req-field input{width:100%;background:#0f1b27;color:var(--text);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px}
.req-dsgvo{display:flex; align-items:flex-start; gap:8px; margin:10px 0 10px 0}
.req-foot{padding:12px 18px 16px 18px; display:flex; gap:10px; justify-content:flex-end; border-top:1px solid rgba(255,255,255,.08)}
.req-btn{padding:10px 16px; border-radius:12px; cursor:pointer; border:1px solid rgba(255,255,255,.1)}
.req-btn.ghost{background:#0f1b27; color:var(--text)}
.req-btn.primary{background:#28508a; color:#eaf2ff}
.req-btn.primary:hover{filter:brightness(1.06)}
.req-status{padding:12px 18px;display:none;line-height:1.5}
.req-status.show{display:block}
.req-status.success{background:#11301d;border-top:1px solid rgba(53,211,153,.25);color:#d3ffe7}
.req-status.error{background:#341a1a;border-top:1px solid rgba(255,100,100,.25);color:#ffdcdc}

/* Body-Scroll-Lock wenn Modal offen */
body.modal-open{overflow:hidden}

/* Mobile */
@media (max-width:720px){
  .req-grid{grid-template-columns:1fr}
}
/* Mobile-Ansicht – kompaktes Layout mit wenig Rand */
/* =========================================================
   Mobile-Optimierung (≤ 720px): kompaktere Karten & Buttons
   - weniger Seitenrand
   - geringere Innenabstände
   - kleinere Schriftgrößen
   - geringerer Abstand zwischen Titel und Button
   ========================================================= */
@media (max-width: 720px) {
  /* noch weniger Rand links/rechts */
  .termine-wrap { padding: 0 4px; }

  /* Block-Abstand untereinander leicht kleiner */
  .term-list { gap: 10px; }

  /* Termin-Karte kompakter */
  .term-row {
    /* weiterhin: Datum > Titel > Button (kommt aus deinem letzten Block) */
    padding: 8px 10px;           /* vorher 10–12 → straffer */
    border-radius: 10px;         /* etwas kleinere Rundung */
    box-shadow: 0 2px 10px rgba(0,0,0,.20);
    gap: 4px;                    /* weniger vertikaler Gap innerhalb der Karte */
  }

  /* Info-Stack enger & mit kleineren Fonts */
  .term-row .info {
    line-height: 1.25;
    gap: 2px;                    /* noch etwas enger */
  }
  .term-row .info .date {
    font-size: 13px;             /* kompakteres Datum */
    margin: 0 0 2px 0;           /* kleiner Abstand zum Titel */
  }
  .term-row .info .title {
    font-size: 15.5px;           /* etwas kleiner als Desktop */
    margin: 0;                   /* kein Extra-Offset */
  }

  /* Button unten: kleiner & mit weniger Außenabstand */
  .term-row .btn-req {
    width: 100%;
    padding: 7px 10px;           /* schlanker */
    font-size: 13.5px;
    border-radius: 12px;
    margin-top: 4px;             /* vorher 6–8px → enger zum Titel */
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
  }

  /* Kopfzeilenleisten etwas schmaler */
  .hero-bar { padding: 0 4px; }
  .hero-bar .bar { padding-left: 8px; padding-right: 8px; }
}

/* extrem schmale Geräte (≤ 380px): Button umbrechen & extra straff */
@media (max-width: 380px) {
  .term-row { padding: 8px; }
  .term-row .btn-req {
    width: 100%;
    margin-top: 4px;
    padding: 7px 9px;
    font-size: 13px;
  }
}
/* =========================================================
   Smartphone-Ansicht (≤ 600px):
   Reihenfolge: Datum+Uhrzeit → Titel → Button
   + schmale Seitenränder & kompakte Abstände
   ========================================================= */
@media (max-width: 600px) {
  /* schmale Ränder */
  .termine-wrap { padding: 0 4px; }
  .term-list   { gap: 10px; }

  /* Karte auf 1 Spalte, kompakter Innenabstand */
  .term-row {
    grid-template-columns: 1fr;   /* Button unter den Text */
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
  }

  /* Info-Block stapeln & Reihenfolge explizit setzen */
  .term-row .info {
    display: flex;
    flex-direction: column;       /* untereinander */
    align-items: flex-start;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.25;
  }

  /* Reihenfolge: zuerst Datum/Zeit, dann Titel, dann (optional) Ort */
  .term-row .info .date  { order: 1; font-size: 13px; margin: 0 0 4px 0; opacity: .95; }
  .term-row .info .title { order: 2; font-size: 15.5px; margin: 0 0 4px 0; font-weight: 800; }
  .term-row .info .place { order: 3; font-size: 13px; opacity: .85; margin: 0; }
  .term-row .info .sep   { display: none; }  /* Trennerpunkt ausblenden */

  /* Button unten, weniger dominant und voll breit */
  .term-row .btn-req {
    order: 4;
    width: 100%;
    padding: 7px 10px;
    font-size: 13.5px;
    border-radius: 12px;
    margin-top: 2px;              /* kleiner Abstand zum Titel */
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
  }

  /* Kopfbereich schmaler, damit nichts abgeschnitten wird */
  .hero-bar { padding: 0 4px; }
  .hero-bar .bar { padding-left: 8px; padding-right: 8px; }
}

/* sehr schmale Geräte (≤ 380px) noch straffer */
@media (max-width: 380px) {
  .term-row { padding: 7px 8px; gap: 5px; }
  .term-row .btn-req { padding: 6px 9px; font-size: 13px; }
}
/* ==== Termine – Mobile Ultra-Compact (≤ 600px) ======================= */
@media (max-width: 600px) {
  /* fast kein Seitenrand */
  .termine-wrap { padding: 0 2px !important; }
  .hero-bar     { padding: 0 2px !important; }
  .hero-bar .bar { padding: 10px 8px !important; }

  /* kleinere Abstände zwischen den Karten */
  .term-list { gap: 8px !important; }

  /* Karte sehr kompakt + einspaltig */
  .term-row {
    grid-template-columns: 1fr !important;
    padding: 6px 8px !important;
    gap: 4px !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
  }
  /* dünnere Akzentleiste */
  .term-row::before { width: 3px !important; }

  /* Info-Block stapeln, minimale Abstände */
  .term-row .info {
    display: flex !important;
    flex-direction: column !important;   /* Datum → Titel → Ort */
    align-items: flex-start !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.2 !important;
    gap: 0 !important;
  }
  .term-row .info .sep { display: none !important; }
  .term-row .info .date  { order: 1; margin: 0 0 2px 0 !important; font-size: 13px !important; opacity: .95; }
  .term-row .info .title { order: 2; margin: 0 !important;          font-size: 15px !important; font-weight: 800; }
  .term-row .info .place { order: 3; margin: 0 !important;          font-size: 12.5px !important; opacity: .85; }

  /* Button direkt unter dem Titel, weniger dominant */
  .term-row .btn-req {
    order: 4;
    width: 100% !important;
    padding: 6px 8px !important;
    margin-top: 3px !important;          /* sehr kleiner Abstand zum Titel */
    font-size: 13px !important;
    border-radius: 11px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.15) !important;
  }
}

/* noch schmaler (≤ 380px) – extra straff */
@media (max-width: 380px) {
  .term-row { padding: 6px 6px !important; gap: 3px !important; }
  .term-row .btn-req { padding: 6px 7px !important; font-size: 12.8px !important; }
}
/* ==== Termine: Smartphone-Layout für <main> ===========================
   Bricht das (evtl. globale) Flex-Layout auf Block um und reduziert Ränder
   – nur auf kleinen Screens, ohne Desktop zu verändern.
======================================================================= */
@media (max-width: 640px) {
  /* Haupt-Container: nicht mehr als Flex, volle Breite, kleine Innenabstände */
  main {
    display: block !important;            /* statt flex/grid */
    flex-direction: initial !important;   /* Sicherheitsnetz */
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin: 0 auto !important;
  }

  /* Kopf- und Termin-Container etwas schmaler einrücken */
  .hero-bar { padding: 0 6px !important; }
  .hero-bar .bar { padding-left: 8px !important; padding-right: 8px !important; }

  .termine-wrap {
    max-width: 100% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* noch schmaler (iPhone SE etc.) */
@media (max-width: 380px) {
  main { padding-left: 6px !important; padding-right: 6px !important; }
  .termine-wrap { padding-left: 4px !important; padding-right: 4px !important; }
}
/* =========================================================
   Einheitliche Rundung für Container (Mobile & Desktop)
   ========================================================= */
.hero-bar .bar,
.termine-wrap,
.term-list .term-row,
.grid > div {
  border-radius: 14px !important;   /* identisch zu Desktop */
  overflow: hidden;
}

/* speziell für mobile Ansicht etwas weichere Rundung */
@media (max-width: 720px) {
  .hero-bar .bar,
  .termine-wrap,
  .term-list .term-row,
  .grid > div {
    border-radius: 12px !important;
  }
}
/* =========================================================
   Mobile-Variante: Datum + Uhrzeit als gelbes Label über dem Titel
   ========================================================= */
@media (max-width: 600px) {
  /* Info-Block bleibt vertikal gestapelt */
  .term-row .info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
  }

  /* Datum + Uhrzeit als Label-Zeile */
  .term-row .info .date {
    order: 1;
    background: #FFD84D;              /* Gelber Hintergrund */
    color: #111;                      /* Dunkle Schrift für Kontrast */
    font-weight: 700;
    font-size: 13.5px;
    border-radius: 6px;
    padding: 4px 8px;
    width: 100%;                      /* komplette Breite */
    text-align: center;
    margin: 0 0 4px 0;                /* Abstand nach unten */
  }

  /* Titel darunter */
  .term-row .info .title {
    order: 2;
    font-size: 15.5px;
    font-weight: 800;
    margin: 0;
    color: var(--text);
  }

  /* Ort (falls vorhanden) etwas dezenter */
  .term-row .info .place {
    order: 3;
    font-size: 13px;
    opacity: 0.85;
  }

  /* Button ganz unten */
  .term-row .btn-req {
    order: 4;
    width: 100%;
    margin-top: 4px;
    padding: 7px 10px;
    font-size: 13.5px;
    border-radius: 10px;
  }
}
/* =========================================================
   DESKTOP (≥ 901px)
   - Dezentes gelbes Datums-Label
   - Titel mittig
   - Optionaler Fotostreifen unter dem Termin
   ========================================================= */
@media (min-width: 901px) {
  /* Datum/Uhrzeit als "Tag": weicheres Gelb + dezenter Rand/Schatten */
  .term-row .info .date {
    display: inline-block;
    background: linear-gradient(180deg, #FFE79A, #F9D96B); /* softer als kräftiges Gelb */
    color: #1b2430;
    font-weight: 700;
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 8px;
    box-shadow: 0 1px 0 rgba(0,0,0,.15), inset 0 0 0 1px rgba(0,0,0,.05);
    margin-right: 10px;
  }

  /* Trennerpunkt in Desktop nicht nötig, wenn Label genutzt wird */
  .term-row .info .sep { display: none; }

  /* Terminbeschreibung mittig ausrichten */
  .term-row .info {
    justify-content: center;
    gap: 10px;
    width: 100%;
  }
  .term-row .info .title {
    text-align: left;
    margin: 0;
    width: 100%;
  }
  .term-row .info .place {
    opacity: .9;
  }

  /* Optionaler Fotostreifen unter dem Termin:
     - Zeige nur, wenn ein .term-photo-Container vorhanden ist */
  .term-row .term-photo {
    margin-top: 10px;
    width: 100%;
    min-height: 120px;                 /* gewünschte Mindesthöhe */
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.06);
  }
  .term-row .term-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;                 /* querfüllend, zentriert */
  }

  /* Button etwas zurücknehmen (nicht zu dominant) */
  .term-row .btn-req {
    padding: 9px 14px;
    font-size: 14px;
    box-shadow: 0 3px 12px rgba(0,0,0,.18);
  }
}
/* =========================================================
   DESKTOP – Foto unter jedem Termin
   ========================================================= */
@media (min-width: 901px) {
  .term-row .term-photo {
    margin-top: 10px;
    width: 100%;
    min-height: 140px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.06);
  }
  .term-row .term-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}