/* ==========================================================================
   FocusRecht — Design-System (Focus-Familie)
   1:1 aus dem Claude-Design-Entwurf: Navy #16233B + Gold #CBA85E + Paper #F7F6F3,
   Archivo (Headings) / IBM Plex Sans (Text). Gerechtigkeits-Waage als Wappen.
   ========================================================================== */

:root {
  --navy:      #16233B;
  --paper:     #F7F6F3;
  --white:     #ffffff;
  --gold:      #CBA85E;
  --gold-h:    #d8ba76;
  --gold-ink:  #16233B;
  --gold-soft: rgba(203,168,94,.12);
  --text-hi:   #F7F6F3;
  --muted:     #B4BED0;
  --dark:      #16233B;
  --gray:      #4A5568;
  --line:      rgba(22,35,59,.1);
  --line-lt:   rgba(247,246,243,.28);
  --head: 'Archivo', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --wrap: 1200px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--dark); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }

/* --- Typografie --- */
h1,h2,h3 { font-family: var(--head); margin: 0; letter-spacing: -.02em; line-height: 1.15; }
.h1 { font-family: var(--head); font-weight: 700; font-size: clamp(32px, 4.6vw, 50px); line-height: 1.14; letter-spacing: -.02em; }
.h2 { font-family: var(--head); font-weight: 700; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; }
.h3 { font-family: var(--head); font-weight: 700; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.2; }
.lead { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; }
.eyebrow { font: 600 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.gold { color: var(--gold); }
.on-navy { color: var(--text-hi); }
.on-navy .lead { color: var(--muted); }

/* --- Buttons --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px/1 var(--head); border-radius: 8px; padding: 14px 24px; cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s, transform .1s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-gold { background: var(--gold); color: var(--gold-ink); }
.btn-gold:hover { background: var(--gold-h); }
.btn-outline { background: transparent; color: var(--text-hi); border-color: var(--line-lt); }
.btn-outline:hover { border-color: rgba(247,246,243,.7); }
.btn-ghost-dark { background: transparent; color: var(--dark); border-color: rgba(22,35,59,.2); }
.btn-ghost-dark:hover { border-color: var(--gold); }
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn-block { width: 100%; }

/* --- Header --- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--navy); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand__mark { width: 30px; height: 30px; border: 1.5px solid var(--gold); border-radius: 7px; display: flex; align-items: center; justify-content: center; font: 700 16px/1 var(--head); color: var(--gold); }
.brand__name { font: 700 22px/1 var(--head); color: var(--text-hi); letter-spacing: -.01em; }
.brand__name .gold { color: var(--gold); }
.brand-row { display: flex; align-items: center; gap: 16px; }
.fd-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-lt); border-radius: 20px; padding: 5px 11px; font: 500 12px/1 var(--body); color: rgba(247,246,243,.62); }
.fd-chip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.nav { display: flex; align-items: center; gap: 34px; }
.nav__links { display: flex; gap: 30px; }
.nav__links a { color: rgba(247,246,243,.82); font: 500 15px/1 var(--body); transition: color .15s; }
.nav__links a:hover, .nav__links a.active { color: var(--text-hi); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 4px; padding: 6px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--text-hi); border-radius: 2px; }
.nav-mobile { display: none; flex-direction: column; gap: 2px; padding: 6px 40px 20px; background: var(--navy); border-top: 1px solid rgba(247,246,243,.08); }
.nav-mobile a { color: rgba(247,246,243,.85); font: 500 15px/1 var(--body); padding: 12px 0; }
.nav-mobile a.btn { color: var(--gold-ink); padding: 14px; margin-top: 8px; }
body.nav-open .nav-mobile { display: flex; }

/* --- Sektionen --- */
section { position: relative; }
.sec { padding: clamp(52px, 7vw, 80px) 0; }
.sec-sm { padding: clamp(40px, 5vw, 60px) 0; }
.navy { background: var(--navy); }
.paper { background: var(--paper); }
.center { text-align: center; }

/* --- Hero --- */
.hero { background: var(--navy); }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(203,168,94,.5); border-radius: 22px; padding: 8px 16px; font: 500 13px/1 var(--body); color: var(--gold); letter-spacing: .02em; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.hero h1 { margin: 24px 0 0; color: var(--text-hi); text-wrap: balance; }
.hero .lead { margin: 24px 0 0; color: var(--muted); max-width: 560px; text-wrap: pretty; }
.hero__cta { display: flex; align-items: center; gap: 16px; margin-top: 36px; flex-wrap: wrap; }
.hero__waage { display: flex; justify-content: center; align-items: center; }
.hero__waage img { width: min(360px, 82%); }

/* --- Beispiel-Antwort --- */
.answer-wrap { max-width: 880px; margin: 0 auto; }
.q-bubble { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.q-bubble div { background: var(--navy); color: var(--text-hi); padding: 16px 22px; border-radius: 16px 16px 4px 16px; font: 500 17px/1.5 var(--body); max-width: 560px; }
.answer-card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 30px rgba(22,35,59,.07); overflow: hidden; }
.answer-card__head { padding: 28px 32px 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ac-sig { width: 30px; height: 30px; border-radius: 8px; background: var(--navy); display: flex; align-items: center; justify-content: center; font: 700 14px/1 var(--head); color: var(--gold); }
.ac-by { font: 600 14px/1 var(--body); color: var(--gray); }
.chip { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--gold); color: var(--dark); background: var(--gold-soft); border-radius: 7px; font: 600 14px/1 var(--body); padding: 8px 12px; }
.answer-card__body { padding: 16px 32px 0; }
.lawquote { border-left: 3px solid var(--gold); background: rgba(203,168,94,.06); padding: 16px 20px; border-radius: 0 8px 8px 0; }
.lawquote p:first-child { margin: 0; font: italic 400 16px/1.6 var(--body); color: var(--dark); }
.lawquote .src { margin: 10px 0 0; font: 500 13px/1 var(--body); color: var(--gray); }
.klartext { margin-top: 22px; }
.klartext .k { margin: 0 0 8px; font: 600 15px/1 var(--head); color: var(--dark); }
.klartext p { margin: 0; font: 400 16px/1.65 var(--body); color: var(--gray); text-wrap: pretty; }
.bge { margin-top: 22px; display: flex; align-items: flex-start; gap: 14px; background: var(--paper); border: 1px solid rgba(22,35,59,.08); border-radius: 12px; padding: 16px 18px; }
.bge__ico { flex: none; width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid var(--gold); display: flex; align-items: center; justify-content: center; font: 700 15px/1 var(--head); color: var(--gold); }
.bge p:first-child { margin: 0; font: 600 14px/1.3 var(--body); color: var(--dark); }
.bge p:last-child { margin: 5px 0 0; font: 400 16px/1.6 var(--body); color: var(--gray); }
.disclaimer { margin: 24px 0 28px; display: flex; align-items: flex-start; gap: 12px; background: rgba(74,85,104,.07); border: 1px solid rgba(74,85,104,.14); border-radius: 10px; padding: 15px 17px; }
.disclaimer__i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--gray); color: var(--paper); display: flex; align-items: center; justify-content: center; font: 700 12px/1 var(--head); margin-top: 1px; }
.disclaimer p { margin: 0; font: 400 16px/1.6 var(--body); color: var(--gray); }

