/* ==================================================================
   nis2-services.de — legal pages (Impressum, Datenschutzerklärung).
   Same surface ladder, type scale and rhythm as the home page. The
   token block below is lifted verbatim from index.html so the two
   cannot drift apart.
   These are long-form reading pages, so they are deliberately quieter
   than the home page: no photography, and no lime beyond links and
   the single CTA.
   ================================================================== */

:root{
  /* ---- Surface ladder (grey gradation, DS ink ramp) ------------- */
  --s-0:#0b0d14;                /* outer shell, behind the 1440 page */
  --s-1:#0f111a;                /* band A  — evia-ink-850            */
  --s-2:#14171f;                /* band B                            */
  --s-3:#181c25;                /* band C  — anchors + CTA           */
  --s-4:#1f2330;                /* card    — evia-ink-700            */
  --s-5:#2b3040;                /* card hover / raised — ink-600     */
  --s-6:#3c4456;                /* rails, markers — ink-500          */

  /* ---- Ink (3 steps, no more) ----------------------------------- */
  --t-1:#ffffff;
  --t-2:rgba(255,255,255,.72);
  --t-3:rgba(255,255,255,.56);

  /* ---- Lines (3 steps, no more) --------------------------------- */
  --l-1:rgba(255,255,255,.08);
  --l-2:rgba(255,255,255,.14);
  --l-3:rgba(255,255,255,.22);

  --lime:var(--evia-green,#bee600);
  --lime-hover:#cef000;

  /* ---- Rhythm ---------------------------------------------------- */
  --pad-x:clamp(20px,5vw,80px);
  --sec-y:clamp(72px,8.5vw,128px);
  /* Bands run edge to edge; content is held to --content-max and centred.
     The max() collapses to --pad-x whenever the viewport is the narrower one,
     so one formula serves every width. */
  --content-max:1440px;
  --gutter:max(var(--pad-x),(100% - var(--content-max)) / 2);
  --nav-h:64px;

  /* ---- Type scale (locked; nothing off-scale on the page) -------- */
  --fs-display:clamp(38px,6.4vw,76px);
  --fs-cta:clamp(36px,5.6vw,68px);
  --fs-h2:clamp(29px,3.6vw,48px);
  --fs-h3:clamp(20px,1.7vw,23px);
  --fs-h4:20px;
  --fs-lead:clamp(16px,1.35vw,18px);
  --fs-body:16px;
  --fs-sm:15px;
  --fs-xs:13px;
  --fs-2xs:11px;

  --measure:66ch;
  --legal-col:1040px;   /* centred column on the Impressum */
  --ease:cubic-bezier(.2,0,0,1);
}

@media (min-width:900px){ :root{ --nav-h:84px; } }

/* 1600+ (covers 1920x1080): widen the measure and let the display type grow
   with it, so the page fills the screen instead of sitting in a 1440 column. */
@media (min-width:1600px){
  :root{
    --content-max:1560px;
    --fs-display:84px;
    --fs-cta:76px;
    --fs-h2:52px;
  }
}
@media (min-width:1800px){ :root{ --content-max:1640px } }  /* a 1920 viewport reports ~1905 once the scrollbar is subtracted */
@media (min-width:2400px){ :root{ --content-max:1760px } }

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px);scrollbar-gutter:stable}
body{
  margin:0;background:var(--s-1);color:var(--t-1);color-scheme:dark;
  font-family:var(--font-body,Arial,sans-serif);font-size:var(--fs-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%}
.page{background:var(--s-1);overflow-x:clip}

/* ---- Type. Prefixed with .evia so these outrank the design system's
        own element rules in base.css, exactly as on the home page. ---- */
.evia :is(.display,.h2,.h3,.eyebrow){font-family:var(--font-display)}
.evia .display{font-weight:700;font-size:clamp(34px,5vw,60px);line-height:1;letter-spacing:-.035em;margin:0;color:var(--t-1)}
.evia .h2{font-weight:700;font-size:clamp(23px,2.4vw,30px);line-height:1.15;letter-spacing:-.025em;margin:0;color:var(--t-1)}
.evia .h3{font-weight:700;font-size:clamp(19px,1.7vw,22px);line-height:1.3;letter-spacing:-.02em;margin:0;color:var(--t-1)}
.evia .eyebrow{display:block;font-weight:500;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--t-3);margin:0}
.evia .lead{font-size:var(--fs-lead);line-height:1.75;color:var(--t-2);margin:0;max-width:62ch;text-wrap:pretty}

/* ---- Buttons and focus ---------------------------------------------------- */
.evia a.btn,.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;letter-spacing:-.005em;
  background:var(--lime);color:#05060a;border:1px solid var(--lime);border-radius:4px;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.evia a.btn:hover,.btn:hover{background:var(--lime-hover);border-color:var(--lime-hover);color:#05060a;text-decoration:none}
.btn-sm{height:40px;padding:0 20px;font-size:var(--fs-xs)}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:2px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--lime);color:#05060a;
  padding:12px 18px;font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);border-radius:4px;
}
.skip:focus{left:8px;top:8px}

/* ---- Nav ------------------------------------------------------------------ */
.site-nav{
  position:sticky;top:0;z-index:20;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 var(--gutter);border-bottom:1px solid var(--l-1);
  background:color-mix(in srgb,var(--s-1) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.site-nav__logo{display:flex;align-items:center}
.site-nav__logo img{height:20px;display:block}
.site-nav nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px)}
.site-nav nav a:not(.btn){
  font-family:var(--font-display);font-size:var(--fs-xs);font-weight:500;letter-spacing:.01em;
  color:var(--t-2);text-decoration:none;transition:color .2s var(--ease);
}
.site-nav nav a:not(.btn):hover{color:var(--t-1)}

