:root {
  /* Runde 24 (Mustafa: "Keine Kompromisse mehr beim CSS" - Farben per
     Pixel-Sampling exakt aus den beiden finalen Mockup-Bildern entnommen,
     nicht mehr frei gewaehlt/angenaehert wie in Runde 23):
     - Navy (#183050): haeufigste dunkle Farbe in Titel/Header/Buttons in
       BEIDEN Mockups (Pixel-Histogramm, >15.000 Treffer).
     - Koralle (#ef6c54): Kern der Badge-/Akzentfarbe in beiden Mockups
       (gemittelt aus den haeufigsten gesaettigten Warmton-Pixeln).
     - Seite (#eef4f4): haeufigste helle Flaeche ausserhalb der weissen
       Karten in beiden Mockups.
     - Erfolg/Gruen (#1f9470): gemittelt aus den gruenen "Verifiziert"-Badges
       beider Mockups (Wörterbuch-Mockup etwas gruener, Forum-Mockup etwas
       tealer - Mittelwert gewaehlt, damit beide Ansichten konsistent wirken).
     - Gold (#bc9020): PROFI-Badge/SPECIAL-THREAD-Rand im Forum-Mockup. */
  --farbe-primaer: #183050;
  --farbe-primaer-dunkel: #0f2038;
  --farbe-seite: #eef4f4;
  --farbe-hintergrund: #ffffff;
  --farbe-flaeche: #f3f6f9;
  --farbe-text: #16202a;
  --farbe-text-schwach: #5a6b7a;
  --farbe-rand: #dbe3ea;
  --farbe-akzent: #ef6c54;
  --farbe-akzent-licht: #fdeee8;
  --farbe-verifiziert: #1f9470;
  --radius: 14px;
  --radius-klein: 8px;
  /* Runde 23 (Mustafas Mockup-Feedback): einheitlicher Karten-Schatten statt
     flacher grauer Flaechen, damit Karten wie im Ziel-Mockup "schweben". */
  --schatten-karte: 0 2px 10px rgba(16, 38, 64, 0.08), 0 1px 2px rgba(16, 38, 64, 0.05);
  --schatten-karte-hover: 0 8px 22px rgba(16, 38, 64, 0.13), 0 2px 4px rgba(16, 38, 64, 0.06);

  /* Punkt 2: Artikel-Farbcodierung (DaF-Standard) - der=Blau/die=Rot/das=Gruen */
  --genus-der: #1a5fb4;
  --genus-die: #c0392b;
  --genus-das: #1f9470;

  /* Punkt 10: PROFI-HUB-Gold-Akzent (Runde 24: exakt aus dem Forum-Mockup
     gesampelt, statt freier Annaeherung) */
  --profi-gold: #bc9020;
  --profi-gold-hell: #e8c365;
  --profi-gold-flaeche: #fdf6e3;

  /* Runde 24, Punkt 3: eigene, deutlich kraeftigere Übersetzungs-Farbe -
     exaktes Navy-Blau aus dem Mockup, siehe .treffer-uebersetzung weiter unten. */
  --farbe-uebersetzung: #183050;
}

@media (prefers-color-scheme: dark) {
  :root {
    --farbe-seite: #0b1119;
    --farbe-hintergrund: #141e29;
    --farbe-flaeche: #182230;
    --farbe-text: #eef3f7;
    --farbe-text-schwach: #9fb0bd;
    --farbe-rand: #2a3744;
    --farbe-akzent-licht: #3a2920;
    --genus-der: #6fa8dc;
    --genus-die: #e67c73;
    --genus-das: #6fcf97;
    --profi-gold-flaeche: #2a2410;
    --schatten-karte: 0 2px 10px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3);
    --schatten-karte-hover: 0 8px 22px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--farbe-text);
  /* Korrektur-Briefing (02.10.2026), Punkt 1: "Lato" wurde durch "Inter"
     ersetzt - Mustafas Rueckmeldung war, dass die vorherige Ersatzschrift
     tuerkische Sonderzeichen (ğ, ş, ı) verzerrt/falsch gerendert hat.
     Inter wird explizit ueber die Google-Fonts-Legacy-API MIT dem Parameter
     &subset=latin-ext eingebunden (siehe <head> aller Seiten), damit der
     komplette tuerkische Zeichensatz zuverlaessig als echte Glyphen und
     nicht als Fallback/Tofu dargestellt wird. */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* WICHTIG (Runde 23, beim Wasserzeichen-Fix gefunden): die Seitenfarbe
   gehoert NUR auf <html> (= der Canvas-Hintergrund). Wuerde <body> dieselbe
   Farbe zusaetzlich selbst tragen, wuerde body's eigener (unpositionierter,
   im normalen Fluss liegender) Hintergrund beim Rendern NACH allen
   negativ-z-index-Elementen gemalt - und genau das ist .seiten-wasserzeichen
   (position:fixed, z-index:-1). Mit Hintergrundfarbe auf body waere das
   Wasserzeichen dadurch ueberall dort unsichtbar, wo body's Box reicht,
   und nur in dem Streifen darunter (falls der Viewport hoeher als der
   Seiteninhalt ist) sichtbar - sichtbar gewordenes Symptom: nur ein
   winziger, kaum erkennbarer Bildausschnitt am unteren Rand statt des
   kompletten Kopfes. body bleibt daher bewusst transparent. */
