/* ============================================================
   TaxAI · Corporate Identity "Ledger XL" (Edition 3, D1)
   ------------------------------------------------------------
   Vom User gewaehlter Entwurf D1 — die Edition-2-Welt, radikal
   vergroessert fuer sofortige Lesbarkeit (Zielgruppe liest auf
   1080p-Buero-Monitoren):
   - Grundschrift 17.5px/1.65 (mobil 16px), NICHTS unter 13px
     (nur .feink exakt 13px), Sekundaertext >= 15px.
   - Buttons 17px/600, Padding 16px 30px, Radius 2px.
   - Mono/Versal-Labels SPARSAM, >= 12px, Tracking <= .13em.
   - Jede Sektion mit Blickanker: 36px-Icon, grosse Ziffer
     oder 4px-Messingkante (border-top an Karten).
   - Farbrollen wie Edition 2: Navy eroeffnet jede Seite;
     Grund Elfenbein, Karten WEISS; Gold NUR auf Navy (1 CTA +
     Kennzahlen); Messing-TEXT auf hell IMMER --accent-ink;
     Kupfer NUR als 9px-Quadrat der SQARES-Signatur.
   - GILT NICHT fuer die App (app/) — dort bleibt bewusst das
     kompakte Arbeits-Design (Fokus auf dem Chatfenster).
   Referenz: docs/ci-d1-ledger-xl-start.html + -lizenz.html
   ============================================================ */

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }

:root {
  --paper:#F4F0E8;        /* Dossier-Elfenbein — Grundflaeche */
  --white:#FFFFFF;        /* Karten AUF Elfenbein */
  --card:#FCFBF8;         /* Papierweiss — Kopfleiste, Dossier, Text auf Navy */
  --primary:#0D1B24;      /* Kanzlei-Navy */
  --primary-2:#132835;    /* Navy, hover */
  --accent:#A67C42;       /* Messing, matt — Linien/Icons/Kanten auf hell */
  --accent-ink:#8A6534;   /* Messing als TEXTfarbe auf hell */
  --gold:#C9A05E;         /* Gold — NUR auf Navy (CTA, Kennzahlen) */
  --copper:#FD5524;       /* SQARES-Kupfer — NUR .endorse */
  --ink:#0D1B24;
  --muted:#46525C;        /* dunkler als Edition 2 — Lesbarkeit */
  --dark-text:#C4CCD2;    /* Flaechentext auf Navy */
  --dark-soft:#9AA6AE;    /* Nebentext auf Navy */
  --line:#E2DBCB;
  --line-strong:#CFC6B2;  /* Stein */
  --bg:#FBFAF8;           /* (Altbestand — nicht mehr als Grund verwenden) */
  --display:'Source Serif 4',Georgia,serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',monospace;
}

body {
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img, svg { max-width:100%; }

/* ---------- Grundraster ---------- */
.frame { max-width:1160px; margin:0 auto; padding:0 28px; }
.hairline { border:0; border-top:1px solid var(--line); }
h1, h2, h3 { font-family:var(--display); letter-spacing:-.005em; }

/* ---------- Typo-Bausteine ---------- */
.mono-label {
  font-family:var(--mono); font-size:12.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
}
.eyebrow {
  font-family:var(--mono); font-size:12.5px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent-ink); margin-bottom:20px;
}
.dark-strip .eyebrow, .on-dark .eyebrow { color:var(--gold); }

/* ---------- Marke: Folio-Zeichen + Wortmarke ---------- */
.brand {
  display:inline-flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--ink);
}
.brand svg { display:block; }
.brand .brand-word {
  font-family:var(--display); font-size:24px; font-weight:600;
  letter-spacing:-.01em; line-height:1; color:var(--primary);
}
.brand .badge {
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-ink);
  border:1px solid var(--line-strong); padding:3px 8px; margin-left:4px;
}
.brand.on-dark, .brand.on-dark .brand-word { color:var(--card); }

