/* ================================================================
   ZENTRUM FÜR TANZ UND BEWEGUNG – styles.css
   ================================================================
   Gemeinsame CSS-Datei für:
     index.html
     anmeldung.html
     kurse_tanzimprovisation.html
     ws_koerperbewusstsein.html
     ws_tanzimprovisation.html
     ws_zeitgenoessisch.html
     danke.html

   Geltungsbereiche werden über Body-Klassen gesteuert:
     body.zt-home  → index.html
     body.zt-kurs  → kurse/ws-Seiten (Kurs-Layout mit Seitennavigation)
     body.zt-form  → anmeldung.html, danke.html

   Seitenspezifische Varianten über zusätzliche Body-Klassen:
     body.stripe-russet   → Headerleiste in Rostbraun (#934a21)
     body.stripe-koearb   → Headerleiste in (#571718)
     body.h1-medium       → Kleinere h1-Überschrift
     body.bg-gold         → Seitenhintergrund Goldgelb (#fbcc7d)
     body.bg-russet       → Seitenhintergrund Rostbraun (#ffedd4)
     body.bg-koearb     → Seitenhintergrund in (#571718)
     body.bg-darkred      → Seitenhintergrund Dunkelrot (#5c2835)
     body.bg-gray         → Seitenhintergrund Grau (#888)
     body.bg-j-uebrsicht  Seitenhintergrund Jahresübersicht (#af8f6b)
     body.bg-specials     Seitenhintergrund in (#9c6c3e)
================================================================ */

/* ================================================================
   1. RESET & BASIS (alle Seiten)
   ================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
  line-height: 1.5;
}

img { max-width: 100%; height: auto; display: block; }


/* ================================================================
   2. SKIP LINK (alle Seiten)
   ================================================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 4px;
  background: #880e4f;
  color: #fff;
  padding: 4px 8px;
  z-index: 100;
}
.skip-link:focus { left: 4px; }

/* Variante für Formular-Seiten */
body.zt-form .skip-link {
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background: #6a1a2e;
}
body.zt-form .skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 4px 8px;
}

/* ================================================================
   3. SEITEN-HINTERGRÜNDE (pro-Seite via Body-Klasse)
   ================================================================ */
body.bg-gold    { background: #fbcc7d; }
body.bg-russet  { background: #934a21; }
body.bg-darkred { background: #5c2835; }
body.bg-gray    { background: #888; }
body.bg-j-uebrsicht    { background: #af8f6b; }
body.bg-koearb    { background: #571718; }
body.bg-specials  { background: #9c6c3e; }


/* ================================================================
   LAYOUT A: KURS/WORKSHOP-SEITEN
   body.zt-kurs
   Verwendet von: kurse_tanzimprovisation.html,
                  ws_tanzimprovisation.html,
                  ws_koerperbewusstsein.html
   ================================================================ */


/* Seitenrahmen */
body.zt-kurs #page {
  max-width: 970px;
  margin: 0 auto;
  background: #ebe7e7;
  border: 1px solid #ccc;
}

/* Links */
body.zt-kurs a { text-decoration: none; color: #670000; }
body.zt-kurs a:hover { text-decoration: underline; color: #670000; }

/* Header */
body.zt-kurs #header {
  width: 100%;
  display: block;
  line-height: 0;
  position: relative;
}
body.zt-kurs #header a { display: block; }
body.zt-kurs #header img {
  width: 100%;
  height: auto;
  display: block;
}

/* Kopfleiste */
body.zt-kurs #headerleiste {
  width: 100%;
  height: 30px;
  background: #6c1714;
}
body.zt-kurs.stripe-russet #headerleiste { background: #934a21; }
body.zt-kurs.stripe-koearb #headerleiste { background: #571718; }

.headerleiste {
  font-size: 12pt;
  color: #fff;
  text-align: right;
  line-height: 30px;
  padding-right: 14px;
}

/* Flexbox-Layout: Inhalt links, Navigation rechts */
body.zt-kurs #layout {
  display: flex;
  align-items: flex-start;
}

/* ── Navigation (Seitenleiste rechts) ── */
body.zt-kurs #nav {
  width: 200px;
  min-width: 200px;
  flex-shrink: 0;
  order: 2;
  background: #ebe7e7;
  border-left: 1px solid #e0e0e0;
  padding-bottom: 20px;
}

body.zt-kurs #nav ul { list-style: none; padding: 0; margin: 0; }

body.zt-kurs #nav > ul > li { position: relative; }

body.zt-kurs #nav > ul > li > a,
body.zt-kurs #nav > ul > li > span {
  display: block;
  padding: 7px 10px;
  font-weight: bold;
  font-size: 12px;
  color: #000;
  background: #ebe7e7;
  border-bottom: 1px solid #eee;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}

body.zt-kurs #nav > ul > li.has-sub > a::after,
body.zt-kurs #nav > ul > li.has-sub > span::after {
  content: " \25B8";
  font-size: 9px;
  opacity: 0.5;
}

body.zt-kurs #nav > ul > li > a:hover,
body.zt-kurs #nav > ul > li > span:hover {
  background: #6c1714;
  color: #fff;
  text-decoration: none;
}

/* Aktiver Zustand: Untermenü ist per Klick geöffnet (siehe nav.js) */
body.zt-kurs #nav > ul > li.open > a,
body.zt-kurs #nav > ul > li.open > span {
  background: #6c1714;
  color: #fff;
}

body.zt-kurs #nav ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

/* Untermenü öffnet sich nur noch per Klick (Klasse .open, siehe nav.js),
   nicht mehr automatisch bei :hover - dadurch schließt es sich nicht
   mehr, während man mit der Maus zum Untermenü hinüberfährt. */
body.zt-kurs #nav > ul > li.open > ul { max-height: 400px; }

body.zt-kurs #nav ul ul li a {
  display: block;
  padding: 4px 10px 4px 20px;
  font-size: 11px;
  color: #624c18;
  background: #ebe7e7;
  line-height: 1.5;
}
body.zt-kurs #nav ul ul li a:hover {
  background: #ebe0ac;
  color: #000;
  text-decoration: none;
}

/* ── Hauptinhalt ── */
body.zt-kurs #mainContent {
  flex: 1;
  order: 1;
  padding: 18px 18px 24px 18px;
  font-size: 10pt;
  line-height: 1.45;
  background: #ebe7e7;
}

body.zt-kurs #mainContent h1 {
  font-family: 'Cafeta', sans-serif;
  font-size: 3.5em;
  letter-spacing: 3px;
  color: #880e4f;
  text-align: center;
  line-height: 1;
  margin-bottom: 0.6em;
  margin-top: 4px;
}

/* kleines event-icon für Veranstaltungen NICHT für Jahresübersicht */
.event-icon-ws {
  height: 45px;
  width: auto;
  vertical-align: middle;
  margin-right: 6px;
  display: inline;
}


body.zt-kurs.h1-medium #mainContent h1 {
  font-size: 3em;
  letter-spacing: 1px;
}

body.zt-kurs #mainContent h2 {
  font-size: 12pt;
  letter-spacing: 1px;
  color: #880e4f;
  line-height: 1.5;
  margin-bottom: 0.1em;
  margin-top: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── Event-Blöcke ── */
.event {
  margin-bottom: 2em;
  overflow: hidden;
}
/* ── Anfang Event-image test für Fortbildung, nur ein Bild (sonst zwei) ── */
          
  .event-images1 {
  float: left;
  margin: 0 16px 10px 8px;
  line-height: 0;
  display: flex;
  flex-wrap: nowrap;
  width: 300px;
  max-width: 100%;
}
/* ── Ende Event-image test für Fortbildung, nur ein Bild ── */

/* ──  Ein Bild zentrieren ── 
.zentriert {
  display: block;
  width: 300px;  oder z. B. max-width: 60%; 
  margin: 0 auto;
}── */