html { background: var(--farbe-seite); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Runde 27 (Mustafas Design-Korrektur vor dem Live-Gang): die KI-Kopf-
   Silhouetten sind komplett entfernt ("erweckt den falschen Eindruck,
   alles sei automatisch generiert"). Einziges Wasserzeichen jetzt: die
   TR-DE-Landkarte aus Runde 26 (damals nur im Forum-Modus) - GLOBAL auf
   jeder Seite und in jedem Modus (Woerterbuch, Suche, Forum), im exakt
   gleichen dezenten Stil. Kein body.modus-forum-Umschalter mehr noetig,
   da es nur noch EIN Wasserzeichen gibt, das ueberall gleich aussieht. */
.seiten-wasserzeichen {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
/* Korrektur-Briefing (02.10.2026, zweite Runde), Punkt 1: die vorherige
   Umsetzung positionierte die Karte ueber einen manuell berechneten
   width/aspect-ratio/translate-Hack - auf Mustafas Monitor rutschte die
   Tuerkei dadurch sichtbar aus dem Bildausschnitt heraus. Jetzt stattdessen
   die robuste, von ihm selbst vorgegebene Methode: .landkarte-wz spannt
   sich ALS GANZES ueber den kompletten (fixed, inset:0) Wasserzeichen-
   Container auf und zentriert das Bild ausschliesslich ueber die drei
   echten CSS-Eigenschaften background-position/-size/-repeat. Dadurch
   bestimmt NUR das tatsaechliche Seitenverhaeltnis der PNG-Datei selbst
   (nicht eine evtl. falsch geratene aspect-ratio-Annahme im CSS) wie das
   Bild skaliert wird - es bleibt so immer als Ganzes exakt mittig, egal
   wie breit/hoch der Bildschirm ist. */
.landkarte-wz {
  position: absolute;
  inset: 0;
  background-image: url("icons/tr-de-karte-watermark.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  /* Korrektur-Briefing (allerletzter Feinschliff vor dem Live-Gang), Punkt 3:
     Mustafa nochmal "leicht weiter erhoeht" (vorher 0.07, davor 0.035) -
     bewusst nur ein MODERATER weiterer Schritt (kein Sprung), damit die
     Landkarte als dezente Silhouette gut erkennbar ist, ohne den Inhalt
     dahinter zu stoeren. */
  opacity: 0.09;
  animation: ds-karte-atmen 12s ease-in-out infinite;
}
@keyframes ds-karte-atmen {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .landkarte-wz { animation: none; }
}

.demo-banner {
  background: #fff3cd;
  color: #7a5900;
  text-align: center;
  font-size: 0.82rem;
  padding: 6px 12px;
}

.app-header {
  /* Fuenfte Korrekturrunde, Punkt 2: Mustafa hat das STRIKT UND AUSDRUECKLICH
     untersagt, dass der Header beim Scrollen am oberen Rand kleben bleibt -
     daher hier zur Klarstellung ein EXPLIZITES position:static (statt sich
     nur auf den Browser-Default zu verlassen). Es gibt im gesamten Projekt
     keine einzige Regel, die .app-header/.site-header auf sticky oder fixed
     setzt (siehe auch die Kommentare bei Punkt 3 der vierten Runde) - der
     Header lag technisch also schon vorher im normalen Dokumentenfluss,
     dieses explizite position:static macht das jetzt unmissverstaendlich
     und regressionssicher, falls hier je eine andere Regel reinrutscht. */
  position: static;
  padding: 12px 16px;
  /* Vierte Korrekturrunde, Punkt 3: Header ist bewusst NICHT sticky/fixed -
     er scrollt ganz normal mit der Seite weg, genau wie im Agentur-Video.
     Eigener, etwas hellerer Hintergrundton (wiederverwendet die bereits
     bestehende "Flaeche"-Markenfarbe statt einer neu erfundenen Farbe),
     damit sich der Header dezent vom reinen Weiss der Inhaltskarten UND
     vom etwas dunkleren Seiten-Canvas (--farbe-seite) abhebt. */
  background: var(--farbe-flaeche);
  border-bottom: 1px solid var(--farbe-rand);
}
/* ============================================================
   Korrektur-Briefing (allerletzter Feinschliff vor dem Live-Gang), Punkt 1:
   kompletter Header-Neubau EXAKT nach Mustafas Agentur-Video
   (uebersetzungsbuero-tuerkisch-deutsch.de) - EIN einziger Flexbox-Container
   ueber die volle Breite, strikte Reihenfolge links -> rechts:
     1. Original-Logo (icons/logo-dassozluk.png)
     2. duenne senkrechte Trennlinie
     3. dreizeiliger Textblock (Zeile 1+2 fest, in beiden Sprachen
        identisch; Zeile 3 = Tagline, per data-i18n uebersetzt)
     4. Hauptnavigation (rechtsbuendig, per margin-left:auto)
     5. DE|TR-Sprachumschalter (direkt neben dem Menü)
     6. CTA-Button "Übersetzung anfragen" (ganz rechts aussen)
   Ersetzt die bisherige CSS-Grid-Loesung (Logo exakt mittig) aus der
   vorherigen Korrekturrunde komplett - das war Mustafas EIGENE alte
   Vorgabe, die er mit diesem Auftrag jetzt explizit durch das neue
   Agentur-Video-Layout ersetzt haben moechte.

   Vierte Korrekturrunde: Punkt 2 (wieder das echte Original-Logo statt des
   generierten runden Badges) und Punkt 4 (3 statt 2 Textzeilen, siehe
   .site-header-zeile2) sind direkte Folgekorrekturen an genau diesem Block.
   ============================================================ */
.site-header-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  max-width: 1320px;
  margin: 0 auto;
}

.site-brand { flex: none; display: flex; align-items: center; text-decoration: none; }
/* Vierte Korrekturrunde, Punkt 2: Mustafa will zwingend wieder das echte,
   urspruengliche Logo (logo-dassozluk.png) statt des in der letzten Runde
   generierten runden "TR/DE"-Badges - daher kein border-radius:50% mehr,
   sondern eine Darstellung passend zum tatsaechlichen Seitenverhaeltnis
   der Bilddatei (550x300 ≈ 1.83:1), ueber die Hoehe begrenzt. */
.site-logo {
  display: block;
  height: 40px;
  width: auto;
  border-radius: var(--radius-klein);
}

.site-header-divider {
  flex: none;
  width: 1px;
  align-self: stretch;
  min-height: 34px;
  background: var(--farbe-rand);
}

.site-header-textblock {
  flex: 1 1 170px;
  min-width: 0;
}
/* Fuenfte Korrekturrunde, Punkt 1: klare typografische Hierarchie im
   Textblock. Zeile 1+2 (.site-header-slogan/.site-header-zeile2) sind die
   "Headline" - fett (800) und deutlich groesser; Zeile 3 (.site-header-sub,
   die Tagline) ist bewusst NICHT fett (500) und spuerbar kleiner/schwaecher
   eingefaerbt, damit die Hierarchie optisch sofort stimmt. Satzpunkte hinter
   Zeile 1+2 sind zwingend entfernt (siehe i18n.js), Zeile 3 behaelt ihre
   eigene, je nach Sprache unterschiedliche Interpunktion. */
.site-header-slogan {
  margin: 0;
  color: var(--farbe-text);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.25;
}
.site-header-zeile2 {
  margin: 1px 0 0;
  color: var(--farbe-text);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.25;
}
.site-header-sub {
  margin: 3px 0 0;
  color: var(--farbe-text-schwach);
  font-size: 0.64rem;
  font-weight: 500;
  line-height: 1.2;
}

/* Mobil (< 720px): Logo/Trennlinie/Textblock bleiben zusammen in Zeile 1,
   die Hauptnavigation faellt in eine eigene, zentrierte Zeile darunter,
   der Sprachumschalter + CTA-Button folgen als dritte, ebenfalls
   zentrierte Zeile. Kein Hamburger-Menü noetig - bewusst einfache,
   robuste Loesung ohne zusaetzliche JS-Interaktion. */
.site-nav {
  order: 4;
  flex-basis: 100%;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2px auto 0;
}
.site-header-aktionen {
  order: 5;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
}

@media (min-width: 720px) {
  .site-header-textblock { flex: 1 1 240px; }
  /* Fuenfte Korrekturrunde, Punkt 1: Hierarchie bleibt auch auf breiteren
     Bildschirmen bestehen - Zeile 1+2 wachsen deutlich mit, Zeile 3 bleibt
     bewusst klein/zurueckhaltend (waechst nur minimal mit). */
  .site-header-slogan { font-size: 0.95rem; }
  .site-header-zeile2 { font-size: 0.92rem; }
  .site-header-sub { font-size: 0.68rem; }
}

@media (min-width: 980px) {
  /* Ab hier passt alles in EINE einzige Zeile (Mustafas "ein einziger,
     sauberer Flexbox-Container"): Reihenfolge bleibt exakt die DOM-
     Reihenfolge, nur Nav + Aktionen wandern per margin-left:auto ganz nach
     rechts, statt in eigene Zeilen umzubrechen. */
  .site-nav {
    order: initial;
    flex-basis: auto;
    margin: 0 0 0 auto;
    justify-content: flex-start;
  }
  .site-header-aktionen {
    order: initial;
    flex-basis: auto;
    margin: 0;
  }
  .site-logo { height: 48px; }
}

/* Punkt 2 (i18n): "DE | TR"-Sprachumschalter direkt neben der Navigation,
   vor dem CTA-Button - siehe i18n.js (setSprache/initSprachUmschalter). */
.sprach-umschalter {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--farbe-rand);
  border-radius: 999px;
  padding: 3px 4px;
  background: var(--farbe-hintergrund);
}
.sprach-btn {
  border: none;
  background: transparent;
  color: var(--farbe-text-schwach);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.sprach-btn:hover { color: var(--farbe-text); }
.sprach-btn.ist-aktiv {
  background: var(--farbe-primaer);
  color: #fff;
}
.sprach-trenner { color: var(--farbe-rand); font-size: 0.7rem; }

.site-nav-link {
  color: var(--farbe-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 4px 1px;
  border-bottom: 2px solid transparent;
}
.site-nav-link:hover,
.site-nav-link:focus-visible,
.site-nav-link.ist-aktiv {
  color: var(--farbe-akzent);
  border-bottom-color: var(--farbe-akzent);
}
/* Vierte Korrekturrunde, Punkt 5: kompletter Redesign - weg vom Pillen-Button
   mit Telefon-Icon-Reminiszenz, hin zu einem seriösen, reinen Text-Button in
   gedecktem Marken-Navy (--farbe-primaer) statt der knalligen Koralle, dazu
   dezentere Eckenrundung (var(--radius-klein)) statt voller Pillenform. */
.site-cta-btn {
  display: inline-flex;
  align-items: center;
  background: var(--farbe-primaer);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.84rem;
  padding: 9px 18px;
  border-radius: var(--radius-klein);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(15, 32, 56, 0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.site-cta-btn:hover,
.site-cta-btn:focus-visible {
  background: var(--farbe-primaer-dunkel);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 32, 56, 0.32);
}


main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 16px 32px;
}

/* Punkt 1: Basis-Layout dreispaltig (Desktop), mobil einspaltig mit der
   Mitte (Suche/Treffer) zuerst - siehe Media-Query weiter unten. */
.app-shell {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "mitte"
    "links"
    "rechts";
  gap: 20px;
  align-items: start;
}
.spalte-mitte { grid-area: mitte; min-width: 0; }
.spalte-links { grid-area: links; }
.spalte-rechts { grid-area: rechts; }

@media (min-width: 980px) {
  .app-shell {
    grid-template-columns: 230px minmax(0, 1fr) 260px;
    grid-template-areas: "links mitte rechts";
  }
  .spalte-links, .spalte-rechts {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
}

.spalte-titel {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--farbe-primaer-dunkel);
  border-bottom: 2px solid var(--farbe-rand);
  padding-bottom: 8px;
}

.links-block, .rechts-block {
  background: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten-karte);
  padding: 16px;
  margin-bottom: 16px;
}

.search-section { margin-top: 0; position: relative; }

.search-box { position: relative; }
.search-box::before {
  content: "🔍";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  opacity: 0.6;
  pointer-events: none;
}
.search-box input {
  width: 100%;
  font-size: 1.08rem;
  padding: 15px 18px 15px 44px;
  border: 2px solid var(--farbe-rand);
  border-radius: 999px;
  background: var(--farbe-hintergrund);
  color: var(--farbe-text);
  box-shadow: var(--schatten-karte);
}
.search-box input:focus {
  outline: none;
  border-color: var(--farbe-primaer);
}

.suche-status {
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--farbe-text-schwach);
  margin: 6px 2px 0;
}

/* Runde 24, Punkt 8: Suchzeile (Suchfeld + Zahnrad-Einstellungen) nebeneinander. */
.search-zeile {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.search-zeile .search-box { flex: 1; }

.einstellungen-wrapper { position: relative; flex: none; }
.einstellungen-button {
  width: 50px;
  height: 50px;
  font-size: 1.2rem;
  border-radius: 50%;
  border: 2px solid var(--farbe-rand);
  background: var(--farbe-hintergrund);
  box-shadow: var(--schatten-karte);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.einstellungen-button:hover,
.einstellungen-button[aria-expanded="true"] {
  border-color: var(--farbe-primaer);
  transform: rotate(25deg);
}
.einstellungen-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  width: 260px;
  background: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(16, 38, 64, 0.18);
  padding: 12px 14px;
}

/* Master-Briefing, Punkt 6: ein eigener Info-Button ("i", AUSDRUECKLICH
   KEINE Gluehbirne) direkt neben dem Zahnrad - gleiche runde Optik/Groesse
   wie .einstellungen-button, damit beide als zusammengehoerendes Paar
   wirken, aber klar als eigenstaendige, kleinere Aktion erkennbar. */
.info-wrapper { position: relative; flex: none; }
.info-button {
  width: 38px;
  height: 38px;
  font-size: 0.95rem;
  font-weight: 800;
  font-style: italic;
  border-radius: 50%;
  border: 2px solid var(--farbe-rand);
  background: var(--farbe-hintergrund);
  color: var(--farbe-text-schwach);
  box-shadow: var(--schatten-karte);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.info-button:hover,
.info-button[aria-expanded="true"] {
  border-color: var(--farbe-primaer);
  color: var(--farbe-primaer);
}
.info-tooltip {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  width: 250px;
  background: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(16, 38, 64, 0.18);
  padding: 10px 12px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--farbe-text);
}
.info-tooltip[hidden] { display: none; }
.einstellungen-titel {
  margin: 0 0 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--farbe-text-schwach);
  font-weight: 700;
}
.einstellungen-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 0.86rem;
  color: var(--farbe-text);
  cursor: pointer;
  border-top: 1px solid var(--farbe-rand);
}
.einstellungen-zeile:first-of-type { border-top: none; }

/* Schalter-Optik ueber einen nativen Checkbox-Input (per CSS zur
   "Pille" umgebaut) - kein zusaetzliches JS-Widget noetig. */
.einstellungen-switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--farbe-rand);
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
}
.einstellungen-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
}
.einstellungen-switch:checked { background: var(--farbe-akzent); }
.einstellungen-switch:checked::after { transform: translateX(16px); }
.einstellungen-switch:focus-visible { outline: 2px solid var(--farbe-primaer); outline-offset: 2px; }

