/* eigene-rechtsabteilung.de — die drei Satz-Geschichten (P3b).
   Dunkler Kopf, heller Koerper — dieselbe Aufteilung wie der Apex (E8-C), damit die
   Familie beim Sprung vom Apex in eine Geschichte nicht die Farbe wechselt.
   Der Kopf traegt Marke, Leseweg und den Satz; der Text steht auf hellem Grund,
   weil diese Seiten lange Strecken haben.
   Tokens identisch zum Apex; lokale Schriften, keine fremden Hosts.
   Operator-Entscheidung 2026-08-17: E8 bleibt Option C, gilt jetzt fuer alle vier Seiten. */

@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/DMSans-400.ttf') format('truetype');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/DMSans-500.ttf') format('truetype');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/DMSans-700.ttf') format('truetype');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/Inter-400.ttf') format('truetype');}
@font-face{font-family:'Inter';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/Inter-400i.ttf') format('truetype');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/Inter-700.ttf') format('truetype');}

:root{
  --graphite:#292D33;
  --silver:#C8D0DA;
  --slate:#8A97A5;      /* 4,65:1 auf Graphit */
  --sand:#C4A86A;       /* 6,03:1 auf Graphit — Sand im dunklen Kopf */
  --sand-ink:#8A6F32;   /* 5,26:1 auf Weiss — dieselbe Rolle im hellen Koerper */
  --ai:#729BD9;         /* 4,88:1 auf Graphit — NICHT der App-Wert #2D5FA8 */
  --merlot:#73343A;
  --merlot-dark:#5E2A2F;
  --bg:#f6f5f3;
  --bg-alt:#e9e7e3;
  --text:#2e2e2e;
  --body:#4A5561;
  --muted:#5F6B78;
  --border:#DDD8CC;
  --gruen:#2E7D32;
  --gelb:#B26A00;
  --rot:#A32020;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;
}
a{color:var(--merlot);text-decoration:none;}
a:hover{color:var(--merlot-dark);text-decoration:underline;}
/* #2D5FA8 hat auf Graphit nur 2,18:1 — auf dunklem Grund der hellere Ton. */
:focus-visible{outline:3px solid var(--ai);outline-offset:3px;}
.wrap{max-width:1120px;margin:0 auto;}