.event-images {
  float: left;
  margin: 0 16px 10px 8px;
  line-height: 0;
  display: flex;
  flex-wrap: nowrap;
  width: 300px;
  max-width: 100%;
}
.event-images img {
  height: 300px;
  max-height: 100%;
  object-fit: cover;
  display: block;
}
.event-images img:nth-child(1) { width: 14.2857%; }
.event-images img:nth-child(2) { width: 85.7143%; }

.event-text strong {
  font-size: 11pt;
  color: #880e4f;
  margin-bottom: 0.3em;
}

.event-meta {
  margin-top: 0.6em;
  font-size: 9.5pt;
  color: #333;
}
.event-meta span { margin-bottom: 0.2em; }
.event-meta .label {
  font-weight: bold;
  color: #880e4f;
}

.event-text ul {
  list-style: disc;
  margin-left: 22px;
  margin-top: 0.4em;
  margin-bottom: 0.4em;
  font-size: 10pt;
}
.event-text ul li { margin-bottom: 2px; }

/* Anmelde-Button */
body.zt-kurs a.btn-anmelden {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 14px;
  background: #880e4f;
  color: #fff;
  font-size: 10pt;
  border-radius: 2px;
  text-decoration: none;
}
body.zt-kurs a.btn-anmelden:hover {
  background: #670000;
  color: #fff;
  text-decoration: none;
}

/* ── Event-Blöcke: Umbruch, sobald die Spalte neben dem Bild eng wird ──
   Statt Bild (links, float) + Text (rechts, schmal gequetscht)
   wird gestapelt: Bild(er) oben → Überschrift (h2, inkl. Icon)
   direkt darunter → restlicher Text.
   Bild verliert den Float und rutscht dadurch in den normalen
   Textfluss - .event-text (mit h2 als erstem Kind) folgt direkt
   danach und steht so automatisch als GANZES unter dem Bild.

   Breakpoint bewusst bei 900px (nicht erst bei 600px wie das
   Hamburger-Menü): die rechte Seitennavigation (200px) ist bis
   600px sichtbar und frisst dem Textbereich neben dem 300px
   breiten Bild so viel Platz weg, dass die Überschrift dort in
   sehr schmaler Spalte mitten im Wort umbricht - ein Teil bliebe
   neben, ein Teil würde unter das Bild rutschen. Ab 900px ist
   auch mit sichtbarer Seitennav genug Platz für eine saubere
   Zwei-Spalten-Darstellung (siehe #page max-width: 970px).
   ================================================================ */
@media (max-width: 900px) {
  /* Bild verliert den Float und rutscht dadurch in den normalen
     Textfluss - .event-text (mit h2 als erstem Kind) folgt direkt
     danach und steht so automatisch unter dem Bild. Kein
     display:contents nötig -> keine Verschwinde-Bugs. */
  .event-images {
    float: none;
    width: 100%;
    max-width: 300px;   /* Format bleibt quadratisch, kein Zerren auf volle Breite */
    aspect-ratio: 1 / 1;
    margin: 0 0 12px 0;
  }
  .event-images img {
    height: 100%;        /* füllt die durch aspect-ratio quadratische Box */
  }

  /* h2 (Icon + Überschriftstext) sitzt als eigenständige
     "Bildunterschrift" direkt unter dem Bild */
  body.zt-kurs #mainContent h2 {
    margin-top: 0.2em;
  }

  /* Ohne den Float des Bildes würde der Text die komplette
     verfügbare Breite ausnutzen (auf Tablet-Breiten bis zu ~650px)
     - das macht sehr lange, unangenehm lesbare Zeilen. Deshalb
     bekommt der Textblock eine angenehme Lesebreite und bricht
     dadurch früher um. Auf echten Mobilgeräten ist der Container
     ohnehin schon schmaler als 60ch, dort greift das nicht ein. */
  .event-text {
    max-width: 60ch;
  }
}

/* Trennlinie zwischen Events */
.event-divider {
  border: none;
  border-top: 1px solid #670000;
  margin: 1.6em 0;
}

/* Nach-oben-Link */
.to-top {
  display: block;
  text-align: right;
  margin-top: 1em;
  font-size: 9pt;
  color: #880e4f;
}
.to-top:hover { color: #670000; }

/* Clearfix-Hilfsklasse */
.clearfix::after { content: ""; display: table; clear: both; }

/* ── Footer (Kurs/WS) ── */
body.zt-kurs #footer {
  width: 100%;
  border-top: 1px solid #ccc;
  padding: 10px 14px;
  font-size: 8pt;
  color: #000;
  text-align: left;
}
body.zt-kurs #footer a { color: #000; text-decoration: underline; }
body.zt-kurs #footer a:hover { color: #670000; }

/* ── Hamburger-Navigation (nur Mobilgeräte) ── */
.hamburger-toggle { display: none; }

.hamburger-label {
  display: none;
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 50;
  width: 38px;
  height: 38px;
  background: rgba(108, 23, 20, 0.85);
  border-radius: 4px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.hamburger-label span {
  display: block;
  width: 22px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
}

.mobile-nav { display: none; }

@media (max-width: 600px) {
  body.zt-kurs #nav { display: none; }
  .hamburger-label { display: flex; }
  body.zt-kurs #layout { display: block; }

  .mobile-nav {
    display: block;
    max-height: 0;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    transition: max-height 0.3s ease;
  }

  .hamburger-toggle:checked ~ .mobile-nav { max-height: 1000px; }

  .mobile-nav ul { list-style: none; }
  .mobile-nav > ul > li { border-bottom: 1px solid #eee; }

  .mobile-nav > ul > li > a,
  .mobile-nav > ul > li > span {
    display: block;
    padding: 10px 14px;
    font-weight: bold;
    font-size: 12px;
    color: #000;
    cursor: pointer;
  }

  .mobile-nav > ul > li > a:hover,
  .mobile-nav > ul > li > span:hover {
    background: #6c1714;
    color: #fff;
  }

  .mobile-nav ul ul { list-style: none; }

  .mobile-nav ul ul li a {
    display: block;
    padding: 8px 14px 8px 28px;
    font-size: 11px;
    color: #624c18;
    background: #faf8f0;
  }
  .mobile-nav ul ul li a:hover {
    background: #ebe0ac;
    color: #000;
  }
}

/* ── Monatstabelle (Jahresübersicht, z.B. monatsuebersicht.html) ──
   Zweispaltige Tabelle: Veranstaltungstitel | Zeiten.
   Ergänzung zu body.zt-kurs, ändert keine bestehende Regel. ── */
.month-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5em;
}

table.month-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

table.month-table th.month-heading {
  background: #6c1714;
  color: #fff;
  text-align: left;
  font-size: 11pt;
  letter-spacing: 1px;
  padding: 8px 12px;
  border: 1px solid #6c1714;
}

table.month-table td {
  vertical-align: top;
  padding: 10px 12px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 9.5pt;
}

table.month-table td.event-cell { width: 60%; }
table.month-table td.time-cell  { width: 40%; }

table.month-table tr:hover td { background: #fdf8ee; }

table.month-table .event-type {
  font-weight: bold;
  color: #7f0a0d;
}

table.month-table img.event-icon {
  height: 30px;
  width: auto;
  vertical-align: middle;
  margin-right: 4px;
  display: inline-block;
}

table.month-table a.event-title {
  color: #000;
}

table.month-table .event-desc {
  display: block;
  margin-top: 3px;
  color: #333;
}

table.month-table a.mehr-link {
  display: inline-block;
  margin-top: 4px;
  color: #880e4f;
  font-weight: bold;
}
table.month-table a.mehr-link:hover { color: #670000; }

@media (max-width: 600px) {
  table.month-table,
  table.month-table tbody,
  table.month-table tr,
  table.month-table td {
    display: block;
    width: 100%;
  }
  table.month-table th.month-heading { display: block; width: 100%; }
  table.month-table td.event-cell,
  table.month-table td.time-cell {
    width: 100%;
    border-bottom: none;
  }
  table.month-table td.time-cell {
    border-top: none;
    padding-top: 0;
  }
  table.month-table tr {
    margin-bottom: 4px;
    border: 1px solid #ddd;
  }
}

/* ================================================================
   LAYOUT B: FORMULAR-SEITEN
   body.zt-form
   Verwendet von: anmeldung.html, danke.html
   ================================================================ */

body.zt-form {
  font-size: 14px;
}

body.zt-form a { color: #6a1a2e; text-decoration: none; }
body.zt-form a:hover { text-decoration: underline; }

/* Seiten-Wrapper */
body.zt-form #wrapper {
  max-width: 960px;
  margin: 0 auto;
  background: #f8acbf;
}

/* Header */
body.zt-form #header { width: 100%; }
body.zt-form #header a img {
  display: block;
  width: 100%;
  height: auto;
}

/* Kopfleiste (Bild-Verlauf) */
body.zt-form #headerleiste {
  width: 100%;
  height: 6px;
  background: url('https://www.zentrumtanz.de/images/headerleiste.jpg') repeat-x;
}

/* ── Horizontale Navigation (anmeldung.html) ── */
body.zt-form #nav {
  background: #6a1a2e;
  padding: 0;
  position: relative;
}