/* Die eigentlichen Ein-/Ausblend-Regeln: EINE Klasse pro Schalter auf
   <body>, greift global - auch auf Elemente, die erst nach dem Umschalten
   neu gerendert werden (siehe initEinstellungen()-Kommentar in app.js). */
body.verberge-lesehilfe .treffer-lautschrift-zeile { display: none; }
body.verberge-weibliche-form .weibliche-form-box { display: none; }
body.verberge-synonyme .synonyme-box { display: none; }
body.verberge-kollokationen .kollokationen { display: none; }

.ergebnisse {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.treffer-karte {
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--farbe-hintergrund);
  box-shadow: var(--schatten-karte);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.treffer-karte:hover { box-shadow: var(--schatten-karte-hover); }
/* Der erste (beste) Treffer einer Suche bekommt einen dezenten Akzentrand -
   im Ziel-Mockup umrahmt genau dieses "Top-Ergebnis" ein auffaelligeres
   Leuchten als die uebrigen Karten darunter. */
.treffer-karte--top {
  border-color: var(--farbe-akzent);
  box-shadow: 0 0 0 3px var(--farbe-akzent-licht), var(--schatten-karte);
}

/* Master-Briefing, Punkt 2: ".treffer-kopf" ist jetzt NUR noch ein
   Layout-Wrapper (kein Button/kein Klick-Handler mehr auf dem gesamten
   Kopfbereich) - die Klick-Funktionen leben einzeln an .treffer-wort-btn
   (neue Suche) und .treffer-chevron-btn (Details auf-/zuklappen), siehe
   app.js baueTrefferKarte(). So kann ein Klick auf das Wort selbst eine
   neue Suche ausloesen, ohne gleichzeitig das Akkordeon umzuschalten. */
.treffer-kopf {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

/* Gemeinsamer Button-Reset fuer alle klickbaren Woerter einer Trefferkarte
   (Suchwort UND Uebersetzung, Punkt 2) - macht aus dem <button> optisch
   wieder ein einfaches Inline-Wort, behaelt aber Tastatur-Fokus/semantik. */
.treffer-wort-btn,
.treffer-uebersetzung-btn {
  display: inline-flex;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.treffer-wort-btn:hover .treffer-wort,
.treffer-wort-btn:focus-visible .treffer-wort,
.treffer-uebersetzung-btn:hover .treffer-uebersetzung-text,
.treffer-uebersetzung-btn:focus-visible .treffer-uebersetzung-text {
  text-decoration: underline;
}
.treffer-wort-btn:focus-visible,
.treffer-uebersetzung-btn:focus-visible {
  outline: 2px solid var(--farbe-primaer);
  outline-offset: 2px;
}

.treffer-chevron-btn {
  margin-left: auto;
  flex: none;
  background: none;
  border: none;
  padding: 4px 6px;
  border-radius: var(--radius-klein);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.treffer-chevron-btn:hover { background: var(--farbe-flaeche); }
.treffer-chevron-btn:focus-visible {
  outline: 2px solid var(--farbe-primaer);
  outline-offset: 2px;
}
.treffer-chevron {
  color: var(--farbe-text-schwach);
  transition: transform 0.15s ease;
}
.treffer-chevron-btn[aria-expanded="true"] .treffer-chevron {
  transform: rotate(180deg);
}

.treffer-detail-container {
  margin-top: 4px;
}

.detail-laedt,
.detail-leer {
  font-size: 0.85rem;
  color: var(--farbe-text-schwach);
  margin: 8px 0 0;
}

.detail-fehler {
  font-size: 0.85rem;
  color: #a33;
  margin: 8px 0 0;
}

.meaning-note {
  margin-top: 8px;
  font-size: 0.88rem;
  color: var(--farbe-text-schwach);
}

.false-friend-warnung {
  margin-top: 8px;
  font-size: 0.88rem;
  color: #a35a00;
  font-weight: 600;
}

/* Master-Briefing, Punkt 1: Suchwort und Uebersetzung muessen ABSOLUT
   gleichwertig aussehen - gleiche Groesse, gleiches Gewicht, exakt derselbe
   Blauton aus Mustafas Mockup (--farbe-uebersetzung, siehe :root). Vorher
   war .treffer-wort groesser/dunkler als .treffer-uebersetzung-text -
   genau die Hierarchie, die Mustafa ausdruecklich NICHT mehr wollte. Beide
   Regeln sind daher bewusst identisch (siehe .treffer-uebersetzung-text
   weiter unten) statt nur "aehnlich". */
.treffer-wort {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--farbe-uebersetzung);
}

.treffer-typ {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--farbe-text-schwach);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: 999px;
  padding: 3px 10px;
}

/* Master-Briefing, Punkt 1 (ersetzt die fruehere Runde-24-Regel "Die
   Uebersetzung muss der Star sein"): Suchwort und Uebersetzung sind jetzt
   gleichwertig - exakt dieselbe Groesse/Gewicht/Farbe wie .treffer-wort
   oben, keines der beiden Woerter ist dem anderen mehr untergeordnet. */
.treffer-uebersetzung {
  margin: 6px 0 0;
}
.treffer-uebersetzung-text {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--farbe-uebersetzung);
  line-height: 1.3;
}

.treffer-detail {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--farbe-text-schwach);
}
.treffer-detail b { color: var(--farbe-text); }

