/*
 * Transparenzkompass — Styling
 *
 * Farben, Typografie und Layout nach PD Corporate Design (Basiselemente 1.2).
 * Aufbau: Farbtokens und Themes, globale Grundlagen, danach die Bausteine in
 * der Reihenfolge, in der sie in der Anwendung auftauchen.
 */

/* ---------- Farbtokens ---------- */

/* Petrol trägt als Leitfarbe den Kompass, Gelb setzt die Akzente.
   Die Ampelfarben Grün, Dunkelgelb und Rot bewerten die Indikatoren.
   Achtung: --good, --warn und --risk werden in kompass.views.js zur Laufzeit
   aus dem Ampelnamen zusammengesetzt und dürfen nicht umbenannt werden. */
:root{
  --paper:#FFFFFF; --paper-2:#F2F2F2; --paper-3:#E7E7E7;
  --ink:#1A1A1A; --ink-soft:#4A4A4A; --ink-faint:#707070;
  --line:rgba(26,26,26,0.13); --line-strong:rgba(26,26,26,0.24);
  --compass:#038285; --compass-ink:#038285; --compass-soft:rgba(3,130,133,0.12);
  --gold:#FFC100;
  --good:#647D2D; --warn:#FFC100; --risk:#E60032;
  --shadow: 0 1px 2px rgba(26,26,26,0.06), 0 8px 24px -12px rgba(26,26,26,0.20);
  --radius:14px; --radius-sm:9px;
  --font-display:'Zilla Slab', Georgia, 'Iowan Old Style', serif;
  --font-ui:'Public Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
}

/* Dunkles Design, einmal als Systemeinstellung und einmal als manuelle
   Auswahl über den Umschalter im Kopfbereich. Beide Blöcke sind inhaltlich
   gleich und müssen gemeinsam gepflegt werden. */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0E1A1A; --paper-2:#14201F; --paper-3:#1B2A28;
    --ink:#ECECEC; --ink-soft:#BFC6C4; --ink-faint:#8C9694;
    --line:rgba(236,236,236,0.14); --line-strong:rgba(236,236,236,0.26);
    --compass:#3DBDB4; --compass-ink:#6FD9CF; --compass-soft:rgba(61,189,180,0.16);
    --gold:#FFD100;
    --good:#9CB84E; --warn:#FFD100; --risk:#F0526E;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1A1A; --paper-2:#14201F; --paper-3:#1B2A28;
  --ink:#ECECEC; --ink-soft:#BFC6C4; --ink-faint:#8C9694;
  --line:rgba(236,236,236,0.14); --line-strong:rgba(236,236,236,0.26);
  --compass:#3DBDB4; --compass-ink:#6FD9CF; --compass-soft:rgba(61,189,180,0.16);
  --gold:#FFD100;
  --good:#9CB84E; --warn:#FFD100; --risk:#F0526E;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
  color-scheme: dark;
}

/* Nötig, um bei dunkler Systemeinstellung zurück auf Hell schalten zu können. */
:root[data-theme="light"]{
  --paper:#FFFFFF; --paper-2:#F2F2F2; --paper-3:#E7E7E7;
  --ink:#1A1A1A; --ink-soft:#4A4A4A; --ink-faint:#707070;
  --line:rgba(26,26,26,0.13); --line-strong:rgba(26,26,26,0.24);
  --compass:#038285; --compass-ink:#038285; --compass-soft:rgba(3,130,133,0.12);
  --gold:#FFC100;
  --good:#647D2D; --warn:#FFC100; --risk:#E60032;
  --shadow: 0 1px 2px rgba(26,26,26,0.06), 0 8px 24px -12px rgba(26,26,26,0.20);
  color-scheme: light;
}

