/* =====================================================================
   interaction-polish.css
   AusbildungsAkademie by SIGNET | Seminarplaner

   Wird als LETZTES Stylesheet geladen und ergaenzt base/planner/academy/
   components. Es ueberschreibt nichts Bestehendes ausser dort, wo das
   ausdruecklich beabsichtigt ist (reduced motion, hoher Kontrast).

   Behandelt:
     1  Press-Feedback           - es gab 0 :active-Regeln im gesamten CSS
     2  Tap-Targets              - 23 Elemente lagen unter 44 px
     3  Reduced Motion           - griff bisher nur an einer Animation
     4  Hoher Kontrast           - prefers-contrast kam gar nicht vor
     5  Reduced Transparency     - Ergaenzung fuer die Chrome-Ebenen
     6  Fokus + Skip-Link
     7  Dark-Mode-Geruest        - vorbereitet, siehe Hinweis unten
   ===================================================================== */


/* ---------------------------------------------------------------------
   1) Press-Feedback

   Ausgangslage: 211 :hover-Regeln, 0 :active-Regeln. Auf dem Touchgeraet
   gibt es kein Hover - dort gaben rund 258 klickbare Elemente ueberhaupt
   keine Rueckmeldung beim Druecken.

   Grundsatz: Rueckmeldung gehoert auf den Druck, nicht auf das Loslassen.

   ABER: die Art der Rueckmeldung muss zur Groesse der Flaeche passen.
   Ein Skalieren um 3 % ist bei einem Button 4 px Weg und liest sich als
   Druck. Beim gleichen Faktor auf einem 700 px breiten Aufklappblock sind
   es 21 px, und das liest sich als Sprung. Deshalb zwei Gruppen.
   --------------------------------------------------------------------- */

/* --- Gruppe A: kompakte Bedienelemente ------------------------------- */

:where(
  button:not(summary):not(.catalog-select-button):not(.details-button),
  .button,
  [role="button"],
  .mini-cart-button,
  .mobile-nav-toggle,
  .hero-text-action,
  .chip,
  .badge,
  .dialog-close
) {
  transition: transform 120ms ease-out, filter 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;   /* nimmt die ~300 ms Doppeltipp-Verzoegerung */
}

:where(
  button:not(summary):not(.catalog-select-button):not(.details-button),
  .button,
  [role="button"],
  .mini-cart-button,
  .mobile-nav-toggle,
  .hero-text-action,
  .dialog-close
):active {
  transform: scale(0.97);
  transition-duration: 60ms;    /* rein schneller als raus */
}


/* --- Gruppe B: grossflaechige Bedienflaechen -------------------------- */
/*
   Aufklappbloecke, Auswahlkarten und Auswahlzeilen sind breit. Sie
   bekommen einen 1-px-Druck nach unten statt einer Skalierung. Das ist
   dieselbe Sprache, die .catalog-card in "Alle Seminare" schon spricht:
   dort hebt der Hover um 2 px an, der Druck nimmt die Anhebung zurueck.
*/