/* Runde 24, Punkt 4: weibliche Form (Regel-Engine) - dezente Pille statt
   Fliesstext, damit sie als eigenstaendige Zusatzinfo erkennbar bleibt. */
.weibliche-form-box {
  margin-top: 8px;
  font-size: 0.86rem;
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-rand);
  border-radius: 999px;
  padding: 4px 12px;
  display: inline-block;
}
.weibliche-form-box b { color: var(--farbe-primaer); }

.badges {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.badge {
  font-size: 0.72rem;
  background: var(--farbe-akzent);
  color: #fff;
  border-radius: 999px;
  padding: 2px 9px;
}

/* Runde 24, Punkt 5: kontextbezogene Eigenwerbung (Behoerden/Recht/Jura/
   Verwaltung-Trigger). Bewusst dezent/"native" statt schreiend bunt - klar
   als Anzeige gekennzeichnet (Label), aber optisch ins Kartenlayout
   eingebettet statt wie ein Fremdkoerper-Banner. */
.behoerden-werbung {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-decoration: none;
  background: var(--farbe-seite);
  border: 1px dashed var(--farbe-akzent);
  border-radius: var(--radius);
  padding: 8px 12px;
  transition: background 0.15s ease;
}
.behoerden-werbung:hover,
.behoerden-werbung:focus-visible { background: var(--farbe-hintergrund); }
.behoerden-werbung-label {
  flex: none;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--farbe-text-schwach);
  border: 1px solid var(--farbe-rand);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.5;
}
.behoerden-werbung-text {
  font-size: 0.82rem;
  color: var(--farbe-text);
  line-height: 1.35;
}

.beispiel {
  margin-top: 8px;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--farbe-text-schwach);
}

.forum-toggle {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--farbe-primaer);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.forum-liste {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 3px solid var(--farbe-rand);
}
.forum-beitrag {
  font-size: 0.85rem;
  margin-bottom: 6px;
}
.forum-autor {
  font-weight: 600;
}

.keine-treffer {
  text-align: center;
  color: var(--farbe-text-schwach);
  padding: 24px 0;
}

/* Master-Briefing, Punkt 5: Offline-Pakete/Survival-Kits und das
   Daten-Update-Banner sind komplett entfernt (die App setzt ab sofort eine
   Internetverbindung voraus) - die fruehere .pakete-*/.paket-*/
   .update-banner-CSS wurde ersatzlos gestrichen, siehe app.js/sw.js. */

/* Master-Briefing, Punkt 4: kleiner "Fehler melden / Feedback"-Button am
   Ende jeder Trefferkarte - bewusst dezent (Textlink-Optik, kein lauter
   Button), damit er nicht mit den eigentlichen Aktionen der Karte
   konkurriert, aber immer sichtbar ist (kein Aufklappen noetig). */
.feedback-btn {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--farbe-text-schwach);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.feedback-btn:hover,
.feedback-btn:focus-visible { color: var(--farbe-primaer); }

.feedback-box {
  position: relative;
  text-align: left;
  max-width: 380px;
  width: 100%;
}
.feedback-box h3 { margin: 0 0 4px 0; padding-right: 30px; }
.feedback-wort-hinweis {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: var(--farbe-text-schwach);
}
.feedback-box label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 10px 0 4px;
}
.feedback-box textarea,
.feedback-box input {
  width: 100%;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-klein);
  background: var(--farbe-hintergrund);
  color: var(--farbe-text);
  resize: vertical;
}
.feedback-aktionen {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.feedback-abbrechen-btn {
  background: none;
  border: none;
  color: var(--farbe-text-schwach);
  cursor: pointer;
  padding: 9px 12px;
}
.feedback-senden-btn {
  background: var(--farbe-primaer);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 600;
  cursor: pointer;
}
.feedback-hinweis {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--farbe-text-schwach);
}

.app-footer {
  text-align: center;
  color: var(--farbe-text-schwach);
  font-size: 0.75rem;
  padding: 24px 16px 40px;
}

/* Runde 24, Punkt 6: Footer-Navigation zu den Pflicht-Unterseiten -
   dieselbe Linkliste erscheint identisch auf index.html und jeder
   Unterseite (siehe subpage-footer.html-Fragment, gleiche Klassen). */
.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-bottom: 10px;
}
.site-footer-nav a {
  color: var(--farbe-text-schwach);
  text-decoration: underline;
  font-size: 0.78rem;
}
.site-footer-nav a:hover,
.site-footer-nav a:focus-visible { color: var(--farbe-akzent); }

/* Master-Briefing, Punkt 7b: zweisprachiger Vertrauens-Hinweis
   ("seit 1999") im Footer jeder Seite - dezent, aber lesbar, zwischen der
   Footer-Navigation und der Copyright-Zeile. */
.footer-vertrauen {
  max-width: 560px;
  margin: 0 auto 10px;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--farbe-text-schwach);
}
.footer-vertrauen .footer-vertrauen-tr { display: block; }
.footer-vertrauen .footer-vertrauen-de { display: block; margin-top: 2px; }

