/* --------------------------------------------------------- Disclaimer-Balken
   Er steht im Quelltext erst NACH dem Inhalt (Vertrauenssignal fuer Crawler und
   KI-Systeme: Ueberschrift und Text kommen zuerst), erscheint aber ganz oben.
   Das Original schiebt ihn nach dem Laden per JavaScript nach oben - was einen
   sichtbaren Sprung erzeugt. Hier macht das die Flex-Reihenfolge, ohne Skript. */

/* Der body hat genau zwei Flex-Kinder: den Rahmen mit dem gesamten sichtbaren
   Inhalt und den Balken. Nur so bleibt das alte UIkit-2-Grid im Rahmen im
   normalen Blockfluss - macht man den body direkt zum Flex-Container, werden
   Navbar, Container und Footer zu Flex-Items und das Grid lief auf schmalen
   Displays 910px breit ueber den Rand. */
body {
  display: flex;
  flex-direction: column;
}

.vhs-rahmen {
  min-width: 0;
  max-width: 100%;
}

#vhs-disc-bar {
  order: -1;                 /* zuerst anzeigen, im Quelltext bleibt er unten */
  background: #f7f7f7;
  border-bottom: 1px solid #e8e8e8;
  font-size: 11.5px;
  color: #555;
  padding: 6px 0;
  line-height: 1.4;
}
#vhs-disc-bar .vhs-dc-in {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 15px;
}
#vhs-disc-bar a { color: #e36b2a; }

/* Ergaenzungen zum uebernommenen Theme-CSS. So wenig wie moeglich. */

/* Akzentstreifen laeuft gerade aus - die Akzentseite bleibt eckig,
   sonst biegt der farbige Rand in die Rundung und wirkt dreidimensional. */
.vhs-akzent {
  border-left: 4px solid #e36b2a;
  border-radius: 0 4px 4px 0;
}

/* Platzhalter fuer die Werbeflaeche, damit das Layout auf dem Staging
   dieselbe Hoehe hat wie live. */
/* ⚠️ Diese Regel setzte height:600px fuer JEDEN Platzhalter - auch fuer den
   90 Pixel hohen Linkblock. Der stand dann als riesiger Kasten in der Seite
   und wirkte wie eine Anzeigenflaeche, die es gar nicht gibt. Die Masse
   kommen jetzt aus dem Inline-Stil, den anzeige() je Slot setzt. */
.vhs-werbeplatz {
  width: 300px; max-width: 100%; height: 600px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: #f5f5f5; border: 1px dashed #ccc;
  color: #9a9a9c; font-size: 12px; text-align: center;
  margin-bottom: 10px;
}