:where(
  summary,
  .catalog-card,
  .seminar-choice,
  .package-seminar,
  .catalog-select-button,
  .details-button,
  .price-tier,
  .hero-price-anchor
) {
  transition: transform 160ms ease, filter 160ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

:where(
  summary,
  .seminar-choice,
  .package-seminar,
  .catalog-select-button,
  .details-button,
  .price-tier,
  .hero-price-anchor
):active {
  transform: translateY(1px);
  transition-duration: 60ms;
}

/* Die Katalogkarte hebt beim Hover um 2 px an. Der Druck setzt sie
   wieder auf null - das fuehlt sich an wie Herunterdruecken und braucht
   keine zusaetzliche Bewegung. */
.catalog-card:active {
  transform: translateY(0);
  transition-duration: 60ms;
}

/* Textlinks reagieren mit Helligkeit statt Geometrie */
:where(main a:not(.button):not([role="button"]):not(.catalog-card)):active {
  filter: brightness(0.8);
  transition-duration: 60ms;
}

/* Gesperrte Elemente duerfen nicht reagieren */
:where(button, .button, [role="button"])[disabled]:active,
:where(button, .button, [role="button"])[aria-disabled="true"]:active,
:where(button, .button, [role="button"])[aria-busy="true"]:active {
  transform: none;
  filter: none;
}


/* ---------------------------------------------------------------------
   1b) Text in Bedienflaechen nicht markierbar

   An einigen Stellen war das schon gesetzt (neun Regeln in base.css,
   components.css und planner.css), aber nicht durchgaengig. Beim Klicken
   und leichtem Ziehen faerbt sich sonst die Beschriftung blau, was wie
   ein Fehler aussieht - besonders auf dem Touchgeraet, wo ein etwas
   laengerer Druck die Textauswahl ausloest.

   Bewusst NICHT betroffen: Fliesstext, Seminarbeschreibungen,
   FAQ-Antworten, Kontaktdaten und der Export-Code. Alles, was jemand
   kopieren koennen soll, bleibt markierbar.
   --------------------------------------------------------------------- */

:where(
  button,
  .button,
  [role="button"],
  summary,
  .tab,
  .chip,
  .badge,
  .category-badge,
  .category-chip,
  .meta-chip,
  .catalog-card,
  .catalog-card-id,
  .catalog-select-button,
  .catalog-category-title,
  .details-button,
  .seminar-choice,
  .package-seminar,
  .price-tier,
  .route-switch,
  .catalog-display-switch,
  .journey-year-tabs,
  .mini-cart-button,
  .mobile-nav-toggle,
  .site-header .nav-links a,
  .mobile-nav-panel a,
  .selection-tray,
  .request-overview-stats,
  .hero-product-steps,
  .hero-product-status
) {
  -webkit-user-select: none;
  user-select: none;
}

/* Der Checkbox-Text in der gefuehrten Planung gehoert zur Schaltflaeche */
.seminar-choice label,
.package-seminar label {
  -webkit-user-select: none;
  user-select: none;
}

/* Ausnahmen: hier soll ausdruecklich kopiert werden koennen.
   Der Uebertragungscode im Export-Dialog hat in planner.css bereits
   user-select: all - diese Zeile haelt das aufrecht, falls eine der
   Regeln oben ihn ueber einen Vorfahren erfassen wuerde. */
.plan-transfer-code,
.seminar-detail-section p,
.academy-faq-item > div,
.academy-faq-item p {
  -webkit-user-select: text;
  user-select: text;
}

.plan-transfer-code {
  -webkit-user-select: all;
  user-select: all;
}


/* ---------------------------------------------------------------------
   2) Tap-Targets

   Die Hauptnavigation lag bei 25 px Hoehe. Die sichtbare Groesse bleibt
   unveraendert - nur die Trefferflaeche waechst ueber ein Pseudoelement.
   Damit verschiebt sich im Layout nichts.
   --------------------------------------------------------------------- */

@media (pointer: coarse) {
  .site-header .nav-links a,
  .mobile-nav-panel a,
  .legal-footer-links a {
    position: relative;
  }

  .site-header .nav-links a::after,
  .mobile-nav-panel a::after,
  .legal-footer-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
    /* unsichtbar, faengt nur den Tipp ab */
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
  }
}

/* Schliessen-Schaltflaechen in den Dialogen */
dialog :where(.dialog-close, .modal-close, [aria-label*="chließ"], [aria-label*="chliess"]) {
  min-width: 44px;
  min-height: 44px;
}


/* ---------------------------------------------------------------------
   3) Reduced Motion

   Bisher wurde nur die livePulse-Animation am .eyebrow abgeschaltet.
   Die uebrigen Transitions und der Spinner liefen weiter.
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Weniger Bewegung heisst nicht weniger Rueckmeldung:
     Deckkraft statt Geometrie. */
  :where(button, .button, [role="button"], .mini-cart-button,
         .mobile-nav-toggle, .hero-text-action, .dialog-close):active {
    transform: none;
    opacity: 0.72;
  }

  :where(summary, .catalog-card, .seminar-choice, .package-seminar,
         .catalog-select-button, .details-button, .price-tier,
         .hero-price-anchor):active {
    transform: none;
    opacity: 0.88;
  }

  /* Der Ladespinner darf sich drehen, sonst wirkt er eingefroren -
     aber langsamer. */
  .seminar-detail-status [class*="spin"],
  [class*="spinner"] {
    animation-duration: 1400ms !important;
    animation-iteration-count: infinite !important;
  }
}


