/* Same tokens as the app (frontend/src/styles/tokens.css): paper, carbon ink, carbon-copy blue,
   the red pencil. Fonts are self-hosted (schriften/), never loaded from Google. */
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('/schriften/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('/schriften/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 600; font-display: swap; src: url('/schriften/barlow-semi-condensed-latin-600-normal.woff2') format('woff2'); }

:root {
  --papier: #f2f3f5; --weiss: #fff; --carbon: #1b1e2e; --bleistift: #5d6275; --linie: #dcdfe6;
  --durchschlag: #3437a6; --durchschlag-hell: #ecedfa; --rotstift: #c2311c; --rotstift-hell: #fcefec;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--papier); color: var(--carbon); font: 400 17px/1.6 'Barlow', system-ui, sans-serif; }
a { color: var(--durchschlag); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
header.top { background: var(--weiss); border-bottom: 1px solid var(--linie); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.kopf { display: flex; gap: 20px; }
.marke { font: 600 21px 'Barlow Semi Condensed', sans-serif; color: var(--carbon); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.marke img { display: block; flex: none; }
h1, h2, h3 { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; line-height: 1.15; }
h1 { font-size: clamp(34px, 5vw, 50px); margin: 0 0 18px; max-width: 18ch; }
h2 { font-size: 27px; margin: 0 0 14px; }
h3 { font-size: 19px; margin: 0 0 6px; }
.hero { padding: 72px 24px 56px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.lead { font-size: 20px; color: var(--bleistift); max-width: 58ch; }
.btn { display: inline-block; padding: 12px 20px; border-radius: 6px; background: var(--durchschlag); color: var(--weiss); font-weight: 600; text-decoration: none; }
.btn:hover { background: #272a86; }
.hinweis { font-size: 14px; color: var(--bleistift); margin-top: 12px; }
/* The hero shows the product's actual output: an EXTF booking line, as the Steuerberater sees it. */
.beleg { margin: 0; min-width: 0; overflow-x: auto; background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px; padding: 20px 22px; font-size: 15px; font-variant-numeric: tabular-nums; box-shadow: 0 12px 32px rgba(27,30,46,.08); }
.beleg table { width: 100%; border-collapse: collapse; }
.beleg th { text-align: left; font: 600 13px 'Barlow Semi Condensed', sans-serif; color: var(--bleistift); padding: 0 8px 8px 0; }
.beleg td { padding: 8px 8px 8px 0; border-top: 1px solid #eceef2; }
/* Dates and amounts never break; text columns wrap so the card fits its column. */
.beleg td.r, .beleg td:nth-child(2) { white-space: nowrap; }
.beleg .r { text-align: right; }
.beleg .fehler td { background: var(--rotstift-hell); color: var(--rotstift); }
.beleg .fehler td:first-child { box-shadow: inset 3px 0 0 var(--rotstift); padding-left: 8px; }
.beleg p { margin: 12px 0 0; font-size: 13px; color: var(--bleistift); }
section.band { background: var(--weiss); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 56px 0; }
section.plain { padding: 56px 0; }
ol.schritte { list-style: none; counter-reset: s; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
ol.schritte li { counter-increment: s; }
ol.schritte li::before { content: counter(s); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--durchschlag); color: var(--weiss); font: 600 15px 'Barlow Semi Condensed', sans-serif; margin-bottom: 10px; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.faq dt { font-weight: 600; margin-top: 18px; }
.faq dd { margin: 4px 0 0; color: var(--bleistift); }
footer { padding: 32px 0 48px; font-size: 14px; color: var(--bleistift); }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.recht { max-width: 760px; padding: 48px 24px 64px; margin: 0 auto; }
.recht h1 { font-size: 36px; }
.recht h2 { font-size: 21px; margin-top: 32px; }
.entwurf { background: var(--rotstift-hell); border-left: 4px solid var(--rotstift); padding: 12px 16px; color: var(--rotstift); font-weight: 600; }
@media (max-width: 800px) {
  .hero, .zwei { grid-template-columns: 1fr; }
  ol.schritte { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  ol.schritte { grid-template-columns: 1fr; }
  .beleg { font-size: 13px; padding: 14px; }
}