/* ============================================================
   Villagrán Creative Consulting · legal pages + 404
   Loaded after styles.css, which supplies tokens, reset, grain, type,
   buttons and the footer. These pages read like a printed document:
   a sticky contents column, numbered sections with serif oldstyle
   numerals, and hairline rules instead of boxes.
   ============================================================ */

/* ---------- Page bar ----------
   Static, not the home page's fixed/scroll-aware nav: no JS here. */
.pagebar{
  position:sticky;top:0;z-index:100;
  background:rgba(251,249,244,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line);
}
.pagebar__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:14px;padding-bottom:14px;}
.pagebar__logo img{height:24px;width:auto;}
.pagebar__right{display:flex;align-items:center;gap:28px;}
.pagebar__home{
  display:inline-flex;align-items:center;gap:.45rem;
  font-weight:500;color:var(--ink-80);
  transition:color .3s var(--ease);
}
.pagebar__home .icon{width:17px;height:17px;transform:rotate(180deg);transition:transform .3s var(--ease);}
.pagebar__home:hover{color:var(--ink);}
.pagebar__home:hover .icon{transform:rotate(180deg) translateX(4px);}

.lang{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;padding:3px;}
.lang a{
  font-size:.82rem;font-weight:600;letter-spacing:.08em;
  padding:4px 11px;border-radius:999px;color:var(--ink-60);
  transition:color .3s var(--ease),background .3s var(--ease);
}
.lang a:hover{color:var(--ink);}
.lang a[aria-current="true"]{background:var(--ink);color:var(--ivory);}

.pagebar a:focus-visible,.legal-toc a:focus-visible,.legal-body a:focus-visible,.notfound a:focus-visible{
  outline:2px solid var(--amber);outline-offset:3px;border-radius:4px;
}

/* ---------- Document head ---------- */
.legal-head{
  position:relative;
  padding:96px 0 64px;
  border-bottom:1px solid var(--line);
}
/* The amber dot of the monogram, set like a full stop after the title. */
.legal-head__title{
  font-size:clamp(2.4rem,5.6vw,4.6rem);
  font-weight:600;line-height:1.04;letter-spacing:-0.025em;
  max-width:16ch;
}
.legal-head__title::after{
  content:"";display:inline-block;
  width:.16em;height:.16em;margin-left:.08em;
  border-radius:50%;background:var(--amber);
}
.legal-head__lead{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.2rem,1.9vw,1.45rem);line-height:1.5;
  color:var(--ink-80);max-width:46ch;margin-top:1.6rem;
}
.legal-head__meta{
  margin-top:2rem;font-size:.9rem;color:var(--stone);
  display:flex;flex-wrap:wrap;gap:6px 22px;
}

/* ---------- Two-column body ---------- */
.legal-grid{
  display:grid;grid-template-columns:230px minmax(0,1fr);
  gap:72px;padding:64px 0 130px;
}
.legal-toc{position:sticky;top:96px;align-self:start;}
.legal-toc__label{
  font-family:var(--serif);font-style:italic;color:var(--amber);
  font-size:1.02rem;margin-bottom:14px;
}
.legal-toc ol{list-style:none;counter-reset:toc;border-left:1.5px solid var(--line);}
.legal-toc li{counter-increment:toc;}
.legal-toc ol a{
  display:flex;gap:10px;
  padding:7px 0 7px 16px;margin-left:-1.5px;
  border-left:1.5px solid transparent;
  font-size:.93rem;line-height:1.4;color:var(--ink-60);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.legal-toc ol a::before{
  content:counter(toc);
  font-family:var(--serif);font-variant-numeric:oldstyle-nums;
  color:var(--stone);min-width:1.1em;
}
.legal-toc ol a:hover{color:var(--ink);border-color:var(--amber);}
.legal-toc__docs{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);}
.legal-toc__docs ul{list-style:none;display:flex;flex-direction:column;gap:8px;}
.legal-toc__docs a{font-size:.93rem;color:var(--ink-80);transition:color .3s var(--ease);}
.legal-toc__docs a:hover{color:var(--amber);}
.legal-toc__docs a[aria-current="page"]{color:var(--ink);font-weight:600;}

