.seminar-term-summary:empty { display: none !important; }
    .seminar-term-summary { margin-top: 8px; }
    .seminar-term-availability {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 28px;
      padding: 5px 9px;
      border: 1px solid var(--primary-200);
      border-radius: 999px;
      background: var(--primary-50);
      color: var(--primary-900);
      font-size: .72rem;
      font-weight: 760;
      line-height: 1.2;
      letter-spacing: .015em;
    }
    .seminar-term-availability::before {
      content: "";
      width: 7px;
      height: 7px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--primary-500);
    }
    .package-seminar .seminar-term-summary {
      grid-column: 2 / -1;
      margin: -1px 0 1px;
    }
    .package-seminar .seminar-term-availability,
    .seminar-choice .seminar-term-availability {
      min-height: 24px;
      padding: 3px 7px;
      font-size: .66rem;
    }
    .seminar-choice .seminar-term-summary {
      grid-column: 2 / -1;
      margin: 1px 0 0;
    }
    .catalog-matrix-term {
      display: block;
      margin-top: 3px;
      color: var(--primary-800);
      font-size: .64rem;
      font-weight: 760;
      line-height: 1.2;
    }
    .seminar-dialog-terms {
      margin: 12px 0 2px;
      padding: 12px 13px;
      border: 1px solid var(--primary-200);
      border-radius: 13px;
      background: var(--primary-50);
    }
    .seminar-dialog-terms > strong {
      display: block;
      margin-bottom: 8px;
      color: var(--neutral-900);
      font-size: .80rem;
    }
    .seminar-dialog-term-list { display: flex; flex-wrap: wrap; gap: 7px; }
    .seminar-dialog-term {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-height: 30px;
      padding: 5px 9px;
      border-radius: 999px;
      background: var(--neutral-0);
      color: var(--neutral-900);
      font-size: .74rem;
      font-weight: 760;
    }
    .seminar-dialog-term small { color: var(--neutral-600); font-size: .68rem; font-weight: 650; }
    .add-seminar-terms {
      display: grid;
      gap: 9px;
      margin: 2px 0 3px;
      padding: 13px;
      border: 1px solid var(--primary-200);
      border-radius: 13px;
      background: var(--primary-50);
    }
    .add-seminar-terms[hidden] { display: none !important; }
    .add-seminar-terms > strong { font-size: .84rem; color: var(--neutral-900); }
    .add-seminar-term-list { display: grid; gap: 9px; }
    .add-seminar-term-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(190px, .72fr);
      align-items: center;
      gap: 12px;
      padding-top: 9px;
      border-top: 1px solid var(--primary-200);
    }
    .add-seminar-term-row:first-child { padding-top: 0; border-top: 0; }
    .add-seminar-term-copy { min-width: 0; }
    .add-seminar-term-copy strong { display: block; font-size: .78rem; line-height: 1.3; }
    .add-seminar-term-copy small { display: block; margin-top: 2px; color: var(--neutral-600); font-size: .69rem; }
    .add-seminar-term-row select {
      width: 100%;
      min-height: 42px;
      padding: 7px 10px;
      border: 1px solid var(--neutral-300);
      border-radius: 10px;
      background: var(--neutral-0);
      color: var(--neutral-900);
      font: inherit;
      font-size: .78rem;
      box-sizing: border-box;
    }
    .basket-seminar-term {
      display: inline-flex;
      margin-left: 6px;
      padding: 2px 6px;
      border-radius: 999px;
      background: var(--primary-50);
      color: var(--primary-900);
      font-size: .68rem;
      font-weight: 760;
      white-space: nowrap;
    }
    @media (max-width: 680px) {
      .add-seminar-term-row { grid-template-columns: 1fr; gap: 6px; }
      .basket-seminar-term { display: table; margin: 4px 0 0; }
    }

#termine {
      margin-top: 62px;
      padding-top: 46px;
      scroll-margin-top: 92px;
      border-top: 1px solid rgba(33,45,42,.10);
    }
    .published-terms-heading {
      display: block;
      margin-bottom: 26px;
    }
    .published-terms-heading h2 {
      margin: 8px 0 0;
      max-width: 760px;
      color: var(--neutral-900);
      font-size: clamp(2.15rem,3.7vw,3.75rem);
      line-height: .99;
      letter-spacing: -.045em;
      hyphens: none;
      -webkit-hyphens: none;
      word-break: normal;
      overflow-wrap: normal;
      text-wrap: balance;
    }
    .published-terms-shell {
      overflow: hidden;
      border: 1px solid var(--neutral-200);
      border-radius: 18px;
      background: rgba(var(--surface-rgb), .92);
      box-shadow: 0 16px 40px rgba(25,43,37,.045);
    }
    .published-terms-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 54px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--neutral-200);
      color: var(--neutral-600);
      font-size: .79rem;
      line-height: 1.4;
    }
    .published-terms-status strong { color: var(--neutral-900); font-size: .82rem; }
    .published-terms-status:only-child { border-bottom: 0; }
    .published-terms-details { margin: 0; }
    .published-terms-details[hidden] { display: none !important; }
    .published-terms-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-height: 68px;
      padding: 16px 20px;
      cursor: pointer;
      list-style: none;
      user-select: none;
    }
    .published-terms-toggle::-webkit-details-marker { display: none; }
    .published-terms-toggle > span:first-child { display: grid; gap: 3px; }
    .published-terms-toggle strong { color: var(--neutral-900); font-size: .9rem; }
    .published-terms-toggle small { color: var(--neutral-500); font-size: .75rem; font-weight: 650; }
    .published-terms-chevron {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      border: 1px solid var(--neutral-200);
      border-radius: 10px;
      color: var(--neutral-700);
      font-size: 1.05rem;
      line-height: 1;
      transition: transform .2s ease;
    }
    .published-terms-details[open] .published-terms-chevron { transform: rotate(180deg); }
    .published-terms-details[open] .published-terms-toggle { border-bottom: 1px solid var(--neutral-200); }
    .published-terms-details[open] .published-terms-toggle small::before { content: "Termine ausblenden"; }
    .published-terms-details[open] .published-terms-toggle small { font-size: 0; }
    .published-terms-details[open] .published-terms-toggle small::before { font-size: .75rem; }
    .published-term-list { display: grid; }
    .published-term-list[hidden] { display: none !important; }
    .published-term-item {
      display: grid;
      grid-template-columns: 104px minmax(0,1fr) auto;
      gap: 20px;
      align-items: center;
      padding: 19px 20px;
      border-top: 1px solid var(--neutral-200);
    }
    .published-term-list .published-term-item:first-child { border-top: 0; }
    .published-term-date {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 9px;
      align-items: center;
      min-width: 0;
    }
    .published-term-date strong {
      color: var(--primary-800);
      font-size: 2rem;
      line-height: 1;
      letter-spacing: -.035em;
    }
    .published-term-date span {
      display: grid;
      color: var(--neutral-500);
      font-size: .65rem;
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: .075em;
      text-transform: uppercase;
    }
    .published-term-main { min-width: 0; }
    .published-term-overline {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 7px 10px;
      margin-bottom: 5px;
      color: var(--neutral-500);
      font-size: .68rem;
      font-weight: 760;
      letter-spacing: .035em;
    }
    .published-term-overline .published-term-format { color: var(--accent-violet-700); }
    .published-term-overline .published-term-duration { color: var(--primary-700); }
    .published-term-main h3 {
      margin: 0;
      color: var(--neutral-900);
      font-size: 1rem;
      line-height: 1.38;
      letter-spacing: -.01em;
      hyphens: none;
      -webkit-hyphens: none;
      word-break: normal;
      overflow-wrap: normal;
    }
    .published-term-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      white-space: nowrap;
    }
    .published-term-actions .button { min-height: 40px; padding: 9px 13px; font-size: .74rem; }
    .published-term-plan-button.is-selected {
      border-color: var(--primary-300);
      background: var(--primary-50);
      color: var(--primary-900);
    }
    .published-terms-empty {
      padding: 30px 20px;
      color: var(--neutral-600);
      font-size: .88rem;
      line-height: 1.55;
    }
    @media (max-width: 900px) {
      #termine { margin-top: 52px; padding-top: 38px; }
      .published-term-item { grid-template-columns: 92px minmax(0,1fr); }
      .published-term-actions { grid-column: 2; justify-content: flex-start; white-space: normal; }
    }
    @media (max-width: 580px) {
      #termine { margin-top: 44px; padding-top: 32px; }
      .published-terms-shell { border-radius: 15px; }
      .published-terms-status { align-items: flex-start; flex-direction: column; gap: 3px; }
      .published-terms-toggle { min-height: 64px; padding: 14px 15px; }
      .published-term-item { grid-template-columns: 74px minmax(0,1fr); gap: 14px; padding: 17px 15px; }
      .published-term-date { grid-template-columns: 1fr; gap: 2px; align-self: start; }
      .published-term-date strong { font-size: 1.75rem; }
      .published-term-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
      .published-term-actions .button { width: 100%; }
    }

/* Rechte Inhalte beginnen auf Desktop-Höhe der großen Überschrift, nicht auf Höhe des Kickers. */
    @media (min-width: 1121px) {
      .academy-editorial > .academy-editorial-list,
      .academy-editorial > .academy-editorial-side {
        padding-top: 32px;
      }
      .journey-explainer-steps {
        margin-top: 32px;
      }
    }

    #zielgruppen .academy-editorial-copy {
      max-width: 610px;
    }
    #zielgruppen .academy-editorial-copy h2 {
      max-width: 100%;
    }

    /* Termine bleiben Teil des Terminierungsservice, ohne die Seite vor dem Planer zu verlängern. */
    #termine.academy-terms-inline {
      margin: 26px 0 0;
      padding: 0;
      border: 0;
      scroll-margin-top: 92px;
    }
    .academy-terms-trigger {
      width: min(100%, 510px);
      min-height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 14px 16px;
      border: 1px solid rgba(74,93,88,.16);
      border-radius: 14px;
      color: var(--neutral-900);
      background: rgba(var(--surface-rgb), .64);
      cursor: pointer;
      text-align: left;
      transition: border-color .18s ease, background .18s ease, transform .18s ease;
    }
    .academy-terms-trigger:hover {
      border-color: rgba(17,119,82,.30);
      background: rgba(var(--surface-rgb), .88);
      transform: translateY(-1px);
    }
    .academy-terms-trigger > span:first-child { display: grid; gap: 3px; }
    .academy-terms-trigger small {
      color: var(--primary-700);
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .07em;
      text-transform: uppercase;
    }
    .academy-terms-trigger strong {
      color: var(--neutral-900);
      font-size: .9rem;
      line-height: 1.3;
    }
    .academy-terms-trigger-arrow {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      border: 1px solid var(--neutral-200);
      border-radius: 10px;
      background: rgba(var(--surface-rgb), .72);
      font-size: 1rem;
    }

    .published-terms-dialog {
      width: min(980px, calc(100vw - 32px));
      max-width: calc(100vw - 20px);
      overflow: hidden;
    }
    .published-terms-dialog-body {
      max-height: min(680px, calc(100vh - 150px));
      padding: 0 !important;
      overflow: auto !important;
      overscroll-behavior: contain;
      background: var(--neutral-0);
    }
    .published-terms-dialog .published-terms-shell {
      border: 0;
      border-radius: 0;
      box-shadow: none;
      background: var(--neutral-0);
    }
    .published-terms-dialog .published-terms-status {
      min-height: 74px;
      padding: 22px 24px;
      border-bottom: 0;
      font-size: .88rem;
    }
    .published-terms-dialog .published-term-list .published-term-item:first-child {
      border-top: 0;
    }

    @media (max-width: 1120px) {
      .academy-editorial > .academy-editorial-list,
      .academy-editorial > .academy-editorial-side,
      .journey-explainer-steps {
        padding-top: 0;
        margin-top: 0;
      }
    }
    @media (max-width: 680px) {
      #termine.academy-terms-inline { margin-top: 22px; }
      .academy-terms-trigger { width: 100%; min-height: 64px; padding: 13px 14px; }
      .published-terms-dialog { width: calc(100vw - 16px); max-width: calc(100vw - 16px); }
      .published-terms-dialog-body { max-height: calc(100vh - 128px); }
    }

/* Smartphone: Berufseintraege nutzen wieder die gesamte verfuegbare Textbreite.
       Spaetere Desktop-Regeln fuer lange Berufskuerzel duerfen die mobile Titelspalte
       nicht auf die Kuerzelbreite reduzieren. */
    @media (max-width: 680px) {
      .career-row {
        grid-template-columns: 32px minmax(0,1fr) 24px !important;
        gap: 12px !important;
        align-items: center !important;
        padding: 16px 4px !important;
      }
      .career-row-main {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) !important;
        gap: 5px !important;
        min-width: 0 !important;
        width: 100% !important;
      }
      .career-row .career-code,
      .career-row strong,
      .career-row small {
        grid-column: 1 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
      }
      .career-row .career-code {
        padding-right: 0 !important;
      }
      .career-row strong {
        line-height: 1.22 !important;
      }
      .career-row small {
        margin-top: 0 !important;
        line-height: 1.42 !important;
      }
      .career-row-arrow {
        justify-self: end;
      }
    }