/* ---------------------------------------------------------------------
   4) Hoher Kontrast
   --------------------------------------------------------------------- */

@media (prefers-contrast: more) {
  .site-header,
  .mobile-nav-panel,
  .mobile-nav-toggle,
  .mini-cart-button,
  dialog {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: var(--surface) !important;
    border: 1px solid var(--neutral-900) !important;
  }

  :where(button, .button, [role="button"], .seminar-card, .package-card) {
    border: 1px solid currentColor;
  }

  main a:not(.button):not([role="button"]) {
    text-decoration: underline;
  }
}


/* ---------------------------------------------------------------------
   5) Reduced Transparency
   --------------------------------------------------------------------- */

@media (prefers-reduced-transparency: reduce) {
  .site-header,
  .mobile-nav-panel,
  .mobile-nav-toggle,
  .mini-cart-button,
  dialog {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: var(--surface) !important;
  }
}


/* ---------------------------------------------------------------------
   6) Fokus und Skip-Link

   Es gab bereits 40 :focus-visible-Regeln - das ist vorbildlich. Hier nur
   ein Sicherheitsnetz fuer Elemente ohne eigene Regel, plus der Skip-Link.
   --------------------------------------------------------------------- */

:where(a, button, [role="button"], input, select, textarea, summary,
       [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 13px 22px;
  background: var(--panel-dark);
  color: var(--on-panel-dark);
  border-radius: 0 0 10px 0;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}


/* ---------------------------------------------------------------------
   7) Dark Mode

   Die Seite bringt bereits ein "SIGNET Icon Light.svg" und ein
   "SIGNET Icon Dark.svg" mit - ein Dark Mode war also angelegt, wurde
   aber nie gebaut: prefers-color-scheme kam im CSS kein einziges Mal vor.

   Der folgende Block ist bewusst auskommentiert. Er kippt die Farb-
   variablen aus base.css, und die Werte muessen an eurer Palette geprueft
   werden, bevor er scharf geschaltet wird. Ein halb fertiger Dark Mode
   ist schlechter als keiner.
   --------------------------------------------------------------------- */

/*
@media (prefers-color-scheme: dark) {
  :root {
    --neutral-900: #eef4f2;
    --neutral-700: #c3cecb;
    --neutral-500: #93a09d;
    --surface:     #161d1b;
    --surface-alt: #1c2523;
    --border:      #2a3634;
  }

  body {
    background: var(--neutral-900);
    color: #eef4f2;
  }

  .site-header,
  .mobile-nav-panel {
    background-color: rgba(var(--ink-rgb), 0.72);
  }
}
*/

/* =====================================================================
   Dunkelmodus: Abhebung von Bedienelementen

   In einer hellen Oberflaeche hebt sich ein Bedienelement ab, indem es
   HELLER ist als der Grund - meist weiss auf hellgrau. Meine Umsetzung
   hat im Dunkelmodus stur alles abgedunkelt und damit genau diese
   Abstufung eingeebnet: Eingabefelder, Auswahlfelder und Schaltflaechen
   waren dunkel auf dunkel und kaum noch zu erkennen.

   In dunklen Oberflaechen laeuft die Abstufung umgekehrt: Naeher am
   Betrachter heisst heller. Diese Regeln stellen die drei Ebenen wieder
   her - Seitengrund, Karte, Bedienelement - und geben den Elementen
   zusaetzlich eine sichtbare Kante.

   Sie stehen bewusst am Ende der zuletzt geladenen Datei, damit sie die
   erzeugten Flaechenuebersteuerungen gewinnen.
   ===================================================================== */

@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) input[type="text"],
:root:not([data-theme="light"]) input[type="email"],
:root:not([data-theme="light"]) input[type="tel"],
:root:not([data-theme="light"]) input[type="search"],
:root:not([data-theme="light"]) input[type="number"],
:root:not([data-theme="light"]) textarea,
:root:not([data-theme="light"]) select,
:root:not([data-theme="light"]) .button,
:root:not([data-theme="light"]) button.button,
:root:not([data-theme="light"]) .catalog-select-button,
:root:not([data-theme="light"]) .details-button,
:root:not([data-theme="light"]) .academy-terms-trigger,
:root:not([data-theme="light"]) .route-switch button,
:root:not([data-theme="light"]) .catalog-display-switch button,
:root:not([data-theme="light"]) .journey-year-tabs .tab,
:root:not([data-theme="light"]) .matrix-header-filter,
:root:not([data-theme="light"]) .matrix-header-select,
:root:not([data-theme="light"]) .add-seminar-term-field select,
:root:not([data-theme="light"]) .add-seminar-attendance select {
    background: var(--elev-control) !important;
    background-image: none !important;
    border-color: var(--outline-subtle) !important;
    color: var(--on-panel-dark) !important;
  }
