/* ============================================================
   Propa — Brand Layer: Design Tokens & Komponenten-CSS
   Datei: propa-brand.css  ·  Stand: 2026-08  ·  Quelle: "Propa Brand.dc.html"
   Kollisionsfrei neben einer bestehenden assets/css/propa.css:
   alle Selektoren und Variablen sind mit .propa- / --propa- gepraefixt.
   Ladereihenfolge: propa.css zuerst, propa-brand.css danach.
   Font: Inter Tight (500 = Standardgewicht der Marke)
   <link rel="stylesheet"
     href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&display=swap">
   ============================================================ */

:root {
  /* Grund */
  --propa-paper:      #EFECE4;  /* Papierton, Seitenhintergrund */
  --propa-ink:        #2C2C2A;  /* Tinte, Primärtext, Marker */
  --propa-ink-2:      #444441;  /* Sekundärtext (Labels in Karten) */
  --propa-ink-3:      #5F5E5A;  /* Tertiärtext (Fließtext, Meta) */
  --propa-ink-4:      #8A887F;  /* Quartär (Ticks, Monospace-Kapitälchen) */

  /* Zonenfarben = Markenfarben */
  --propa-red:        #E24B4A;  /*  0–44  */
  --propa-amber:      #EF9F27;  /* 45–64  */
  --propa-green:      #97C459;  /* 65–79  */
  --propa-forest:     #3B6D11;  /* 80–100 */
  --propa-amber-text: #854F0B;  /* Amber als Text (AA-tauglich auf Glas) */
  --propa-red-text:   #B03432;  /* Rot als Text; Wert aus propa-tokens.json zones[0].text */

  /* Weiche Farbfelder hinter dem Glas */
  --propa-teal-wash:  #9FE1CB;
  --propa-amber-wash: #FAC775;

  /* Glas */
  --propa-glass-bg:     rgba(255,255,255,0.55);
  --propa-glass-bg-2:   rgba(255,255,255,0.50); /* sekundäre Karte */
  --propa-glass-border: rgba(255,255,255,0.75);
  --propa-glass-blur:   blur(24px) saturate(140%);
  --propa-glass-inner:  inset 0 1px 0 rgba(255,255,255,0.9);
  --propa-glass-shadow: 0 8px 24px -16px rgba(44,44,42,0.35);

  /* Radien */
  --propa-r-shell: 32px;  /* äußere Karten-Hülle mit Farbfeldern */
  --propa-r-card:  26px;  /* Glaskarte */
  --propa-r-card-2:22px;  /* sekundäre Glaskarte */
  --propa-r-pill:  99px;

  /* Typo */
  --propa-font: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --propa-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Dark */
  --propa-dark-bg:     #1E1E1C;
  --propa-dark-ink:    #F2EFE7;
  --propa-dark-ink-3:  #A5A39B;
  --propa-dark-ink-4:  #7C7A73;
  --propa-dark-glass:  rgba(255,255,255,0.08);
  --propa-dark-border: rgba(255,255,255,0.14);
}

/* ---------- Basis ----------
   Alle Propa-Boxen rechnen in border-box: die angegebenen Breiten sind
   Außenmaße, unabhängig vom Reset des Host-Projekts. */
.propa-shell, .propa-glass, .propa-glass--secondary, .propa-sub__track,
.propa-scale__marker, .propa-sub__dot, .propa-mark, .propa-btn { box-sizing: border-box; }

body.propa {
  margin: 0;
  background: var(--propa-paper);
  color: var(--propa-ink);
  font-family: var(--propa-font);
  -webkit-font-smoothing: antialiased;
}
.propa-eyebrow {
  font-family: var(--propa-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--propa-ink-4);
}

/* ---------- Wortmarke ----------
   Markup:
   <span class="propa-logo"><span>pr</span><span class="propa-o">o<i></i></span><span>pa</span></span>
   Punktgröße = 0.165em, optisches Zentrum bei top:55%.            */