/* Mobile Navigation: kompakter Menuezugang zwischen Marke und Planungen. */
    .mobile-nav-menu {
      display: none;
      position: relative;
      margin-left: auto;
    }
    .mobile-nav-menu > summary {
      list-style: none;
    }
    .mobile-nav-menu > summary::-webkit-details-marker {
      display: none;
    }
    .mobile-nav-toggle {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 14px;
      border: 1px solid var(--neutral-300);
      border-radius: 999px;
      background: rgba(var(--surface-rgb), .84);
      color: var(--neutral-900);
      font-size: .82rem;
      font-weight: 760;
      line-height: 1;
      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    .mobile-nav-icon {
      width: 17px;
      height: 12px;
      display: grid;
      align-content: space-between;
      flex: 0 0 auto;
    }
    .mobile-nav-icon i {
      display: block;
      width: 100%;
      height: 1.5px;
      border-radius: 99px;
      background: currentColor;
      transition: transform 160ms ease, opacity 160ms ease;
    }
    .mobile-nav-menu[open] .mobile-nav-icon i:nth-child(1) {
      transform: translateY(5.25px) rotate(45deg);
    }
    .mobile-nav-menu[open] .mobile-nav-icon i:nth-child(2) {
      opacity: 0;
    }
    .mobile-nav-menu[open] .mobile-nav-icon i:nth-child(3) {
      transform: translateY(-5.25px) rotate(-45deg);
    }
    .mobile-nav-panel {
      position: absolute;
      top: calc(100% + 12px);
      right: 0;
      width: min(330px, calc(100vw - 24px));
      padding: 9px;
      border: 1px solid rgba(190,201,198,.92);
      border-radius: 18px;
      background: rgba(250,252,251,.97);
      box-shadow: 0 18px 50px rgba(22,37,32,.14);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      z-index: 80;
    }
    .mobile-nav-panel a {
      min-height: 46px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 0 12px;
      border-radius: 11px;
      color: var(--neutral-800);
      font-size: .9rem;
      font-weight: 690;
      text-decoration: none;
    }
    .mobile-nav-panel a::after {
      content: "→";
      color: var(--neutral-400);
      font-weight: 500;
    }
    .mobile-nav-panel a:hover,
    .mobile-nav-panel a:focus-visible {
      outline: none;
      background: var(--primary-50);
      color: var(--primary-900);
    }
    @media (max-width: 900px) {
      .mobile-nav-menu { display: block; }
      .site-header .nav {
        justify-content: flex-start;
        gap: 10px !important;
      }
      .site-header .academy-brand {
        margin-right: auto;
        min-width: 0;
      }
      .site-header .mini-cart-button {
        flex: 0 0 auto;
      }
    }
    @media (max-width: 430px) {
      .brand-logo-horizontal {
        width: min(166px, 48vw) !important;
      }
      .mobile-nav-toggle {
        width: 42px;
        padding: 0;
      }
      .mobile-nav-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
      }
    }

/* Glassmorphism bleibt eine Veredelung der vorhandenen Oberflaechen. Layout,
       Abschnittsfarben und Informationshierarchie bleiben unveraendert. */
    .site-header {
      background: rgba(var(--surface-rgb), .68) !important;
      border-bottom-color: rgba(var(--surface-rgb), .78) !important;
      box-shadow: 0 8px 28px rgba(29,61,51,.055);
      backdrop-filter: blur(24px) saturate(132%) !important;
      -webkit-backdrop-filter: blur(24px) saturate(132%) !important;
    }

    .mini-cart-button,
    .mobile-nav-toggle {
      border-color: rgba(var(--surface-rgb), .84) !important;
      background: rgba(var(--surface-rgb), .60) !important;
      box-shadow: inset 0 1px 0 rgba(var(--surface-rgb), .72), 0 8px 24px rgba(29,61,51,.065) !important;
      backdrop-filter: blur(16px) saturate(122%);
      -webkit-backdrop-filter: blur(16px) saturate(122%);
    }
    .mini-cart-button.has-items {
      border-color: rgba(128,212,174,.66) !important;
      background: rgba(218,248,233,.72) !important;
    }
    .mobile-nav-panel {
      border-color: rgba(var(--surface-rgb), .82) !important;
      background: rgba(249,252,251,.78) !important;
      box-shadow: 0 22px 60px rgba(22,37,32,.14), inset 0 1px 0 rgba(var(--surface-rgb), .86) !important;
      backdrop-filter: blur(24px) saturate(128%) !important;
      -webkit-backdrop-filter: blur(24px) saturate(128%) !important;
    }

    .hero-product {
      border-color: rgba(var(--surface-rgb), .78) !important;
      background: linear-gradient(145deg, rgba(var(--surface-rgb), .74) 0%, rgba(234,250,242,.68) 58%, rgba(213,239,249,.56) 130%) !important;
      box-shadow: 0 26px 66px rgba(29,61,51,.11), inset 0 1px 0 rgba(var(--surface-rgb), .84) !important;
    }
    .hero-product-steps {
      background: rgba(var(--surface-rgb), .28) !important;
      border-color: rgba(104,130,121,.22) !important;
    }
    .hero-product-steps > div + div { border-left-color: rgba(104,130,121,.22) !important; }
    .hero-product-status {
      border-color: rgba(var(--surface-rgb), .86) !important;
      background: rgba(196,240,218,.58) !important;
      box-shadow: inset 0 1px 0 rgba(var(--surface-rgb), .72);
    }

    .route-switch button:not(.active) {
      border-color: rgba(var(--surface-rgb), .84) !important;
      background: rgba(var(--surface-rgb), .54) !important;
      box-shadow: inset 0 1px 0 rgba(var(--surface-rgb), .70), 0 12px 30px rgba(29,61,51,.045) !important;
    }
    .route-switch button:not(.active):hover {
      border-color: rgba(116,202,164,.66) !important;
      background: rgba(244,252,248,.72) !important;
    }

    .planning-flexibility-note,
    .pricing-copy,
    .pricing-panel,
    .contact-shell,
    .request-overview {
      box-shadow: inset 0 1px 0 rgba(var(--surface-rgb), .68), 0 16px 38px rgba(29,61,51,.045) !important;
    }
    .planning-flexibility-note {
      border-color: rgba(var(--surface-rgb), .76) !important;
      background: rgba(var(--surface-rgb), .48) !important;
    }
    .pricing-copy,
.pricing-panel {
      border-color: rgba(var(--surface-rgb), .76) !important;
    }
    .pricing-panel { background: rgba(var(--surface-rgb), .68) !important; }
    .contact-shell {
      border-color: rgba(var(--surface-rgb), .78) !important;
      background: rgba(var(--surface-rgb), .66) !important;
    }
    .request-overview {
      border-color: rgba(var(--surface-rgb), .74) !important;
      background: rgba(232,250,241,.62) !important;
    }
    .request-overview-stats span {
      border: 1px solid rgba(var(--surface-rgb), .62);
      background: rgba(var(--surface-rgb), .56) !important;
    }

    dialog {
      border: 1px solid rgba(var(--surface-rgb), .82) !important;
      background: rgba(252,253,253,.86) !important;
      box-shadow: 0 34px 100px rgba(24,47,39,.22), inset 0 1px 0 rgba(var(--surface-rgb), .90) !important;
      backdrop-filter: blur(28px) saturate(124%);
      -webkit-backdrop-filter: blur(28px) saturate(124%);
    }
    dialog::backdrop {
      background: rgba(21,31,28,.34) !important;
      backdrop-filter: blur(12px) saturate(106%) !important;
      -webkit-backdrop-filter: blur(12px) saturate(106%) !important;
    }
    .dialog-head,
    .dialog-body.request-flow-body {
      background: transparent !important;
    }
    .dialog-close {
      border-color: rgba(var(--surface-rgb), .82) !important;
      background: rgba(var(--surface-rgb), .56) !important;
      box-shadow: inset 0 1px 0 rgba(var(--surface-rgb), .72);
    }

    .selection-tray {
      background: rgba(28,35,33,.86) !important;
      border-color: rgba(var(--surface-rgb), .18) !important;
      box-shadow: 0 22px 64px rgba(20,30,27,.26), inset 0 1px 0 rgba(var(--surface-rgb), .08) !important;
    }

    @media (max-width: 680px) {
      .site-header {
        background: rgba(var(--surface-rgb), .76) !important;
        backdrop-filter: blur(20px) saturate(126%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(126%) !important;
      }
      dialog {
        backdrop-filter: blur(18px) saturate(116%);
        -webkit-backdrop-filter: blur(18px) saturate(116%);
      }


      .hero-product,
.contact-shell {
      }
      .planning-flexibility-note,
.pricing-copy,
.pricing-panel,
.route-switch button:not(.active) {
      }
    }

    @media (prefers-reduced-transparency: reduce) {
      .site-header,
      .mini-cart-button,
      .mobile-nav-toggle,
      .mobile-nav-panel,
      .hero-product,
      .route-switch button:not(.active),
      .planning-flexibility-note,
      .pricing-copy,
      .pricing-panel,
      .contact-shell,
      .request-overview,
      dialog {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
    }

/* Mobile: long German apprenticeship and recommendation titles must stay inside the viewport. */
    @media (max-width: 680px) {
      #berufe .career-detail-header,
      #berufe .career-selection-summary,
      #berufe .career-selection-summary > div,
      #berufe .recommendation-intro,
      #berufe .recommendation-intro .year-intro-main,
      #berufe .recommendation-intro .year-intro-main > div {
        min-width: 0 !important;
        max-width: 100% !important;
      }

      #berufe .career-detail-header h3 {
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(1.95rem, 8.5vw, 2.25rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -.035em !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
      }

      #berufe .recommendation-intro h4 {
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(1.9rem, 8.2vw, 2.2rem) !important;
        line-height: 1.04 !important;
        letter-spacing: -.03em !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
      }
    }

/* Finaler mobiler Header und Navigationszustand ohne historische Override-Kaskade. */
    @media (max-width: 680px) {
      .hero-v14 {
        padding-top: 8px !important;
      }
      .hero-academy-brand {
        margin-top: -2px !important;
        padding-top: 0 !important;
      }
    }

    @media (max-width: 900px) {
      .mobile-nav-panel {
        border-color: rgba(var(--surface-rgb), .98) !important;
        background: rgba(var(--surface-rgb), .97) !important;
        box-shadow: 0 28px 76px rgba(20,36,31,.20), inset 0 1px 0 rgba(var(--surface-rgb), 1) !important;
        backdrop-filter: blur(38px) saturate(118%) brightness(1.03) !important;
        -webkit-backdrop-filter: blur(38px) saturate(118%) brightness(1.03) !important;
      }
      .mobile-nav-panel a {
        color: var(--neutral-950) !important;
        text-shadow: none !important;
      }
      .mobile-nav-panel a:hover,
      .mobile-nav-panel a:focus-visible {
        background: rgba(235,248,242,.78) !important;
      }
    }