:root:not([data-theme="light"]) .button:hover,
:root:not([data-theme="light"]) button.button:hover,
:root:not([data-theme="light"]) .catalog-select-button:hover,
:root:not([data-theme="light"]) .details-button:hover,
:root:not([data-theme="light"]) .academy-terms-trigger:hover,
:root:not([data-theme="light"]) .route-switch button:hover,
:root:not([data-theme="light"]) .journey-year-tabs .tab:hover {
    background: var(--elev-control-hover) !important;
  }
/* Aktive und primaere Zustaende bleiben farbig - sie sollen sich weiter
     deutlich von den neutralen Bedienelementen unterscheiden. */
  :root:not([data-theme="light"]) .button-primary,
/* Aktive und primaere Zustaende bleiben farbig - sie sollen sich weiter
     deutlich von den neutralen Bedienelementen unterscheiden. */
  :root:not([data-theme="light"]) .button-accent,
/* Aktive und primaere Zustaende bleiben farbig - sie sollen sich weiter
     deutlich von den neutralen Bedienelementen unterscheiden. */
  :root:not([data-theme="light"]) .route-switch button.active,
/* Aktive und primaere Zustaende bleiben farbig - sie sollen sich weiter
     deutlich von den neutralen Bedienelementen unterscheiden. */
  :root:not([data-theme="light"]) .journey-year-tabs .tab.active,
/* Aktive und primaere Zustaende bleiben farbig - sie sollen sich weiter
     deutlich von den neutralen Bedienelementen unterscheiden. */
  :root:not([data-theme="light"]) .matrix-header-filter.active,
/* Aktive und primaere Zustaende bleiben farbig - sie sollen sich weiter
     deutlich von den neutralen Bedienelementen unterscheiden. */
  :root:not([data-theme="light"]) .catalog-display-switch button.active {
    background: var(--primary-500) !important;
    background-image: none !important;
    border-color: var(--primary-600) !important;
    color: #06231a !important;
  }

  /* Platzhaltertext war praktisch unsichtbar */
  :root:not([data-theme="light"]) ::placeholder {
    color: var(--on-panel-dark-muted) !important;
    opacity: .75;
  }

  /* Pfeile der Auswahlfelder */
  :root:not([data-theme="light"]) select {
    color-scheme: dark;
  }
}
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .button,
:root[data-theme="dark"] button.button,
:root[data-theme="dark"] .catalog-select-button,
:root[data-theme="dark"] .details-button,
:root[data-theme="dark"] .academy-terms-trigger,
:root[data-theme="dark"] .route-switch button,
:root[data-theme="dark"] .catalog-display-switch button,
:root[data-theme="dark"] .journey-year-tabs .tab,
:root[data-theme="dark"] .matrix-header-filter,
:root[data-theme="dark"] .matrix-header-select,
:root[data-theme="dark"] .add-seminar-term-field select,
:root[data-theme="dark"] .add-seminar-attendance select {
  background: var(--elev-control) !important;
  background-image: none !important;
  border-color: var(--outline-subtle) !important;
  color: var(--on-panel-dark) !important;
}
:root[data-theme="dark"] .button:hover,
:root[data-theme="dark"] button.button:hover,
:root[data-theme="dark"] .catalog-select-button:hover,
:root[data-theme="dark"] .details-button:hover,
:root[data-theme="dark"] .academy-terms-trigger:hover,
:root[data-theme="dark"] .route-switch button:hover,
:root[data-theme="dark"] .journey-year-tabs .tab:hover {
  background: var(--elev-control-hover) !important;
}
:root[data-theme="dark"] .button-primary,
:root[data-theme="dark"] .button-accent,
:root[data-theme="dark"] .route-switch button.active,
:root[data-theme="dark"] .journey-year-tabs .tab.active,
:root[data-theme="dark"] .matrix-header-filter.active,
:root[data-theme="dark"] .catalog-display-switch button.active {
  background: var(--primary-500) !important;
  background-image: none !important;
  border-color: var(--primary-600) !important;
  color: #06231a !important;
}

