:root {
      --primary-50: #e4fcef;
      --primary-100: #cef2df;
      --primary-200: #a9e2c5;
      --primary-300: #80cea8;
      --primary-400: #5fbf94;
      --primary-500: #46b385;
      --primary-600: #2c956b;
      --primary-700: #117752;
      --primary-800: #005639;
      --primary-900: #003a24;
      --primary-950: #002314;
      --accent-blue-200: #aaddfb;
      --accent-blue-500: #40a7dc;
      --accent-blue-700: #00638f;
      --accent-violet-200: #d2cfff;
      --accent-violet-500: #988fe3;
      --accent-violet-700: #594f95;
      --neutral-0: #f7fbfa;
      --neutral-50: #f7fbfa;
      --neutral-100: #edf1f0;
      --neutral-200: #d7dcdb;
      --neutral-300: #b9bfbe;
      --neutral-400: #8f9594;
      --neutral-500: #686f6e;
      --neutral-600: #4c5351;
      --neutral-700: #343b3a;
      --neutral-800: #1f2423;
      --neutral-900: #0f1413;
      --neutral-950: #060908;
      --green: var(--primary-500);
      --turquoise: var(--accent-blue-500);
      --violet: var(--accent-violet-500);
      --ink: var(--neutral-800);
      --muted: var(--neutral-600);
      --surface: var(--neutral-0);
      --surface-soft: var(--neutral-50);
      --line: var(--neutral-200);

      /* Fehlerfarben. Standen vorher 21x fest im CSS und lassen sich damit
         im Dunkelmodus nicht aufhellen - auf dunklem Grund ist ein
         dunkles Rot nicht mehr lesbar. */
      --danger: #a61b1b;
      --danger-strong: #8f1d1d;

      /* Flaechen, die in BEIDEN Modi dunkel sind: das Produktfeld im Hero,
         die Auswahlleiste, aktive Umschalter, Hauptschaltflaechen.
         Sie duerfen nicht ueber die neutrale Reihe laufen - die wird im
         Dunkelmodus gespiegelt, und aus einer bewusst dunklen Flaeche
         wuerde dadurch eine helle. */
      --panel-dark: #0f1413;
      --panel-dark-soft: #1f2423;
      --on-panel-dark: #f7fbfa;
      /* Gedaempfte Schrift und Akzentschrift AUF dunklen Panels. Sie muessen
         in beiden Modi hell bleiben - ueber die neutrale Reihe wuerden sie
         mitgespiegelt und waeren dann dunkel auf dunkel. */
      --on-panel-dark-muted: #b9c4c1;
      --on-panel-accent: #aaddfb;

      /* Abhebung im Dunkelmodus entsteht durch Aufhellen, nicht durch
         Abdunkeln. Im Hellmodus sind diese Werte neutral, damit die
         Regeln dort nichts veraendern. */
      /* Rand von Eingabefeldern im Hellmodus. --neutral-400 erreicht nur
         2,92:1 und verfehlt damit knapp die geforderten 3:1 fuer die
         Abgrenzung von Bedienelementen. #858b89 liegt bei 3,33:1 und
         bleibt optisch zurueckhaltend. */
      --field-border: #858b89;
      /* Der Umschalter sitzt auf der transluzenten Kopfleiste. Dort kam
         --field-border nur auf 2,58:1, gemessen am 01.09.2026. */
      --toggle-border: #7b817f;

      --elev-control: transparent;
      --elev-control-hover: transparent;
      --outline-subtle: transparent;

      /* Farbkanaele ohne Alpha. Werden fuer rgba(...)-Angaben gebraucht:
         rgba(var(--surface-rgb), .72) statt rgba(255,255,255,.72).
         Nur so wandern transluzente Flaechen beim Moduswechsel mit. */
      --surface-rgb: 247, 251, 250;
      --ink-rgb: 15, 20, 19;
      --primary-50-rgb: 228, 252, 239;
      --primary-900-rgb: 0, 58, 36;
      --shadow: 0 18px 50px rgba(15,20,19, 0.08);
      --shadow-strong: 0 26px 75px rgba(15,20,19, 0.14);
      --radius-lg: 28px;
      --radius-md: 19px;
      --radius-sm: 13px;
      /* Fallback-Stack ergaenzt: die "…Fallback"-Familien sind in css/fonts.css
         metrisch an die Webfonts angeglichen, damit der Umbruch beim Nachladen
         nicht springt. Dahinter die Systemschriften als letzte Instanz. */
      --font-heading: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      --font-body: "IBM Plex Sans", "IBM Plex Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      --max: 1180px;
    }

    /* =====================================================================
       Dunkelmodus

       Umgeschaltet werden ausschliesslich die Tokens - die Regeln im
       uebrigen CSS bleiben unveraendert. Voraussetzung dafuer war, 265
       fest kodierte Farben auf Variablen umzustellen; ohne das waeren
       Flaechen und Raender hell geblieben.

       Die neutrale Reihe wird gespiegelt: --neutral-0 ist im Hellmodus die
       hellste und im Dunkelmodus die dunkelste Stufe. Damit stimmt jede
       Regel weiter, die die Reihe als "hell nach dunkel" benutzt.

       Die Gruenstufen werden nicht gespiegelt, sondern verschoben: Auf
       dunklem Grund braucht dieselbe wahrgenommene Helligkeit einen
       helleren Ton, sonst verschwindet die Marke.
       ===================================================================== */

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        /* Neutrale Reihe gespiegelt */
        --neutral-0:   #101614;
        --neutral-50:  #161d1b;
        --neutral-100: #1c2523;
        --neutral-200: #2a3634;
        --neutral-300: #3d4a47;
        --neutral-400: #6b7976;
        --neutral-500: #8b9895;
        --neutral-600: #aab5b2;
        --neutral-700: #c8d1cf;
        --neutral-800: #e2e9e7;
        --neutral-900: #f2f7f6;
        --neutral-950: #ffffff;

        /* Gruen angehoben, damit es auf dunklem Grund traegt */
        --primary-50:  #0d2c20;
        --primary-100: #123a2a;
        --primary-200: #1a5039;
        --primary-300: #24704f;
        --primary-400: #359069;
        --primary-500: #5cc396;
        --primary-600: #74d0a8;
        --primary-700: #93dcbc;
        --primary-800: #b6e8d1;
        --primary-900: #d6f3e5;
        --primary-950: #ecfbf3;

        /* Akzente aufgehellt */
        --accent-blue-200:   #123b52;
        --accent-blue-500:   #5cbdec;
        --accent-blue-700:   #9ad8f7;
        --accent-violet-200: #2c2752;
        --accent-violet-500: #aaa2ec;
        --accent-violet-700: #c9c3f5;

        /* Semantische Tokens */
        --ink:          var(--neutral-800);
        --muted:        var(--neutral-600);
        --surface:      var(--neutral-0);
        --surface-soft: var(--neutral-50);
        --line:         var(--neutral-200);

        --danger:        #ff8a8a;
        --danger-strong: #ffb3b3;

        --surface-rgb:     16, 22, 20;

        /* Im Dunkelmodus etwas heller als der Seitengrund, sonst
           verschwindet die Abgrenzung. */
        --panel-dark: #05201a;
        --panel-dark-soft: #0b2b23;
        --on-panel-dark: #eef6f3;
        --on-panel-dark-muted: #b9c4c1;
        --on-panel-accent: #9ad8f7;

        /* Bedienelemente heben sich vom Grund ab */
        --elev-control: #2a3531;
        --elev-control-hover: #38443f;
        --outline-subtle: rgba(255,255,255,.40);
        --field-border: rgba(255,255,255,.40);
        --toggle-border: rgba(255,255,255,.40);
        --ink-rgb:         242, 247, 246;
        --primary-50-rgb:  13, 44, 32;
        --primary-900-rgb: 214, 243, 229;

        /* Schatten wirken auf dunklem Grund nur ueber mehr Deckkraft */
        --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
        --shadow-strong: 0 26px 75px rgba(0, 0, 0, 0.6);

        color-scheme: dark;
      }

      /* Die beiden Akademie-Logos sind dunkle Schrift auf transparentem
         Grund und wuerden im Dunkelmodus verschwinden. Statt zweiter
         Dateien wird der Farbwert invertiert und die Farbdrehung wieder
         zurueckgenommen - das Gruen im Zeichen bleibt dadurch gruen. */
      img[src*="AusbildungsAkademie"] {
        filter: invert(1) hue-rotate(180deg) brightness(1.08);
      }
    }

    /* Derselbe Tokensatz, manuell schaltbar.

       Nutzen: zum Ansehen ohne Aenderung der Systemeinstellung, und als
       Grundlage fuer einen spaeteren Umschalter im Kopfbereich.

           document.documentElement.dataset.theme = 'dark'    dunkel erzwingen
           document.documentElement.dataset.theme = 'light'   hell erzwingen
           delete document.documentElement.dataset.theme      Systemeinstellung

       Die Verdopplung ist unvermeidbar: Eine Media Query und ein
       Attributselektor lassen sich in CSS nicht zu einer Regel
       zusammenfassen. Beide Bloecke muessen deshalb gemeinsam gepflegt
       werden - tools/pruefe-dunkelmodus.py vergleicht sie und meldet
       Abweichungen. */

      :root[data-theme="dark"] {
        /* Neutrale Reihe gespiegelt */
        --neutral-0:   #101614;
        --neutral-50:  #161d1b;
        --neutral-100: #1c2523;
        --neutral-200: #2a3634;
        --neutral-300: #3d4a47;
        --neutral-400: #6b7976;
        --neutral-500: #8b9895;
        --neutral-600: #aab5b2;
        --neutral-700: #c8d1cf;
        --neutral-800: #e2e9e7;
        --neutral-900: #f2f7f6;
        --neutral-950: #ffffff;

        /* Gruen angehoben, damit es auf dunklem Grund traegt */
        --primary-50:  #0d2c20;
        --primary-100: #123a2a;
        --primary-200: #1a5039;
        --primary-300: #24704f;
        --primary-400: #359069;
        --primary-500: #5cc396;
        --primary-600: #74d0a8;
        --primary-700: #93dcbc;
        --primary-800: #b6e8d1;
        --primary-900: #d6f3e5;
        --primary-950: #ecfbf3;

        /* Akzente aufgehellt */
        --accent-blue-200:   #123b52;
        --accent-blue-500:   #5cbdec;
        --accent-blue-700:   #9ad8f7;
        --accent-violet-200: #2c2752;
        --accent-violet-500: #aaa2ec;
        --accent-violet-700: #c9c3f5;

        /* Semantische Tokens */
        --ink:          var(--neutral-800);
        --muted:        var(--neutral-600);
        --surface:      var(--neutral-0);
        --surface-soft: var(--neutral-50);
        --line:         var(--neutral-200);

        --danger:        #ff8a8a;
        --danger-strong: #ffb3b3;

        --surface-rgb:     16, 22, 20;

        /* Im Dunkelmodus etwas heller als der Seitengrund, sonst
           verschwindet die Abgrenzung. */
        --panel-dark: #05201a;
        --panel-dark-soft: #0b2b23;
        --on-panel-dark: #eef6f3;
        --on-panel-dark-muted: #b9c4c1;
        --on-panel-accent: #9ad8f7;

        /* Bedienelemente heben sich vom Grund ab */
        --elev-control: #2a3531;
        --elev-control-hover: #38443f;
        --outline-subtle: rgba(255,255,255,.40);
        --field-border: rgba(255,255,255,.40);
        --toggle-border: rgba(255,255,255,.40);
        --ink-rgb:         242, 247, 246;
        --primary-50-rgb:  13, 44, 32;
        --primary-900-rgb: 214, 243, 229;

        /* Schatten wirken auf dunklem Grund nur ueber mehr Deckkraft */
        --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
        --shadow-strong: 0 26px 75px rgba(0, 0, 0, 0.6);

        color-scheme: dark;
      }

      /* Die beiden Akademie-Logos sind dunkle Schrift auf transparentem
         Grund und wuerden im Dunkelmodus verschwinden. Statt zweiter
         Dateien wird der Farbwert invertiert und die Farbdrehung wieder
         zurueckgenommen - das Gruen im Zeichen bleibt dadurch gruen. */
      :root[data-theme="dark"] img[src*="AusbildungsAkademie"] {
        filter: invert(1) hue-rotate(180deg) brightness(1.08);
      }

    * { box-sizing: border-box; font-family: var(--font-body); }
    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 8% 0%, rgba(170,221,251, 0.34), transparent 30rem),
        radial-gradient(circle at 92% 9%, rgba(210,207,255, 0.28), transparent 32rem),
        linear-gradient(180deg, var(--neutral-50), var(--surface) 32%, var(--neutral-50) 100%);
      font-family: var(--font-body);
      line-height: 1.55;
    }

    body.dialog-open { overflow: hidden; }
    button, input, textarea { font: inherit; }
    button { color: inherit; }
    h1, h2, h3, h4, p { margin-top: 0; }
    h1, h2, h3, h4, h5, h6, .brand, .eyebrow { font-family: var(--font-heading); }
    a { color: inherit; }
    [hidden] { display: none !important; }

    .container {
      width: min(calc(100% - 32px), var(--max));
      margin-inline: auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 40;
      border-bottom: 1px solid rgba(215,220,219, 0.92);
      background: rgba(var(--surface-rgb), 0.88);
      backdrop-filter: blur(18px);
    }

    .nav {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      font-weight: 790;
      letter-spacing: -0.02em;
    }

    .brand-logo {
      width: 42px;
      height: 42px;
      display: block;
      flex: 0 0 auto;
      object-fit: contain;
      filter: drop-shadow(0 7px 14px rgba(var(--ink-rgb), 0.14));
    }

    .brand small {
      display: block;
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 650;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 22px;
      font-size: 0.94rem;
    }

    .nav-links a { color: var(--neutral-700); text-decoration: none; }
    .nav-links a:hover { color: var(--primary-700); }

    .mini-cart-button {
      display: inline-flex;
      min-height: 40px;
      align-items: center;
      gap: 8px;
      padding: 0 13px;
      border: 1px solid var(--line);
      border-radius: 12px;
      cursor: pointer;
      background: var(--neutral-0);
      color: var(--neutral-800);
      box-shadow: 0 8px 22px rgba(var(--ink-rgb), 0.05);
      font-weight: 760;
    }
    .mini-cart-count {
      min-width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      color: var(--on-panel-dark);
      background: var(--primary-700);
      font-size: 0.74rem;
    }

    .hero { padding: 78px 0 44px; }
    .hero-grid {
      display: grid;
      grid-template-columns: 1.08fr 0.92fr;
      gap: 38px;
      align-items: center;
    }

    .eyebrow, .badge, .category-chip, .meta-chip, .seminar-role {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      font-weight: 760;
    }

    .eyebrow {
      gap: 8px;
      padding: 8px 12px;
      border: 1px solid rgba(70,179,133, 0.24);
      color: var(--primary-800);
      background: rgba(var(--primary-50-rgb), 0.76);
      font-size: 0.82rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 0 rgba(70,179,133, 0.36);
      animation: livePulse 1.8s ease-out infinite;
    }
    @keyframes livePulse {
      0% { box-shadow: 0 0 0 0 rgba(70,179,133, 0.38); opacity: 1; }
      70% { box-shadow: 0 0 0 11px rgba(70,179,133, 0); opacity: 0.95; }
      100% { box-shadow: 0 0 0 0 rgba(70,179,133, 0); opacity: 1; }
    }

    h1 {
      margin: 20px 0 22px;
      max-width: 770px;
      font-size: clamp(2.6rem, 6vw, 5.2rem);
      line-height: 0.98;
      letter-spacing: -0.055em;
    }
    .gradient-text {
      color: transparent;
      background: linear-gradient(110deg, var(--primary-600), var(--accent-blue-500) 48%, var(--accent-violet-500));
      background-clip: text;
      -webkit-background-clip: text;
    }
    .hero-copy { max-width: 710px; color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.2rem); }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

    .button {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 17px;
      border: 1px solid transparent;
      border-radius: 13px;
      cursor: pointer;
      text-decoration: none;
      font-weight: 740;
      transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
    }
    .button:hover { transform: translateY(-1px); }
    .button:disabled { cursor: not-allowed; opacity: 0.48; transform: none; }
    .button-primary { color: var(--on-panel-dark); background: linear-gradient(135deg, var(--primary-700), var(--primary-800)); box-shadow: 0 12px 24px rgba(var(--primary-900-rgb), 0.20); }
    .button-primary:hover { box-shadow: 0 16px 28px rgba(var(--primary-900-rgb), 0.26); }
    .button-secondary { border-color: var(--line); background: rgba(var(--surface-rgb), 0.92); }
    .button-accent { color: var(--primary-800); border-color: rgba(70,179,133,0.28); background: rgba(var(--primary-50-rgb), 0.92); }
    .button-quiet { min-height: 38px; padding-inline: 12px; border-color: var(--line); background: var(--neutral-0); font-size: 0.84rem; }
    .button-danger { color: #594f95; border-color: rgba(89,79,149,0.18); background: var(--neutral-50); }

    .hero-visual { min-height: 440px; position: relative; display: grid; place-items: center; }
    .orbit {
      width: min(100%, 430px);
      aspect-ratio: 1;
      position: relative;
      border-radius: 50%;
      border: 1px solid rgba(152,143,227, 0.22);
      background:
        radial-gradient(circle at 50% 42%, rgba(var(--surface-rgb), 0.96) 0 34%, transparent 35%),
        conic-gradient(from 160deg, rgba(70,179,133,0.16), rgba(64,167,220,0.30), rgba(152,143,227,0.25), rgba(70,179,133,0.16));
      box-shadow: inset 0 0 80px rgba(var(--surface-rgb), 0.78), 0 26px 70px rgba(var(--ink-rgb), 0.10);
    }
    .orbit::before, .orbit::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      border: 1px dashed rgba(70,179,133, 0.34);
      inset: 11%;
    }
    .orbit::after { inset: 25%; border-color: rgba(152,143,227, 0.34); }
    .visual-center {
      position: absolute;
      inset: 33%;
      display: grid;
      place-items: center;
      text-align: center;
      border-radius: 28px;
      color: var(--on-panel-dark);
      background: linear-gradient(145deg, var(--primary-800), var(--primary-700));
      box-shadow: 0 22px 45px rgba(var(--primary-900-rgb), 0.20);
    }
    .visual-center strong { font-size: 2.2rem; line-height: 1; }
    .visual-center span { font-size: 0.76rem; opacity: 0.76; }
    .floating-card {
      position: absolute;
      min-width: 138px;
      padding: 13px 15px;
      border: 1px solid rgba(var(--surface-rgb), 0.85);
      border-radius: 16px;
      background: rgba(var(--surface-rgb), 0.82);
      box-shadow: var(--shadow);
      font-weight: 780;
    }
    .floating-card span { display: block; margin-top: 3px; color: var(--muted); font-size: 0.72rem; font-weight: 610; }
    .f1 { top: 20px; left: 3%; }
    .f2 { top: 26%; right: -2%; }
    .f3 { bottom: 12%; left: -2%; }
    .f4 { right: 5%; bottom: 2%; }

    section { padding: 54px 0; }
    .section-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 24px;
    }
    .section-heading h2 { margin-bottom: 8px; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.04; letter-spacing: -0.045em; }
    .section-heading p { max-width: 720px; margin-bottom: 0; color: var(--muted); }

    .seminar-view-switch {
      display: inline-flex;
      gap: 6px;
      margin: 0 0 24px;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(var(--surface-rgb), 0.78);
      box-shadow: 0 10px 30px rgba(var(--ink-rgb), 0.05);
    }
    .seminar-view-switch button {
      min-height: 42px;
      padding: 0 15px;
      border: 0;
      border-radius: 11px;
      cursor: pointer;
      color: var(--neutral-600);
      background: transparent;
      font-weight: 780;
    }
    .seminar-view-switch button.active {
      color: var(--on-panel-dark);
      background: linear-gradient(135deg, var(--primary-700), var(--primary-800));
      box-shadow: 0 8px 20px rgba(31,36,35,0.16);
    }
    .catalog-shell[hidden], .planner-shell[hidden] { display: none !important; }
    .catalog-shell {
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(var(--surface-rgb), 0.78);
      box-shadow: var(--shadow);
    }
    .catalog-toolbar {
      display: grid;
      grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 0.72fr));
      gap: 10px;
      align-items: end;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--line);
    }
    .catalog-filter label {
      margin-bottom: 6px;
      color: var(--neutral-600);
      font-size: 0.72rem;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    .catalog-filter input,
    .catalog-filter select {
      width: 100%;
      min-height: 44px;
      padding: 0 11px;
      border: 1px solid var(--line);
      border-radius: 11px;
      outline: none;
      color: var(--ink);
      background: var(--neutral-0);
    }
    .catalog-filter input:focus,
    .catalog-filter select:focus {
      border-color: rgba(70,179,133,0.68);
      box-shadow: 0 0 0 4px rgba(70,179,133,0.10);
    }
    .catalog-status-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin: 18px 0 20px;
    }
    .catalog-result-count {
      color: var(--muted);
      font-size: 0.88rem;
    }
    .catalog-result-count strong { color: var(--ink); font-size: 1.04rem; }
    .catalog-display-switch {
      display: inline-flex;
      gap: 5px;
      padding: 4px;
      border-radius: 12px;
      background: var(--surface-soft);
    }
    .catalog-display-switch button {
      min-height: 34px;
      padding: 0 11px;
      border: 0;
      border-radius: 9px;
      cursor: pointer;
      color: var(--neutral-600);
      background: transparent;
      font-size: 0.78rem;
      font-weight: 760;
    }
    .catalog-display-switch button.active {
      color: var(--ink);
      background: var(--neutral-0);
      box-shadow: 0 5px 14px rgba(var(--ink-rgb), 0.08);
    }
    .catalog-category { margin-top: 28px; }
    .catalog-category:first-child { margin-top: 0; }
    .catalog-category-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 12px;
    }
    .catalog-category-head h3 {
      margin: 0;
      font-size: 1.2rem;
      letter-spacing: -0.025em;
    }
    .catalog-category-count {
      min-width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      color: var(--primary-800);
      background: var(--surface-soft);
      font-size: 0.75rem;
      font-weight: 820;
    }
    .catalog-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .catalog-card {
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 17px;
      border: 1px solid var(--line);
      border-radius: 17px;
      cursor: pointer;
      background: var(--neutral-0);
      transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
    }
    .catalog-card:hover {
      transform: translateY(-2px);
      border-color: rgba(70,179,133,0.38);
      box-shadow: 0 14px 32px rgba(var(--ink-rgb), 0.08);
    }
    .catalog-card.selected {
      border-color: rgba(70,179,133,0.52);
      background: rgba(70,179,133,0.055);
      box-shadow: 0 14px 32px rgba(70,179,133,0.10);
    }
    .catalog-card-top {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }
    .catalog-card-id {
      display: inline-flex;
      padding: 5px 8px;
      border-radius: 8px;
      color: var(--primary-800);
      background: var(--surface-soft);
      font-size: 0.68rem;
      font-weight: 840;
      letter-spacing: 0.05em;
    }
    .catalog-card-category {
      color: var(--neutral-500);
      font-size: 0.68rem;
      font-weight: 720;
      text-align: right;
    }
    .catalog-card h4 {
      margin: 0 0 8px;
      font-size: 1rem;
      line-height: 1.25;
    }
    .catalog-card p {
      display: -webkit-box;
      overflow: hidden;
      margin: 0 0 13px;
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.48;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .catalog-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
    .catalog-card-meta span {
      display: inline-flex;
      min-height: 24px;
      align-items: center;
      gap: 4px;
      padding: 0 8px;
      border-radius: 999px;
      color: var(--neutral-600);
      background: var(--surface);
      font-size: 0.66rem;
      font-weight: 720;
    }
    .catalog-card-meta strong { color: var(--neutral-700); font-weight: 820; }
    .catalog-select-control {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 13px 0 0;
      padding: 9px 10px;
      border: 1px solid var(--neutral-200);
      border-radius: 11px;
      cursor: pointer;
      color: var(--neutral-700);
      background: var(--surface);
      font-size: 0.78rem;
      font-weight: 780;
    }
    .catalog-select-control input,
    .catalog-matrix-select input {
      width: 18px;
      height: 18px;
      margin: 0;
      accent-color: var(--green);
      cursor: pointer;
    }
    .catalog-card.selected .catalog-select-control {
      border-color: rgba(70,179,133,0.32);
      color: var(--primary-800);
      background: rgba(70,179,133,0.09);
    }
    .catalog-card-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
    .catalog-card-actions .button { min-height: 36px; padding-inline: 11px; font-size: 0.76rem; }
    .catalog-empty {
      padding: 38px 20px;
      border: 1px dashed var(--line);
      border-radius: 16px;
      color: var(--muted);
      text-align: center;
      background: rgba(var(--surface-rgb), 0.6);
    }
    .catalog-matrix-wrap {
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--neutral-0);
      -webkit-overflow-scrolling: touch;
    }
    .catalog-matrix {
      width: 100%;
      min-width: 0;
      table-layout: fixed;
      border-collapse: collapse;
      font-size: 0.72rem;
    }
    .catalog-matrix th,
    .catalog-matrix td {
      padding: 10px 9px;
      border-bottom: 1px solid var(--neutral-100);
      text-align: center;
      vertical-align: middle;
    }
    .catalog-matrix th {
      position: sticky;
      top: 0;
      z-index: 2;
      color: var(--neutral-600);
      background: var(--surface);
      font-size: 0.69rem;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }
    .catalog-matrix th:first-child,
    .catalog-matrix td:first-child {
      width: 29%;
      min-width: 0;
      text-align: left;
    }
    .catalog-matrix th:nth-child(2), .catalog-matrix td:nth-child(2) { width: 62px; }
    .catalog-matrix th:nth-child(3), .catalog-matrix td:nth-child(3) { width: 72px; }
    .catalog-matrix th:nth-child(4), .catalog-matrix td:nth-child(4) { width: 112px; }
    .catalog-matrix th:last-child, .catalog-matrix td:last-child { width: 46px; }
    .catalog-matrix-title {
      display: inline;
      padding: 0;
      border: 0;
      cursor: pointer;
      color: var(--ink);
      background: transparent;
      font: inherit;
      font-size: 0.80rem;
      font-weight: 760;
      line-height: 1.25;
      text-align: left;
      text-decoration: none;
    }
    .catalog-matrix-title:hover { color: var(--primary-700); text-decoration: underline; text-underline-offset: 2px; }
    .catalog-matrix tr.selected td { background: rgba(70,179,133,0.045); }
    .catalog-matrix-select { display: grid; place-items: center; }
    .catalog-matrix-id { display: block; margin-bottom: 2px; color: var(--neutral-500); font-size: 0.64rem; font-weight: 820; }
    .catalog-check { color: var(--primary-700); font-size: 1rem; font-weight: 900; }
    .catalog-no { color: var(--neutral-300); }
    .catalog-matrix .details-button { margin-inline: auto; }
    .career-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .career-card {
      min-height: 185px;
      position: relative;
      overflow: hidden;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 21px;
      cursor: pointer;
      background: rgba(var(--surface-rgb), 0.84);
      box-shadow: 0 10px 30px rgba(var(--ink-rgb), 0.05);
      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }
    .career-card::after {
      content: "";
      width: 145px;
      height: 145px;
      position: absolute;
      top: -58px;
      right: -46px;
      border-radius: 50%;
      background: var(--accent);
      filter: blur(1px);
    }
    .career-card:hover, .career-card:focus-visible { transform: translateY(-3px); border-color: rgba(70,179,133,0.36); box-shadow: var(--shadow); outline: none; }
    .career-code { display: inline-flex; margin-bottom: 25px; padding: 6px 9px; border-radius: 9px; color: var(--primary-800); background: var(--surface-soft); font-size: 0.74rem; font-weight: 820; letter-spacing: 0.05em; }
    .career-card strong { display: block; max-width: 265px; margin-bottom: 7px; font-size: 1.08rem; line-height: 1.24; }
    .career-card p { margin: 0; color: var(--muted); font-size: 0.86rem; }

    .career-detail {
      display: none;
      margin-top: 24px;
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(var(--surface-rgb), 0.92);
      box-shadow: var(--shadow-strong);
      scroll-margin-top: 90px;
    }
    .career-detail.active { display: block; }
    .career-detail-header { display: flex; align-items: start; justify-content: space-between; gap: 22px; }
    .career-detail-header h3 { margin: 12px 0 8px; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.06; letter-spacing: -0.04em; }
    .career-detail-header p { max-width: 800px; color: var(--muted); }
    .badge { min-height: 29px; padding: 0 10px; color: var(--primary-800); background: rgba(var(--primary-50-rgb), 0.96); font-size: 0.76rem; letter-spacing: 0.04em; }

    .tabs { display: flex; gap: 8px; margin: 24px 0; padding: 6px; border-radius: 15px; background: var(--surface-soft); }
    .tab { flex: 1; min-height: 43px; border: 0; border-radius: 11px; cursor: pointer; color: var(--muted); background: transparent; font-weight: 760; }
    .tab.active { color: var(--ink); background: var(--neutral-0); box-shadow: 0 6px 18px rgba(var(--ink-rgb), 0.08); }
    .year-panel { display: none; }
    .year-panel.active { display: block; }

    .year-intro {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 19px;
      border: 1px solid rgba(64,167,220,0.24);
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(170,221,251,0.22), rgba(210,207,255,0.22));
    }
    .year-intro-main { display: flex; align-items: center; gap: 16px; }
    .year-number { width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 16px; color: var(--on-panel-dark); background: linear-gradient(135deg, var(--primary-700), var(--primary-800)); font-size: 1.45rem; font-weight: 860; }
    .year-intro h4 { margin: 0 0 3px; font-size: 1.18rem; }
    .year-intro p { margin: 0; color: var(--muted); font-size: 0.88rem; }
    .year-intro-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }

    .package-section { margin-top: 30px; }
    .subheading { margin: 0 0 15px; }
    .subheading h4 { margin-bottom: 4px; font-size: 1.12rem; }
    .subheading p { margin: 0; color: var(--muted); font-size: 0.87rem; }
    .package-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .package-card {
      display: flex;
      flex-direction: column;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 19px;
      background: var(--neutral-0);
      transition: border-color 160ms ease, box-shadow 160ms ease;
    }
    .package-card.has-selection { border-color: rgba(70,179,133,0.45); box-shadow: 0 12px 32px rgba(17,119,82,0.10); }
    .package-head { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start; margin-bottom: 16px; }
    .package-letter { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--on-panel-dark); background: linear-gradient(145deg, var(--primary-600), var(--primary-700)); font-weight: 860; }
    .package-head h4 { margin: 0 0 4px; font-size: 1.04rem; }
    .package-head p { margin: 0; color: var(--muted); font-size: 0.82rem; }
    .package-label { display: block; margin: 5px 0 7px; color: var(--neutral-500); font-size: 0.70rem; font-weight: 820; letter-spacing: 0.06em; text-transform: uppercase; }
    .package-seminars { display: grid; gap: 7px; }
    .package-seminar {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 9px;
      align-items: center;
      min-height: 42px;
      padding: 8px 9px;
      border: 1px solid var(--neutral-200);
      border-radius: 11px;
      background: var(--surface);
    }
    .package-seminar.optional { border-style: dashed; background: var(--surface); }
    .package-seminar.selected { border-color: rgba(70,179,133,0.36); background: rgba(var(--primary-50-rgb), 0.92); }
    .package-seminar input, .seminar-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--green); cursor: pointer; }
    .package-seminar label { cursor: pointer; font-size: 0.84rem; line-height: 1.25; }
    .seminar-role { min-height: 22px; padding: 0 7px; margin-left: 5px; color: var(--neutral-700); background: var(--neutral-100); font-size: 0.62rem; vertical-align: middle; }
    .seminar-id { display: inline-flex; margin-right: 6px; color: var(--neutral-600); font-size: 0.68rem; font-weight: 820; letter-spacing: 0.04em; }
    .dialog-website-note { margin-top: 16px; }
    .dialog-website-link[hidden] { display: none !important; }
    .year-exception-disclosure {
      margin: -10px 0 24px;
      border: 1px solid rgba(152,143,227,0.22);
      border-radius: 15px;
      background: rgba(210,207,255,0.28);
      overflow: hidden;
    }
    .year-exception-disclosure summary {
      min-height: 46px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 0 15px;
      cursor: pointer;
      color: var(--accent-violet-700);
      font-size: 0.84rem;
      font-weight: 780;
      list-style: none;
      user-select: none;
    }
    .year-exception-disclosure summary::-webkit-details-marker { display: none; }
    .year-exception-disclosure summary:hover { background: rgba(210,207,255,0.40); }
    .year-exception-arrow {
      width: 26px;
      height: 26px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: var(--accent-violet-700);
      background: rgba(210,207,255,0.70);
      font-size: 1rem;
      transition: transform 180ms ease;
    }
    .year-exception-disclosure[open] .year-exception-arrow { transform: rotate(180deg); }
    .year-exception-content {
      padding: 0 15px 14px;
      color: var(--neutral-600);
      font-size: 0.84rem;
      line-height: 1.5;
    }
    .further-seminars {
      margin-top: 30px;
      padding: 22px;
      border: 1px solid rgba(70,179,133,0.22);
      border-radius: 21px;
      background: rgba(var(--surface-rgb), 0.72);
    }
    .further-seminars .subheading { margin-bottom: 15px; }
    .further-seminars-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

    

    

    

    

    

    
    .package-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; }
    .package-actions .button { min-height: 38px; padding-inline: 12px; font-size: 0.80rem; }

    .details-button {
      width: 29px;
      height: 29px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 9px;
      cursor: pointer;
      color: var(--neutral-600);
      background: var(--neutral-0);
      font-size: 0.75rem;
      font-weight: 860;
    }
    .details-button:hover { border-color: rgba(70,179,133,0.45); color: var(--primary-700); }

    .builder {
      margin-top: 30px;
      padding: 22px;
      border: 1px solid rgba(152,143,227,0.24);
      border-radius: 21px;
      background: linear-gradient(145deg, rgba(210,207,255,0.26), rgba(170,221,251,0.22));
      scroll-margin-top: 90px;
    }
    .builder-head, .builder-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
    .builder-head h4 { margin: 0 0 4px; font-size: 1.24rem; }
    .builder-head p { margin: 0; color: var(--muted); font-size: 0.86rem; }
    .category-group { margin-top: 20px; }
    .category-title { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; font-size: 0.88rem; font-weight: 820; }
    .category-title span { min-width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: var(--neutral-0); font-size: 0.70rem; }
    .seminar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .seminar-choice {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: center;
      min-height: 58px;
      padding: 10px 11px;
      border: 1px solid rgba(215,220,219,0.95);
      border-radius: 12px;
      background: rgba(var(--surface-rgb), 0.92);
    }
    .seminar-choice.selected { border-color: rgba(70,179,133,0.43); background: rgba(var(--primary-50-rgb), 0.92); }
    .seminar-choice label { cursor: pointer; }
    .seminar-choice strong { display: block; font-size: 0.84rem; line-height: 1.23; }
    .category-chip { min-height: 21px; padding: 0 7px; margin-top: 5px; color: var(--neutral-700); background: var(--surface-soft); font-size: 0.62rem; }
    .builder-footer { margin-top: 20px; padding-top: 17px; border-top: 1px solid rgba(152,143,227,0.16); }
    .builder-count { color: var(--muted); font-size: 0.85rem; }
    .builder-count strong { color: var(--ink); font-size: 1.25rem; }
    .builder.is-editing { border-color: rgba(152,143,227,0.40); box-shadow: 0 16px 42px rgba(89,79,149,0.10); }
    .editing-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
      padding: 13px 14px;
      border: 1px solid rgba(152,143,227,0.24);
      border-radius: 14px;
      background: rgba(210,207,255,0.34);
    }
    .editing-banner strong { display: block; font-size: 0.91rem; }
    .editing-banner span { display: block; margin-top: 2px; color: var(--neutral-600); font-size: 0.78rem; }
    .save-hint { margin-top: 8px; color: var(--neutral-600); font-size: 0.78rem; }

    .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .step { padding: 22px; border: 1px solid var(--line); border-radius: 19px; background: rgba(var(--surface-rgb), 0.75); }
    .step-number { width: 35px; height: 35px; display: grid; place-items: center; margin-bottom: 21px; border-radius: 11px; color: var(--on-panel-dark); background: var(--ink); font-weight: 820; }
    .step h3 { margin-bottom: 7px; font-size: 1rem; }
    .step p { margin: 0; color: var(--muted); font-size: 0.85rem; }

    .contact-shell {
      display: grid;
      grid-template-columns: 0.86fr 1.14fr;
      gap: 30px;
      padding: 30px;
      border-radius: var(--radius-lg);
      color: var(--on-panel-dark);
      background: linear-gradient(135deg, var(--primary-700), var(--primary-800));
      box-shadow: var(--shadow-strong);
    }
    .contact-copy h2 { margin-bottom: 12px; font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.02; letter-spacing: -0.045em; }
    .contact-copy > p { color: rgba(var(--surface-rgb), 0.68); }
    .contact-points { display: grid; gap: 10px; margin-top: 22px; }
    .contact-point { display: flex; gap: 10px; color: rgba(var(--surface-rgb), 0.82); font-size: 0.86rem; }
    .contact-point::before { content: "✓"; color: var(--on-panel-accent); font-weight: 850; }
    .contact-form { padding: 21px; border-radius: 20px; color: var(--ink); background: var(--neutral-0); }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .form-grid .full { grid-column: 1 / -1; }
    label { display: block; margin-bottom: 6px; font-size: 0.78rem; font-weight: 760; }
    input[type="text"], input[type="email"], input[type="number"], textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 11px;
      outline: none;
      background: var(--neutral-0);
    }
    input[type="text"], input[type="email"], input[type="number"] { min-height: 45px; padding: 0 12px; }
    textarea { min-height: 116px; padding: 11px 12px; resize: vertical; }
    input:focus, textarea:focus { border-color: rgba(17,119,82,0.68); box-shadow: 0 0 0 4px rgba(70,179,133,0.14); }
    textarea[readonly] { color: var(--neutral-700); background: var(--surface); }
    .hidden-field { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
    .form-note { margin: 12px 0 0; color: var(--muted); font-size: 0.76rem; line-height: 1.45; }

    .selection-tray {
      display: none;
      width: min(440px, calc(100% - 24px));
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 50;
      padding: 16px;
      border: 1px solid rgba(var(--surface-rgb), 0.75);
      border-radius: 18px;
      color: var(--on-panel-dark);
      background: rgba(31,36,35,0.95);
      box-shadow: 0 20px 55px rgba(31,36,35,0.28);
    }
    .selection-tray.active { display: block; }
    .selection-tray-top { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
    .selection-tray strong { display: block; }
    .selection-tray p { margin: 2px 0 0; color: rgba(var(--surface-rgb), 0.68); font-size: 0.79rem; }
    .selection-tray-actions { display: flex; gap: 8px; margin-top: 13px; }
    .selection-tray .button { flex: 1; min-height: 40px; }
    .selection-tray .button-secondary { color: var(--on-panel-dark); border-color: rgba(var(--surface-rgb), 0.18); background: rgba(var(--surface-rgb), 0.08); }
    .selection-tray .button-primary { color: var(--on-panel-dark); background: linear-gradient(135deg, var(--primary-700), var(--primary-800)); }

    dialog {
      width: min(680px, calc(100% - 28px));
      max-height: min(820px, calc(100vh - 28px));
      padding: 0;
      border: 0;
      border-radius: 24px;
      color: var(--ink);
      background: var(--neutral-0);
      box-shadow: 0 30px 100px rgba(31,36,35,0.28);
    }
    dialog.wide { width: min(900px, calc(100% - 28px)); }
    dialog::backdrop { background: rgba(var(--ink-rgb), 0.42); backdrop-filter: blur(10px); }
    .dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 24px 24px 18px; border-bottom: 1px solid var(--line); }
    .dialog-head h3 { margin: 8px 0 0; font-size: clamp(1.45rem, 4vw, 2rem); line-height: 1.15; letter-spacing: -0.035em; }
    .dialog-close { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--neutral-0); font-size: 1.2rem; }
    .dialog-body { padding: 22px 24px 24px; overflow: auto; }
    .dialog-body > p { color: var(--muted); }
    .dialog-note { padding: 13px 14px; border-radius: 13px; color: var(--neutral-600); background: var(--surface-soft); font-size: 0.84rem; }
    .dialog-prerequisite-note {
      margin: 0 0 16px;
      padding: 13px 14px;
      border: 1px solid rgba(152,143,227,0.24);
      border-radius: 14px;
      color: var(--neutral-600);
      background: rgba(152,143,227,0.09);
      font-size: 0.84rem;
      line-height: 1.5;
    }
    .dialog-prerequisite-note strong { display: block; margin-bottom: 3px; color: var(--accent-violet-700); }
    .dialog-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
    .meta-chip { min-height: 28px; padding: 0 10px; color: var(--neutral-700); background: var(--surface-soft); font-size: 0.75rem; }
    .dialog-actions { display: flex; gap: 10px; margin-top: 20px; }

    .add-summary { padding: 14px; border-radius: 14px; background: var(--surface-soft); }
    .add-summary strong { display: block; margin-bottom: 4px; }
    .add-summary p { margin: 0; color: var(--muted); font-size: 0.84rem; }
    .dialog-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 17px; }
    .dialog-form-grid .full { grid-column: 1 / -1; }

    .basket-list { display: grid; gap: 12px; }
    .basket-empty { padding: 28px; border: 1px dashed var(--line); border-radius: 15px; color: var(--muted); text-align: center; }
    .basket-item { padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 8px 20px rgba(var(--ink-rgb), 0.04); }
    .basket-item-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; }
    .basket-item h4 { margin: 0 0 3px; font-size: 1rem; }
    .basket-item p { margin: 0; color: var(--muted); font-size: 0.80rem; }
    .basket-item-controls { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
    .basket-item-controls input { width: 72px; min-height: 38px; }
    .basket-item-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .basket-item-actions .button { min-height: 37px; padding-inline: 11px; font-size: 0.79rem; }
    .basket-seminars { margin: 12px 0 0; padding: 10px 0 0 18px; border-top: 1px solid var(--line); color: var(--neutral-700); font-size: 0.80rem; columns: 2; }
    .basket-total { display: flex; justify-content: space-between; gap: 18px; margin-top: 16px; padding: 14px; border-radius: 14px; background: var(--surface-soft); }
    .basket-total strong { font-size: 1.05rem; }

    footer { padding: 30px 0 115px; color: var(--muted); font-size: 0.84rem; }
    .footer-inner { display: flex; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); padding-top: 22px; }

    @media (max-width: 1100px) {
      .catalog-matrix { min-width: 1060px; table-layout: auto; }
      .catalog-matrix th:first-child,
      .catalog-matrix td:first-child { width: 290px; min-width: 290px; }
    }

    @media (max-width: 960px) {
      .nav-links { display: none; }
      .hero-grid, .contact-shell { grid-template-columns: 1fr; }
      .hero-visual { min-height: 390px; }
      .career-grid { grid-template-columns: repeat(2, 1fr); }
      .package-grid, .seminar-grid, .further-seminars-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 680px) {
      .hero { padding-top: 52px; }
      .hero-visual { min-height: 345px; }
      .orbit { width: 330px; }
      .floating-card { min-width: 118px; padding: 10px 11px; font-size: 0.8rem; }
      .seminar-view-switch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
      .seminar-view-switch button { min-height: 44px; padding-inline: 9px; font-size: 0.78rem; }
      .catalog-shell { padding: 12px; border-radius: 18px; }
      .catalog-toolbar { grid-template-columns: 1fr; gap: 9px; }
      .catalog-status-row { align-items: stretch; flex-direction: column; margin: 14px 0 16px; }
      .catalog-display-switch { align-self: flex-start; }
      .catalog-card-grid { grid-template-columns: 1fr; }
      .catalog-card { padding: 14px; }
      .catalog-matrix { min-width: 1060px; }
      .career-grid, .steps, .form-grid, .dialog-form-grid { grid-template-columns: 1fr; }
      .form-grid .full, .dialog-form-grid .full { grid-column: auto; }
      .career-detail { padding: 17px; }
      .career-detail-header, .year-intro, .builder-head, .builder-footer, .section-heading { align-items: stretch; flex-direction: column; }
      .year-intro-actions { justify-content: stretch; }
      .year-intro-actions .button { flex: 1; }
      .tabs { overflow-x: auto; }
      .tab { min-width: 155px; }
      .dialog-actions, .selection-tray-actions { flex-direction: column; align-items: stretch; }

      

      .basket-item-head { flex-direction: column; }
      .basket-seminars { columns: 1; }
      .selection-tray { right: 10px; bottom: 10px; width: calc(100% - 20px); }
      html.seminarplaner-autoheight .selection-tray {
        right: 8px !important;
        width: min(300px, calc(100% - 16px)) !important;
        padding: 10px !important;
        border-radius: 14px !important;
      }
      html.seminarplaner-autoheight .selection-tray-actions {
        flex-direction: row !important;
        gap: 5px !important;
        margin-top: 8px !important;
      }
      html.seminarplaner-autoheight .selection-tray .button {
        min-height: 34px !important;
        padding: 5px 7px !important;
        border-radius: 8px !important;
        font-size: 0.68rem !important;
        line-height: 1.12 !important;
      }
      .footer-inner { flex-direction: column; }
      .mini-cart-button span:first-child { display: none; }
    }
    #signetContactButton { width: 100%; }
    .form-note.is-ready { color: var(--primary-800); }

