/* Dropprinters · Rechtliche Seiten (Impressum, Datenschutz) und 404 · Präfix lg-
   Ruhiges Textlayout: heller Kopf mit Pastell-Fades (v7), Text auf heller Fläche, Zeilenlänge höchstens ca. 68 Zeichen.
   Nutzt nur Tokens aus tokens.css und Basisklassen aus base.css (keine Umdefinition). */

/* ---------- Kopf (helle Bühne mit Pastell-Fades, v7) ---------- */
.lg-hero{padding-block:calc(var(--nav-top) + var(--nav-h) + clamp(56px,8vw,104px)) clamp(48px,6vw,80px)}
.lg-hero__inner{display:grid;gap:20px;max-width:880px}
.lg-hero h1{font-size:clamp(40px,7vw,96px);line-height:1;padding-bottom:.04em}
.lg-hero .lead{max-width:52ch;color:var(--ink-1)}
.lg-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
/* Hinweis-Badges über den Fades: Milch-Chip (v7) */
.lg-meta .badge{color:var(--ink-1);background:rgba(255,255,255,.62);border-color:rgba(10,10,12,.09);
  -webkit-backdrop-filter:blur(12px) saturate(var(--glass-sat));backdrop-filter:blur(12px) saturate(var(--glass-sat))}

/* ---------- Textfläche (hell) ---------- */
.lg-page{padding-block:clamp(56px,8vw,112px) clamp(80px,10vw,136px)}
.lg-layout{display:grid;grid-template-columns:minmax(0,240px) minmax(0,68ch);gap:clamp(32px,6vw,96px);justify-content:start}
.lg-layout--single{grid-template-columns:minmax(0,68ch)}

/* Inhaltsverzeichnis (nur Desktop, sticky) */
.lg-toc{position:sticky;top:calc(var(--nav-top) + var(--nav-h) + 32px);align-self:start;display:grid;gap:14px}
.lg-toc__title{font-family:var(--font-accent);font-weight:800;font-style:italic;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dark-2)}
.lg-toc ol{display:grid;gap:2px;padding:0;list-style:none;counter-reset:lg}
.lg-toc a{display:block;padding:6px 0 6px 14px;border-left:1px solid rgba(10,10,12,.12);font-size:14px;line-height:1.4;color:var(--ink-dark-1);
  transition:color 200ms ease,border-color 200ms ease}
@media (hover:hover){.lg-toc a:hover{color:var(--ink-dark-0);border-left-color:var(--ink-dark-0)}}

.lg-body{display:grid;gap:clamp(40px,5vw,56px);min-width:0}
.lg-sec{display:grid;gap:14px;scroll-margin-top:calc(var(--nav-top) + var(--nav-h) + 24px)}
.lg-sec h2{font-size:clamp(24px,2.6vw,32px);line-height:1.15;letter-spacing:-.02em;padding-bottom:2px}
.lg-sec h3{font-size:18px;line-height:1.3;letter-spacing:-.01em;margin-top:8px}
.lg-sec p,.lg-sec li{color:var(--ink-dark-1);overflow-wrap:break-word}
.lg-sec strong{color:var(--ink-dark-0);font-weight:600}
.lg-sec ul{display:grid;gap:8px;margin:0;padding-left:1.15em}
.lg-sec li::marker{color:var(--ink-dark-2)}
.lg-sec a{color:var(--ink-dark-0);text-decoration:underline;text-decoration-color:rgba(10,10,12,.3);text-underline-offset:3px;
  transition:text-decoration-color 200ms ease}
@media (hover:hover){.lg-sec a:hover{text-decoration-color:currentColor}}
.lg-sec address{font-style:normal;color:var(--ink-dark-0);line-height:1.6}

/* Angaben als Schlüssel-Wert-Liste (Impressum) */
.lg-facts{display:grid;gap:0;margin:0;border-top:1px solid rgba(10,10,12,.1)}
.lg-facts>div{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:8px 24px;padding-block:14px;border-bottom:1px solid rgba(10,10,12,.1)}
.lg-facts dt{font-size:14px;font-weight:600;color:var(--ink-dark-2);padding-top:2px}
.lg-facts dd{margin:0;color:var(--ink-dark-0)}
.lg-note{font-size:14.5px;color:var(--ink-dark-2)}

@media (max-width:960px){
  .lg-layout{grid-template-columns:minmax(0,1fr)}
  .lg-toc{display:none}
}
@media (max-width:560px){
  .lg-facts>div{grid-template-columns:minmax(0,1fr);gap:2px}
}

/* ---------- 404 ---------- */
.lg-404{min-height:100svh;display:grid;align-items:center;padding-block:calc(var(--nav-top) + var(--nav-h) + 48px) 72px}
.lg-404__card{display:grid;gap:22px;max-width:760px;padding:clamp(28px,5vw,56px);border-radius:calc(var(--r-xl) + 8px)}
.lg-404__code{font-family:var(--font-accent);font-weight:800;font-style:italic;font-size:clamp(88px,16vw,168px);line-height:.86;
  letter-spacing:-.01em;color:var(--text-grad-solid);padding-right:.06em}
/* Verlaufsschrift wie die Farb-Fades (v7); ohne background-clip bleibt --text-grad-solid */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .lg-404__code{background:var(--text-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
.lg-404 h1{font-size:clamp(34px,5vw,60px);line-height:1.02;padding-bottom:.04em}
.lg-404__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.lg-404__links li:first-child{grid-column:1/-1}
.lg-404__links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px 18px;
  border-radius:var(--r-md);border:1px solid rgba(10,10,12,.10);background:rgba(255,255,255,.6);color:var(--ink-0);font-weight:500;
  transition:background-color 200ms ease,border-color 200ms ease,transform 160ms var(--ease-out)}
.lg-404__links a svg{width:18px;height:18px;flex:none;fill:currentColor;opacity:.7}
.lg-404__links a:active{transform:scale(.98)}
@media (hover:hover){.lg-404__links a:hover{background:rgba(255,255,255,.9);border-color:rgba(10,10,12,.2)}}
@media (max-width:560px){.lg-404__links{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-transparency:reduce){.lg-404__links a,.lg-meta .badge{background:var(--light-1)}}