:root[data-theme="dark"] ::placeholder {
  color: var(--on-panel-dark-muted) !important;
  opacity: .75;
}

:root[data-theme="dark"] select {
  color-scheme: dark;
}

/* =====================================================================
   Dunkelmodus: Einzelkorrekturen

   Diese Regeln stehen bewusst ganz am Ende der zuletzt geladenen Datei
   und arbeiten mit !important, weil die betroffenen Stellen im
   Originalcode selbst mit !important gesetzt sind.
   ===================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mini-cart-count,
  :root:not([data-theme="light"]) .mini-cart-button.has-items .mini-cart-count {
    background: var(--primary-500) !important;
    color: #06231a !important;
  }
  :root:not([data-theme="light"]) .selection-tray p,
  :root:not([data-theme="light"]) #trayContext {
    color: var(--on-panel-dark-muted) !important;
    opacity: 1 !important;
  }
  :root:not([data-theme="light"]) .brand-logo-horizontal,
  :root:not([data-theme="light"]) .hero-academy-logo,
  :root:not([data-theme="light"]) img[src*="AusbildungsAkademie"] {
    filter: invert(1) hue-rotate(180deg) brightness(1.05) !important;
  }
}

:root[data-theme="dark"] .mini-cart-count,
:root[data-theme="dark"] .mini-cart-button.has-items .mini-cart-count {
  background: var(--primary-500) !important;
  color: #06231a !important;
}
:root[data-theme="dark"] .selection-tray p,
:root[data-theme="dark"] #trayContext {
  color: var(--on-panel-dark-muted) !important;
  opacity: 1 !important;
}
:root[data-theme="dark"] .brand-logo-horizontal,
:root[data-theme="dark"] .hero-academy-logo,
:root[data-theme="dark"] img[src*="AusbildungsAkademie"] {
  filter: invert(1) hue-rotate(180deg) brightness(1.05) !important;
}

/* Im erzwungenen Hellmodus darf die Invertierung nicht greifen - sonst
   wuerde ein heller Systemmodus mit data-theme="light" das Logo drehen. */
:root[data-theme="light"] .brand-logo-horizontal,
:root[data-theme="light"] .hero-academy-logo,
:root[data-theme="light"] img[src*="AusbildungsAkademie"] {
  filter: none !important;
}


/* =====================================================================
   Umschalter Hell/Dunkel
   ===================================================================== */

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: transform 120ms ease-out, background 160ms ease, border-color 160ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.theme-toggle:active { transform: scale(0.94); transition-duration: 60ms; }

.theme-toggle svg { width: 19px; height: 19px; display: block; }

/* Sonne im Dunkelmodus (Angebot: zurueck zu hell), Mond im Hellmodus.
   Gezeigt wird also immer das Ziel, nicht der Ist-Zustand. */
