/* =============================================================
   style.css
   ERP-Auswahl fuer kleine Handwerksbetriebe

   Aufbau nach Drei-Schichten-Token-Architektur:
     1. Primitive Tokens  - Rohwerte (Farben, Groessen, Zeiten)
     2. Semantische Tokens - Bedeutung (Hintergrund, Text, Rahmen)
     3. Komponenten-Tokens - je Baustein (Knopf, Karte, Feld)

   In Komponenten stehen niemals rohe Hex-Werte, nur semantische
   Tokens. Ein Themenwechsel (hell/dunkel) tauscht deshalb nur
   Schicht 2 aus.

   Designsystem: schlichtes Corporate Design - eine Schrift (Lato),
   kantige Flaechen ohne Schatten, Linien statt Karten.
   Kontrastziel: 4.5:1 fuer Fliesstext, 3:1 fuer Rahmen und
   Zustaende, in beiden Themen geprueft.
   ============================================================= */

/* =============================================================
   0. Schriften - lokal eingebunden, kein externer Abruf
   ============================================================= */

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================
   1. Primitive Tokens
   ============================================================= */

:root {
  /* --- Farbrampe: Schiefer (neutral) --- */
  --p-slate-950: #020617;
  --p-slate-900: #0F172A;
  --p-slate-800: #1E293B;
  --p-slate-700: #334155;
  --p-slate-600: #475569;
  --p-slate-500: #64748B;
  --p-slate-400: #94A3B8;
  --p-slate-300: #CBD5E1;
  --p-slate-200: #E2E8F0;
  --p-slate-150: #E8ECF1;
  --p-slate-100: #F1F5F9;
  --p-slate-050: #F8FAFC;
  --p-white:     #FFFFFF;

  /* --- Farbrampe: Blau (Handlungsfarbe) --- */
  --p-blue-900: #0C4A6E;
  --p-blue-800: #075985;
  --p-blue-700: #0369A1;
  --p-blue-600: #0284C7;
  --p-blue-400: #38BDF8;
  --p-blue-200: #BAE6FD;
  --p-blue-100: #E0F2FE;
  --p-blue-050: #F0F9FF;

  /* --- Farbrampe: Zustaende --- */
  --p-green-800: #166534;
  --p-green-700: #15803D;
  --p-green-400: #4ADE80;
  --p-green-100: #DCFCE7;
  --p-green-050: #F0FDF4;

  --p-amber-900: #78350F;
  --p-amber-800: #92400E;
  --p-amber-700: #B45309;
  --p-amber-400: #FBBF24;
  --p-amber-100: #FEF3C7;
  --p-amber-050: #FFFBEB;

  --p-red-900: #7F1D1D;
  --p-red-800: #991B1B;
  --p-red-700: #B91C1C;
  --p-red-600: #DC2626;
  --p-red-400: #F87171;
  --p-red-100: #FEE2E2;
  --p-red-050: #FEF2F2;

  /* --- Abstandsraster 4/8 --- */
  --p-space-1:  0.25rem;  /*  4px */
  --p-space-2:  0.5rem;   /*  8px */
  --p-space-3:  0.75rem;  /* 12px */
  --p-space-4:  1rem;     /* 16px */
  --p-space-5:  1.5rem;   /* 24px */
  --p-space-6:  2rem;     /* 32px */
  --p-space-7:  3rem;     /* 48px */
  --p-space-8:  4rem;     /* 64px */
  --p-space-9:  6rem;     /* 96px */

  /* --- Schriftgroessen: 12 14 16 18 20 24 32 40 48 --- */
  --p-text-xs:   0.75rem;
  --p-text-sm:   0.875rem;
  --p-text-base: 1rem;
  --p-text-md:   1.125rem;
  --p-text-lg:   1.25rem;
  --p-text-xl:   1.5rem;
  --p-text-2xl:  2rem;
  --p-text-3xl:  2.5rem;
  --p-text-4xl:  3rem;

  /* --- Schriftfamilien --- */
  --p-font-sans:  'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --p-font-head:  var(--p-font-sans);

  /* --- Radien --- */
  --p-radius-sm: 2px;
  --p-radius-md: 3px;
  --p-radius-lg: 4px;
  --p-radius-full: 999px;

  /* --- Elevation: eine Skala, keine Zufallswerte --- */
  --p-shadow-1: none;
  --p-shadow-2: 0 1px 2px rgba(2, 6, 23, .06);
  --p-shadow-3: 0 8px 24px rgba(2, 6, 23, .10);

  /* --- Bewegung: gemeinsame Tokens, nach Distanz gewaehlt --- */
  --p-dur-instant: 100ms;  /* Zustandswechsel am Ort, z. B. Farbe */
  --p-dur-short:   180ms;  /* kleine Wege, z. B. Knopf, Fokus */
  --p-dur-medium:  260ms;  /* Flaechen, z. B. Fortschritt, Einblenden */
  --p-ease-out:    cubic-bezier(.16, 1, .3, 1);   /* Ankommen: abbremsen */
  --p-ease-in:     cubic-bezier(.4, 0, 1, 1);     /* Weggehen: beschleunigen */

  /* --- Ebenen --- */
  --p-z-base: 0;
  --p-z-sticky: 20;
  --p-z-overlay: 40;
  --p-z-skiplink: 100;

  /* --- Masse --- */
  --p-container: 72rem;    /* 1152px */
  --p-measure: 68ch;       /* lesbare Zeilenlaenge */
  --p-touch: 2.75rem;      /* 44px Mindestgroesse fuer Bedienelemente */
}

/* =============================================================
   2. Semantische Tokens - helles Thema
   ============================================================= */

:root {
  --c-background:        var(--p-slate-050);
  --c-foreground:        var(--p-slate-950);
  --c-surface:           var(--p-white);
  --c-surface-foreground:var(--p-slate-950);
  --c-surface-sunken:    var(--p-slate-100);

  --c-muted:             var(--p-slate-150);
  --c-muted-foreground:  var(--p-slate-600);

  --c-border:            var(--p-slate-200);
  --c-border-strong:     var(--p-slate-400);

  --c-primary:           var(--p-slate-900);
  --c-on-primary:        var(--p-white);

  --c-accent:            var(--p-blue-700);
  --c-accent-hover:      var(--p-blue-800);
  --c-on-accent:         var(--p-white);
  --c-accent-subtle:     var(--p-blue-050);
  --c-accent-border:     var(--p-blue-200);
  --c-accent-text:       var(--p-blue-800);

  --c-success:           var(--p-green-700);
  --c-success-text:      var(--p-green-800);
  --c-success-subtle:    var(--p-green-050);
  --c-success-border:    var(--p-green-100);

  --c-warning:           var(--p-amber-700);
  --c-warning-text:      var(--p-amber-900);
  --c-warning-subtle:    var(--p-amber-050);
  --c-warning-border:    var(--p-amber-100);

  --c-danger:            var(--p-red-600);
  --c-danger-text:       var(--p-red-900);
  --c-danger-subtle:     var(--p-red-050);
  --c-danger-border:     var(--p-red-100);

  --c-ring:              var(--p-blue-700);

  --c-band:              var(--p-slate-900);
  --c-on-band:           var(--p-slate-100);
  --c-on-band-muted:     var(--p-slate-400);
  --c-shadow-1: var(--p-shadow-1);
  --c-shadow-2: var(--p-shadow-2);
  --c-shadow-3: var(--p-shadow-3);
}

