/* ============================================================
   unterlagen.ai — D Design System
   Liquid Glass Kanzlei × Minimal modern Luxus
   Loaded after assets/style.css. Overrides surface/typography/
   palette across every page so the system is consistent: home,
   onboarding, status, impressum, datenschutz, agb.
   ============================================================ */
:root{
  --blue:#0a0a0a; --blue-hi:#0a0a0a; --blue-deep:#000; --blue-soft:#ededed;
  --ink:#0a0a0a; --ink-2:#2a2a2a; --ink-3:#6e6e6e; --ink-4:#a8a8a8;
  --line:#e2dfd6; --line-2:#ece8dc;
  --paper:#f7f4ec; --sunk:#eee9dd; --sunk-2:#e6e1d0;
  --green:#1f6b35; --green-soft:#dceee0;
  --champ-warm:#d4c0a1; --champ-cool:#c0b59b;
  --d-glass-1:rgba(255,253,247,0.78);
  --d-glass-2:rgba(255,253,247,0.88);
  --d-glass-3:rgba(255,253,247,0.94);
  --d-glass-soft:rgba(247,244,236,0.62);
  --d-glass-tint:rgba(238,229,210,0.46);
  --d-glass-edge:rgba(255,255,255,0.86);
  --d-shadow-soft:0 1px 0 rgba(255,255,255,0.92) inset, 0 1px 3px rgba(40,30,10,0.04), 0 12px 36px rgba(40,30,10,0.06);
  --d-shadow-med:0 1px 0 rgba(255,255,255,0.95) inset, 0 1px 3px rgba(40,30,10,0.06), 0 22px 60px rgba(40,30,10,0.10);
  --d-shadow-hero:0 1px 0 rgba(255,255,255,0.95) inset, 0 -1px 0 rgba(40,30,10,0.04) inset, 0 1px 3px rgba(40,30,10,0.08), 0 32px 80px rgba(40,30,10,0.14), 0 70px 180px rgba(40,30,10,0.10);
  /* legacy alias compatibility for assets/style.css references */
  --accent:#0a0a0a; --accent-soft:#ededed; --accent-line:#cdcdcd; --accent-ink:#0a0a0a;
  --paper-2:#eee9dd;
  --ink-soft:#2a2a2a; --ink-mute:#6e6e6e;
  --radius:18px; --radius-sm:12px;
}
html, body{background:var(--paper);color:var(--ink);font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-size:17px;line-height:1.62;letter-spacing:-.009em;-webkit-font-smoothing:antialiased;position:relative}
/* iOS Safari fix — overshoot viewport on every edge so address-bar collapse
   never reveals bare body background. */
