/* ============================================================
   Gemeinsame Basis aller Unterseiten: Tokens, Schrift, Reset,
   Kopf und Fuß.

   Genutzt von impressum.html, datenschutz.html, agb.html und den
   Leistungsseiten. Die Leistungsseiten laden zusätzlich service.css
   mit den Marketing-Bausteinen.

   index.html bleibt self-contained (doppelklickbar, stack-neutral).
   Die Tokens hier sind mit denen in index.html identisch: wer eine
   Farbe ändert, ändert sie an beiden Stellen.

   Hieß bis 17.08.2026 legal.css. Umbenannt, weil sie längst nicht
   mehr nur die Rechtsseiten trägt.
   Liegt im selben Verzeichnis: kein externer Host, Build-Regel 3 bleibt.
   ============================================================ */

@font-face{
  font-family:'Archivo';
  src:url('archivo-var.woff2') format('woff2-variations');
  font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF;
}

:root{
  --lime:#8DBA15;
  --lime-deep:#4E6B0A;
  --ink:#11130F;
  --paper:#F7F6F1;
  --soft:#EDF3DB;
  --muted:#5E655D;
  --card:#FCFBF7;
  --paper-72:rgba(247,246,241,.72);
  --paper-55:rgba(247,246,241,.55);
  --hair:rgba(17,19,15,.12);
  --hair-d:rgba(247,246,241,.14);
  --f:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gut:clamp(1.25rem,4vw,2.75rem);
  --sec:clamp(3rem,5vw,4.5rem);
  --wrap:min(92vw,780px);
  --hh:76px;
  --e:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 1rem);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f);font-size:1.0625rem;line-height:1.7;
  font-variation-settings:'wdth' 100;font-kerning:normal;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px}
/* Skip-Link: erste Tabulatorstation der Seite, ueberspringt Kopf und
   Navigation. Nur sichtbar, solange er den Fokus traegt. Bewusst NICHT
   display:none -- so etwas nimmt die Tastatur nicht mehr an. */
.skip-link{
  position:absolute;left:.75rem;top:-4rem;z-index:200;
  padding:.7rem 1.1rem;border-radius:8px;
  background:var(--ink);color:var(--paper);
  font-size:.9375rem;font-variation-settings:'wght' 700;
  text-decoration:none;transition:top .15s ease
}
.skip-link:focus{top:.75rem}
@media (prefers-reduced-motion:reduce){.skip-link{transition:none}}

.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}

/* ---------- Kopf ---------- */
.hdr{
  position:sticky;top:0;z-index:30;background:var(--paper);
  border-bottom:1px solid var(--hair);
}
.hdr__in{display:flex;align-items:center;gap:1.5rem;min-height:var(--hh);width:min(100% - var(--gut)*2,min(92vw,1760px));margin-inline:auto}
/* Klickfläche auf 44px, wie auf der Startseite. Der Kopf ist 76px hoch,
   das Logo bleibt darin vertikal zentriert. */
.hdr__logo{flex:none;display:flex;align-items:center;gap:.5rem;min-height:44px}
/* Bildmarke links, Wortmarke rechts. Die Marke ist dekorativ (alt="", aria-hidden) —
   den Namen trägt die Wortmarke daneben, sonst läse ein Screenreader ihn doppelt. */
.hdr__mark{width:38px;height:38px;flex:none}
.hdr__word{width:116px;height:auto;flex:none}
.hdr__back{
  margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  text-decoration:none;font-size:.9375rem;font-weight:600;
}
.hdr__back svg{width:17px;height:17px;rotate:180deg}
@media (hover:hover) and (pointer:fine){.hdr__back:hover{color:var(--lime-deep)}}

/* ---------- Fließtext ---------- */
main{padding-block:clamp(2.5rem,6vw,5rem) var(--sec)}