.theme-toggle .icon-sonne { display: none; }
.theme-toggle .icon-mond  { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle {
    border-color: var(--outline-subtle);
    background: var(--elev-control);
    color: var(--on-panel-dark);
  }
  :root:not([data-theme="light"]) .theme-toggle .icon-sonne { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-mond  { display: none; }
}

:root[data-theme="dark"] .theme-toggle {
  border-color: var(--outline-subtle);
  background: var(--elev-control);
  color: var(--on-panel-dark);
}
:root[data-theme="dark"] .theme-toggle .icon-sonne { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-mond  { display: none; }

:root[data-theme="light"] .theme-toggle .icon-sonne { display: none; }
:root[data-theme="light"] .theme-toggle .icon-mond  { display: block; }

@media (max-width: 720px) {
  .theme-toggle { width: 36px; height: 36px; }
  .theme-toggle svg { width: 17px; height: 17px; }
}

/* =====================================================================
   Kontrastkorrekturen aus dem Prüfbericht vom 01.09.2026

   Die Werte in Klammern sind der gemessene Ausgangswert. Sollwerte nach
   WCAG 2.1: 4,5:1 für Text, 3:1 für die Abgrenzung von Bedienelementen.
   ===================================================================== */

/* --- Hellmodus ------------------------------------------------------ */

/* Eingabe- und Auswahlfelder hatten nur einen Rand aus --line (1,33:1).
   Das ist zu wenig, um das Feld als Feld zu erkennen. --neutral-400
   erreicht 3,06:1 gegen die helle Fläche. */
:root:not([data-theme="dark"]) .catalog-filter input,
06:1 gegen die helle Fläche. */
:root:not([data-theme="dark"]) .catalog-filter select,
06:1 gegen die helle Fläche. */
:root:not([data-theme="dark"]) .request-contact-fields input,
06:1 gegen die helle Fläche. */
:root:not([data-theme="dark"]) .request-contact-fields textarea,
06:1 gegen die helle Fläche. */
:root:not([data-theme="dark"]) .request-contact-fields select,
06:1 gegen die helle Fläche. */
:root:not([data-theme="dark"]) .price-calculator-column input,
06:1 gegen die helle Fläche. */
:root:not([data-theme="dark"]) input[type="text"],
06:1 gegen die helle Fläche. */
:root:not([data-theme="dark"]) input[type="email"],
06:1 gegen die helle Fläche. */
:root:not([data-theme="dark"]) input[type="tel"],
06:1 gegen die helle Fläche. */
:root:not([data-theme="dark"]) input[type="search"],
06:1 gegen die helle Fläche. */
:root:not([data-theme="dark"]) input[type="number"],
06:1 gegen die helle Fläche. */
:root:not([data-theme="dark"]) textarea,
06:1 gegen die helle Fläche. */
:root:not([data-theme="dark"]) select {
  border-color: var(--field-border) !important;
}

/* Der Umschalter selbst - mein eigener Fehler (1,33:1) */
:root:not([data-theme="dark"]) .theme-toggle {
  border-color: var(--toggle-border);
}

/* Fußzeilen-Claim (2,88:1) */ .site-legal-footer .academy-footer-brand > span {
  color: var(--muted) !important;
}

/* Stufennummern im Ablaufband (2,9:1) */ .planner-stage-strip b {
  color: var(--muted) !important;
}


/* --- Dunkelmodus ---------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  /* Schrift IN gefüllten Buttons. Meine Umstellung auf --on-panel-dark
     hat auch die Kindelemente erfasst - helle Schrift auf hellgrünem
     Button (1,25:1). Auf einer gefüllten Akzentfläche gehört dunkle
     Schrift. */
  :root:not([data-theme="light"]) .button-primary,
25:1). Auf einer gefüllten Akzentfläche gehört dunkle
     Schrift. */
  :root:not([data-theme="light"]) .button-accent * {
    color: #06231a !important;
  }

  /* Aufklappzeilen hoben sich nicht vom Grund ab (1,03:1) */
  :root:not([data-theme="light"]) .package-details > summary,
03:1) */
  :root:not([data-theme="light"]) .planning-flexibility-details > summary,
03:1) */
  :root:not([data-theme="light"]) .year-exception-disclosure > summary,
03:1) */
  :root:not([data-theme="light"]) .past-year-seminars > summary,
03:1) */
  :root:not([data-theme="light"]) .journey-disclosure > summary,