/* --- Features --- */
.fgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.fcard { background: var(--white); border: 1px solid rgba(22,35,59,.09); border-radius: 14px; padding: 26px 22px; }
.fcard__ico { width: 42px; height: 42px; border-radius: 11px; background: var(--gold-soft); display: flex; align-items: center; justify-content: center; font: 700 20px/1 var(--head); color: var(--gold); }
.fcard p:nth-child(2) { margin: 18px 0 6px; font: 600 17px/1.3 var(--head); color: var(--dark); }
.fcard p:last-child { margin: 0; font: 400 16px/1.6 var(--body); color: var(--gray); }

/* --- Price teaser --- */
.priceteaser { display: flex; align-items: center; justify-content: space-between; gap: 32px; background: rgba(247,246,243,.04); border: 1px solid rgba(203,168,94,.25); border-radius: 16px; padding: 36px 44px; flex-wrap: wrap; }
.priceteaser h3 { margin: 12px 0 6px; font: 700 30px/1.15 var(--head); color: var(--text-hi); }
.priceteaser p.small { margin: 0; font: 400 16px/1.5 var(--body); color: var(--muted); }
.priceteaser a { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font: 600 16px/1 var(--head); white-space: nowrap; }

/* --- Steps (So funktioniert's) --- */
.steps { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 56px; }
.step { display: flex; align-items: center; gap: 56px; }
.step--rev { flex-direction: row-reverse; }
.step__col { flex: 1; }
.step__num { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--gold); display: flex; align-items: center; justify-content: center; font: 700 18px/1 var(--head); color: var(--gold); }
.step h3 { margin: 20px 0 8px; font: 700 28px/1.2 var(--head); color: var(--dark); }
.step p { margin: 0; font: 400 17px/1.6 var(--body); color: var(--gray); max-width: 400px; }
.step__waage { display: flex; justify-content: center; }
.step__waage img { width: 230px; }
.mock { background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 30px rgba(22,35,59,.07); padding: 20px; }
.mock--q { display: flex; gap: 10px; align-items: center; }
.mock--q .qf { flex: 1; background: var(--paper); border: 1px solid rgba(22,35,59,.12); border-radius: 10px; padding: 14px 16px; font: 400 15px/1.4 var(--body); color: var(--dark); }
.mock--q .arrow { width: 44px; height: 44px; border-radius: 10px; background: var(--gold); display: flex; align-items: center; justify-content: center; font: 700 18px/1 var(--head); color: var(--gold-ink); flex: none; }
.mock--a .row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mock--a .lawtag { display: inline-flex; align-items: center; border: 1.5px solid var(--gold); color: var(--dark); background: var(--gold-soft); border-radius: 7px; font: 600 13px/1 var(--body); padding: 7px 10px; }
.mock--a .found { font: 600 13px/1 var(--body); color: var(--gray); }
.mock--a .quote { margin: 0 0 8px; font: italic 400 15px/1.55 var(--body); color: var(--dark); }
.mock--a .plain { margin: 0 0 16px; font: 400 16px/1.6 var(--body); color: var(--gray); }