/* --- Dunkles Thema: entsaettigte Tonwerte, keine Invertierung --- */
@media (prefers-color-scheme: dark) {
  :root {
    --c-background:        #0B1220;
    --c-foreground:        #E8EEF6;
    --c-surface:           #121C2D;
    --c-surface-foreground:#E8EEF6;
    --c-surface-sunken:    #18243A;

    --c-muted:             #1C2A42;
    --c-muted-foreground:  #A9BAD0;

    --c-border:            #26364F;
    --c-border-strong:     #465875;

    --c-primary:           #E8EEF6;
    --c-on-primary:        #0B1220;

    --c-accent:            var(--p-blue-400);
    --c-accent-hover:      #7DD3FC;
    --c-on-accent:         #04263B;
    --c-accent-subtle:     #12283C;
    --c-accent-border:     #2C4C68;
    --c-accent-text:       #8FD3F7;

    --c-success:           var(--p-green-400);
    --c-success-text:      #86EFAC;
    --c-success-subtle:    #10291C;
    --c-success-border:    #21503A;

    --c-warning:           var(--p-amber-400);
    --c-warning-text:      #FCD34D;
    --c-warning-subtle:    #2A2010;
    --c-warning-border:    #57411A;

    --c-danger:            var(--p-red-400);
    --c-danger-text:       #FCA5A5;
    --c-danger-subtle:     #2C1416;
    --c-danger-border:     #5A2A2C;

    --c-ring:              var(--p-blue-400);

    --c-band:              #060B16;
    --c-on-band:           #E8EEF6;
    --c-on-band-muted:     #94A3B8;
    --c-shadow-1: none;
    --c-shadow-2: 0 1px 2px rgba(0, 0, 0, .4);
    --c-shadow-3: 0 8px 24px rgba(0, 0, 0, .5);
  }
}

/* =============================================================
   3. Grundlagen
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-background);
  color: var(--c-foreground);
  font-family: var(--p-font-sans);
  font-size: var(--p-text-base);
  line-height: 1.65;
  overflow-wrap: break-word;
  font-synthesis-weight: none;
}

h1, h2, h3, h4 {
  font-family: var(--p-font-head);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .005em;
  text-wrap: balance;
  margin: 0 0 var(--p-space-3);
}
h1 { font-size: var(--p-text-2xl); }
h2 { font-size: var(--p-text-xl); }
h3 { font-size: var(--p-text-lg); }
h4 { font-size: var(--p-text-md); }

p { margin: 0 0 var(--p-space-4); }

a { color: var(--c-accent-text); text-underline-offset: .2em; }
a:hover { color: var(--c-accent-hover); }

/* Fokus: sichtbarer Ring mit eigener Flaeche, nie entfernt.
   3px plus 2px Versatz erfuellt die Anforderung an
   Fokusdarstellung und Zustandskontrast. */
:focus-visible {
  outline: 3px solid var(--c-ring);
  outline-offset: 2px;
  border-radius: var(--p-radius-sm);
}

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

/* =============================================================
   4. Hilfsklassen
   ============================================================= */

.inhalt {
  max-width: var(--p-container);
  margin-inline: auto;
  padding-inline: var(--p-space-4);
}

.nur-fuer-screenreader {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sprungmarke: sichtbar, sobald sie den Fokus erhaelt */
.sprungmarke {
  position: absolute;
  left: var(--p-space-4);
  top: var(--p-space-2);
  z-index: var(--p-z-skiplink);
  transform: translateY(-200%);
  background: var(--c-accent);
  color: var(--c-on-accent);
  padding: var(--p-space-3) var(--p-space-4);
  border-radius: var(--p-radius-md);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--p-dur-short) var(--p-ease-out);
}
.sprungmarke:focus { transform: translateY(0); color: var(--c-on-accent); }

.klein { font-size: var(--p-text-sm); color: var(--c-muted-foreground); margin: var(--p-space-2) 0 0; }
.zahlen { font-variant-numeric: tabular-nums; }

/* =============================================================
   5. Komponente: Kopfzeile und Navigation
   ============================================================= */

.kopf {
  position: sticky;
  top: 0;
  z-index: var(--p-z-sticky);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.kopf-inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-space-5);
  min-height: 4rem;
  flex-wrap: wrap;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-3);
  text-decoration: none;
  color: var(--c-foreground);
  padding-block: var(--p-space-2);
}
.marke-kurz {
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-family: var(--p-font-sans);
  font-weight: 700;
  letter-spacing: .08em;
  font-size: var(--p-text-xs);
  padding: var(--p-space-1) var(--p-space-2);
  border-radius: var(--p-radius-sm);
}
.marke-lang { font-size: var(--p-text-sm); color: var(--c-muted-foreground); }

.hauptnavigation { display: flex; gap: var(--p-space-2); flex-wrap: wrap; }
.hauptnavigation a {
  display: inline-flex;
  align-items: center;
  min-height: var(--p-touch);
  padding: 0 var(--p-space-3);
  border-radius: var(--p-radius-md);
  font-size: var(--p-text-sm);
  font-weight: 700;
  text-decoration: none;
  color: var(--c-muted-foreground);
  transition: background var(--p-dur-instant) var(--p-ease-out),
              color var(--p-dur-instant) var(--p-ease-out);
}
.hauptnavigation a:hover { background: var(--c-muted); color: var(--c-foreground); }
/* Aktive Seite: nicht nur Farbe, sondern zusaetzlich Balken und aria-current */
.hauptnavigation a[aria-current='page'] {
  color: var(--c-accent-text);
  background: var(--c-accent-subtle);
  box-shadow: inset 0 -3px 0 var(--c-accent);
}

/* =============================================================
   6. Komponente: Knoepfe
   ============================================================= */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-space-2);
  min-height: var(--p-touch);
  padding: var(--p-space-3) var(--p-space-5);
  border: 1px solid transparent;
  border-radius: var(--p-radius-md);
  font-family: var(--p-font-sans);
  font-size: var(--p-text-base);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--p-dur-instant) var(--p-ease-out),
              border-color var(--p-dur-instant) var(--p-ease-out),
              box-shadow var(--p-dur-instant) var(--p-ease-out);
}
.knopf .symbol { flex: none; }

.knopf.primaer {
  background: var(--c-accent);
  color: var(--c-on-accent);
  box-shadow: var(--c-shadow-1);
}
.knopf.primaer:hover { background: var(--c-accent-hover); box-shadow: var(--c-shadow-2); }
/* Gedrueckt: nur Flaeche, keine Verschiebung der Layoutgrenzen */
.knopf.primaer:active { background: var(--c-accent-hover); box-shadow: none; }

.knopf.sekundaer {
  background: var(--c-surface);
  color: var(--c-accent-text);
  border-color: var(--c-border-strong);
}
.knopf.sekundaer:hover { border-color: var(--c-accent); background: var(--c-accent-subtle); }
.knopf.sekundaer:active { background: var(--c-muted); }

.knopf[disabled], .knopf[aria-disabled='true'] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

.knopfreihe {
  display: flex;
  gap: var(--p-space-3);
  flex-wrap: wrap;
  margin-top: var(--p-space-5);
}

/* =============================================================
   7. Komponente: Startseite
   ============================================================= */

.held {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding-block: var(--p-space-8) var(--p-space-7);
}
.augenbraue {
  font-family: var(--p-font-sans);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: var(--p-text-xs);
  font-weight: 700;
  color: var(--c-accent-text);
  margin: 0 0 var(--p-space-3);
}
.held h1 { font-size: var(--p-text-3xl); max-width: 20ch; }
.held-text { max-width: var(--p-measure); font-size: var(--p-text-md); color: var(--c-muted-foreground); }
.held-fuss {
  display: flex; flex-wrap: wrap; gap: var(--p-space-2) var(--p-space-4);
  font-size: var(--p-text-sm); color: var(--c-muted-foreground);
  margin: var(--p-space-5) 0 0;
}
.held-fuss span { display: inline-flex; align-items: center; gap: var(--p-space-2); }