03:1) */
  :root:not([data-theme="light"]) .academy-faq-item > summary {
    background: var(--elev-control) !important;
    border-color: var(--outline-subtle) !important;
  }

  /* Hinweistext bei unvollständiger Anfrage (1,47:1) */
  :root:not([data-theme="light"]) .request-validation-hint strong {
    color: #ffc48a !important;
  }:root:not([data-theme="light"]) .request-validation-hint span,
:root:not([data-theme="light"]) .request-validation-hint p {
    color: #e8d9c6 !important;
  }
}
:root[data-theme="dark"] .button-primary,
:root[data-theme="dark"] .button-accent * {
  color: #06231a !important;
}
:root[data-theme="dark"] .package-details > summary,
:root[data-theme="dark"] .planning-flexibility-details > summary,
:root[data-theme="dark"] .year-exception-disclosure > summary,
:root[data-theme="dark"] .past-year-seminars > summary,
:root[data-theme="dark"] .journey-disclosure > summary,
:root[data-theme="dark"] .academy-faq-item > summary {
  background: var(--elev-control) !important;
  border-color: var(--outline-subtle) !important;
}
:root[data-theme="dark"] .request-validation-hint strong {
  color: #ffc48a !important;
}:root[data-theme="dark"] .request-validation-hint span,
:root[data-theme="dark"] .request-validation-hint p {
  color: #e8d9c6 !important;
}


/* Blaue Paketaktion im Hellmodus: --accent-blue-700 erreichte 4,31:1 und
   verfehlte damit die 4,5:1 knapp. Der Ton bleibt, wird nur eine Stufe
   dunkler (4,81:1). */
:root:not([data-theme="dark"]) :is(.package-options-action,
                                   .package-options-selected) {
  color: #2b7796 !important;
}


/* =====================================================================
   Korrektur: Raender nur dort, wo sie hingehoeren

   Die vorige Fassung setzte "border: 1px solid" pauschal auf alle
   Bedienelemente. Zwei Probleme:

   1. Elemente, die vorher keinen Rand hatten, bekamen einen - das wirkt
      an vielen Stellen fremd.
   2. Wo die runde Form nicht vom Element selbst kommt, sondern vom
      umgebenden Container mit overflow, wurde der Rand an den Rundungen
      abgeschnitten. Sichtbar blieben nur die geraden Seiten.

   Deshalb jetzt: Eingabefelder bekommen einen echten Rand, weil sie ohne
   ihn keine erkennbare Begrenzung haben und WCAG 1.4.11 das verlangt.
   Schaltflaechen tragen ihre Form ueber die Flaeche und bekommen nur dann
   eine sichtbare Randfarbe, wenn sie ohnehin schon einen Rand haben.
   ===================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) input[type="text"],
  :root:not([data-theme="light"]) input[type="email"],
  :root:not([data-theme="light"]) input[type="tel"],
  :root:not([data-theme="light"]) input[type="search"],
  :root:not([data-theme="light"]) input[type="number"],
  :root:not([data-theme="light"]) textarea,
  :root:not([data-theme="light"]) select {
    border: 1px solid var(--outline-subtle) !important;
  }

  /* Aufklappzeilen: nur die Flaeche hebt sie ab, kein zusaetzlicher Rand */
  :root:not([data-theme="light"]) .package-details > summary,
  :root:not([data-theme="light"]) .planning-flexibility-details > summary,
  :root:not([data-theme="light"]) .year-exception-disclosure > summary,
  :root:not([data-theme="light"]) .past-year-seminars > summary,
  :root:not([data-theme="light"]) .journey-disclosure > summary,
  :root:not([data-theme="light"]) .academy-faq-item > summary {
    border: 0 !important;
  }
}

:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  border: 1px solid var(--outline-subtle) !important;
}

:root[data-theme="dark"] .package-details > summary,
:root[data-theme="dark"] .planning-flexibility-details > summary,
:root[data-theme="dark"] .year-exception-disclosure > summary,
:root[data-theme="dark"] .past-year-seminars > summary,
:root[data-theme="dark"] .journey-disclosure > summary,
:root[data-theme="dark"] .academy-faq-item > summary {
  border: 0 !important;
}