.catalog-participant-heading { margin-bottom: 14px; }
    .catalog-participant-heading > strong { display: block; color: var(--neutral-900); font-family: var(--font-heading); font-size: 1.02rem; }
    .catalog-participant-heading > p { margin: 5px 0 0; color: var(--neutral-600); font-size: .82rem; line-height: 1.5; }
    .catalog-participant-profiles { display: grid; gap: 10px; }
    .catalog-participant-profile { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1.45fr) minmax(0, .9fr); gap: 10px; align-items: end; padding: 12px; border: 1px solid rgba(var(--ink-rgb), .12); border-radius: 16px; background: rgba(var(--surface-rgb), .68); }
    .catalog-participant-profile-index { align-self: center; color: var(--primary-800); font-family: var(--font-heading); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
    .catalog-participant-profile label { margin: 0; min-width: 0; color: var(--neutral-700); font-size: .78rem; }
    .catalog-participant-profile select { width: 100%; margin-top: 5px; }

    .request-price-gate { padding: 18px; border: 1px solid rgba(44,149,107,.28); border-radius: 18px; background: linear-gradient(135deg, rgba(var(--primary-50-rgb), .82), rgba(var(--surface-rgb), .94)); }
    .request-price-gate > strong { display: block; color: var(--primary-900); font-family: var(--font-heading); font-size: 1.08rem; }
    .request-price-gate > p { margin: 6px 0 14px; color: var(--neutral-700); line-height: 1.5; }

    .request-result-dialog { width: min(650px, calc(100vw - 28px)); }
    .request-result-body { padding: clamp(22px, 4vw, 34px) !important; text-align: center; }
    .request-result-body p { max-width: 540px; margin: 0 auto 12px; color: var(--neutral-700); line-height: 1.6; }
    .request-result-body p strong { color: var(--neutral-900); }
    .request-result-icon { width: 68px; height: 68px; display: grid; place-items: center; margin: 2px auto 20px; border-radius: 50%; font-family: var(--font-heading); font-size: 2rem; font-weight: 800; }
    .request-result-icon-success { color: var(--primary-900); background: var(--primary-100); border: 1px solid var(--primary-300); }
    .request-result-icon-error { color: #8a3328; background: #fff0ec; border: 1px solid #e7b7ac; }
    .request-result-actions { justify-content: center !important; margin-top: 24px; }
    .request-failure-detail { max-width: 540px; margin: 14px auto 0; color: #8a3328; font-size: .78rem; line-height: 1.45; }
    .catalog-profile-list { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
    .catalog-profile-list li { color: var(--neutral-600); font-size: .8rem; line-height: 1.4; }
    .catalog-profile-list strong { color: var(--neutral-800); }
    .request-submit-busy { pointer-events: none; opacity: .72; }

    @media (max-width: 680px) {
      .catalog-participant-profile { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
      .catalog-participant-profile-index { margin-bottom: 1px; }
      .request-result-actions { display: grid !important; grid-template-columns: 1fr; }
      .request-result-actions .button { width: 100%; }
    }

/* Fehler- und Exportdialoge: Bedienelemente auch ohne Hover eindeutig sichtbar. */
    .dialog-close {
      color: var(--on-panel-dark) !important;
      background: var(--danger) !important;
      border-color: var(--danger) !important;
      box-shadow: 0 5px 14px rgba(var(--ink-rgb), .14) !important;
    }
    .dialog-close:hover,
    .dialog-close:focus-visible {
      color: var(--on-panel-dark) !important;
      background: var(--danger-strong) !important;
      border-color: var(--danger-strong) !important;
    }
    dialog .dialog-actions .button-secondary,
    dialog .dialog-actions .button-quiet,
    .plan-transfer-dialog .button-secondary {
      color: var(--neutral-900) !important;
    }
    #requestFailureDialog .badge {
      color: #7c2c24 !important;
      background: #fff0ec !important;
      border-color: #e7b7ac !important;
    }
    #requestFailureDialog .request-failure-detail.is-loading {
      color: var(--neutral-700) !important;
    }
    #requestFailureContactButton[aria-busy="true"] {
      cursor: wait;
      opacity: .76;
      pointer-events: none;
    }

/* Filterwechsel sollen die gewollte Position der Expertenansicht nicht verschieben. */
    .catalog-matrix-frame,
    .catalog-matrix-wrap,
    .catalog-matrix,
    #catalogContent {
      overflow-anchor: none;
    }

    @media (min-width: 981px) {
      .catalog-matrix-frame { scroll-margin-top: 190px; }
    }


    /* Schwebende Filterleiste und separat gerahmter Seminarbereich. */
    @media (min-width: 981px) {
      html:not(.seminarplaner-autoheight) .catalog-matrix-frame {
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
      }

      html:not(.seminarplaner-autoheight) .catalog-matrix-inline-head {
        position: sticky;
        z-index: 29;
        width: 100%;
        margin: 0 0 10px;
        overflow: hidden;
        box-sizing: border-box;
        border: 1px solid rgba(116, 132, 126, .30);
        border-radius: 18px;
        background: rgba(var(--surface-rgb), .94);
        box-shadow: 0 12px 30px rgba(var(--ink-rgb), .09);
      }
      html:not(.seminarplaner-autoheight) .catalog-matrix-inline-head-inner {
        width: 100%;
        overflow: hidden;
        border-radius: inherit;
      }
      html:not(.seminarplaner-autoheight) .catalog-matrix-inline-head .catalog-matrix {
        margin: 0 !important;
        background: transparent !important;
        will-change: transform;
      }
      html:not(.seminarplaner-autoheight) .catalog-matrix-inline-head .catalog-matrix thead {
        visibility: visible !important;
      }
      html:not(.seminarplaner-autoheight) .catalog-matrix-inline-head .catalog-matrix thead th {
        position: static !important;
        top: auto !important;
        height: 58px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        transform: none !important;
        border-bottom: 0 !important;
        background: rgba(var(--surface-rgb), .80) !important;
        box-shadow: none !important;
      }
      html:not(.seminarplaner-autoheight) .catalog-matrix-inline-head .catalog-matrix thead th:first-child {
        border-top-left-radius: 17px;
        border-bottom-left-radius: 17px;
      }
      html:not(.seminarplaner-autoheight) .catalog-matrix-inline-head .catalog-matrix thead th:last-child {
        border-top-right-radius: 17px;
        border-bottom-right-radius: 17px;
      }

      /* Der unsichtbare Tabellenkopf dient nur noch der Spaltengeometrie und
         belegt oberhalb des ersten Seminars keinen sichtbaren Platz mehr. */
      html:not(.seminarplaner-autoheight) .catalog-matrix-body-table > thead {
        visibility: hidden !important;
        height: 0 !important;
      }
      html:not(.seminarplaner-autoheight) .catalog-matrix-body-table > thead tr,
      html:not(.seminarplaner-autoheight) .catalog-matrix-body-table > thead th {
        height: 0 !important;
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border: 0 !important;
        line-height: 0 !important;
        font-size: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
      }
      html:not(.seminarplaner-autoheight) .catalog-matrix-body-table > thead th > * {
        display: none !important;
      }

      /* Eigener, geschlossener Rahmen fuer die Seminare. Clip-path verhindert,
         dass Tabellenzellen ueber die gerundeten Ecken hinausragen. */
      html:not(.seminarplaner-autoheight) .catalog-matrix-wrap {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        border: 1px solid rgba(116, 132, 126, .30) !important;
        border-radius: 18px !important;
        background: var(--neutral-0) !important;
        background-clip: padding-box !important;
        box-shadow: 0 10px 28px rgba(var(--ink-rgb), .035) !important;
        clip-path: inset(0 round 18px);
        -webkit-overflow-scrolling: touch;
      }
      html:not(.seminarplaner-autoheight) .catalog-matrix-body-table tbody tr:first-child td:first-child {
        border-top-left-radius: 17px;
      }
      html:not(.seminarplaner-autoheight) .catalog-matrix-body-table tbody tr:first-child td:last-child {
        border-top-right-radius: 17px;
      }
      html:not(.seminarplaner-autoheight) .catalog-matrix-body-table tbody tr:last-child td:first-child {
        border-bottom-left-radius: 17px;
      }
      html:not(.seminarplaner-autoheight) .catalog-matrix-body-table tbody tr:last-child td:last-child {
        border-bottom-right-radius: 17px;
      }
      html:not(.seminarplaner-autoheight) .catalog-matrix-body-table tbody tr:last-child td {
        border-bottom: 0 !important;
      }
      .matrix-header-seminar-cell {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }
      .matrix-header-seminar-label {
        flex: 0 0 auto;
        color: var(--neutral-700);
        font-weight: 760;
      }
      .matrix-header-search {
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
      }
      .matrix-header-search::before {
        content: "⌕";
        position: absolute;
        top: 50%;
        left: 9px;
        z-index: 1;
        transform: translateY(-52%);
        color: var(--neutral-500);
        font-size: .82rem;
        pointer-events: none;
      }
      .matrix-header-search-input {
        width: 100%;
        min-width: 0;
        height: 32px;
        padding: 5px 9px 5px 27px;
        border: 1px solid var(--neutral-200);
        border-radius: 9px;
        color: var(--neutral-800);
        background: rgba(var(--surface-rgb), .72);
        font: inherit;
        font-size: .70rem;
        font-weight: 650;
        letter-spacing: .01em;
        outline: none;
      }
      .matrix-header-search-input::placeholder { color: var(--neutral-500); opacity: .92; }
      .matrix-header-search-input:focus {
        border-color: var(--accent-blue-500);
        box-shadow: 0 0 0 2px rgba(95, 168, 215, .14);
        background: rgba(var(--surface-rgb), .92);
      }
    }

    @media (max-width: 980px) {
      .catalog-matrix-inline-head { display: none !important; }
    }

    html.seminarplaner-autoheight .catalog-matrix-inline-head { display: none !important; }


    /* Freitextsuche und Filter liegen auf einer gemeinsamen Bedienlinie. */
    @media (min-width: 981px) {
      html:not(.seminarplaner-autoheight) .catalog-matrix-inline-head .catalog-matrix thead th {
        vertical-align: middle !important;
      }
      html:not(.seminarplaner-autoheight) .matrix-header-seminar-cell {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center !important;
        gap: 8px !important;
        width: 100%;
        height: 32px;
        min-height: 32px;
        margin: 0;
      }
      html:not(.seminarplaner-autoheight) .matrix-header-seminar-label {
        display: inline-flex;
        align-items: center;
        height: 30px;
        margin: 0;
        line-height: 1;
      }
      html:not(.seminarplaner-autoheight) .matrix-header-search {
        display: block;
        height: 30px;
        min-width: 0;
        margin: 0;
      }
      html:not(.seminarplaner-autoheight) .matrix-header-search-input,
      html:not(.seminarplaner-autoheight) .matrix-header-select,
      html:not(.seminarplaner-autoheight) .matrix-header-filter {
        box-sizing: border-box;
        height: 30px !important;
        min-height: 30px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
      }
      html:not(.seminarplaner-autoheight) .matrix-header-search-input {
        display: block;
        width: 100%;
        line-height: 18px;
      }
    }


    :is(#addDialog, #basketDialog, #priceApprovalDialog, #selectionEditDialog, #modeSwitchDialog, #planExportDialog, #planImportDialog)[open] {
      overflow: hidden !important;
    }
    :is(#addDialog, #priceApprovalDialog, #modeSwitchDialog, #planExportDialog, #planImportDialog)[open] > .dialog-body,
    #basketDialog[open] > .dialog-body,
    #selectionEditDialog[open] > .dialog-body {
      min-height: 0 !important;
      height: auto !important;
      max-height: var(--request-dialog-max-body-height, calc(100dvh - 110px)) !important;
    }
    #addDialog[open] .request-flow-scroll,
    #priceApprovalDialog[open] .request-flow-scroll,
    #modeSwitchDialog[open] .request-flow-scroll,
    #planExportDialog[open] .request-flow-scroll,
    #planImportDialog[open] .request-flow-scroll,
    #basketDialog[open] .basket-list,
    #selectionEditDialog[open] .selection-edit-list {
      min-height: 0 !important;
    }

/* v15.04: konsistentes, milchig eingefaerbtes Glas fuer Controls.
   Innenlichter und Farbverlaeufe bleiben erhalten. Die eigentliche Fuellflaeche
   wird nun nur bis zur Padding-Kante gezeichnet, damit an den Aussenraendern
   keine helle oder dunkle Konturlinie mehr entsteht. */
:root {
  --glass-angle: 136deg;
  --glass-light-x: 24%;
  --glass-light-y: 18%;
  --glass-blur: blur(15px) saturate(120%);

  --glass-shadow-neutral: 0 12px 27px rgba(var(--ink-rgb), .095), 0 3px 9px rgba(var(--ink-rgb), .045);
  --glass-shadow-green: 0 13px 29px rgba(20,102,71,.145), 0 3px 9px rgba(20,102,71,.060);
  --glass-shadow-blue: 0 13px 29px rgba(32,115,159,.135), 0 3px 9px rgba(32,115,159,.055);
  --glass-shadow-violet: 0 13px 29px rgba(89,79,149,.125), 0 3px 9px rgba(89,79,149,.050);
  --glass-shadow-red: 0 12px 27px rgba(124,47,39,.145), 0 3px 9px rgba(124,47,39,.060);
  --glass-shadow-dark: 0 14px 31px rgba(10,18,15,.18), 0 4px 10px rgba(10,18,15,.07);

  --glass-hover-shadow-neutral: 0 18px 36px rgba(var(--ink-rgb), .135), 0 5px 13px rgba(var(--ink-rgb), .070);
  --glass-hover-shadow-green: 0 19px 38px rgba(20,102,71,.180), 0 5px 13px rgba(20,102,71,.085);
  --glass-hover-shadow-blue: 0 19px 38px rgba(32,115,159,.170), 0 5px 13px rgba(32,115,159,.080);
  --glass-hover-shadow-violet: 0 19px 38px rgba(89,79,149,.155), 0 5px 13px rgba(89,79,149,.075);
  --glass-hover-shadow-red: 0 19px 38px rgba(124,47,39,.170), 0 5px 13px rgba(124,47,39,.080);
  --glass-hover-shadow-dark: 0 18px 38px rgba(10,18,15,.225), 0 5px 12px rgba(10,18,15,.090);
  --glass-hover-lift: -2px;

  /* Der Farbton verlaeuft nun hauptsaechlich von oben nach unten. Dadurch
     entsteht an der linken oder rechten Kante kein dunkler Farbstreifen mehr.
     Nur die breite, diffuse Lichtwolke wandert mit der Scrollposition. */
  --glass-bg-neutral:
    radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .27) 0%, rgba(var(--surface-rgb), .11) 36%, transparent 70%),
    linear-gradient(180deg, rgba(247,251,249,.94) 0%, rgba(208,225,218,.78) 100%);
  --glass-bg-neutral-hover:
    radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .28) 0%, rgba(var(--surface-rgb), .12) 36%, transparent 70%),
    linear-gradient(180deg, rgba(239,250,244,.96) 0%, rgba(183,222,203,.82) 100%);
  --glass-bg-green:
    radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .27) 0%, rgba(var(--surface-rgb), .10) 36%, transparent 70%),
    linear-gradient(180deg, rgba(205,243,224,.97) 0%, rgba(101,198,151,.84) 100%);
  --glass-bg-blue:
    radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .27) 0%, rgba(var(--surface-rgb), .10) 36%, transparent 70%),
    linear-gradient(180deg, rgba(207,240,253,.97) 0%, rgba(95,186,226,.82) 100%);
  --glass-bg-violet:
    radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .27) 0%, rgba(var(--surface-rgb), .10) 36%, transparent 70%),
    linear-gradient(180deg, rgba(232,228,255,.97) 0%, rgba(166,153,230,.82) 100%);
  --glass-bg-red:
    radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .25) 0%, rgba(var(--surface-rgb), .09) 36%, transparent 70%),
    linear-gradient(180deg, rgba(255,225,218,.98) 0%, rgba(226,143,126,.84) 100%);
  --glass-bg-dark:
    radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .13) 0%, rgba(var(--surface-rgb), .05) 34%, transparent 68%),
    linear-gradient(180deg, rgba(57,68,64,.93) 0%, rgba(24,32,29,.90) 100%);
}