/* ---------- Document body ---------- */
.legal-body{max-width:68ch;counter-reset:sec;}
.legal-body section{
  counter-increment:sec;
  padding:0 0 52px;margin-bottom:52px;
  border-bottom:1px solid var(--line);
  scroll-margin-top:96px;
}
.legal-body section:last-child{border-bottom:none;margin-bottom:0;}
.legal-body h2{
  display:flex;align-items:baseline;gap:16px;
  font-size:clamp(1.35rem,2.2vw,1.7rem);
  font-weight:600;line-height:1.2;letter-spacing:-0.01em;
  margin-bottom:1.1rem;
}
.legal-body h2::before{
  content:counter(sec);
  font-family:var(--serif);font-weight:300;font-variant-numeric:oldstyle-nums;
  font-size:1.5em;line-height:1;color:var(--amber);
  min-width:1.1em;
}
.legal-body h3{font-size:1.06rem;font-weight:600;margin:1.6rem 0 .5rem;}
.legal-body p,.legal-body li{color:var(--ink-80);}
.legal-body p + p{margin-top:.9rem;}
.legal-body ul{margin:.8rem 0 0 1.1rem;}
.legal-body ul li{padding-left:.3rem;margin-top:.35rem;}
.legal-body ul li::marker{color:var(--amber);}
.legal-body a{
  color:var(--ink);
  border-bottom:1.5px solid rgba(194,104,60,.45);
  transition:border-color .3s var(--ease),color .3s var(--ease);
  overflow-wrap:anywhere;
}
.legal-body a:hover{border-color:var(--amber);color:var(--amber);}
.legal-body strong{color:var(--ink);font-weight:600;}

/* Fact sheet: label / value rows, used for the imprint and for
   third-party providers. */
.facts{
  display:grid;grid-template-columns:minmax(150px,34%) 1fr;
  border-top:1px solid var(--line);margin-top:1.2rem;
}
.facts dt,.facts dd{padding:13px 0;border-bottom:1px solid var(--line);}
.facts dt{
  font-size:.8rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--stone);padding-right:20px;padding-top:16px;
  /* German compounds ("Unternehmensgegenstand") would touch the value. */
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere;
}
.facts dd{color:var(--ink);}

/* A quiet aside for the "short version" of a policy. */
.summary{
  position:relative;
  background:var(--ivory);
  border-radius:var(--r);
  padding:28px 30px 28px 34px;
  margin-bottom:56px;
  box-shadow:inset 3px 0 0 var(--amber);
}
.summary__label{font-family:var(--serif);font-style:italic;color:var(--amber);margin-bottom:.4rem;}
.summary p{color:var(--ink);font-size:1.06rem;}
.summary p + p{margin-top:.6rem;}

.legal-note{font-size:.9rem;color:var(--stone);margin-top:1.2rem;}

/* ---------- 404 ---------- */
.notfound{
  min-height:calc(100vh - 54px);
  display:grid;place-items:center;
  padding:80px 0 110px;
  position:relative;overflow:hidden;
}
.notfound::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(38% 46% at 74% 40%,rgba(194,104,60,.13),transparent 70%),
    radial-gradient(50% 60% at 18% 82%,rgba(230,222,207,.7),transparent 70%);
}
.notfound__inner{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:64px;align-items:center;
}
.notfound__code{
  font-family:var(--serif);font-weight:300;font-variant-numeric:oldstyle-nums;
  font-size:clamp(5rem,15vw,11rem);line-height:.9;letter-spacing:-0.03em;
  color:var(--ink);
}
.notfound__title{
  font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:600;line-height:1.12;
  letter-spacing:-0.015em;max-width:18ch;margin-top:1.4rem;
}
.notfound__text{color:var(--ink-80);max-width:42ch;margin-top:1.1rem;font-size:1.08rem;}
.notfound__de{
  font-family:var(--serif);font-style:italic;color:var(--stone);
  margin-top:.9rem;max-width:42ch;
}
.notfound__actions{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:2.4rem;}
.notfound__mark{justify-self:center;width:min(100%,330px);overflow:visible;}
/* The amber square starts in its slot beside the V, slips out and bounces
   to rest below it. The dashed outline marks where it belongs. Offsets are
   SVG user units: slot centre (312,270) minus resting centre (372,344). */
.notfound__dot{animation:dot-rest 2.4s var(--ease) .5s both;}
@keyframes dot-rest{
  0%,18%{transform:translate(-60px,-75px);}
  58%{transform:translate(0,0);}
  70%{transform:translate(0,-22px);}
  82%{transform:translate(0,0);}
  90%{transform:translate(0,-6px);}
  100%{transform:translate(0,0);}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .legal-grid{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:44px;}
  .legal-toc{position:static;}
  .legal-toc ol,.legal-toc > .legal-toc__label{display:none;}
  .legal-toc__docs{margin-top:0;padding-top:0;border-top:none;}
  .legal-toc__docs ul{flex-direction:row;flex-wrap:wrap;gap:8px 20px;}
  .legal-head{padding:64px 0 44px;}
  .notfound__inner{grid-template-columns:1fr;gap:28px;}
  .notfound__mark{order:-1;justify-self:start;width:min(46vw,190px);}
}
@media (max-width:640px){
  .pagebar__home span{display:none;}
  .pagebar__right{gap:16px;}
  .facts{grid-template-columns:minmax(0,1fr);}
  .facts dd{overflow-wrap:anywhere;}
  .facts dt{padding-bottom:0;border-bottom:none;}
  .facts dd{padding-top:4px;}
  .summary{padding:22px 22px 22px 26px;}
}
@media (prefers-reduced-motion:reduce){
  .notfound__dot{animation:none;}
  .pagebar__home .icon,.legal-toc ol a,.legal-body a{transition:none;}
}