.abschnitt { padding-block: var(--p-space-7); }
.abschnitt.gesenkt {
  background: var(--c-surface-sunken);
  border-block: 1px solid var(--c-border);
}
.abschnitt-text { max-width: var(--p-measure); color: var(--c-muted-foreground); }

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--p-space-4);
  margin: var(--p-space-5) 0;
  padding: 0; list-style: none;
}
.kachel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--p-radius-lg);
  padding: var(--p-space-5);
  box-shadow: var(--c-shadow-1);
}
.kachel .zahl {
  font-family: var(--p-font-head);
  font-size: var(--p-text-3xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent-text);
  line-height: 1;
  margin: 0 0 var(--p-space-2);
}
.kachel p { margin: 0 0 var(--p-space-2); }
.quelle { font-size: var(--p-text-xs); color: var(--c-muted-foreground); margin: 0; }

.ablauf {
  list-style: none; padding: 0;
  margin: var(--p-space-5) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--p-space-4);
  counter-reset: schritt;
}
.ablauf li {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--p-radius-lg);
  padding: var(--p-space-5);
  box-shadow: var(--c-shadow-1);
}
.ablauf-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: var(--p-radius-full);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: 700; font-size: var(--p-text-sm);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--p-space-3);
}
.ablauf p { color: var(--c-muted-foreground); margin: 0; font-size: var(--p-text-sm); }

/* =============================================================
   8. Komponente: Fortschrittsleiste und Schrittanzeige
   ============================================================= */

.fortschritt-leiste {
  background: var(--c-surface-sunken);
  border-bottom: 1px solid var(--c-border);
  padding-block: var(--p-space-4);
}
.schrittanzeige {
  list-style: none;
  display: flex; flex-wrap: wrap;
  gap: var(--p-space-2) var(--p-space-5);
  padding: 0; margin: 0 0 var(--p-space-3);
}
.schrittanzeige li {
  display: flex; align-items: center; gap: var(--p-space-2);
  font-size: var(--p-text-sm);
  color: var(--c-muted-foreground);
}
.schrittanzeige li span:first-child {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; flex: none;
  border-radius: var(--p-radius-full);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  font-size: var(--p-text-xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Aktueller Schritt: Farbe, Fettung und gefuellter Kreis -
   nicht allein ueber Farbe erkennbar */
.schrittanzeige li.aktiv { color: var(--c-accent-text); font-weight: 700; }
.schrittanzeige li.aktiv span:first-child {
  background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent);
}
.schrittanzeige li.erledigt span:first-child {
  background: var(--c-success-subtle);
  border-color: var(--c-success);
  color: var(--c-success-text);
}

.balken {
  background: var(--c-muted);
  border: 1px solid var(--c-border);
  border-radius: var(--p-radius-full);
  overflow: hidden;
  height: .5rem;
  width: 100%;
}
.balken-fuell {
  background: var(--c-accent);
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width var(--p-dur-medium) var(--p-ease-out);
}

/* =============================================================
   9. Komponente: Fragebogen
   ============================================================= */

.fragebogen { padding-block: var(--p-space-6) var(--p-space-8); }
.lead { max-width: var(--p-measure); color: var(--c-muted-foreground); font-size: var(--p-text-md); margin-bottom: var(--p-space-6); }

/* Hinweis nach fehlgeschlagenem Absenden: Rolle alert,
   Fokus wird per JavaScript hierher gesetzt */
.hinweis {
  background: var(--c-warning-subtle);
  border: 1px solid var(--c-warning-border);
  border-left: 4px solid var(--c-warning);
  color: var(--c-warning-text);
  border-radius: var(--p-radius-md);
  padding: var(--p-space-4);
  margin: 0 0 var(--p-space-5);
  display: flex;
  gap: var(--p-space-3);
  align-items: flex-start;
}
.hinweis .symbol { flex: none; margin-top: .15em; }
.hinweis a { color: inherit; font-weight: 700; }
.hinweis ul { margin: var(--p-space-2) 0 0; padding-inline-start: var(--p-space-5); }

.dimension { margin: 0 0 var(--p-space-7); }
.dimension-kopf {
  display: flex; align-items: baseline; gap: var(--p-space-3);
  flex-wrap: wrap;
  border-bottom: 2px solid var(--c-accent);
  padding-bottom: var(--p-space-2);
}
.dimension-kopf h2 { margin: 0; font-size: var(--p-text-lg); }
.dimension-id {
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-family: var(--p-font-sans);
  font-size: var(--p-text-xs); font-weight: 700;
  letter-spacing: .04em;
  padding: var(--p-space-1) var(--p-space-2);
  border-radius: var(--p-radius-sm);
}
.dimension-gewicht { margin-inline-start: auto; font-size: var(--p-text-sm); color: var(--c-muted-foreground); }
.dimension-text { color: var(--c-muted-foreground); font-size: var(--p-text-sm); margin: var(--p-space-3) 0 var(--p-space-4); }

.frage {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--p-radius-lg);
  padding: var(--p-space-5);
  margin: 0 0 var(--p-space-4);
  box-shadow: var(--c-shadow-1);
}
.frage legend {
  font-family: var(--p-font-head);
  font-size: var(--p-text-md);
  font-weight: 600;
  padding: 0;
}
.krit-id {
  display: inline-block;
  background: var(--c-accent-subtle);
  color: var(--c-accent-text);
  border: 1px solid var(--c-accent-border);
  font-family: var(--p-font-sans);
  font-size: var(--p-text-xs); font-weight: 700;
  padding: 0 var(--p-space-2);
  border-radius: var(--p-radius-sm);
  margin-inline-end: var(--p-space-2);
  font-variant-numeric: tabular-nums;
}
.frage-text { margin: var(--p-space-3) 0 var(--p-space-2); }
/* Dauerhafter Hilfetext, nicht nur Platzhalter */
.nachweis {
  font-size: var(--p-text-sm);
  color: var(--c-muted-foreground);
  margin: 0 0 var(--p-space-4);
  max-width: var(--p-measure);
}

.stufen, .optionen { display: grid; gap: var(--p-space-2); }

/* Auswahlflaeche: mindestens 44px hoch, Rahmen als Zustand,
   zusaetzlich Haken als nicht farbliches Merkmal */
.stufe, .option {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--p-space-3);
  min-height: var(--p-touch);
  border: 1px solid var(--c-border);
  border-radius: var(--p-radius-md);
  padding: var(--p-space-3);
  cursor: pointer;
  font-size: var(--p-text-base);
  background: var(--c-surface);
  touch-action: manipulation;
  transition: border-color var(--p-dur-instant) var(--p-ease-out),
              background var(--p-dur-instant) var(--p-ease-out);
}
.stufe:hover, .option:hover { border-color: var(--c-accent); background: var(--c-accent-subtle); }
.stufe.gewaehlt, .option.gewaehlt {
  border-color: var(--c-accent);
  background: var(--c-accent-subtle);
  box-shadow: inset 0 0 0 1px var(--c-accent);
}
.stufe.gewaehlt::after, .option.gewaehlt::after {
  content: '';
  position: absolute;
  inset-inline-end: var(--p-space-3);
  top: 50%;
  width: .7rem; height: 1.1rem;
  margin-top: -.7rem;
  border: solid var(--c-accent);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.stufe.gewaehlt, .option.gewaehlt { padding-inline-end: var(--p-space-7); }

.stufe input, .option input {
  margin: .3em 0 0;
  width: 1.1rem; height: 1.1rem;
  flex: none;
  accent-color: var(--c-accent);
}
.stufe-nr {
  font-weight: 700;
  color: var(--c-accent-text);
  min-width: 1.25em;
  font-variant-numeric: tabular-nums;
}

/* Beleg-Haken: setzt Kapitel 5.5 um, das die Kennzeichnung
   auskunftsbasierter Bewertungen verlangt. Bewusst optional und
   voreingestellt auf "nicht belegt" - das ist die konservative
   Annahme. */
.beleg {
  display: flex;
  align-items: center;
  gap: var(--p-space-3);
  min-height: var(--p-touch);
  margin-top: var(--p-space-3);
  padding: var(--p-space-2) var(--p-space-3);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--p-radius-md);
  font-size: var(--p-text-sm);
  color: var(--c-muted-foreground);
  cursor: pointer;
  background: var(--c-surface);
  touch-action: manipulation;
  transition: border-color var(--p-dur-instant) var(--p-ease-out),
              background var(--p-dur-instant) var(--p-ease-out),
              color var(--p-dur-instant) var(--p-ease-out);
}
.beleg:hover { border-color: var(--c-accent); color: var(--c-foreground); }
.beleg input { width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--c-success); }
.beleg.gewaehlt {
  border-style: solid;
  border-color: var(--c-success);
  background: var(--c-success-subtle);
  color: var(--c-success-text);
  font-weight: 700;
}