body.zt-form #nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 14px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 200;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 48px;
  height: 48px;
}
body.zt-form #nav-toggle .bar {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
  transform-origin: center;
}
body.zt-form #nav.open #nav-toggle .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.zt-form #nav.open #nav-toggle .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.zt-form #nav.open #nav-toggle .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

body.zt-form #nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
body.zt-form #nav-menu > li { position: relative; }

body.zt-form #nav-menu > li > a,
body.zt-form #nav-menu > li > span {
  display: block;
  padding: 8px 12px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
body.zt-form #nav-menu > li > a:hover,
body.zt-form #nav-menu > li > span:hover {
  background: #8a2a4e;
  text-decoration: none;
}
body.zt-form #nav-menu > li > a.active { background: #8a2a4e; }

body.zt-form #nav-menu > li > span::after {
  content: ' \25BE';
  font-size: 10px;
  opacity: 0.7;
}

body.zt-form #nav-menu ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #6a1a2e;
  min-width: 240px;
  z-index: 1000;
  list-style: none;
  margin: 0;
  padding: 0;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.35);
}
body.zt-form #nav-menu > li:hover > ul { display: block; }

body.zt-form #nav-menu ul li a {
  display: block;
  padding: 7px 16px;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  border-top: 1px solid rgba(255,255,255,0.12);
}
body.zt-form #nav-menu ul li a:hover {
  background: #8a2a4e;
  text-decoration: none;
}

/* ── Inhaltsbereich ── */
body.zt-form #content-area { padding: 20px 20px 30px 20px; }

.headline-row-inner {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
}

body.zt-form #main-content { clear: both; }

body.zt-form #main-content h2 {
  font-size: 16px;
  color: #6a1a2e;
  margin: 20px 0 8px 0;
  border-bottom: 1px solid #ccc;
  padding-bottom: 4px;
}
body.zt-form #main-content p {
  margin: 0 0 10px 0;
  line-height: 1.5;
}

/* ── Formular ── */
.form-section {
  margin-top: 24px;
  border-top: 2px solid #6a1a2e;
  padding-top: 16px;
}
.form-section h3 {
  font-size: 15px;
  color: #6a1a2e;
  margin: 0 0 12px 0;
}

.quick-fill-bar {
  background: #f5f0f0;
  border: 1px solid #d4a0b0;
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.quick-fill-bar input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #6a1a2e;
}
.quick-fill-bar label {
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  color: #333;
}

.form-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  row-gap: 8px;
  column-gap: 10px;
  align-items: center;
  max-width: 620px;
}
.form-grid label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
}
.form-grid input[type="text"],
.form-grid input[type="email"],
.form-grid input[type="tel"],
.form-grid select,
.form-grid textarea {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid #aaa;
  border-radius: 3px;
  font-size: 13px;
  font-family: Arial, sans-serif;
  background: #fff;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  outline: 2px solid #6a1a2e;
  outline-offset: 1px;
}
.form-grid .required-star { color: #c00; }

.events-block { margin: 16px 0; }
.events-block h4 {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin: 0 0 6px 0;
}
.events-block select {
  width: 100%;
  max-width: 620px;
  padding: 6px 8px;
  border: 1px solid #aaa;
  border-radius: 3px;
  font-size: 13px;
  font-family: Arial, sans-serif;
}

.comment-block { margin: 16px 0; }
.comment-block label {
  display: block;
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 4px;
}
.comment-block textarea {
  width: 100%;
  max-width: 620px;
  height: 80px;
  padding: 6px 8px;
  border: 1px solid #aaa;
  border-radius: 3px;
  font-size: 13px;
  font-family: Arial, sans-serif;
  resize: vertical;
}

.source-block { margin: 16px 0; }
.source-block h4 {
  font-weight: bold;
  font-size: 13px;
  margin: 0 0 6px 0;
}
.source-block label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 20px;
  font-size: 13px;
  cursor: pointer;
}
.source-block input[type="checkbox"] { accent-color: #6a1a2e; }

.agb-block {
  margin: 16px 0;
  padding: 10px 14px;
  background: #fdf5f7;
  border: 1px solid #d4a0b0;
  border-radius: 4px;
  max-width: 620px;
}
.agb-block label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
  font-weight: bold;
}
.agb-block input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: #6a1a2e;
}
.agb-note {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
  padding-left: 28px;
}

/* CAPTCHA */
.captcha-block { margin: 16px 0; max-width: 620px; }
.captcha-block label {
  display: block;
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 6px;
}
.captcha-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.captcha-display {
  background: #f0f0f0;
  border: 1px solid #999;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 22px;
  font-family: 'Courier New', monospace;
  letter-spacing: 6px;
  font-weight: bold;
  color: #2a2a2a;
  user-select: none;
  min-width: 140px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.captcha-display::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg, transparent, transparent 3px,
    rgba(100,100,100,0.08) 3px, rgba(100,100,100,0.08) 4px
  );
}
.captcha-noise {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='50'%3E%3Cline x1='10' y1='25' x2='150' y2='22' stroke='%23999' stroke-width='0.5'/%3E%3Cline x1='5' y1='35' x2='155' y2='30' stroke='%23bbb' stroke-width='0.5'/%3E%3C/svg%3E");
}
.captcha-text { position: relative; z-index: 1; }
.captcha-reload {
  background: none;
  border: 1px solid #999;
  border-radius: 3px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  color: #555;
}
.captcha-reload:hover { background: #eee; }
.captcha-input {
  padding: 6px 10px;
  border: 1px solid #aaa;
  border-radius: 3px;
  font-size: 14px;
  width: 130px;
}

/* Fehler-Meldung */
.form-msg {
  display: none;
  padding: 12px 16px;
  border-radius: 4px;
  margin-top: 16px;
  font-size: 14px;
  max-width: 620px;
}
.form-msg.error {
  background: #fdecea;
  border: 1px solid #f44336;
  color: #b71c1c;
}

/* Absende-Buttons */
.btn-row { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn-submit {
  background: #6a1a2e;
  color: #fff;
  border: none;
  padding: 9px 24px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 3px;
  cursor: pointer;
}
.btn-submit:hover { background: #8a2a4e; }
.btn-reset {
  background: #999;
  color: #fff;
  border: none;
  padding: 9px 18px;
  font-size: 14px;
  border-radius: 3px;
  cursor: pointer;
}
.btn-reset:hover { background: #777; }

/* ── Danke-Box (danke.html) ── */
.danke-box {
  background: #fff;
  border: 2px solid #6a1a2e;
  border-radius: 6px;
  padding: 36px 40px;
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
}
.danke-box .icon {
  font-size: 52px;
  margin-bottom: 12px;
}
.danke-box h1 {
  font-size: 22px;
  color: #6a1a2e;
  margin: 0 0 16px 0;
}
.danke-box p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 12px 0;
  color: #333;
}
.danke-box .btn-back {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 28px;
  background: #6a1a2e;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border-radius: 3px;
  text-decoration: none;
}
.danke-box .btn-back:hover { background: #8a2a4e; }

/* ── Footer (Formular-Seiten) ── */
body.zt-form #footer {
  background: #6a1a2e;
  color: #fff;
  font-size: 12px;
  padding: 10px 20px;
  text-align: center;
}
body.zt-form #footer a { color: #f0c0cc; }
body.zt-form #footer a:hover { color: #fff; }

/* ── Responsive (Formular-Seiten) ── */
@media (max-width: 760px) {
  body.zt-form #nav-toggle { display: flex; }

  body.zt-form #nav::before {
    content: 'MEN\00DC';
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 14px 16px;
    line-height: 1;
  }

  body.zt-form #nav-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #6a1a2e;
    border-top: 1px solid rgba(255,255,255,0.2);
    max-height: calc(100vh - 50px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.zt-form #nav.open #nav-menu { display: flex; }

  body.zt-form #nav-menu > li {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  body.zt-form #nav-menu > li > a,
  body.zt-form #nav-menu > li > span {
    padding: 12px 18px;
    font-size: 13px;
    white-space: normal;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  body.zt-form #nav-menu > li > span::after {
    content: '\25BE';
    font-size: 11px;
    opacity: 0.7;
    transition: transform 0.25s;
  }
  body.zt-form #nav-menu > li.submenu-open > span::after { transform: rotate(-90deg); }

  body.zt-form #nav-menu ul {
    display: none;
    position: static;
    box-shadow: none;
    background: rgba(0,0,0,0.2);
    min-width: 0;
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  body.zt-form #nav-menu > li.submenu-open > ul { display: block; }
  body.zt-form #nav-menu > li:hover > ul { display: none; }
  body.zt-form #nav-menu > li.submenu-open:hover > ul { display: block; }
  body.zt-form #nav-menu ul li a {
    padding: 10px 28px;
    font-size: 12px;
    white-space: normal;
  }
}

@media (max-width: 680px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid label { margin-top: 6px; }
  .headline-row-inner { flex-direction: column; }
  body.zt-form #content-area { padding: 14px 12px 24px; }
}

@media (max-width: 600px) {
  body.zt-form #content-area { padding: 24px 16px 40px; }
  .danke-box { padding: 24px 20px; }
}


/* ================================================================
   LAYOUT C: STARTSEITE
   body.zt-home
   Verwendet von: index.html
   ================================================================ */

/* ── CSS-Variablen ── */
body.zt-home {
  --col-left-bg-top:    #1b191f;
  --col-left-bg-bot:    #ffcc66;
  --col-mid-bg-top:     #670000;
  --col-mid-bg-bot:     #330033;
  --col-right-bg:       #ff6600;
  --color-dunkelrot:    #670000;
  --color-nav-hover-bg: #ffffff;
  --color-nav-hover-tx: #670000;
  --color-white:        #ffffff;
  --color-footer-bg:    #4a1560;
  --color-footer-text:  #f0e6f6;
  --color-border-light: rgba(255,255,255,0.25);
  --font-ui:            Arial, Helvetica, sans-serif;
  --font-serif:         Georgia, 'Times New Roman', serif;
  --max-width:          980px;
  --w-left:             390px;
  --w-right:            180px;

  font-family: var(--font-ui);
  color: #333;
  line-height: 1.5;
}

body.zt-home a { color: var(--color-dunkelrot); text-decoration: none; }
body.zt-home a:hover,
body.zt-home a:focus { text-decoration: underline; color: #990000; }

body.zt-home h3 {
  color: var(--color-dunkelrot);
  font-family: var(--font-ui);
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}

/* ── Skip Link (Startseite) ── */
body.zt-home .skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background: #670000;
  padding: 0;
}
body.zt-home .skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  color: #fff;
  z-index: 9999;
  font-size: 1rem;
}

/* ── Banner mit Animation ── */
body.zt-home .zt-banner {
  position: relative;
  display: block;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  overflow: hidden;
  line-height: 0;
}
body.zt-home .zt-banner__img {
  width: 100%;
  height: auto;
  display: block;
}

body.zt-home .zt-anim {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  right: auto;
  width: 90%;
  text-align: center;
  pointer-events: none;
  line-height: 1;
}

body.zt-home .zt-anim__text {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: #660836;
  font-weight: bold;
  text-align: center;
  opacity: 0;
  font-size: clamp(0.75rem, 3.2vw, 1.5rem);
  line-height: 1.4;
}
body.zt-home .zt-anim__text--1 {
  animation: zt-fade 15s infinite;
  animation-delay: 0s;
}
body.zt-home .zt-anim__text--2 {
  animation: zt-fade 15s infinite;
  animation-delay: 5s;
}

@keyframes zt-fade {
   0%   { opacity: 0;   }
   2%   { opacity: 0.1; }
  10%   { opacity: 0.5; }
  25%   { opacity: 1.0; }
  50%   { opacity: 0.5; }
  75%   { opacity: 0.0; }
 100%   { opacity: 0.0; }
}

@media (prefers-reduced-motion: reduce) {
  body.zt-home .zt-anim__text { animation: none; opacity: 1; }
  body.zt-home .zt-anim__text--2 { top: 65%; }
}

@media (max-width: 300px) {
  body.zt-home .zt-banner { overflow: visible; }
  body.zt-home .zt-anim {
    position: relative;
    top: auto; left: auto; right: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 3.5em;
    padding: 0.5em 0;
  }
  body.zt-home .zt-anim__text {
    position: relative;
    top: auto; left: auto;
    transform: none;
    font-size: clamp(0.9rem, 4vw, 1.2rem);
  }
}

/* ── Seiten-Wrapper ── */
body.zt-home .site-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

/* ── Header ── */
body.zt-home .site-header { width: 100%; }
body.zt-home .site-header a.logo-link { display: block; }
body.zt-home .site-header .logo-img { width: 100%; height: auto; }
body.zt-home .header-bar {
  width: 100%;
  height: 10px;
  overflow: hidden;
  background: #4a1560;
}
body.zt-home .header-bar img { width: 100%; height: 10px; object-fit: cover; }

/* ── 3-Spalten-Layout ── */
body.zt-home .page-body {
  display: grid;
  grid-template-columns: var(--w-left) 1fr var(--w-right);
  grid-template-rows: auto;
  align-items: stretch;
  min-height: 600px;
}

/* ── Spalte 1: Links ── */
body.zt-home .col-left { display: flex; flex-direction: column; height: 100%; }

body.zt-home .col-left-top {
  background-color: var(--col-left-bg-top);
  padding: 0 0 1rem 0;
  flex-shrink: 0;
}
body.zt-home .col-left-top .intro-img { width: 100%; height: auto; display: block; }
body.zt-home .col-left-top .intro-text {
  padding: 0.7rem 0.8rem 0;
  color: #e8d5b0;
  font-family: var(--font-ui);
  font-size: 0.83rem;
  line-height: 1.55;
}
body.zt-home .col-left-top .intro-text p { margin-bottom: 0.5rem; }
body.zt-home .col-left-top .intro-text .signatur { margin-top: 0.6rem; font-style: italic; color: #ffcc88; }

body.zt-home .col-left-bot {
  background-color: var(--col-left-bg-bot);
  padding: 0 0 0.5rem 0;
}
body.zt-home .col-left-bot .raum-img { width: 100%; height: auto; display: block; }
body.zt-home .col-left-bot .raum-content {
  padding: 0.6rem 0.8rem;
  font-size: 0.83rem;
  color: #3a0000;
}
body.zt-home .col-left-bot .raum-content h3 {
  color: var(--color-dunkelrot);
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.zt-home .col-left-bot .raum-content p { margin-bottom: 0.4rem; }
body.zt-home .col-left-bot .raum-content a { color: var(--color-dunkelrot); font-weight: bold; }

/* Kooperationen */
body.zt-home .partner-section {
  background-color: var(--col-left-bg-bot);
  padding: 0 0.6rem 1rem 0.6rem;
  border-top: 2px solid #cc9900;
}
body.zt-home .partner-section h3 {
  color: var(--color-dunkelrot);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
}

/* Instagram-Zeile */
body.zt-home .instagram-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: #3a0000;
}
body.zt-home .instagram-row img { width: 28px; height: 28px; flex-shrink: 0; }
body.zt-home .instagram-row a { color: var(--color-dunkelrot); font-weight: bold; }

/* Partner-Logos */
body.zt-home .partner-logos {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin-bottom: 0.5rem;
}
body.zt-home .partner-logos a {
  display: flex;
  align-items: center;
  justify-content: center;
}
body.zt-home .partner-logos a span {
  font-size: 0.67rem;
  color: var(--color-dunkelrot);
  text-align: center;
  line-height: 1.2;
  font-weight: bold;
}

body.zt-home .partner-single {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
}
body.zt-home .partner-single img { max-height: 60px; width: auto; }
body.zt-home .partner-single span { font-size: 0.67rem; color: var(--color-dunkelrot); font-weight: bold; text-align: center; }

/* TanzSoli */
body.zt-home .tanzsoli-section {
  background-color: var(--col-left-bg-bot);
  padding: 0 0.8rem 1rem 0.8rem;
  border-top: 2px solid #cc9900;
  font-size: 0.81rem;
  color: var(--color-dunkelrot);
  flex-grow: 1;
}
body.zt-home .tanzsoli-section h3 {
  color: var(--color-dunkelrot);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
  padding-top: 0.5rem;
}
body.zt-home .tanzsoli-section p { margin-bottom: 0.35rem; line-height: 1.4; }

/* ── Spalte 2: Mitte ── */
body.zt-home .col-mid {
  display: flex;
  flex-direction: column;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

body.zt-home .col-mid-top {
  background-color: var(--col-mid-bg-top);
  color: var(--color-white);
  padding: 0.8rem 0.9rem;
  flex-shrink: 0;
}

body.zt-home .video-wrap { margin-bottom: 0.6rem; }
body.zt-home .video-wrap video {
  width: 100%;
  display: block;
  border: 1px solid rgba(255,255,255,0.2);
  background: #000;
}
body.zt-home .video-wrap + .video-wrap { margin-top: 0.5rem; }

body.zt-home .manda-text {
  text-align: center;
  font-size: 0.82rem;
  margin: 0.5rem 0 0.6rem;
  line-height: 1.4;
}
body.zt-home .manda-text strong { font-size: 0.95rem; display: block; margin-bottom: 0.2rem; }

body.zt-home .mid-hr {
  border: none;
  border-top: 1px solid #ffffff;
  margin: 0.6rem 0;
}

body.zt-home .aktuelles-head {
  font-size: 1rem;
  font-family: var(--font-ui);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.2rem;
}

body.zt-home .news {
  background-color: #ffcc66;
  line-height: 1.5em;
  padding: 0.5em;
  text-align: center;
  color: #670000;
}

body.zt-home .ausfall {
  font-size: 1rem;
  font-weight: bold;
  text-align: right;
  color: #ffcc88;
}

body.zt-home .stand-text {
  text-align: right;
  font-size: 0.74rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.2;
  font-weight: bold;
  margin-bottom: 0.6rem;
}

/* Kursblöcke in der Mittelspalte */
body.zt-home .kurs-block {
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding: 0.45rem 0;
  font-size: 0.8rem;
  color: #f0d0d0;
}
body.zt-home .kurs-block:last-of-type { border-bottom: none; }
body.zt-home .kurs-block h4 {
  font-size: 0.82rem;
  color: #ffffff;
  font-family: var(--font-ui);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.1rem;
}
body.zt-home .kurs-block .kurs-meta {
  font-size: 0.81rem;
  color: rgba(255,255,255,0.65);
  margin: 0.05rem 0;
}
body.zt-home .kurs-block strong { color: #ffcc88; }
body.zt-home .kurs-block a.btn-mehr { font-size: 0.81rem; color: #ffbbbb; font-weight: bold; }
body.zt-home .kurs-block a.btn-mehr:hover { color: #ffffff; }

/* Tanzbibliothek + Blog */
body.zt-home .bibliothek-block {
  padding: 0.6rem 0 0;
  font-size: 0.8rem;
  color: #f0d0d0;
}
body.zt-home .bibliothek-block p { margin-bottom: 0.3rem; }
body.zt-home .bibliothek-block .blog-entry {
  background: rgba(0,0,0,0.2);
  border-left: 3px solid rgba(255,255,255,0.4);
  padding: 0.4rem 0.6rem;
  margin-top: 0.4rem;
  font-size: 0.77rem;
}
body.zt-home .bibliothek-block .blog-entry strong {
  display: block;
  color: #ffffff;
  font-size: 0.8rem;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.zt-home .bibliothek-block a { color: #ffbbbb; }
body.zt-home .bibliothek-block a:hover { color: #ffffff; }

/* Akademie-Bereich (Mittelspalte unten) */
body.zt-home .col-mid-bot {
  background-color: var(--col-mid-bg-bot);
  color: #e8c8e8;
  padding: 0.9rem 0.9rem 1.2rem;
  flex-grow: 1;
}
body.zt-home .col-mid-bot h2 {
  font-size: 0.955rem;
  color: #ffffff;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding-bottom: 0.3rem;
}
body.zt-home .col-mid-bot h2 a { color: #e8aaff; }
body.zt-home .col-mid-bot h2 a:hover { color: #ffffff; }
body.zt-home .col-mid-bot h3 { color: #e8aaff; font-size: 0.88rem; margin: 0.7rem 0 0.2rem; }
body.zt-home .col-mid-bot p { font-size: 0.8rem; line-height: 1.5; margin-bottom: 0.35rem; color: #e0c0e0; }
body.zt-home .col-mid-bot a { color: #ffbbff; }
body.zt-home .col-mid-bot a:hover { color: #ffffff; }
body.zt-home .col-mid-bot strong { color: #ffffff; }

/* ── Spalte 3: Rechts (Navigation) ── */
body.zt-home .col-right {
  background-color: var(--col-right-bg);
  display: flex;
  flex-direction: column;
}

body.zt-home .nl-box {
  padding: 0.6rem 0.6rem 0.5rem;
  border-bottom: 2px solid rgba(0,0,0,0.15);
}
body.zt-home .nl-box a.nl-img-link { display: block; margin-bottom: 0.4rem; }
body.zt-home .nl-box img {
  width: 100%;
  max-width: 120px;
  margin: 0 auto;
  border: 1px solid rgba(0,0,0,0.2);
}
body.zt-home .nl-box p { font-size: 0.74rem; color: #fff; line-height: 1.4; text-align: center; }
body.zt-home .nl-box a { color: #fff; font-weight: bold; text-decoration: underline; }
body.zt-home .nl-box a:hover { color: #3a0000; }

body.zt-home .col-right nav { flex-grow: 1; }
body.zt-home .col-right nav ul { list-style: none; padding: 0; margin: 0; }
body.zt-home .col-right nav ul li { border-bottom: 1px solid rgba(0,0,0,0.12); }
body.zt-home .col-right nav ul li a {
  display: block;
  padding: 0.55rem 0.7rem;
  color: #ffffff;
  font-family: var(--font-ui);
  font-size: 0.83rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
}
body.zt-home .col-right nav ul li a:hover,
body.zt-home .col-right nav ul li a:focus {
  background-color: var(--color-nav-hover-bg);
  color: var(--color-nav-hover-tx);
  text-decoration: none;
}

/* ── Footer (Startseite) ── */
body.zt-home .site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  text-align: center;
  padding: 0.85rem 1.2rem;
  font-family: var(--font-ui);
  font-size: 0.83rem;
  line-height: 1.5;
}
body.zt-home .site-footer a { color: #d4a0f0; }
body.zt-home .site-footer a:hover { color: #ffffff; }

/* ── Hamburger-Menü (Startseite) ── */
body.zt-home .hamburger-btn {
  display: none;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000;
  background-color: var(--col-right-bg);
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 5px;
  padding: 6px 10px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  transition: background-color 0.2s;
}
body.zt-home .hamburger-btn:hover { background-color: #e05500; }
body.zt-home .hamburger-btn .bar {
  display: block;
  width: 24px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
body.zt-home .hamburger-btn.open .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.zt-home .hamburger-btn.open .bar:nth-child(2) { opacity: 0; }
body.zt-home .hamburger-btn.open .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

body.zt-home .nav-drawer {
  display: none;
  position: fixed;
  top: 0; right: 0;
  width: 220px;
  height: 100%;
  z-index: 999;
  background-color: var(--col-right-bg);
  flex-direction: column;
  overflow-y: auto;
  box-shadow: -4px 0 16px rgba(0,0,0,0.4);
  transform: translateX(100%);
  transition: transform 0.28s ease;
}
body.zt-home .nav-drawer.open { transform: translateX(0); }

body.zt-home .nav-drawer-close {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 0.7rem 0;
}
body.zt-home .nav-drawer-close button {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
body.zt-home .nav-drawer-close button:hover { color: #670000; }

body.zt-home .nav-drawer .nl-box { padding: 0.6rem; border-bottom: 2px solid rgba(0,0,0,0.15); }
body.zt-home .nav-drawer .nl-box img { max-width: 100px; margin: 0 auto 0.4rem; }

body.zt-home .nav-drawer nav ul { list-style: none; padding: 0; margin: 0; }
body.zt-home .nav-drawer nav ul li { border-bottom: 1px solid rgba(0,0,0,0.12); }
body.zt-home .nav-drawer nav ul li a {
  display: block;
  padding: 0.65rem 1rem;
  color: #ffffff;
  font-family: var(--font-ui);
  font-size: 0.955rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
body.zt-home .nav-drawer nav ul li a:hover,
body.zt-home .nav-drawer nav ul li a:focus {
  background-color: #ffffff;
  color: #670000;
  text-decoration: none;
}

body.zt-home .nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 998;
}
body.zt-home .nav-overlay.open { display: block; }

/* ── Responsive (Startseite) ── */
@media (max-width: 768px) {
  body.zt-home .col-right { display: none; }
  body.zt-home .page-body { grid-template-columns: 1fr 1fr; }
  body.zt-home .hamburger-btn { display: flex; }
}

@media (max-width: 540px) {
  body.zt-home .page-body { grid-template-columns: 1fr; }
  body.zt-home .col-mid  { order: 1; border: none; }
  body.zt-home .col-left { order: 2; }
  body.zt-home .col-left-top .intro-text { font-size: 0.88rem; }
  body.zt-home .kurs-block h4 { font-size: 0.88rem; }
  body.zt-home .partner-logos { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================================
   ERGÄNZUNG: body.zt-grundlagen (akademie_grundlagen.html)
   Nutzt Basis-Layout body.zt-kurs (Kopf, Navigation rechts,
   Hamburger-Menü, Seitengröße 970px, Umbruch bei 600px) und
   ergänzt NUR seitenspezifische Regeln. Es wird keine bestehende
   Regel verändert oder überschrieben, damit alle anderen Seiten,
   die styles.css einbinden, unverändert bleiben.
   ================================================================ */

/* Hauptbereich dieser Seite bleibt weiß statt Standard-Grau */
body.zt-grundlagen #mainContent {
  background: #fff;
}

/* ── Zwei-Spalten-Inhalt: Video oben, darunter linke/rechte Spalte ── */
.gl-content {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
}

/* Video erscheint immer oben, über beiden Spalten */
.gl-video {
  order: 1;
  width: 100%;
  margin-bottom: 1.6em;
}

.gl-video video {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border-radius: 4px;
}

/* Linke Spalte (Logo, Förderprogramm, Info-Box) */
.gl-col-left {
  order: 2;
  flex: 1 1 320px;
  min-width: 260px;
}

/* Rechte Spalte (Grundlagenausbildung, Curriculum, Termine) */
.gl-col-right {
  order: 3;
  flex: 1 1 380px;
  min-width: 260px;
}

/* Info-Box (ehem. .style_info) */
.gl-info-box {
  background-color: #DEDDDD;
  padding: 10px 14px;
  border-radius: 4px;
  margin-top: 1.6em;
}

/* Förderprogramm-Hinweis */
.gl-promo {
  text-align: center;
  color: #880e4f;
  font-size: 1.3em;
  line-height: 1.3;
  margin-bottom: 0.3em;
}
.gl-promo-link {
  text-align: center;
  font-size: 1.2em;
  margin-bottom: 1.2em;
}

/* Rote/fette Hervorhebungen (ehem. .Stil2 / .Stil3) */
.gl-red-bold { color: #cc0000; font-weight: bold; }

/* Trennlinie GTP12 / GTP13 */
.gl-divider {
  border: none;
  border-top: 1px solid #880e4f;
  width: 30%;
  margin: 1.5em 0;
}

/* ── Umbruch: linke Spalte wird einspaltig ans Ende verschoben,
   Video bleibt oben, rechte Spalte rückt davor ── */
@media (max-width: 600px) {
  /* display:flex bleibt erhalten (nicht display:block!), da "order"
     nur innerhalb von Flex-/Grid-Containern wirkt. */
  .gl-content    { display: flex; flex-direction: column; }
  .gl-video      { order: 1; margin-bottom: 1.4em; }
  .gl-col-right  { order: 2; margin-bottom: 1.6em; }
  .gl-col-left   { order: 3; margin-bottom: 0; }
}

/* Ergänzende Formatierungen */
/* Text zentrieren */
.center {
  text-align: center;
}

/* Textfarbe black */
.co-black {
  color: black !important;
}

/* ================================================================
   LAYOUT B2: FOTOGALERIE
   body.zt-form.zt-galerie
   Verwendet von: galerie.html
   ----------------------------------------------------------------
   Ergänzung zu Layout B (zt-form): Header, horizontale Navigation,
   Wrapper und Footer werden unverändert von body.zt-form übernommen.
   Alle Regeln hier greifen NUR mit body.zt-galerie – bestehende
   Seiten sind davon nicht betroffen.
   ================================================================ */

body.zt-galerie {
  --gal-rot:        #6a1a2e;   /* Navigation / Footer */
  --gal-rot-hell:   #8a2a4e;   /* Hover / aktiv        */
  --gal-weinrot:    #5c2835;   /* Seitenhintergrund    */
  --gal-rosa:       #f8acbf;   /* Wrapper-Hintergrund  */
  --gal-karte:      #fdf0f3;   /* Themen-Karten        */
  --gal-schatten:   0 2px 12px rgba(92, 40, 53, 0.18);
  --gal-leiste-h:   56px;      /* wird per JS an die echte Höhe angepasst */
}

/* ── Kopfbereich: Überschrift + Archiv ── */
body.zt-galerie .gal-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  margin-bottom: 20px;
}

body.zt-galerie .gal-intro-text h1 { margin: 0 0 10px; line-height: 1; }
body.zt-galerie .gal-intro-text h1 img { max-width: 324px; width: 100%; }

body.zt-galerie .gal-zeitraum {
  display: inline-block;
  background: var(--gal-rot);
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}

body.zt-galerie #main-content .gal-intro-text p {
  font-size: 15px;
  color: #3a1520;
  margin: 0 0 8px;
}

body.zt-galerie .gal-archiv {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: var(--gal-schatten);
}

body.zt-galerie #main-content .gal-archiv h2 {
  font-size: 15px;
  color: var(--gal-rot);
  margin: 0 0 10px;
  padding: 0;
  border: none;
}

body.zt-galerie .gal-archiv ul {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.zt-galerie .gal-archiv ul a {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--gal-rot);
  border-radius: 999px;
  font-size: 13px;
  font-weight: bold;
  color: var(--gal-rot);
  background: #fff;
  transition: background 0.2s, color 0.2s;
}
body.zt-galerie .gal-archiv ul a:hover,
body.zt-galerie .gal-archiv ul a:focus-visible {
  background: var(--gal-rot);
  color: #fff;
  text-decoration: none;
}

body.zt-galerie .gal-filme-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(106, 26, 46, 0.2);
  font-size: 13px;
  font-weight: bold;
}
body.zt-galerie .gal-filme-link img { max-width: 220px; width: 60%; }

/* ── Themen-Leiste (bleibt beim Scrollen oben stehen) ── */
body.zt-galerie .gal-themen {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0 -20px 22px;
  padding: 10px 20px;
  background: var(--gal-rot);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

body.zt-galerie .gal-themen ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.zt-galerie .gal-themen a {
  display: block;
  white-space: nowrap;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
body.zt-galerie .gal-themen a:hover,
body.zt-galerie .gal-themen a:focus-visible,
body.zt-galerie .gal-themen a.is-active {
  background: #fff;
  border-color: #fff;
  color: var(--gal-rot);
  text-decoration: none;
}
body.zt-galerie .gal-themen a .gal-anzahl {
  font-weight: normal;
  opacity: 0.75;
  margin-left: 3px;
}

/* ── Themen-Karten ── */
body.zt-galerie .gal-thema {
  background: var(--gal-karte);
  border-radius: 12px;
  padding: 18px 20px 20px;
  margin-bottom: 24px;
  box-shadow: var(--gal-schatten);
  border-top: 4px solid var(--gal-rot);
  scroll-margin-top: calc(var(--gal-leiste-h) + 14px);
}

body.zt-galerie .gal-thema-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 4px;
}

body.zt-galerie #main-content .gal-thema h2 {
  flex: 1 1 auto;
  font-size: 20px;
  line-height: 1.25;
  color: var(--gal-rot);
  margin: 0;
  padding: 0;
  border: none;
}

body.zt-galerie .gal-meta {
  font-size: 12px;
  color: #7a4a56;
  white-space: nowrap;
}

body.zt-galerie #main-content .gal-monat h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gal-rot-hell);
}
body.zt-galerie #main-content .gal-monat h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(106, 26, 46, 0.25);
}

/* ── Bilder-Raster (Masonry über CSS-Spalten, Bilder bleiben unbeschnitten) ── */
body.zt-galerie .gal-raster {
  columns: 4 180px;
  column-gap: 10px;
}
body.zt-galerie .gal-raster[data-anzahl="1"] { columns: 1; max-width: 420px; }
body.zt-galerie .gal-raster[data-anzahl="2"] { columns: 2 180px; max-width: 640px; }
body.zt-galerie .gal-raster[data-anzahl="3"] { columns: 3 180px; }

body.zt-galerie a.gal-bild {
  position: relative;
  display: block;
  margin: 0 0 10px;
  break-inside: avoid;
  border-radius: 6px;
  overflow: hidden;
  background: #ecc6d0;
  box-shadow: 0 1px 4px rgba(92, 40, 53, 0.2);
}

body.zt-galerie a.gal-bild img {
  width: 100%;
  height: auto;
  transition: transform 0.4s ease, filter 0.4s ease;
}

/* Lupen-Symbol beim Überfahren */
body.zt-galerie a.gal-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-5-5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 34px no-repeat,
    linear-gradient(to top, rgba(92, 40, 53, 0.55), rgba(92, 40, 53, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}
body.zt-galerie a.gal-bild:hover img,
body.zt-galerie a.gal-bild:focus-visible img { transform: scale(1.04); }
body.zt-galerie a.gal-bild:hover::after,
body.zt-galerie a.gal-bild:focus-visible::after { opacity: 1; }
body.zt-galerie a.gal-bild:focus-visible {
  outline: 3px solid var(--gal-rot);
  outline-offset: 2px;
}

body.zt-galerie .gal-bildtext {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 16px 8px 6px;
  font-size: 11px;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
}

/* ── Videos ── */
body.zt-galerie .gal-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
body.zt-galerie .gal-videos video {
  display: block;
  width: 100%;
  max-height: 360px;
  border-radius: 6px;
  background: #000;
}

/* ── Nach-oben-Link in den Karten ── */
body.zt-galerie .gal-nach-oben-link {
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}

/* ── Schwebender Nach-oben-Button ── */
body.zt-galerie .gal-nach-oben {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--gal-rot);
  color: #fff;
  font-size: 20px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s, background 0.2s;
}
body.zt-galerie .gal-nach-oben.sichtbar {
  opacity: 1;
  visibility: visible;
  transform: none;
}
body.zt-galerie .gal-nach-oben:hover,
body.zt-galerie .gal-nach-oben:focus-visible { background: var(--gal-rot-hell); }

/* ── Lightbox (natives <dialog>) ── */
body.zt-galerie .gal-lightbox {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: #fff;
  overflow: hidden;
}
body.zt-galerie .gal-lightbox[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
body.zt-galerie .gal-lightbox::backdrop { background: rgba(35, 10, 17, 0.94); }

body.zt-galerie .gal-lb-figur {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 92vw;
}
body.zt-galerie .gal-lb-figur img {
  width: auto;
  height: min(76vh, 600px);
  max-width: 92vw;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  background: #1a0509;
}
body.zt-galerie .gal-lb-text {
  margin-top: 12px;
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
}
body.zt-galerie .gal-lb-text strong { color: var(--gal-rosa); }
body.zt-galerie .gal-lb-zaehler {
  display: block;
  font-size: 12px;
  opacity: 0.7;
  margin-top: 2px;
}

body.zt-galerie .gal-lb-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}
body.zt-galerie .gal-lb-btn:hover,
body.zt-galerie .gal-lb-btn:focus-visible {
  background: var(--gal-rot-hell);
  outline: none;
}
body.zt-galerie .gal-lb-zu     { top: 14px; right: 14px; }
body.zt-galerie .gal-lb-zurueck { left: 14px; top: 50%; transform: translateY(-50%); }
body.zt-galerie .gal-lb-weiter  { right: 14px; top: 50%; transform: translateY(-50%); }

/* ── Responsive (Galerie) ── */
@media (max-width: 760px) {
  body.zt-galerie .gal-intro { grid-template-columns: 1fr; }
  body.zt-galerie .gal-themen ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  body.zt-galerie .gal-themen ul::-webkit-scrollbar { display: none; }
  body.zt-galerie .gal-lb-zurueck,
  body.zt-galerie .gal-lb-weiter { top: auto; bottom: 16px; transform: none; }
  body.zt-galerie .gal-lb-figur img { height: auto; max-height: 72vh; }
}

@media (max-width: 680px) {
  body.zt-galerie .gal-themen { margin: 0 -12px 18px; padding: 8px 12px; }
  body.zt-galerie .gal-thema { padding: 14px 12px 14px; }
  body.zt-galerie #main-content .gal-thema h2 { font-size: 18px; }
  body.zt-galerie .gal-raster,
  body.zt-galerie .gal-raster[data-anzahl="3"] { columns: 2; column-gap: 8px; }
  body.zt-galerie a.gal-bild { margin-bottom: 8px; }
}

@media (max-width: 600px) {
  body.zt-galerie .gal-themen { margin: 0 -16px 18px; padding: 8px 16px; }
}

@media (max-width: 360px) {
  body.zt-galerie .gal-raster,
  body.zt-galerie .gal-raster[data-anzahl="2"],
  body.zt-galerie .gal-raster[data-anzahl="3"] { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body.zt-galerie a.gal-bild img,
  body.zt-galerie a.gal-bild::after,
  body.zt-galerie .gal-nach-oben { transition: none; }
  body.zt-galerie a.gal-bild:hover img,
  body.zt-galerie a.gal-bild:focus-visible img { transform: none; }
}
/* ── Text-Überschriften statt headline_*.png (Galerie) ── */
body.zt-galerie .gal-headline {
  font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  font-stretch: condensed;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.1;
  color: var(--gal-rot);
}
body.zt-galerie h1.gal-headline {
  font-size: 40px;
  margin: 0 0 12px;
}
body.zt-galerie .gal-filme-link .gal-headline { font-size: 24px; }
body.zt-galerie .gal-filme-link .gal-pfeil { font-size: 20px; color: var(--gal-rot); }
body.zt-galerie .gal-filme-link:hover { text-decoration: none; }
body.zt-galerie .gal-filme-link:hover .gal-headline { text-decoration: underline; }
@media (max-width: 680px) {
  body.zt-galerie h1.gal-headline { font-size: 32px; }
}
/* ── Untertitel / Hinweise (z. B. Fotografen) unter Themen-Überschriften ── */
body.zt-galerie #main-content p.gal-untertitel {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: bold;
  color: var(--gal-rot-hell);
}
body.zt-galerie #main-content p.gal-hinweis {
  margin: 4px 0 0;
  font-size: 12px;
  font-style: italic;
  color: #7a4a56;
}

/* Abstand, wenn ein Thema keine Monats-Zwischenüberschrift hat */
body.zt-galerie .gal-monat > .gal-raster:first-child,
body.zt-galerie .gal-monat > .gal-videos:first-child { margin-top: 14px; }

/* Ort rechts neben der Monats-Überschrift, Linie dazwischen:
   <h3><span>Monat Jahr</span> <span class="gal-ort">Ort</span></h3> */
body.zt-galerie #main-content .gal-monat h3 .gal-ort {
  order: 2;
  text-align: right;
  font-weight: bold;
  color: var(--gal-rot-hell);
}
body.zt-galerie #main-content .gal-monat h3:has(.gal-ort)::after { order: 1; min-width: 20px; }
@media (max-width: 480px) {
  body.zt-galerie #main-content .gal-monat h3:has(.gal-ort) { flex-wrap: wrap; row-gap: 2px; }
  body.zt-galerie #main-content .gal-monat h3 .gal-ort { margin-left: auto; }
}

/* ── Ende LAYOUT B2: FOTOGALERIE ── */

/* ================================================================
   LAYOUT B3: VIDEOS / AUDIOS
   body.zt-form.zt-galerie.zt-filme
   Verwendet von: filme.html
   ----------------------------------------------------------------
   Baut auf LAYOUT B2 (Fotogalerie) auf: Kopfbereich, Themen-Leiste,
   Themen-Karten und Nach-oben-Button kommen unverändert von dort.
   Hier nur die Karten für einzelne Videos und Audios.
   ================================================================ */

body.zt-filme .film-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
body.zt-filme .gal-monat .film-raster { margin-top: 0; }

body.zt-filme .film-karte {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(92, 40, 53, 0.2);
  scroll-margin-top: calc(var(--gal-leiste-h) + 14px);
  transition: box-shadow 0.25s ease;
}
body.zt-filme .film-karte.spielt {
  box-shadow: 0 0 0 3px var(--gal-rot-hell), 0 4px 14px rgba(92, 40, 53, 0.3);
}

/* ── Video-Fläche: einheitlich 16:9, Hoch- und Querformat bleiben unbeschnitten ── */
body.zt-filme .film-medium {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  background: #1a0509;
}
body.zt-filme .film-medium video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #1a0509;
}
/* helle Fläche für Logo-Vorschaubilder (Imagefilme) */
body.zt-filme .film-medium--hell,
body.zt-filme .film-medium--hell video { background: #fff; }
body.zt-filme .film-medium--hell { border-bottom: 1px solid rgba(106, 26, 46, 0.12); }

/* ── Audio-Fläche ── */
body.zt-filme .film-medium--audio {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  padding: 16px 14px 14px;
  overflow: visible;
  background: linear-gradient(135deg, var(--gal-rot) 0%, var(--gal-rot-hell) 100%);
}
body.zt-filme .film-audio-symbol {
  flex: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' fill='white'%3E%3Crect x='2' y='16' width='4' height='8' rx='2'/%3E%3Crect x='10' y='11' width='4' height='18' rx='2'/%3E%3Crect x='18' y='5' width='4' height='30' rx='2'/%3E%3Crect x='26' y='13' width='4' height='14' rx='2'/%3E%3Crect x='34' y='8' width='4' height='24' rx='2'/%3E%3Crect x='42' y='2' width='4' height='36' rx='2'/%3E%3Crect x='50' y='10' width='4' height='20' rx='2'/%3E%3Crect x='58' y='15' width='4' height='10' rx='2'/%3E%3Crect x='66' y='6' width='4' height='28' rx='2'/%3E%3Crect x='74' y='12' width='4' height='16' rx='2'/%3E%3Crect x='82' y='4' width='4' height='32' rx='2'/%3E%3Crect x='90' y='11' width='4' height='18' rx='2'/%3E%3Crect x='98' y='16' width='4' height='8' rx='2'/%3E%3Crect x='106' y='9' width='4' height='22' rx='2'/%3E%3Crect x='114' y='15' width='4' height='10' rx='2'/%3E%3C/svg%3E") center / min(70%, 220px) auto no-repeat;
  opacity: 0.55;
}
body.zt-filme .film-medium--audio audio {
  display: block;
  width: 100%;
  height: 40px;
}

/* ── Text unter dem Medium ── */
body.zt-filme .film-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 14px;
}
body.zt-filme .film-reihe {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gal-rot-hell);
}
body.zt-filme #main-content h3.film-titel {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 16px;
  line-height: 1.3;
  font-weight: bold;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gal-rot);
}
body.zt-filme #main-content h3.film-titel::after { content: none; }
body.zt-filme #main-content p.film-untertitel {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #3a1520;
}
body.zt-filme .film-angaben {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
}
body.zt-filme .film-angaben dt {
  font-weight: bold;
  color: #7a4a56;
}
body.zt-filme .film-angaben dd {
  margin: 0;
  color: #3a1520;
}
body.zt-filme .film-fuss {
  margin-top: auto;
  padding-top: 10px;
}
body.zt-filme .film-chip {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid rgba(106, 26, 46, 0.25);
  border-radius: 999px;
  background: var(--gal-karte);
  font-size: 11px;
  font-weight: bold;
  color: var(--gal-rot);
}

/* Unterzeile direkt unter dem Themen-Kopf */
body.zt-filme .gal-thema > p.gal-untertitel { margin-bottom: 2px; }

@media (max-width: 680px) {
  body.zt-filme .film-raster { grid-template-columns: 1fr; gap: 12px; }
  body.zt-filme #main-content h3.film-titel { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  body.zt-filme .film-karte { transition: none; }
}

/* ── Ende LAYOUT B3: VIDEOS / AUDIOS ── */