/* =============================================================================
   projecta-system.css  —  Geteiltes Design-System der OEFFENTLICHEN Seiten
   -----------------------------------------------------------------------------
   Scope: body.pds  (Projecta Design System)
     -> alle Primitive sind unter body.pds gescoped, damit sie das GLOBAL
        enqueuete custom-styles.css (.btn/.hero/.card) NICHT brechen
        (Portale/Kontakt/Projekte bleiben unberuehrt).
   Quelle: Design-System Living Document v1.2.0 (§1 Tokens, §13 Vokabular,
           §14 Stat-Block, §15 Premium-Doktrin) + konsolidierte Mockup-Tokens.
   Konsolidierung 21.06.2026: Insel-Werte vereinheitlicht (siehe Phase-0-Doc).
   ============================================================================= */

/* ============ 1. TOKENS (global; kollidieren nicht mit Theme --primary-color) */
:root {
  /* Gruen-Familie. WICHTIG (Kontrast): --green (#74b72a) auf Weiss = 2,3:1 < AA.
     -> Fuer TEXT/ZAHLEN immer --green-deep (#5a9023, ~3,3:1) oder
        --green-ink (#3a6212, ~5,6:1 = AA). --green nur fuer Flaechen/Grossgrafik. */
  --green:#74b72a;            /* Brand-Flaeche / CTA-Fill */
  --green-deep:#5a9023;       /* Text/Akzent auf Hell (min. fuer grossen Text) */
  --green-ink:#3a6212;        /* Text/Zahlen AA-sicher auf Weiss */
  --green-soft:#8bc34a;
  --cta:#74b72a;

  --ink:#15271b;              /* Haupt-Textfarbe (ersetzt Theme body{color:#000}) */
  --ink-2:#2c3a31;
  --muted:#62716a;
  --muted-2:#8a978d;

  --paper:#ffffff;
  --paper-2:#f6faf0;          /* Section.alt Hintergrund */
  --paper-3:#eef5e3;
  --line:#e4ebd9;
  --line-2:#d6e3c4;
  --mint:#eaf6da;
  --mint-2:#dcefc4;
  --mint-3:#cde9ad;

  /* Investoren-Akzent (gruenstichig; KEIN Blau — Home-Mockup-Bug #e4eef4 verworfen) */
  --invest:#3a6212;
  --invest-deep:#2b4a0d;
  --invest-soft:#eaf2dd;
  --invest-line:#dcedc8;

  /* Typografie */
  --sans:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Layout (kanonisch = Home/Investoren-Werte; matchen Design-System §1) */
  --maxw:1280px;
  --gut:34px;
  --r:24px;                   /* Karten-Radius */
  --r-sm:14px;                /* Inputs/kleine Karten */
  --r-pill:100px;             /* Buttons/Chips */

  /* Schatten (weich, gruenstichig) */
  --shadow:0 40px 90px -42px rgba(40,90,30,.40);
  --shadow-soft:0 24px 60px -34px rgba(40,90,30,.32);
  --shadow-card:0 30px 70px -36px rgba(20,50,25,.45);

  /* Easing */
  --ease:cubic-bezier(.19,1,.22,1);
  --ease-2:cubic-bezier(.2,.8,.2,1);
}

/* ============ 2. BASE (scoped; ueberschreibt Theme-Globals nur auf pds-Seiten) */
body.pds {
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.pds h1, body.pds h2, body.pds h3, body.pds h4 {
  font-family:var(--sans);
  color:var(--ink);
  letter-spacing:-.035em;
  line-height:1.03;
  font-weight:800;            /* ueberschreibt Theme h1..h6{font-weight:700} */
  margin:0;
}
/* Premium-Typo-Skala (gespreizt, §15.1.4 — light Subline <-> extrabold Riesenzahl) */
body.pds .t-h1 { font-size:clamp(40px,5.5vw,86px); font-weight:900; }
body.pds .t-h2 { font-size:clamp(32px,4.4vw,54px); font-weight:800; }
body.pds .t-h3 { font-size:clamp(22px,2.2vw,30px); font-weight:800; }
body.pds .t-lead { font-size:clamp(17px,1.5vw,19.5px); color:var(--muted); line-height:1.65; font-weight:400; }
body.pds p { margin:0 0 1em; }
body.pds a { color:inherit; }
body.pds img { max-width:100%; display:block; }
/* Zahlen IMMER tabellarisch (Doc §14.1/§15.1) */
body.pds .num, body.pds .stat-num, body.pds [data-count] { font-variant-numeric:tabular-nums; }

/* ============ 3. LAYOUT ============ */
body.pds .wrap { width:min(100% - 40px, var(--maxw)); margin-inline:auto; }
body.pds .section { padding:clamp(64px,9vw,116px) 0; }
body.pds .section.alt { background:var(--paper-2); }

/* Kapitel-Nummer (nur wenn Inhalt WIRKLICH eine Sequenz ist — Doc §13/Skill) */
body.pds .num-tag {
  font-variant-numeric:tabular-nums; font-weight:700; font-size:13px;
  color:var(--green-ink); letter-spacing:.04em;
}

/* Eyebrow/Kicker: ALL-CAPS-Label mit Punkt + Linie (EINE Konvention: Kind-Elemente) */
body.pds .kicker {
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--green-ink);
}
body.pds .kicker .dot { width:7px; height:7px; border-radius:50%; background:var(--green); flex:0 0 auto; }
body.pds .kicker .ln { width:28px; height:2px; background:var(--line-2); }

