/* ==========================================================================
   BuyProof Design-System
   --------------------------------------------------------------------------
   Eine Datei, ein System. Alles Sichtbare - Website, Kontobereich, geteilte
   Funde - benutzt diese Tokens. Wer eine Farbe ändern will, ändert sie hier
   und nirgends sonst.

   Keine externe Ressource: keine Schriftart von fremden Servern, kein
   Icon-CDN, kein Framework. Das ist gleichzeitig Ladezeit und Datenschutz.

   Dark/Light kommt über prefers-color-scheme. Nur die Tokens wechseln, die
   Regeln darunter bleiben gleich - das ist der ganze Trick und der Grund,
   warum es keine zusätzliche Komplexität kostet.
   ========================================================================== */

:root{
  /* -- Farbe: Fläche und Text ------------------------------------------- */
  --bg:              #f6f7f9;
  --surface:         #ffffff;
  --surface-2:       #f0f2f5;
  --line:            #e2e6ec;
  --line-strong:     #cbd2dc;
  --text:            #131922;
  --text-muted:      #5c6674;
  --text-faint:      #8b94a3;

  /* -- Farbe: Marke ------------------------------------------------------ */
  --accent:          #1f5eff;
  --accent-hover:    #1a4fd6;
  --accent-soft:     #e8efff;
  --on-accent:       #ffffff;

  /* -- Farbe: Status -----------------------------------------------------
     Vier Bedeutungen, nicht mehr. Jede hat eine Fläche und eine Schrift,
     damit ein Zustand nie nur an der Farbe hängt - daneben steht immer ein
     Wort. Farbe allein schließt aus, wer sie nicht unterscheiden kann. */
  --ok:              #17803d;
  --ok-soft:         #e7f6ec;
  --info:            #1f5eff;
  --info-soft:       #e8efff;
  --warn:            #9a6400;
  --warn-soft:       #fdf3e2;
  --unknown:         #5c6674;
  --unknown-soft:    #eef0f3;

  /* -- Vertrauensstufen --------------------------------------------------
     Eigene Tokens, weil sie etwas anderes bedeuten als Status: Sie sagen,
     wie sicher eine Aussage ist, nicht ob etwas gut oder schlecht ist. */
  --trust-high:      var(--ok);
  --trust-high-soft: var(--ok-soft);
  --trust-mid:       #2563c9;
  --trust-mid-soft:  #e6eefb;
  --trust-low:       var(--warn);
  --trust-low-soft:  var(--warn-soft);
  --trust-none:      var(--unknown);
  --trust-none-soft: var(--unknown-soft);

  /* -- Typografie --------------------------------------------------------
     Systemschriften. Sie sind auf jedem Gerät da, laden in null Millisekunden
     und verraten niemandem, dass jemand diese Seite geöffnet hat. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
          Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --text-xs:  0.75rem;    /* 12px – Fußnoten, Marken */
  --text-sm:  0.8125rem;  /* 13px – Hilfstexte */
  --text-md:  0.9375rem;  /* 15px – Fließtext */
  --text-lg:  1.0625rem;  /* 17px – Vorspann */
  --text-xl:  1.375rem;   /* 22px – Abschnittstitel */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: clamp(1.9rem, 5vw, 3.1rem);  /* Hero */

  --leading-tight: 1.2;
  --leading:       1.6;
  --tracking-tight:-0.02em;

  /* -- Abstände: 4px-Raster ---------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* -- Form -------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow:    0 4px 16px rgba(16,24,40,.08);

  --max-width: 1080px;
  --max-text: 68ch;

  --focus: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:          #0d1117;
    --surface:     #151b24;
    --surface-2:   #1b222d;
    --line:        #262e3a;
    --line-strong: #38424f;
    --text:        #e9eef6;
    --text-muted:  #9aa4b4;
    --text-faint:  #6f7a8a;

    --accent:      #5b9dff;
    --accent-hover:#7cb0ff;
    --accent-soft: #16233a;
    --on-accent:   #0d1117;

    --ok:          #4ade80;
    --ok-soft:     #10261a;
    --info:        #5b9dff;
    --info-soft:   #16233a;
    --warn:        #f0b34a;
    --warn-soft:   #2a2010;
    --unknown:     #9aa4b4;
    --unknown-soft:#1e242e;

    --trust-mid:      #7cb0ff;
    --trust-mid-soft: #16233a;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 4px 16px rgba(0,0,0,.5);
  }
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--text-md);
  line-height:var(--leading);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ margin:0 0 var(--space-3); line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight); }
h1{ font-size:var(--text-3xl); }
h2{ font-size:var(--text-2xl); }
h3{ font-size:var(--text-xl); }
h4{ font-size:var(--text-lg); }
p{ margin:0 0 var(--space-4); max-width:var(--max-text); }

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

:focus-visible{ outline:none; box-shadow:var(--focus); border-radius:var(--radius-sm); }

hr{ border:none; border-top:1px solid var(--line); margin:var(--space-6) 0; }

code,kbd{ font-family:var(--font-mono); font-size:0.9em;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:1px 6px; }

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap{ max-width:var(--max-width); margin:0 auto; padding:0 var(--space-4); }
.stack > * + *{ margin-top:var(--space-4); }
.section{ padding:var(--space-7) 0; border-top:1px solid var(--line); }
.section:first-of-type{ border-top:none; }
.section-lead{ color:var(--text-muted); font-size:var(--text-lg);
  max-width:var(--max-text); margin-bottom:var(--space-5); }

.grid{ display:grid; gap:var(--space-4);
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.grid-2{ display:grid; gap:var(--space-4);
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
.row{ display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center; }
.spread{ display:flex; gap:var(--space-4); justify-content:space-between;
  align-items:flex-start; flex-wrap:wrap; }

/* ==========================================================================
   Karten
   ========================================================================== */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--space-5);
  box-shadow:var(--shadow-sm);
}
.card--flat{ box-shadow:none; }
.card--quiet{ background:var(--surface-2); box-shadow:none; }
.card h3{ margin-bottom:var(--space-2); }
.card p:last-child{ margin-bottom:0; }
.card-note{ color:var(--text-muted); font-size:var(--text-sm); }