/* =====================================================================
   Glaslage im Dunkelmodus

   Die Fuellflaechen oben sind fest kodierte helle Verlaeufe. Sie liegen
   ueber praktisch jedem Bauteil - Karten, Auswahlzeilen, Aufklappbloecke,
   Auswahlfelder - und waren der Grund, warum die Seite im Dunkelmodus
   trotz dunkler Tokens hell blieb.

   Statt 34 Verlaeufe einzeln anzufassen, werden hier die sieben Tokens
   umdefiniert. Das Innenlicht bleibt hell (sonst waere es kein Glas),
   die Fuellung wird dunkel und behaelt ihren Farbton.
   ===================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass-bg-neutral:
      radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(255,255,255,.075) 0%, rgba(255,255,255,.03) 36%, transparent 70%),
      linear-gradient(180deg, rgba(32,42,39,.94) 0%, rgba(19,27,25,.90) 100%);
    --glass-bg-neutral-hover:
      radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(255,255,255,.095) 0%, rgba(255,255,255,.04) 36%, transparent 70%),
      linear-gradient(180deg, rgba(41,54,50,.96) 0%, rgba(25,36,32,.92) 100%);
    --glass-bg-green:
      radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(255,255,255,.075) 0%, rgba(255,255,255,.03) 36%, transparent 70%),
      linear-gradient(180deg, rgba(19,58,42,.96) 0%, rgba(11,38,28,.92) 100%);
    --glass-bg-blue:
      radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(255,255,255,.075) 0%, rgba(255,255,255,.03) 36%, transparent 70%),
      linear-gradient(180deg, rgba(17,50,68,.96) 0%, rgba(10,33,46,.92) 100%);
    --glass-bg-violet:
      radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(255,255,255,.075) 0%, rgba(255,255,255,.03) 36%, transparent 70%),
      linear-gradient(180deg, rgba(43,38,74,.96) 0%, rgba(29,25,52,.92) 100%);
    --glass-bg-red:
      radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(255,255,255,.07) 0%, rgba(255,255,255,.028) 36%, transparent 70%),
      linear-gradient(180deg, rgba(74,32,28,.96) 0%, rgba(50,21,18,.92) 100%);
    --glass-bg-dark:
      radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 34%, transparent 68%),
      linear-gradient(180deg, rgba(14,20,18,.95) 0%, rgba(8,13,11,.92) 100%);

    /* Schatten wirken auf dunklem Grund nur ueber Schwarz, nicht ueber Farbe */
    --glass-shadow-neutral: 0 12px 27px rgba(0,0,0,.42), 0 3px 9px rgba(0,0,0,.28);
    --glass-shadow-green:   0 13px 29px rgba(0,0,0,.46), 0 3px 9px rgba(0,0,0,.30);
    --glass-shadow-blue:    0 13px 29px rgba(0,0,0,.46), 0 3px 9px rgba(0,0,0,.30);
    --glass-shadow-violet:  0 13px 29px rgba(0,0,0,.46), 0 3px 9px rgba(0,0,0,.30);
    --glass-shadow-red:     0 12px 27px rgba(0,0,0,.46), 0 3px 9px rgba(0,0,0,.30);
    --glass-shadow-dark:    0 14px 31px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.32);
    --glass-hover-shadow-neutral: 0 18px 36px rgba(0,0,0,.52), 0 5px 13px rgba(0,0,0,.34);
    --glass-hover-shadow-green:   0 19px 38px rgba(0,0,0,.55), 0 5px 13px rgba(0,0,0,.36);
    --glass-hover-shadow-blue:    0 19px 38px rgba(0,0,0,.55), 0 5px 13px rgba(0,0,0,.36);
    --glass-hover-shadow-violet:  0 19px 38px rgba(0,0,0,.55), 0 5px 13px rgba(0,0,0,.36);
    --glass-hover-shadow-red:     0 19px 38px rgba(0,0,0,.55), 0 5px 13px rgba(0,0,0,.36);
    --glass-hover-shadow-dark:    0 18px 38px rgba(0,0,0,.60), 0 5px 12px rgba(0,0,0,.38);
  }
}

:root[data-theme="dark"] {
    --glass-bg-neutral:
      radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(255,255,255,.075) 0%, rgba(255,255,255,.03) 36%, transparent 70%),
      linear-gradient(180deg, rgba(32,42,39,.94) 0%, rgba(19,27,25,.90) 100%);
    --glass-bg-neutral-hover:
      radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(255,255,255,.095) 0%, rgba(255,255,255,.04) 36%, transparent 70%),
      linear-gradient(180deg, rgba(41,54,50,.96) 0%, rgba(25,36,32,.92) 100%);
    --glass-bg-green:
      radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(255,255,255,.075) 0%, rgba(255,255,255,.03) 36%, transparent 70%),
      linear-gradient(180deg, rgba(19,58,42,.96) 0%, rgba(11,38,28,.92) 100%);
    --glass-bg-blue:
      radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(255,255,255,.075) 0%, rgba(255,255,255,.03) 36%, transparent 70%),
      linear-gradient(180deg, rgba(17,50,68,.96) 0%, rgba(10,33,46,.92) 100%);
    --glass-bg-violet:
      radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(255,255,255,.075) 0%, rgba(255,255,255,.03) 36%, transparent 70%),
      linear-gradient(180deg, rgba(43,38,74,.96) 0%, rgba(29,25,52,.92) 100%);
    --glass-bg-red:
      radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(255,255,255,.07) 0%, rgba(255,255,255,.028) 36%, transparent 70%),
      linear-gradient(180deg, rgba(74,32,28,.96) 0%, rgba(50,21,18,.92) 100%);
    --glass-bg-dark:
      radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 34%, transparent 68%),
      linear-gradient(180deg, rgba(14,20,18,.95) 0%, rgba(8,13,11,.92) 100%);

    /* Schatten wirken auf dunklem Grund nur ueber Schwarz, nicht ueber Farbe */
    --glass-shadow-neutral: 0 12px 27px rgba(0,0,0,.42), 0 3px 9px rgba(0,0,0,.28);
    --glass-shadow-green:   0 13px 29px rgba(0,0,0,.46), 0 3px 9px rgba(0,0,0,.30);
    --glass-shadow-blue:    0 13px 29px rgba(0,0,0,.46), 0 3px 9px rgba(0,0,0,.30);
    --glass-shadow-violet:  0 13px 29px rgba(0,0,0,.46), 0 3px 9px rgba(0,0,0,.30);
    --glass-shadow-red:     0 12px 27px rgba(0,0,0,.46), 0 3px 9px rgba(0,0,0,.30);
    --glass-shadow-dark:    0 14px 31px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.32);
    --glass-hover-shadow-neutral: 0 18px 36px rgba(0,0,0,.52), 0 5px 13px rgba(0,0,0,.34);
    --glass-hover-shadow-green:   0 19px 38px rgba(0,0,0,.55), 0 5px 13px rgba(0,0,0,.36);
    --glass-hover-shadow-blue:    0 19px 38px rgba(0,0,0,.55), 0 5px 13px rgba(0,0,0,.36);
    --glass-hover-shadow-violet:  0 19px 38px rgba(0,0,0,.55), 0 5px 13px rgba(0,0,0,.36);
    --glass-hover-shadow-red:     0 19px 38px rgba(0,0,0,.55), 0 5px 13px rgba(0,0,0,.36);
    --glass-hover-shadow-dark:    0 18px 38px rgba(0,0,0,.60), 0 5px 12px rgba(0,0,0,.38);
}

/* Gemeinsame Materialbasis. Die vorhandene Borderbreite bleibt fuer das Layout,
   ist aber transparent. So entstehen keine dunklen/hellen Seitenkanten. */
.mini-cart-button,
.mobile-nav-toggle {
  border-color: transparent !important;
  border-style: solid !important;
  background-origin: padding-box !important;
  background-clip: padding-box !important;
  background-size: 100% 100% !important;
  outline-color: transparent;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
}


.button,
.route-switch button,
.journey-year-tabs .tab,
.catalog-display-switch button,
.catalog-select-button,
.catalog-matrix-select-button,
.matrix-header-filter,
.matrix-header-select,
button.price-tier,
.details-button,
.dialog-close,
.package-details-arrow,
.past-year-arrow,
.planning-flexibility-chevron,
.academy-faq-shell-chevron,
.academy-faq-item > summary span,
.published-terms-chevron,
.academy-terms-trigger-arrow,
.year-exception-arrow,
.journey-disclosure-icon,
.badge,
.meta-chip,
.category-chip,
.seminar-role,
.category-badge,
.catalog-category-title,
.catalog-card-id,
.package-summary-line span,
.hero-product-status,
.request-overview-stats span,
#seminarDialog .duration-chip,
#seminarDialog .year-chip,
#seminarDialog .seminar-id-chip,
#seminarDialog .audience-chip {
  border-color: transparent !important;
  border-style: solid !important;
  background-origin: padding-box !important;
  background-clip: padding-box !important;
  background-size: 100% 100% !important;
  outline-color: transparent;
}

.button,
.mini-cart-button,
.mobile-nav-toggle,
.route-switch button,
.journey-year-tabs .tab,
.catalog-display-switch button,
.catalog-select-button,
.catalog-matrix-select-button,
.matrix-header-filter,
.matrix-header-select,
button.price-tier,
.details-button,
.dialog-close,
.package-core-selected,
.journey-back {
  transition: transform 165ms ease, box-shadow 185ms ease, background 185ms ease, color 165ms ease !important;
}

/* Neutrale Controls. */
.mini-cart-button:not(.has-items),
.mobile-nav-toggle {
  --glass-control-bg: var(--glass-bg-neutral);
  --glass-control-bg-hover: var(--glass-bg-neutral-hover);
  color: var(--neutral-800) !important;
  background: var(--glass-control-bg) !important;
  border-color: transparent !important;
  box-shadow: var(--glass-shadow-neutral) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
}


.button:not(.button-primary):not(.button-accent):not(.button-danger):not(.package-core-action):not(.package-options-action):not(.package-options-selected):not(.package-remove-all),
.route-switch button:not(.active),
.journey-year-tabs .tab:not(.active),
.catalog-display-switch button:not(.active),
.catalog-select-button,
.catalog-matrix-select-button,
.matrix-header-filter:not(.active),
.matrix-header-select,
button.price-tier:not(.is-selected),
.package-core-selected,
.journey-back {
  --glass-control-bg: var(--glass-bg-neutral);
  --glass-control-bg-hover: var(--glass-bg-neutral-hover);
  color: var(--neutral-800) !important;
  background: var(--glass-control-bg) !important;
  border-color: transparent !important;
  box-shadow: var(--glass-shadow-neutral) !important;
}

/* Info-Controls sind bewusst leicht gruen. */
.details-button {
  --glass-control-bg: var(--glass-bg-green);
  color: var(--primary-800) !important;
  background: var(--glass-control-bg) !important;
  box-shadow: var(--glass-shadow-green) !important;
}

/* Primaere gruene Aktionen. */
.button-primary,
.button-accent,
.package-core-action,
.catalog-card.selected .catalog-select-button,
tr.selected .catalog-matrix-select-button,
.matrix-header-filter.active,
button.price-tier.is-selected,
.published-term-plan-button.is-selected,
.mini-cart-button.has-items,
.hero-main-action {
  --glass-control-bg: var(--glass-bg-green);
  color: var(--primary-900) !important;
  background: var(--glass-control-bg) !important;
  border-color: transparent !important;
  box-shadow: var(--glass-shadow-green) !important;
}
.button-primary *,
.button-accent *,
.catalog-card.selected .catalog-select-button *,
tr.selected .catalog-matrix-select-button *,
.mini-cart-button.has-items *,
button.price-tier.is-selected,
button.price-tier.is-selected span,
button.price-tier.is-selected strong,
button.price-tier.is-selected small {
  color: var(--primary-900) !important;
}
.hero-main-action { box-shadow: 0 15px 33px rgba(20,102,71,.135), 0 4px 10px rgba(20,102,71,.055) !important; }

/* Blaue Paketaktionen. */
.package-options-action,
.package-options-selected {
  --glass-control-bg: var(--glass-bg-blue);
  color: var(--accent-blue-700) !important;
  background: var(--glass-control-bg) !important;
  border-color: transparent !important;
  box-shadow: var(--glass-shadow-blue) !important;
}

/* Dunkle aktive Umschalter. */
.route-switch button.active,
.journey-year-tabs .tab.active,
.catalog-display-switch button.active {
  --glass-control-bg: var(--glass-bg-dark);
  color: var(--on-panel-dark) !important;
  background: var(--glass-control-bg) !important;
  border-color: transparent !important;
  box-shadow: var(--glass-shadow-dark) !important;
}
.route-switch button.active strong,
.route-switch button.active span,
.journey-year-tabs .tab.active > span,
.journey-year-tabs .tab.active small,
.catalog-display-switch button.active {
  color: var(--on-panel-dark) !important;
}

/* Destruktive Aktionen. */
.button-danger,
.package-remove-all,
.dialog-close,
#seminarDialog .dialog-close,
#addDialog .dialog-close,
#basketDialog .dialog-close,
#selectionEditDialog .dialog-close,
#priceApprovalDialog .dialog-close,
#modeSwitchDialog .dialog-close,
#planExportDialog .dialog-close,
#planImportDialog .dialog-close,
#requestSuccessDialog .dialog-close,
#requestFailureDialog .dialog-close {
  --glass-control-bg: var(--glass-bg-red);
  color: #713028 !important;
  background: var(--glass-control-bg) !important;
  border-color: transparent !important;
  box-shadow: var(--glass-shadow-red) !important;
}

/* Chips und Metadaten. Berufskuerzel in der Berufsliste sind absichtlich nicht enthalten. */
.badge,
.meta-chip,
.category-chip,
.seminar-role,
.category-badge,
.catalog-category-title,
.catalog-card-id,
.package-summary-line span,
#seminarDialog .year-chip,
#seminarDialog .audience-chip {
  color: var(--neutral-800) !important;
  background: var(--glass-bg-neutral) !important;
  box-shadow: 0 7px 16px rgba(var(--ink-rgb), .055) !important;
}
.category-soft-skills,
.category-it,
#seminarDialog .seminar-id-chip,
.hero-product-status {
  color: var(--primary-900) !important;
  background: var(--glass-bg-green) !important;
  box-shadow: 0 8px 18px rgba(20,102,71,.075) !important;
}
.category-digital,
.category-exam,
#seminarDialog .duration-chip {
  color: var(--accent-blue-700) !important;
  background: var(--glass-bg-blue) !important;
  box-shadow: 0 8px 18px rgba(32,115,159,.070) !important;
}
.category-ai {
  color: var(--accent-violet-700) !important;
  background: var(--glass-bg-violet) !important;
  box-shadow: 0 8px 18px rgba(89,79,149,.065) !important;
}

/* Die Berufskuerzel in Welchen Ausbildungsberuf planen Sie bleiben reine Typografie. */
.career-row .career-code {
  display: inline-flex !important;
  align-items: baseline !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--neutral-500) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Aktuell in Ihrer Anfrage bleibt als eigener Glasbereich deutlich vom Hintergrund getrennt. */