/* Viertes Feld der Vierfeldstruktur: Rueckfuehrung auf die
   Reibungspunkte (Kapitel 5.2.3) */
.bezug {
  margin: var(--p-space-3) 0 0;
  padding-top: var(--p-space-3);
  border-top: 1px solid var(--c-border);
  font-size: var(--p-text-sm);
  color: var(--c-muted-foreground);
}
.bezug-leer { font-style: italic; }

/* Weiter-Knopf je Frage: erscheint erst nach der Antwort */
.frage-weiter {
  display: flex;
  align-items: center;
  gap: var(--p-space-3);
  flex-wrap: wrap;
  margin-top: var(--p-space-4);
  padding-top: var(--p-space-4);
  border-top: 1px dashed var(--c-border);
}
.frage-weiter .knopf { padding-block: var(--p-space-2); font-size: var(--p-text-sm); }
.weiter-ziel { margin: 0 !important; }

/* Unbeantwortete Frage nach Absenden: Rahmen plus Textmarke */
.frage.fehlt {
  border-color: var(--c-danger);
  box-shadow: inset 3px 0 0 var(--c-danger);
}
.fehlt-marke {
  display: inline-flex; align-items: center; gap: var(--p-space-2);
  color: var(--c-danger-text);
  background: var(--c-danger-subtle);
  border: 1px solid var(--c-danger-border);
  border-radius: var(--p-radius-sm);
  padding: var(--p-space-1) var(--p-space-2);
  font-size: var(--p-text-sm);
  font-weight: 700;
  margin-bottom: var(--p-space-3);
}

/* =============================================================
   10. Komponente: Ergebnis
   ============================================================= */

.empfehlung {
  border: 1px solid;
  border-radius: var(--p-radius-lg);
  padding: var(--p-space-5);
  margin: 0 0 var(--p-space-6);
  display: flex;
  gap: var(--p-space-4);
  align-items: flex-start;
}
.empfehlung .symbol { flex: none; margin-top: .2em; }
.empfehlung-koerper { min-width: 0; }
.empfehlung.ok      { background: var(--c-success-subtle); border-color: var(--c-success-border); }
.empfehlung.warnung { background: var(--c-warning-subtle); border-color: var(--c-warning-border); }
.empfehlung.stop    { background: var(--c-danger-subtle);  border-color: var(--c-danger-border); }
.empfehlung.ok      .symbol { color: var(--c-success-text); }
.empfehlung.warnung .symbol { color: var(--c-warning-text); }
.empfehlung.stop    .symbol { color: var(--c-danger-text); }
.empfehlung-label {
  font-family: var(--p-font-sans);
  text-transform: uppercase; letter-spacing: .12em;
  font-size: var(--p-text-xs); font-weight: 700;
  margin: 0 0 var(--p-space-2);
}
.empfehlung h2 { margin: 0 0 var(--p-space-3); }
.empfehlung p { margin: 0 0 var(--p-space-3); max-width: var(--p-measure); }
.empfehlung p:last-child { margin-bottom: 0; }
.empfehlung-kennzahl { font-size: var(--p-text-base); }

.ergebnisblock { margin: 0 0 var(--p-space-7); }
.ergebnisblock > h2, .ergebnisblock > h3 {
  border-bottom: 1px solid var(--c-border);
  padding-bottom: var(--p-space-2);
  margin-bottom: var(--p-space-3);
}
.block-text { color: var(--c-muted-foreground); font-size: var(--p-text-sm); max-width: var(--p-measure); }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--p-text-sm);
  margin: var(--p-space-4) 0;
  background: var(--c-surface);
}
caption {
  text-align: left;
  font-size: var(--p-text-sm);
  color: var(--c-muted-foreground);
  padding-bottom: var(--p-space-2);
}
th, td {
  text-align: left;
  padding: var(--p-space-3);
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
thead th {
  background: var(--c-surface-sunken);
  font-size: var(--p-text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-muted-foreground);
  border-bottom: 2px solid var(--c-border-strong);
}
tfoot td { border-top: 2px solid var(--c-border-strong); border-bottom: none; font-weight: 700; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.balkenzelle { width: 9rem; }
tr.erstplatziert { background: var(--c-success-subtle); }

/* Ausgeschlossene Anbieter bleiben lesbar - sie werden zurueckgenommen,
   nicht versteckt. Der Grund steht als Text in der Zeile und darunter,
   die Faerbung ist nur die Zugabe. */
tr.ausgeschlossen { background: var(--c-surface-sunken); }
tr.ausgeschlossen th[scope="row"] { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Nicht relevante Anforderungen: sichtbar, aber erkennbar ausser Kraft.
   Kontrast bleibt ueber dem Grenzwert - zurueckgenommen heisst nicht blass. */
.nicht-relevant { color: var(--c-muted-foreground); }
td.nicht-relevant, th.nicht-relevant { background: var(--c-surface-sunken); }
tr.nicht-relevant th[scope="row"] .krit-id {
  background: var(--c-muted);
  color: var(--c-muted-foreground);
  border-color: var(--c-border-strong);
}

/* Gate-Status: Symbol plus Wort, nicht nur Farbe */
.status { display: inline-flex; align-items: center; gap: var(--p-space-2); font-weight: 700; white-space: nowrap; }
.status.ja   { color: var(--c-success-text); }
.status.nein { color: var(--c-danger-text); }

.tabelle-scroll {
  /* position: relative ist hier zwingend: ohne einen positionierten
     Vorfahren entkommen absolut positionierte Nachfahren - etwa die
     Beschriftungen der Klasse .nur-fuer-screenreader - der Klammer
     dieses Containers und verbreitern das Dokument. */
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-border);
  border-radius: var(--p-radius-md);
}
.tabelle-scroll table { margin: 0; }
.matrix { min-width: 52rem; }

.segmentkarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--p-space-4);
  margin-top: var(--p-space-4);
  padding: 0; list-style: none;
}
.segmentkarte {
  border: 1px solid var(--c-border);
  border-radius: var(--p-radius-lg);
  padding: var(--p-space-4);
  background: var(--c-surface);
  box-shadow: var(--c-shadow-1);
}
.segmentkarte h4 { margin: 0 0 var(--p-space-1); }
.segmentkarte p { font-size: var(--p-text-sm); margin: 0 0 var(--p-space-2); color: var(--c-muted-foreground); }
.segment-meta { font-weight: 700; color: var(--c-accent-text) !important; }