.lead{
  margin:0 0 .6rem;font-size:.9375rem;font-weight:700;line-height:1;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lime-deep);
}
h1{
  margin:0 0 .35em;max-width:none;
  font-size:clamp(2rem,5.4vw,3.5rem);line-height:.98;
  letter-spacing:-.01em;text-transform:uppercase;
  font-weight:800;font-variation-settings:'wdth' 66;
}
h2{
  margin:2.6rem 0 .8rem;font-size:clamp(1.1875rem,1.6vw,1.4375rem);
  line-height:1.25;letter-spacing:-.015em;font-weight:700;
}
h3{margin:1.8rem 0 .5rem;font-size:1.0625rem;font-weight:700;line-height:1.35}
p,li{max-width:68ch}
p{margin:0 0 1.1em;text-wrap:pretty}
ul,ol{margin:0 0 1.1em;padding-left:1.3em}
li{margin-bottom:.4em}
strong{font-weight:700}
/* Fließtext-Links. Bewusst OHNE :not(.btn): das hätte die Spezifität auf 0-2-1
   gehoben und damit auch `.ftr a` überstimmt (gemessen 3,05 : 1 im Footer).
   Die Schaltflächen setzen ihre Farbe stattdessen in service.css über `a.btn`,
   gleiche Spezifität, aber später geladen. */
a[href]{color:var(--lime-deep);text-underline-offset:.2em}
@media (hover:hover) and (pointer:fine){a[href]:hover{color:var(--ink)}}
hr{border:0;border-top:1px solid var(--hair);margin:2.6rem 0}

.updated{font-size:.875rem;color:var(--muted);margin-bottom:2.5rem}

/* Offene Kundeninfo — identisch zur Kennzeichnung in index.html */
.tbd{
  display:inline-block;background:var(--soft);color:var(--lime-deep);
  font-weight:700;padding:.05em .45em;border-radius:5px;
}
/* Hinweiskasten für Abschnitte, die vor dem Launch geprüft werden müssen */
.note{
  margin:1.5rem 0;padding:1.1rem 1.25rem;border-radius:14px;
  background:var(--soft);border:1px solid rgba(78,107,10,.25);
  font-size:.9375rem;line-height:1.6;
}
.note p:last-child{margin-bottom:0}
.note b{display:block;margin-bottom:.35rem}

/* Hervorgehobener Absatz im Fließtext — für Klauseln, die der Leser wirklich
   sehen muss (Widerrufsbelehrung, Wertsachen, Haftungsgrenze). Ruhiger als
   .note: linke Kante statt Vollfläche, damit mehrere davon auf einer Seite
   nicht wie Warnhinweise wirken. */
.callout{
  margin:1.4rem 0;padding:.15rem 0 .15rem 1.15rem;
  border-left:3px solid var(--lime-deep);
}
.callout h3{margin-top:.6rem}
.callout p:last-child{margin-bottom:0}

/* Definitionsliste für die Datenverarbeitungs-Tabellen */
.dl{margin:0 0 1.4em;padding:0}
.dl>div{
  display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:.4rem 1.5rem;
  padding:.85rem 0;border-top:1px solid var(--hair);
}
.dl>div:last-child{border-bottom:1px solid var(--hair)}
.dl dt{font-weight:650}
.dl dd{margin:0;color:var(--muted)}
.dl dd .dd-sub{display:block;margin-top:.2rem;font-size:.875rem}
@media (max-width:620px){
  .dl>div{grid-template-columns:1fr;gap:.15rem}
  .hdr__mark{width:32px;height:32px}
  .hdr__word{width:96px}
}

/* ---------- Fuß ---------- */
.ftr{background:var(--ink);color:var(--paper);padding-block:2.5rem 2rem}
.ftr__in{
  width:min(100% - var(--gut)*2,min(92vw,1760px));margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between;
  font-size:.8125rem;color:var(--paper-55);
}
.ftr nav{display:flex;gap:0 1.25rem;flex-wrap:wrap;align-items:center}
/* Footer-Navigation, kein Fließtext — Ziele waren 22px hoch. */
.ftr a{color:var(--paper-72);text-decoration:none;font-weight:600;
  display:inline-flex;align-items:center;min-height:44px}
@media (hover:hover) and (pointer:fine){.ftr a:hover{color:var(--lime)}}
.ftr__soc{gap:.45rem}
.ftr__soc svg{width:18px;height:18px;flex:none}
.ftr__mark{display:inline-flex;align-items:center}
.ftr__mark img:last-child{width:104px;height:auto;opacity:.9}
/* Auf Anthrazit trägt die Bildmarke ihre Negativ-Fassung: das Dunkelgrün der
   Positiv-Marke kommt dort auf gemessene 1,35 : 1 und wäre unsichtbar. */
.brand__mark{width:30px;height:30px;flex:none;opacity:.9;margin-right:.5rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}