.propa-logo {
  display: inline-flex; align-items: baseline;
  font-family: var(--propa-font); font-weight: 500;
  letter-spacing: -.03em; line-height: 1; color: currentColor;
}
.propa-logo .propa-o { position: relative; display: inline-block; }
.propa-logo .propa-o > i {
  position: absolute; left: 50%; top: 55%;
  transform: translate(-50%, -50%);
  width: .165em; height: .165em; border-radius: 50%;
  background: currentColor;              /* NIE in Zonenfarbe einfärben */
}
/* Ab ≤24px Schriftgrad Tracking auf -.02em zurücknehmen: */
.propa-logo--sm { letter-spacing: -.02em; }

/* ---------- Bildzeichen / App-Icon ---------- */
.propa-mark {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--propa-ink); color: var(--propa-paper);
  width: 64px; height: 64px; border-radius: 16px;   /* Radius = 25% der Kante */
}
.propa-mark > span {
  position: relative; display: inline-block; line-height: 1;
  font-family: var(--propa-font); font-weight: 500;
  font-size: .65em;                       /* relativ zur Icon-Kante setzen */
}
.propa-mark > span > i {
  position: absolute; left: 50%; top: 57%; transform: translate(-50%,-50%);
  width: .17em; height: .17em; border-radius: 50%; background: currentColor;
}
.propa-mark--paper { background: var(--propa-paper); color: var(--propa-ink);
  border: 1px solid rgba(44,44,42,.14); }

/* ---------- Glas ---------- */
.propa-shell {
  position: relative; overflow: hidden;
  background: var(--propa-paper); border-radius: var(--propa-r-shell);
  padding: 26px 22px 24px;
  box-shadow: 0 1px 2px rgba(44,44,42,.05), 0 24px 60px -28px rgba(44,44,42,.28);
}
/* Farbfelder: immer zwei, diagonal versetzt, blur(2px) gegen Banding */
.propa-shell__wash { position: absolute; border-radius: 50%; filter: blur(2px); }
.propa-shell__wash--teal  { width:260px; height:260px; background: var(--propa-teal-wash);
  opacity:.55; top:-86px; right:-72px; }
.propa-shell__wash--amber { width:210px; height:210px; background: var(--propa-amber-wash);
  opacity:.42; bottom:-70px; left:-62px; }

.propa-glass {
  position: relative;
  background: var(--propa-glass-bg);
  backdrop-filter: var(--propa-glass-blur);
  -webkit-backdrop-filter: var(--propa-glass-blur);
  border: 1px solid var(--propa-glass-border);
  border-radius: var(--propa-r-card);
  padding: 22px;
  box-shadow: var(--propa-glass-inner), var(--propa-glass-shadow);
}
.propa-glass--secondary {
  background: var(--propa-glass-bg-2);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-color: rgba(255,255,255,.68);
  border-radius: var(--propa-r-card-2);
  padding: 18px 22px 20px; margin-top: 14px;
  box-shadow: var(--propa-glass-inner);
}

/* ---------- Score-Kopf ---------- */
.propa-card__head { display:flex; justify-content:space-between; align-items:center;
  margin-bottom:10px; }
.propa-card__label { font-size:13px; letter-spacing:.03em; color: var(--propa-ink-3); }
.propa-badge {
  font-size:11px; padding:3px 11px; border-radius: var(--propa-r-pill);
  color:#085041; background: rgba(157,225,203,.5); border:1px solid rgba(29,158,117,.28);
}
.propa-badge--capped { color:#7A4A05; background: rgba(250,199,117,.5);
  border-color: rgba(239,159,39,.35); }

.propa-score { display:flex; align-items:baseline; gap:11px; }
.propa-score__value { font-size:58px; font-weight:500; letter-spacing:-.035em;
  line-height:1; color: var(--propa-ink); font-variant-numeric: tabular-nums; }
.propa-score__verdict { font-size:14px; font-weight:500; line-height:1.3; }

/* ---------- Skala (kein Ring!) ---------- */
.propa-scale { margin-top:22px; position:relative; height:36px; }
.propa-scale__track { display:flex; height:11px; border-radius: var(--propa-r-pill);
  overflow:hidden; }
.propa-scale__zone--red    { width:45%; background: var(--propa-red); }
.propa-scale__zone--amber  { width:20%; background: var(--propa-amber); }
.propa-scale__zone--green  { width:15%; background: var(--propa-green); }
.propa-scale__zone--forest { width:20%; background: var(--propa-forest); }

/* left: <score>% — die Skala ist linear 0–100 */
.propa-scale__marker {
  position:absolute; top:-7px; transform:translateX(-50%);
  width:9px; height:25px; border-radius: var(--propa-r-pill);   /* Außenmaß inkl. Rand */
  background:#FFF; border:1.5px solid var(--propa-ink);
  box-shadow:0 2px 6px rgba(44,44,42,.35);
}
.propa-scale__ticks { position:absolute; left:0; right:0; top:18px; height:16px;
  font-size:11px; color: var(--propa-ink-4); font-variant-numeric: tabular-nums; }
.propa-scale__ticks > span { position:absolute; transform:translateX(-50%); }
.propa-scale__ticks > span:first-child { left:0; transform:none; }
.propa-scale__ticks > span:last-child  { left:auto; right:0; transform:none; }

.propa-card__foot { margin-top:14px; padding-top:13px;
  border-top:1px solid rgba(44,44,42,.1);
  font-size:12px; color: var(--propa-ink-3);
  display:flex; justify-content:space-between; gap:12px; }

/* ---------- Teilbewertungen ---------- */
.propa-subs { display:flex; flex-direction:column; gap:12px; }
.propa-sub  { display:flex; align-items:center; gap:12px; }
.propa-sub__name  { width:82px; font-size:12px; color: var(--propa-ink-2); }
.propa-sub__track { flex:1; height:5px; border-radius: var(--propa-r-pill);
  background: rgba(44,44,42,.09); position:relative; }
.propa-sub__dot   { position:absolute; top:-5.5px; transform:translateX(-50%);
  width:16px; height:16px; border-radius:50%; border:2px solid #FFF;   /* Außenmaß inkl. Rand */
  box-shadow:0 1px 3px rgba(44,44,42,.28); }   /* left:<wert>%, background:Zonenfarbe */
.propa-sub__value { width:22px; text-align:right; font-size:12px; font-weight:500;
  color: var(--propa-ink); font-variant-numeric: tabular-nums; }

/* ---------- Knockout / gedeckelt ---------- */
/* Das Schloss sitzt 30px über der Skala — der Standard-Vorlauf von 22px reicht
   dafür nicht und kollidiert mit der verbalen Einordnung. */
.propa-scale--capped { margin-top: 46px; }
.propa-scale--capped .propa-scale__zone--dim { opacity:.22; }
.propa-cap__line { position:absolute; top:-11px; bottom:14px; width:1px;
  border-left:1.5px dashed rgba(44,44,42,.45); }        /* left:<cap>% */
.propa-cap__lock { position:absolute; top:-30px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; }
.propa-cap__lock::before { content:""; width:8px; height:6px;
  border:1.5px solid var(--propa-ink); border-bottom:none; border-radius:5px 5px 0 0; }
.propa-cap__lock::after  { content:""; width:14px; height:10px; border-radius:3px;
  background: var(--propa-ink); }

/* ---------- Paywall-Teaser ---------- */
.propa-locked { filter: blur(4.5px); opacity:.75; user-select:none; pointer-events:none; }

/* ---------- Buttons ---------- */
.propa-btn { display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--propa-font); font-size:14px; font-weight:500;
  color: var(--propa-paper); background: var(--propa-ink);
  padding:11px 22px; border:0; border-radius: var(--propa-r-pill);
  cursor:pointer; transition: background .15s ease, transform .15s ease; }
.propa-btn:hover  { background:#3D3D3A; }
.propa-btn:active { transform: translateY(1px); }
.propa-btn--sm { font-size:12.5px; padding:9px 16px; }
.propa-btn--ghost { background: transparent; color: var(--propa-ink);
  border:1px solid rgba(44,44,42,.18); }

/* ---------- Links ---------- */
a.propa-link { color: var(--propa-forest); text-decoration: none; }
a.propa-link:hover { color: var(--propa-ink); text-decoration: underline;
  text-underline-offset: 3px; }

/* ---------- Dark Mode ---------- */
.propa-dark { background: var(--propa-dark-bg); color: var(--propa-dark-ink); }
.propa-dark .propa-glass {
  background: var(--propa-dark-glass); border-color: var(--propa-dark-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.propa-dark .propa-card__label { color: var(--propa-dark-ink-3); }
.propa-dark .propa-score__value { color: var(--propa-dark-ink); }
.propa-dark .propa-scale__ticks { color: var(--propa-dark-ink-4); }
.propa-dark .propa-scale__marker { background: var(--propa-dark-ink);
  border-color: var(--propa-dark-bg); box-shadow:0 2px 8px rgba(0,0,0,.6); }
.propa-dark .propa-card__foot { border-top-color: rgba(255,255,255,.12);
  color: var(--propa-dark-ink-3); }
.propa-dark .propa-badge { color:#9FE1CB; background: rgba(157,225,203,.14);
  border-color: rgba(157,225,203,.28); }
.propa-dark .propa-shell__wash--teal  { background:#1D9E75; opacity:.35; }
.propa-dark .propa-shell__wash--amber { background:#B57A15; opacity:.30; }

/* ---------- Print (Report-PDF) ----------
   Backdrop-Filter druckt nicht zuverlässig → Glas wird zu Papier + feiner Linie. */
@media print {
  .propa-shell { box-shadow:none; border:1px solid rgba(44,44,42,.14);
    break-inside: avoid; }
  .propa-shell__wash { display:none; }
  .propa-glass, .propa-glass--secondary {
    background:#FFF; backdrop-filter:none; -webkit-backdrop-filter:none;
    border:1px solid rgba(44,44,42,.12); box-shadow:none; break-inside: avoid; }
  .propa-locked { filter:none; }
  .propa-btn { display:none; }
  body.propa { background:#FFF; }
}

/* ============================================================
   Ergänzungen bei der Integration (12.08.2026)
   Das Referenz-Markup in propa-components.html drückt diese Teile nur als
   Inline-Styles aus. Da im Projekt weder in HTML noch in JS harte Werte
   stehen dürfen, sind sie hier als Klassen nachgezogen — Werte unverändert
   aus der Referenz bzw. aus PROPA-BRAND.md übernommen.
   ============================================================ */

/* §7: Score-Karte ist Fixbreite 332–372 px, kein Fluid-Element.
   Unter 640 px volle Breite, aber nie über 372 px. */
.propa-shell { width: 372px; max-width: 100%; }

/* Die Farbfelder laufen über den Kartenrand hinaus und werden von der Hülle
   beschnitten (§2). Das backdrop-filter der Glaskarte hebt die Inhalte in
   eigene Compositing-Layer — abgerundetes overflow:hidden greift dort in
   Chromium nicht zuverlässig. clip-path erzwingt den Beschnitt. */
.propa-shell { clip-path: inset(0 round var(--propa-r-shell)); isolation: isolate; }

/* §4 Produkt-Lockup: Wortmarke + „score" in --propa-ink-4, auf der Grundlinie
   ausgerichtet, 7 px Abstand. Ersetzt überall den gesetzten Text „Propa Score". */
.propa-lockup { display: inline-flex; align-items: baseline; gap: 7px; }
.propa-lockup .propa-logo { font-size: 22px; color: var(--propa-ink); }
.propa-lockup__product { font-size: 12px; font-weight: 500; color: var(--propa-ink-4); }
.propa-dark .propa-lockup .propa-logo { color: var(--propa-dark-ink); }
.propa-dark .propa-lockup__product { color: var(--propa-dark-ink-4); }

/* Dunkle Fassung der Karte: die Hülle trägt den dunklen Grund, damit das Glas
   darauf funktioniert (so auch in propa-components.html gesetzt). */
.propa-dark .propa-shell {
  background: var(--propa-dark-bg);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.6);
}

/* Zonenfarbe als Textfarbe — als Klasse, nicht inline, damit der dunkle Modus
   sie überschreiben kann. Auf Papier gelten die dunklen Lesbarkeitsvarianten,
   auf dunklem Grund die aufgehellten aus propa-components.html. */
.propa-zone--red { color: var(--propa-red-text); }
.propa-zone--amber { color: var(--propa-amber-text); }
.propa-zone--green,
.propa-zone--forest { color: var(--propa-forest); }
.propa-dark .propa-zone--red { color: #F08A88; }
.propa-dark .propa-zone--amber { color: #F0B45C; }
.propa-dark .propa-zone--green,
.propa-dark .propa-zone--forest { color: #B7D98A; }

/* Teaser-Kopf ohne Modus-Badge */
.propa-card__label--solo { display: block; margin-bottom: 10px; }

/* Überschrift der sekundären Karte */
.propa-subs__title { font-size: 12px; color: var(--propa-ink-3); margin-bottom: 14px; }

/* Fußzeile: Auszeichnung nie fett, Markengewicht bleibt 500.
   Ohne die dunkle Fassung stünde „hoch" in Tinte auf dunklem Grund — unsichtbar.
   :not([class]) trifft nur die Konfidenz; der Zweitwert trägt eine Zonenklasse
   und behält seine Zonenfarbe, die dort Bedeutung transportiert. */
.propa-card__foot b { font-weight: 500; }
.propa-card__foot b:not([class]) { color: var(--propa-ink); }
.propa-dark .propa-card__foot b:not([class]) { color: var(--propa-dark-ink); }
.propa-dark .propa-subs__title { color: var(--propa-dark-ink-3); }
.propa-dark .propa-sub__name { color: var(--propa-dark-ink-3); }
.propa-dark .propa-sub__value { color: var(--propa-dark-ink); }
.propa-dark .propa-sub__track { background: rgba(255, 255, 255, 0.12); }
.propa-dark .propa-sub__dot { border-color: var(--propa-dark-bg); }
.propa-card__foot--block { display: block; line-height: 1.5; }

/* Teaser-Skala ohne Tick-Labels */
.propa-scale--noticks { height: 25px; margin-top: 20px; }

/* Paywall-Zeile unter den unscharfen Teilbewertungen */
.propa-glass--secondary { overflow: hidden; }
.propa-paywall {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(44,44,42,.1);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.propa-paywall__text { font-size: 12px; color: var(--propa-ink-3); line-height: 1.4; }

/* Beschriftungen sind kurze Verben — sie brechen nie um */
.propa-btn { white-space: nowrap; text-decoration: none; }

/* §6 fordert einen Fallback, das CSS hatte ihn nicht: ohne backdrop-filter
   wäre das Glas nahezu unsichtbar und die Zahlen stünden auf den Farbfeldern. */
@supports not (backdrop-filter: blur(1px)) {
  .propa-glass, .propa-glass--secondary { background: rgba(255, 255, 255, 0.86); }
  .propa-dark .propa-glass, .propa-dark .propa-glass--secondary { background: rgba(40, 40, 38, 0.88); }
}

/* §10: Fokusring nie entfernen */
.propa-btn:focus-visible, a.propa-link:focus-visible {
  outline: 2px solid var(--propa-ink); outline-offset: 2px;
}

/* ---------- Motion ---------- */
@keyframes propa-marker-in {
  from { left: 0%; opacity: 0; }
  to   { opacity: 1; }
}
.propa-scale__marker--animate {
  animation: propa-marker-in .9s cubic-bezier(.22,.61,.36,1) both;
}
@media (prefers-reduced-motion: reduce) {
  .propa-scale__marker--animate { animation: none; }
}

/* Gesperrte Teilbewertung: Spur bleibt, Punkt und Zahl fehlen. */
.propa-sub--zu .propa-sub__track { opacity: 0.45; }
.propa-sub--zu .propa-sub__name { opacity: 0.6; }
.propa-sub--zu .propa-sub__value { opacity: 0.4; letter-spacing: 0.08em; }