/* ---------- Kopfleiste ---------- */
.site-head {
  background:var(--card); border-bottom:1px solid var(--line-strong);
  position:sticky; top:0; z-index:50;
}
.site-head .inner {
  max-width:1160px; margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.site-head nav { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.site-head nav a {
  color:var(--ink); font-size:16.5px; font-weight:500; text-decoration:none;
}
.site-head nav a:hover { color:var(--accent-ink); }
.site-head nav a.cta {
  background:var(--primary); color:var(--card);
  padding:12px 22px; border-radius:2px; font-weight:600;
}
.site-head nav a.cta:hover { background:var(--primary-2); }
/* Wichtigste CTA "Kollegen einstellen" — überall gleich in Gold hervorgehoben */
.site-head nav a.cta-gold { background:var(--gold); color:var(--primary); }
.site-head nav a.cta-gold:hover { background:#D5AF70; color:var(--primary); }

/* ---------- Knoepfe: gross, eindeutig ---------- */
.btn {
  display:inline-block; font-family:var(--body); font-size:17px; font-weight:600;
  line-height:1.25; padding:16px 30px; border-radius:2px; text-decoration:none;
  cursor:pointer; border:1px solid transparent;
}
.btn-primary { background:var(--primary); color:var(--card); }
.btn-primary:hover { background:var(--primary-2); }
.btn-secondary {
  background:transparent; border-color:var(--primary); color:var(--primary);
  font-weight:600;
}
.btn-secondary:hover { background:var(--primary); color:var(--card); }
.btn-gold { background:var(--gold); color:var(--primary); }
.btn-gold:hover { background:#D5AF70; }
/* Varianten fuer dunkle Sektionen */
.on-dark .btn-secondary, .dark-strip .btn-secondary, .btn-outline-dark {
  background:transparent; border-color:rgba(252,251,248,.4); color:var(--card);
}
.on-dark .btn-secondary:hover, .dark-strip .btn-secondary:hover,
.btn-outline-dark:hover { border-color:var(--card); background:transparent; color:var(--card); }
.btn-paper { background:var(--card); color:var(--primary); }
.btn-paper:hover { background:#fff; }
.btn-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }

/* ---------- Chip (Messing-Rahmen) ---------- */
.chip {
  display:inline-block; border:1px solid var(--accent); color:var(--accent-ink);
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 9px;
}

/* ---------- Vertrauenszeile (jetzt normal lesbar, kein Versal-Mono) ---------- */
.trust { font-size:15.5px; line-height:1.6; color:var(--muted); }
.dark-strip .trust, .on-dark .trust { color:var(--dark-soft); }

/* ---------- Dunkle Sektion ---------- */
.dark-strip { background:var(--primary); color:var(--dark-text); }
.dark-strip h1, .dark-strip h2, .dark-strip h3 { color:var(--card); }
.dark-strip h1 em, .dark-strip h2 em, .dark-strip h3 em {
  font-style:italic; font-weight:600; color:var(--gold);
}
.dark-strip .chip { border-color:var(--gold); color:var(--gold); }

/* ---------- Kennzahlen (grosse Gold-Serifen-Ziffern auf Navy) ---------- */
.figures { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.fig b {
  display:block; font-family:var(--display); font-weight:600; color:var(--gold);
  font-size:clamp(44px,5vw,64px); line-height:1; font-variant-numeric:tabular-nums;
}
.fig span { display:block; font-size:15.5px; line-height:1.5; color:var(--dark-soft); margin-top:10px; }
@media (max-width:960px) { .figures { grid-template-columns:repeat(2,1fr); gap:36px 24px; } }

/* ---------- Linien-Icon (Blickanker auf Karten) ---------- */
.ln-icon { display:block; color:var(--accent); }

/* ---------- SQARES-Herkunftssignatur (einziger Kupfer-Ort) ---------- */
.endorse {
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.endorse .mark { width:9px; height:9px; background:var(--copper); flex:none; }
.dark-strip .endorse, .endorse.on-dark { color:var(--dark-soft); }
.endorse a { color:inherit; text-decoration:none; }
.endorse a:hover { color:var(--ink); }
.dark-strip .endorse a, .endorse.on-dark a { color:var(--card); }
.dark-strip .endorse a:hover, .endorse.on-dark a:hover { border-bottom:1px solid var(--gold); }

/* ---------- Dossier-Baustein (weisse Akte, auch auf Navy) ---------- */
.dossier {
  background:var(--card); border:1px solid rgba(252,251,248,.25); border-radius:2px;
  padding:22px 24px 18px; color:var(--ink); font-size:15.5px;
}
.d-meta {
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; color:var(--muted);
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.d-meta .chip { margin-left:auto; border-color:var(--accent); color:var(--accent-ink); font-size:12px; }
.d-tabs { display:flex; gap:22px; padding:14px 0 0; font-size:15px; font-weight:500; color:var(--muted); }
.d-tab { padding-bottom:10px; border-bottom:3px solid transparent; }
.d-tab.active { color:var(--primary); font-weight:600; border-bottom-color:var(--accent); }
.d-row {
  display:flex; align-items:baseline; gap:16px; padding:14px 0;
  border-top:1px solid var(--line);
}
.d-row:first-of-type { border-top:1px solid var(--line-strong); }
.d-row .r-id { font-family:var(--mono); font-size:13px; color:var(--accent-ink); flex:0 0 62px; }
.d-row .r-text { flex:1; font-size:15.5px; font-weight:600; line-height:1.45; color:var(--primary); }
.d-row .r-text small { display:block; font-size:13.5px; font-weight:400; color:var(--muted); margin-top:3px; }
.d-row .r-val {
  font-family:var(--display); font-size:18px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.d-foot {
  display:flex; align-items:center; gap:10px; margin-top:6px; padding-top:14px;
  border-top:1px solid var(--line-strong); font-size:13px; color:var(--muted);
}
.d-foot .dot { width:9px; height:9px; background:var(--accent); flex:0 0 auto; }
.d-foot .folio { margin-left:auto; font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; }

/* ---------- Fusszeile ---------- */
.site-foot {
  margin-top:96px; border-top:1px solid var(--line-strong); background:var(--paper);
  padding:30px 28px 44px; text-align:center;
  font-size:15px; color:var(--muted);
}
.site-foot a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-strong); }
.site-foot a:hover { border-bottom-color:var(--accent); }
.site-foot .endorse { justify-content:center; margin-top:16px; }

/* ---------- Formulare ---------- */
.field {
  width:100%; font-family:var(--body); font-size:17px; color:var(--ink);
  background:var(--card); border:1px solid var(--line-strong);
  border-radius:2px; padding:14px 16px;
}
.field:focus { outline:none; border-color:var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width:560px) {
  body { font-size:16px; }
  .frame { padding:0 20px; }
  /* iPhone/Mobil-Kopf: Marke + beide CTA-Buttons oben, sauber umbrechend
     statt überlappend; nebensächliche Text-Links werden ausgeblendet. */
  .site-head .inner { padding:12px 16px; gap:9px 10px; flex-wrap:wrap; }
  .site-head nav { gap:8px; width:auto; }
  .site-head nav a { font-size:15px; }
  .site-head nav a.hide-mobile { display:none; }
  .site-head nav a.cta, .site-head nav a.cta-gold { padding:9px 14px; font-size:14px; }
  .brand .badge { display:none; }
  .btn { width:100%; text-align:center; }
  .btn-row { gap:10px; }
  .site-foot { padding:26px 20px 38px; }
  .d-meta .chip { margin-left:0; }
}