/* 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 */
  --dsz-white:#FFFFFF; --dsz-surface:#F6F8F7; --dsz-border:#DDE3E0; --dsz-border-strong:#B9C4BF;
  --dsz-error:#B3261E; --dsz-error-bg:#FBEDEC; --dsz-success:#22604B;
  /* Rollen */
  --dsz-text:#2B313B;          /* 13.1:1 auf Weiß */
  --dsz-text-body:#4A5261;     /* 7.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,#F3F7F4 0%,#E4EEE8 45%,#C6D9CC 100%);      /* dunkler Text */
  --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,#052A21 0%,#0B4A3B 55%,#1C5A46 100%);      /* Hero, CTA, Footer */
  --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-mini:url(../images/muster/fingerprint-mini.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 */
  --dsz-font-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --dsz-font-sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --dsz-fs-display:clamp(2.5rem,1.6rem + 3.6vw,4.5rem);  /* 40→72 */
  --dsz-fs-h1:clamp(2.125rem,1.5rem + 2.5vw,3.5rem);     /* 34→56 */
  --dsz-fs-h2:clamp(1.75rem,1.35rem + 1.6vw,2.625rem);   /* 28→42 */
  --dsz-fs-h3:clamp(1.375rem,1.2rem + .7vw,1.75rem);     /* 22→28 */
  --dsz-fs-h4:1.25rem;
  --dsz-fs-lead:clamp(1.125rem,1.05rem + .3vw,1.3125rem);/* 18→21 */
  --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);
  --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-green-800);background-image:var(--dsz-grad-deep)}
.dsz-pattern::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--dsz-pattern-full) right center/cover no-repeat;opacity:var(--dsz-pattern-opacity-dark);
  -webkit-mask-image:linear-gradient(70deg,transparent 0%,transparent 35%,#000 75%);
          mask-image:linear-gradient(70deg,transparent 0%,transparent 35%,#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}
.dsz-pattern--corner::before{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}