/* --- FAQ --- */
.faqgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1040px; margin: 0 auto; }
.faqcard { background: var(--white); border: 1px solid rgba(22,35,59,.09); border-radius: 12px; padding: 22px 24px; }
.faqcard p:first-child { margin: 0 0 7px; font: 600 16px/1.35 var(--head); color: var(--dark); }
.faqcard p:last-child { margin: 0; font: 400 16px/1.6 var(--body); color: var(--gray); }

/* --- Waitlist (Preise) --- */
.waitcard { max-width: 540px; margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 30px rgba(22,35,59,.07); padding: 36px; text-align: center; }
.waitcard img { width: 150px; margin: -6px auto 4px; }
.waitcard h2 { margin: 0 0 6px; font: 700 24px/1.2 var(--head); color: var(--dark); }
.waitcard p.small { margin: 0 0 22px; font: 400 15px/1.5 var(--body); color: var(--gray); }
.waitform { display: flex; gap: 10px; }
.field { flex: 1; box-sizing: border-box; padding: 14px; border: 1px solid rgba(22,35,59,.18); border-radius: 9px; font: 400 15px/1 var(--body); background: var(--paper); color: var(--dark); }
.field:focus { outline: none; border-color: var(--gold); }
.waitcard .fineprint { margin: 14px 0 0; font: 400 12.5px/1.4 var(--body); color: var(--gray); }
.plan-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; max-width: 1040px; margin: 48px auto 0; }
.plan { background: var(--white); border: 1px solid rgba(22,35,59,.09); border-radius: 14px; padding: 28px 24px; }
.plan__tag { display: inline-block; font: 600 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(203,168,94,.4); border-radius: 20px; padding: 5px 11px; }
.plan h3 { margin: 16px 0 0; font: 600 18px/1.35 var(--head); color: var(--dark); }
.plan p { margin: 8px 0 0; font: 400 16px/1.6 var(--body); color: var(--gray); }