html.seminarplaner-autoheight,
    html.seminarplaner-autoheight body {
      min-height: 0 !important;
      overflow-x: hidden !important;
      overflow-y: hidden !important;
    }

    html.seminarplaner-autoheight .selection-tray:not(.active) {
      display: none !important;
    }

    html.seminarplaner-autoheight .selection-tray.active {
      display: block !important;
      pointer-events: auto !important;
    }

    /* In der Einbettung bleibt die originale Auswahlleiste innerhalb der App. */
    html.seminarplaner-autoheight .selection-tray {
      position: absolute !important;
      right: 18px !important;
      bottom: auto !important;
      z-index: 9000 !important;
      margin: 0 !important;
      transform: none !important;
      transition: none !important;
      will-change: top;
    }

    html.seminarplaner-autoheight .selection-tray.active {
      display: block !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }

    html.seminarplaner-autoheight dialog[open] {
      position: absolute !important;
      left: 50% !important;
      right: auto !important;
      bottom: auto !important;
      margin: 0 !important;
      transform: translateX(-50%) !important;
      z-index: 10001 !important;
    }

    html.seminarplaner-autoheight dialog::backdrop {
      display: none !important;
    }

    html.seminarplaner-autoheight #seminarplaner-modal-overlay {
      display: none;
      position: absolute;
      left: 0;
      width: 100%;
      min-height: 1px;
      z-index: 10000;
      cursor: pointer;
      background: rgba(var(--ink-rgb), 0.56);
      transform: translateZ(0);
    }

    html.seminarplaner-autoheight #seminarplaner-modal-overlay.active {
      display: block !important;
    }