/* ============ 4. BUTTONS (scoped -> kein Konflikt mit Theme .btn) ============ */
/* Box-Model-Reset: ohne diesen rechnen .pds-Elemente Padding/Border AUSSERHALB der
   width/calc-Breite -> systemische Mobile-Overflows (Nav, Buttons, Footer, cfg ...). */
body.pds *, body.pds *::before, body.pds *::after { box-sizing:border-box; }

/* Zukunftshaertung Mobile-Overflow: Medien/Embeds nie breiter als ihr Container.
   Greift automatisch fuer jeden kuenftig eingefuegten Inhalt (Bilder, Videos, Karten,
   Tabellen). object-fit-Bilder mit Klassen-height ueberschreiben height:auto via Spezifitaet. */
body.pds img, body.pds video, body.pds iframe, body.pds embed, body.pds object, body.pds table { max-width:100%; }
body.pds img, body.pds video { height:auto; }

body.pds .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  max-width:100%;
  padding:16px 28px; border-radius:var(--r-pill);
  font-family:var(--sans); font-size:15px; font-weight:700; line-height:1;
  text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
  will-change:transform;
}
body.pds .btn-cta { background:var(--green); color:#08240a; box-shadow:var(--shadow-soft); }
body.pds .btn-cta:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
body.pds .btn-ghost { background:transparent; color:var(--ink); border-color:var(--line-2); }
body.pds .btn-ghost:hover { border-color:var(--green); color:var(--green-ink); }
body.pds .btn-invest { background:var(--invest); color:#fff; box-shadow:var(--shadow-soft); }
body.pds .btn-invest:hover { transform:translateY(-2px); background:var(--invest-deep); }
body.pds .magnetic { will-change:transform; }

/* ============ 5. STAT-BLOCK (Doc §14.1 — Zahl-als-Held, Bento) ============ */
body.pds .stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
body.pds .stat {
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 24px; display:flex; flex-direction:column; gap:8px;
}
body.pds .stat-num {
  font-size:clamp(34px,4vw,52px); font-weight:900; line-height:1;
  color:var(--green-ink);            /* AA-Kontrast, NICHT --green */
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
body.pds .stat-label { font-size:14px; color:var(--muted); font-weight:500; }
/* Held-Kachel: spannt 2 Spalten, gruene Flaeche, helle Riesenzahl */
body.pds .stat.lead {
  grid-column:span 2; background:var(--green); border-color:transparent;
  box-shadow:var(--shadow-soft);
}
body.pds .stat.lead .stat-num { color:#fff; font-size:clamp(48px,7vw,96px); } /* auf Flaeche: weiss = voller Kontrast */
body.pds .stat.lead .stat-label { color:rgba(255,255,255,.85); }

/* ============ 6. REVEAL (scroll-getriggert; HTML-Fallback ohne JS) ========== */
body.pds .reveal { }                                   /* sichtbar by default (no-JS) */
html.js body.pds .reveal { opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
html.js body.pds .reveal.in { opacity:1; transform:none; }
html.js body.pds [data-reveal="stagger"] > * { opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
html.js body.pds [data-reveal="stagger"].in > * { opacity:1; transform:none; }
html.js body.pds [data-reveal="stagger"].in > *:nth-child(2){ transition-delay:.07s; }
html.js body.pds [data-reveal="stagger"].in > *:nth-child(3){ transition-delay:.14s; }
html.js body.pds [data-reveal="stagger"].in > *:nth-child(4){ transition-delay:.21s; }
html.js body.pds [data-reveal="stagger"].in > *:nth-child(5){ transition-delay:.28s; }

/* ============ 7. LEAD-FORM-BASIS ============ */
body.pds .leadbox { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,3vw,34px); box-shadow:var(--shadow-card); }
body.pds .field { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
body.pds .field label { font-size:13px; font-weight:600; color:var(--ink-2); }
body.pds .field input, body.pds .field select, body.pds .field textarea {
  font-family:var(--sans); font-size:15px; padding:13px 15px;
  border:1.5px solid var(--line-2); border-radius:var(--r-sm); background:#fff; color:var(--ink);
}
body.pds .field input:focus, body.pds .field select:focus, body.pds .field textarea:focus {
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(116,183,42,.15);
}
body.pds .dsgvo { font-size:12.5px; color:var(--muted); display:flex; gap:9px; align-items:flex-start; }

/* ============ 8. FOOTER-BASIS ============ */
body.pds .foot-top { display:grid; gap:28px; }
body.pds .foot-disc { font-size:12px; color:var(--muted-2); line-height:1.6; }
body.pds .foot-bot { font-size:13px; color:var(--muted); }

/* ============ 9. BREAKPOINTS (vereinheitlicht: 1080 / 860 / 560) ========== */
@media (max-width:1080px){
  body.pds .stats-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  body.pds .stat.lead { grid-column:span 2; }
}
@media (max-width:560px){
  body.pds .stats-grid { grid-template-columns:1fr; }
  body.pds .stat.lead { grid-column:span 1; }
  body.pds .btn { width:100%; min-width:0; white-space:normal; }
}

/* ============ 10. MOTION / A11Y ============ */
@media (prefers-reduced-motion:reduce){
  html.js body.pds .reveal,
  html.js body.pds [data-reveal="stagger"] > * { opacity:1 !important; transform:none !important; transition:none !important; }
  body.pds .btn, body.pds .magnetic { transition:none !important; }
}
body.pds :focus-visible { outline:2.5px solid var(--green-ink); outline-offset:3px; border-radius:4px; }