/* --- Statische Unterseiten (Punkt 6): Datenschutz/Impressum/AGB/FAQ/
   Grammatik - schlanker Inhaltscontainer statt des dreispaltigen
   App-Shells, da diese Seiten keine Suche/Treffer-Logik brauchen. */
.unterseite-inhalt {
  max-width: 820px;
  margin: 0 auto;
  padding: 8px 16px 48px;
  color: var(--farbe-text);
  line-height: 1.6;
}
.unterseite-inhalt h1 {
  color: var(--farbe-primaer-dunkel);
  font-size: 1.7rem;
  margin: 10px 0 4px;
}
.unterseite-inhalt h2 {
  color: var(--farbe-primaer);
  font-size: 1.15rem;
  margin: 26px 0 8px;
}
.unterseite-inhalt h2.unterseite-subsektion,
.unterseite-inhalt h3.unterseite-subsektion {
  font-size: 0.98rem;
  margin: 16px 0 6px;
  color: var(--farbe-text);
}
.unterseite-inhalt p { margin: 0 0 12px; }
.unterseite-inhalt ul { margin: 0 0 12px; padding-left: 22px; }
.unterseite-inhalt ul li { margin-bottom: 6px; }
.unterseite-stand {
  color: var(--farbe-text-schwach);
  font-size: 0.8rem;
  margin-bottom: 20px;
}
.unterseite-platzhalter-hinweis {
  background: var(--farbe-seite);
  border: 1px dashed var(--farbe-rand);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--farbe-text-schwach);
  margin-bottom: 24px;
}

@media (min-width: 720px) {
  .app-header-logo-text { font-size: 1.7rem; }
}

/* ===================================================================
   Runde 22: Frontend-Feinschliff (13-Punkte-Ziel-Layout)
   =================================================================== */

/* --- Punkt 2: Artikel-Farbcodierung --- */
.genus-der { color: var(--genus-der); }
.genus-die { color: var(--genus-die); }
.genus-das { color: var(--genus-das); }
.treffer-karte.genus-der { border-left: 4px solid var(--genus-der); }
.treffer-karte.genus-die { border-left: 4px solid var(--genus-die); }
.treffer-karte.genus-das { border-left: 4px solid var(--genus-das); }

/* --- Lautschrift (Runde 22, in Runde 23 deutlich verstaerkt - Mustafas
   Feedback: "das kleine Tag geht aktuell unter"). Jetzt ein auffaelliger,
   farbig hinterlegter Chip statt reinem Fliesstext, mit Lautsprecher-Symbol
   als visuellem Anker, direkt unter dem Hauptwort. --- */
.lautschrift {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--farbe-primaer-dunkel);
  font-style: normal;
  white-space: nowrap;
  background: var(--farbe-akzent-licht);
  border: 1px solid var(--farbe-akzent);
  border-radius: 999px;
  padding: 3px 12px 3px 10px;
  line-height: 1.3;
}
.lautschrift::before { content: "🔊"; font-size: 0.85em; }
.lautschrift-text::before { content: "["; opacity: 0.6; }
.lautschrift-text::after { content: "]"; opacity: 0.6; }
.treffer-lautschrift-zeile {
  margin: 8px 0 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.lautschrift-label {
  font-size: 0.72rem;
  color: var(--farbe-text-schwach);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
/* Runde 24: die Lesehilfe zur Uebersetzung steht jetzt (siehe app.js) auf
   einer eigenen, kleineren Zeile direkt unter der gross/fett hervorgehobenen
   Uebersetzung, statt im selben Satz zu kleben - dadurch bleibt klar, wer
   der "Star der Karte" ist (Mustafas Formulierung) und wer nur Lesehilfe. */
.treffer-lautschrift-zeile--uebersetzung { margin-top: 2px; }

/* Runde 24, konjugierte Suche: kleiner, dezenter Transparenz-Hinweis, WARUM
   dieser Treffer erschienen ist, wenn er ueber eine konjugierte Form
   gefunden wurde (Grundverb bleibt der eigentliche Treffer-Titel). */
.treffer-konjugiert-hinweis {
  margin: 2px 0 0;
  font-size: 0.74rem;
  font-style: italic;
  color: var(--farbe-text-schwach);
}
.lautschrift--klein {
  font-size: 0.86rem;
  font-weight: 600;
  padding: 2px 10px 2px 8px;
}

/* --- Punkt 3/5: Wortart- und Kasusrektions-Badges ---
   Runde 23: Kasusrektion soll laut Mustafa "sehr praesent" sein - deshalb
   jetzt eine voll ausgefuellte, kraeftige Pille statt eines duennen
   Outline-Badges, deutlich groesser als die uebrigen, eher dekorativen
   Badges. */
.badge-kasus {
  font-size: 0.82rem;
  font-weight: 800;
  background: var(--farbe-primaer-dunkel);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 4px 13px;
  letter-spacing: 0.01em;
}

/* --- Punkt 4: nummerierte Bedeutungsebenen --- */
.bedeutungen-liste {
  margin: 8px 0 0;
  padding-left: 1.3em;
  font-size: 0.9rem;
  color: var(--farbe-text);
}
.bedeutungen-liste li { margin-bottom: 3px; }
.bedeutungen-einzeln {
  margin: 8px 0 0;
  font-size: 0.9rem;
  color: var(--farbe-text-schwach);
}

/* --- Punkt 6: kompakte Konjugations-Vorschau in der Treffer-Karte --- */
.konjugation-vorschau {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--farbe-text-schwach);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-klein);
  padding: 8px 10px;
}
.konjugation-vorschau b { color: var(--farbe-text); }

/* --- Runde 23 (neu, Mustafas Auftrag): Link/Button zur ausfuehrlichen,
   paedagogischen Konjugations-Detailansicht direkt neben der kompakten
   Vorschau - bewusst auffaellig (Akzentfarbe), damit er nicht wie ein
   beilaeufiges Detail wirkt. --- */
.ausfuehrliche-konjugation-btn {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: var(--farbe-akzent);
  border: 2px solid var(--farbe-akzent);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.ausfuehrliche-konjugation-btn:hover {
  background: var(--farbe-akzent);
  color: #fff;
  transform: translateY(-1px);
}
.ausfuehrliche-konjugation-btn:focus-visible { outline: 2px solid var(--farbe-primaer); outline-offset: 2px; }

/* --- Punkt 6: volle Konjugationstabelle (linke Spalte) --- */
.konjugations-hinweis {
  font-size: 0.85rem;
  color: var(--farbe-text-schwach);
}
.konjugations-tabelle-wort {
  font-weight: 700;
  margin-bottom: 8px;
}
.konjugations-tabelle table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.konjugations-tabelle th {
  text-align: left;
  color: var(--farbe-text-schwach);
  font-weight: 600;
  border-bottom: 1px solid var(--farbe-rand);
  padding: 4px 6px 4px 0;
}
.konjugations-tabelle td {
  padding: 4px 6px 4px 0;
  border-bottom: 1px dashed var(--farbe-rand);
  vertical-align: top;
}

/* --- Punkt 7: Kollokationen & Beispielsätze --- */
.kollokationen {
  margin-top: 8px;
  font-size: 0.86rem;
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
  border-left: 3px solid var(--farbe-akzent);
  padding: 6px 10px;
  border-radius: 0 6px 6px 0;
}
.kollokationen-titel {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--farbe-text-schwach);
  display: block;
  margin-bottom: 3px;
}
.kollokationen.ist-platzhalter {
  opacity: 0.6;
  font-style: italic;
}