/* ==========================================================================
   Knöpfe
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--space-2);
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);
  background:var(--surface);
  color:var(--text);
  font:inherit; font-weight:600; font-size:var(--text-md);
  text-decoration:none; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.btn:hover{ border-color:var(--accent); color:var(--text); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn--primary{ background:var(--accent); border-color:var(--accent);
  color:var(--on-accent); }
.btn--primary:hover{ background:var(--accent-hover);
  border-color:var(--accent-hover); color:var(--on-accent); }
.btn--ghost{ background:transparent; border-color:transparent;
  color:var(--text-muted); }
.btn--ghost:hover{ color:var(--text); border-color:var(--line); }
.btn--danger{ border-color:var(--warn); color:var(--warn); }
.btn--sm{ padding:var(--space-2) var(--space-3); font-size:var(--text-sm); }
.btn--block{ width:100%; }

/* ==========================================================================
   Formulare
   ========================================================================== */
.field{ display:flex; flex-direction:column; gap:var(--space-2);
  margin-bottom:var(--space-4); }
.field > label{ font-size:var(--text-sm); font-weight:600;
  color:var(--text-muted); }
.field input, .field select, .field textarea{
  font:inherit; font-size:var(--text-md);
  padding:var(--space-3);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text);
  width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; box-shadow:var(--focus); border-color:var(--accent);
}
.field-hint{ font-size:var(--text-sm); color:var(--text-faint); }
.field-error{ font-size:var(--text-sm); color:var(--warn); }

/* ==========================================================================
   Status und Vertrauen
   --------------------------------------------------------------------------
   Ein Zustand hat immer ein Wort. Die Farbe verstärkt es, sie ersetzt es nie.
   ========================================================================== */
.badge{
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-pill);
  font-size:var(--text-xs); font-weight:700;
  letter-spacing:.02em; text-transform:uppercase;
  border:1px solid transparent; white-space:nowrap;
}
.badge--ok     { background:var(--ok-soft);      color:var(--ok);      border-color:var(--ok); }
.badge--info   { background:var(--info-soft);    color:var(--info);    border-color:var(--info); }
.badge--warn   { background:var(--warn-soft);    color:var(--warn);    border-color:var(--warn); }
.badge--unknown{ background:var(--unknown-soft); color:var(--unknown); border-color:var(--line-strong); }
.badge--draft  { background:var(--warn-soft);    color:var(--warn);    border-color:var(--warn); }