.request-overview {
  border-color: transparent !important;
  background:
    radial-gradient(circle at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .25), transparent 54%),
    linear-gradient(var(--glass-angle), rgba(225,248,237,.80), rgba(180,220,207,.56)) !important;
  box-shadow: 0 16px 36px rgba(22,58,45,.085) !important;
}
.request-overview-stats span:nth-child(1) { color: var(--primary-900) !important; background: var(--glass-bg-green) !important; box-shadow: 0 8px 18px rgba(20,102,71,.075) !important; }
.request-overview-stats span:nth-child(2) { color: var(--accent-blue-700) !important; background: var(--glass-bg-blue) !important; box-shadow: 0 8px 18px rgba(32,115,159,.070) !important; }
.request-overview-stats span:nth-child(3) { color: var(--accent-violet-700) !important; background: var(--glass-bg-violet) !important; box-shadow: 0 8px 18px rgba(89,79,149,.065) !important; }
.request-overview-stats span b { color: inherit !important; }

/* Auf- und Zuklappsteuerungen. */
.package-details-arrow,
.published-terms-chevron,
.academy-terms-trigger-arrow {
  color: var(--accent-blue-700) !important;
  background: var(--glass-bg-blue) !important;
  box-shadow: 0 8px 18px rgba(32,115,159,.070) !important;
}
.past-year-arrow,
.planning-flexibility-chevron,
.academy-faq-shell-chevron,
.academy-faq-item > summary span,
.year-exception-arrow,
.journey-disclosure-icon {
  color: var(--accent-violet-700) !important;
  background: var(--glass-bg-violet) !important;
  box-shadow: 0 8px 18px rgba(89,79,149,.065) !important;
}

/* Der Pfeil in der Berufsliste ist kein eigener Button. */
.career-row-arrow {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  padding: 0 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--neutral-400) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-size: 1.18rem !important;
  line-height: 1 !important;
  transform: translateX(0) !important;
  transition: transform 160ms ease, color 160ms ease !important;
}
.career-row:hover .career-row-arrow {
  color: var(--primary-700) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateX(4px) !important;
}

/* Klickbare Detailzeilen sind flacher als echte Buttons. */
.package-details summary,
.past-year-seminars > summary,
.planning-flexibility-details > summary,
.published-terms-toggle,
.academy-terms-trigger,
.year-exception-disclosure > summary,
.journey-disclosure > summary {
  border-color: transparent !important;
  background:
    radial-gradient(circle at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .24), transparent 54%),
    linear-gradient(var(--glass-angle), rgba(250,253,252,.62), rgba(205,219,214,.44)) !important;
  box-shadow: 0 9px 21px rgba(var(--ink-rgb), .05) !important;
  transition: transform 165ms ease, box-shadow 185ms ease, background 185ms ease !important;
}

/* Auswahlkarten. */
.seminar-choice,
.package-seminar {
  border-color: transparent !important;
  background:
    radial-gradient(circle at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .25), transparent 54%),
    linear-gradient(var(--glass-angle), rgba(250,253,252,.70), rgba(211,224,220,.48)) !important;
  box-shadow: 0 8px 18px rgba(var(--ink-rgb), .045) !important;
  transition: transform 165ms ease, box-shadow 185ms ease, background 185ms ease !important;
}
.seminar-choice.selected,
.package-seminar.selected {
  background: var(--glass-bg-green) !important;
  box-shadow: var(--glass-shadow-green) !important;
}

/* Einheitliche Hover-Sprache: neutrales Glas faerbt sich leicht gruen und hebt sich an. */
.button:not(.button-primary):not(.button-accent):not(.button-danger):not(.package-core-action):not(.package-options-action):not(.package-options-selected):not(.package-remove-all):hover:not(:disabled),
.mini-cart-button:not(.has-items):hover,
.mobile-nav-toggle:hover,
.route-switch button:not(.active):hover,
.journey-year-tabs .tab:not(.active):hover,
.catalog-display-switch button:not(.active):hover,
.catalog-select-button:hover:not(:disabled),
.catalog-matrix-select-button:hover:not(:disabled),
.matrix-header-filter:not(.active):hover,
.matrix-header-select:hover,
button.price-tier:not(.is-selected):hover:not(:disabled),
.package-core-selected:hover:not(:disabled),
.journey-back:hover {
  color: var(--primary-900) !important;
  background: var(--glass-bg-neutral-hover) !important;
  border-color: transparent !important;
  transform: translateY(var(--glass-hover-lift)) !important;
  box-shadow: var(--glass-hover-shadow-neutral) !important;
}
.route-switch button:not(.active):hover strong,
.route-switch button:not(.active):hover span,
.journey-year-tabs .tab:not(.active):hover > span,
.journey-year-tabs .tab:not(.active):hover small { color: var(--primary-900) !important; }

/* Bereits farbige Flaechen wechseln beim Hover nicht mehr die Farbe. */
.button-primary:hover:not(:disabled),
.button-accent:hover:not(:disabled),
.package-core-action:hover:not(:disabled),
.catalog-card.selected .catalog-select-button:hover:not(:disabled),
tr.selected .catalog-matrix-select-button:hover:not(:disabled),
.matrix-header-filter.active:hover,
button.price-tier.is-selected:hover:not(:disabled),
.published-term-plan-button.is-selected:hover:not(:disabled),
.mini-cart-button.has-items:hover,
.hero-main-action:hover,
.details-button:hover {
  color: var(--primary-900) !important;
  background: var(--glass-bg-green) !important;
  border-color: transparent !important;
  transform: translateY(var(--glass-hover-lift)) !important;
  box-shadow: var(--glass-hover-shadow-green) !important;
}
.package-options-action:hover:not(:disabled),
.package-options-selected:hover:not(:disabled) {
  color: var(--accent-blue-700) !important;
  background: var(--glass-bg-blue) !important;
  border-color: transparent !important;
  transform: translateY(var(--glass-hover-lift)) !important;
  box-shadow: var(--glass-hover-shadow-blue) !important;
}
.route-switch button.active:hover,
.journey-year-tabs .tab.active:hover,
.catalog-display-switch button.active:hover,
.seminar-view-switch.route-switch button.active:hover {
  color: var(--on-panel-dark) !important;
  background: var(--glass-bg-dark) !important;
  border-color: transparent !important;
  transform: translateY(var(--glass-hover-lift)) !important;
  box-shadow: var(--glass-hover-shadow-dark) !important;
}
.button-danger:hover:not(:disabled),
.package-remove-all:hover:not(:disabled),
.dialog-close:hover,
.dialog-close:focus-visible,
#seminarDialog .dialog-close:hover,
#addDialog .dialog-close:hover,
#basketDialog .dialog-close:hover,
#selectionEditDialog .dialog-close:hover,
#priceApprovalDialog .dialog-close:hover,
#modeSwitchDialog .dialog-close:hover,
#planExportDialog .dialog-close:hover,
#planImportDialog .dialog-close:hover,
#requestSuccessDialog .dialog-close:hover,
#requestFailureDialog .dialog-close:hover {
  color: #713028 !important;
  background: var(--glass-bg-red) !important;
  border-color: transparent !important;
  transform: translateY(var(--glass-hover-lift)) !important;
  box-shadow: var(--glass-hover-shadow-red) !important;
}

/* Kleine farbige Pfeilflaechen: ebenfalls nur Lift und Schatten. */
.package-details summary:hover .package-details-arrow,
.published-terms-toggle:hover .published-terms-chevron,
.academy-terms-trigger:hover .academy-terms-trigger-arrow {
  background: var(--glass-bg-blue) !important;
  border-color: transparent !important;
  transform: translateY(var(--glass-hover-lift)) !important;
  box-shadow: var(--glass-hover-shadow-blue) !important;
}
.past-year-seminars > summary:hover .past-year-arrow,
.planning-flexibility-details > summary:hover .planning-flexibility-chevron,
.academy-faq-shell:hover .academy-faq-shell-chevron,
.year-exception-disclosure > summary:hover .year-exception-arrow,
.journey-disclosure > summary:hover .journey-disclosure-icon {
  background: var(--glass-bg-violet) !important;
  border-color: transparent !important;
  transform: translateY(var(--glass-hover-lift)) !important;
  box-shadow: var(--glass-hover-shadow-violet) !important;
}