.sperrhinweis {
  background: var(--c-warning-subtle);
  border: 1px solid var(--c-warning-border);
  border-left: 4px solid var(--c-warning);
  color: var(--c-warning-text);
  padding: var(--p-space-4);
  border-radius: var(--p-radius-md);
  font-size: var(--p-text-sm);
  display: flex; gap: var(--p-space-3); align-items: flex-start;
}
.sperrhinweis .symbol { flex: none; margin-top: .1em; }
.quellenhinweis {
  font-size: var(--p-text-sm);
  color: var(--c-muted-foreground);
  background: var(--c-surface-sunken);
  border: 1px solid var(--c-border);
  border-radius: var(--p-radius-md);
  padding: var(--p-space-4);
}
.befund { display: flex; gap: var(--p-space-3); align-items: flex-start; }
.befund .symbol { flex: none; margin-top: .2em; }
.befund.ok .symbol { color: var(--c-success-text); }
.befund.warnung .symbol { color: var(--c-danger-text); }
.wechselliste { font-size: var(--p-text-sm); color: var(--c-muted-foreground); }
.grenzen ul { color: var(--c-muted-foreground); font-size: var(--p-text-sm); max-width: var(--p-measure); }
.grenzen li { margin-bottom: var(--p-space-2); }
.formel {
  font-family: var(--p-font-head);
  font-size: var(--p-text-lg);
  text-align: center;
  padding: var(--p-space-4);
  background: var(--c-surface-sunken);
  border: 1px solid var(--c-border);
  border-radius: var(--p-radius-md);
}

/* =============================================================
   10b. Komponente: Traceability-Kette
   ============================================================= */

.kettenliste { list-style: none; padding: 0; margin: var(--p-space-5) 0 0; display: grid; gap: var(--p-space-4); }

.kette {
  border: 1px solid var(--c-border);
  border-radius: var(--p-radius-lg);
  background: var(--c-surface);
  box-shadow: var(--c-shadow-1);
  overflow: hidden;
}
/* Gesperrte Ketten tragen einen Balken an der Seite - der Status
   steht zusaetzlich als Text darunter, nie nur als Farbe. */
.kette.nutzbar  { box-shadow: inset 4px 0 0 var(--c-success), var(--c-shadow-1); }
.kette.gesperrt { box-shadow: inset 4px 0 0 var(--c-warning), var(--c-shadow-1); }

.kette-stufen {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0;
  padding: 0;
  margin: 0;
}
.kette-stufe-block {
  padding: var(--p-space-4);
  border-bottom: 1px solid var(--c-border);
  min-width: 0;
}
.kette-stufe-block + .kette-stufe-block { border-top: 0; }
.kette-stufe-block p { margin: 0 0 var(--p-space-2); font-size: var(--p-text-sm); }
.kette-stufe-block p:last-child { margin-bottom: 0; }
.kette-label {
  font-family: var(--p-font-sans);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: var(--p-text-xs);
  font-weight: 700;
  color: var(--c-accent-text);
}
.kette-klein { font-size: var(--p-text-xs) !important; color: var(--c-muted-foreground); }

.kette-krits { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--p-space-2); }
.kette-krit {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--p-space-1) var(--p-space-2);
  font-size: var(--p-text-xs);
  line-height: 1.45;
}
.kette-krit .symbol { flex: none; align-self: center; }
.kette-krit.ok    { color: var(--c-success-text); }
.kette-krit.offen { color: var(--c-danger-text); }
.kette-stufe { margin-inline-start: auto; white-space: nowrap; font-weight: 700; }

.kette-status {
  display: flex;
  align-items: flex-start;
  gap: var(--p-space-2);
  margin: 0;
  padding: var(--p-space-3) var(--p-space-4);
  font-size: var(--p-text-sm);
  font-weight: 600;
}
.kette-status .symbol { flex: none; margin-top: .15em; }
.kette-status.ok    { background: var(--c-success-subtle); color: var(--c-success-text); }
.kette-status.offen { background: var(--c-warning-subtle); color: var(--c-warning-text); }

@media (min-width: 64rem) {
  .kette-stufe-block { border-bottom: 0; border-inline-end: 1px solid var(--c-border); }
  .kette-stufe-block:last-child { border-inline-end: 0; }
}

/* =============================================================
   10c. Komponenten der Methodikseite
   ============================================================= */

/* Gegenueberstellung: zwei Karten, die eine Aussage kontrastieren */
.gegenueber {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--p-space-4);
  margin: var(--p-space-5) 0;
}
.gegen-karte {
  border: 1px solid var(--c-border);
  border-radius: var(--p-radius-lg);
  padding: var(--p-space-5);
  background: var(--c-surface);
  box-shadow: var(--c-shadow-1);
}
.gegen-karte.schlecht { box-shadow: inset 4px 0 0 var(--c-danger), var(--c-shadow-1); }
.gegen-karte.gut      { box-shadow: inset 4px 0 0 var(--c-success), var(--c-shadow-1); }
.gegen-label {
  font-family: var(--p-font-sans);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: var(--p-text-xs);
  font-weight: 700;
  color: var(--c-muted-foreground);
  margin: 0 0 var(--p-space-2);
}
.gegen-karte.schlecht .gegen-label { color: var(--c-danger-text); }
.gegen-karte.gut      .gegen-label { color: var(--c-success-text); }
.gegen-frage {
  font-family: var(--p-font-head);
  font-size: var(--p-text-md);
  font-weight: 600;
  margin: 0 0 var(--p-space-3);
}
.gegen-text { font-size: var(--p-text-sm); color: var(--c-muted-foreground); margin: 0; }

/* Erlaeuterung der Kuerzel */
.kuerzel-liste { list-style: none; padding: 0; margin: var(--p-space-3) 0; display: grid; gap: var(--p-space-2); }
.kuerzel-liste li { font-size: var(--p-text-sm); }

/* Stufenleiter: die Bewertungsskala an einem echten Beispiel */
.stufenleiter { list-style: none; padding: 0; margin: var(--p-space-5) 0; display: grid; gap: var(--p-space-2); }
.stufenleiter li {
  display: flex;
  align-items: flex-start;
  gap: var(--p-space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--p-radius-md);
  padding: var(--p-space-3) var(--p-space-4);
  background: var(--c-surface);
}
/* Die Fuellung waechst mit der Stufe - der Fortschritt wird sichtbar,
   die Stufennummer steht aber immer als Text daneben. */
.stufenleiter li:nth-child(1) { border-inline-start: 4px solid var(--c-border-strong); }
.stufenleiter li:nth-child(2) { border-inline-start: 8px solid var(--c-border-strong); }
.stufenleiter li:nth-child(3) { border-inline-start: 12px solid var(--c-accent); }
.stufenleiter li:nth-child(4) { border-inline-start: 16px solid var(--c-accent); }
.stufenleiter li:nth-child(5) { border-inline-start: 20px solid var(--c-success); }
.stufenleiter-nr {
  flex: none;
  font-family: var(--p-font-head);
  font-size: var(--p-text-xl);
  font-weight: 600;
  line-height: 1;
  color: var(--c-accent-text);
  font-variant-numeric: tabular-nums;
  min-width: 1.1em;
}
.stufenleiter-name { font-weight: 700; margin: 0 0 var(--p-space-1); font-size: var(--p-text-sm); }
.stufenleiter p:last-child { margin: 0; font-size: var(--p-text-sm); color: var(--c-muted-foreground); }

/* Karten der fuenf Bereiche */
.dimensionskarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--p-space-4);
  margin: var(--p-space-4) 0;
  padding: 0;
  list-style: none;
}
.dim-gewicht {
  float: inline-end;
  font-family: var(--p-font-sans);
  font-size: var(--p-text-sm);
  font-weight: 700;
  color: var(--c-accent-text);
  font-variant-numeric: tabular-nums;
}