/* Runde 24, Punkt 1: Synonyme (DE+TR) als Chip-Reihen. Eigene Box VOR den
   Kollokationen, mit demselben Akzent-Rahmen-Prinzip wie dort, aber in
   Navy statt Coral, damit beide Boxen im Detailbereich klar unterscheidbar
   bleiben. */
.synonyme-box {
  margin-top: 8px;
  margin-left: 10px;
  font-size: 0.86rem;
  background: var(--farbe-hintergrund);
  border-left: 3px solid var(--farbe-primaer);
  padding: 6px 10px 6px 14px;
  border-radius: 0 6px 6px 0;
}
.synonyme-titel {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--farbe-text-schwach);
  display: block;
  margin-bottom: 4px;
}
.synonyme-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
}
.synonyme-sprachlabel {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--farbe-text-schwach);
  min-width: 20px;
}
.synonyme-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.synonym-chip {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--farbe-rand);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.8rem;
  color: var(--farbe-text);
}

/* --- Punkt 8: Forum-Treffer, Leo.org-Style (rechte Spalte + Akkordeon) --- */
.forum-teaser-liste { display: flex; flex-direction: column; gap: 10px; }
.forum-teaser-leer {
  font-size: 0.82rem;
  color: var(--farbe-text-schwach);
}
.forum-karte {
  display: flex;
  gap: 10px;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--farbe-hintergrund);
  box-shadow: var(--schatten-karte);
  transition: box-shadow 0.15s ease;
}
.forum-karte:hover { box-shadow: var(--schatten-karte-hover); }
.forum-avatar {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.forum-karte-inhalt { min-width: 0; flex: 1; }
.forum-karte-kopf {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.78rem;
}
.forum-karte-autor { font-weight: 600; }
.forum-karte-kategorie {
  font-size: 0.68rem;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: 999px;
  padding: 1px 7px;
  color: var(--farbe-text-schwach);
  white-space: nowrap;
}
.forum-karte-text {
  margin: 4px 0 0;
  font-size: 0.85rem;
}

.zum-forum-btn {
  margin-top: 10px;
  width: 100%;
  background: linear-gradient(135deg, var(--farbe-primaer), var(--farbe-primaer-dunkel));
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 11px 12px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--schatten-karte);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.zum-forum-btn:hover { box-shadow: var(--schatten-karte-hover); transform: translateY(-1px); }
.zum-forum-btn:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }
/* Punkt 8: eigener "Zum Forum wechseln"-Button unter den Forum-Karten der
   rechten Spalte (Runde 23) - etwas mehr Abstand nach den Karten darueber. */
.zum-forum-btn--spalte { margin-top: 14px; }

/* --- Werbeplatz (Punkt 1/11) --- */
.werbeplatz {
  margin-top: 14px;
  border: 1px dashed var(--farbe-rand);
  border-radius: var(--radius);
  padding: 24px 10px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--farbe-text-schwach);
  background: var(--farbe-hintergrund);
  box-shadow: var(--schatten-karte);
}
.werbeplatz-profi { border-color: var(--profi-gold-hell); color: var(--profi-gold); }

/* Runde 24, Punkt 7: vier UNTERSCHIEDLICH gestaltete Werbe-Platzhalter,
   damit das finale Grid schon jetzt erkennbar ist (nicht vier identische
   Kopien derselben Box). werbeplatz-label ist das (zwingende) "Anzeige"-
   Kennzeichnungs-Chip fuer die neueren Varianten. */
.werbeplatz-label {
  display: block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--farbe-text-schwach);
  margin-bottom: 4px;
}
.werbeplatz-text { font-weight: 600; }
.werbeplatz-gruppe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.werbeplatz-klein { padding: 14px 10px; }
.werbeplatz-flaeche {
  padding: 34px 10px;
  background: var(--farbe-seite);
  border-style: solid;
}
.werbeplatz-banner {
  padding: 14px 10px;
  border-style: solid;
  border-color: var(--farbe-akzent);
  background: #fff;
}

/* --- Runde 27: echte AdSense-Flaechen (Pre-Search-Loader, Forum-Spalte,
   unterhalb der Suchtreffer) --- */
.werbeflaeche {
  margin-top: 14px;
  padding: 10px;
  border: 1px dashed var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--farbe-hintergrund);
  text-align: center;
}
.werbeflaeche-label {
  display: block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--farbe-text-schwach);
  margin-bottom: 6px;
}
/* Reserviert Platz, bevor AdSense die Flaeche tatsaechlich befuellt hat -
   verhindert Layout-Sprung (CLS), sobald die echte Anzeige nachlaedt. */
.werbeflaeche--adsense ins.adsbygoogle { min-height: 90px; }

.such-werbung-unten { margin-top: 18px; }

/* Punkt 2 (Runde 27): Pre-Search-Lade-Status - ersetzt kurzzeitig die
   Trefferliste im Content-Bereich (kein Vollbild-Overlay), mobilfreundlich
   durch volle Breite + grosszuegige Innenabstaende. */
.such-lade-status {
  padding: 18px 4px 4px;
  text-align: center;
}
.such-lade-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--farbe-text-schwach);
  font-size: 0.92rem;
  font-weight: 600;
}
.lade-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--farbe-rand);
  border-top-color: var(--farbe-primaer);
  border-radius: 50%;
  animation: such-lade-spin 0.8s linear infinite;
}
@keyframes such-lade-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lade-spinner { animation: none; }
}
.such-lade-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.skeleton-karte {
  height: 92px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--farbe-flaeche) 25%, var(--farbe-rand) 50%, var(--farbe-flaeche) 75%);
  background-size: 200% 100%;
  animation: such-lade-schimmer 1.4s ease-in-out infinite;
}
.skeleton-karte--schmal { height: 60px; opacity: 0.7; }
@keyframes such-lade-schimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-karte { animation: none; }
}

/* Runde 24, Punkt 7 (zweiter Teil): immer sichtbarer Forum-Trichter in der
   rechten Spalte - eigenstaendige, klickbare Karte statt nur Text. */
.forum-funnel-box {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  background: var(--farbe-primaer);
  color: #fff;
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--schatten-karte);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.forum-funnel-box:hover,
.forum-funnel-box:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}
.forum-funnel-icon { font-size: 1.3rem; flex: none; }
.forum-funnel-text {
  font-size: 0.82rem;
  line-height: 1.3;
  flex: 1;
}
.forum-funnel-text strong { display: block; font-size: 0.9rem; }
.forum-funnel-pfeil { font-size: 1.1rem; flex: none; }

/* --- Punkt 9/10: Forum-Ansicht + PROFI HUB --- */
/* Master-Briefing Runde 26, Punkt 3: kleine, grossgeschriebene
   Rubrik-Ueberschriften exakt nach FORUM_2.jpg statt generischer
   <h2>-Titel ("Forum", "Profi-Ecke"). */
.forum-rubrik-titel {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--farbe-text-schwach);
}
.forum-nav-link span, .profi-hub-link span { margin-right: 6px; }

/* Suchfeld im Forum-Kopf (Punkt 3). */
.forum-such-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-rand);
  border-radius: 999px;
  padding: 8px 16px;
  margin-bottom: 16px;
}
.forum-such-icon { font-size: 0.95rem; opacity: 0.6; }
.forum-such-feld {
  flex: 1;
  border: none;
  background: none;
  font-size: 0.95rem;
  color: var(--farbe-text);
  cursor: pointer;
}
.forum-such-feld::placeholder { color: var(--farbe-text-schwach); }
.forum-such-feld:focus { outline: none; }

/* Kompakte Listen mit kleinen Avatar-Punkten (rechte Spalte, Punkt 3). */
.rechts-link-liste--avatare li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rechts-link-avatar {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}
.rechts-link-liste--avatare .rechts-link { flex: 1; }

/* "Spezialist-Anzeigen"-Werbebox (Punkt 3, ersetzt den generischen
   Werbeplatz-Block in der Profi-Ecke). */