/* Neutrale grosse Klickflaechen bekommen beim Hover dieselbe dezente Gruentoenung. */
.package-details summary:hover,
.past-year-seminars > summary:hover,
.planning-flexibility-details > summary:hover,
.published-terms-toggle:hover,
.academy-terms-trigger:hover,
.year-exception-disclosure > summary:hover,
.journey-disclosure > summary:hover {
  border-color: transparent !important;
  background: var(--glass-bg-neutral-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 26px rgba(var(--ink-rgb), .065) !important;
}
.seminar-choice:not(.selected):hover,
.package-seminar:not(.selected):hover {
  border-color: transparent !important;
  background: var(--glass-bg-neutral-hover) !important;
  transform: translateY(var(--glass-hover-lift)) !important;
  box-shadow: var(--glass-hover-shadow-neutral) !important;
}
.seminar-choice.selected:hover,
.package-seminar.selected:hover {
  border-color: transparent !important;
  background: var(--glass-bg-green) !important;
  transform: translateY(var(--glass-hover-lift)) !important;
  box-shadow: var(--glass-hover-shadow-green) !important;
}

/* Kompetenzchips bleiben in ihrer Kategorie-Farbe. */
.planner-category-heading.category-badge[data-competency-info],
.category-chip.category-badge[data-competency-info],
.catalog-card-category.category-badge[data-competency-info],
.catalog-category-title[data-competency-info] {
  transition: transform 165ms ease, box-shadow 185ms ease, background 185ms ease !important;
}
.planner-category-heading.category-badge[data-competency-info]:hover,
.category-chip.category-badge[data-competency-info]:hover,
.catalog-card-category.category-badge[data-competency-info]:hover,
.catalog-category-title[data-competency-info]:hover,
.planner-category-heading.category-badge[data-competency-info]:focus-visible,
.category-chip.category-badge[data-competency-info]:focus-visible,
.catalog-card-category.category-badge[data-competency-info]:focus-visible,
.catalog-category-title[data-competency-info]:focus-visible {
  border-color: transparent !important;
  outline: none !important;
  transform: translateY(var(--glass-hover-lift)) !important;
  filter: none !important;
}
.category-soft-skills[data-competency-info]:hover,
.category-it[data-competency-info]:hover,
.category-soft-skills[data-competency-info]:focus-visible,
.category-it[data-competency-info]:focus-visible { background: var(--glass-bg-green) !important; box-shadow: var(--glass-hover-shadow-green) !important; }
.category-digital[data-competency-info]:hover,
.category-exam[data-competency-info]:hover,
.category-digital[data-competency-info]:focus-visible,
.category-exam[data-competency-info]:focus-visible { background: var(--glass-bg-blue) !important; box-shadow: var(--glass-hover-shadow-blue) !important; }
.category-ai[data-competency-info]:hover,
.category-ai[data-competency-info]:focus-visible { background: var(--glass-bg-violet) !important; box-shadow: var(--glass-hover-shadow-violet) !important; }
.category-default[data-competency-info]:hover,
.category-default[data-competency-info]:focus-visible { background: var(--glass-bg-neutral-hover) !important; box-shadow: var(--glass-hover-shadow-neutral) !important; }

/* Berufsauswahl: nur die Zeile reagiert dezent; das Kuerzel bleibt Text und der Pfeil bleibt frei. */
.career-row {
  transition: transform 165ms ease, box-shadow 185ms ease, background 185ms ease !important;
}
.career-row:hover {
  background: linear-gradient(135deg, rgba(245,252,248,.58), rgba(218,240,229,.38)) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(var(--ink-rgb), .055) !important;
}

/* Preisrechner: helle Auswahl braucht dunkle Schrift. */
button.price-tier.is-selected,
button.price-tier.is-selected span,
button.price-tier.is-selected strong,
button.price-tier.is-selected small,
button.price-tier.is-selected:hover,
button.price-tier.is-selected:hover span,
button.price-tier.is-selected:hover strong,
button.price-tier.is-selected:hover small {
  color: var(--primary-900) !important;
}

/* Fokus bleibt sichtbar, ohne die Hover-Optik mit einer dunklen Kontur zu vermischen. */
.button:focus-visible,
.mini-cart-button:focus-visible,
.mobile-nav-toggle:focus-visible,
.route-switch button:focus-visible,
.journey-year-tabs .tab:focus-visible,
.catalog-display-switch button:focus-visible,
.catalog-select-button:focus-visible,
.catalog-matrix-select-button:focus-visible,
.matrix-header-filter:focus-visible,
.matrix-header-select:focus-visible,
button.price-tier:focus-visible,
.details-button:focus-visible,
.dialog-close:focus-visible {
  outline: none !important;
  box-shadow: var(--glass-hover-shadow-neutral), 0 0 0 3px rgba(70,179,133,.14) !important;
}

.button:disabled,
.catalog-select-button:disabled,
.catalog-matrix-select-button:disabled,
button.price-tier:disabled {
  transform: none !important;
  opacity: .52;
  box-shadow: 0 4px 11px rgba(24,48,40,.03) !important;
}

@media (max-width: 680px) {
  :root {
    --glass-shadow-neutral: 0 9px 21px rgba(var(--ink-rgb), .065), 0 2px 6px rgba(var(--ink-rgb), .03);
    --glass-shadow-green: 0 10px 23px rgba(20,102,71,.09), 0 2px 6px rgba(20,102,71,.04);
    --glass-shadow-blue: 0 10px 23px rgba(32,115,159,.085), 0 2px 6px rgba(32,115,159,.035);
    --glass-shadow-violet: 0 10px 23px rgba(89,79,149,.08), 0 2px 6px rgba(89,79,149,.035);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --glass-angle: 136deg !important;
    --glass-light-x: 24% !important;
    --glass-light-y: 18% !important;
  }
  .button,
  .mini-cart-button,
  .mobile-nav-toggle,
  .route-switch button,
  .journey-year-tabs .tab,
  .catalog-display-switch button,
  .catalog-select-button,
  .catalog-matrix-select-button,
  .matrix-header-filter,
  .matrix-header-select,
  button.price-tier,
  .details-button,
  .dialog-close,
  .seminar-choice,
  .package-seminar,
  .career-row,
  .career-row-arrow {
    transform: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .button,
  .mini-cart-button,
  .mobile-nav-toggle,
  .route-switch button,
  .journey-year-tabs .tab,
  .catalog-display-switch button,
  .catalog-select-button,
  .catalog-matrix-select-button,
  .matrix-header-filter,
  .matrix-header-select,
  button.price-tier,
  .details-button,
  .dialog-close,
  .package-details-arrow,
  .past-year-arrow,
  .planning-flexibility-chevron,
  .academy-faq-shell-chevron,
  .academy-faq-item > summary span,
  .published-terms-chevron,
  .academy-terms-trigger-arrow,
  .year-exception-arrow,
  .journey-disclosure-icon,
  .badge,
  .meta-chip,
  .category-chip,
  .seminar-role,
  .category-badge,
  .catalog-category-title,
  .catalog-card-id,
  .package-summary-line span,
  .request-overview,
  .request-overview-stats span,
  .seminar-choice,
  .package-seminar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Terminwahl: offener/fixer Termin und Teilnahmepräferenz bei Hybrid-Terminen. */
.add-seminar-terms-intro {
  margin: -2px 0 2px;
  color: var(--neutral-600);
  font-size: .74rem;
  line-height: 1.45;
}
.add-seminar-term-row {
  grid-template-columns: minmax(0, 1fr) minmax(260px, .95fr);
  align-items: start;
}
.add-seminar-term-controls {
  min-width: 0;
  display: grid;
  gap: 8px;
}
.add-seminar-term-field {
  min-width: 0;
  display: grid;
  gap: 4px;
  margin: 0;
}
.add-seminar-term-field > span {
  color: var(--neutral-600);
  font-size: .66rem;
  font-weight: 730;
  letter-spacing: .02em;
}
.add-seminar-term-field select {
  width: 100%;
  min-height: 42px;
  padding: 7px 30px 7px 10px;
  border: 0 !important;
  border-radius: 11px;
  color: var(--neutral-900);
  background: linear-gradient(180deg, rgba(var(--surface-rgb), .74), rgba(235,246,241,.62)) !important;
  box-shadow: 0 8px 20px rgba(var(--ink-rgb), .075) !important;
  font: inherit;
  font-size: .76rem;
  box-sizing: border-box;
}
.add-seminar-attendance select {
  color: var(--primary-900);
  background: linear-gradient(180deg, rgba(239,253,246,.82), rgba(205,239,222,.64)) !important;
}
.add-seminar-attendance[hidden] { display: none !important; }
.published-term-overline .published-term-career {
  color: var(--accent-blue-700);
  font-weight: 820;
}
@media (max-width: 680px) {
  .add-seminar-term-row { grid-template-columns: 1fr; }
}

/* v15.05: keine physische 1-px-Kante mehr an Glas-Controls.
   Die Kontur wird nicht nur transparent gefaerbt, sondern die Borderbreite
   selbst entfernt. Innenlicht, Farbverlauf und weiche Aussenschatten bleiben. */
.seminar-term-availability,
.seminar-dialog-terms,
.add-seminar-terms,
.basket-seminar-term,
.published-term-plan-button.is-selected,
.request-price-gate,
.request-result-icon-success,
.hero-product-status,
.request-overview,
.request-overview-stats span,
.badge,
.meta-chip,
.category-chip,
.seminar-role,
.category-badge,
.catalog-category-title,
.catalog-card-id,
.package-summary-line span,
.button,
.mini-cart-button,
.mobile-nav-toggle,
.route-switch button,
.journey-year-tabs .tab,
.catalog-display-switch button,
.catalog-select-button,
.catalog-matrix-select-button,
.matrix-header-filter,
.matrix-header-select,
button.price-tier,
.details-button,
.dialog-close,
.package-details-arrow,
.past-year-arrow,
.planning-flexibility-chevron,
.academy-faq-shell-chevron,
.academy-faq-item > summary span,
.published-terms-chevron,
.academy-terms-trigger-arrow,
.year-exception-arrow,
.journey-disclosure-icon,
.button-primary,
.button-accent,
.package-core-action,
.package-options-action,
.package-options-selected,
.catalog-card.selected .catalog-select-button,
tr.selected .catalog-matrix-select-button,
.matrix-header-filter.active,
button.price-tier.is-selected,
.mini-cart-button.has-items,
.route-switch button.active,
.journey-year-tabs .tab.active,
.catalog-display-switch button.active,
.button-danger,
.package-remove-all,
#seminarDialog .seminar-id-chip,
#seminarDialog .duration-chip,
#seminarDialog .year-chip,
#seminarDialog .audience-chip,
#seminarDialog #dialogSelectButton {
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
}

/* Spezifische Altregeln in base.css/planner.css haben eine hoehere Selektorstaerke.
   Diese Controls werden deshalb explizit in das aktuelle Glassystem gezogen. */
#seminarDialog #dialogSelectButton,
.recommendation-card .button-primary,
.selection-tray .button-primary,
.package-actions-primary .package-core-action {
  color: var(--primary-900) !important;
  background: var(--glass-bg-green) !important;
  border: 0 !important;
  box-shadow: var(--glass-shadow-green) !important;
}
.package-actions-primary .package-options-action,
.package-actions-primary .package-options-selected {
  color: var(--accent-blue-700) !important;
  background: var(--glass-bg-blue) !important;
  border: 0 !important;
  box-shadow: var(--glass-shadow-blue) !important;
}
#seminarDialog #dialogSelectButton:hover:not(:disabled),
.recommendation-card .button-primary:hover:not(:disabled),
.selection-tray .button-primary:hover:not(:disabled),
.package-actions-primary .package-core-action:hover:not(:disabled) {
  color: var(--primary-900) !important;
  background: var(--glass-bg-green) !important;
  border: 0 !important;
  transform: translateY(var(--glass-hover-lift)) !important;
  box-shadow: var(--glass-hover-shadow-green) !important;
}
.package-actions-primary .package-options-action:hover:not(:disabled),
.package-actions-primary .package-options-selected:hover:not(:disabled) {
  color: var(--accent-blue-700) !important;
  background: var(--glass-bg-blue) !important;
  border: 0 !important;
  transform: translateY(var(--glass-hover-lift)) !important;
  box-shadow: var(--glass-hover-shadow-blue) !important;
}

/* Das Schliessen-X darf sich klar vom hellen Dialog abheben, bleibt aber im
   selben plastischen Glasstil statt wieder zur alten vollflaechigen Rotflaeche zu wechseln. */
.dialog-close,
#seminarDialog .dialog-close,
#addDialog .dialog-close,
#basketDialog .dialog-close,
#selectionEditDialog .dialog-close,
#priceApprovalDialog .dialog-close,
#modeSwitchDialog .dialog-close,
#planExportDialog .dialog-close,
#planImportDialog .dialog-close,
#requestSuccessDialog .dialog-close,
#requestFailureDialog .dialog-close {
  color: #69271f !important;
  background: var(--glass-bg-red) !important;
  border: 0 !important;
  box-shadow: var(--glass-shadow-red) !important;
}
.dialog-close:hover,
#seminarDialog .dialog-close:hover,
#addDialog .dialog-close:hover,
#basketDialog .dialog-close:hover,
#selectionEditDialog .dialog-close:hover,
#priceApprovalDialog .dialog-close:hover,
#modeSwitchDialog .dialog-close:hover,
#planExportDialog .dialog-close:hover,
#planImportDialog .dialog-close:hover,
#requestSuccessDialog .dialog-close:hover,
#requestFailureDialog .dialog-close:hover {
  color: #5b211b !important;
  background: var(--glass-bg-red) !important;
  border: 0 !important;
  transform: translateY(var(--glass-hover-lift)) !important;
  box-shadow: var(--glass-hover-shadow-red) !important;
}

/* Metachips im Seminarfenster ohne transparenten Randspalt. */
#seminarDialog .seminar-id-chip {
  background: var(--glass-bg-green) !important;
  box-shadow: var(--glass-shadow-green) !important;
}
#seminarDialog .duration-chip {
  background: var(--glass-bg-blue) !important;
  box-shadow: var(--glass-shadow-blue) !important;
}
#seminarDialog .year-chip,
#seminarDialog .audience-chip {
  background: var(--glass-bg-neutral) !important;
  box-shadow: var(--glass-shadow-neutral) !important;
}


/* v15.06: mehr Kontrast bei neutralen Controls, weichere aufklappbare Bereiche,
   farbliche Betonung wichtiger Aktionen und konsistent weich gerundete Checkboxen. */
:root {
  --glass-shadow-neutral: 0 13px 30px rgba(var(--ink-rgb), .115), 0 4px 11px rgba(var(--ink-rgb), .055);
  --glass-hover-shadow-neutral: 0 19px 39px rgba(var(--ink-rgb), .155), 0 6px 14px rgba(var(--ink-rgb), .078);
  --glass-bg-neutral:
    radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .30) 0%, rgba(var(--surface-rgb), .13) 36%, transparent 70%),
    linear-gradient(180deg, rgba(250,252,251,.97) 0%, rgba(196,212,206,.88) 100%);
  --glass-bg-neutral-hover:
    radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .30) 0%, rgba(var(--surface-rgb), .13) 36%, transparent 70%),
    linear-gradient(180deg, rgba(243,251,247,.98) 0%, rgba(170,214,193,.88) 100%);
}

.button:not(.button-primary):not(.button-accent):not(.button-danger):not(.package-core-action):not(.package-options-action):not(.package-options-selected):not(.package-remove-all),
.mini-cart-button:not(.has-items),
.mobile-nav-toggle,
.route-switch button:not(.active),
.journey-year-tabs .tab:not(.active),
.catalog-display-switch button:not(.active),
.catalog-select-button,
.catalog-matrix-select-button,
.matrix-header-filter:not(.active),
.matrix-header-select,
button.price-tier:not(.is-selected),
.package-core-selected,
.journey-back,
.badge,
.meta-chip,
.category-chip,
.seminar-role,
.category-badge,
.catalog-category-title,
.catalog-card-id,
.package-summary-line span,
#seminarDialog .year-chip,
#seminarDialog .audience-chip,
.seminar-term-availability {
  color: var(--neutral-900) !important;
}

.package-summary-line span,
.badge,
.meta-chip,
.catalog-card-id,
#seminarDialog .year-chip,
#seminarDialog .audience-chip {
  box-shadow: 0 9px 20px rgba(var(--ink-rgb), .075) !important;
}

.seminar-term-availability {
  border: 0 !important;
  background: var(--glass-bg-green) !important;
  box-shadow: 0 9px 19px rgba(20,102,71,.085) !important;
}
.seminar-term-availability::before {
  background: var(--primary-700) !important;
}

/* Wichtige Aktionen gezielt farblich hervorheben. */
.academy-terms-trigger,
.published-terms-dialog .badge {
  color: var(--accent-violet-700) !important;
  background: var(--glass-bg-violet) !important;
  border-color: transparent !important;
  box-shadow: var(--glass-shadow-violet) !important;
}
.academy-terms-trigger:hover,
.academy-terms-trigger:focus-visible {
  color: var(--accent-violet-700) !important;
  background: var(--glass-bg-violet) !important;
  box-shadow: var(--glass-hover-shadow-violet) !important;
}
.year-intro-actions .button-secondary,
#seminarDialog #dialogSelectButton,
.published-term-plan-button,
.published-term-plan-button.is-selected {
  color: var(--primary-900) !important;
  background: var(--glass-bg-green) !important;
  border: 0 !important;
  box-shadow: var(--glass-shadow-green) !important;
}
.year-intro-actions .button-secondary:hover:not(:disabled),
#seminarDialog #dialogSelectButton:hover:not(:disabled),
.published-term-plan-button:hover:not(:disabled),
.published-term-plan-button.is-selected:hover:not(:disabled) {
  color: var(--primary-900) !important;
  background: var(--glass-bg-green) !important;
  box-shadow: var(--glass-hover-shadow-green) !important;
}

/* Seminarfenster: alle Metachips gleich gross und ausgewogen. */
#seminarDialog .seminar-id-chip,
#seminarDialog .duration-chip,
#seminarDialog .year-chip,
#seminarDialog .audience-chip {
  min-height: 32px !important;
  padding: 5px 10px !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}
#seminarDialog .duration-chip strong,
#seminarDialog .year-chip strong,
#seminarDialog .seminar-id-chip strong,
#seminarDialog .audience-chip strong {
  font-size: inherit !important;
}

/* Aufklappbare Bereiche als ein zusammenhaengender weicher Glaskasten. */
.planning-flexibility-details,
.year-exception-disclosure,
.journey-disclosure,
.past-year-seminars,
.package-details,
.academy-faq-shell {
  overflow: hidden !important;
  border-color: transparent !important;
  background:
    radial-gradient(circle at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .26), transparent 56%),
    linear-gradient(180deg, rgba(249,251,250,.84) 0%, rgba(214,223,220,.64) 100%) !important;
  box-shadow: 0 13px 30px rgba(var(--ink-rgb), .055) !important;
}
.planning-flexibility-details > summary,
.year-exception-disclosure > summary,
.journey-disclosure > summary,
.past-year-seminars > summary,
.package-details > summary,
.academy-faq-shell > summary,
.academy-faq-item > summary {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
.planning-flexibility-details[open] > summary,
.year-exception-disclosure[open] > summary,
.journey-disclosure[open] > summary,
.past-year-seminars[open] > summary,
.package-details[open] > summary,
.academy-faq-shell[open] > summary,
.academy-faq-item[open] > summary {
  box-shadow: inset 0 -18px 22px rgba(var(--surface-rgb), .10) !important;
}
.planning-flexibility-body,
.year-exception-content,
.journey-disclosure-body,
.past-year-seminars-body,
.package-details-body,
.academy-faq-list,
.academy-faq-item > div {
  background: linear-gradient(180deg, rgba(var(--surface-rgb), .18) 0%, rgba(var(--surface-rgb), .07) 18%, transparent 52%) !important;
}
.planning-flexibility-body,
.year-exception-content,
.journey-disclosure-body,
.past-year-seminars-body,
.package-details-body,
.academy-faq-list {
  border-top: 1px solid rgba(var(--surface-rgb), .24) !important;
}

/* Weich gerundete Checkboxen statt harter Standards. */
.package-seminar input[type="checkbox"],
.seminar-choice input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--glass-bg-neutral) !important;
  box-shadow: 0 8px 18px rgba(var(--ink-rgb), .085) !important;
  background-origin: padding-box !important;
  background-clip: padding-box !important;
  cursor: pointer;
  transition: transform 165ms ease, box-shadow 185ms ease, background 185ms ease !important;
}
.package-seminar input[type="checkbox"]:hover,
.seminar-choice input[type="checkbox"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 22px rgba(var(--ink-rgb), .11) !important;
}
.package-seminar input[type="checkbox"]:checked,
.seminar-choice input[type="checkbox"]:checked {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-8' fill='none' stroke='%231c573f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .27) 0%, rgba(var(--surface-rgb), .10) 36%, transparent 70%),
    linear-gradient(180deg, rgba(205,243,224,.97) 0%, rgba(101,198,151,.84) 100%) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: center, center, center !important;
  background-size: 12px 12px, 100% 100%, 100% 100% !important;
  box-shadow: 0 10px 21px rgba(20,102,71,.13) !important;
}
.package-seminar input[type="checkbox"]:focus-visible,
.seminar-choice input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(70,179,133,.35) !important;
  outline-offset: 2px !important;
}