/* ============ Kopfleiste ============ */
.topbar{background:var(--graphite);border-bottom:1px solid rgba(255,255,255,.08);}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem clamp(1.25rem,5vw,2rem);
}
.brand{display:flex;align-items:center;gap:.7rem;}
/* Der Ring fuellt sein Bild nur zu 81 % — Kastenmass = Sichthoehe / 0,81 */
.brand img{width:38px;height:38px;object-fit:contain;flex:none;}
.wordmark{
  font-family:'Inter',sans-serif;font-weight:700;letter-spacing:.12em;
  margin-right:-.12em;color:#fff;font-size:1.15rem;line-height:1;display:block;
}
.wordmark i{font-weight:400;font-style:italic;}
.wordmark .a{font-weight:400;}
.tagline{
  display:block;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate);margin-top:.28rem;
}
.home{font-size:.9rem;color:var(--slate);}
.home:hover{color:#fff;}

/* ============ Der Leseweg: Beschreiben - Aktivieren - Handeln ============ */
.steps{background:var(--graphite);}
.steps .wrap{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem;
  padding:.7rem clamp(1.25rem,5vw,2rem);
  font-size:.82rem;letter-spacing:.03em;
}
.steps a,.steps span.here{padding:.2rem 0;}
/* Merlot traegt auf Graphit nicht (1,50:1) — die aktive Marke steht in Sand. */
.steps span.here{font-weight:700;color:#fff;border-bottom:2px solid var(--sand);}
.steps a{color:var(--slate);}
.steps a:hover{color:#fff;}
.steps .sep{color:#4B535C;margin:0 .35rem;}

/* ============ Kopf der Geschichte ============ */
.head{
  background:var(--graphite);
  padding:clamp(2.75rem,7vw,4.75rem) clamp(1.25rem,5vw,2rem) clamp(3rem,7vw,5rem);
}
.head h1{
  font-size:clamp(2.1rem,6vw,3.6rem);font-weight:700;color:#fff;
  letter-spacing:-.025em;line-height:1.06;max-width:20ch;
}
/* Im hellen Koerper waere das --sand-ink; auf Graphit ist es das Sand des Flyers. */
.subline{
  font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:700;color:var(--sand);
  margin-top:1rem;max-width:36ch;line-height:1.3;
}
.lead{font-size:clamp(1.05rem,1.9vw,1.2rem);color:var(--silver);margin-top:1.4rem;max-width:58ch;}

/* ============ Baender ============ */
.band{padding:clamp(2.5rem,6.5vw,4.5rem) clamp(1.25rem,5vw,2rem);}
.band--alt{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
/* KEIN text-transform — die Produktschreibweise LEGALinhouse muss erhalten bleiben. */
.eyebrow{
  display:flex;align-items:center;gap:.65rem;margin-bottom:.9rem;
  font-size:.92rem;font-weight:700;letter-spacing:.06em;color:var(--merlot);
}
.eyebrow img{width:28px;height:28px;object-fit:contain;flex:none;}
.band h2{
  font-size:clamp(1.6rem,3.6vw,2.35rem);font-weight:700;color:var(--graphite);
  letter-spacing:-.02em;line-height:1.15;margin-bottom:1.2rem;max-width:24ch;
}
.band p{max-width:62ch;font-size:1.05rem;color:var(--body);}
.band p + p{margin-top:.95rem;}
/* p.<klasse>, nicht nur .<klasse> — sonst gewinnt `.band p` auf Spezifitaet. */
.band p.statement{font-size:clamp(1.2rem,2.4vw,1.5rem);font-weight:700;color:var(--graphite);max-width:30ch;}

/* Begriffsliste: Fall / Vertrag / Forderung / Marken & Domains */
.defs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);margin:1.75rem 0;}
.defs > div{background:#fff;padding:1.6rem 1.5rem 1.75rem;}
.defs h3{font-size:1.2rem;font-weight:700;color:var(--graphite);margin-bottom:.55rem;}
.defs h3::after{content:"";display:block;width:34px;height:3px;background:var(--merlot);margin-top:.65rem;}
.defs p{font-size:.98rem;color:var(--body);max-width:none;}

/* Nummerierte Schritte */
.stepsx{list-style:none;counter-reset:s;margin:1.75rem 0;display:grid;gap:1px;background:var(--border);border:1px solid var(--border);}
/* Direkte Kinder — sonst erbt die verschachtelte Ampel-Liste den Zaehler. */
.stepsx > li{background:#fff;padding:1.5rem;counter-increment:s;}
.stepsx > li::before{
  content:counter(s,decimal-leading-zero);
  font-family:'Inter',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  color:var(--sand-ink);display:block;margin-bottom:.7rem;
}
.stepsx h3{font-size:1.15rem;font-weight:700;color:var(--graphite);margin-bottom:.45rem;}
.stepsx p{font-size:.98rem;color:var(--body);max-width:none;}

/* Ampel — Farbe ist nie der einzige Traeger, das Label steht daneben */
.ampel{list-style:none;margin:1.25rem 0 0;display:grid;gap:.6rem;max-width:44ch;}
.ampel li{display:flex;align-items:baseline;gap:.75rem;font-size:1rem;color:var(--body);}
.ampel .dot{width:12px;height:12px;border-radius:50%;flex:none;transform:translateY(1px);}
.ampel .g{background:var(--gruen);}
.ampel .y{background:var(--gelb);}
.ampel .r{background:var(--rot);}
.ampel b{font-weight:700;color:var(--graphite);min-width:3.5rem;display:inline-block;}

/* Aufzaehlungen */
.list{list-style:none;margin:1.5rem 0;display:grid;gap:.9rem;max-width:66ch;}
.list li{position:relative;padding-left:1.5rem;font-size:1.05rem;color:var(--body);}
.list li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--merlot);}

/* Die Payoff-Zeile — auf dem Flyer in Sand gesetzt */
.band p.payoff{
  border-left:5px solid var(--sand-ink);padding:.35rem 0 .35rem clamp(1rem,2.5vw,1.6rem);
  margin:1.8rem 0;
  font-size:clamp(1.3rem,2.9vw,1.85rem);font-weight:700;color:var(--sand-ink);
  line-height:1.25;max-width:26ch;letter-spacing:-.01em;
}

/* Einwaende */
.qa{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);margin-top:1.75rem;}
.qa > div{background:#fff;padding:1.6rem 1.5rem;}
.qa h3{font-size:1.2rem;font-weight:700;color:var(--merlot);margin-bottom:.6rem;}
.qa p{font-size:1rem;color:var(--body);max-width:none;}

/* Was es ist / was es nicht ist — nebeneinander */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1.75rem,4vw,3.5rem);}
.duo h2{font-size:clamp(1.4rem,2.8vw,1.8rem);margin-bottom:.4rem;}
/* Die Verneinungen bekommen einen neutralen Strich, keinen Merlot-Akzent */
.list--off li::before{background:var(--slate);}

/* Grenze / Rahmen */
.frame{border-left:4px solid var(--merlot);padding-left:clamp(1.1rem,3vw,2rem);}

/* Uebergang zur naechsten Geschichte */
.next{background:var(--graphite);padding:clamp(2.25rem,5.5vw,3.25rem) clamp(1.25rem,5vw,2rem);}
.next .kicker{font-size:1.02rem;color:var(--silver);max-width:62ch;}
.next a{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:.9rem;
  font-size:clamp(1.2rem,2.6vw,1.7rem);font-weight:700;color:#fff;letter-spacing:-.01em;
}
.next a:hover{color:#fff;text-decoration:underline;}
.next .arrow{transition:transform .15s ease;}
.next a:hover .arrow{transform:translateX(5px);}

/* Handlungsknoepfe */
.cta-row{margin-top:2.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.6rem;}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;background:var(--merlot);color:#fff;
  font-weight:700;padding:1rem 2.1rem;font-size:1.05rem;
  transition:background .15s ease,transform .15s ease;
}
.btn:hover{background:var(--merlot-dark);color:#fff;text-decoration:none;transform:translateY(-2px);}
.btn .arrow{transition:transform .15s ease;}
.btn:hover .arrow{transform:translateX(4px);}
.cta-note{font-size:.95rem;color:var(--muted);}

/* ============ Fuss ============ */
footer{background:var(--graphite);color:var(--slate);padding:2.5rem clamp(1.25rem,5vw,2rem);font-size:.88rem;}
footer .wrap{display:flex;flex-wrap:wrap;gap:.9rem 2rem;justify-content:space-between;}
footer a{color:var(--silver);}
footer a:hover{color:#fff;}
footer nav a{margin-right:1.25rem;}
.kannmann{color:#6B7683;font-size:.82rem;margin-top:1.5rem;}

@media (max-width:640px){
  .topbar .wrap{flex-wrap:wrap;}
  .ampel b{min-width:0;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}