/* Drei Faelle eines Beispiels nebeneinander */
.beispielfaelle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--p-space-4);
  margin: var(--p-space-4) 0;
  padding: 0;
  list-style: none;
}
.beispiel-karte {
  border: 1px solid var(--c-border);
  border-radius: var(--p-radius-lg);
  padding: var(--p-space-4);
  background: var(--c-surface);
}
.beispiel-karte.gut { border-color: var(--c-success); background: var(--c-success-subtle); }
.beispiel-karte.aus { border-color: var(--c-warning); background: var(--c-warning-subtle); }
.beispiel-kopf {
  font-size: var(--p-text-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--c-muted-foreground);
  margin: 0 0 var(--p-space-2);
}
.beispiel-zahl {
  font-family: var(--p-font-head);
  font-size: var(--p-text-lg);
  font-weight: 600;
  margin: 0 0 var(--p-space-2);
}
.beispiel-karte > p:last-child { font-size: var(--p-text-sm); color: var(--c-muted-foreground); margin: 0; }
.beispiel-karte.gut > p:last-child { color: var(--c-success-text); }
.beispiel-karte.aus > p:last-child { color: var(--c-warning-text); }

/* Diagramme */
.diagramm { margin: var(--p-space-5) 0; }
.diagramm-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-border);
  border-radius: var(--p-radius-lg);
  background: var(--c-surface);
  padding: var(--p-space-4);
}
.diagramm-scroll svg { display: block; min-width: 30rem; max-width: 100%; height: auto; color: var(--c-foreground); }
.diagramm figcaption {
  font-size: var(--p-text-sm);
  color: var(--c-muted-foreground);
  margin-top: var(--p-space-3);
  max-width: var(--p-measure);
}

/* Traceability-Tabelle: fuenf Textspalten, deshalb breit und in
   ihrem eigenen Rahmen scrollend. Jede Zelle traegt Klartext, die
   Kennung steht als Marke davor. */
.traceability-tabelle { min-width: 62rem; }
.traceability-tabelle th[scope="row"] { width: 17%; font-weight: 400; }
.traceability-tabelle td { vertical-align: top; }
.traceability-tabelle tbody tr:nth-child(odd) { background: var(--c-surface-sunken); }
.spalten-marke {
  display: inline-block;
  margin-inline-start: var(--p-space-1);
  padding: 0 var(--p-space-1);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--p-radius-sm);
  font-size: .9em;
  font-weight: 700;
  color: var(--c-accent-text);
}
.zellenliste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--p-space-1); }
.zelle-klein {
  display: block;
  margin-top: var(--p-space-1);
  font-size: var(--p-text-xs);
  color: var(--c-muted-foreground);
}

/* Rechenweg: die Beitragsspalte traegt die Aussage */
.rechenweg tfoot td, .rechenweg tfoot th { font-weight: 700; }
.rechenweg td:last-child { font-weight: 600; }
.formel-erklaerung { margin-top: var(--p-space-3); }

/* Aufklappbares zum Nachschlagen - Details bleiben erreichbar,
   stehen aber nicht im Weg. */
.nachschlagen {
  border: 1px solid var(--c-border);
  border-radius: var(--p-radius-md);
  background: var(--c-surface-sunken);
  margin: var(--p-space-5) 0;
}
.nachschlagen > summary {
  cursor: pointer;
  padding: var(--p-space-3) var(--p-space-4);
  min-height: var(--p-touch);
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: var(--p-text-sm);
  color: var(--c-accent-text);
  border-radius: var(--p-radius-md);
}
.nachschlagen > summary:hover { background: var(--c-muted); }
.nachschlagen[open] > summary { border-bottom: 1px solid var(--c-border); border-radius: var(--p-radius-md) var(--p-radius-md) 0 0; }
.nachschlagen > *:not(summary) { padding-inline: var(--p-space-4); }
.nachschlagen > *:last-child { padding-bottom: var(--p-space-4); }
.nachschlagen .tabelle-scroll { background: var(--c-surface); }

/* =============================================================
   10b. Komponente: Produktseite
   Steckbriefe, Bewertungsleiter und Produktmatrix.

   Die Werte 0 bis 4 tragen zusaetzlich zur Farbe immer die
   Ziffer selbst und fuer Screenreader den Zusatz "von 4".
   Die Farbe ist Verstaerkung, nie alleiniger Traeger.
   ============================================================= */

.hinweis-fest {
  background: var(--c-accent-subtle);
  border-color: var(--c-accent-border);
  border-left-color: var(--c-accent);
  color: var(--c-foreground);
}
.hinweis-fest .symbol { color: var(--c-accent-text); }
.hinweis-fest p { margin: 0; max-width: var(--p-measure); }

/* --- Bewertungsregel als Leiter --- */
.regelleiter {
  list-style: none;
  padding: 0;
  margin: var(--p-space-4) 0 var(--p-space-5);
  display: grid;
  gap: var(--p-space-2);
  max-width: var(--p-measure);
}
.regelleiter li {
  display: flex;
  gap: var(--p-space-3);
  align-items: flex-start;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--p-radius-md);
  padding: var(--p-space-3);
  font-size: var(--p-text-sm);
}
.regel-wert {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: var(--p-radius-sm);
  background: var(--c-muted);
  color: var(--c-foreground);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.regelleiter li:nth-child(1) .regel-wert { background: var(--c-success); color: var(--c-on-accent); }
.regelleiter li:nth-child(2) .regel-wert { background: var(--c-accent); color: var(--c-on-accent); }
.regelleiter li:nth-child(4) .regel-wert,
.regelleiter li:nth-child(5) .regel-wert { background: var(--c-border-strong); color: var(--c-foreground); }

.segment-anbieter {
  font-size: var(--p-text-sm);
  margin: var(--p-space-3) 0 0 !important;
  color: var(--c-foreground) !important;
  border-top: 1px solid var(--c-border);
  padding-top: var(--p-space-3);
}

/* --- Steckbrief --- */
#anbieter-liste { display: grid; gap: var(--p-space-5); margin-top: var(--p-space-5); }

.anbieterkarte {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--p-radius-lg);
  padding: var(--p-space-5);
  box-shadow: var(--c-shadow-1);
  scroll-margin-top: var(--p-space-6);
}
.anbieter-kopf {
  display: flex;
  gap: var(--p-space-3);
  align-items: flex-start;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: var(--p-space-4);
  margin-bottom: var(--p-space-4);
}
.anbieter-kopf h3 { margin: 0; font-size: var(--p-text-lg); }
.anbieter-hersteller { margin: var(--p-space-1) 0 0; font-size: var(--p-text-sm); color: var(--c-muted-foreground); }
.anbieter-segment {
  margin-inline-start: auto;
  flex: none;
  background: var(--c-accent-subtle);
  color: var(--c-accent-text);
  border: 1px solid var(--c-accent-border);
  border-radius: var(--p-radius-sm);
  padding: var(--p-space-1) var(--p-space-3);
  font-size: var(--p-text-xs);
  font-weight: 700;
}

.anbieter-fakten { margin: 0 0 var(--p-space-4); display: grid; gap: var(--p-space-3); }
.anbieter-fakten > div { display: grid; gap: var(--p-space-1); }
.anbieter-fakten dt {
  font-size: var(--p-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-muted-foreground);
}
.anbieter-fakten dd { margin: 0; font-size: var(--p-text-sm); max-width: var(--p-measure); }

.anbieter-spalten { display: grid; gap: var(--p-space-4); }
.anbieter-spalte h4 { margin: 0 0 var(--p-space-2); font-size: var(--p-text-base); }
.spalte-text { font-size: var(--p-text-sm); color: var(--c-muted-foreground); margin: 0 0 var(--p-space-3); }

.wertliste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--p-space-2); }
.wertliste li {
  display: flex;
  gap: var(--p-space-2);
  align-items: baseline;
  font-size: var(--p-text-sm);
  flex-wrap: wrap;
}
.wert-punkt {
  flex: none;
  align-self: flex-start;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--p-radius-sm);
  font-weight: 700;
  font-size: var(--p-text-xs);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--c-border-strong);
}