/* v15.07: zentrale Auswahlaktionen in Alle Seminare und Terminplanung farblich hervorheben. */
#catalogGrid .catalog-select-button,
.catalog-card .catalog-select-button,
.catalog-matrix .catalog-matrix-select-button,
.catalog-table .catalog-matrix-select-button {
  color: var(--primary-900) !important;
  background: var(--glass-bg-green) !important;
  border: 0 !important;
  box-shadow: var(--glass-shadow-green) !important;
}
#catalogGrid .catalog-select-button:hover:not(:disabled),
.catalog-card .catalog-select-button:hover:not(:disabled),
.catalog-matrix .catalog-matrix-select-button:hover:not(:disabled),
.catalog-table .catalog-matrix-select-button:hover:not(:disabled) {
  color: var(--primary-900) !important;
  background: var(--glass-bg-green) !important;
  border: 0 !important;
  transform: translateY(var(--glass-hover-lift)) !important;
  box-shadow: var(--glass-hover-shadow-green) !important;
}
button.button.button-secondary.published-term-plan-button,
button.button.button-secondary.published-term-plan-button.is-selected {
  color: var(--primary-900) !important;
  background: var(--glass-bg-green) !important;
  border: 0 !important;
  box-shadow: var(--glass-shadow-green) !important;
}
button.button.button-secondary.published-term-plan-button:hover:not(:disabled),
button.button.button-secondary.published-term-plan-button.is-selected:hover:not(:disabled) {
  color: var(--primary-900) !important;
  background: var(--glass-bg-green) !important;
  border: 0 !important;
  transform: translateY(var(--glass-hover-lift)) !important;
  box-shadow: var(--glass-hover-shadow-green) !important;
}

/* v15.09: Auswahlzustand in "Alle Seminare" an die gefuehrte Planung angleichen.
   Im Normalzustand bleiben die Auswahlaktionen ruhig und neutral. Erst eine
   tatsaechlich ausgewaehlte Karte bzw. Tabellenzeile wird sichtbar gruen. */
.catalog-card {
  border-color: transparent !important;
  background:
    radial-gradient(circle at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .25), transparent 54%),
    linear-gradient(var(--glass-angle), rgba(250,253,252,.70), rgba(211,224,220,.48)) !important;
  box-shadow: 0 8px 18px rgba(var(--ink-rgb), .045) !important;
}
.catalog-card:hover:not(.selected) {
  border-color: transparent !important;
  background: var(--glass-bg-neutral-hover) !important;
  box-shadow: var(--glass-hover-shadow-neutral) !important;
}
.catalog-card.selected {
  border-color: transparent !important;
  background: var(--glass-bg-green) !important;
  box-shadow: var(--glass-shadow-green) !important;
}
.catalog-card.selected:hover {
  background: var(--glass-bg-green) !important;
  box-shadow: var(--glass-hover-shadow-green) !important;
}

/* Kartenansicht: Auswahlknopf neutral, Plus als dezenter gruener Hinweis. */
#catalogGrid .catalog-card:not(.selected) .catalog-select-button,
.catalog-card:not(.selected) .catalog-select-button {
  color: var(--neutral-900) !important;
  background: var(--glass-bg-neutral) !important;
  border: 0 !important;
  box-shadow: var(--glass-shadow-neutral) !important;
}
#catalogGrid .catalog-card:not(.selected) .catalog-select-button .catalog-select-icon,
.catalog-card:not(.selected) .catalog-select-button .catalog-select-icon {
  color: var(--primary-900) !important;
  background: var(--glass-bg-green) !important;
  box-shadow: 0 6px 14px rgba(20,102,71,.10) !important;
}
#catalogGrid .catalog-card:not(.selected) .catalog-select-button:hover:not(:disabled),
.catalog-card:not(.selected) .catalog-select-button:hover:not(:disabled) {
  color: var(--primary-900) !important;
  background: var(--glass-bg-neutral-hover) !important;
  box-shadow: var(--glass-hover-shadow-neutral) !important;
}

/* Ausgewaehlte Karte wie in der gefuehrten Planung: gruene Flaeche,
   darin ein ruhiger heller Auswahlknopf statt einer zweiten starken Gruenflaeche. */
#catalogGrid .catalog-card.selected .catalog-select-button,
.catalog-card.selected .catalog-select-button {
  color: var(--primary-900) !important;
  background:
    radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .34) 0%, rgba(var(--surface-rgb), .14) 38%, transparent 72%),
    linear-gradient(180deg, rgba(250,255,252,.88) 0%, rgba(218,239,229,.72) 100%) !important;
  border: 0 !important;
  box-shadow: 0 10px 22px rgba(20,102,71,.10) !important;
}
#catalogGrid .catalog-card.selected .catalog-select-button .catalog-select-icon,
.catalog-card.selected .catalog-select-button .catalog-select-icon {
  color: var(--primary-900) !important;
  background: var(--glass-bg-green) !important;
  box-shadow: 0 7px 16px rgba(20,102,71,.13) !important;
}
#catalogGrid .catalog-card.selected .catalog-select-button:hover:not(:disabled),
.catalog-card.selected .catalog-select-button:hover:not(:disabled) {
  background:
    radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .36) 0%, rgba(var(--surface-rgb), .15) 38%, transparent 72%),
    linear-gradient(180deg, rgba(250,255,252,.93) 0%, rgba(205,235,220,.78) 100%) !important;
  box-shadow: 0 14px 28px rgba(20,102,71,.14) !important;
}

/* Tabellenansicht: Plus im Normalzustand neutral, Auswahl als zusammenhaengende
   dezente gruene Zeile. */
.catalog-matrix tr:not(.selected) .catalog-matrix-select-button,
.catalog-table tr:not(.selected) .catalog-matrix-select-button {
  color: var(--primary-800) !important;
  background: var(--glass-bg-neutral) !important;
  border: 0 !important;
  box-shadow: var(--glass-shadow-neutral) !important;
}
.catalog-matrix tr:not(.selected) .catalog-matrix-select-button:hover:not(:disabled),
.catalog-table tr:not(.selected) .catalog-matrix-select-button:hover:not(:disabled) {
  color: var(--primary-900) !important;
  background: var(--glass-bg-neutral-hover) !important;
  box-shadow: var(--glass-hover-shadow-neutral) !important;
}
.catalog-matrix tr.selected td,
.catalog-table tr.selected td {
  background: rgba(174,226,199,.22) !important;
}
.catalog-matrix tr.selected .catalog-matrix-select-button,
.catalog-table tr.selected .catalog-matrix-select-button {
  color: var(--primary-900) !important;
  background: var(--glass-bg-green) !important;
  border: 0 !important;
  box-shadow: var(--glass-shadow-green) !important;
}
.catalog-matrix tr.selected .catalog-matrix-select-button:hover:not(:disabled),
.catalog-table tr.selected .catalog-matrix-select-button:hover:not(:disabled) {
  background: var(--glass-bg-green) !important;
  box-shadow: var(--glass-hover-shadow-green) !important;
}


/* v15.10: Termin-Hinweis ruhiger gestalten. Nur noch ein violetter Akzent
   statt gruener Schrift, violetter Flaeche und blauem Pfeil gleichzeitig. */
.academy-terms-trigger {
  color: var(--neutral-900) !important;
  background:
    radial-gradient(120% 180% at 10% 0%, rgba(137,137,226,.16) 0%, rgba(137,137,226,.06) 36%, transparent 68%),
    linear-gradient(180deg, rgba(252,253,253,.97) 0%, rgba(226,234,231,.88) 100%) !important;
  border: 1px solid rgba(137,137,226,.30) !important;
  box-shadow: 0 13px 30px rgba(var(--ink-rgb), .09), 0 3px 9px rgba(var(--ink-rgb), .04), inset 0 0 0 1px rgba(var(--surface-rgb), .36) !important;
}
.academy-terms-trigger small {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  color: var(--accent-violet-700) !important;
}
.academy-terms-trigger small::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--accent-violet-500);
  box-shadow: 0 0 0 4px rgba(137,137,226,.10);
}
.academy-terms-trigger strong {
  color: var(--neutral-900) !important;
}
.academy-terms-trigger .academy-terms-trigger-arrow {
  color: var(--accent-violet-700) !important;
  background:
    radial-gradient(125% 180% at 24% 18%, rgba(var(--surface-rgb), .42) 0%, rgba(var(--surface-rgb), .16) 38%, transparent 72%),
    linear-gradient(180deg, rgba(239,236,255,.90) 0%, rgba(201,194,241,.78) 100%) !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(89,79,149,.10) !important;
}
.academy-terms-trigger:hover,
.academy-terms-trigger:focus-visible {
  color: var(--neutral-900) !important;
  background:
    radial-gradient(120% 180% at 10% 0%, rgba(137,137,226,.21) 0%, rgba(137,137,226,.08) 38%, transparent 70%),
    linear-gradient(180deg, rgba(253,254,254,.99) 0%, rgba(218,230,225,.92) 100%) !important;
  border: 1px solid rgba(137,137,226,.42) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 17px 34px rgba(var(--ink-rgb), .12), 0 5px 12px rgba(var(--ink-rgb), .055), inset 0 0 0 1px rgba(var(--surface-rgb), .42) !important;
}
.academy-terms-trigger:hover .academy-terms-trigger-arrow,
.academy-terms-trigger:focus-visible .academy-terms-trigger-arrow {
  color: var(--accent-violet-700) !important;
  background:
    radial-gradient(125% 180% at 24% 18%, rgba(var(--surface-rgb), .45) 0%, rgba(var(--surface-rgb), .18) 38%, transparent 72%),
    linear-gradient(180deg, rgba(235,231,255,.94) 0%, rgba(190,181,238,.84) 100%) !important;
  border: 0 !important;
  transform: translateX(2px) !important;
  box-shadow: 0 10px 22px rgba(89,79,149,.14) !important;
}


/* v15.11: Der Termin-Hinweis bleibt ruhig, wird aber als Button klarer eingefasst. */