dialog[open] {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      overflow: hidden;
    }

    dialog .dialog-body {
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
    }


    @media (max-width: 760px) {
      .container {
        width: min(calc(100% - 16px), var(--max));
      }

      section { padding: 38px 0; }
      .hero { padding: 42px 0 28px; }
      .hero-grid { gap: 20px; }
      .hero-visual { min-height: 270px; }
      .orbit { width: min(100%, 280px); }
      .visual-center strong { font-size: 1.85rem; }
      .floating-card { min-width: 104px; padding: 9px 10px; font-size: 0.74rem; }
      .f1 { top: 4px; left: 0; }
      .f2 { top: 23%; right: 0; }
      .f3 { bottom: 13%; left: 0; }
      .f4 { right: 0; bottom: 0; }

      h1 { font-size: clamp(2.2rem, 12vw, 3.5rem); }
      .section-heading h2 { font-size: clamp(1.75rem, 9vw, 2.5rem); }
      .section-heading { margin-bottom: 18px; }

      .career-detail,
      .further-seminars,
      .builder,
      .contact-shell { padding: 14px; border-radius: 18px; }
      .package-card { padding: 15px; }
      .year-intro { padding: 14px; }
      .tabs { margin: 18px 0; padding: 4px; }
      .tab { min-width: 140px; min-height: 42px; }
      .seminar-choice { padding: 9px; gap: 8px; }
      .contact-form { padding: 15px; }

      dialog,
      dialog.wide {
        width: calc(100% - 16px);
        border-radius: 18px;
      }

      .dialog-head {
        gap: 12px;
        padding: 15px 14px 12px;
      }
      .dialog-head h3 { font-size: clamp(1.25rem, 6.5vw, 1.65rem); }
      .dialog-close { width: 38px; height: 38px; flex: 0 0 auto; }
      .dialog-body { padding: 14px; }
      .dialog-actions {
        position: sticky;
        bottom: -14px;
        z-index: 3;
        margin-top: 16px;
        padding: 10px 0 max(2px, env(safe-area-inset-bottom));
        background: linear-gradient(to bottom, rgba(var(--surface-rgb), 0), var(--surface) 18px, var(--surface));
      }


      

      

      

      

      .selection-tray {
        left: 6px;
        right: 6px;
        width: auto;
        padding: 12px;
      }
    }

    @media (max-width: 380px) {
      .container { width: calc(100% - 10px); }
      .hero-visual { min-height: 245px; }
      .orbit { width: 250px; }
      .floating-card span { display: none; }

    }


    button, .button, .mini-cart-button, .tab, .seminar-view-switch button,
    .catalog-display-switch button, .details-button,
    .badge, .category-chip, .meta-chip, .seminar-role,
    .catalog-card-id, .catalog-category-count, .catalog-card-meta span,
    .catalog-select-control, .career-code, .package-label {
      line-height: 1.15;
    }

    button, .button, .mini-cart-button, .tab, .seminar-view-switch button,
    .catalog-display-switch button, .details-button {
      align-items: center;
      justify-content: center;
      padding-top: 1px;
    }

    .button { min-height: 44px; font-size: 0.86rem; font-weight: 700; }
    .button-quiet { min-height: 40px; font-size: 0.80rem; }
    .details-button { width: 32px; height: 32px; font-size: 0.82rem; font-weight: 800; }

    .badge, .meta-chip, .category-chip, .seminar-role, .career-code,
    .catalog-card-id, .catalog-card-meta span, .catalog-category-count {
      min-height: 29px;
      display: inline-flex;
      align-items: center;
      padding: 2px 10px 1px;
      color: var(--neutral-700);
      background: var(--neutral-100);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0;
    }
    .badge, .career-code, .catalog-card-id {
      color: var(--primary-800);
      background: var(--primary-50);
    }
    .seminar-role { min-height: 25px; padding-inline: 8px; font-size: 0.72rem; }
    .category-chip { margin-top: 6px; }
    .catalog-card-meta { gap: 7px; }
    .catalog-card-meta span { min-height: 30px; font-size: 0.75rem; }
    .catalog-card-meta strong { color: var(--neutral-800); font-weight: 700; }

    .seminar-id { color: var(--neutral-600); font-size: 0.74rem; font-weight: 700; }
    .package-label { color: var(--neutral-600); font-size: 0.74rem; font-weight: 700; }
    .package-seminar label { font-size: 0.88rem; line-height: 1.35; }

    .seminar-view-switch button { min-height: 44px; color: var(--neutral-700); font-size: 0.86rem; font-weight: 700; }
    .seminar-view-switch button.active { color: var(--on-panel-dark); }
    .catalog-display-switch button { min-height: 38px; color: var(--neutral-700); font-size: 0.82rem; font-weight: 700; }
    .catalog-display-switch button.active { color: var(--neutral-800); }
    .catalog-filter label { color: var(--neutral-700); font-size: 0.76rem; font-weight: 700; }
    .catalog-filter input, .catalog-filter select,
    input[type="text"], input[type="email"], input[type="number"], textarea, select {
      color: var(--neutral-800);
      border-color: var(--neutral-200);
      background: var(--neutral-0);
      font-size: 0.88rem;
    }
    .catalog-filter input, .catalog-filter select, select { min-height: 46px; }
    .field-hint { margin: 6px 0 0; color: var(--neutral-600); font-size: 0.78rem; line-height: 1.4; }
    .required-marker { color: var(--primary-800); font-weight: 800; }

    .catalog-select-control {
      min-height: 42px;
      color: var(--neutral-800);
      border-color: var(--neutral-200);
      background: var(--neutral-50);
      font-size: 0.82rem;
      font-weight: 700;
    }
    .catalog-card.selected .catalog-select-control {
      color: var(--primary-800);
      border-color: var(--primary-300);
      background: var(--primary-50);
    }

    /* Einheitliche Matrix: Desktop voll sichtbar, kleinere Screens horizontal scrollbar. */
    .catalog-matrix-wrap { overflow-x: visible; }
    .catalog-matrix {
      width: 100%;
      table-layout: fixed;
      font-size: 0.74rem;
    }
    .catalog-matrix thead tr { height: 46px; }
    .catalog-matrix tbody tr { height: 54px; }
    .catalog-matrix th, .catalog-matrix td {
      height: 54px;
      padding: 6px 6px;
      color: var(--neutral-700);
      border-bottom-color: var(--neutral-100);
      vertical-align: middle;
      white-space: nowrap;
      line-height: 1.15;
    }
    .catalog-matrix th {
      height: 46px;
      color: var(--neutral-700);
      background: var(--neutral-50);
      font-size: 0.72rem;
      font-weight: 700;
    }
    .catalog-matrix th:first-child, .catalog-matrix td:first-child { width: 310px; }
    .catalog-matrix th:nth-child(2), .catalog-matrix td:nth-child(2) { width: 54px; }
    .catalog-matrix th:nth-child(3), .catalog-matrix td:nth-child(3) { width: 58px; }
    .catalog-matrix th:nth-child(4), .catalog-matrix td:nth-child(4) { width: 138px; }
    .catalog-matrix th:nth-child(n/**/+5):nth-child(-n/**/+12),
    .catalog-matrix td:nth-child(n/**/+5):nth-child(-n/**/+12) { width: 43px; }
    .catalog-matrix th:last-child, .catalog-matrix td:last-child { width: 42px; }
    .catalog-matrix-seminar {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 7px;
      overflow: hidden;
      white-space: nowrap;
    }
    .catalog-matrix-id {
      flex: 0 0 auto;
      display: inline-flex;
      margin: 0;
      color: var(--primary-800);
      font-size: 0.70rem;
      font-weight: 700;
    }
    .catalog-matrix-title {
      min-width: 0;
      flex: 1 1 auto;
      overflow: hidden;
      padding: 1px 0 0;
      color: var(--neutral-800);
      font-size: 0.78rem;
      font-weight: 700;
      line-height: 1.15;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .catalog-matrix-title:hover { color: var(--primary-700); }
    .catalog-matrix-year { font-size: 0.70rem; }
    .catalog-check { color: var(--primary-700); font-size: 0.95rem; }
    .catalog-no { color: var(--neutral-300); }
    .catalog-matrix tr.selected td { background: var(--primary-50); }

    .dialog-prerequisite-note {
      color: var(--accent-violet-700);
      border-color: var(--accent-violet-500);
      background: var(--accent-violet-200);
    }
    .dialog-prerequisite-note strong { color: var(--accent-violet-700); }
    .year-exception-disclosure {
      border-color: var(--accent-violet-500);
      background: var(--accent-violet-200);
    }
    .year-exception-disclosure summary, .year-exception-content { color: var(--accent-violet-700); }
    .year-exception-arrow { color: var(--accent-violet-700); background: var(--neutral-0); }

    @media (max-width: 1399px) {
      .catalog-matrix-wrap { overflow-x: auto; }
      .catalog-matrix { min-width: 1180px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .eyebrow::before { animation: none; box-shadow: 0 0 0 5px rgba(70,179,133, 0.24); }
    }


    .seminar-detail-status {
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 44px;
      margin-top: 16px;
      padding: 10px 12px;
      border: 1px solid var(--neutral-200);
      border-radius: 12px;
      color: var(--neutral-600);
      background: var(--neutral-50);
      font-size: 0.82rem;
      font-weight: 600;
    }
    .seminar-detail-status[hidden] { display: none !important; }
    .seminar-detail-status.is-loading::before {
      content: "";
      width: 14px;
      height: 14px;
      flex: 0 0 auto;
      border: 2px solid var(--primary-200);
      border-top-color: var(--primary-700);
      border-radius: 50%;
      animation: seminarDetailSpin 700ms linear infinite;
    }
    @keyframes seminarDetailSpin { to { transform: rotate(360deg); } }
    .seminar-detail-status.is-error {
      color: var(--neutral-700);
      border-color: var(--accent-blue-200);
      background: var(--neutral-50);
    }
    .seminar-detail-status a {
      color: var(--accent-blue-700);
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .seminar-detail-sections {
      display: grid;
      gap: 10px;
      margin-top: 16px;
    }
    .seminar-detail-section {
      overflow: hidden;
      border: 1px solid var(--neutral-200);
      border-radius: 14px;
      background: var(--neutral-50);
    }
    .seminar-detail-section summary {
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 14px;
      cursor: pointer;
      color: var(--neutral-800);
      background: var(--neutral-50);
      font-family: var(--font-heading);
      font-size: 0.92rem;
      font-weight: 700;
      line-height: 1.25;
      list-style: none;
      user-select: none;
    }
    .seminar-detail-section summary::-webkit-details-marker { display: none; }
    .seminar-detail-section summary::after {
      content: "+";
      width: 26px;
      height: 26px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: var(--primary-800);
      background: var(--primary-100);
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 700;
      line-height: 1;
    }
    .seminar-detail-section[open] summary {
      border-bottom: 1px solid var(--neutral-200);
      background: var(--neutral-100);
    }
    .seminar-detail-section[open] summary::after { content: "−"; }
    .seminar-detail-content {
      padding: 14px;
      color: var(--neutral-700);
      background: var(--neutral-0);
      font-size: 0.88rem;
      line-height: 1.58;
    }
    .seminar-detail-content > :last-child { margin-bottom: 0; }
    .seminar-detail-content p { margin: 0 0 10px; }
    .seminar-detail-content ul,
    .seminar-detail-content ol {
      margin: 7px 0 12px;
      padding-left: 1.45rem;
      list-style-position: outside;
    }
    .seminar-detail-content li {
      display: list-item;
      padding-left: 0.12rem;
      break-inside: avoid;
      overflow-wrap: anywhere;
    }
    .seminar-detail-content li + li { margin-top: 5px; }
    .seminar-detail-loading-copy,
    .seminar-detail-unavailable-copy {
      margin: 0 !important;
      color: var(--neutral-600);
      font-size: 0.82rem;
    }
    .seminar-detail-loading-copy { font-style: italic; }
    .seminar-detail-content h4 {
      margin: 14px 0 6px;
      color: var(--neutral-800);
      font-family: var(--font-heading);
      font-size: 0.88rem;
      line-height: 1.3;
    }
    .seminar-detail-content h4:first-child { margin-top: 0; }
    #seminarDialog .dialog-body { max-height: min(690px, calc(100vh - 120px)); }


    #seminarDialog[open] {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      overflow: hidden !important;
    }
    #seminarDialog .dialog-body.seminar-info-layout {
      min-height: 0;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      padding: 0 !important;
      overflow: hidden !important;
    }
    #seminarDialog .seminar-info-scroll {
      min-height: 0;
      padding: 22px 24px 18px;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-gutter: stable;
    }
    #seminarDialog .seminar-info-scroll > p {
      color: var(--muted);
    }
    #seminarDialog .seminar-info-actions {
      min-height: 70px;
      display: flex;
      align-items: center;
      margin: 0 !important;
      padding: 12px 24px max(12px, env(safe-area-inset-bottom));
      border-top: 1px solid var(--neutral-200);
      background: var(--neutral-50) !important;
      box-shadow: 0 -10px 28px rgba(var(--ink-rgb), 0.06);
      z-index: 4;
    }
    #seminarDialog .seminar-info-actions #dialogSelectButton {
      width: 100%;
      min-height: 46px;
      margin: 0;
    }

    @media (max-width: 760px) {
      .seminar-detail-section summary { min-height: 46px; padding: 9px 11px; }
      .seminar-detail-content { padding: 12px; font-size: 0.84rem; }
      #seminarDialog .dialog-body { max-height: none; }
      #seminarDialog .seminar-info-scroll { padding: 14px 14px 12px; }
      #seminarDialog .seminar-info-actions {
        min-height: 66px;
        padding: 10px 14px max(10px, env(safe-area-inset-bottom));
      }
    }


    /* Softer green action surfaces with strong AA contrast. */
    .button-primary,
    .seminar-view-switch button.active,
    .visual-center,
    .year-number,
    .package-letter {
      color: var(--primary-900) !important;
      background: var(--primary-100) !important;
      border-color: var(--primary-300) !important;
      box-shadow: 0 10px 24px rgba(var(--primary-900-rgb), 0.10) !important;
    }
    .button-primary:hover,
    .seminar-view-switch button.active:hover {
      color: var(--primary-950) !important;
      background: var(--primary-200) !important;
      box-shadow: 0 12px 26px rgba(var(--primary-900-rgb), 0.14) !important;
    }
    .visual-center strong,
    .visual-center span {
      color: var(--primary-900) !important;
      opacity: 1 !important;
    }
    .visual-center span { font-weight: 600; }