/* Vertrauensstufe: ein Balken plus Wort. Vier Stufen, mehr nicht - eine
   feinere Skala würde eine Genauigkeit vortäuschen, die wir nicht haben. */
.trust{ display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--text-sm); font-weight:600; }
.trust-bar{ display:inline-flex; gap:2px; }
.trust-bar i{ width:14px; height:5px; border-radius:2px;
  background:var(--line-strong); display:block; }
.trust--high  .trust-bar i:nth-child(-n+4){ background:var(--trust-high); }
.trust--mid   .trust-bar i:nth-child(-n+3){ background:var(--trust-mid); }
.trust--low   .trust-bar i:nth-child(-n+2){ background:var(--trust-low); }
.trust--none  .trust-bar i:nth-child(-n+1){ background:var(--trust-none); }
.trust--high{ color:var(--trust-high); }
.trust--mid { color:var(--trust-mid); }
.trust--low { color:var(--trust-low); }
.trust--none{ color:var(--trust-none); }

/* Erklärung auf Nachfrage - ohne JavaScript, tastaturbedienbar. */
.info{ position:relative; display:inline-block; }
.info > summary{ cursor:help; list-style:none; display:inline-flex;
  align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:var(--radius-pill);
  border:1px solid var(--line-strong); color:var(--text-faint);
  font-size:11px; font-weight:700; }
.info > summary::-webkit-details-marker{ display:none; }
.info[open] > summary{ border-color:var(--accent); color:var(--accent); }
.info-body{
  position:absolute; z-index:20; top:calc(100% + 6px); left:0;
  width:min(300px, 78vw);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); box-shadow:var(--shadow);
  padding:var(--space-3);
  font-size:var(--text-sm); font-weight:400; color:var(--text-muted);
  line-height:1.5;
}

/* ==========================================================================
   Preisdarstellung
   ========================================================================== */
.price{ font-size:var(--text-xl); font-weight:700; letter-spacing:-0.01em; }
.price--lg{ font-size:var(--text-2xl); }
.price-was{ color:var(--text-faint); text-decoration:line-through;
  font-size:var(--text-sm); }
.price-delta{ font-size:var(--text-sm); font-weight:600; color:var(--ok); }
.price-meta{ color:var(--text-muted); font-size:var(--text-sm); }

/* Ein Messwert, der nicht zählt: sichtbar, aber sichtbar zweitrangig. */
.dubious{ opacity:.65; text-decoration:line-through dotted; }

/* ==========================================================================
   Tabellen
   ========================================================================== */
.table{ width:100%; border-collapse:collapse; font-size:var(--text-md); }
.table th, .table td{ padding:var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.table th{ font-size:var(--text-sm); color:var(--text-muted);
  font-weight:600; }
.table-scroll{ overflow-x:auto; }

/* ==========================================================================
   Hilfsklassen
   ========================================================================== */
.muted{ color:var(--text-muted); }
.faint{ color:var(--text-faint); }
.small{ font-size:var(--text-sm); }
.tiny{ font-size:var(--text-xs); }
.center{ text-align:center; }
.nowrap{ white-space:nowrap; }
.hidden{ display:none !important; }
.mono{ font-family:var(--font-mono); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ==========================================================================
   Mobil
   --------------------------------------------------------------------------
   Der Aufbau ist von vornherein einspaltig und wächst nach oben; hier stehen
   nur die wenigen Stellen, an denen kleine Bildschirme mehr brauchen.
   ========================================================================== */
@media (max-width: 600px){
  :root{ --space-7: 2.25rem; --space-8: 3rem; }
  .section{ padding:var(--space-6) 0; }
  .btn{ width:100%; }
  .row > .btn{ width:auto; flex:1 1 auto; }
  .card{ padding:var(--space-4); }
  .info-body{ left:auto; right:0; }
}