/* =====================================================================
   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"]) .mobile-nav-panel {
    background: rgba(19,30,25,.97) !important;
  }
  :root:not([data-theme="light"]) .mini-cart-button.has-items {
    background: rgba(16,39,28,.72) !important;
  }
  :root:not([data-theme="light"]) .mobile-nav-panel {
    background: rgba(18,33,28,.78) !important;
  }
  :root:not([data-theme="light"]) .hero-product {
    background: linear-gradient(145deg, rgba(var(--surface-rgb), .74) 0%, rgba(16,39,28,.68) 58%, rgba(16,33,39,.56) 130%) !important;
  }
  :root:not([data-theme="light"]) .hero-product-status {
    background: rgba(16,39,28,.58) !important;
  }
  :root:not([data-theme="light"]) .route-switch button:not(.active):hover {
    background: rgba(16,39,28,.72) !important;
  }
  :root:not([data-theme="light"]) .request-overview {
    background: rgba(16,39,28,.62) !important;
  }
  :root:not([data-theme="light"]) dialog {
    background: rgba(20,28,28,.86) !important;
  }
  :root:not([data-theme="light"]) .mobile-nav-panel a:hover,
  :root:not([data-theme="light"]) .mobile-nav-panel a:focus-visible {
    background: rgba(16,39,28,.78) !important;
  }
  :root:not([data-theme="light"]) .request-result-icon-error {
    background: #271510 !important;
  }
  :root:not([data-theme="light"]) #requestFailureDialog .badge {
    background: #271510 !important;
  }
  :root:not([data-theme="light"]) .request-overview {
    background: radial-gradient(circle at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .25), transparent 54%),
    linear-gradient(var(--glass-angle), rgba(16,39,28,.80), rgba(18,34,29,.56)) !important;
  }
  :root:not([data-theme="light"]) .package-details summary,
  :root:not([data-theme="light"]) .past-year-seminars > summary,
  :root:not([data-theme="light"]) .planning-flexibility-details > summary,
  :root:not([data-theme="light"]) .published-terms-toggle,
  :root:not([data-theme="light"]) .academy-terms-trigger,
  :root:not([data-theme="light"]) .year-exception-disclosure > summary,
  :root:not([data-theme="light"]) .journey-disclosure > summary {
    background: radial-gradient(circle at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .24), transparent 54%),
    linear-gradient(var(--glass-angle), rgba(17,37,30,.62), rgba(20,27,25,.44)) !important;
  }
  :root:not([data-theme="light"]) .seminar-choice,
  :root:not([data-theme="light"]) .package-seminar {
    background: radial-gradient(circle at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .25), transparent 54%),
    linear-gradient(var(--glass-angle), rgba(17,37,30,.70), rgba(20,27,25,.48)) !important;
  }
  :root:not([data-theme="light"]) .career-row:hover {
    background: linear-gradient(135deg, rgba(16,39,26,.58), rgba(17,36,27,.38)) !important;
  }
  :root:not([data-theme="light"]) .add-seminar-term-field select {
    background: linear-gradient(180deg, rgba(var(--surface-rgb), .74), rgba(18,35,27,.62)) !important;
  }
  :root:not([data-theme="light"]) .add-seminar-attendance select {
    background: linear-gradient(180deg, rgba(16,39,28,.82), rgba(16,39,28,.64)) !important;
  }
  :root:not([data-theme="light"]) .planning-flexibility-details,
  :root:not([data-theme="light"]) .year-exception-disclosure,
  :root:not([data-theme="light"]) .journey-disclosure,
  :root:not([data-theme="light"]) .past-year-seminars,
  :root:not([data-theme="light"]) .package-details,
  :root:not([data-theme="light"]) .academy-faq-shell {
    background: radial-gradient(circle at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .26), transparent 56%),
    linear-gradient(180deg, rgba(20,28,24,.84) 0%, rgba(21,26,24,.64) 100%) !important;
  }
  :root:not([data-theme="light"]) .package-seminar input[type="checkbox"]:checked,
  :root:not([data-theme="light"]) .seminar-choice input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-8' fill='none' stroke='%231c573f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .27) 0%, rgba(var(--surface-rgb), .10) 36%, transparent 70%),
    linear-gradient(180deg, rgba(16,39,28,.97) 0%, rgba(17,38,27,.84) 100%) !important;
  }
  :root:not([data-theme="light"]) .catalog-card {
    background: radial-gradient(circle at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .25), transparent 54%),
    linear-gradient(var(--glass-angle), rgba(17,37,30,.70), rgba(20,27,25,.48)) !important;
  }
  :root:not([data-theme="light"]) #catalogGrid .catalog-card.selected .catalog-select-button,
  :root:not([data-theme="light"]) .catalog-card.selected .catalog-select-button {
    background: radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .34) 0%, rgba(var(--surface-rgb), .14) 38%, transparent 72%),
    linear-gradient(180deg, rgba(16,39,25,.88) 0%, rgba(18,35,27,.72) 100%) !important;
  }
  :root:not([data-theme="light"]) #catalogGrid .catalog-card.selected .catalog-select-button:hover:not(:disabled),
  :root:not([data-theme="light"]) .catalog-card.selected .catalog-select-button:hover:not(:disabled) {
    background: radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .36) 0%, rgba(var(--surface-rgb), .15) 38%, transparent 72%),
    linear-gradient(180deg, rgba(16,39,25,.93) 0%, rgba(17,37,27,.78) 100%) !important;
  }
  :root:not([data-theme="light"]) .catalog-matrix tr.selected td,
  :root:not([data-theme="light"]) .catalog-table tr.selected td {
    background: rgba(16,38,27,.22) !important;
  }
  :root:not([data-theme="light"]) .academy-terms-trigger {
    background: radial-gradient(120% 180% at 10% 0%, rgba(137,137,226,.16) 0%, rgba(137,137,226,.06) 36%, transparent 68%),
    linear-gradient(180deg, rgba(20,28,28,.97) 0%, rgba(20,27,24,.88) 100%) !important;
  }
  :root:not([data-theme="light"]) .academy-terms-trigger .academy-terms-trigger-arrow {
    background: radial-gradient(125% 180% at 24% 18%, rgba(var(--surface-rgb), .42) 0%, rgba(var(--surface-rgb), .16) 38%, transparent 72%),
    linear-gradient(180deg, rgba(20,16,39,.90) 0%, rgba(19,16,39,.78) 100%) !important;
  }
  :root:not([data-theme="light"]) .academy-terms-trigger:hover,
  :root:not([data-theme="light"]) .academy-terms-trigger:focus-visible {
    background: radial-gradient(120% 180% at 10% 0%, rgba(137,137,226,.21) 0%, rgba(137,137,226,.08) 38%, transparent 70%),
    linear-gradient(180deg, rgba(18,33,33,.99) 0%, rgba(20,28,25,.92) 100%) !important;
  }
  :root:not([data-theme="light"]) .academy-terms-trigger:hover .academy-terms-trigger-arrow,
  :root:not([data-theme="light"]) .academy-terms-trigger:focus-visible .academy-terms-trigger-arrow {
    background: radial-gradient(125% 180% at 24% 18%, rgba(var(--surface-rgb), .45) 0%, rgba(var(--surface-rgb), .18) 38%, transparent 72%),
    linear-gradient(180deg, rgba(20,16,39,.94) 0%, rgba(20,16,39,.84) 100%) !important;
  }
}

:root[data-theme="dark"] .mobile-nav-panel {
  background: rgba(19,30,25,.97) !important;
}
:root[data-theme="dark"] .mini-cart-button.has-items {
  background: rgba(16,39,28,.72) !important;
}
:root[data-theme="dark"] .mobile-nav-panel {
  background: rgba(18,33,28,.78) !important;
}
:root[data-theme="dark"] .hero-product {
  background: linear-gradient(145deg, rgba(var(--surface-rgb), .74) 0%, rgba(16,39,28,.68) 58%, rgba(16,33,39,.56) 130%) !important;
}
:root[data-theme="dark"] .hero-product-status {
  background: rgba(16,39,28,.58) !important;
}
:root[data-theme="dark"] .route-switch button:not(.active):hover {
  background: rgba(16,39,28,.72) !important;
}
:root[data-theme="dark"] .request-overview {
  background: rgba(16,39,28,.62) !important;
}
:root[data-theme="dark"] dialog {
  background: rgba(20,28,28,.86) !important;
}
:root[data-theme="dark"] .mobile-nav-panel a:hover,
:root[data-theme="dark"] .mobile-nav-panel a:focus-visible {
  background: rgba(16,39,28,.78) !important;
}
:root[data-theme="dark"] .request-result-icon-error {
  background: #271510 !important;
}
:root[data-theme="dark"] #requestFailureDialog .badge {
  background: #271510 !important;
}
:root[data-theme="dark"] .request-overview {
  background: radial-gradient(circle at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .25), transparent 54%),
    linear-gradient(var(--glass-angle), rgba(16,39,28,.80), rgba(18,34,29,.56)) !important;
}
:root[data-theme="dark"] .package-details summary,
:root[data-theme="dark"] .past-year-seminars > summary,
:root[data-theme="dark"] .planning-flexibility-details > summary,
:root[data-theme="dark"] .published-terms-toggle,
:root[data-theme="dark"] .academy-terms-trigger,
:root[data-theme="dark"] .year-exception-disclosure > summary,
:root[data-theme="dark"] .journey-disclosure > summary {
  background: radial-gradient(circle at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .24), transparent 54%),
    linear-gradient(var(--glass-angle), rgba(17,37,30,.62), rgba(20,27,25,.44)) !important;
}
:root[data-theme="dark"] .seminar-choice,
:root[data-theme="dark"] .package-seminar {
  background: radial-gradient(circle at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .25), transparent 54%),
    linear-gradient(var(--glass-angle), rgba(17,37,30,.70), rgba(20,27,25,.48)) !important;
}
:root[data-theme="dark"] .career-row:hover {
  background: linear-gradient(135deg, rgba(16,39,26,.58), rgba(17,36,27,.38)) !important;
}
:root[data-theme="dark"] .add-seminar-term-field select {
  background: linear-gradient(180deg, rgba(var(--surface-rgb), .74), rgba(18,35,27,.62)) !important;
}
:root[data-theme="dark"] .add-seminar-attendance select {
  background: linear-gradient(180deg, rgba(16,39,28,.82), rgba(16,39,28,.64)) !important;
}
:root[data-theme="dark"] .planning-flexibility-details,
:root[data-theme="dark"] .year-exception-disclosure,
:root[data-theme="dark"] .journey-disclosure,
:root[data-theme="dark"] .past-year-seminars,
:root[data-theme="dark"] .package-details,
:root[data-theme="dark"] .academy-faq-shell {
  background: radial-gradient(circle at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .26), transparent 56%),
    linear-gradient(180deg, rgba(20,28,24,.84) 0%, rgba(21,26,24,.64) 100%) !important;
}
:root[data-theme="dark"] .package-seminar input[type="checkbox"]:checked,
:root[data-theme="dark"] .seminar-choice input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-8' fill='none' stroke='%231c573f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .27) 0%, rgba(var(--surface-rgb), .10) 36%, transparent 70%),
    linear-gradient(180deg, rgba(16,39,28,.97) 0%, rgba(17,38,27,.84) 100%) !important;
}
:root[data-theme="dark"] .catalog-card {
  background: radial-gradient(circle at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .25), transparent 54%),
    linear-gradient(var(--glass-angle), rgba(17,37,30,.70), rgba(20,27,25,.48)) !important;
}
:root[data-theme="dark"] #catalogGrid .catalog-card.selected .catalog-select-button,
:root[data-theme="dark"] .catalog-card.selected .catalog-select-button {
  background: radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .34) 0%, rgba(var(--surface-rgb), .14) 38%, transparent 72%),
    linear-gradient(180deg, rgba(16,39,25,.88) 0%, rgba(18,35,27,.72) 100%) !important;
}
:root[data-theme="dark"] #catalogGrid .catalog-card.selected .catalog-select-button:hover:not(:disabled),
:root[data-theme="dark"] .catalog-card.selected .catalog-select-button:hover:not(:disabled) {
  background: radial-gradient(125% 180% at var(--glass-light-x) var(--glass-light-y), rgba(var(--surface-rgb), .36) 0%, rgba(var(--surface-rgb), .15) 38%, transparent 72%),
    linear-gradient(180deg, rgba(16,39,25,.93) 0%, rgba(17,37,27,.78) 100%) !important;
}
:root[data-theme="dark"] .catalog-matrix tr.selected td,
:root[data-theme="dark"] .catalog-table tr.selected td {
  background: rgba(16,38,27,.22) !important;
}
:root[data-theme="dark"] .academy-terms-trigger {
  background: radial-gradient(120% 180% at 10% 0%, rgba(137,137,226,.16) 0%, rgba(137,137,226,.06) 36%, transparent 68%),
    linear-gradient(180deg, rgba(20,28,28,.97) 0%, rgba(20,27,24,.88) 100%) !important;
}
:root[data-theme="dark"] .academy-terms-trigger .academy-terms-trigger-arrow {
  background: radial-gradient(125% 180% at 24% 18%, rgba(var(--surface-rgb), .42) 0%, rgba(var(--surface-rgb), .16) 38%, transparent 72%),
    linear-gradient(180deg, rgba(20,16,39,.90) 0%, rgba(19,16,39,.78) 100%) !important;
}
:root[data-theme="dark"] .academy-terms-trigger:hover,
:root[data-theme="dark"] .academy-terms-trigger:focus-visible {
  background: radial-gradient(120% 180% at 10% 0%, rgba(137,137,226,.21) 0%, rgba(137,137,226,.08) 38%, transparent 70%),
    linear-gradient(180deg, rgba(18,33,33,.99) 0%, rgba(20,28,25,.92) 100%) !important;
}
:root[data-theme="dark"] .academy-terms-trigger:hover .academy-terms-trigger-arrow,
:root[data-theme="dark"] .academy-terms-trigger:focus-visible .academy-terms-trigger-arrow {
  background: radial-gradient(125% 180% at 24% 18%, rgba(var(--surface-rgb), .45) 0%, rgba(var(--surface-rgb), .18) 38%, transparent 72%),
    linear-gradient(180deg, rgba(20,16,39,.94) 0%, rgba(20,16,39,.84) 100%) !important;
}


/* Dunkelmodus: Schriftfarben auf Warn- und Fehlerflaechen.
   Sie standen fest kodiert und dunkel im CSS - auf den jetzt dunklen
   Flaechen waeren sie unlesbar. Farbton bleibt, Helligkeit auf 76 %. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .request-failure-detail {
    color: #e3a8a0 !important;
  }
  :root:not([data-theme="light"]) .button-danger,
  :root:not([data-theme="light"]) .package-remove-all,
  :root:not([data-theme="light"]) .dialog-close,
  :root:not([data-theme="light"]) #seminarDialog .dialog-close,
  :root:not([data-theme="light"]) #addDialog .dialog-close,
  :root:not([data-theme="light"]) #basketDialog .dialog-close,
  :root:not([data-theme="light"]) #selectionEditDialog .dialog-close,
  :root:not([data-theme="light"]) #priceApprovalDialog .dialog-close,
  :root:not([data-theme="light"]) #modeSwitchDialog .dialog-close,
  :root:not([data-theme="light"]) #planExportDialog .dialog-close,
  :root:not([data-theme="light"]) #planImportDialog .dialog-close,
  :root:not([data-theme="light"]) #requestSuccessDialog .dialog-close,
  :root:not([data-theme="light"]) #requestFailureDialog .dialog-close {
    color: #dfaba5 !important;
  }
}

:root[data-theme="dark"] .request-failure-detail {
  color: #e3a8a0 !important;
}
:root[data-theme="dark"] .button-danger,
:root[data-theme="dark"] .package-remove-all,
:root[data-theme="dark"] .dialog-close,
:root[data-theme="dark"] #seminarDialog .dialog-close,
:root[data-theme="dark"] #addDialog .dialog-close,
:root[data-theme="dark"] #basketDialog .dialog-close,
:root[data-theme="dark"] #selectionEditDialog .dialog-close,
:root[data-theme="dark"] #priceApprovalDialog .dialog-close,
:root[data-theme="dark"] #modeSwitchDialog .dialog-close,
:root[data-theme="dark"] #planExportDialog .dialog-close,
:root[data-theme="dark"] #planImportDialog .dialog-close,
:root[data-theme="dark"] #requestSuccessDialog .dialog-close,
:root[data-theme="dark"] #requestFailureDialog .dialog-close {
  color: #dfaba5 !important;
}