.werbung-spezialist {
  background: linear-gradient(135deg, var(--farbe-primaer-dunkel), var(--farbe-primaer));
  color: #fff;
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
  cursor: pointer;
  box-shadow: var(--schatten-karte);
}
.werbung-spezialist-label {
  margin: 0 0 4px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.8;
}
.werbung-spezialist-titel { margin: 0 0 2px; font-size: 1rem; font-weight: 700; }
.werbung-spezialist-text { margin: 0; font-size: 0.82rem; opacity: 0.9; }

.forum-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.forum-nav-link, .rechts-link {
  text-align: left;
  background: none;
  border: none;
  color: var(--farbe-text);
  font-size: 0.9rem;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 6px;
}
.forum-nav-link:hover, .rechts-link:hover { background: var(--farbe-hintergrund); }

.forum-nav-block h3, .rechts-liste-block h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--farbe-text-schwach);
  margin: 0 0 6px;
}
.forum-nav-liste, .rechts-link-liste { list-style: none; margin: 0; padding: 0; }

.rechts-liste-block { margin-bottom: 16px; }

/* PROFI HUB: Gold-Design-Sprache */
.profi-hub {
  margin-top: 18px;
  background: var(--profi-gold-flaeche);
  border: 1px solid var(--profi-gold-hell);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--schatten-karte);
}
.profi-hub-titel {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: var(--profi-gold);
  display: flex;
  align-items: center;
  gap: 6px;
}
.profi-hub-stern { color: var(--profi-gold); }
.profi-hub-liste { list-style: none; margin: 0 0 12px; padding: 0; }
.profi-hub-link {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--farbe-text);
  font-size: 0.85rem;
  padding: 5px 4px;
  cursor: pointer;
  border-radius: 6px;
}
.profi-hub-link:hover { background: rgba(184, 134, 11, 0.12); }

.profi-aktionen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--profi-gold-hell);
  padding-top: 10px;
}
.profi-aktion-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: linear-gradient(135deg, var(--profi-gold-hell), var(--profi-gold));
  color: #2a1f00;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.profi-aktion-btn span {
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.85;
}
.profi-aktion-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(184, 134, 11, 0.35);
}
.profi-aktion-btn:focus-visible { outline: 2px solid var(--profi-gold); outline-offset: 2px; }

/* Forum-Ansicht: Thread-Feed */
.forum-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.forum-zurueck {
  background: none;
  border: 1px solid var(--farbe-rand);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.85rem;
  color: var(--farbe-primaer);
  cursor: pointer;
}
.forum-zurueck:hover { background: var(--farbe-flaeche); }
.forum-ueberschrift { margin: 0; font-size: 1.2rem; }

/* Finales Live-Briefing, Punkt 4: "Neuer Beitrag"-Button im Forum-Kopf -
   gleiche Coming-Soon-Mechanik wie alle anderen Schreibfunktionen. */
.forum-neuer-beitrag-btn {
  background: var(--farbe-primaer);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.forum-neuer-beitrag-btn:hover { filter: brightness(1.08); }

/* Jede Thread-Karte bekommt eine eigene "Antworten"-Schaltflaeche (Punkt 4) -
   dezent, unterhalb des Inhalts, nicht so praesent wie die goldenen
   PROFI-Aktionen des Special-Threads. */
.thread-antworten-btn {
  margin-top: 8px;
  align-self: flex-start;
  background: none;
  border: 1px solid var(--farbe-rand);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.8rem;
  color: var(--farbe-text-schwach);
  cursor: pointer;
}
.thread-antworten-btn:hover { background: var(--farbe-flaeche); color: var(--farbe-primaer); }

.forum-feed { display: flex; flex-direction: column; gap: 12px; }
.thread-karte {
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--farbe-hintergrund);
  box-shadow: var(--schatten-karte);
}
.thread-karte.thread-profi {
  border: 2px solid var(--profi-gold);
  background: var(--profi-gold-flaeche);
  position: relative;
}
.thread-badge-profi {
  position: absolute;
  top: -10px;
  right: 12px;
  background: var(--profi-gold);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
}
.thread-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.thread-kategorie {
  font-size: 0.68rem;
  background: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-rand);
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--farbe-text-schwach);
}
.thread-titel { margin: 4px 0; font-size: 1rem; }
.thread-snippet { margin: 0; font-size: 0.88rem; color: var(--farbe-text); }
.thread-snippet.code-optik {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(0,0,0,0.04);
  padding: 8px 10px;
  border-radius: 6px;
  white-space: pre-wrap;
}
.thread-tags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.thread-tag {
  font-size: 0.68rem;
  background: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-rand);
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--farbe-text-schwach);
}

/* Punkt 3 (Runde 26): Autor-Zeile in Thread-Karten - Avatar (gleiche
   avatarFarbe()-Hashfarben wie rechts-link-avatar/baueForumKarte), Name,
   optionales Rollen-Badge (verifiziert/golden, siehe FORUM_2.jpg). */
.thread-autor-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.thread-autor-avatar {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}
.thread-autor-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--farbe-text);
}
.thread-autor-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.thread-autor-badge--verifiziert {
  background: #0f7a5c;
  color: #fff;
}
.thread-autor-badge--golden {
  background: linear-gradient(135deg, var(--profi-gold-hell), var(--profi-gold));
  color: #2a1f00;
}

/* Punkt 3 (FORUM_2.jpg EXAKT 1:1): beim Special-/Profi-Thread sitzt die
   Aktionsleiste als eigene VERTIKALE Spalte rechts neben dem Hauptinhalt,
   per duennem Trennstrich abgesetzt - nicht als Fussbuttons unter dem Text.
   .thread-hauptinhalt nimmt den verfuegbaren Platz, .thread-aktionen bleibt
   als schmale, nicht schrumpfende Spalte daneben stehen. */
.thread-mit-sidebar {
  display: flex;
  gap: 14px;
  align-items: stretch;
}
.thread-hauptinhalt {
  flex: 1;
  min-width: 0;
}
.thread-aktionen {
  flex: none;
  width: 168px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 14px;
  border-left: 1px solid var(--profi-gold-hell);
}
/* Aktionsleiste nutzt dieselbe Gold-Gradient-Optik wie .profi-aktion-btn im
   PROFI HUB links, damit beide "Profi-Zonen" optisch zusammengehoeren. */
.thread-aktion-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: linear-gradient(135deg, var(--profi-gold-hell), var(--profi-gold));
  color: #2a1f00;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.thread-aktion-btn span {
  font-size: 0.68rem;
  font-weight: 400;
  opacity: 0.85;
}
.thread-aktion-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(184, 134, 11, 0.35);
}
.thread-aktion-btn:focus-visible { outline: 2px solid var(--profi-gold); outline-offset: 2px; }

/* Schmaler Viewport (Mockup bleibt zweispaltig, aber die Aktionsleiste darf
   bei wenig Platz unter den Hauptinhalt rutschen statt ihn zu quetschen). */
@media (max-width: 640px) {
  .thread-mit-sidebar { flex-direction: column; }
  .thread-aktionen {
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 0;
    padding-top: 10px;
    border-left: none;
    border-top: 1px solid var(--profi-gold-hell);
  }
}

/* --- Coming-Soon-Overlay (kein natives alert/confirm) --- */
.coming-soon-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 22, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
/* WICHTIG: 'display: flex' oben uebersteuert sonst das hidden-Attribut (das
   HTML-Default ist nur eine niedrig-spezifische UA-Regel) - ohne diese
   Zeile bliebe das Overlay unsichtbar fuer das Auge (Hintergrundfarbe
   deckt nichts ab?) aber weiterhin interaktiv/klickfangend. Echter Bug,
   beim Smoketest gefunden (Playwright: "intercepts pointer events" trotz
   hidden="true"). */