.vhs-suche {
  /* Der ganze Balken ist orange - wie auf der alten Seite. Das Feld sitzt
     weiss darin, der Knopf ist Text ohne eigenen Kasten. */
  display: flex;
  align-items: center;
  gap: 14px;
  background: #e36b2a;
  border-radius: 4px;
  padding: 14px 18px;
  margin: 22px 0;
  flex-wrap: wrap;
}
.vhs-suche-label {
  position: absolute; left: -9999px;   /* nur fuer Vorleseprogramme */
}
.vhs-suche-feld {
  flex: 1 1 240px;
  min-width: 0;
  border: 0;
  border-radius: 3px;
  padding: 11px 14px;
  font-size: 15px;
  color: #444;
  background: #fff;
}
.vhs-suche-feld::placeholder { color: #e08a56; opacity: 1; }
.vhs-suche-feld:focus { outline: 2px solid #fff; outline-offset: 1px; }
.vhs-suche-knopf {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
}
.vhs-suche-knopf:hover { text-decoration: underline; }
/* Die grosse Fassung bleibt wie vorher: heller Kasten, breites Feld, Knopf
   darunter. Sie steht auf Startseite, Kurssuche und 404-Seite - dort ist die
   Suche das Hauptelement und hat Platz. Der orange Balken ist die kompakte
   Fassung fuer mitten im Text. */
.vhs-suche-gross {
  display: block;
  background: none;
  border-radius: 0;
  padding: 0;
  margin: 18px 0 14px;
}
.vhs-suche-gross .vhs-suche-feld {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  padding: 13px 16px;
  font-size: 16px;
  margin-bottom: 12px;
}
.vhs-suche-gross .vhs-suche-feld::placeholder { color: #a8a8aa; }
.vhs-suche-gross .vhs-suche-knopf {
  background: #e36b2a;
  color: #fff;
  border-radius: 4px;
  padding: 11px 26px;
  font-size: 15px;
  font-weight: 400;
}
.vhs-suche-gross .vhs-suche-knopf:hover { background: #cf5f22; text-decoration: none; }

@media (max-width: 520px) {
  .vhs-suche { gap: 10px; }
  .vhs-suche-knopf { width: 100%; text-align: center; }
}

/* --- Zahlenreihe --- */
.vhs-zahlen {
  display: grid; gap: 12px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.vhs-zahl {
  background: #fff; border: 1px solid #ebebeb; border-radius: 6px;
  padding: 16px 18px; text-align: center;
}
.vhs-zahl strong {
  display: block; font-size: 24px; font-weight: 400; color: #e36b2a; line-height: 1.1;
}
.vhs-zahl span { display: block; font-size: 12px; color: #9a9a9c; margin-top: 6px; line-height: 1.35; }

/* --- Kursbereich-Kacheln --- */
.vhs-kacheln {
  display: grid; gap: 8px; margin: 18px 0 6px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.vhs-kachel {
  display: block; padding: 12px 14px; font-size: 14px;
  background: #fff; border: 1px solid #ebebeb; border-radius: 4px;
  text-decoration: none; color: #565655;
  border-left: 3px solid #e36b2a;      /* Akzentseite bleibt eckig */
  border-radius: 0 4px 4px 0;
}
.vhs-kachel:hover { background: #fdf3ee; border-color: #e36b2a; text-decoration: none; }

/* --- Bundeslaender --- */
.vhs-laender {
  display: grid; gap: 8px; margin: 18px 0 6px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.vhs-land {
  display: block; padding: 12px 14px; text-decoration: none;
  background: #fff; border: 1px solid #ebebeb; border-radius: 4px;
}
.vhs-land:hover { background: #f7f7f7; border-color: #ccc; text-decoration: none; }
.vhs-land-name { display: block; font-size: 14px; color: #e36b2a; }
.vhs-land-zahl { display: block; font-size: 12px; color: #9a9a9c; margin-top: 3px; }

/* --- Trefferliste --- */
.vhs-treffer li { padding: 9px 0; border-bottom: 1px solid #ebebeb; }
.vhs-treffer li:last-child { border-bottom: 0; }
.vhs-treffer-meta { display: block; font-size: 12px; color: #9a9a9c; margin-top: 2px; }
.vhs-weiche-1 { color: #4a9a63; }
.vhs-weiche-2 { color: #9a8a3a; }

.vhs-byline { margin-top: 26px; padding-top: 14px; border-top: 1px solid #ebebeb; }

@media (max-width: 640px) {
  .vhs-hero { padding: 22px 18px 20px; }
  .vhs-hero-titel { font-size: 22px; }
  .vhs-suche-knopf { flex: 1 1 100%; }
}


/* --------------------------------------------------- Icons und Bildeinbindung */

.vhs-icon { flex: 0 0 auto; color: #e36b2a; }

/* Kacheln: Icon links, Text daneben */
.vhs-kachel { display: flex; align-items: center; gap: 11px; }
.vhs-kachel span { min-width: 0; }
.vhs-kachel:hover .vhs-icon { color: #c95c21; }

/* Kennzahlen bekommen ein Icon ueber der Zahl */
.vhs-zahl .vhs-icon { display: block; margin: 0 auto 6px; color: #c9c9c9; }

/* Hinweiszeile mit Icon */
.vhs-hinweiskasten {
  display: flex; align-items: flex-start; gap: 11px;
  background: #fdf6f1; border-left: 3px solid #e36b2a;
  border-radius: 0 4px 4px 0;
  padding: 13px 16px; margin: 14px 0;
}

/* Bild im Textfluss, rechts umflossen */
.vhs-illu {
  float: right; width: 300px; max-width: 42%;
  margin: 4px 0 16px 22px;
}
.vhs-illu img { display: block; width: 100%; height: auto; border-radius: 4px; }

/* Aufklappbarer Hintergrundteil des Ratgebers */
.vhs-mehr {
  border: 1px solid #ebebeb; border-radius: 4px;
  padding: 0 16px; margin: 22px 0 0; background: #fcfcfc;
}
.vhs-mehr > summary {
  cursor: pointer; padding: 13px 0; font-size: 14px; color: #e36b2a;
  list-style: none;
}
.vhs-mehr > summary::-webkit-details-marker { display: none; }
.vhs-mehr > summary::before { content: "+ "; font-weight: 700; }
.vhs-mehr[open] > summary::before { content: "\2212 "; }
.vhs-mehr[open] > summary { border-bottom: 1px solid #ebebeb; }
.vhs-mehr > div { padding: 4px 0 14px; }

@media (max-width: 860px) {
  .vhs-hero { grid-template-columns: 1fr; padding: 22px 18px; }
  .vhs-hero-bild { order: -1; }
}
@media (max-width: 640px) {
  .vhs-illu { float: none; width: 100%; max-width: 100%; margin: 0 0 16px; }
}

/* Hinweisgrafik "Gratis Infomaterial anfordern" - stand im Original in der
   Sidebar auf allen Seiten und verlinkt auf den Abschnitt unter /online-kurse/.
   Die PNG-Datei ist transparent, deshalb kein Kastenhintergrund. Das Original
   klebte sie per data-uk-sticky bei 100px an; hier uebernimmt das position:sticky. */
.vhs-infomaterial {
  position: sticky;
  top: 20px;
  background: none;
  border: 0;
  padding: 0;
  text-align: center;
  margin-bottom: 20px;
}
.vhs-infomaterial img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}
.vhs-anzeige {
  display: block;
  font-size: 10px;
  line-height: 1.2;
  color: #9a9a9c;
  text-align: right;
  margin-top: 2px;
}


/* ------------------------------------------------- Meistgesuchte Kursthemen
   Nach Klicks aus der Search Console sortiert, deshalb mit Rangziffer. */
.vhs-beliebt {
  display: grid; gap: 8px; margin: 18px 0 10px;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
}
.vhs-beliebt-kurs {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; text-decoration: none; font-size: 14px; color: #565655;
  background: #fff; border: 1px solid #ebebeb; border-radius: 4px;
}
.vhs-beliebt-kurs:hover {
  background: #fdf6f1; border-color: #e36b2a; text-decoration: none; color: #565655;
}
.vhs-beliebt-rang {
  flex: 0 0 26px; height: 26px; line-height: 26px; text-align: center;
  background: #f2f2f2; color: #9a9a9c; border-radius: 50%;
  font-size: 12px;
}
.vhs-beliebt-kurs:hover .vhs-beliebt-rang { background: #e36b2a; color: #fff; }
.vhs-beliebt-text { min-width: 0; }

/* Bundeslaender kompakter - 16 Kacheln waren als grosse Bloecke zu dominant */
.vhs-laender { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 6px; }
.vhs-land { padding: 9px 12px; }
.vhs-land-name { font-size: 13px; }
.vhs-land-zahl { font-size: 11px; }


/* =============================================== Rhythmus der Startseite
   Die Abschnitte standen zu dicht und sahen gleich aus. Jede Ueberschrift
   bekommt eine kurze Akzentlinie, die Abstaende werden groesser. */

/* Die Akzentlinie stand zuerst UEBER der Ueberschrift. Dort sass sie in der
   Luecke zwischen vorigem Absatz und Ueberschrift und wirkte wie ein Trenner,
   der zum Absatz darueber gehoert - der Strich klebte optisch am falschen
   Element. Unter der Ueberschrift bindet er sie an ihren eigenen Abschnitt. */
.tm-article h2[id] {
  margin-top: 44px;
  margin-bottom: 18px;
  padding-bottom: 11px;
  position: relative;
}
.tm-article h2[id]::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 34px; height: 3px;
  background: #e36b2a;
  border-radius: 0;              /* gerade auslaufen, nicht gerundet */
}
.tm-article h2[id]:first-of-type { margin-top: 8px; }

/* Kennzahlen: Zahl deutlicher, Kasten ruhiger */
.vhs-zahl { padding: 18px 16px 16px; }
.vhs-zahl strong { font-size: 27px; }
.vhs-zahl span { font-size: 11.5px; }

/* Kursbereiche und meistgesuchte Kurse sollen sich unterscheiden:
   Bereiche mit Icon und Akzentkante, Kurse mit Rangziffer und ohne Kante. */
.vhs-kachel { padding: 13px 14px; }

/* Hero: dezenter Verlauf statt flaeche, Bild leicht abgesetzt */
/* ⚠️ Diese Regeln waren verloren gegangen: Beim Umbau der Suchleiste habe ich
   einen CSS-Block bis zum naechsten Doppelumbruch ersetzt und die
   Hero-Regeln mitgeloescht. Sichtbar wurde es erst am Layout - der
   Einstiegsblock war zweispaltig (Text links, Bild rechts) und lief danach
   einspaltig untereinander. Lehre: beim Ersetzen die Grenzen des Blocks
   pruefen, nicht auf Leerzeilen verlassen. */
.vhs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  background: linear-gradient(180deg, #fafafa 0%, #f4f4f4 100%);
  border: 1px solid #ebebeb;
  border-radius: 6px;
  padding: 26px 28px;
  margin-bottom: 22px;
}
.vhs-hero-titel {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 400;
  color: #474538;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.vhs-hero-titel::after { content: none; }
.vhs-hero-lead {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.55;
  color: #565655;
}
.vhs-hero-beispiele {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: #9a9a9c;
}
.vhs-hero-beispiele a { margin-right: 2px; }
.vhs-hero-bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
}

/* Aufklapper etwas ruhiger einbinden */
.vhs-mehr { margin-top: 30px; }


/* Stadtteil-Liste der Stadtstaaten - viele kurze Namen, deshalb mehrspaltig */
.vhs-stadtteile {
  list-style: none;
  margin: 14px 0;
  padding: 0;
  columns: 3 180px;
  column-gap: 22px;
}
.vhs-stadtteile li {
  break-inside: avoid;
  padding: 3px 0;
  font-size: 13.5px;
}
.vhs-punkt-vhs { color: #4a9a63; }

@media (max-width: 640px) {
  .vhs-stadtteile { columns: 2 130px; }
}


/* ------------------------------------------------------------ Hub-Seiten
   Titelbild ueber die volle Spaltenbreite, darunter Direktantwort, Suche
   und Inhaltsverzeichnis. Alles in einer Spalte - der zweispaltige Kopf
   davor liess das Bild neben dem Text zu klein wirken. */

.vhs-hub-bild {
  margin: 0 0 18px;
}
.vhs-hub-bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.vhs-hub-lead {
  font-size: 16.5px;
  line-height: 1.62;
  margin: 0 0 4px;
}

/* Inhaltsverzeichnis */
.vhs-toc {
  background: #fafafa;
  border: 1px solid #ebebeb;
  border-left: 3px solid #e36b2a;
  border-radius: 0 4px 4px 0;
  padding: 14px 18px 12px;
  margin: 20px 0 26px;
}
.vhs-toc-titel {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9a9a9c;
}
/* Das Verzeichnis ist eine LINKLISTE, kein Stapel Ueberschriften. Enge
   Zeilen ohne Trenner sehen aus wie eine Reihe H2 und lesen sich schlecht -
   deshalb spuerbares Padding je Zeile und eine duenne Linie dazwischen. */
.vhs-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  columns: 2 240px;
  column-gap: 30px;
}
.vhs-toc li {
  break-inside: avoid;
  counter-increment: toc;
  padding: 9px 2px;
  border-bottom: 1px solid #ececec;
  font-size: 13.5px;
  line-height: 1.4;
}
.vhs-toc li:last-child { border-bottom: 0; }
.vhs-toc li::before {
  content: counter(toc) ".";
  color: #b0b0b0;
  margin-right: 7px;
  font-variant-numeric: tabular-nums;
}
.vhs-toc a { font-weight: 400; }

@media (max-width: 640px) {
  .vhs-toc ol { columns: 1; }
}


/* ------------------------------------------------- Eigene Inhaltsabschnitte */
.vhs-sektion { margin-bottom: 8px; }
.vhs-listen-titel {
  margin: 16px 0 8px;
  font-size: 13px;
  color: #9a9a9c;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.vhs-merkmale {
  list-style: none;
  margin: 12px 0;
  padding: 0;
}
.vhs-merkmale li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 5px 0;
  font-size: 14.5px;
}
.vhs-merkmale .vhs-icon { color: #4a9a63; margin-top: 2px; }
.vhs-merkmale-block { columns: 2 260px; column-gap: 26px; }
.vhs-merkmale-block li { break-inside: avoid; }

/* ------------------------------------------- Anbieterübersicht Fernschulen
   Aufbau und Klassennamen wie auf abitur-abi.de, damit die Portfolio-Seiten
   denselben Block zeigen. Farben sind die von vhs.info: Akzent #e36b2a
   statt des dortigen Gruens. */

.anbieter-block {
  margin: 38px 0;
  padding: 24px 26px 22px;
  background: #fafafa;
  border: 1px solid #ebebeb;
  border-radius: 6px;
}
.anbieter-ad-label {
  display: block;
  font-size: 10px;
  color: #8a7715;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 4px;
}
.anbieter-block h2 {
  margin: 0 0 6px;
}
.anbieter-block h2::before,
.anbieter-block h2::after { display: none; }   /* keine Akzentlinie im Kasten */
.anbieter-block h2 { padding-bottom: 0; }
.anbieter-intro {
  font-size: 15px;
  color: #6f6f6e;
  margin: 6px 0 22px;
  max-width: 680px;
}
.anbieter-disclosure {
  font-size: 12px;
  color: #9a9a9c;
  line-height: 1.5;
  margin: 18px 0 0;
  max-width: 680px;
}

.anbieter-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  margin: 0;
  align-items: stretch;
}
.anbieter-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  padding: 26px 20px 22px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.anbieter-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .07);
  border-color: #f0c3a5;
}
.anbieter-card--featured {
  border-color: #e36b2a;
  box-shadow: 0 10px 26px rgba(227, 107, 42, .15);
  background: linear-gradient(180deg, #fff8f4 0%, #fff 38%);
}
.anbieter-badge {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  background: #e36b2a;
  color: #fff;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 99px;
  white-space: nowrap;
}
.anbieter-logo {
  display: flex; align-items: center; justify-content: center;
  height: 64px;
  margin: 4px 0 14px;
}
.anbieter-logo img {
  width: 120px; height: auto; max-height: 58px;
  object-fit: contain; display: block;
}
.anbieter-name {
  font-size: 17px;
  margin: 0 0 12px;
  line-height: 1.25;
  color: #474538;
}
.anbieter-name span {
  display: block;
  font-size: 12.5px;
  color: #9a9a9c;
  margin-top: 3px;
}
.anbieter-trust {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 14px;
  padding: 10px 8px;
  border-top: 1px dashed #ebebeb;
  border-bottom: 1px dashed #ebebeb;
  font-size: 12.5px;
  color: #6f6f6e;
  width: 100%;
}
.anbieter-trust-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: 0 0 18px;
  border-radius: 50%;
  background: #4a9a63; color: #fff;
  font-size: 11px; line-height: 1;
}
.anbieter-address {
  font-style: normal;
  font-size: 12px;
  color: #9a9a9c;
  margin: 0 0 14px;
  padding: 8px 12px;
  background: #fafafa;
  border-radius: 4px;
  line-height: 1.5;
  width: 100%;
}
.anbieter-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  width: 100%;
  text-align: left;
}
.anbieter-features li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 13.5px;
  line-height: 1.4;
}
.anbieter-features li::before {
  content: "";
  position: absolute;
  left: 2px; top: 11px;
  width: 12px; height: 7px;
  border-left: 2.4px solid #4a9a63;
  border-bottom: 2.4px solid #4a9a63;
  transform: rotate(-45deg);
}
.anbieter-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #e36b2a; color: #fff;
  padding: 12px 22px;
  border-radius: 99px;
  font-size: 14px;
  text-decoration: none;
  margin-top: auto;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.anbieter-cta::after { content: "\203A"; font-size: 17px; transition: transform .15s; }
.anbieter-cta:hover {
  background: #c95c21; color: #fff; text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(227, 107, 42, .34);
}
.anbieter-cta:hover::after { transform: translateX(3px); }
.anbieter-meta {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: #9a9a9c;
  letter-spacing: .3px;
}

@media (max-width: 640px) {
  .anbieter-block { padding: 20px 16px 18px; }
  .anbieter-cards { grid-template-columns: 1fr; gap: 22px; max-width: 420px; margin: 0 auto; }
  .vhs-merkmale-block { columns: 1; }
}


/* Fragen und Antworten auf den Ortsseiten */
.vhs-faq { margin: 14px 0 6px; }
.vhs-faq details {
  border: 1px solid #ebebeb;
  border-left: 3px solid #e36b2a;
  border-radius: 0 4px 4px 0;
  margin-bottom: 8px;
  background: #fff;
}
.vhs-faq summary {
  cursor: pointer;
  padding: 11px 15px;
  font-size: 14.5px;
  list-style: none;
  color: #474538;
}
.vhs-faq summary::-webkit-details-marker { display: none; }
.vhs-faq summary::before { content: "+ "; color: #e36b2a; font-weight: 700; }
.vhs-faq details[open] > summary::before { content: "\2212 "; }
.vhs-faq details[open] > summary { border-bottom: 1px solid #f2f2f2; }
.vhs-faq p { margin: 0; padding: 11px 15px 13px; font-size: 14px; }


/* Titelbild und Kursliste auf den Ortsseiten */
.vhs-ort-bild { margin: 14px 0 20px; }
.vhs-ort-bild img { display: block; width: 100%; height: auto; border-radius: 4px; }
.vhs-ortkurse {
  list-style: none; padding: 0; margin: 12px 0;
  columns: 2 200px; column-gap: 24px;
}
.vhs-ortkurse li { break-inside: avoid; padding: 4px 0; font-size: 14px; }
.vhs-ortkurse li::before { content: "\203A "; color: #e36b2a; }


/* Drei Wege zur Kurssuche */
.vhs-wege {
  display: grid; gap: 14px; margin: 18px 0 6px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.vhs-weg {
  background: #fff; border: 1px solid #ebebeb; border-radius: 4px;
  padding: 18px 18px 14px;
}
.vhs-weg .vhs-icon { color: #e36b2a; margin-bottom: 8px; }
.vhs-weg h3 { font-size: 15px; margin: 0 0 6px; color: #474538; }
.vhs-weg p { font-size: 13.5px; margin: 0; line-height: 1.5; }


/* Ortsverzeichnis auf den Bundesland-Seiten */
.vhs-kreise { margin: 16px 0 8px; }
.vhs-kreis { margin-bottom: 22px; break-inside: avoid; }
.vhs-kreis h3 {
  font-size: 14px; margin: 0 0 8px; padding-bottom: 5px;
  border-bottom: 1px solid #ebebeb; color: #474538;
}
.vhs-kreis-zahl {
  float: right; font-size: 11px; color: #9a9a9c; font-weight: 400;
}
.vhs-kreis ul {
  list-style: none; margin: 0; padding: 0;
  columns: 4 150px; column-gap: 20px;
}
.vhs-kreis li { break-inside: avoid; padding: 2px 0; font-size: 13px; }

@media (max-width: 640px) {
  .vhs-kreis ul { columns: 2 120px; }
}


/* Ortskarte - Inline-SVG, kein externer Kartendienst */
.vhs-karte { margin: 16px 0 22px; }
.vhs-karte-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  background: #fcfcfb;
  border: 1px solid #ebebeb;
  border-radius: 4px;
}
.vhs-karte figcaption {
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #9a9a9c;
}

/* Orte in der Karte sind anklickbar */
.vhs-karte-ort { cursor: pointer; }
.vhs-karte-ort circle { transition: fill .12s; }
.vhs-karte-ort:hover circle:first-of-type { fill: #e36b2a; }
.vhs-karte-ort:hover text { fill: #e36b2a; font-weight: bold; }
.vhs-karte-ort:focus-visible circle:first-of-type { stroke: #e36b2a; stroke-width: 0.004; }


/* Anzeigenblöcke */
.vhs-anzeige-block { margin: 18px 0; text-align: center; }
.vhs-anzeige-label {
  display: block; text-align: right;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: #9a9a9c; margin-bottom: 2px;
}
.vhs-anzeigenplatz {
  display: flex; align-items: center; justify-content: center;
  margin: 18px auto 2px; padding: 10px;
  background: #f5f5f5; border: 1px dashed #ccc;
  color: #9a9a9c; font-size: 12px; text-align: center;
  box-sizing: border-box;
}
/* Kennzeichnung wie auf der alten Seite: kleine Zeile UNTER der Flaeche.
   Sie steht bei jeder Anzeige, auch beim Platzhalter - sonst faellt beim
   Umschalten auf Live nicht auf, wenn sie irgendwo fehlt. */
.vhs-anzeige-label {
  display: block;
  font-size: 11px;
  color: #9a9a9c;
  text-align: right;
  margin: 2px 0 16px;
  letter-spacing: .02em;
  /* Das Theme setzt in diesem Bereich Versalien - beim Master heisst es
     "Anzeige", nicht "ANZEIGE". */
  text-transform: none;
  font-weight: 400;
}
.vhs-anzeige-block { margin: 18px 0; }


/* Faktenkacheln über dem Inhalt */
.vhs-fakten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 16px 0 22px;
}
.vhs-fakt {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  padding: 13px 12px 11px;
  text-align: center;
  text-decoration: none;
  color: #565655;
}
.vhs-fakt .vhs-icon { display: block; margin: 0 auto 6px; color: #c9c9c9; }
.vhs-fakt strong {
  display: block;
  font-size: 19px;
  font-weight: 400;
  color: #e36b2a;
  line-height: 1.2;
}
.vhs-fakt strong.vhs-fakt-klein { font-size: 13.5px; line-height: 1.35; }
.vhs-fakt span {
  display: block;
  font-size: 11px;
  color: #9a9a9c;
  margin-top: 5px;
  line-height: 1.3;
}
.vhs-fakt-link:hover {
  border-color: #e36b2a;
  background: #fdf6f1;
  text-decoration: none;
}
.vhs-fakt-link:hover .vhs-icon { color: #e36b2a; }


/* Fußleiste mit den Themenspalten */
.vhs-fussleiste {
  background: #f7f7f7;
  border-top: 1px solid #ebebeb;
  padding: 34px 0 26px;
  margin-top: 40px;
}
.vhs-fuss-spalten {
  display: grid;
  /* Vier feste Spalten wie in der Vorlage. auto-fit haette bei sechs Listen
     sechs Spalten ergeben - die Gruppierung steckt jetzt in footer_gruppen(). */
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.vhs-fuss-spalte h2 {
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #9a9a9c;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e4e4e4;
}
.vhs-fuss-spalte h2::before,
.vhs-fuss-spalte h2::after { display: none; }
.vhs-fuss-spalte h2 { padding-bottom: 0; }
.vhs-fuss-spalte ul { list-style: none; margin: 0; padding: 0; }
.vhs-fuss-spalte li { padding: 3px 0; font-size: 13px; line-height: 1.4; }
.vhs-fuss-spalte a { color: #6f6f6e; text-decoration: none; }
.vhs-fuss-spalte a:hover { color: #e36b2a; text-decoration: underline; }

@media (max-width: 640px) {
  .vhs-fussleiste { padding: 26px 0 20px; }
  .vhs-fuss-spalten { gap: 18px; }
}


/* 404-Seite */
.vhs-404-kopf {
  display: flex; align-items: flex-start; gap: 22px;
  margin-bottom: 6px;
}
.vhs-404-zahl {
  flex: 0 0 auto;
  font-size: 54px; line-height: 1;
  color: #e36b2a; opacity: .28;
  font-weight: 700; letter-spacing: -.02em;
}
.vhs-404-kopf h1 { margin-top: 0; }
.vhs-404-lead { margin: 6px 0 0; font-size: 15.5px; line-height: 1.6; }

@media (max-width: 560px) {
  .vhs-404-kopf { gap: 14px; }
  .vhs-404-zahl { font-size: 38px; }
}


/* Liste "in der Nähe" mit Entfernungsangabe */
.vhs-naehe li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid #f2f2f2;
}
.vhs-naehe li:last-child { border-bottom: 0; }
.vhs-naehe-km {
  flex: 0 0 auto;
  font-size: 12px; color: #fff; background: #b9b9b7;
  border-radius: 10px; padding: 1px 8px;
}
.vhs-naehe-kreis { font-size: 12px; color: #9a9a9c; }

/* --------------------------------------------- Kursthemen nach Bereich
   Der Bestand brachte 333 Themen als eine alphabetische Liste ueber die halbe
   Seite - wer nicht genau weiss, wie sein Thema heisst, findet darin nichts.
   Jetzt nach Bereich gruppiert und mehrspaltig, mit Sprungregister darueber.
   Die Einordnung stammt aus data/kursbereiche.json. */
.kurs-register {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.6rem;
}
.kurs-register a {
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
  padding: .35rem .8rem;
  border: 1px solid #e6e3df;
  border-radius: 999px;
  font-size: .9rem;
  color: #565655;
  text-decoration: none;
  background: #fff;
}
.kurs-register a:hover { border-color: #e36b2a; color: #e36b2a; }
.kurs-register a span { color: #9a9691; font-size: .82rem; }

.kurs-gruppe { margin: 0 0 1.8rem; scroll-margin-top: 90px; }
.kurs-gruppe h3 {
  font-size: 1.05rem;
  margin: 0 0 .6rem;
  padding-bottom: .3rem;
  border-bottom: 2px solid #f0ede9;
}
.kurs-spalten {
  columns: 3 210px;
  column-gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kurs-spalten li {
  break-inside: avoid;
  padding: .18rem 0;
  font-size: .94rem;
}
@media (max-width: 640px) { .kurs-spalten { columns: 1; } }

/* Presseschau: Schlagzeile fuehrend, Quelle und Alter als ruhige Zeile darunter */
.vhs-presse li {
  padding: 9px 0;
  border-bottom: 1px solid #f2f2f2;
}
.vhs-presse li:last-child { border-bottom: 0; }
.vhs-presse a { display: block; line-height: 1.35; }
.vhs-presse-quelle {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: #9a9a9c;
}

/* =============================================== Fussbereich nach Master-Vorbild
   Logo links, Symbole rechts, Trennlinie darunter - dann die Spalten. */
.vhs-fuss-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 6px 0 22px;
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 30px;
}
.vhs-fuss-logo img {
  display: block;
  width: 300px; max-width: 100%; height: auto;
}
.vhs-fuss-dienste { display: flex; gap: 8px; }
.vhs-fuss-dienste a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid #e0e0e0; border-radius: 50%;
  color: #9a9a9c;
}
.vhs-fuss-dienste a:hover { color: #e36b2a; border-color: #e36b2a; }
.vhs-fuss-zweit { margin-top: 26px; }

@media (max-width: 980px) { .vhs-fuss-spalten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vhs-fuss-spalten { grid-template-columns: 1fr; } }

@media (max-width: 600px) {
  .vhs-fuss-kopf { justify-content: center; text-align: center; }
  .vhs-fuss-logo img { width: 240px; margin: 0 auto; }
}

/* Kurswunsch-Formular im Fussbereich */
.vhs-kurswunsch { margin-top: 26px; }
.vhs-kw-form label,
.vhs-kw-label {
  display: block;
  font-size: 13px; font-weight: 700; color: #55565a;
  margin: 12px 0 5px;
}
.vhs-kw-pflicht { color: #b3261e; }
.vhs-kw-form input[type="email"],
.vhs-kw-form input[type="text"] {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #c9c9c9; border-radius: 3px;
  font-size: 14px; background: #fff;
}
.vhs-kw-form input:focus { border-color: #e36b2a; outline: 2px solid rgba(227,107,42,.25); }
/* Spezifitaet muss ueber ".vhs-kw-form label" liegen, sonst erbt der Text
   neben dem Haken die 700 der Feldbeschriftungen - in der Vorlage ist nur
   "Datenschutz *" fett, der Satz daneben nicht. */
.vhs-kw-form label.vhs-kw-haken {
  display: flex; align-items: flex-start; gap: 8px;
  font-weight: 400; font-size: 12.5px; line-height: 1.45; color: #6d6e71;
  margin: 0 0 14px;
}
.vhs-kw-form label.vhs-kw-haken input { margin-top: 2px; flex: 0 0 auto; }
.vhs-kw-form button {
  border: 1px solid #c9c9c9; background: #f4f4f4;
  border-radius: 3px; padding: 6px 16px;
  font-size: 13.5px; color: #444; cursor: pointer;
}
.vhs-kw-form button:hover { background: #e36b2a; border-color: #e36b2a; color: #fff; }
/* Nur fuer Maschinen sichtbar - display:none wuerde von manchen uebersprungen */
.vhs-kw-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vhs-kw-ok, .vhs-kw-fehler {
  font-size: 13px; line-height: 1.5; padding: 10px 12px; border-radius: 3px;
}
.vhs-kw-ok     { background: #eef7ea; color: #2f6b28; border-left: 3px solid #4a9a3c; }
.vhs-kw-fehler { background: #fdeeed; color: #8c2019; border-left: 3px solid #b3261e; }

/* =============================================== Umfrage am Ende der Ortsseite */
.vhs-umfrage { margin: 38px 0 6px; }
.vhs-melden {
  display: block; text-align: center;
  background: #e36b2a; color: #fff;
  font-size: 19px; font-weight: 700;
  padding: 14px 18px; border-radius: 4px;
  margin-bottom: 18px;
}
.vhs-melden:hover { background: #cf5f22; color: #fff; text-decoration: none; }

.vhs-umfrage-kasten { border: 1px solid #ddd; border-radius: 3px; background: #fff; }
.vhs-umfrage-frage {
  margin: 0; padding: 14px 16px;
  background: #f4f4f4; border-bottom: 1px solid #ddd;
  font-size: 14.5px; line-height: 1.45; text-transform: uppercase;
  letter-spacing: .02em; color: #4a4a4a; font-weight: 400;
}
/* Spezifitaet muss ueber ".tm-article h2[id]::after" liegen, sonst zieht die
   Umfrage-Frage den orangen Akzentstrich der Abschnittsueberschriften mit -
   sie ist aber keine Abschnittsueberschrift, sondern der Kopf eines Kastens. */
/* Die Frage ist jetzt ein <p> - der Akzentstrich der Ueberschriften kann
   sie gar nicht mehr treffen. */
.vhs-umfrage-auswahl { list-style: none; margin: 0; padding: 14px 16px; }
.vhs-umfrage-auswahl li { padding: 3px 0; }
.vhs-umfrage-auswahl label { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.vhs-umfrage-auswahl input { margin-top: 3px; flex: 0 0 auto; }
.vhs-umfrage-knoepfe {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid #ddd; background: #fafafa;
}
.vhs-umfrage-knoepfe button,
.vhs-umfrage-aus {
  border: 1px solid #c9c9c9; background: #fff; color: #444;
  border-radius: 3px; padding: 6px 14px; font-size: 13.5px; cursor: pointer;
}
.vhs-umfrage-knoepfe button:hover { border-color: #e36b2a; color: #e36b2a; }
.vhs-umfrage-aus:hover { border-color: #999; color: #222; text-decoration: none; }
.vhs-umfrage-dank { margin: 0; padding: 14px 16px; font-size: 14px; color: #2f6b28; }

.vhs-umfrage-ergebnis { margin-top: 18px; }
.vhs-umfrage-zeile { margin-bottom: 14px; }
.vhs-umfrage-zeile strong { display: block; font-size: 13.5px; margin-bottom: 4px; color: #333; }
.vhs-umfrage-balken { background: #f2f2f2; border-radius: 2px; overflow: hidden; }
.vhs-umfrage-balken span {
  display: block; padding: 3px 8px;
  font-size: 12.5px; font-style: italic; color: #3a3a3a;
  white-space: nowrap;
}
.vhs-umfrage-summe { font-size: 12px; color: #9a9a9c; margin: 10px 0 0; }

/* =============================================== Kopfzeilen der Seitenleisten-Kästen
   Die H3 der Kästen standen als graue Zeile (#f8f9fb) im hellen Kasten und
   waren kaum vom Inhalt zu unterscheiden. Jetzt orange mit weisser Schrift.

   Die Geometrie kommt vom Theme und bleibt: .uk-panel-box hat 30px Innenrand,
   und die Theme-Regel zieht den Kopf mit margin:-30px darueber hinaus. Hier
   wird nur die Farbe getauscht - eigene negative Raender haben den Balken
   vorher schmaler gemacht statt breiter.

   Zwei Selektoren, weil nicht jeder Kasten "uk-panel-header" traegt: die
   Theme-Regel dafuer ist spezifischer (0,3,0) und hat die erste Fassung
   ueberstimmt - der obere Kasten blieb grau, der untere wurde orange. */
.tm-sidebar-a .uk-panel-box.uk-panel-header .uk-panel-title,
.tm-sidebar-a .uk-panel-box .uk-panel-title {
  background-color: #e36b2a;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  padding: 13px 30px;
  margin: -30px -30px 30px;
  border-bottom: 0;
  border-radius: 0;
}
/* Der Infomaterial-Kasten hat keinen Rahmen - dort waere ein Balken fehl am Platz. */
.tm-sidebar-a .vhs-infomaterial .uk-panel-title {
  background: none; color: inherit; margin: 0; padding: 0;
}

/* Kennzahlen auf den Bundesland-Seiten: dieselbe Kachel wie auf der Startseite,
   nur mit Symbol darüber - vier Werte nebeneinander, darunter zwei je Zeile. */
.vhs-zahlen-land { grid-template-columns: repeat(4, 1fr); margin-top: 18px; }
.vhs-zahlen-land .vhs-zahl svg { color: #c8c8c8; margin-bottom: 4px; }
@media (max-width: 760px) { .vhs-zahlen-land { grid-template-columns: repeat(2, 1fr); } }