/* Werteskala: dieselbe Zuordnung in Liste und Matrix */
.wert-punkt.wert-4, td.wert-4 { background: var(--c-success-subtle); color: var(--c-success-text); }
.wert-punkt.wert-3, td.wert-3 { background: var(--c-accent-subtle);  color: var(--c-accent-text); }
.wert-punkt.wert-2, td.wert-2 { background: var(--c-muted);          color: var(--c-foreground); }
.wert-punkt.wert-1, td.wert-1 { background: var(--c-warning-subtle); color: var(--c-warning-text); }
.wert-punkt.wert-0, td.wert-0 { background: var(--c-danger-subtle);  color: var(--c-danger-text); }

.konzernhinweis {
  margin: var(--p-space-4) 0 0;
  padding: var(--p-space-3) var(--p-space-4);
  background: var(--c-warning-subtle);
  border: 1px solid var(--c-warning-border);
  border-left: 4px solid var(--c-warning);
  border-radius: var(--p-radius-md);
  color: var(--c-warning-text);
  font-size: var(--p-text-sm);
  max-width: var(--p-measure);
}

.anbieter-fuss { margin-top: var(--p-space-4); border-top: 1px solid var(--c-border); padding-top: var(--p-space-4); }
.anbieter-link { margin: 0 0 var(--p-space-3); font-weight: 700; }
/* Zielgroesse nach WCAG 2.2 (2.5.8): Diese Verweise stehen als
   eigene Listenzeile und nicht im Fliesstext, die Ausnahme fuer
   Verweise im Satz greift hier also nicht. Mit der Innenabstand-
   Zugabe erreicht jeder Verweis die geforderten 24 Pixel Hoehe. */
.anbieter-link a, .quellenliste a {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-1);
  min-height: 24px;
  padding-block: 2px;
}
.quellenliste { margin: var(--p-space-3) 0 0; padding-inline-start: var(--p-space-5); font-size: var(--p-text-sm); }
.quellenliste li { margin-bottom: var(--p-space-2); }

/* --- Produktmatrix --- */
.produktmatrix { min-width: 60rem; }
.produktmatrix th[scope='row'] { width: 26%; font-weight: 400; }
.produktmatrix tbody tr:nth-child(odd) { background: var(--c-surface-sunken); }
.produktmatrix th.dreh { font-size: var(--p-text-xs); vertical-align: bottom; line-height: 1.25; }
td.wertzelle {
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  width: 4.2rem;
}

@media (min-width: 48rem) {
  .anbieter-fakten { grid-template-columns: repeat(3, 1fr); gap: var(--p-space-4); }
  .anbieter-spalten { grid-template-columns: 1fr 1fr; gap: var(--p-space-5); }
}

/* =============================================================
   10c. Komponente: Entwicklerseite Unternehmensbeispiele
   ============================================================= */

.beispieltabelle { min-width: 72rem; }
.beispieltabelle th[scope='row'] { width: 15%; font-weight: 400; }
.beispieltabelle td { vertical-align: top; }
.beispieltabelle tbody tr:nth-child(odd) { background: var(--c-surface-sunken); }

.ausgang {
  display: inline-block;
  font-weight: 700;
  font-size: var(--p-text-xs);
  border-radius: var(--p-radius-sm);
  padding: var(--p-space-1) var(--p-space-2);
  border: 1px solid transparent;
}
.ausgang.ok      { background: var(--c-success-subtle); color: var(--c-success-text); border-color: var(--c-success-border); }
.ausgang.warnung { background: var(--c-warning-subtle); color: var(--c-warning-text); border-color: var(--c-warning-border); }
.ausgang.stop    { background: var(--c-danger-subtle);  color: var(--c-danger-text);  border-color: var(--c-danger-border); }

.beispiel-knopf { white-space: nowrap; font-size: var(--p-text-sm); padding-block: var(--p-space-2); }

.grenzen-liste {
  color: var(--c-muted-foreground);
  font-size: var(--p-text-sm);
  max-width: var(--p-measure);
  padding-inline-start: var(--p-space-5);
}
.grenzen-liste li { margin-bottom: var(--p-space-3); }
.grenzen-liste strong { color: var(--c-foreground); }

.eingabe-dims { display: grid; gap: var(--p-space-4); margin: var(--p-space-4) 0; }
.eingabe-dim h4 { margin: 0 0 var(--p-space-2); font-size: var(--p-text-sm); }
.eingabe-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--p-space-2); }
.eingabe-liste li {
  display: flex;
  align-items: center;
  gap: var(--p-space-2);
  font-size: var(--p-text-xs);
  flex-wrap: wrap;
}
.beleg-marke {
  background: var(--c-success-subtle);
  color: var(--c-success-text);
  border: 1px solid var(--c-success-border);
  border-radius: var(--p-radius-sm);
  padding: 0 var(--p-space-2);
  font-weight: 700;
}
.trenner { border: 0; border-top: 1px solid var(--c-border); margin: var(--p-space-6) 0; }

@media (min-width: 48rem) {
  .eingabe-dims { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}

/* =============================================================
   11. Komponente: Fusszeile
   ============================================================= */

.fuss {
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-sunken);
  padding-block: var(--p-space-6);
  margin-top: var(--p-space-7);
}
.fuss p { margin: 0 0 var(--p-space-1); font-size: var(--p-text-sm); }

/* =============================================================
   12. Haltepunkte: 375 / 768 / 1024 / 1440
   ============================================================= */

@media (min-width: 48rem) {          /* 768px */
  .inhalt { padding-inline: var(--p-space-5); }
  .held h1 { font-size: var(--p-text-4xl); }
  h1 { font-size: var(--p-text-2xl); }
}

@media (min-width: 64rem) {          /* 1024px */
  .inhalt { padding-inline: var(--p-space-6); }
  .abschnitt { padding-block: var(--p-space-8); }
}

@media (max-width: 30rem) {          /* unter 480px */
  .marke-lang { display: none; }
  .held { padding-block: var(--p-space-6) var(--p-space-6); }
  .held h1 { font-size: var(--p-text-xl); }
  .knopfreihe .knopf { width: 100%; }
  .dimension-gewicht { margin-inline-start: 0; }
}

/* =============================================================
   12a. Corporate-Ebene
   Linien statt Karten, eine Schrift, klare Kanten. Liegt
   bewusst ueber den Komponenten, damit diese unveraendert
   bleiben und nur ihr Erscheinungsbild wechselt.
   ============================================================= */

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.01em; }
h1 { letter-spacing: -.02em; }

/* --- Kopfzeile: Akzentlinie, Wortmarke, Unterstrich-Navigation --- */
.kopf { border-top: 3px solid var(--c-accent); }
.marke-kurz {
  background: none;
  color: var(--c-foreground);
  font-size: var(--p-text-lg);
  letter-spacing: .06em;
  padding: 0 var(--p-space-3) 0 0;
  border-right: 1px solid var(--c-border-strong);
  border-radius: 0;
}
.hauptnavigation { gap: var(--p-space-1); align-self: stretch; }
.hauptnavigation a { border-radius: 0; min-height: 4rem; }
.hauptnavigation a:hover {
  background: none;
  color: var(--c-foreground);
  box-shadow: inset 0 -2px 0 var(--c-border-strong);
}
.hauptnavigation a[aria-current='page'] {
  background: none;
  color: var(--c-foreground);
  box-shadow: inset 0 -2px 0 var(--c-accent);
}

/* --- Dachzeile: ruhige Auszeichnung statt gesperrter Versalien --- */
.augenbraue {
  display: flex;
  align-items: center;
  gap: var(--p-space-3);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--p-text-sm);
}
.augenbraue::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--c-accent);
  flex: none;
}

