/* Zeichenfabrik -- gemeinsame Basis (Header/Footer/Buttons/Dialoge) für alle Website-Seiten.
   Design-Tokens aus dem Claude-Design-Prototyp extrahiert (siehe Plan „Website-Integration —
   Startseite"). Selbst gehostete Schriften statt Google-Fonts-CDN (DSGVO). */

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-variable.a6b899943e31.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-variable.570751c5f8b4.woff2") format("woff2");
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/caveat-variable.1fde3bbfa795.woff2") format("woff2");
}

:root {
  --farbe-creme: #FAF9F6;
  --farbe-tinte: #1A1815;
  --farbe-teal: #37656C;
  --farbe-teal-hell: #B1CED2;
  --farbe-terrakotta: #BC6B41;
  --farbe-footer: #211C14;
  --farbe-footer-punkt: #5C4A34;
  --farbe-footer-text: #B7AF9F;
  --farbe-footer-label: #8A836F;
  --farbe-rand: #E4E0D8;
  --farbe-muted: #7C766B;

  --schrift-haupt: "Hanken Grotesk", system-ui, sans-serif;
  --schrift-mono: "JetBrains Mono", ui-monospace, monospace;
  --schrift-hand: "Caveat", cursive;
}

* { box-sizing: border-box; }

/* ---- Bot-Schutz (Item 16) ---- */
/* Honeypot: für Menschen unsichtbar (weit außerhalb des Bildschirms), aber für Bots im DOM. */
.bot-honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ALTCHA-Widget an das Formular-Layout anpassen (etwas Abstand nach oben). */
altcha-widget { display: block; margin: 4px 0 18px; max-width: 260px; --altcha-border-width: 1px; }
body {
  margin: 0;
  background: var(--farbe-creme);
  color: var(--farbe-tinte);
  font-family: var(--schrift-haupt);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
h1, h2, h3 { font-family: var(--schrift-haupt); font-weight: 800; line-height: 1.1; margin: 0 0 0.5em; }
h1 { font-size: 38px; }
h2 { font-size: 25px; }
h3 { font-size: 20px; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.kicker {
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--farbe-muted);
  margin-bottom: 8px;
}
.kicker--zentriert { text-align: center; }
.zentriert { text-align: center; }

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  font-family: var(--schrift-haupt);
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.btn-primary { background: var(--farbe-teal); color: #fff; }
.btn-sekundaer { background: transparent; color: var(--farbe-tinte); border-color: var(--farbe-teal); }
.btn-klein { padding: 8px 16px; font-size: 14px; }
.btn-block { display: block; width: 100%; margin-top: 16px; }
.btn:not([disabled]):hover { filter: brightness(1.12); }
.btn[disabled] { cursor: default; opacity: 0.92; }

.breadcrumb {
  padding: 16px 24px;
  border-bottom: 1px solid #EFECE5;
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #8A8377;
}
.breadcrumb a { text-decoration: none; color: #8A8377; }
.breadcrumb-trenner { margin: 0 8px; }
.breadcrumb-aktuell { color: var(--farbe-teal); }
@media (min-width: 1024px) { .breadcrumb { padding: 16px 56px; } }

.link-pfeil {
  color: var(--farbe-teal);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.pfeil-hand { display: inline-block; margin-left: 7px; overflow: visible; flex-shrink: 0; }

/* ---- Kopfzeile ---- */
.kopfzeile {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 249, 246, 0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--farbe-rand);
}
.kopfzeile-inner {
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo-link { display: block; }
/* Logo auf Höhe des "Suche"-Buttons (dessen Box inkl. Rahmen 34px hoch ist) -- Ober- und
   Unterkante liegen dadurch auf einer Linie mit dem Button im rechten Kopfbereich. */
.logo { height: 34px; width: auto; }
.kopf-nav { display: none; align-items: center; gap: 26px; }
.kopf-nav a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--farbe-tinte); }
.kopf-aktionen { display: flex; align-items: center; gap: 14px; }
.btn-suche {
  background: none;
  border: 1px solid #D8D3C9;
  padding: 8px 12px;
  font-family: var(--schrift-mono);
  font-size: 12px;
  color: #6B665E;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: filter 0.15s ease;
}
.btn-suche:hover { filter: brightness(1.12); }
.btn-menu {
  background: none;
  border: 1px solid var(--farbe-rand);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-tinte);
  cursor: pointer;
  transition: filter 0.15s ease;
}
.btn-menu:hover { filter: brightness(1.12); }
.kopf-cta { display: none; padding: 9px 18px; font-size: 14px; }
/* „Gutschein kaufen" nur auf Desktop -- auf Mobil/Tablet bleiben nur Logo, Suche und Menü
   (der überladene Header sonst; Gutschein + Kurse stehen ohnehin im Menü). */
.kopf-gutschein { display: none; }
.icon { width: 18px; height: 18px; flex-shrink: 0; }
.btn-suche .icon { width: 14px; height: 14px; }
@media (min-width: 1024px) {
  .kopf-nav { display: flex; }
  .kopf-cta { display: inline-block; }
  .kopf-gutschein { display: inline-block; }
  .btn-menu { display: none; }
  .kopfzeile-inner { padding: 18px 40px; }
}

/* ---- Suchpanel (Header) -- fixiertes, oben angedocktes Panel + Backdrop, kein zentriertes
   Modal (exakt wie im Design-Prototyp: eine Art "Spotlight"-Suche, keine <dialog>-Zentrierung,
   daher als einfaches Overlay per hidden-Attribut, gleiches Muster wie das mobile Menü). ---- */
.such-overlay[hidden] { display: none; }
.such-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, 0.5);
  z-index: 900;
}
.such-panel {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--farbe-creme);
  z-index: 901;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.4);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.such-panel-kopf { max-width: 900px; width: 100%; margin: 0 auto; padding: 28px 24px 8px; }
.such-eingabe-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 2px solid var(--farbe-tinte);
  padding-bottom: 12px;
}
.such-eingabe-feld {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: var(--schrift-haupt);
  font-size: 20px;
  font-weight: 600;
  color: var(--farbe-tinte);
}
.such-schliessen { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: #6B665E; transition: color 0.15s ease; }
.such-schliessen:hover { color: var(--farbe-tinte); }
.such-panel-liste { overflow-y: auto; max-width: 900px; width: 100%; margin: 0 auto; padding: 0 24px 28px; }
@media (min-width: 700px) {
  .such-panel-kopf, .such-panel-liste { padding-left: 32px; padding-right: 32px; }
  .such-eingabe-feld { font-size: 24px; }
}

.such-ergebnisse { margin-top: 0; }
.such-anzahl { font-family: var(--schrift-mono); font-size: 12px; letter-spacing: 0.05em; color: #8A8377; padding: 12px 0 4px; margin: 0; }
.such-keine { color: var(--farbe-muted); font-size: 14px; margin: 12px 0 0; }
.such-liste { list-style: none; margin: 0; padding: 0; }
.such-treffer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  padding: 16px 4px;
  border-bottom: 1px solid var(--farbe-rand);
}
.such-treffer:hover { background: #F1EEE8; }
.such-info { display: flex; flex-direction: column; gap: 2px; }
.such-titel { font-weight: 700; font-size: 17px; color: var(--farbe-tinte); }
.such-meta { font-size: 13px; color: #6B665E; }
.such-preis { font-weight: 700; font-size: 15px; color: var(--farbe-teal); white-space: nowrap; }

/* ---- Besuchermeldung -- site-weites Popup (Kanäle), analog zu .such-overlay/.buchung-overlay
   aufgebaut, aber mit höherem z-index, da es über allem anderen liegen soll. Gestaltung 1:1 aus
   der Design-Vorlage (Karte #FAF9F6, 5px-Akzentbalken links, Mono-Eyebrow, optionaler Button).
   Die Akzentfarbe kommt je Panel aus --bm-akzent (siehe Akzent-Klassen unten). ---- */
@keyframes bmBackdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes bmPop {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)) scale(.98); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.besuchermeldung-overlay[hidden] { display: none; }
.besuchermeldung-backdrop {
  position: fixed; inset: 0; background: rgba(20, 18, 15, 0.42); z-index: 950;
  animation: bmBackdrop 0.2s ease;
}
.besuchermeldung-panel {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 520px; max-width: calc(100vw - 40px);
  background: #FAF9F6;
  box-shadow: 0 40px 90px -32px rgba(20, 18, 15, 0.55);
  overflow: hidden;
  z-index: 951;
  animation: bmPop 0.26s cubic-bezier(.2, .8, .2, 1);
}
.besuchermeldung-panel[hidden] { display: none; }
.besuchermeldung-akzentbalken {
  position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--bm-akzent);
}
.besuchermeldung-schliessen {
  position: absolute;
  top: 16px; right: 16px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--farbe-rand);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #6B665E;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.besuchermeldung-schliessen:hover { border-color: var(--farbe-tinte); color: var(--farbe-tinte); }
.besuchermeldung-pad { padding: 30px 34px 32px; max-height: 85vh; overflow-y: auto; }
.besuchermeldung-eyebrow {
  display: flex; align-items: center; gap: 9px; margin: 0 0 14px;
  font-family: var(--schrift-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bm-akzent);
}
.besuchermeldung-punkt { width: 8px; height: 8px; background: var(--bm-akzent); flex: 0 0 auto; }
.besuchermeldung-titel {
  margin: 0; font-size: 28px; font-weight: 800; color: #1A1815;
  line-height: 1.1; letter-spacing: -0.01em; max-width: 15ch;
}
.besuchermeldung-text { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: #4a463f; max-width: 42ch; }
.besuchermeldung-text p:last-child { margin-bottom: 0; }
.besuchermeldung-text a {
  color: var(--bm-akzent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px;
}
.besuchermeldung-button-zeile { margin-top: 22px; }
.besuchermeldung-button {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: var(--bm-akzent); color: #fff; font-weight: 600; font-size: 15px;
  padding: 12px 22px; transition: background 0.15s ease;
}
.besuchermeldung-button:hover { background: var(--bm-akzent-dunkel); }
.besuchermeldung-pfeil { font-family: var(--schrift-mono); }
.besuchermeldung-panel--petrol { --bm-akzent: #37656C; --bm-akzent-dunkel: #2B5158; }
.besuchermeldung-panel--terrakotta { --bm-akzent: #BC6B41; --bm-akzent-dunkel: #A45733; }
.besuchermeldung-panel--tief { --bm-akzent: #22403F; --bm-akzent-dunkel: #152B2A; }
@media (max-width: 560px) {
  .besuchermeldung-pad { padding: 26px 24px 28px; }
}

/* ---- Cookie-Hinweis -- schmale Info-Leiste am unteren Rand (KEIN Consent-Banner: es gibt nur
   technisch notwendige Cookies, also nichts zum Zustimmen/Ablehnen). Einmal "Verstanden" klicken
   setzt das Cookie hide-zeichenfabrik-cookie-notice (1 Jahr, cookie_hinweis.js), danach rendert
   die Leiste serverseitig gar nicht mehr (cookie_tags.py). z-index unter dem Such-Overlay (900),
   aber über dem normalen Seiteninhalt. ---- */
.cookie-hinweis {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 12px 24px;
  background: var(--farbe-footer);
  color: var(--farbe-footer-text);
  border-top: 1px solid var(--farbe-footer-punkt);
}
.cookie-hinweis-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.cookie-hinweis-text a {
  color: var(--farbe-teal-hell);
  text-decoration: underline;
}
.cookie-hinweis-schliessen {
  flex-shrink: 0;
  padding: 8px 18px;
  border: 1px solid var(--farbe-teal-hell);
  border-radius: 2px;
  background: transparent;
  color: var(--farbe-creme);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cookie-hinweis-schliessen:hover {
  background: var(--farbe-teal-hell);
  color: var(--farbe-footer);
}
@media (max-width: 640px) {
  .cookie-hinweis { flex-direction: column; gap: 10px; text-align: center; padding: 14px 18px; }
}

/* ---- Mobiles Menü -- klappt unterhalb der Kopfzeile auf und schiebt den Seiteninhalt
   nach unten (kein zentriertes Modal wie die Suche), exakt wie im Prototyp ---- */
.mobil-menu-panel {
  position: sticky;
  top: 77px;
  z-index: 19;
  background: var(--farbe-creme);
  border-bottom: 1px solid var(--farbe-rand);
  padding: 12px 24px 20px;
  display: flex;
  flex-direction: column;
  animation: zfDrop 0.18s ease;
}
.mobil-menu-panel[hidden] { display: none; }
.mobil-menu-liste { display: flex; flex-direction: column; }
.mobil-menu-liste a {
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  color: var(--farbe-tinte);
  padding: 12px 0;
  border-bottom: 1px solid #EFECE5;
}
.mobil-menu-cta { text-align: center; margin-top: 16px; }
@keyframes zfDrop {
  0% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: none; }
}
@media (min-width: 1024px) {
  .mobil-menu-panel { display: none !important; }
}

/* ---- Fußzeile ---- */
.fusszeile { color: var(--farbe-footer-text); }
.papierkante { display: block; width: 100%; height: 58px; margin: 0 0 -1px; overflow: visible; }
.fusszeile-inner { background: var(--farbe-footer); padding: 32px 24px 40px; }
.fuss-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  margin-bottom: 22px;
}
.fuss-marke { flex: 1 1 260px; min-width: 220px; }
.fuss-logo { height: 34px; width: auto; margin-bottom: 16px; }
.fuss-tagline { margin: 0 0 14px; font-size: 14px; line-height: 1.6; max-width: 24em; }
.fuss-handschrift { font-family: var(--schrift-hand); color: var(--farbe-terrakotta); font-size: 22px; margin: 0; }
.fuss-label {
  font-family: var(--schrift-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--farbe-footer-label);
  /* Kopfhöhe an das größere Logo der Marken-Spalte angleichen (34px Logo + 16px Abstand), damit
     die jeweils erste Inhaltszeile -- Tagline, Adresse, „FAQ" -- über alle Spalten auf einer Linie
     liegt (keine Sprünge). Der Label-Text sitzt unten im Kopf, also nah an seinem Inhalt. */
  min-height: 34px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-end;
}
.fuss-standort { flex: 0 1 170px; min-width: 150px; }
/* Nur die Adresse, NICHT die Kicker-Zeile: früher traf ".fuss-standort p" auch die
   <p class="fuss-label">-Überschrift und blähte sie auf 14px auf, wodurch "STANDORT WIEN"
   größer wirkte als "SERVICE"/"NEWSLETTER". Die Adresse hat jetzt eine eigene Klasse. */
.fuss-standort-adresse { margin: 0; font-size: 14px; line-height: 1.6; }
.fuss-service { flex: 0 1 170px; min-width: 150px; display: flex; flex-direction: column; gap: 9px; }
/* In der Flex-Spalte kommt zwischen Label und erstem Link zusätzlich das 9px-gap dazu -- die
   Label-Untermarge entsprechend kürzen, damit „FAQ" auf derselben Linie wie Tagline/Adresse sitzt. */
.fuss-service .fuss-label { margin-bottom: 7px; }
.fuss-service a { text-decoration: none; font-size: 14px; transition: color 0.15s ease; }
.fuss-service a:hover { color: #EFE9DE; }
.fuss-newsletter { flex: 1 1 240px; min-width: 220px; }
.newsletter-form { display: flex; gap: 0; }
.newsletter-form input {
  flex: 1;
  min-width: 0;
  background: #2C261C;
  border: 1px solid #4A4234;
  color: #EFE9DE;
  padding: 10px 12px;
  font-family: var(--schrift-haupt);
  font-size: 14px;
}
.newsletter-form button {
  background: var(--farbe-teal-hell);
  color: var(--farbe-footer);
  border: none;
  font-weight: 700;
  padding: 0 16px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.newsletter-form button:hover { filter: brightness(1.12); }
.fuss-zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--farbe-footer-label);
}
.fuss-links { display: flex; gap: 20px; }
.fuss-links a { text-decoration: none; color: var(--farbe-footer-label); }

/* ---- Handgezeichnete Unterstreichung (seitenübergreifend: jeder Hero mit eigenem SVG-Pfad) ---- */
.unterstrichen { position: relative; display: inline-block; }
.unterstrichen .strich {
  position: absolute;
  left: 0; right: 0; bottom: -0.1em;
  width: 100%; height: 0.34em;
  overflow: visible;
  fill: none;
  stroke: var(--farbe-terrakotta);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Bild-Platzhalter (seitenübergreifend: Kurskacheln, Hero-Bilder, Dozentenportraits) ----
   Wiederkehrendes "Bild fehlt noch"-Muster: schraffierter Hintergrund + gestrichelt umrandetes
   Mono-Label, exakt aus dem Prototyp übernommen. */
.bild-platzhalter, .kurs-karte-bild, .hero-bild-platzhalter, .detail-hero-bild,
.dozent-zeile-bild, .dozent-hero-bild, .dozent-portraet-wrap, .kontakt-karte-platzhalter {
  background-color: rgb(241, 238, 232);
  background-image: repeating-linear-gradient(
    45deg, rgba(0, 0, 0, 0.043) 0, rgba(0, 0, 0, 0.043) 8px,
    transparent 8px, transparent 16px
  );
  display: flex;
  align-items: center;
  justify-content: center;
}
.bild-platzhalter-label {
  position: relative;
  font-family: var(--schrift-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(138, 131, 119);
  background: var(--farbe-creme);
  padding: 4px 8px;
  border: 1px dashed #CFC9BD;
}

/* ---- Bildunterschrift (seitenübergreifend: Hero-Bilder, Dozentenportraits) -- vertikaler
   Text rechts im Bild, exakt aus dem Prototyp übernommen (Startseiten-Hero). Nie Pflicht --
   wird an jeder Einsatzstelle nur gerendert, wenn die zugehörige Caption gesetzt ist. */
.bild-caption {
  position: absolute;
  top: 50%; right: 14px;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--schrift-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Dezenter halbtransparenter Chip: bringt den Kontrast selbst mit, damit die Caption auf
     hellen wie dunklen Bildern lesbar bleibt (Bilder werden frei hochgeladen). */
  color: rgba(255, 255, 255, 0.95);
  background: rgba(20, 18, 15, 0.42);
  padding: 10px 4px;
  border-radius: 20px;
  pointer-events: none;
}

/* ---- Kurskachel (seitenübergreifend: Startseite, Kursübersicht, „Weitere Kurse") ---- */
.kurs-karte {
  background: #fff;
  border: 1px solid var(--farbe-rand);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.kurs-karte:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.28); }
.kurs-karte-bild {
  position: relative;
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--farbe-rand);
  text-decoration: none;
}
.kurs-karte-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--farbe-teal-hell);
  color: #22403F;
  font-family: var(--schrift-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
}
.badge-inline {
  position: static;
  display: inline-block;
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 4px 10px;
}
.kurs-karte-inhalt { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.kurs-standort { font-family: var(--schrift-mono); font-size: 11px; letter-spacing: 0.05em; color: rgb(138, 131, 119); margin-bottom: 4px; }
.kurs-karte-inhalt h3 { font-size: 19px; margin-bottom: 4px; }
.kurs-karte-inhalt h3 a { text-decoration: none; }
.kurs-dozent { color: #6B665E; margin-bottom: 12px; font-size: 14px; }
.kurs-anriss { color: #6B665E; font-size: 14px; margin: 0 0 12px; }
.kurs-karte-fuss { margin-top: auto; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #EFECE5; padding-top: 14px; }
.kurs-preis { font-weight: 700; font-size: 18px; margin: 0; }

/* ---- Rechtstext-Seiten (Impressum, AGB, Datenschutzerklärung) -- linksbündig wie alle anderen
   Seiten, kein zentrierter Textblock. ---- */
.rechtstext-kopf { padding: 40px 24px 28px; border-bottom: 1px solid var(--farbe-rand); }
.rechtstext-kopf h1 { margin: 0; font-size: 34px; line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.rechtstext-untertitel { margin: 16px 0 0; font-size: 14px; color: #8A8377; max-width: 44em; }
@media (min-width: 760px) {
  .rechtstext-kopf { padding: 56px 56px 32px; }
  .rechtstext-kopf h1 { font-size: 46px; line-height: 1.03; }
}

.rechtstext { padding: 40px 24px 64px; }
@media (min-width: 760px) { .rechtstext { padding: 48px 56px 72px; } }
.rechtstext-inhalt { max-width: 760px; }
.rechtstext-inhalt :is(h2, h3) {
  font-family: var(--schrift-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--farbe-teal);
  margin: 0 0 10px;
}
.rechtstext-inhalt p { font-size: 16px; line-height: 1.7; color: #37342d; margin: 0 0 30px; }
.rechtstext-inhalt a { color: var(--farbe-teal); }

/* ---- Responsive (Design-Briefing: <768 mobil · 768-1024 Tablet · >1024 Desktop;
   Überschriften-Größen selbst wechseln laut Prototyp aber schon bei 600px) ---- */
@media (min-width: 600px) {
  h1 { font-size: 62px; }
  h2 { font-size: 30px; }
}
@media (min-width: 1024px) {
  .fusszeile-inner { padding: 46px 56px 44px; }
}

/* Pflichthaken-Feedback (Abnahme R2 J1): sichtbare Inline-Meldung, wenn der Zustimmungs-Haken
   fehlt -- ersetzt die auf Mobil oft unsichtbare native Fehlerblase. */
.pflichthaken-fehler {
  margin: 6px 0 0;
  color: var(--farbe-terrakotta);
  font-size: 14px;
  font-weight: 600;
}
.pflichthaken--fehlt { outline: 2px solid var(--farbe-terrakotta); outline-offset: 4px; border-radius: 2px; }