/* Seminar-Überblick — Liste statt Tabelle.
   Farben und Schrift von sprecher-akademie.com übernommen: Lato,
   Markengrün #7DBD22, Aktionsblau #009FE3. Beide sind als Fläche zu hell
   für weiße Schrift (gemessen 2,29:1), deshalb die abgedunkelten Töne
   #4A7213 und #00699A für alles, was Text trägt.
   Erzeugt aus seminar-uebersicht/stile.css — dort ändern, nicht hier. */

.su-liste{
  --gruen:#7DBD22;      /* Markenfarbe, wie im Theme */
  --gruen-t:#4A7213;    /* dunkler: für Text auf Weiß */
  --blau:#009FE3;       /* Aktionsfarbe, wie im Theme */
  --blau-t:#00699A;     /* dunkler: trägt weiße Schrift */
  --blau-h:#00537A;
  --text:#2B2B2B;
  --grau:#6B6B6B;
  --grau-h:#767676;
  --linie:#E2E5E9;
  --linie-s:#CFD4DA;
  --flaeche:#F6F7F9;
  --weiss:#fff;
  --rot:#A3231A;  --rot-f:#FBE7E5;
  --gelb:#7A5300; --gelb-f:#FFF3D9;
  --gruen-f:#EEF6E3;

  /* eine Abstandsskala für alle drei Stile */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:44px;

  font:400 15px/1.55 Lato,system-ui,-apple-system,sans-serif;
  color:var(--text);
}
.su-liste *{box-sizing:border-box}
.su-liste h3,.su-liste h4{margin:0}