/* --- Einstieg --- */
.held { padding-block: var(--p-space-8); }
.held h1 { max-width: 22ch; line-height: 1.1; }
.held-fuss { border-top: 1px solid var(--c-border); padding-top: var(--p-space-4); max-width: var(--p-measure); }

/* --- Knoepfe: flach --- */
.knopf.primaer, .knopf.primaer:hover { box-shadow: none; }

/* --- Kennzahlen: Zahlenleiste mit Oberlinie statt Karten --- */
.kacheln { gap: var(--p-space-5) var(--p-space-6); }
.kachel {
  background: none;
  border: 0;
  border-top: 2px solid var(--c-accent);
  border-radius: 0;
  box-shadow: none;
  padding: var(--p-space-4) 0 0;
}
.kachel .zahl { font-weight: 700; letter-spacing: -.03em; }

/* --- Ablauf: nummerierte Spalten mit Linie --- */
.ablauf { gap: var(--p-space-5) var(--p-space-6); }
.ablauf li {
  background: none;
  border: 0;
  border-top: 1px solid var(--c-border-strong);
  border-radius: 0;
  box-shadow: none;
  padding: var(--p-space-4) 0 0;
}
.ablauf-nr {
  width: auto; height: auto;
  background: none;
  color: var(--c-accent-text);
  border-radius: 0;
  letter-spacing: .04em;
}

/* --- Hinweise: schmale Kante --- */
.hinweis { border-left-width: 3px; }

/* --- Personenkacheln (Vorstellung): einzige echte Karten --- */
.person-kachel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 2px solid var(--c-accent);
  padding: 0;
  transition: border-color var(--p-dur-instant) var(--p-ease-out);
}
.person-kachel:hover { border-color: var(--c-border-strong); border-top-color: var(--c-accent); }
.person-name { font-weight: 700; }

/* --- Fusszeile: dunkles Band --- */
.fuss {
  background: var(--c-band);
  color: var(--c-on-band);
  border-top: 0;
  padding-block: var(--p-space-7);
}
.fuss .klein { color: var(--c-on-band-muted); }

/* Fusszeile auch auf kurzen Seiten am unteren Rand */
body { display: flex; flex-direction: column; min-height: 100vh; }
#hauptinhalt { flex: 1 0 auto; }

@media (max-width: 48rem) {
  .kopf-inhalt { gap: 0; min-height: 3.5rem; }
  /* Navigation als eine Zeile, seitlich verschiebbar statt umbrechend */
  .hauptnavigation {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    width: calc(100% + 2 * var(--p-space-4));
    margin-inline: calc(-1 * var(--p-space-4));
    padding-inline: var(--p-space-2);
    border-top: 1px solid var(--c-border);
  }
  .hauptnavigation::-webkit-scrollbar { display: none; }
  .hauptnavigation a { min-height: var(--p-touch); white-space: nowrap; flex: none; }
}
@media (max-width: 30rem) {
  .marke-kurz { border-right: 0; padding-right: 0; }
  .held h1 { font-size: var(--p-text-2xl); }
}

/* =============================================================
   13. Druck
   ============================================================= */

@media print {
  .kopf, .fortschritt-leiste, .fuss, .nicht-drucken, .sprungmarke { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .ergebnisblock, .empfehlung, .frage { break-inside: avoid; }
  .matrix { min-width: 0; }
  .tabelle-scroll { overflow: visible; border: none; }
  a { text-decoration: none; color: #000; }
}

/* Vorstellung: Personenkacheln und Unterseiten */
.person-kachel { padding: 0; }
.person-link {
  display: block;
  padding: var(--p-space-5);
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
}
.person-link:hover .person-name,
.person-link:focus-visible .person-name { color: var(--c-accent-text); }
.person-name {
  font-family: var(--p-font-head);
  font-size: var(--p-text-xl);
  font-weight: 600;
}
.zurueck { margin: 0 0 var(--p-space-4); font-size: var(--p-text-sm); }

/* Abbildungen in den Vorstellungen */
.abbildung { margin: var(--p-space-6) 0 0; max-width: 40rem; }
.abbildung img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}
.abbildung figcaption {
  margin-top: var(--p-space-3);
  font-size: var(--p-text-sm);
  color: var(--c-muted-foreground);
}

/* =============================================================
   15. Erweiterungen nach der Arbeit (Kurz-Check, Prioritäten,
       Beispiel-Check für den Vortrag)
   ============================================================= */

/* Antwortmöglichkeit "ungeklärt" optisch abgesetzt */
.stufe-offen { border-style: dashed; }
.stufe-offen .stufe-nr { color: var(--c-muted-foreground); }

/* Prioritäten nebeneinander */
.optionen-reihe { display: flex; flex-wrap: wrap; gap: var(--p-space-2); }
.optionen-reihe .option { flex: 1 1 8rem; }

/* Entfallene bedingte Anforderung */
.frage.entfallen { opacity: .55; }
.frage.entfallen .optionen { pointer-events: none; }
.fest-muss { margin: 0 0 var(--p-space-5); }

/* Muss-Lücke in der Bewertungsmatrix */
.matrix td.muss-luecke {
  background: var(--c-danger-subtle);
  color: var(--c-danger-text);
  font-weight: 700;
}

/* Kriterien, die nur zur Langfassung gehören */
.nur-lang { color: var(--c-muted-foreground); }

/* ---------- Beispiel-Check und Vortrag ---------- */
.beispiel-check { margin-top: var(--p-space-7); }
.beispiel-kopf-box {
  border-top: 2px solid var(--c-accent);
  background: var(--c-surface);
  border-inline: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: var(--p-space-5);
  margin-bottom: var(--p-space-6);
}
.beispiel-kopf-box h2 { margin-top: 0; }
.beispiel-kopf-box p { max-width: var(--p-measure); }
.beispiel-teil {
  margin: var(--p-space-7) 0 var(--p-space-4);
  padding-top: var(--p-space-4);
  border-top: 1px solid var(--c-border-strong);
}

.vortrag-markiert {
  border-left: 3px solid var(--c-warning);
  background: var(--c-warning-subtle);
  padding: var(--p-space-4);
  margin-bottom: var(--p-space-5);
}
.vortrag-markiert > .ergebnisblock:last-child,
.vortrag-markiert > .empfehlung:last-child { margin-bottom: 0; }
.vortrag-notiz {
  display: flex; align-items: flex-start; gap: var(--p-space-2);
  color: var(--c-warning-text);
  font-size: var(--p-text-sm);
  margin: 0 0 var(--p-space-3);
}
.vortrag-notiz .symbol { flex: none; margin-top: .15em; }

.kernpunkte { margin: 0; padding-inline-start: var(--p-space-5); display: grid; gap: var(--p-space-3); }
.kernpunkte li { max-width: var(--p-measure); }

.ausgefuellt-liste { list-style: none; padding: 0; margin: 0 0 var(--p-space-5); display: grid; gap: var(--p-space-3); }
.ausgefuellt {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  padding: var(--p-space-4);
}
.ausgefuellt.vortrag-markiert { border-left: 3px solid var(--c-warning); background: var(--c-warning-subtle); margin: 0; }
.ausgefuellt p { margin: 0 0 var(--p-space-2); }
.ausgefuellt p:last-child { margin-bottom: 0; }
.ausgefuellt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--p-space-2); }
.ausgefuellt-wert {
  margin-inline-start: auto;
  font-weight: 700;
  color: var(--c-accent-text);
  white-space: nowrap;
}
.ausgefuellt-antwort {
  border-left: 2px solid var(--c-accent);
  padding-left: var(--p-space-3);
}
.ausgefuellt .wechselliste { margin: var(--p-space-2) 0 0; }