body::before{
  content:"";position:fixed;
  top:-100px;left:-50px;right:-50px;bottom:-100px;
  z-index:-2;pointer-events:none;
  will-change:transform;transform:translateZ(0);
  background:
    radial-gradient(720px 560px at 14% -2%, rgba(212,192,161,0.30), transparent 60%),
    radial-gradient(640px 520px at 92% 12%, rgba(192,181,155,0.22), transparent 62%),
    radial-gradient(820px 600px at 50% 38%, rgba(40,30,10,0.05), transparent 65%),
    radial-gradient(620px 540px at 8% 70%, rgba(170,154,128,0.16), transparent 60%);
}
body::after{
  content:"";position:fixed;
  top:-100px;left:-50px;right:-50px;bottom:-100px;
  z-index:-1;pointer-events:none;opacity:.26;
  will-change:transform;transform:translateZ(0);
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.20  0 0 0 0 0.17  0 0 0 0 0.10  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
/* Typography */
h1,h2,h3,h4{font-family:'Inter',sans-serif;color:var(--ink);font-weight:300;letter-spacing:-.022em;line-height:1.1}
h1{font-size:clamp(2rem,3.6vw,2.9rem);font-weight:200;letter-spacing:-.028em}
h2{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:250}
h3{font-size:1.3rem;font-weight:400}
p, .lead{color:var(--ink-2);font-weight:300;font-size:1.06rem;line-height:1.62}
a{color:var(--ink);transition:color .15s}
a:hover{color:#000}
.eyebrow{color:var(--ink-3);font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:.72rem;font-weight:400;letter-spacing:.04em;text-transform:none}
.eyebrow::before{display:none}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:'Inter',sans-serif;font-weight:500;font-size:.98rem;border-radius:999px;padding:.85em 1.6em;cursor:pointer;border:1px solid transparent;transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .2s,color .2s,border-color .2s;white-space:nowrap;letter-spacing:-.005em;text-decoration:none}
.btn .arr{transition:transform .2s cubic-bezier(.2,.8,.2,1);display:inline-block}
.btn:hover .arr{transform:translateX(3px)}
.btn-primary, .btn--primary{
  background:var(--ink);color:#fff;border:none;
  box-shadow:0 1px 0 rgba(255,255,255,0.2) inset, 0 8px 24px rgba(0,0,0,0.22);
}
.btn-primary:hover, .btn--primary:hover{background:#000;transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,0.22) inset, 0 14px 36px rgba(0,0,0,0.32)}
.btn-ghost, .btn-glass, .btn--ghost{
  background:var(--d-glass-1);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  color:var(--ink);border:1px solid var(--d-glass-edge);border-radius:999px;font-weight:500;
  box-shadow:0 1px 0 rgba(255,255,255,0.92) inset, 0 4px 14px rgba(40,30,10,0.06);
}
.btn-ghost:hover, .btn-glass:hover, .btn--ghost:hover{background:var(--d-glass-2);transform:translateY(-1px)}
/* Brand mark with the signature animation */
.brand{display:inline-flex;align-items:center;gap:7px;font-family:'Inter',sans-serif;font-weight:500;color:var(--ink);letter-spacing:-.018em;font-size:1.05rem;text-decoration:none}
.brand .dot{display:none}
.brand-sig{flex-shrink:0;color:var(--ink);overflow:visible;display:block}
.brand-sig path{stroke-dasharray:100;stroke-dashoffset:100;opacity:0}
.brand-sig.sig-drawn path{animation:sigDraw 2.2s cubic-bezier(.45,.05,.25,1) forwards}
@keyframes sigDraw{
  0%{stroke-dashoffset:100;opacity:0}
  10%{stroke-dashoffset:100;opacity:1}
  100%{stroke-dashoffset:0;opacity:1}
}
@media (prefers-reduced-motion:reduce){.brand-sig path{stroke-dashoffset:0;animation:none;opacity:1}}
/* Form fields (used in onboarding) */
.field input, .field select, .field textarea, input[type="text"], input[type="email"], input[type="tel"], select, textarea{
  background:rgba(255,253,247,0.65);
  border:1px solid var(--line);border-radius:10px;color:var(--ink);
  font-family:'Inter',sans-serif;font-weight:400;font-size:1rem;
  padding:.78em 1em;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus, input:focus, select:focus, textarea:focus{
  border-color:var(--ink);background:rgba(255,253,247,0.92);outline:none;
  box-shadow:0 0 0 3px rgba(0,0,0,0.06);
}
.field label, label{color:var(--ink-2);font-weight:400;font-size:.92rem;letter-spacing:-.005em}
.field-err{color:#8a2a2a;font-size:.84rem;margin-top:6px;display:block}
/* Glass panels */
.glass-panel, .tier-opt, .dropzone, .vollmacht, .doc-pane, .upload-row, .ob-card{
  background:var(--d-glass-1);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid var(--d-glass-edge);border-radius:20px;
  box-shadow:var(--d-shadow-soft);
}
/* Legal pages (impressum, datenschutz, agb) */
.legal-page{padding-top:120px;padding-bottom:64px}
.legal-wrap{max-width:760px;margin-inline:auto;padding:0 28px}
.legal-head{margin-bottom:48px}
.legal-head .eyebrow{margin-bottom:18px;display:inline-flex}
.legal-head h1{font-size:clamp(2.2rem,4vw,3rem);font-weight:200;letter-spacing:-.028em;line-height:1.08;margin-bottom:18px;color:var(--ink)}
.legal-lead{font-size:1.16rem;color:var(--ink-2);line-height:1.55;font-weight:300;max-width:60ch;margin-bottom:0}
.legal-note{margin-top:24px;padding:18px 22px;border:1px solid var(--d-glass-edge);background:var(--d-glass-soft);backdrop-filter:blur(14px);border-radius:14px;font-size:.94rem;color:var(--ink-2);line-height:1.55;font-weight:400}
.legal-toc{margin:32px 0 48px;padding:22px 26px;background:var(--d-glass-1);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--d-glass-edge);border-radius:18px;box-shadow:var(--d-shadow-soft)}
.legal-toc .toc-label{display:block;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:.72rem;font-weight:400;letter-spacing:.04em;color:var(--ink-3);margin-bottom:14px}
.legal-toc ol{margin:0;padding-left:1.4rem;list-style:decimal;color:var(--ink-3)}
.legal-toc li{margin:.32rem 0;font-size:.98rem;line-height:1.55}
.legal-toc a{color:var(--ink);border-bottom:1px solid transparent;font-weight:400;transition:border-color .2s, color .2s}
.legal-toc a:hover{color:var(--ink);border-bottom-color:var(--ink-3)}
.legal-section{padding-block:1.4rem 0}
.legal-section:first-of-type{padding-top:0}
.legal-section h2{font-family:'Inter',sans-serif;font-size:1.42rem;font-weight:400;letter-spacing:-.014em;color:var(--ink);margin:1.8rem 0 .8rem;line-height:1.22}
.legal-section p, .legal-section li{font-size:1rem;color:var(--ink-2);line-height:1.65;font-weight:300}
.legal-section p+p{margin-top:.9rem}
.legal-section ul{margin:.6rem 0 0 1.1rem;list-style:disc}
.legal-section ul li{margin-bottom:.4rem}
.legal-section a{color:var(--ink);border-bottom:1px solid var(--line);font-weight:400}
.legal-section a:hover{border-bottom-color:var(--ink)}
.legal-section strong{color:var(--ink);font-weight:500}
.legal-dl{margin:1rem 0;display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.4rem;font-size:1rem}
.legal-dl dt{color:var(--ink-3);font-weight:400}
.legal-dl dd{color:var(--ink);font-weight:400}
.legal-related{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}
.legal-related .eyebrow{margin-bottom:14px;display:inline-flex}
.legal-related ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.legal-related a{color:var(--ink);border-bottom:1px solid var(--line);font-size:1rem;font-weight:400;transition:color .2s, border-color .2s}
.legal-related a:hover{color:#000;border-bottom-color:var(--ink-3)}
.legal-back{margin-top:2.5rem;font-size:.96rem}
.legal-back a{color:var(--ink-3);border-bottom:0;text-decoration:none}
.legal-back a:hover{color:var(--ink)}
@media (max-width:540px){
  .legal-dl{grid-template-columns:1fr;gap:.1rem 0}
  .legal-dl dd{margin-bottom:.7rem}
  .legal-wrap{padding:0 22px}
  .legal-page{padding-top:96px}
}
/* Small legal-pages nav (just brand + back link) */
.nav-island{
  background:var(--d-glass-3);
  backdrop-filter:blur(28px) saturate(1.8);-webkit-backdrop-filter:blur(28px) saturate(1.8);
  border:1px solid var(--d-glass-edge);
  box-shadow:0 1px 0 rgba(255,255,255,0.95) inset, 0 8px 24px rgba(40,30,10,0.08);
}
.nav-link{color:var(--ink-2);font-weight:400}
.nav-link:hover{color:var(--ink)}
/* "Datenschutz von Anfang an" intro card on the Datenschutz page */
.pbd-card{
  margin:32px 0 56px;
  padding:34px 36px;
  background:var(--d-glass-2);
  backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid var(--d-glass-edge);
  border-radius:22px;
  box-shadow:var(--d-shadow-med);
  position:relative;
}
.pbd-card::before{
  content:"";position:absolute;left:12%;right:12%;top:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.95),transparent);
  pointer-events:none;
}
.pbd-card .eyebrow{margin-bottom:14px;display:inline-flex}
.pbd-card h2{font-family:'Inter',sans-serif;font-size:clamp(1.65rem,2.6vw,2.1rem);font-weight:200;letter-spacing:-.022em;line-height:1.12;color:var(--ink);margin:0 0 18px}
.pbd-card p{font-size:1.04rem;color:var(--ink-2);line-height:1.6;font-weight:300}
.pbd-list{margin:18px 0 24px;padding:0;list-style:none;counter-reset:pbd}
.pbd-list li{padding:14px 0 14px 38px;position:relative;border-top:1px solid var(--line-2);font-size:1rem;color:var(--ink-2);line-height:1.55;font-weight:300}
.pbd-list li:first-child{border-top:1px solid var(--line)}
.pbd-list li:last-child{border-bottom:1px solid var(--line)}
.pbd-list li::before{
  counter-increment:pbd;content:counter(pbd,decimal-leading-zero);
  position:absolute;left:0;top:14px;
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:.72rem;letter-spacing:.04em;color:var(--ink-3);font-weight:400;
}
.pbd-list li strong{color:var(--ink);font-weight:500}
.pbd-list li a{color:var(--ink);border-bottom:1px solid var(--line)}
.pbd-list li a:hover{border-bottom-color:var(--ink)}
.pbd-foot{padding:18px 22px;background:rgba(220,238,224,0.32);border:1px solid rgba(31,107,53,0.18);border-radius:14px;font-size:1rem;color:var(--ink-2);line-height:1.55;margin:6px 0 0 !important;backdrop-filter:blur(8px)}
.pbd-foot strong{color:var(--green);font-weight:500}
/* Nav scrim — fade-to-paper veil for blur-behind effect */
.nav-scrim{
  position:fixed;top:0;left:0;right:0;height:104px;z-index:89;pointer-events:none;
  background:transparent;
  backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);
}