/* gemeinsame Bausteine ---------------------------------------------------- */
.su-liste .kuerzel{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  font:700 12px/1 Lato,sans-serif; letter-spacing:.07em;
}
.su-liste .pill{
  display:inline-block; padding:2px 9px; border-radius:20px; white-space:nowrap;
  font:700 11.5px/1.6 Lato,sans-serif; letter-spacing:.02em; vertical-align:1px;
}
.su-liste .pill--aus{background:#fff; color:var(--rot); box-shadow:inset 0 0 0 1px var(--rot)}
.su-liste .pill--demn{background:#fff; color:#4A5560; box-shadow:inset 0 0 0 1px #7A8593}
/* weisser Grund: auf getoenten Zeilen (Zebra, NEU) ging der Chip sonst unter */
.su-liste .pill--rest{background:#fff; color:var(--gruen-t); box-shadow:inset 0 0 0 1px var(--gruen-t)}
/* NEU ist die staerkste Markierung: gefuellt statt nur getoent, damit sie
   sich von "nur noch X Plaetze" unterscheidet, das ebenfalls gruen ist. */
.su-liste .pill--neu{background:var(--gruen-t); color:#fff; letter-spacing:.06em}
.su-liste .t-info .pill--neu{margin-left:0; margin-right:var(--s2)}
.su-liste .t-info{overflow-wrap:anywhere}
.su-liste .t-info .pill{margin-left:var(--s1)}
.su-liste .btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 var(--s4); border:0; white-space:nowrap;
  font:700 14px/1 Lato,sans-serif; text-decoration:none!important;
  background:var(--blau-t); color:#fff!important; transition:background .15s;
}
.su-liste .btn:hover{background:var(--blau-h); color:#fff!important}
.su-liste .btn--sek{background:#EAF4F9; color:var(--blau-t)!important;
  border:2px solid var(--blau-t); font-weight:700}
.su-liste .btn--sek:hover{background:var(--blau-t); color:#fff!important; border-color:var(--blau-t)}
.su-liste .btn--tot{background:var(--flaeche); color:var(--grau)!important;
  border:2px solid #7C838C; cursor:default}
.su-liste .t-preis{font-weight:700; text-align:right; white-space:nowrap}
.su-liste .fehlt{
  margin-top:var(--s3); padding:var(--s3) var(--s4); background:var(--gelb-f);
  border:1px solid #EBD9AE; color:var(--gelb); font-size:14px;
}

.su-liste .gruppe{
  font:900 26px/1.25 Lato,sans-serif; color:var(--gruen-t);
  margin:var(--s7) 0 var(--s4); padding:0 0 var(--s2) var(--s4);
  border-left:6px solid var(--gruen);
  border-bottom:2px solid var(--linie);
}
.su-liste .gruppe:first-child{margin-top:0}
.su-liste .reihe{
  margin-top:var(--s4); border:1px solid var(--linie);
  border-left:4px solid var(--c); border-radius:6px; overflow:hidden;
}
.su-liste .reihe-kopf{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4);
  background:var(--flaeche);
  background:color-mix(in srgb, var(--c) 9%, #fff);
  border-bottom:1px solid var(--linie);
  border-bottom-color:color-mix(in srgb, var(--c) 22%, #fff);
}
.su-liste .kuerzel{
  background:var(--c); color:#fff; min-width:52px; height:23px;
  padding:0 10px; border-radius:4px;
}
.su-liste .reihe-kopf h4{flex:1; min-width:0; font:700 17px/1.35 Lato,sans-serif; color:var(--text)}
.su-liste .anz{color:var(--grau); font-size:13px; white-space:nowrap}
.su-liste .termine{list-style:none; margin:0; padding:0; background:var(--weiss)}
.su-liste .termin{
  display:grid; align-items:center; column-gap:var(--s4); row-gap:var(--s1);
  /* Variantenspalte 18 px: Plakette 30 px minus 12 px negativer Rand */
  grid-template-columns:auto 18px 150px minmax(0,1fr) 92px 116px;
  padding:var(--s2) var(--s4); border-top:1px solid var(--linie);
  font-size:14.5px;
}
.su-liste .termin:first-child{border-top:0}
.su-liste .termin:nth-child(even){background:var(--flaeche)}
/* Kein eigener Balken links: die Reihe hat dort schon ihre Kategoriekante,
   zwei Striche nebeneinander lesen sich als Fehler. Die Toenung plus die
   Plakette markieren NEU deutlich genug. */
.su-liste .termin.is-neu,.su-liste .termin.is-neu:nth-child(even){background:var(--gruen-f)}
/* ganze Zeile klickbar (data-url, per JS) */
.su-liste .termin[data-url]{cursor:pointer}
.su-liste .termin[data-url]:hover{background:color-mix(in srgb, var(--c) 7%, #fff)}
.su-liste .termin.is-zu .t-info,.su-liste .termin.is-zu .t-datum{color:var(--grau)}
.su-liste .t-datum{font-weight:700; font-size:14px}
/* Variantenbuchstabe: eigene schmale Spalte vor dem Datum. Die Spalte bleibt
   auch bei Kursen ohne Variante stehen, damit alle Datumsangaben bündig sind. */
.su-liste .t-var{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:20px; padding:0 6px; border-radius:4px;
  background:var(--c); color:#fff;
  font:700 11px/1 Lato,sans-serif; letter-spacing:.05em;
}
.su-liste .t-var:empty{background:none}
.su-liste .termin.is-zu .t-var{background:var(--grau)}
/* Kürzel je Terminzeile, gleiche Höhe wie die Variante; der Reihenkopf zeigt
   nur noch den leeren Farbkasten. */
.su-liste .t-kz{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:20px; padding:0 8px; border-radius:4px;
  background:var(--c); color:#fff;
  font:700 11px/1 Lato,sans-serif; letter-spacing:.07em; white-space:nowrap;
}
.su-liste .termin.is-zu .t-kz{background:var(--grau)}
/* Variante dicht ans Kürzel: 4 px statt der Spaltenlücke (Nutzerwunsch) */
.su-liste .termin .t-var{margin-left:calc(var(--s1) - var(--s4)); width:30px; justify-self:start}

.su-liste .t-info{min-width:0}
.su-liste .btn{height:32px; font-size:13.5px; padding:0 var(--s3); border-radius:4px}

/* Handy, Stil C ----------------------------------------------------------
   Je Termin drei klar getrennte Ebenen statt vier gestapelter Zeilen:
   1) Datum links / Preis rechts   2) Beschreibung   3) Knopf rechtsbündig.
   Der Knopf läuft NICHT über die volle Breite - bei 34 Terminen ergäbe das
   34 blaue Balken untereinander. Er behält aber 44 px Höhe als Touch-Ziel.
   ------------------------------------------------------------------------ */
@media (max-width:760px){
  .su-liste .gruppe{font-size:22px; margin-top:var(--s6)}
  .su-liste .reihe{margin-top:var(--s3)}

  /* Kuerzel und Titel nebeneinander statt untereinander - spart eine Ebene */
  .su-liste .reihe-kopf{
    display:grid; grid-template-columns:auto minmax(0,1fr);
    gap:0 var(--s2); align-items:center; padding:var(--s2) var(--s3);
  }
  .su-liste .reihe-kopf .kuerzel{grid-column:1; grid-row:1}
  .su-liste .reihe-kopf h4{
    grid-column:2; grid-row:1; font-size:16px; line-height:1.3;
    overflow-wrap:anywhere; hyphens:auto;
  }
  /* die Terminzahl unter den Titel, damit ihm die volle Breite bleibt */
  .su-liste .reihe-kopf .anz{grid-column:2; grid-row:2; font-size:12px; margin-top:2px}
  .su-liste .reihe--einzel .anz{display:none}

  /* Zwei Ebenen statt drei: der Knopf sitzt NEBEN der Beschreibung,
     nicht darunter. Das spart je Termin rund 50 px Hoehe. */
  .su-liste .termin{
    grid-template-columns:auto auto minmax(0,1fr) auto!important;
    grid-template-areas:"kz var datum preis" "info info info aktion";
    row-gap:var(--s1); column-gap:var(--s3);
    padding:var(--s3); align-items:center;
  }
  .su-liste .t-kz{grid-area:kz; align-self:center}
  .su-liste .termin .t-var{grid-area:var; align-self:center; margin-left:calc(var(--s1) - var(--s3)); width:30px}
  .su-liste .t-datum{grid-area:datum; font-size:14.5px; align-self:baseline}
  .su-liste .t-preis{grid-area:preis; font-size:15px; align-self:baseline}
  .su-liste .t-info{grid-area:info; color:var(--grau); font-size:14px}
  .su-liste .termin.is-zu .t-info{color:var(--grau)}
  .su-liste .termin .btn,.su-liste .termin .btn--tot{
    grid-area:aktion; justify-self:end; align-self:center; width:auto;
    min-width:110px; height:44px; font-size:14px; padding:0 var(--s4);
  }
  /* eine einzelne Zeile braucht keine Trennlinie zum eigenen Kopf */
  .su-liste .reihe--einzel .termin{border-top:0}
  .su-liste .reihe--einzel .termin:nth-child(even){background:transparent}
}

/* Das Theme bringt eigene Listen- und Linkstile mit. Der Reset darf dabei NICHT
   das Innenabstand der Zeile plattmachen: ein pauschales
   `li{padding-left:0!important}` liess das Datum an der Farbkante kleben (4 px
   statt 16 px, am 2026-09-03 gemessen). Deshalb hier die Abstaende mit
   derselben hohen Spezifitaet gleich mitgesetzt. */
.su-liste ul.termine{list-style:none!important; margin:0!important; padding:0!important}
.su-liste ul.termine > li.termin{
  margin:0!important; background-image:none!important; text-indent:0;
  padding:var(--s2) var(--s4);
}
.su-liste ul.termine > li.termin:before,
.su-liste ul.termine > li.termin:after{content:none!important}
/* box-shadow NICHT pauschal loeschen - der Rahmen des Warteliste-Knopfes
   haengt daran. Am 2026-09-03 stand er dadurch weiss auf weiss. */
.su-liste a.btn{text-decoration:none!important}
.su-liste h3,.su-liste h4{padding:0; text-transform:none}

@media (max-width:760px){
  .su-liste ul.termine > li.termin{padding:var(--s3)}
}

/* NEU sanft hervorheben: ein langsamer Ring um die Plakette. Bewusst nur
   box-shadow und ein Hauch transform - beides erzeugt KEINE Layoutverschiebung
   (die Zeilenhoehe bleibt gleich, gemessen). Wer im Betriebssystem weniger
   Bewegung eingestellt hat, sieht die Plakette ruhig. */
@keyframes su-neu-puls{
  0%,100%{box-shadow:0 0 0 0 rgba(74,114,19,.42)}
  50%    {box-shadow:0 0 0 5px rgba(74,114,19,0)}
}
@keyframes su-neu-heben{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-1px)}
}
.su-liste .pill--neu{
  animation:su-neu-puls 2.6s ease-out infinite, su-neu-heben 2.6s ease-in-out infinite;
  will-change:box-shadow,transform;
}
.su-liste .termin.is-neu{transition:background-color .25s ease}
@media (prefers-reduced-motion:reduce){
  .su-liste .pill--neu{animation:none}
}

/* ===================================================================== =
   Schutz vor Theme-Regeln.
   Das Theme setzt `position:fixed` auf `header`, `display:inline-block` auf
   Listen und `display:flex` auf Links — alles Elementnamen, die hier ebenfalls
   vorkommen. Am 2026-09-03 stapelten dadurch alle 24 Reihenköpfe unsichtbar
   übereinander (vom Nutzer bemerkt: "da fehlen doch die Kürzel").
   Kein Baustein dieser Liste ist positioniert oder gefloatet, deshalb ist das
   pauschale Zurücksetzen hier gefahrlos — und nötig, weil Theme-Selektoren
   spezifischer sind als einfache Klassen.
   ===================================================================== */
.su-liste, .su-liste *{position:static !important; float:none !important}
.su-liste .reihe{display:block !important}
.su-liste .reihe-kopf{display:flex !important}
.su-liste ul.termine{display:block !important}
.su-liste ul.termine > li.termin{display:grid !important}
.su-liste .reihe-kopf .kuerzel,.su-liste span.kuerzel{display:inline-flex !important}
.su-liste .termin span.t-var,.su-liste .termin span.t-kz{display:inline-flex !important}
.su-liste .termin a.btn,.su-liste .termin span.btn{display:inline-flex !important}
.su-liste .pill{display:inline-block !important}
.su-liste .gruppe{display:block !important}
@media (max-width:760px){
  .su-liste .reihe-kopf{display:grid !important}
}

/* --- Filter über der Liste ------------------------------------------------
   Liegt im HTML mit `hidden` vor; erst das Skript blendet ihn ein. */
/* Kopfzeile: erste Gruppenüberschrift links, Suchfeld rechts daneben */
/* Die Suche ist eine eigene Zeile über der Liste — bewusst von der ersten
   Gruppenüberschrift gelöst: an ihr hing das Feld sonst mit, sobald die
   Überschrift beim Filtern verschwand oder die Zählzeile Höhe brauchte.
   Zählzeile links, Feld rechts, beide mittig — die Zeile ist immer so hoch
   wie das Feld, nichts springt. */
.su-liste .su-kopfzeile{display:block; margin:0 0 var(--s5)}
.su-liste .su-kopfzeile + .gruppe{margin-top:0}
/* Oben ausgerichtet, nicht mittig: die Leerzustand-Box ist höher als das Feld
   und würde es sonst nach unten schieben. Die Zählzeile zentriert sich selbst
   auf die Feldhöhe (47 px = 2×2 Rahmen + 2×11 Innenabstand + 21 Zeile). */
.su-liste .su-suche{display:flex; align-items:flex-start; justify-content:flex-end; gap:var(--s4); margin:0}
.su-liste .su-suche-feld{flex:0 0 380px; max-width:100%; order:2}
.su-liste .su-suche[hidden]{display:none}
.su-liste .su-suche-feld{
  display:flex; align-items:center; gap:var(--s2);
  background:var(--weiss); border:2px solid var(--linie-s); border-radius:8px;
  padding:0 var(--s3); transition:border-color .15s;
}
.su-liste .su-suche-feld:focus-within{border-color:var(--blau-t)}
.su-liste .su-suche-icon{color:var(--grau); font-size:17px; line-height:1; flex:none;
  transform:rotate(-45deg)}
.su-liste .su-suche input[type=search]{
  flex:1; min-width:0; border:0; outline:0; background:none;
  padding:11px 0; font:400 15px/1.4 Lato,sans-serif; color:var(--text);
  -webkit-appearance:none; appearance:none;
}
.su-liste .su-suche input[type=search]::-webkit-search-cancel-button{display:none}
.su-liste .su-suche input::placeholder{color:var(--grau-h); opacity:1}
.su-liste .su-suche-weg{
  flex:none; border:0; background:none; cursor:pointer; color:var(--grau);
  font-size:22px; line-height:1; padding:0 var(--s1); border-radius:4px;
}
.su-liste .su-suche-weg:hover{color:var(--text); background:var(--flaeche)}
.su-liste .su-suche-status{flex:1 1 auto; min-width:0; order:1; margin:0; color:var(--grau); font-size:13.5px;
  display:flex; align-items:center; min-height:47px}
.su-liste .su-suche-status:empty{display:none}
.su-liste .su-suche-status.is-leer{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s1) var(--s3);
  margin:0; min-height:0; padding:var(--s3) var(--s4);
  background:var(--flaeche); border:1px solid var(--linie-s); border-left:4px solid var(--blau-t);
  border-radius:6px; color:var(--text); font-size:14px; line-height:1.45;
}
.su-liste .su-leer-text{font-weight:700; flex:1 1 100%}
.su-liste .su-leer-tipp{color:var(--grau)}
.su-liste .su-leer-weg{
  border:0; background:none; padding:0; cursor:pointer;
  color:var(--blau-t); font:700 14px/1.45 Lato,sans-serif; text-decoration:underline; text-underline-offset:2px;
}
.su-liste .su-leer-weg:hover{color:var(--blau-h)}
.su-liste .su-leer-weg:focus-visible{outline:2px solid var(--blau-t); outline-offset:2px; border-radius:2px}

@media (max-width:760px){
  .su-liste .su-suche{flex-direction:column; align-items:stretch; gap:var(--s2)}
  .su-liste .su-suche-feld{flex:1 1 auto; order:1}
  .su-liste .su-suche-status{order:2; min-height:0}
}


/* --- Akkordeon der Kursbeschreibungen (unter der Liste) --------------------
   Natives <details>: ohne JavaScript bedienbar, per Tastatur erreichbar.
   `name="su-akk"` lässt neuere Browser jeweils nur einen Eintrag offen halten. */
.su-liste.su-beschreibungen{margin-top:var(--s7)}
.su-liste .su-akk-hinweis{margin:0 0 var(--s3); color:var(--grau); font-size:13.5px}
.su-liste .su-akk{
  border:1px solid var(--linie); border-left:4px solid var(--c); border-radius:6px;
  margin-top:var(--s2); background:var(--weiss); overflow:hidden;
}
.su-liste .su-akk[open]{box-shadow:0 1px 4px rgba(20,25,30,.08)}
.su-liste .su-akk-kopf{
  display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4);
  cursor:pointer; list-style:none; user-select:none;
  font:700 15.5px/1.35 Lato,sans-serif; color:var(--text);
}
.su-liste .su-akk-kopf::-webkit-details-marker{display:none}
.su-liste .su-akk-kopf:hover{background:var(--flaeche)}
.su-liste .su-akk-kopf:focus-visible{outline:2px solid var(--blau-t); outline-offset:-2px}
.su-liste .su-akk .kuerzel{background:var(--c); color:#fff; min-width:52px; height:23px; padding:0 10px; border-radius:4px}
.su-liste .su-akk-titel{flex:1; min-width:0}
.su-liste .su-akk-pfeil{
  flex:none; width:10px; height:10px; margin-right:var(--s1);
  border-right:2px solid var(--grau); border-bottom:2px solid var(--grau);
  transform:rotate(45deg); transition:transform .18s ease;
}
.su-liste .su-akk[open] .su-akk-pfeil{transform:rotate(-135deg)}
.su-liste .su-akk-inhalt{padding:var(--s1) var(--s4) var(--s4) calc(var(--s4) + 52px + var(--s3)); color:var(--text)}
.su-liste .su-akk-inhalt p{margin:0 0 var(--s3); font-size:15px; line-height:1.6}
.su-liste .su-akk-inhalt p:last-child{margin-bottom:0}
@media (max-width:760px){
  .su-liste .su-akk-inhalt{padding-left:var(--s4)}
  .su-liste .su-akk-kopf{font-size:15px}
}

/* Ganz zum Schluss und spezifisch genug: die Schutzregel weiter oben erzwingt
   `display:grid` für jede Terminzeile (.su-liste ul.termine > li.termin) und schlug
   damit ein einfaches .termin[hidden] — der Filter blendete sichtbar nichts aus. */
.su-liste ul.termine > li.termin[hidden],
.su-liste .reihe[hidden],
.su-liste .gruppe[hidden],
.su-liste [hidden]{display:none !important}


/* auch der Beschreibungsblock selbst kann per Filter verschwinden */
.su-liste[hidden]{display:none !important}

/* Beim Filtern wird die Seite kurz kuerzer als das Fenster, die Bildlaufleiste
   verschwindet und der zentrierte Inhalt rueckt um ~7 px - das Suchfeld
   "wackelt". Platz fuer die Leiste dauerhaft reservieren. Das Stylesheet laedt
   nur auf dieser einen Seite, also keine Nebenwirkung anderswo. */
html{scrollbar-gutter:stable}