/* Hero orbit labels: opaque, larger and higher contrast. */
    .floating-card {
      color: var(--neutral-800);
      background: var(--neutral-50);
      border-color: var(--neutral-200);
      box-shadow: 0 16px 34px rgba(var(--ink-rgb), 0.10);
      font-size: 0.90rem;
      font-weight: 700;
      line-height: 1.22;
    }
    .floating-card span {
      margin-top: 5px;
      color: var(--neutral-600);
      font-size: 0.76rem;
      font-weight: 600;
      line-height: 1.3;
    }

    /* Package rows: ID, title and role share the same true vertical center. */
    .package-seminar {
      min-height: 48px;
      align-items: center;
    }
    .package-seminar > input,
    .package-seminar > .details-button {
      align-self: center;
    }
    .package-seminar label {
      min-width: 0;
      min-height: 32px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      column-gap: 7px;
      margin: 0 !important;
      padding: 0;
      line-height: 1.2;
    }
    .package-seminar .seminar-id,
    .package-seminar .seminar-title-text,
    .package-seminar .seminar-role {
      align-self: center;
      margin-top: 0;
      margin-bottom: 0;
      line-height: 1.2;
    }
    .package-seminar .seminar-id {
      display: inline-flex;
      align-items: center;
      margin-right: 0;
    }
    .package-seminar .seminar-title-text {
      min-width: 0;
      color: var(--neutral-800);
      font-weight: 600;
    }
    .package-seminar .seminar-role {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 0;
    }
    .seminar-choice label { margin-bottom: 0 !important; }
    .seminar-choice strong { display: flex; align-items: center; gap: 6px; line-height: 1.25; }

    /* Info dialogs must remain an opaque surface also in iframe/embed mode. */
    dialog,
    dialog[open],
    dialog#seminarDialog,
    dialog#seminarDialog[open] {
      color: var(--neutral-800) !important;
      background: var(--neutral-50) !important;
      border: 1px solid var(--neutral-200) !important;
      isolation: isolate;
    }

    dialog .dialog-head,
    dialog .dialog-body {
      background: var(--neutral-50) !important;
    }
    dialog .dialog-head { border-bottom-color: var(--neutral-200) !important; }
    .dialog-note { background: var(--neutral-100); color: var(--neutral-700); }

    /* Prerequisite notes are visible directly in the all-seminars view. */
    .catalog-card-hint {
      margin-top: 10px;
      padding: 10px 11px;
      border: 1px solid var(--accent-violet-500);
      border-radius: 11px;
      color: var(--accent-violet-700);
      background: var(--accent-violet-200);
      font-size: 0.78rem;
      font-weight: 500;
      line-height: 1.4;
    }
    .catalog-card-hint strong { font-weight: 700; }
    .catalog-matrix-hint {
      width: 20px;
      height: 20px;
      flex: 0 0 20px;
      display: inline-grid;
      place-items: center;
      border: 1px solid var(--accent-violet-500);
      border-radius: 999px;
      color: var(--accent-violet-700);
      background: var(--accent-violet-200);
      font-size: 0.70rem;
      font-weight: 800;
      line-height: 1;
    }

    /* Process numbers: soft blue instead of dark-on-dark. */
    .step-number {
      color: var(--neutral-900) !important;
      background: var(--accent-blue-200) !important;
      border: 1px solid var(--accent-blue-500);
      box-shadow: none;
    }

    /* Final planning area: quieter light surface with dark, readable copy. */
    .contact-shell {
      color: var(--neutral-800);
      background: linear-gradient(135deg, var(--primary-50), var(--neutral-100));
      border: 1px solid var(--primary-200);
      box-shadow: 0 18px 50px rgba(var(--ink-rgb), 0.08);
    }
    .contact-copy h2 { color: var(--neutral-800); }
    .contact-copy > p { color: var(--neutral-600); }
    .contact-point { color: var(--neutral-700); }
    .contact-point::before { color: var(--primary-700); }
    .contact-form {
      color: var(--neutral-800);
      background: var(--neutral-50);
      border: 1px solid var(--neutral-200);
      box-shadow: 0 12px 28px rgba(var(--ink-rgb), 0.07);
    }

    /* Ensure the lightest surfaces stay inside the specified neutral palette. */
    .catalog-shell,
    .career-card,
    .career-detail,
    .package-card,
    .seminar-choice,
    .step,
    .mini-cart-button,
    .dialog-close,
    .button-secondary,
    .button-quiet {
      background-color: var(--neutral-50);
    }


    /* Exactly the two requested typefaces in the Seminarplaner UI. */
    html, body, body *, button, input, select, textarea, table, dialog { font-family: var(--font-body) !important; }
    h1, h2, h3, h4, h5, h6, .brand, .eyebrow { font-family: var(--font-heading) !important; }

    /* Selection counters and tray. */
    .mini-cart-count {
      color: var(--on-panel-dark) !important;
      background: var(--primary-900) !important;
      border: 1px solid var(--primary-800);
      font-weight: 700;
    }
    .selection-tray {
      color: var(--on-panel-dark) !important;
      background: var(--panel-dark-soft) !important;
      border-color: var(--neutral-600) !important;
    }
    .selection-tray strong { color: var(--on-panel-dark) !important; font-weight: 700; }
    .selection-tray p { color: var(--neutral-200) !important; opacity: 1 !important; }
    .selection-tray #trayBasketCount {
      color: var(--neutral-900) !important;
      background: var(--accent-blue-200) !important;
      border-color: var(--accent-blue-500) !important;
    }
    .selection-tray .button-secondary {
      color: var(--neutral-900) !important;
      background: var(--neutral-100) !important;
      border-color: var(--neutral-300) !important;
    }
    .selection-tray .button-secondary:hover { background: var(--neutral-200) !important; }
    .selection-tray .button-primary {
      color: var(--primary-900) !important;
      background: var(--primary-100) !important;
      border-color: var(--primary-300) !important;
    }

    /* Ausbildungsjahr tabs: readable in both states. */
    .tabs {
      background: var(--neutral-100) !important;
      border: 1px solid var(--neutral-200);
    }
    .tab {
      color: var(--neutral-700) !important;
      background: var(--neutral-50) !important;
      border: 1px solid var(--neutral-200) !important;
      font-weight: 700 !important;
    }
    .tab:hover { color: var(--neutral-900) !important; background: var(--accent-blue-200) !important; border-color: var(--accent-blue-500) !important; }
    .tab.active {
      color: var(--primary-900) !important;
      background: var(--primary-100) !important;
      border-color: var(--primary-300) !important;
      box-shadow: 0 5px 14px rgba(var(--primary-900-rgb), 0.10) !important;
    }

    /* Package rows: true optical center for checkbox, ID, title, role and info. */
    .package-seminar {
      grid-template-columns: 20px minmax(0,1fr) 32px !important;
      min-height: 52px !important;
      align-items: center !important;
    }
    .package-seminar > input,
    .package-seminar > .details-button,
    .package-seminar > label { align-self: center !important; }
    .package-seminar label {
      min-height: 36px !important;
      height: 100%;
      display: flex !important;
      align-items: center !important;
      gap: 7px !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    .package-seminar .seminar-id,
    .package-seminar .seminar-title-text,
    .package-seminar .seminar-role {
      display: inline-flex !important;
      align-items: center !important;
      min-height: 28px;
      margin: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      line-height: 1 !important;
      transform: translateY(0) !important;
    }
    .package-seminar .seminar-id { flex: 0 0 auto; }
    .package-seminar .seminar-title-text { flex: 1 1 auto; line-height: 1.18 !important; }
    .package-seminar .seminar-role { flex: 0 0 auto; justify-content: center; }

    /* Six distinct category colors. All pairs meet WCAG AA. */
    .category-badge {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 3px 10px;
      border: 1px solid transparent;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 700;
      line-height: 1.1;
      white-space: nowrap;
    }
    .category-soft-skills { color: var(--primary-900) !important; background: var(--primary-100) !important; border-color: var(--primary-300) !important; }
.category-digital { color: var(--neutral-900) !important; background: var(--accent-blue-200) !important; border-color: var(--accent-blue-500) !important; }
    .category-ai { color: var(--neutral-950) !important; background: var(--accent-violet-500) !important; border-color: var(--accent-violet-700) !important; }
    .category-it { color: var(--primary-900) !important; background: var(--primary-300) !important; border-color: var(--primary-700) !important; }
    .category-exam { color: var(--neutral-950) !important; background: var(--accent-blue-500) !important; border-color: var(--accent-blue-700) !important; }
    .category-default { color: var(--neutral-800) !important; background: var(--neutral-100) !important; border-color: var(--neutral-300) !important; }
    .catalog-card-category.category-badge { text-align: center; }
    .catalog-category-head h3 { flex: 1 1 auto; }
    .catalog-category-title {
      width: fit-content;
      flex: 0 1 auto !important;
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      margin: 0;
      padding: 5px 11px;
      border: 1px solid transparent;
      border-radius: 10px;
      font-size: 1rem !important;
      font-weight: 700;
      line-height: 1.1;
    }

    /* Info window: duration is visually prominent and actions are clearly distinct. */
    #seminarDialog .dialog-meta { align-items: center; }
    #seminarDialog .duration-chip {
      min-height: 36px;
      color: var(--neutral-900) !important;
      background: var(--accent-blue-200) !important;
      border: 1px solid var(--accent-blue-500);
      font-size: 0.82rem;
      font-weight: 600;
    }
    #seminarDialog .duration-chip strong,
    #seminarDialog .year-chip strong { color: inherit; font-weight: 700; }
    #seminarDialog .year-chip { color: var(--neutral-800) !important; background: var(--neutral-100) !important; border: 1px solid var(--neutral-300); }
    #seminarDialog .seminar-id-chip { color: var(--primary-900) !important; background: var(--primary-50) !important; border: 1px solid var(--primary-300); }
    #seminarDialog .audience-chip { color: var(--neutral-700) !important; background: var(--neutral-100) !important; border: 1px solid var(--neutral-300); }
    #seminarDialog #dialogSelectButton {
      color: var(--primary-900) !important;
      background: var(--primary-100) !important;
      border-color: var(--primary-300) !important;
    }

    

    /* Explicit semantic exception requested by the user: red close control. */
    #seminarDialog .dialog-close {
      color: var(--on-panel-dark) !important;
      background: var(--danger) !important;
      border-color: var(--danger) !important;
      font-size: 1.35rem;
      font-weight: 700;
      box-shadow: 0 5px 14px rgba(var(--ink-rgb), 0.14);
    }
    #seminarDialog .dialog-close:hover { background: var(--danger-strong) !important; border-color: var(--danger-strong) !important; }

    .dialog-kicker-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

    


    /* Matrix: clipped outer frame, vertically centered ID and filter controls in headers. */
    .catalog-matrix-frame {
      width: 100%;
      overflow: hidden;
      border: 1px solid var(--neutral-200);
      border-radius: 16px;
      background: var(--neutral-50);
    }
    .catalog-matrix-wrap {
      border: 0 !important;
      border-radius: 0 !important;
      background: var(--neutral-50) !important;
    }
    .catalog-matrix { margin: 0; }
    .catalog-matrix thead th:first-child { border-top-left-radius: 15px; }
    .catalog-matrix thead th:last-child { border-top-right-radius: 15px; }
    .catalog-matrix-seminar { height: 100%; min-height: 40px; align-items: center !important; }
    .catalog-matrix-id,
    .catalog-matrix-title {
      min-height: 30px;
      display: inline-flex !important;
      align-items: center !important;
      margin: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      line-height: 1 !important;
      transform: none !important;
    }
    .catalog-matrix-id { flex: 0 0 auto; }
    .catalog-matrix-title { line-height: 1.15 !important; }
    .matrix-header-filter,
    .matrix-header-select {
      min-height: 30px;
      max-width: 100%;
      margin: 0;
      padding: 3px 6px;
      border: 1px solid var(--neutral-200);
      border-radius: 8px;
      color: var(--neutral-700);
      background: var(--neutral-50);
      font-size: 0.67rem;
      font-weight: 700;
      line-height: 1.1;
      cursor: pointer;
    }
    .matrix-header-filter.active {
      color: var(--primary-900);
      background: var(--primary-100);
      border-color: var(--primary-300);
    }
    .matrix-header-select:focus,
    .matrix-header-filter:focus-visible { outline: 2px solid var(--accent-blue-500); outline-offset: 1px; }
    .matrix-header-year { min-width: 124px; }

    @media (max-width: 760px) {

      .package-seminar label { gap: 5px !important; }
      .package-seminar .seminar-role { font-size: 0.66rem !important; padding-inline: 6px !important; }
    }


    /* Saved packages in the header should be immediately noticeable. */
    .mini-cart-button.has-items {
      color: var(--primary-900) !important;
      background: var(--primary-100) !important;
      border-color: var(--primary-500) !important;
      box-shadow: 0 0 0 3px var(--primary-50), 0 10px 24px rgba(var(--primary-900-rgb), 0.14) !important;
      font-weight: 700 !important;
    }
    .mini-cart-button.has-items:hover {
      background: var(--primary-200) !important;
      border-color: var(--primary-600) !important;
    }
    .mini-cart-button.has-items .mini-cart-count {
      color: var(--on-panel-dark) !important;
      background: var(--primary-800) !important;
      border-color: var(--primary-900) !important;
      box-shadow: 0 0 0 3px var(--primary-50);
    }

    /* All close buttons use the same unmistakable destructive style. */
    .dialog-close, #seminarDialog .dialog-close, #addDialog .dialog-close, #basketDialog .dialog-close, #selectionEditDialog .dialog-close {
      color: var(--on-panel-dark) !important;
      background: var(--danger) !important;
      border-color: var(--danger) !important;
      font-size: 1.35rem !important;
      font-weight: 700 !important;
      box-shadow: 0 5px 14px rgba(var(--ink-rgb), 0.14) !important;
    }
    .dialog-close:hover, #seminarDialog .dialog-close:hover, #addDialog .dialog-close:hover, #basketDialog .dialog-close:hover, #selectionEditDialog .dialog-close:hover {
      color: var(--on-panel-dark) !important;
      background: var(--danger-strong) !important;
      border-color: var(--danger-strong) !important;
    }

    /* Destructive actions stay clearly red, but visually secondary to primary actions. */
    .button-danger {
      color: var(--danger) !important;
      background: var(--neutral-50) !important;
      border-color: rgba(166,27,27,0.38) !important;
      box-shadow: none !important;
    }
    .button-danger:hover {
      color: var(--danger-strong) !important;
      background: #fff4f4 !important;
      border-color: var(--danger) !important;
    }

    /* Final request-wide price approval choice. All options remain visible at once. */
    #priceApprovalDialog .dialog-close {
      color: var(--on-panel-dark) !important;
      background: var(--danger) !important;
      border-color: var(--danger) !important;
    }
    .price-approval-dialog { width: min(860px, calc(100vw - 28px)); }
    .price-approval-intro { margin: 0 0 18px; color: var(--neutral-700); line-height: 1.6; }
    .price-approval-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      padding: 0;
      margin: 0;
      border: 0;
      min-width: 0;
    }
    .price-approval-option {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "radio main" "radio note";
      align-items: center;
      column-gap: 12px;
      row-gap: 3px;
      min-width: 0;
      padding: 14px 15px;
      border: 1px solid var(--neutral-200);
      border-radius: 15px;
      background: var(--neutral-50);
      cursor: pointer;
      transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }
    .price-approval-option:hover {
      border-color: var(--primary-400);
      background: var(--primary-50);
    }
    .price-approval-option:has(input:checked) {
      border-color: var(--primary-600);
      background: var(--primary-100);
      box-shadow: 0 0 0 3px var(--primary-50);
    }
    .price-approval-option input {
      grid-area: radio;
      width: 19px;
      height: 19px;
      margin: 0;
      accent-color: var(--primary-700);
    }
    .price-approval-option-main {
      grid-area: main;
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 5px 9px;
      min-width: 0;
    }
    .price-approval-option-main strong { color: var(--neutral-900); font-size: 1.05rem; }
    .price-approval-option-main small { color: var(--neutral-700); font-size: .82rem; }
    .price-approval-option-note {
      grid-area: note;
      min-width: 0;
      color: var(--neutral-700);
      font-size: .84rem;
      line-height: 1.4;
    }
    .price-approval-option-always:has(input:checked) {
      border-color: var(--accent-violet-500);
      background: var(--accent-violet-200);
      box-shadow: 0 0 0 3px rgba(152,143,227,.12);
    }
    .price-approval-help { margin-top: 14px; }
    @media (max-width: 650px) {
      .price-approval-dialog { width: calc(100vw - 18px); max-width: calc(100vw - 18px); }
      .price-approval-options { grid-template-columns: minmax(0, 1fr); }
      .price-approval-option { padding: 12px; }
      .price-approval-dialog .dialog-body { overflow-x: hidden; }
    }

    /* Harmonised six-category system. */
    .category-soft-skills {
      color: var(--primary-900) !important;
      background: var(--primary-100) !important;
      border-color: var(--primary-500) !important;
    }
    .category-commercial {
      color: var(--accent-violet-700) !important;
      background: var(--accent-violet-200) !important;
      border-color: var(--accent-violet-500) !important;
    }
    .category-digital {
      color: var(--accent-blue-700) !important;
      background: var(--accent-blue-200) !important;
      border-color: var(--accent-blue-500) !important;
    }
    .category-ai {
      color: var(--neutral-900) !important;
      background: var(--accent-violet-500) !important;
      border-color: var(--accent-violet-700) !important;
    }
    .category-it {
      color: var(--neutral-950) !important;
      background: var(--accent-blue-500) !important;
      border-color: var(--accent-blue-700) !important;
    }
    .category-exam {
      color: var(--neutral-900) !important;
      background: var(--primary-300) !important;
      border-color: var(--primary-700) !important;
    }

    /* Category marking inside the regular career/year planner. */
    .package-seminar,
    .seminar-choice {
      border-left-width: 4px !important;
      border-left-style: solid !important;
    }
    .package-seminar[data-category="Soft Skills"],
    .seminar-choice[data-category="Soft Skills"] { border-left-color: var(--primary-500) !important; }
    .package-seminar[data-category="Kaufmännische Kompetenzen"],
    .seminar-choice[data-category="Kaufmännische Kompetenzen"] { border-left-color: var(--accent-violet-500) !important; }
    .package-seminar[data-category="Digitale Grundkompetenzen"],
    .seminar-choice[data-category="Digitale Grundkompetenzen"] { border-left-color: var(--accent-blue-500) !important; }
    .package-seminar[data-category="KI-Kompetenzen"],
    .seminar-choice[data-category="KI-Kompetenzen"] { border-left-color: var(--accent-violet-700) !important; }
    .package-seminar[data-category="IT-Fachkompetenzen"],
    .seminar-choice[data-category="IT-Fachkompetenzen"] { border-left-color: var(--accent-blue-700) !important; }
    .package-seminar[data-category="Prüfungsvorbereitung"],
    .seminar-choice[data-category="Prüfungsvorbereitung"] { border-left-color: var(--primary-700) !important; }

    .planner-category-heading {
      width: fit-content;
      min-height: 32px;
      margin-bottom: 10px !important;
      padding: 4px 10px 4px 6px !important;
      gap: 7px !important;
      border-radius: 10px !important;
      font-size: 0.84rem !important;
    }
    .planner-category-heading > span {
      min-width: 24px !important;
      height: 24px !important;
      display: inline-grid !important;
      place-items: center !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 1px solid currentColor !important;
      border-radius: 7px !important;
      color: inherit !important;
      background: transparent !important;
      font-size: 0.68rem !important;
      line-height: 1 !important;
    }
    .further-seminars .category-chip.category-badge {
      margin-top: 6px !important;
      width: fit-content;
    }

    /* Career color family: circle stays soft enough behind text while clearly identifying the group. */
    .career-card::after {
      opacity: 0.92;
      filter: none !important;
    }
    .career-card:hover::after { opacity: 1; }

    @media (max-width: 680px) {
      .mini-cart-button.has-items {
        box-shadow: 0 0 0 2px var(--primary-50), 0 8px 18px rgba(var(--primary-900-rgb), 0.12) !important;
      }
    }


    .selection-edit-dialog .dialog-body {
      display: flex;
      flex-direction: column;
      gap: 14px;
      background: var(--neutral-50);
    }
    .selection-edit-intro {
      margin: 0 !important;
      color: var(--neutral-600) !important;
    }
    .selection-edit-list {
      display: grid;
      gap: 9px;
      max-height: min(52vh, 520px);
      overflow-y: auto;
      padding: 2px 3px 2px 0;
    }
    .selection-edit-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      min-height: 68px;
      padding: 10px 11px 10px 13px;
      border: 1px solid var(--neutral-200);
      border-left: 4px solid var(--neutral-300);
      border-radius: 13px;
      background: var(--neutral-0);
    }
    .selection-edit-item[data-category="Soft Skills"] { border-left-color: var(--primary-500); }
    .selection-edit-item[data-category="Kaufmännische Kompetenzen"] { border-left-color: var(--accent-violet-500); }
    .selection-edit-item[data-category="Digitale Grundkompetenzen"] { border-left-color: var(--accent-blue-500); }
    .selection-edit-item[data-category="KI-Kompetenzen"] { border-left-color: var(--accent-violet-700); }
    .selection-edit-item[data-category="IT-Fachkompetenzen"] { border-left-color: var(--accent-blue-700); }
    .selection-edit-item[data-category="Prüfungsvorbereitung"] { border-left-color: var(--primary-700); }
    .selection-edit-main {
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 10px;
    }
    .selection-edit-id {
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 3px 8px;
      border: 1px solid var(--neutral-300);
      border-radius: 8px;
      color: var(--neutral-700);
      background: var(--neutral-100);
      font-size: 0.72rem;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
    }
    .selection-edit-title {
      min-width: 0;
      color: var(--neutral-800);
      font-weight: 600;
      line-height: 1.25;
    }
    .selection-edit-meta {
      grid-column: 2;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 5px;
    }
    .selection-edit-meta .category-badge {
      min-height: 25px;
      padding: 2px 8px;
      font-size: 0.69rem;
    }
    .selection-edit-remove {
      min-height: 38px !important;
      padding-inline: 12px !important;
      white-space: nowrap;
    }
    .selection-edit-empty {
      padding: 28px 18px;
      border: 1px dashed var(--neutral-300);
      border-radius: 13px;
      color: var(--neutral-600);
      background: var(--neutral-100);
      text-align: center;
    }
    .selection-edit-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--neutral-200);
    }
    .selection-edit-count {
      color: var(--neutral-600);
      font-size: 0.86rem;
      font-weight: 600;
    }
    .selection-edit-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
    }
    @media (max-width: 680px) {
      .selection-edit-item { grid-template-columns: 1fr; gap: 8px; }
      .selection-edit-remove { width: 100%; }
      .selection-edit-footer { align-items: stretch; flex-direction: column; }
      .selection-edit-actions { display: grid; grid-template-columns: 1fr; }
    }


    .hero-price-anchor {
      width: fit-content;
      max-width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 5px 7px;
      margin-top: 18px;
      padding: 10px 13px;
      border: 1px solid var(--primary-300);
      border-radius: 13px;
      color: var(--primary-900);
      background: var(--primary-50);
      box-shadow: 0 8px 22px rgba(var(--primary-900-rgb), 0.07);
      text-decoration: none;
      font-size: 0.86rem;
      font-weight: 600;
      line-height: 1.25;
    }
    .hero-price-anchor strong {
      color: var(--primary-800);
      font-family: var(--font-heading) !important;
      font-size: 1.25rem;
      font-weight: 700;
    }
    .hero-price-anchor:hover { border-color: var(--primary-500); background: var(--primary-100); }

    .pricing-section { padding-top: 62px; }
    .pricing-shell {
      display: grid;
      grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
      gap: 20px;
      align-items: stretch;
    }
    .pricing-copy,
    .pricing-panel {
      min-width: 0;
      padding: 24px;
      border: 1px solid var(--neutral-200);
      border-radius: 22px;
      background: var(--neutral-50);
      box-shadow: 0 14px 36px rgba(var(--ink-rgb), 0.05);
    }
    .pricing-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: linear-gradient(145deg, var(--primary-50), var(--neutral-50));
    }
    .pricing-kicker {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      min-height: 27px;
      padding: 3px 9px;
      border: 1px solid var(--primary-300);
      border-radius: 999px;
      color: var(--primary-800);
      background: var(--primary-100);
      font-size: 0.72rem;
      font-weight: 700;
    }
    .pricing-copy h3,
    .price-calculator h3 {
      margin: 12px 0 10px;
      color: var(--neutral-900);
      font-size: clamp(1.45rem, 3vw, 2rem);
      line-height: 1.08;
    }
    .pricing-copy > p { color: var(--neutral-600); }
    .pricing-custom-note {
      display: grid;
      gap: 4px;
      margin-top: 18px;
      padding: 14px;
      border: 1px solid var(--accent-blue-200);
      border-radius: 14px;
      color: var(--neutral-700);
      background: var(--accent-blue-200);
      line-height: 1.45;
    }
    .pricing-custom-note strong { color: var(--accent-blue-700); }
    .pricing-tax-note { margin: 14px 0 0 !important; color: var(--neutral-700) !important; font-size: 0.8rem; font-weight: 700; }
    .pricing-panel { display: grid; gap: 18px; }
    .price-tier-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
    }
    .price-tier {
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 112px;
      padding: 12px 10px;
      border: 1px solid var(--neutral-200);
      border-radius: 14px;
      color: var(--neutral-700);
      background: var(--neutral-0);
      text-align: center;
    }
    .price-tier span { min-height: 34px; font-size: 0.72rem; font-weight: 600; line-height: 1.2; }
    .price-tier strong { margin: 5px 0 3px; color: var(--neutral-900); font-family: var(--font-heading) !important; font-size: 1.32rem; }
    .price-tier small { color: var(--neutral-600); font-size: 0.66rem; }
    .price-tier-featured { border-color: var(--primary-500); background: var(--primary-100); }
    .price-tier-featured strong { color: var(--primary-900); }

    .price-calculator {
      padding: 17px;
      border: 1px solid var(--neutral-200);
      border-radius: 16px;
      background: var(--neutral-100);
    }
    .price-calculator-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
    }
    .price-calculator-head h3 { margin-bottom: 0; font-size: 1.22rem; }
    .price-calculator-head label { width: min(210px, 42%); margin: 0; color: var(--neutral-700); }
    .price-calculator-head input { width: 100%; margin-top: 6px; background: var(--neutral-0); }
    .price-calculator-result {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;
      margin-top: 15px;
    }
    .price-calculator-result > div {
      display: grid;
      gap: 3px;
      padding: 12px;
      border: 1px solid var(--neutral-200);
      border-radius: 12px;
      background: var(--neutral-0);
    }
    .price-calculator-result span { color: var(--neutral-600); font-size: 0.72rem; }
    .price-calculator-result strong { color: var(--primary-800); font-family: var(--font-heading) !important; font-size: 1.3rem; }
    .price-calculator > p { margin: 10px 0 0; color: var(--neutral-600); font-size: 0.76rem; line-height: 1.4; }

    .price-approval-field select { width: 100%; max-width: 100%; }
    .basket-price-note {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 8px;
      margin-top: 11px;
      padding: 9px 10px;
      border: 1px solid var(--primary-200);
      border-radius: 10px;
      color: var(--neutral-700);
      background: var(--primary-50);
      font-size: 0.76rem;
      line-height: 1.35;
    }
    .basket-price-note strong { color: var(--primary-800); }

    .catalog-card-top-actions {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
    }
    .catalog-card-info { flex: 0 0 29px; }

    /* Do not let dialog contents exceed their otherwise correct mobile width. */
    dialog .dialog-body,
    dialog .dialog-form-grid,
    dialog .dialog-form-grid > *,
    dialog input,
    dialog select,
    dialog textarea,
    #basketDialog .basket-list,
    #basketDialog .basket-item,
    #basketDialog .basket-item-head,
    #basketDialog .basket-item-head > div,
    #basketDialog .basket-item-controls,
    #basketDialog .basket-item-actions,
    #basketDialog .basket-seminars,
    #basketDialog .basket-total {
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }
    #basketDialog .dialog-body { overflow-x: hidden; }
    #basketDialog h4,
    #basketDialog p,
    #basketDialog li,
    #basketDialog .basket-price-note,
    #basketDialog .button { overflow-wrap: anywhere; }

    @media (max-width: 960px) {
      .pricing-shell { grid-template-columns: 1fr; }
    }

    @media (max-width: 760px) {
      /* Mobile hero graphic: four cards use fixed corners around a centered orbit. */
      .hero-visual {
        min-height: 400px !important;
        width: 100%;
        overflow: hidden;
        isolation: isolate;
      }
      .hero-visual .orbit { width: 230px !important; }
      .hero-visual .visual-center {
        inset: auto !important;
        left: 50%;
        top: 50%;
        width: 112px;
        height: 112px;
        transform: translate(-50%, -50%);
      }
      .hero-visual .floating-card {
        width: min(42%, 132px);
        min-width: 0 !important;
        max-width: 132px;
        padding: 10px !important;
        font-size: 0.76rem !important;
        line-height: 1.18;
      }
      .hero-visual .floating-card span { font-size: 0.66rem; line-height: 1.2; }
      .hero-visual .f1 { top: 10px !important; left: 0 !important; right: auto !important; bottom: auto !important; }
      .hero-visual .f2 { top: 10px !important; right: 0 !important; left: auto !important; bottom: auto !important; }
      .hero-visual .f3 { bottom: 10px !important; left: 0 !important; right: auto !important; top: auto !important; }
      .hero-visual .f4 { bottom: 10px !important; right: 0 !important; left: auto !important; top: auto !important; }

      .hero-price-anchor { width: 100%; justify-content: center; text-align: center; }
      .pricing-section { padding-top: 42px; }
      .pricing-copy, .pricing-panel { padding: 15px; border-radius: 18px; }
      .price-tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .price-tier-featured { grid-column: 1 / -1; min-height: 94px; }
      .price-calculator-head { align-items: stretch; flex-direction: column; }
      .price-calculator-head label { width: 100%; }
      .price-calculator-result { grid-template-columns: 1fr; }

      #basketDialog,
      #addDialog {
        width: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;
      }
      #basketDialog .dialog-body,
      #addDialog .dialog-body { width: 100%; padding: 12px !important; }
      #basketDialog .basket-item { width: 100%; padding: 12px; overflow: hidden; }
      #basketDialog .basket-item-head { width: 100%; align-items: stretch; }
      #basketDialog .basket-item-controls {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(86px, 112px);
        align-items: center;
        justify-content: stretch;
      }
      #basketDialog .basket-item-controls input { width: 100% !important; }
      #basketDialog .basket-seminars {
        width: 100%;
        margin-right: 0;
        padding-left: 20px;
        columns: 1 !important;
      }
      #basketDialog .basket-item-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
      }
      #basketDialog .basket-item-actions .button,
      #basketDialog .dialog-actions .button { width: 100%; white-space: normal; }
      #basketDialog .basket-total { align-items: stretch; flex-direction: column; gap: 4px; }
      .catalog-card-top { align-items: flex-start; }
      .catalog-card-top-actions { flex: 0 1 auto; }
      .catalog-card-category { max-width: 145px; white-space: normal; line-height: 1.15; text-align: center; }
    }

    @media (max-width: 380px) {
      .hero-visual { min-height: 360px !important; }
      .hero-visual .orbit { width: 210px !important; }
      .hero-visual .visual-center { width: 102px; height: 102px; }
      .hero-visual .floating-card { width: 44%; max-width: 126px; }
      .price-tier-grid { grid-template-columns: 1fr; }
      .price-tier-featured { grid-column: auto; }
    }

    /* Verhindert unbeabsichtigtes Markieren von Text auf interaktiven Steuerelementen. */
    button,
    .button,
    [role="button"],
    summary {
      -webkit-user-select: none;
      user-select: none;
    }

    /* Direktlinks auf die freie Seminaransicht enden unterhalb des festen Headers. */
    #alle-seminare { scroll-margin-top: 104px; }

    /* Statischer, crawlbarer Fallback des Katalogs. JavaScript ersetzt ihn durch die interaktive Ansicht. */
    .catalog-static-fallback { display: grid; gap: 24px; }
    .catalog-static-fallback > h3 { margin-bottom: -12px; }
    .catalog-static-fallback > p { max-width: 840px; margin: 0; color: var(--muted); }
    .catalog-static-category { display: grid; gap: 12px; }
    .catalog-static-category h4 { margin: 0; }
    .catalog-static-category ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
    .catalog-static-category li { padding: 14px 0; border-top: 1px solid var(--line); }
    .catalog-static-category li > a { color: var(--ink); font-weight: 760; }
    .catalog-static-category li > span { display: block; margin-top: 3px; color: var(--muted); font-size: .82rem; }
    .catalog-static-category li > p { margin: 6px 0 0; color: var(--muted); font-size: .9rem; }