/* ---- Page head ------------------------------------------------------------ */
.legal-head{padding:clamp(56px,7vw,96px) var(--gutter) clamp(32px,4vw,48px);background:var(--s-2)}
.legal-head .eyebrow{margin-bottom:20px}
.legal-head .lead{margin-top:clamp(20px,2.2vw,28px)}

/* ---- Body ----------------------------------------------------------------- */
.legal{
  padding:clamp(48px,6vw,80px) var(--gutter) clamp(64px,8vw,112px);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,72px);
}
.legal--toc{grid-template-columns:260px minmax(0,1fr)}
.legal__body{max-width:74ch;min-width:0}
/* the Impressum's entity grid is a table of records, not prose — it gets the
   full column while paragraphs keep their measure */
.legal__body--full{max-width:none}
.evia .legal__body p{font-size:var(--fs-body);line-height:1.8;color:var(--t-2);margin:0 0 1.1em;max-width:74ch}
.evia .legal__body p:last-child{margin-bottom:0}
.evia .legal__body strong{color:var(--t-1);font-weight:700}
.evia .legal__body a{color:var(--lime);text-decoration:none;border-bottom:1px solid rgba(190,230,0,.35);word-break:break-word}
.evia .legal__body a:hover{border-bottom-color:var(--lime);text-decoration:none}
.evia .legal__body ul{margin:0 0 1.1em;padding-left:1.1em;color:var(--t-2)}
.evia .legal__body li{line-height:1.8;margin-bottom:.4em}

/* A section is one rule-topped block — the same row rhythm the home page uses */
.legal-section{padding-top:clamp(32px,3.6vw,48px);margin-top:clamp(32px,3.6vw,48px);border-top:1px solid var(--l-1)}
.legal-section:first-child{padding-top:0;margin-top:0;border-top:0}
.legal-section > .h2{margin-bottom:clamp(20px,2vw,28px)}
.legal-sub{margin-top:clamp(32px,3.4vw,44px)}
.legal-sub > .h3{margin-bottom:16px}

/* ---- Contents rail. The privacy sections genuinely are a numbered
        sequence (1–9 on the source page), so numbering them is honest. ---- */
.toc{align-self:start;position:sticky;top:calc(var(--nav-h) + 32px)}
.toc__title{margin-bottom:16px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc;border-top:1px solid var(--l-1)}
.toc li:last-child{border-bottom:1px solid var(--l-1)}
.toc a{
  display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:baseline;
  padding:11px 0;font-family:var(--font-display);font-size:var(--fs-sm);font-weight:500;
  line-height:1.35;color:var(--t-2);text-decoration:none;transition:color .2s var(--ease);
}
.toc a::before{content:counter(toc,decimal-leading-zero);font-size:var(--fs-xs);color:#5b6478;font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--t-1);text-decoration:none}

/* ---- Impressum: one column, centred ---------------------------------------
   The Impressum has no contents rail to balance it, so ranging it left leaves
   a large void on wide screens. The column is centred instead; the text inside
   stays left-aligned so addresses and register numbers remain scannable. ---- */
.legal-head__inner{max-width:var(--legal-col);margin-inline:auto}
/* width, not max-width: auto margins switch a grid item out of `stretch`,
   so a max-width alone would let it shrink to its content */
.legal--centred > .legal__body{width:var(--legal-col);max-width:100%;margin-inline:auto}

/* ---- Impressum entities --------------------------------------------------- */
.entities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1040px}
.entity{background:var(--s-4);border:1px solid var(--l-1);border-radius:10px;padding:clamp(22px,2.2vw,28px)}
.entity .h3{font-size:20px;margin-bottom:14px}
.evia .entity p{font-size:var(--fs-sm);line-height:1.8;color:var(--t-2);margin:0 0 .9em}
.evia .entity p:last-child{margin-bottom:0}

/* ---- Footer --------------------------------------------------------------- */
.footer{
  background:var(--s-2);border-top:1px solid var(--l-1);
  padding:clamp(48px,5.5vw,72px) var(--gutter) 40px;
  display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:clamp(32px,4.5vw,64px);
}
.footer img{height:46px;display:block}
.evia .footer p{margin:24px 0 0;font-size:14px;line-height:1.75;color:var(--t-3);max-width:40ch}
.footer__col{display:flex;flex-direction:column;gap:12px}
.footer__col a,.footer__col span:not(.eyebrow){font-size:14px;line-height:1.75;color:var(--t-3);text-decoration:none}
.footer__col a{transition:color .2s var(--ease)}
.footer__col a:hover{color:var(--t-1)}
.subbar{
  background:var(--s-2);padding:0 var(--gutter) 36px;
  display:flex;justify-content:space-between;gap:12px;
  font-family:var(--font-display);font-size:var(--fs-xs);line-height:1.5;letter-spacing:.02em;color:var(--t-3);
}
.subbar a{color:var(--t-3);text-decoration:none;transition:color .2s var(--ease)}
.subbar a:hover{color:var(--t-1)}
.subbar a[aria-current]{color:var(--t-1)}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width:960px){
  .legal--toc{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;padding-bottom:clamp(24px,3vw,32px);border-bottom:1px solid var(--l-1)}
  .toc ol{columns:2;column-gap:32px}
  .toc li{break-inside:avoid}
  .entities{grid-template-columns:1fr}
}
@media (max-width:768px){
  .footer{grid-template-columns:1fr;gap:36px}
  .footer__col{gap:4px}
  .footer__col a{padding:9px 0}
  .subbar{flex-direction:column;gap:8px;align-items:flex-start}
}
@media (max-width:560px){
  .toc ol{columns:1}
  .site-nav nav a:not(.btn){display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important}
}