/* dilohver Datenschutz – Design Tokens (sac-child)  v0.1 */
:root{
  /* Grün – aus Logo (Kunde: #0B4A3B, #39765D, #6F9D85, #C6D9CC) */
  --dsz-green-50:#F3F7F4; --dsz-green-100:#E4EEE8; --dsz-green-200:#C6D9CC; --dsz-green-300:#9DBDAA;
  --dsz-green-400:#6F9D85; --dsz-green-500:#4F876C; --dsz-green-600:#39765D; --dsz-green-700:#22604B;
  --dsz-green-800:#0B4A3B; --dsz-green-900:#083B2F; --dsz-green-950:#052A21;
  /* Schiefer – aus Wortmarke (#5A6372) */
  --dsz-slate-50:#F5F6F8; --dsz-slate-100:#EBEDF1; --dsz-slate-200:#D5D9E0; --dsz-slate-300:#B0B7C2;
  --dsz-slate-400:#858E9C; --dsz-slate-500:#5A6372; --dsz-slate-600:#4A5261; --dsz-slate-700:#3A414E;
  --dsz-slate-800:#2B313B; --dsz-slate-900:#1D222A;
  --dsz-navy:#1F3A5F; /* nur Claim-Zeile im Logo */
  /* Neutral */
  /* Graustufen „mittel“ aus Variante C (#60): kühles Grau statt Grüngrau */
  --dsz-white:#FFFFFF; --dsz-surface:#EFF1F3; --dsz-surface-soft:#F7F8F9; --dsz-border:#E3E6EA; --dsz-border-strong:#CDD2D8;
  --dsz-error:#B3261E; --dsz-error-bg:#FBEDEC; --dsz-success:#22604B;
  /* Rollen */
  --dsz-text:#23282F;          /* 15.2:1 auf Weiß */
  --dsz-text-body:#3A414E;     /* 10.9:1 */
  --dsz-text-muted:#5A6372;    /* 6.1:1 – kleinste zulässige Textfarbe */
  --dsz-text-accent:#0B4A3B;   /* Hervorhebung in Headlines, Links */
  --dsz-text-on-dark:#FFFFFF; --dsz-text-on-dark-muted:#C6D9CC; /* 6.9:1 auf green-800 */
  --dsz-focus:#1F3A5F;         /* Fokusring 3px, Offset 3px */
  /* Verläufe – 70deg = Neigung der Logo-Balken (≈20°) */
  --dsz-grad-light: linear-gradient(70deg,#F7F8F9 0%,#EFF1F3 45%,#E3E6EA 100%);      /* dunkler Text (#60 grau) */
  --dsz-grad-brand: linear-gradient(70deg,#C6D9CC 0%,#6F9D85 50%,#39765D 100%);      /* nur Deko, kein Text */
  --dsz-grad-mid:   linear-gradient(70deg,#39765D 0%,#22604B 55%,#0B4A3B 100%);      /* weißer Text ≥5.3:1 */
  --dsz-grad-deep:  linear-gradient(70deg,#23282F 0%,#2B313B 60%,#1D3D34 100%);      /* Hero, CTA, Footer: Schiefer mit Grünstich (Variante C, #60) */
  --dsz-deep:#23282F;
  --dsz-grad-photo: linear-gradient(0deg,rgba(5,42,33,.94) 0%,rgba(11,74,59,.80) 42%,rgba(11,74,59,0) 72%);
  /* Muster */
  --dsz-pattern-full:url(../images/muster/fingerprint-full.svg);
  --dsz-pattern-strip:url(../images/muster/fingerprint-strip.svg);
  --dsz-pattern-corner:url(../images/muster/fingerprint-corner.svg);
  --dsz-pattern-opacity-dark:.16;  /* auf grad-deep */
  --dsz-pattern-opacity-mid:.22;   /* auf grad-mid / brand */
  --dsz-pattern-opacity-light:.10; /* grüne Linien auf hellen Flächen */
  /* Typo */
  /* Schriften Variante C (#60). --dsz-font-serif heißt aus Gründen der Kompatibilität weiter so, ist aber die Überschriftenschrift. */
  --dsz-font-head:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --dsz-font-serif:var(--dsz-font-head);
  --dsz-font-akzent:"EB Garamond",Georgia,"Times New Roman",serif; /* nur kursive Hervorhebungen */
  --dsz-font-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --dsz-fs-display:clamp(2.5rem,1rem + 3vw,4.5rem);      /* 40→72, Notebook 1440: 59 (#76) */
  --dsz-fs-h1:clamp(2.125rem,1rem + 2.4vw,3.5rem);       /* 34→56, Notebook 1440: 51 */
  --dsz-fs-h2:clamp(1.75rem,.75rem + 1.6vw,2.625rem);    /* 28→42, Notebook 1440: 35 */
  --dsz-fs-h3:clamp(1.375rem,.9rem + .7vw,1.75rem);      /* 22→28, Notebook 1440: 25 */
  --dsz-fs-h4:1.25rem;
  --dsz-fs-lead:clamp(1.125rem,.85rem + .4vw,1.3125rem); /* 18→21, Notebook 1440: 19 */
  --dsz-fs-body:1.0625rem; --dsz-fs-small:.9375rem; --dsz-fs-eyebrow:.8125rem;
  --dsz-lh-tight:1.08; --dsz-lh-head:1.18; --dsz-lh-body:1.6;
  --dsz-track-eyebrow:.18em;
  /* Raum (4er-Raster) */
  --dsz-space-1:4px; --dsz-space-2:8px; --dsz-space-3:12px; --dsz-space-4:16px; --dsz-space-5:24px;
  --dsz-space-6:32px; --dsz-space-7:48px; --dsz-space-8:64px; --dsz-space-9:96px; --dsz-space-10:128px;
  --dsz-section-y:clamp(64px,5vw + 40px,120px);
  /* Abstands-Rollen (innen < außen): stack < card-pad < card-gap < head-gap < col-gap < section-y */
  --dsz-section-y-compact:clamp(48px,6vw,88px);   /* dichte Sektionen: Textkarten, FAQ, Schritte, Umfang, Vergleich */
  --dsz-head-gap:var(--dsz-space-6);              /* Section-Headline → Inhalt */
  --dsz-col-gap:clamp(40px,5vw,72px);             /* Spaltenabstand Text | Bild */
  --dsz-card-gap:clamp(16px,2vw,24px);            /* Abstand zwischen Boxen im Raster */
  --dsz-card-pad:clamp(24px,3vw,32px);            /* Innenabstand Box */
  --dsz-stack-s:var(--dsz-space-2); --dsz-stack-m:var(--dsz-space-4); --dsz-stack-l:var(--dsz-space-5); /* Rhythmus im Text */
  --dsz-container:1240px; --dsz-measure:68ch;
  /* Form */
  --dsz-radius-s:6px; --dsz-radius-m:10px; --dsz-radius-l:16px; --dsz-radius-pill:999px;
  --dsz-shadow-1:0 1px 2px rgba(11,74,59,.06),0 2px 8px rgba(11,74,59,.05);
  --dsz-shadow-2:0 2px 4px rgba(11,74,59,.05),0 12px 32px rgba(11,74,59,.10);
}
/* Muster-Ebene: Abschnitt bekommt .dsz-pattern + Modifier */
.dsz-pattern{position:relative;isolation:isolate;background:var(--dsz-deep);background-image:var(--dsz-grad-deep)}
/* Muster rechts (#98): großes Muster im rechten Viertel, links durchsichtig, rechts kräftiger und heller */
.dsz-pattern::before{content:"";position:absolute;inset:0 0 0 auto;width:25%;z-index:-1;pointer-events:none;
  background:var(--dsz-pattern-full) right center/cover no-repeat;opacity:var(--dsz-pattern-opacity-rechts,.3);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 75%);
          mask-image:linear-gradient(to right,transparent 0%,#000 75%)}
/* Fallback: ohne mask-image Unterstützung nur Verlauf */
@supports not ((mask-image:none) or (-webkit-mask-image:none)){.dsz-pattern::before{display:none}}
.dsz-pattern--strip::before{background:var(--dsz-pattern-strip) right top/auto 100% repeat-y;left:auto;width:120px;opacity:var(--dsz-pattern-opacity-mid);-webkit-mask-image:none;mask-image:none}
/* Eckmotiv (Zitat, Kontaktdaten): bleibt oben rechts in der Ecke */
.dsz-pattern--corner::before{inset:0;width:auto;opacity:var(--dsz-pattern-opacity-dark);background:var(--dsz-pattern-corner) right top/320px no-repeat;
  -webkit-mask-image:radial-gradient(circle at 100% 0,#000 0,transparent 320px);mask-image:radial-gradient(circle at 100% 0,#000 0,transparent 320px)}
@media (prefers-reduced-motion:no-preference){
  .dsz-pattern--drift::before{animation:dsz-drift 60s ease-in-out infinite alternate}
  @keyframes dsz-drift{to{background-position:calc(100% + 40px) 45%}}
}
:focus-visible{outline:3px solid var(--dsz-focus);outline-offset:3px;border-radius:4px}
.dsz-on-dark :focus-visible{outline-color:#fff}