/* =====================================================================
   Dunkelmodus: Flaechen mit fest kodierten Farbwerten

   Erzeugt aus den Originalregeln: Farbton bleibt, Helligkeit sinkt auf
   8,5 bis 11 Prozent. Ein im Original vorhandenes !important wird vorher
   abgetrennt - sonst entstuende "!important !important", und die
   Deklaration waere ungueltig.
   ===================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background: radial-gradient(circle at 8% 0%, rgba(16,31,39,0.34), transparent 30rem),
        radial-gradient(circle at 92% 9%, rgba(17,16,39,0.28), transparent 32rem),
        linear-gradient(180deg, var(--neutral-50), var(--surface) 32%, var(--neutral-50) 100%) !important;
  }
  :root:not([data-theme="light"]) .year-intro {
    background: linear-gradient(135deg, rgba(16,31,39,0.22), rgba(17,16,39,0.22)) !important;
  }
  :root:not([data-theme="light"]) .year-exception-disclosure {
    background: rgba(17,16,39,0.28) !important;
  }
  :root:not([data-theme="light"]) .year-exception-disclosure summary:hover {
    background: rgba(17,16,39,0.40) !important;
  }
  :root:not([data-theme="light"]) .year-exception-arrow {
    background: rgba(17,16,39,0.70) !important;
  }
  :root:not([data-theme="light"]) .builder {
    background: linear-gradient(145deg, rgba(17,16,39,0.26), rgba(16,31,39,0.22)) !important;
  }
  :root:not([data-theme="light"]) .editing-banner {
    background: rgba(17,16,39,0.34) !important;
  }
  :root:not([data-theme="light"]) .button-danger:hover {
    background: #271010 !important;
  }
}

:root[data-theme="dark"] body {
  background: radial-gradient(circle at 8% 0%, rgba(16,31,39,0.34), transparent 30rem),
        radial-gradient(circle at 92% 9%, rgba(17,16,39,0.28), transparent 32rem),
        linear-gradient(180deg, var(--neutral-50), var(--surface) 32%, var(--neutral-50) 100%) !important;
}
:root[data-theme="dark"] .year-intro {
  background: linear-gradient(135deg, rgba(16,31,39,0.22), rgba(17,16,39,0.22)) !important;
}
:root[data-theme="dark"] .year-exception-disclosure {
  background: rgba(17,16,39,0.28) !important;
}
:root[data-theme="dark"] .year-exception-disclosure summary:hover {
  background: rgba(17,16,39,0.40) !important;
}
:root[data-theme="dark"] .year-exception-arrow {
  background: rgba(17,16,39,0.70) !important;
}
:root[data-theme="dark"] .builder {
  background: linear-gradient(145deg, rgba(17,16,39,0.26), rgba(16,31,39,0.22)) !important;
}
:root[data-theme="dark"] .editing-banner {
  background: rgba(17,16,39,0.34) !important;
}
:root[data-theme="dark"] .button-danger:hover {
  background: #271010 !important;
}