/* ---------- Grundlagen ---------- */

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background:var(--paper); color:var(--ink);
    font-family:var(--font-ui); font-size:16px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } }

  h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0; text-wrap:balance; color:var(--ink); }
  a{ color:var(--compass-ink); }
  button{ font-family:var(--font-ui); }
  ::selection{ background:var(--compass-soft); }

  .app-shell{ min-height:100vh; display:flex; flex-direction:column; }

  /* Bis Anmeldung und erste Ansicht fertig sind, nur ein Platzhalter, damit
     weder die Startseite vor dem Keycloak-Redirect noch die Übersicht vor der
     Ansicht aus der URL aufblitzt. */
  .app-loading body{ overflow:hidden; }
  .app-loading .app-shell{ visibility:hidden; }
  .app-loading-note{ display:none; }
  .app-loading .app-loading-note{
    position:fixed; inset:0; margin:0;
    display:flex; align-items:center; justify-content:center; gap:12px;
    font-family:var(--font-ui); color:var(--ink-soft);
  }
  .app-loading-spinner{
    width:18px; height:18px; border-radius:50%;
    border:2px solid var(--compass-soft); border-top-color:var(--compass);
    animation:app-loading-spin 0.9s linear infinite;
  }
  @keyframes app-loading-spin{ to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){ .app-loading-spinner{ animation:none; } }
  .noscript-note{ margin:0; padding:12px 24px; background:var(--gold); color:#000; font-family:var(--font-ui); text-align:center; }

  /* ---------- Kopfbereich ---------- */
  .pd-header{
    position:sticky; top:0; z-index:30;
    background:#fff; color:var(--compass);
    box-shadow:0 2px 4px 0 rgba(0,0,0,0.1);
  }
  .pd-header-inner{
    width:100%; max-width:1440px; margin:0 auto; padding:0 24px;
    min-height:80px; display:flex; align-items:center; gap:24px;
  }
  .pd-header-logo{ display:flex; align-items:center; flex:none; }
  .pd-header-logo img{ width:100px; height:auto; display:block; }
  .pd-header-nav{ display:flex; align-items:center; gap:26px; margin-left:auto; }
  .pd-header-nav a{
    font-family:var(--font-ui); font-weight:500; font-size:1rem; color:var(--ink);
    text-decoration:none; padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap;
  }
  .pd-header-nav a:hover{ color:var(--compass); border-bottom-color:var(--gold); }
  .pd-header-cta{
    background:var(--gold); color:#000 !important; border-radius:2rem;
    padding:8px 18px !important; border-bottom:none !important; font-weight:600;
  }
  .pd-header-cta:hover{ filter:brightness(0.95); }
  .theme-toggle{
    flex:none; border:1px solid var(--compass); background:transparent; color:var(--compass);
    border-radius:999px; padding:6px 12px; font-size:0.8rem; cursor:pointer; font-family:var(--font-ui);
  }
  .theme-toggle:hover{ background:var(--compass); color:#fff; }
  .auth-box{ flex:none; display:flex; align-items:center; gap:10px; font-family:var(--font-ui); font-size:0.85rem; color:var(--ink); }
  .auth-box[hidden]{ display:none; }
  .auth-name{ max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .auth-logout{
    border:none; background:transparent; color:var(--compass); padding:6px 0;
    font-size:0.85rem; text-decoration:underline; cursor:pointer;
  }
  @media (max-width:860px){
    .pd-header-nav{ display:none; }
    .auth-box{ margin-left:auto; }
  }

  /* ---------- Breadcrumb ---------- */
  .pd-breadcrumb{ background:var(--paper-2); border-bottom:1px solid var(--line); }
  .pd-breadcrumb-inner{
    width:100%; max-width:1440px; margin:0 auto; padding:9px 24px;
    font-family:var(--font-ui); font-size:0.82rem; color:var(--ink-faint);
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  }
  .pd-breadcrumb-inner a{ color:var(--ink-soft); text-decoration:none; }
  .pd-breadcrumb-inner a:hover{ color:var(--compass); text-decoration:underline; }
  .pd-breadcrumb-inner span[aria-hidden]{ color:var(--ink-faint); }
  .pd-breadcrumb-inner [aria-current]{ color:var(--compass); font-weight:600; }

  /* ---------- Schrittleiste ---------- */
  .rail-wrap{ padding:10px clamp(16px,4vw,40px) 0; }
  .rail{
    display:flex; align-items:center; gap:0; overflow-x:auto; padding-bottom:14px;
    scrollbar-width:thin;
  }
  .rail-step{
    display:flex; align-items:center; gap:8px; flex:none; cursor:pointer; background:none; border:none;
    padding:6px 4px; color:var(--ink-faint); font-family:var(--font-ui); font-size:0.78rem; font-weight:600;
  }
  .rail-step .dot{
    min-width:22px; height:22px; padding:0 4px; border-radius:11px; border:2px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
    font-size:0.66rem; font-weight:700; color:var(--ink-faint); background:var(--paper); flex:none; box-sizing:border-box;
  }
  .rail-step.done .dot{ border-color:var(--compass); background:var(--compass); color:#fff; }
  .rail-step.active .dot{ border-color:var(--compass); color:var(--compass-ink); box-shadow:0 0 0 3px var(--compass-soft); }
  .rail-step.active{ color:var(--ink); }
  .rail-step.done{ color:var(--ink-soft); }
  .rail-step:disabled{ cursor:default; }
  .rail-line{ width:clamp(14px,3vw,36px); height:2px; background:var(--line-strong); flex:none; }
  .rail-line.done{ background:var(--compass); }

  main{ flex:1; }
  .view{ display:none; }
  .view.active{ display:block; }

  /* ---------- Einstiegsansicht ---------- */
  .intro{ max-width:900px; margin:0 auto; padding:clamp(32px,7vw,88px) clamp(16px,4vw,40px) 80px; }
  .intro-kicker{ font-size:0.78rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--compass-ink); margin-bottom:14px; }
  .intro-kicker::before{ content:"/"; color:var(--gold); font-weight:800; margin-right:7px; }
  .intro-grid{ display:grid; grid-template-columns:1.3fr 0.9fr; gap:clamp(24px,5vw,56px); align-items:center; }
  .intro-grid > *{ min-width:0; }
  @media (max-width:760px){ .intro-grid{ grid-template-columns:1fr; } }
  .intro h1{ font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.06; letter-spacing:-0.01em; }
  .intro h1 em{ font-style:italic; font-weight:500; color:var(--compass-ink); }
  .intro p.lede{ font-size:1.08rem; color:var(--ink-soft); margin-top:18px; max-width:52ch; }
  .compass-hero{ position:relative; display:flex; justify-content:center; align-items:center; min-width:0; }
  .compass-hero #heroCompass{ position:relative; z-index:1; width:100%; max-width:280px; height:auto; display:block; }

  .cta-row{ display:flex; align-items:center; gap:16px; margin-top:30px; flex-wrap:wrap; }
  .btn{
    font-family:var(--font-ui); font-weight:600; font-size:0.95rem; border-radius:999px; border:1px solid transparent;
    padding:12px 22px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:active{ transform:translateY(1px); }
  .btn-primary{ background:var(--compass); color:#fff; box-shadow:var(--shadow); }
  .btn-primary:hover{ box-shadow:0 10px 26px -12px var(--compass); }
  .btn-ghost{ background:transparent; color:var(--ink-soft); border-color:var(--line-strong); }
  .btn-ghost:hover{ color:var(--ink); border-color:var(--compass); }
  .btn:disabled{ opacity:0.4; cursor:not-allowed; box-shadow:none; }
  .btn-lg{ font-size:1.1rem; padding:16px 32px; }
  .btn-sm{ font-size:0.85rem; padding:6px 14px; }
  .btn-danger{ background:var(--risk); color:#fff; }
  .session-hint{ font-size:0.88rem; color:var(--ink-soft); margin:14px 0 0; padding:8px 12px; border-left:3px solid var(--compass); background:var(--paper-2); max-width:52ch; }
  .session-hint[hidden]{ display:none; }
  .session-empty{ font-size:0.9rem; color:var(--ink-soft); margin:0 0 12px; }
  .session-items{ list-style:none; margin:0; padding:0; }
  .session-item{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:12px 0; border-top:1px solid var(--line); }
  .session-item:first-child{ border-top:none; }
  .session-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .session-title{ font-variant-numeric:tabular-nums; }
  .session-status{ font-size:0.75rem; font-weight:600; padding:2px 8px; border-radius:10px; background:var(--paper-3); color:var(--ink-soft); }
  .session-status.finished{ background:var(--compass-soft); color:var(--compass-ink); }
  .session-meta{ font-size:0.82rem; color:var(--ink-faint); margin-top:3px; }
  .session-actions{ display:flex; gap:8px; }
  .session-note{ font-size:0.85rem; color:var(--ink-soft); margin:12px 0 0; padding:8px 12px; border-left:3px solid var(--line-strong); background:var(--paper-2); }
  .session-note[hidden]{ display:none; }
  .session-note.error{ border-left-color:var(--risk); color:var(--ink); }

  .kompass-dialog{
    border:none; border-radius:var(--radius); padding:0; width:min(640px, calc(100vw - 32px));
    background:var(--paper); color:var(--ink); box-shadow:0 24px 60px -20px rgba(0,0,0,0.45);
  }
  .kompass-dialog::backdrop{ background:rgba(0,0,0,0.45); }
  .dialog-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:22px 24px 0; }
  .dialog-head h2{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; margin:0; }
  .dialog-sub{ font-size:0.9rem; color:var(--ink-soft); margin:4px 0 0; }
  .dialog-close{ background:none; border:none; font-size:1.5rem; line-height:1; cursor:pointer; color:var(--ink-faint); padding:2px 6px; }
  .dialog-close:hover{ color:var(--ink); }
  .dialog-body{ padding:18px 24px; max-height:60vh; overflow:auto; }
  .dialog-body p{ margin:0 0 10px; line-height:1.55; }
  .dialog-actions{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; padding:0 24px 22px; }
  .dialog-new{
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding:16px 18px; margin-bottom:20px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--paper-2);
  }
  .dialog-new p{ margin:2px 0 0; font-size:0.88rem; color:var(--ink-soft); }
  .dialog-section-title{ font-size:0.78rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); }
  .dialog-warning{ padding:10px 12px; border-left:3px solid var(--warn); background:var(--paper-2); }
  .dialog-error{ color:var(--risk); font-weight:600; }
  .dialog-error[hidden]{ display:none; }
  .privacy-note{ font-size:0.82rem; color:var(--ink-faint); margin-top:14px; }
  .privacy-note svg{ vertical-align:-3px; margin-right:5px; }

  .steps-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:64px; }
  @media (max-width:640px){ .steps-row{ grid-template-columns:1fr; } }
  .step-card{ border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; background:var(--paper-2); }
  .step-card .num{ font-family:var(--font-display); font-style:italic; font-size:1.6rem; color:var(--gold); }
  .step-card h3{ font-size:1.02rem; margin-top:6px; }
  .step-card p{ font-size:0.88rem; color:var(--ink-soft); margin:6px 0 0; }

  /* ---------- Kompass-Auswahl ---------- */
  .overview{ max-width:1180px; margin:0 auto; padding:clamp(28px,5vw,56px) clamp(16px,4vw,40px) 80px; }
  .overview-title{ font-size:clamp(1.9rem,4vw,3rem); line-height:1.08; margin:0 0 18px; max-width:20ch; }
  .overview-title em{ font-style:italic; color:var(--compass-ink); }
  .overview-lede{ font-size:1.05rem; color:var(--ink-soft); line-height:1.6; max-width:70ch; margin:0 0 40px; }

  .kontext-panel{
    background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
    padding:22px 24px; margin-bottom:32px;
  }
  .kontext-title{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; color:var(--ink); margin:0 0 6px; }
  .kontext-lede{ font-size:0.9rem; color:var(--ink-soft); line-height:1.55; margin:0 0 18px; max-width:62ch; }
  .kontext-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }

  .combo{ position:relative; }
  .combo-label{ display:block; font-size:0.78rem; font-weight:700; color:var(--ink-faint); margin-bottom:6px; }
  .combo-input-wrap{ position:relative; display:flex; align-items:center; }
  .combo-input{
    width:100%; font-family:var(--font-ui); font-size:0.92rem; color:var(--ink);
    background:var(--paper); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
    padding:10px 34px 10px 12px; box-sizing:border-box;
  }
  .combo-input:focus{ outline:none; border-color:var(--compass); }
  .combo-input:disabled{ color:var(--ink-faint); cursor:not-allowed; background:var(--paper-3); }
  .combo-clear{
    position:absolute; right:8px; width:22px; height:22px; border-radius:50%; border:none;
    background:var(--paper-3); color:var(--ink-faint); font-size:0.95rem; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .combo-clear[hidden]{ display:none; }
  .combo-clear:hover{ background:var(--line-strong); color:var(--ink); }
  .combo-list{
    position:absolute; z-index:20; top:calc(100% + 4px); left:0; right:0; max-height:230px; overflow-y:auto;
    margin:0; padding:6px; list-style:none; background:var(--paper); border:1px solid var(--line-strong);
    border-radius:var(--radius-sm); box-shadow:var(--shadow);
  }
  .combo-option{
    padding:8px 10px; font-size:0.88rem; color:var(--ink); border-radius:6px; cursor:pointer;
  }
  .combo-option:hover, .combo-option.active{ background:var(--compass-soft); color:var(--compass-ink); }
  .combo-option-none{ font-style:italic; color:var(--ink-soft); border-bottom:1px solid var(--line); }
  .combo-empty{ padding:8px 10px; font-size:0.85rem; color:var(--ink-faint); font-style:italic; }

  .kompass-grid[hidden], .kompass-hint[hidden]{ display:none; }
  .kompass-hint{ font-size:0.95rem; color:var(--ink-soft); margin:0; padding:18px 22px; border:1px dashed var(--line-strong); border-radius:var(--radius); }
  .kompass-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
  .kompass-card{
    display:flex; flex-direction:column; align-items:flex-start; gap:10px; text-align:left;
    border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-2);
    padding:22px 22px 20px; min-height:210px; font-family:var(--font-ui); cursor:default;
    position:relative; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .kompass-card.available{ cursor:pointer; background:var(--paper); border-color:var(--line-strong); }
  .kompass-card.available:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--compass); }
  .kompass-card:disabled{ opacity:0.62; }
  .kompass-icon{ width:48px; height:48px; color:var(--compass); }
  .kompass-card:disabled .kompass-icon{ color:var(--ink-faint); }
  .kompass-icon svg{ width:100%; height:100%; }
  .kompass-name{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; line-height:1.25; color:var(--ink); margin-top:2px; }
  .kompass-status{
    font-size:0.72rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--ink-faint); border:1px solid var(--line-strong); border-radius:999px; padding:3px 9px;
  }
  .kompass-status.available{ color:var(--compass-ink); border-color:var(--compass); background:var(--compass-soft); }
  .kompass-cta{ margin-top:auto; font-weight:700; color:var(--compass-ink); font-size:0.92rem; }

  /* ---------- Bewertungsformular ---------- */
  .form-wrap{ max-width:740px; margin:0 auto; padding:0 clamp(16px,4vw,40px) 100px; }
  .cat-head{
    position:sticky; top:80px; z-index:10;
    margin:0 calc(-1 * clamp(16px,4vw,40px)); padding:14px clamp(16px,4vw,40px) 12px;
    background:var(--paper); border-bottom:1px solid var(--line);
  }
  .cat-head .eyebrow{ font-size:0.78rem; font-weight:700; color:var(--ink-faint); letter-spacing:0.05em; text-transform:uppercase; }
  .cat-head h2{ font-size:clamp(1.5rem,3vw,2rem); margin-top:4px; }
  .overall-progress{ margin-top:14px; margin-bottom:0; }
  .op-bar{ height:8px; border-radius:999px; background:var(--paper-3); overflow:hidden; }
  .op-fill{ height:100%; width:0; border-radius:999px; background:var(--compass); transition:width .35s ease; }
  .op-meta{ display:flex; justify-content:space-between; gap:12px; margin-top:7px; font-size:0.78rem; color:var(--ink-faint); }
  .op-meta #opText{ font-weight:600; color:var(--compass-ink); }

  .indicator-card{ border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px 20px; margin-top:20px; background:var(--paper-2); }
  .indicator-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .indicator-title{ font-weight:600; font-size:1rem; line-height:1.35; flex:1 1 12rem; min-width:0; }
  .indicator-actions{ display:flex; flex:none; align-items:center; gap:8px; flex-wrap:wrap; }
  .form-prefill-note{
    margin:12px 0 0; font-size:0.88rem; color:var(--ink-soft); line-height:1.45; max-width:62ch;
  }
  .form-prefill-note[hidden]{ display:none; }
  .prefill-load{
    margin-top:12px; font-size:0.8rem; font-weight:700; padding:6px 14px;
    border-radius:999px; align-self:flex-start; white-space:normal; text-align:left; max-width:100%;
  }
  .prefill-caption{ margin:10px 0 0; font-size:0.8rem; color:var(--ink-faint); line-height:1.4; }
  .type-badge{
    flex:none; font-size:0.66rem; font-weight:700; letter-spacing:0.04em; padding:3px 7px; border-radius:6px;
    border:1px solid var(--line-strong); color:var(--ink-faint); white-space:nowrap; margin-top:2px;
  }
  .type-badge.d, .type-badge.e{ color:var(--compass-ink); border-color:var(--compass-soft); background:var(--compass-soft); }

  .choice-row{ display:flex; gap:8px; margin-top:14px; overflow-x:auto; padding-bottom:2px; }
  .choice-btn{
    flex:1 1 0; min-width:112px; max-width:200px; overflow:hidden; text-align:left; border:1px solid var(--line-strong); background:var(--paper);
    border-radius:var(--radius-sm); padding:9px 10px; cursor:pointer; font-family:var(--font-ui); color:var(--ink-soft);
  }
  .choice-btn .n{ display:block; font-size:0.68rem; color:var(--ink-faint); font-weight:700; }
  .choice-btn .t{
    display:block; height:calc(1.25em * 3); overflow:hidden; overflow-wrap:break-word; word-break:normal;
    -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto; -webkit-hyphenate-limit-before:3; hyphenate-limit-chars:6 3 3;
    font-size:0.82rem; font-weight:600; margin-top:2px; line-height:1.25;
  }
  .choice-btn:hover{ border-color:var(--compass); }
  .choice-btn.sel{ border-color:var(--compass); background:var(--compass-soft); color:var(--ink); }
  .choice-btn.sel .n{ color:var(--compass-ink); }
  .choice-detail{ font-size:0.83rem; color:var(--ink-soft); margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); min-height:1.3em; }

  .weight-label{ font-size:0.76rem; color:var(--ink-faint); font-weight:700; margin-top:16px; }
  .weight-opts{ display:flex; gap:8px; margin-top:8px; }
  .weight-btn{
    flex:1 1 0; text-align:left; border:1px solid var(--line-strong); background:var(--paper);
    border-radius:var(--radius-sm); padding:6px 10px; cursor:pointer; font-family:var(--font-ui);
    color:var(--ink-soft); font-size:0.82rem; font-weight:600;
  }
  .weight-btn:hover{ border-color:var(--compass); }
  .weight-btn.sel{ border-color:var(--compass); background:var(--compass-soft); color:var(--ink); }

  .form-nav{
    position:sticky; bottom:0; margin-top:32px; padding:14px 0 4px; background:linear-gradient(to top, var(--paper) 60%, transparent);
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .form-nav .progress-text{ font-size:0.8rem; color:var(--ink-faint); }

  /* ---------- Auswertung ---------- */
  .results-wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(16px,4vw,40px) 90px; }
  .results-head{
    position:sticky; top:80px; z-index:10;
    margin:0 calc(-1 * clamp(16px,4vw,40px)) 22px; padding:14px clamp(16px,4vw,40px) 14px;
    background:var(--paper); border-bottom:1px solid var(--line);
    display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
  }
  .results-head h2{ font-size:clamp(1.6rem,3vw,2.2rem); }
  .results-head p{ color:var(--ink-soft); margin-top:6px; font-size:0.95rem; }

  /* ---------- Gesamtwert ---------- */
  .score-hero{
    display:flex; align-items:baseline; gap:12px;
    background:var(--compass-soft); border:1px solid var(--compass); border-radius:var(--radius-sm);
    padding:14px 18px; margin-bottom:18px;
  }
  .score-hero .num{ font-family:var(--font-display); font-size:2.4rem; line-height:1; color:var(--compass-ink); font-variant-numeric:tabular-nums; font-weight:700; }
  .score-hero .lbl{ font-size:0.85rem; color:var(--ink-soft); font-weight:600; }

  .results-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:stretch; }
  @media (max-width:900px){ .results-grid{ grid-template-columns:1fr; } }

  .panel{ border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-2); padding:22px; }
  .compass-panel{ display:flex; flex-direction:column; }
  .compass-panel .radar-svg{ margin-top:auto; margin-bottom:auto; }
  .panel h3{ font-size:1rem; margin-bottom:2px; }
  .panel .sub{ font-size:0.8rem; color:var(--ink-faint); margin-bottom:14px; }

  .radar-svg{ display:block; width:100%; max-width:560px; height:auto; margin:0 auto; overflow:visible; }

  .indicator-list{ list-style:none; margin:0; padding:0; }
  .indicator-list .cat-group{ margin-top:16px; }
  .indicator-list .cat-group:first-child{ margin-top:0; }
  .indicator-list .cat-name{ font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-faint); margin-bottom:6px; }
  .ind-row{ display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--line); font-size:0.86rem; }
  .indicator-list .cat-group:first-child .ind-row:first-child{ border-top:none; }
  .chip{ flex:none; width:10px; height:10px; border-radius:50%; }
  .chip.risk{ background:var(--risk); } .chip.warn{ background:var(--warn); } .chip.good{ background:var(--good); }
  .chip.neutral{ background:var(--line-strong); }
  .ind-row .name{ flex:1; color:var(--ink); }
  .ind-row .score{ flex:none; font-variant-numeric:tabular-nums; font-size:0.92rem; font-weight:700; color:var(--ink); }
  .ind-row .score.neutral{ font-weight:400; color:var(--ink-faint); }
  .ind-row .wtag{
    flex:none; font-size:0.72rem; font-weight:700; color:var(--ink);
    background:#fff; border:1px solid var(--ink); border-radius:999px; padding:2px 9px;
  }
  .ind-row .wtag.high{ color:var(--compass-ink); background:var(--compass-soft); border-color:var(--compass); }
  .ind-row .wtag.neutral{ color:var(--ink-faint); background:var(--paper-3); border-color:var(--line-strong); }

  .bars-grid{ display:flex; flex-direction:column; gap:12px; margin-top:20px; }
  .bar-card{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; background:var(--paper); }
  .bar-card h4{ font-family:var(--font-ui); font-size:0.82rem; font-weight:700; margin:0 0 10px; color:var(--ink); }
  .bar-row{ display:flex; align-items:center; gap:8px; margin-top:6px; }
  .bar-row .track{ flex:1; height:7px; border-radius:4px; background:var(--paper-3); overflow:hidden; }
  .bar-row .fill{ height:100%; border-radius:4px; }
  .bar-row .fill.neutral{ background:var(--line-strong) !important; }
  .bar-row .val{ flex:none; width:16px; font-size:0.78rem; font-weight:700; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }
  .bar-row .val.neutral{ font-weight:400; color:var(--ink-faint); }
  .bar-row .wtag{
    flex:none; width:132px; text-align:center; white-space:nowrap; font-size:0.66rem; font-weight:700; color:var(--ink);
    background:#fff; border:1px solid var(--ink); border-radius:999px; padding:1px 7px;
  }
  .bar-row .wtag.high{ color:var(--compass-ink); background:var(--compass-soft); border-color:var(--compass); }
  .bar-row .wtag.neutral{ color:var(--ink-faint); background:var(--paper-3); border-color:var(--line-strong); }

  .next-panel{
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
    margin-top:24px; padding:22px 26px; border:1px solid var(--compass); border-radius:var(--radius); background:var(--compass-soft);
  }
  .next-panel h3{ font-size:1.05rem; color:var(--ink); }
  .next-panel .sub{ color:var(--ink-soft); font-size:0.88rem; max-width:52ch; }

  /* ---------- Maßnahmenliste ---------- */
  .measures-panel{ margin-top:28px; }
  .filters{ display:flex; gap:20px; flex-wrap:wrap; margin-bottom:18px; }
  .filter-group{ display:flex; flex-direction:column; gap:6px; }
  .filter-group .flabel{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-faint); }
  .filter-chips{ display:flex; gap:6px; flex-wrap:wrap; }
  .chip-btn{
    font-size:0.76rem; padding:5px 11px; border-radius:999px; border:1px solid var(--line-strong); background:transparent;
    color:var(--ink-soft); cursor:pointer; font-weight:600;
  }
  .chip-btn.on{ background:var(--compass); border-color:var(--compass); color:#fff; }

  .filter-summary{ display:flex; align-items:center; gap:14px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line); font-size:0.85rem; color:var(--ink-soft); }
  .filter-summary #filterSummaryText{ font-weight:600; }
  .filter-reset{ border:1px solid var(--line-strong); background:transparent; color:var(--ink-soft); border-radius:999px; padding:4px 12px; font-size:0.78rem; cursor:pointer; font-family:var(--font-ui); }
  .filter-reset:hover{ color:var(--compass-ink); border-color:var(--compass); }
  .measure-list{ display:flex; flex-direction:column; gap:10px; }
  .measure-row{ display:flex; gap:12px; align-items:stretch; }
  .measure-card{ flex:1 1 auto; border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; background:var(--paper); display:flex; gap:14px; align-items:flex-start; justify-content:space-between; }
  .measure-action{
    flex:none; align-self:stretch; display:inline-flex; align-items:center; justify-content:center; text-align:center;
    font-family:var(--font-ui); font-weight:600; font-size:0.9rem; line-height:1.2;
    background:var(--compass); color:#fff; border:1px solid transparent; border-radius:var(--radius-sm);
    padding:10px 20px; min-width:150px; cursor:pointer; box-shadow:var(--shadow);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .measure-action:hover{ box-shadow:0 10px 26px -12px var(--compass); }
  .measure-action:active{ transform:translateY(1px); }
  .measure-action.unavailable{
    background:var(--line-strong); color:var(--ink-faint); cursor:not-allowed;
    opacity:0.62; box-shadow:none;
  }
  .measure-action.unavailable:hover{ box-shadow:none; }
  .measure-action.unavailable:active{ transform:none; }
  @media (max-width:640px){ .measure-row{ flex-direction:column; } .measure-action{ align-self:stretch; width:100%; } }
  .measure-main{ min-width:0; }
  .measure-cat{ font-size:0.7rem; font-weight:700; color:var(--compass-ink); text-transform:uppercase; letter-spacing:0.03em; }
  .measure-name{ font-weight:600; margin-top:3px; font-size:0.95rem; }
  .measure-tags{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
  .tag{ font-size:0.7rem; padding:2px 8px; border-radius:999px; border:1px solid var(--line-strong); color:var(--ink-faint); }
  .measure-fit{ flex:none; width:88px; text-align:right; }
  .measure-fit .n{ font-family:var(--font-display); font-size:1.3rem; color:var(--compass-ink); font-variant-numeric:tabular-nums; }
  .measure-fit .l{ font-size:0.66rem; color:var(--ink-faint); line-height:1.2; margin-top:2px; overflow-wrap:break-word; word-break:normal; -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto; }
  .measure-empty{ font-size:0.88rem; color:var(--ink-faint); padding:20px 0; text-align:center; }

  .results-actions{ display:flex; gap:10px; margin-top:34px; flex-wrap:wrap; align-items:center; }
  .results-actions .btn-primary:first-of-type{ margin-left:auto; }
  @media (max-width:720px){ .results-actions .btn-primary:first-of-type{ margin-left:0; } }
  .footnote{ font-size:0.78rem; color:var(--ink-faint); margin-top:10px; }

  /* ---------- Fußbereich ---------- */
  .pd-footer{ margin-top:auto; background:var(--compass); color:#fff; }
  .pd-footer-inner{
    width:100%; max-width:1440px; margin:0 auto; padding:48px 24px 32px;
    display:grid; grid-template-columns:auto 1fr auto; gap:32px 48px; align-items:start;
  }
  .pd-footer-logo img{ width:140px; height:auto; display:block; }
  .pd-footer-social{ display:flex; flex-direction:column; gap:10px; }
  .pd-footer-social-title{ font-family:var(--font-ui); font-size:0.9rem; color:rgba(255,255,255,0.85); }
  .pd-footer-social ul{ list-style:none; margin:0; padding:0; display:flex; gap:18px; }
  .pd-footer-social a{ color:#fff; text-decoration:none; font-family:var(--font-ui); font-weight:600; font-size:0.9rem; border-bottom:2px solid transparent; padding-bottom:2px; }
  .pd-footer-social a:hover{ border-bottom-color:var(--gold); }
  .pd-footer-links{ display:flex; flex-direction:column; gap:10px; text-align:right; }
  .pd-footer-links a{ color:#fff; text-decoration:none; font-family:var(--font-ui); font-size:1rem; }
  .pd-footer-links a:hover{ color:var(--gold); }
  .pd-footer-bar{ border-top:1px solid rgba(255,255,255,0.2); }
  .pd-footer-bar-inner{
    width:100%; max-width:1440px; margin:0 auto; padding:16px 24px;
    display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
    font-family:var(--font-ui); font-size:0.8rem; color:rgba(255,255,255,0.75);
  }
  .pd-footer-bar-inner span:first-child{ font-style:italic; font-weight:600; }
  @media (max-width:760px){
    .pd-footer-inner{ grid-template-columns:1fr; gap:24px; }
    .pd-footer-links{ text-align:left; }
  }

  /* ---------- Druckansicht ---------- */
  @media print{
    .pd-header, .pd-breadcrumb, .rail-wrap, .results-actions, .measures-panel .filters, .theme-toggle, .auth-box, #backToResultsBtn, .pd-footer{ display:none !important; }
    body{ background:#fff; color:#000; }
  }