/* --- Auth (Anmelden) --- */
.authwrap { display: flex; justify-content: center; }
.authcol { width: 440px; max-width: 100%; }
.authcol .top { text-align: center; margin-bottom: 26px; }
.authcol .top img { width: 120px; margin: 0 auto 10px; }
.authcol .top h1 { margin: 0 0 6px; font: 700 30px/1.2 var(--head); color: var(--text-hi); }
.authcol .top p { margin: 0; font: 400 15px/1.5 var(--body); color: var(--muted); }
.authcard { background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.28); padding: 34px 34px 30px; }
.tabs { display: flex; gap: 6px; background: var(--paper); border: 1px solid rgba(22,35,59,.08); border-radius: 11px; padding: 5px; margin-bottom: 26px; }
.tabs button { flex: 1; padding: 10px; border: none; border-radius: 8px; cursor: pointer; font: 600 14px/1 var(--head); background: transparent; color: var(--gray); transition: background .15s, color .15s; }
.tabs button.active { background: var(--navy); color: var(--text-hi); }
.authcard h3 { margin: 0 0 4px; font: 700 24px/1.2 var(--head); color: var(--dark); }
.authcard .sub { margin: 0 0 22px; font: 400 16px/1.6 var(--body); color: var(--gray); }
.authlabel { display: block; font: 600 12px/1 var(--body); color: var(--dark); letter-spacing: .02em; margin-bottom: 7px; }
.authcard .field { width: 100%; margin-bottom: 16px; }
.reg-only { display: none; margin-top: 0; }
body.mode-register .reg-only { display: block; }
.authhint { display: flex; align-items: center; gap: 8px; margin-top: 18px; justify-content: center; }
.authhint .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.authhint span { font: 500 16px/1.4 var(--body); color: var(--gray); }
.authback { text-align: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(22,35,59,.08); }
.authback a { font: 500 14px/1 var(--body); color: var(--dark); }
.authback a:hover { color: var(--gold); }

/* --- CTA-Band --- */
.ctaband { text-align: center; }
.ctaband h2 { margin: 0 0 10px; color: var(--text-hi); }
.ctaband p { margin: 0 0 28px; font: 400 17px/1.5 var(--body); color: var(--muted); }

/* --- Footer --- */
.site-footer { background: var(--navy); border-top: 1px solid rgba(247,246,243,.08); }
.site-footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 26px; padding-bottom: 40px; flex-wrap: wrap; }
.site-footer .brand__name { font-size: 16px; }
.site-footer .links { display: flex; gap: 18px; font: 400 13px/1 var(--body); }
.site-footer .links a { color: rgba(247,246,243,.6); }
.site-footer .links a:hover { color: var(--gold); }
.site-footer .copy { font: 400 13px/1 var(--body); color: rgba(247,246,243,.5); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) { .fgrid { grid-template-columns: 1fr 1fr; } .plan-grid { grid-template-columns: 1fr; } }
@media (max-width: 800px) {
  .nav__links, .nav > .btn { display: none; }
  .nav-toggle { display: flex; }
  .brand-row .fd-chip { display: none; }
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__waage { order: -1; }
  .hero__waage img { width: 200px; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero__cta { justify-content: center; }
  .step, .step--rev { flex-direction: column; gap: 22px; align-items: flex-start; }
  .step__col { width: 100%; }
  .step p { max-width: none; }
  .step__waage { width: 100%; }
  .faqgrid { grid-template-columns: 1fr; }
  .priceteaser { flex-direction: column; text-align: center; align-items: center; }
}
@media (max-width: 560px) {
  .fgrid { grid-template-columns: 1fr 1fr; }
  .wrap { padding: 0 22px; }
  .waitform { flex-direction: column; }
  .q-bubble div { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }