/* rechtsabteilung-digital.de — ein Stylesheet fuer alle fuenf Seiten.
   Familie: dieselben Tokens wie eigene-rechtsabteilung.de (assets/story.css),
   damit der Sprung zwischen den beiden Werbedomains keinen Bruch macht.
   Unterschied in der Rolle, nicht in der Farbe: diese Seite ist eine
   Argumentstrecke, kein Angebot — laengere Lesestrecken, ruhigerer Kopf,
   keine Punch-Zeile ueber den halben Bildschirm.
   Lokale Schriften, keine fremden Hosts. */

@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-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;       /* 7,7:1 auf Weiss */
  /* Die Schwesterseite fuehrt hier #5F6B78 — 4,99:1 auf --bg, aber nur 4,40:1 auf
     --bg-alt, und .cta-note steht hier auch auf dem alt-Band. Um 5 % abgedunkelt:
     5,45:1 auf --bg, 4,80:1 auf --bg-alt, damit beide Gruende AA halten. */
  --muted:#5A6572;
  --border:#DDD8CC;
  --gruen:#2E7D32;
  --gelb:#B26A00;
  --rot:#A32020;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
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;}
: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: die vier Fragen ============ */
.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 ============ */
.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(2rem,5.4vw,3.3rem);font-weight:700;color:#fff;
  letter-spacing:-.025em;line-height:1.08;max-width:22ch;
}
.subline{
  font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:700;color:var(--sand);
  margin-top:1rem;max-width:40ch;line-height:1.3;
}
.lead{font-size:clamp(1.05rem,1.9vw,1.2rem);color:var(--silver);margin-top:1.4rem;max-width:58ch;}
.kicker{
  font-family:'Inter',sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--sand);display:block;margin-bottom:1rem;
}

/* ============ 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:26ch;
}
.band h3{font-size:1.2rem;font-weight:700;color:var(--graphite);margin-bottom:.5rem;}
.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:32ch;}

/* Die Payoff-Zeile — im hellen Koerper in Sand-Ink */
.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.25rem,2.7vw,1.75rem);font-weight:700;color:var(--sand-ink);
  line-height:1.28;max-width:30ch;letter-spacing:-.01em;
}

/* 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);}

/* Begriffs-/Unterschiedskarten */
.defs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,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.18rem;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;}
.defs p + p{margin-top:.7rem;}

/* 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 eine verschachtelte 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.5rem 0 0;display:grid;gap:.7rem;max-width:56ch;}
.ampel li{display:flex;align-items:baseline;gap:.75rem;font-size:1.02rem;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:4.2rem;display:inline-block;}

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

/* Die vier Fragen auf der Startseite */
.reads{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);margin-top:1.75rem;}
.reads a{
  background:#fff;padding:1.7rem 1.6rem 1.85rem;display:block;color:inherit;
  transition:background .18s ease;
}
.reads a:hover{background:#fbfaf8;text-decoration:none;}
.reads .role{
  font-family:'Inter',sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sand-ink);display:block;margin-bottom:.8rem;
}
.reads h3{font-size:1.16rem;font-weight:700;color:var(--graphite);line-height:1.25;margin-bottom:.6rem;}
.reads p{font-size:.98rem;color:var(--body);line-height:1.55;max-width:none;}
.reads .more{display:block;margin-top:1rem;font-size:.92rem;font-weight:700;color:var(--merlot);}
.reads a:hover .more{color:var(--merlot-dark);text-decoration:underline;}

/* Pflichthinweis nach RDG — auf jeder Seite, unter dem Text */
.note{
  background:#fff;border-left:4px solid var(--merlot);border-top:1px solid var(--border);
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:1.35rem 1.5rem;margin-top:2rem;max-width:66ch;
}
.note p{font-size:.95rem;color:var(--body);max-width:none;}
.note p + p{margin-top:.6rem;}

/* Uebergang zur naechsten Frage */
.next{background:var(--graphite);padding:clamp(2.25rem,5.5vw,3.25rem) clamp(1.25rem,5vw,2rem);}
.next .kicker{margin-bottom:.5rem;}
.next .nextline{font-size:1.02rem;color:var(--silver);max-width:62ch;}
.next a.nextlink{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:.9rem;
  font-size:clamp(1.15rem,2.5vw,1.6rem);font-weight:700;color:#fff;letter-spacing:-.01em;
}
.next a.nextlink:hover{color:#fff;text-decoration:underline;}
.next .arrow{transition:transform .15s ease;}
.next a.nextlink: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);}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--merlot);color:var(--merlot);
  font-weight:700;padding:.9rem 1.7rem;font-size:1rem;
  transition:background .15s ease,color .15s ease;
}
.btn-ghost:hover{background:var(--merlot);color:#fff;text-decoration:none;}
.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;}
/* Die Schwesterseite setzt diese Zeile in #6B7683 — das sind 3,00:1 auf Graphit und
   reisst AA fuer kleine Schrift. Hier traegt sie zusaetzlich den Copyright-Hinweis,
   also steht sie in --slate (4,65:1). */
.footline{color:var(--slate);font-size:.82rem;margin-top:1.5rem;}

@media (max-width:640px){
  .topbar .wrap{flex-wrap:wrap;}
  .ampel b{min-width:0;}
  .btn{padding:.95rem 1.6rem;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;transition:none !important;}
}