.coming-soon-overlay[hidden] { display: none; }
.coming-soon-box {
  background: var(--farbe-hintergrund);
  border-radius: var(--radius);
  padding: 22px;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.coming-soon-icon { font-size: 2rem; margin: 0 0 6px; }
.coming-soon-box h3 { margin: 0 0 8px; }
.coming-soon-box p#coming-soon-text { color: var(--farbe-text-schwach); font-size: 0.9rem; }
.coming-soon-schliessen {
  margin-top: 12px;
  background: var(--farbe-primaer);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 600;
  cursor: pointer;
}

/* Finales Live-Briefing, Punkt 4: Cloudflare Turnstile ("Ich bin ein
   Mensch") als fertiger, einsatzbereiter Baustein - noch OHNE echte
   serverseitige Ausloese-Logik (die braucht die spaetere Backend-
   Anbindung), aber optisch und technisch startklar. Gleiches
   Overlay-Muster wie #coming-soon-overlay, bewusst wiederverwendet. */
.mensch-verifizierung-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 22, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110;
  padding: 16px;
}
.mensch-verifizierung-overlay[hidden] { display: none; }
.mensch-verifizierung-box {
  background: var(--farbe-hintergrund);
  border-radius: var(--radius);
  padding: 22px;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.mensch-verifizierung-icon { font-size: 2rem; margin: 0 0 6px; }
.mensch-verifizierung-box h3 { margin: 0 0 8px; }
.mensch-verifizierung-box p { color: var(--farbe-text-schwach); font-size: 0.9rem; margin: 0 0 14px; }
.mensch-verifizierung-widget { display: flex; justify-content: center; min-height: 65px; }

/* ===================================================================
   Runde 23: "Ausfuehrliche Konjugation" - paedagogisches Detail-Template
   (Mustafas Auftrag, hartcodiertes Dummy-Beispiel "kommen"/"gelmek",
   Daten/Darstellung bewusst getrennt - siehe app.js KONJUGATION_AUSFUEHRLICH
   + renderAusfuehrlicheKonjugation()). Als Overlay umgesetzt (funktioniert
   identisch auf Mobile und Desktop, gleiches bewaehrtes Muster wie das
   Coming-Soon-Popup).
   =================================================================== */
.konjugation-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 22, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 200;
  padding: 24px 16px;
  overflow-y: auto;
}
/* WICHTIG, gleicher Bugtyp wie beim Coming-Soon-Overlay (siehe dortiger
   Kommentar): ohne diese Regel uebersteuert 'display: flex' oben das
   'hidden'-Attribut. */
.konjugation-detail-overlay[hidden] { display: none; }

.konjugation-detail-box {
  background: var(--farbe-hintergrund);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  max-width: 760px;
  width: 100%;
  margin: 24px auto;
  padding: 28px 28px 32px;
  position: relative;
}
.konjugation-detail-schliessen {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}
.konjugation-detail-schliessen:hover { background: var(--farbe-rand); }

/* Korrektur-Briefing, Punkt 3: Platz 4 sitzt jetzt sehr prominent direkt
   oben im frisch aufgeklappten "Ausführliche Konjugation"-Bereich. */
/* Korrektur-Briefing (zweite Runde), Punkt 2: .kd-werbung wird jetzt an
   drei Stellen im Overlay verwendet (oben/mitte/unten) - margin auf beiden
   Seiten, damit sie an jeder Position sauberen Abstand zum Inhalt hat. */
.kd-werbung { margin: 18px 0; }

/* Spezialist-Anzeigen-Box (Forum-Sidebar), Korrektur-Briefing (zweite
   Runde), Punkt 3: Mustafas eigener Akquise-Text statt des Platzhalters -
   helle Schrift fuer guten Kontrast auf dem dunkelblauen Verlaufs-
   Hintergrund (.werbung-spezialist). */
.akquise-text-de {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.45;
  color: #ffffff;
}
.akquise-text-tr {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #e4e9f2;
}
.kd-titel {
  margin: 0 0 4px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--farbe-primaer-dunkel);
  padding-right: 36px;
}
.kd-untertitel {
  margin: 0 0 20px;
  color: var(--farbe-text-schwach);
  font-size: 0.95rem;
}

.kd-abschnitt { margin-top: 26px; }
.kd-abschnitt:first-of-type { margin-top: 0; }
.kd-abschnitt-titel {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--farbe-primaer-dunkel);
  border-bottom: 2px solid var(--farbe-rand);
  padding-bottom: 6px;
  margin: 0 0 12px;
}
.kd-unterabschnitt { margin-top: 18px; }
.kd-unterabschnitt-titel {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--farbe-text);
  background: var(--farbe-flaeche);
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  margin: 0 0 8px;
}

.kd-beispiel {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--farbe-primaer-dunkel);
  background: var(--farbe-akzent-licht);
  border-left: 3px solid var(--farbe-akzent);
  padding: 7px 12px;
  border-radius: 0 8px 8px 0;
  margin: 0 0 10px;
}

.kd-hinweis {
  font-size: 0.85rem;
  color: var(--farbe-text);
  background: var(--farbe-flaeche);
  border-left: 3px solid var(--profi-gold);
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
  margin: 10px 0 0;
}
.kd-hinweis b { color: var(--profi-gold); }

.kd-tabelle-wrapper { overflow-x: auto; }
.kd-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.kd-tabelle th {
  background: var(--farbe-primaer-dunkel);
  color: #fff;
  text-align: left;
  font-weight: 700;
  padding: 7px 10px;
}
.kd-tabelle th:first-child { border-radius: 8px 0 0 0; }
.kd-tabelle th:last-child { border-radius: 0 8px 0 0; }
.kd-tabelle td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--farbe-rand);
}
.kd-tabelle tbody tr:nth-child(even) { background: var(--farbe-flaeche); }
.kd-tabelle td:first-child, .kd-tabelle th:first-child { font-weight: 600; white-space: nowrap; }

.kd-weitere-formen-tabelle td:nth-child(2) { font-weight: 700; color: var(--farbe-primaer-dunkel); }

.kd-vergleich {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 560px) {
  .kd-vergleich { grid-template-columns: 1fr 1fr; }
}
.kd-vergleich-spalte {
  background: var(--farbe-flaeche);
  border-radius: var(--radius-klein);
  padding: 12px 14px;
}
.kd-vergleich-spalte h4 { margin: 0 0 8px; font-size: 0.85rem; color: var(--farbe-text-schwach); text-transform: uppercase; letter-spacing: 0.03em; }
.kd-vergleich-spalte p { margin: 0 0 4px; font-weight: 600; }
.kd-vergleich-spalte .kd-hinweis { margin-top: 10px; border-left-color: var(--farbe-primaer); }
.kd-vergleich-spalte .kd-hinweis b { color: var(--farbe-primaer); }

.kd-lerntipp {
  margin-top: 18px;
  background: linear-gradient(135deg, #eafbf1, #f5fdf8);
  border: 1px solid var(--genus-das);
  border-radius: var(--radius-klein);
  padding: 14px 16px;
}
@media (prefers-color-scheme: dark) {
  .kd-lerntipp { background: linear-gradient(135deg, #10241a, #0e1f17); }
}
.kd-lerntipp-titel {
  font-weight: 800;
  color: var(--genus-das);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kd-lerntipp-liste {
  margin: 0 0 8px;
  padding-left: 1.2em;
  font-size: 0.9rem;
}
.kd-lerntipp-liste li { margin-bottom: 3px; }
.kd-lerntipp-abschluss { margin: 0; font-size: 0.88rem; color: var(--farbe-text-schwach); }

.kd-nicht-verfuegbar {
  font-size: 0.95rem;
  color: var(--farbe-text-schwach);
  line-height: 1.6;
}