/* ==========================================================================
   Tannel — Design-System v3 „Kassenbuch"
   Identität: deutsches Geschäftspapier, sachlich und präzise.
   Papier · Tinte · Terrakotta · Prüfstempel · Mono für Daten.
   Die Wortmarke (Montserrat, in Pfade gewandelt) kommt aus
   scripts/make_logo.py; Überschriften setzt Manrope, Text Inter.
   Fonts: self-hosted (DSGVO). Kein Inline-CSS/JS (CSP).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schriften (self-hosted, variable)
   -------------------------------------------------------------------------- */

/* Manrope — Display-Grotesk für Überschriften und Kennzahlen (variabel
   200–800). Geometrisch wie die Wortmarke, aber enger laufend, damit
   auch lange deutsche Komposita in eine Zeile passen. Teilmenge Latin. */
@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Inter — UI & Body (variabel 400–700) */
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* DM Sans (sekundär) ist derzeit nicht selbst gehostet — --font-alt fällt auf
   Inter zurück. Bei Bedarf woff2 ergänzen und @font-face wieder eintragen. */

/* Mono: reiner System-Stack (SF Mono / Fira Code / Menlo …) — kein Webfont */

/* --------------------------------------------------------------------------
   Design-Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette „Terrakotta & Greige" (Light)
     Primär/Grund: #F6F4F0 · Akzent: Terrakotta #B9652A */
  --papier: #f6f4f0;         /* warmes Greige — Primärfarbe & Hintergrund */
  --papier-hell: #ffffff;
  --papier-schatten: #ece8e1;
  --tinte: #2b2621;          /* warmes Anthrazit-Braun — Tinte */
  --tinte-2: #5c554c;
  --tinte-3: #8a8177;
  --linie: #e6e1d9;
  --linie-stark: #d3cdc3;
  --marke: #9e4f1a;          /* dunkles Terrakotta: Links & ruhige Ink-Akzente */
  --marke-hover: #843f12;
  --marke-hell: #f3e2d3;     /* weicher Terrakotta-Schleier (Akzent-Flächen) */
  --auf-marke: #ffffff;
  --akzent: #b9652a;         /* Terrakotta — Akzent, der herausploppt */
  --akzent-hover: #a4551f;
  --akzent-hell: #f2e1d1;
  --auf-akzent: #ffffff;     /* Weiß auf Terrakotta */
  --band: #262019;           /* warmes dunkles Band (Footer, dunkle Bänder) */
  --auf-band: #f2ede6;
  --pruefgruen: #2f7d3f;
  --pruefgruen-hell: #e6efe2;
  --siegelrot: #c62828;
  --siegelrot-hell: #f7e3e1;
  --warnung: #8a5a00;
  --warnung-hell: #f6ecd6;
  --schatten: 0 1px 2px rgb(43 38 33 / 0.06), 0 6px 20px rgb(43 38 33 / 0.08);
  --schatten-gross: 0 2px 6px rgb(43 38 33 / 0.10), 0 20px 44px rgb(43 38 33 / 0.14);

  /* Typografie-Rollen */
  --font-head:  "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Display/Headlines */
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* UI/Body */
  --font-mono:  "SF Mono", "Fira Code", Menlo, Monaco, Consolas, monospace;   /* Zahlen/Code/Meta */
  --font-alt:   "DM Sans", var(--font-sans);                                  /* sekundär, sparsam */

  /* Legacy-Aliase (Marketing-Seiten). --font-serif heißt nur noch so:
     Die Display-Rolle trägt seit dem neuen Logo eine Grotesk. */
  --font-serif: var(--font-head);
  --sans: var(--font-sans);
  --serif: var(--font-head);
  --mono: var(--font-mono);

  /* Rückwärtskompatibilität mit bestehenden Regeln in dieser Datei */
  --font-display: var(--font-head);
  --font-body: var(--font-sans);
  --font-data: var(--font-mono);

  /* Feiner Schatten für ruhende Flächen; --schatten bleibt für Ebenen,
     die wirklich über dem Papier liegen (Belege, Menüs). */
  --schatten-fein: 0 1px 0 rgb(43 38 33 / 0.03), 0 1px 3px rgb(43 38 33 / 0.05);

  /* Maße */
  --radius-s: 6px;
  --radius-m: 8px;
  --radius: 8px;
  --radius-l: 12px;
  --container: 1160px;
  --kopf-hoehe: 64px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Dark: warmes Anthrazit als Grund, Greige wird zum Licht */
    --papier: #1a1816;
    --papier-hell: #242120;
    --papier-schatten: #1f1c1a;
    --tinte: #f2efe9;
    --tinte-2: #c3bcb2;
    --tinte-3: #8f877e;
    --linie: #332f2b;
    --linie-stark: #48423b;
    --marke: #d67f43;          /* helleres Terrakotta trägt Links & Akzente auf Dunkel */
    --marke-hover: #e6935a;
    --marke-hell: #33251b;
    --auf-marke: #1a1816;
    --akzent: #b9652a;
    --akzent-hover: #cb7638;
    --akzent-hell: #33251b;
    --auf-akzent: #ffffff;
    --band: #141210;
    --auf-band: #f2ede6;
    --pruefgruen: #5fbf83;
    --pruefgruen-hell: #16311f;
    --siegelrot: #f0776a;
    --siegelrot-hell: #351512;
    --warnung: #dfb35e;
    --warnung-hell: #2c2410;
    --schatten: 0 1px 2px rgb(0 0 0 / 0.5), 0 6px 20px rgb(0 0 0 / 0.4);
    --schatten-gross: 0 2px 6px rgb(0 0 0 / 0.5), 0 20px 44px rgb(0 0 0 / 0.55);
    --schatten-fein: 0 1px 0 rgb(0 0 0 / 0.2), 0 1px 3px rgb(0 0 0 / 0.25);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --papier: #1a1816;
  --papier-hell: #242120;
  --papier-schatten: #1f1c1a;
  --tinte: #f2efe9;
  --tinte-2: #c3bcb2;
  --tinte-3: #8f877e;
  --linie: #332f2b;
  --linie-stark: #48423b;
  --marke: #d67f43;
  --marke-hover: #e6935a;
  --marke-hell: #33251b;
  --auf-marke: #1a1816;
  --akzent: #b9652a;
  --akzent-hover: #cb7638;
  --akzent-hell: #33251b;
  --auf-akzent: #ffffff;
  --band: #141210;
  --auf-band: #f2ede6;
  --pruefgruen: #5fbf83;
  --pruefgruen-hell: #16311f;
  --siegelrot: #f0776a;
  --siegelrot-hell: #351512;
  --warnung: #dfb35e;
  --warnung-hell: #2c2410;
  --schatten: 0 1px 2px rgb(0 0 0 / 0.5), 0 6px 20px rgb(0 0 0 / 0.4);
  --schatten-gross: 0 2px 6px rgb(0 0 0 / 0.5), 0 20px 44px rgb(0 0 0 / 0.55);
  --schatten-fein: 0 1px 0 rgb(0 0 0 / 0.2), 0 1px 3px rgb(0 0 0 / 0.25);
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.62;
  color: var(--tinte);
  background: var(--papier);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Überschriften: Manrope, kräftig und eng — dieselbe sachliche Haltung
   wie die Wortmarke. Je größer, desto enger gesperrt. */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.45em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 750;
  letter-spacing: -0.032em;
  line-height: 1.08;
}
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); letter-spacing: -0.028em; line-height: 1.12; }
h3 { font-size: clamp(1.12rem, 1.4vw, 1.3rem); font-weight: 680; letter-spacing: -0.018em; }
h4 { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }

a {
  color: var(--marke);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:not(:hover) { text-decoration: none; }

code, .mono {
  font-family: var(--font-data);
  font-size: 0.85em;
  background: var(--papier-schatten);
  border-radius: 5px;
  padding: 0.1em 0.4em;
}

:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--marke);
  color: var(--auf-marke);
  padding: 0.5rem 1rem;
  z-index: 100;
}

.skip-link:focus { left: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

.container-narrow { max-width: 640px; }

main { flex: 1; }

.muted { color: var(--tinte-2); }
.small { font-size: 0.875rem; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 1rem; }

/* --------------------------------------------------------------------------
   Typografie-System — die „Voice" als wiederverwendbare Rollen
   Manrope = Display · Inter = Funktion · Mono = Zahlen/Codes/Meta
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--font-head);
  font-weight: 750;
  font-size: clamp(56px, 9vw, 112px);
  line-height: 1.0;
  letter-spacing: -0.045em;
}

.h-section { font-family: var(--font-head); font-weight: 720; font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.032em; line-height: 1.1; }
.h-sub { font-family: var(--font-head); font-weight: 700; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.028em; line-height: 1.15; }

/* Kicker / Eyebrow: gesperrte Versalien wie die Unterzeile der
   Wortmarke, mit kurzem Terrakotta-Strich davor */
.eyebrow, .kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--marke);
}

.eyebrow::before, .kicker::before {
  content: "";
  width: 1.4rem;
  height: 2px;
  background: var(--akzent);
  flex: 0 0 auto;
}

/* Micro-Label: winzig, fett, gesperrt, gedämpft */
.micro-label {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tinte-3);
}

/* Lede / Intro-Absatz */
.lede {
  font-family: var(--font-sans);
  font-size: clamp(1.08rem, 1.8vw, 1.3rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--tinte-2);
}

/* Pull-Quote: Grotesk, halbfett, mit Terrakotta-Kante */
.pull-quote {
  font-family: var(--font-head);
  font-weight: 560;
  font-size: 1.15rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--tinte);
  border-left: 2px solid var(--akzent);
  padding-left: 1rem;
}

/* Numerisch/Meta: Mono, klein, gedämpft */
.numeric, .meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--tinte-3);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Logo — SVG-Dateien aus scripts/make_logo.py, je eine Fassung für hellen
   und dunklen Grund. Gezeigt wird die zum Design passende.
   -------------------------------------------------------------------------- */

.brand img,
.footer-marke img {
  display: block;
  height: 100%;
  width: auto;
}

.brand .logo-nacht { display: none; }

:root[data-theme="dark"] .brand .logo-tag { display: none; }
:root[data-theme="dark"] .brand .logo-nacht { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .logo-tag { display: none; }
  :root:not([data-theme="light"]) .brand .logo-nacht { display: block; }
}

/* --------------------------------------------------------------------------
   Navigation — ruhige Papierleiste mit Tintenlinie
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linie);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--kopf-hoehe);
}

.brand {
  display: inline-flex;
  align-items: center;
  height: 30px;
  color: var(--tinte);
  flex: 0 0 auto;
}

.brand:hover { text-decoration: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
  flex-wrap: wrap;
}

/* Aktiver Eintrag: Terrakotta-Strich an der Unterkante statt Pille —
   derselbe Strich, der die Eyebrows einleitet. */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-s);
  color: var(--tinte-2);
  font-weight: 500;
  font-size: 0.92rem;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--tinte);
  background: var(--papier-schatten);
  text-decoration: none;
}

.nav-link[aria-current="page"],
.nav-link[aria-current="true"] {
  color: var(--tinte);
  font-weight: 600;
}

.nav-link[aria-current="page"]::after,
.nav-link[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--akzent);
}

.nav-links .btn { margin-left: 0.4rem; }

.nav-aktionen {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

/* Konto-Menü: <details> mit schwebender Liste */
.konto-menue { position: relative; }

.konto-menue > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.konto-menue > summary::-webkit-details-marker { display: none; }

.konto-pfeil {
  width: 14px;
  height: 14px;
  transition: transform 150ms ease;
}

.konto-menue[open] .konto-pfeil { transform: rotate(180deg); }
.konto-menue[open] > summary { background: var(--papier-schatten); color: var(--tinte); }

.konto-liste {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  padding: 0.4rem;
  background: var(--papier-hell);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-gross);
}

.konto-wer {
  margin: 0 0 0.3rem;
  padding: 0.45rem 0.65rem 0.6rem;
  border-bottom: 1px solid var(--linie);
  font-size: 0.8rem;
  color: var(--tinte-3);
  overflow-wrap: anywhere;
}

.konto-liste a,
.konto-liste button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: none;
  border-radius: var(--radius-s);
  background: none;
  color: var(--tinte);
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
}

.konto-liste a:hover,
.konto-liste button:hover {
  background: var(--papier-schatten);
  text-decoration: none;
}

.konto-liste a[aria-current="page"] {
  color: var(--marke);
  font-weight: 600;
}

.konto-liste form {
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--linie);
}

.konto-liste button { color: var(--tinte-2); }

.theme-toggle {
  border: 1px solid var(--linie);
  background: var(--papier-hell);
  color: var(--tinte-2);
  border-radius: var(--radius-s);
  width: 36px;
  height: 36px;
  margin-left: 0.4rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 150ms ease, color 150ms ease;
}

.theme-toggle:hover { border-color: var(--linie-stark); color: var(--tinte); }

.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sonne { display: none; }

:root[data-theme="dark"] .theme-toggle .icon-mond { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sonne { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-mond { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sonne { display: block; }
}

/* --------------------------------------------------------------------------
   Buttons & Formulare
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 1.15rem;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  background: var(--akzent);
  color: var(--auf-akzent);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.12);
  transition: background 150ms ease, border-color 150ms ease,
    color 150ms ease, box-shadow 150ms ease;
}

.btn:hover {
  background: var(--akzent-hover);
  text-decoration: none;
}

.btn:active { box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.18); }

.btn-secondary {
  background: var(--papier-hell);
  color: var(--tinte);
  border-color: var(--linie-stark);
  box-shadow: var(--schatten-fein);
}

.btn-secondary:hover {
  background: var(--papier-schatten);
  border-color: var(--tinte-3);
}

.btn-ghost {
  background: transparent;
  color: var(--marke);
  box-shadow: none;
}

.btn-ghost:hover { background: var(--marke-hell); }

.btn-danger {
  background: transparent;
  border-color: var(--linie-stark);
  color: var(--siegelrot);
  box-shadow: none;
}

.btn-danger:hover {
  background: var(--siegelrot-hell);
  border-color: var(--siegelrot);
}

.btn-lg {
  min-height: 50px;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  border-radius: var(--radius);
}

.btn-sm { min-height: 34px; padding: 0.25rem 0.75rem; font-size: 0.85rem; }

.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-sm svg { width: 14px; height: 14px; }

label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.3rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  font: inherit;
  font-size: 0.98rem;
  color: var(--tinte);
  background: var(--papier-hell);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-s);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

textarea { min-height: unset; }

input:hover, select:hover, textarea:hover { border-color: var(--tinte-3); }

/* Fokus als weicher Terrakotta-Ring statt harter Kontur */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--marke);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent);
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
}

.field { margin-bottom: 1rem; }

.field .hint {
  font-weight: 400;
  color: var(--tinte-3);
  font-size: 0.82rem;
  margin-top: 0.25rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 1.25rem;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.checkbox-row input { width: auto; min-height: unset; margin-top: 0.35rem; }
.checkbox-row label { margin: 0; font-weight: 500; }

/* --------------------------------------------------------------------------
   Karten, Tabellen, Badges, Alerts
   -------------------------------------------------------------------------- */

.card {
  background: var(--papier-hell);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  padding: clamp(1.15rem, 2.5vw, 1.6rem);
  box-shadow: var(--schatten-fein);
}

.card + .card { margin-top: 1.25rem; }

/* Im Raster sorgt gap für den Abstand — der Stapelabstand oben würde
   jede zweite Karte nach unten versetzen. */
:where(.pfad-grid, .two-col, .stat-grid, .pricing-grid, .form-grid) > .card + .card { margin-top: 0; }

.card-title {
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

.table-wrap { overflow-x: auto; }

/* Tabellen im Kassenbuch-Stil: ruhige Zeilenlinien, Mono-Zahlen */
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

table.data th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinte-3);
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--linie-stark);
  white-space: nowrap;
}

table.data tbody tr { transition: background 120ms ease; }
table.data tbody tr:hover { background: color-mix(in srgb, var(--papier-schatten) 55%, transparent); }

table.data td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}

table.data tr:last-child td { border-bottom: none; }

/* Zahlenspalten: rechtsbündig; Mono nur in den Datenzellen,
   Spaltenköpfe bleiben in der Sans-Beschriftung. */
table.data .num { text-align: right; }

table.data td.num {
  font-family: var(--font-data);
  font-size: 0.88em;
  /* „791,35 €“ nie zwischen Zahl und Währung umbrechen */
  white-space: nowrap;
}

/* Zusätze unter dem Betrag („teilbezahlt“) sind Text, keine Zahl */
table.data td.num .small { font-family: var(--font-sans); }

.badge {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.badge-success { background: var(--pruefgruen-hell); color: var(--pruefgruen); }
.badge-warning { background: var(--warnung-hell); color: var(--warnung); }
.badge-danger { background: var(--siegelrot-hell); color: var(--siegelrot); }
.badge-accent { background: var(--marke-hell); color: var(--marke); }
.badge-muted { background: var(--papier-schatten); color: var(--tinte-2); }

.alert {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-s);
  border: 1px solid;
  margin-bottom: 1.25rem;
  font-size: 0.94rem;
}

.alert-error {
  background: var(--siegelrot-hell);
  border-color: color-mix(in srgb, var(--siegelrot) 35%, transparent);
  color: var(--siegelrot);
}

.alert-success {
  background: var(--pruefgruen-hell);
  border-color: color-mix(in srgb, var(--pruefgruen) 35%, transparent);
  color: var(--pruefgruen);
}

.alert-warning {
  background: var(--warnung-hell);
  border-color: color-mix(in srgb, var(--warnung) 35%, transparent);
  color: var(--warnung);
}

.alert-info {
  background: var(--marke-hell);
  border-color: color-mix(in srgb, var(--marke) 30%, transparent);
  color: var(--marke);
}

/* --------------------------------------------------------------------------
   Stempel — das Signature-Element (kehrt im Prüfbericht wieder)
   -------------------------------------------------------------------------- */

.stempel {
  display: inline-block;
  font-family: var(--font-data);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pruefgruen);
  border: 2px solid currentColor;
  border-radius: 6px;
  padding: 0.35rem 0.8rem;
  transform: rotate(-4deg);
  opacity: 0.92;
}

.stempel-rot { color: var(--siegelrot); }

/* --------------------------------------------------------------------------
   Hero mit Beleg-Verwandlung (XML → klare Rechnung)
   -------------------------------------------------------------------------- */

.hero {
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3rem;
  align-items: center;
}

.hero .eyebrow {
  margin-bottom: 1.25rem;
}

.hero h1 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 780;
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin-bottom: 0.45em;
  text-wrap: balance;
}

/* Betonung in Terrakotta mit dem Strich der Wortmarke darunter */
.hero h1 .unterstrichen {
  color: var(--marke);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-decoration-color: var(--akzent);
  text-underline-offset: 0.14em;
  text-decoration-skip-ink: none;
}

.hero .sub {
  color: var(--tinte-2);
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  max-width: 34em;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.hero-note {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--tinte-3);
}

/* Die Verwandlung: XML-Datei oben links, klare Rechnung unten rechts —
   beide lesbar gestaffelt, der Stempel besiegelt das Ergebnis. */

.verwandlung {
  position: relative;
  min-height: 440px;
}

.beleg {
  border-radius: var(--radius);
  box-shadow: var(--schatten-gross);
  border: 1px solid var(--linie);
}

.beleg-xml {
  position: absolute;
  top: 0;
  left: 0;
  width: 64%;
  background: var(--papier-schatten);
  color: var(--tinte-3);
  overflow: hidden;
}

.beleg-xml-kopf {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-data);
  font-size: 0.7rem;
  color: var(--tinte-2);
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--linie);
  background: var(--papier-hell);
}

.beleg-xml-kopf svg { width: 13px; height: 13px; flex-shrink: 0; }

.beleg-xml-code {
  font-family: var(--font-data);
  font-size: 0.66rem;
  line-height: 1.75;
  padding: 0.9rem 1.1rem 1.1rem;
  white-space: pre;
  overflow: hidden;
}

.beleg-xml .tag { color: var(--marke); opacity: 0.75; }

.beleg-klar {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 68%;
  background: var(--papier-hell);
  padding: 1.4rem 1.5rem 1.2rem;
  z-index: 1;
}

/* DIN-5008-Falzmarken am linken Blattrand */
.beleg-klar::before,
.beleg-klar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 7px;
  height: 1px;
  background: var(--linie-stark);
}

.beleg-klar::before { top: 38%; }
.beleg-klar::after { top: 72%; }

.beleg-klar .beleg-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid var(--tinte);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}

.beleg-klar .beleg-titel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.beleg-klar .beleg-nr {
  font-family: var(--font-data);
  font-size: 0.72rem;
  color: var(--tinte-3);
}

.beleg-klar .beleg-zeile {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--linie);
}

.beleg-klar .beleg-zeile:last-of-type {
  border-bottom: none;
  font-weight: 600;
  border-top: 2px solid var(--tinte);
  margin-top: 0.35rem;
  padding-top: 0.5rem;
}

.beleg-klar .beleg-zeile .wert {
  font-family: var(--font-data);
  font-size: 0.9em;
  white-space: nowrap;
}

.verwandlung .stempel {
  position: absolute;
  top: 38%;
  right: 5%;
  z-index: 2;
  background: var(--papier-hell);
  box-shadow: var(--schatten);
}

/* Ein orchestrierter Moment beim Laden: Belege gleiten ein, der Stempel
   drückt zuletzt auf. prefers-reduced-motion schaltet alles ab (s. unten). */

@keyframes beleg-einzug {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes stempel-druck {
  0% { opacity: 0; transform: rotate(-14deg) scale(1.6); }
  70% { opacity: 1; transform: rotate(-4deg) scale(0.96); }
  100% { opacity: 0.92; transform: rotate(-4deg) scale(1); }
}

.verwandlung .beleg-xml { animation: beleg-einzug 480ms ease-out both; }
.verwandlung .beleg-klar { animation: beleg-einzug 520ms ease-out 180ms both; }
.verwandlung .stempel { animation: stempel-druck 420ms cubic-bezier(0.2, 0.9, 0.3, 1.2) 760ms both; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .verwandlung { min-height: 420px; max-width: 480px; margin-inline: auto; }
}

/* Sehr schmale Viewports: Belege statisch stapeln statt absolut staffeln */
@media (max-width: 560px) {
  .verwandlung { min-height: 0; max-width: 420px; }
  .beleg-xml { position: static; width: 94%; }
  .beleg-klar { position: static; width: 94%; margin: -2.5rem 0 0 auto; }
  .verwandlung .stempel { top: 40%; right: 16px; }
}

/* --------------------------------------------------------------------------
   Sektionen der Landing Page
   -------------------------------------------------------------------------- */

.section { padding: clamp(3rem, 7vw, 5rem) 0; }

/* Kassenbuchlinie zwischen aufeinanderfolgenden Sektionen — ruhiger Rhythmus
   statt schwebender Leerräume. */
.section + .section { border-top: 1px solid var(--linie); }

.section-head {
  max-width: 44em;
  margin: 0 0 2.25rem;
}

/* Section-Heading: groß, eng, sachlich */
.section-head h2 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.section-head h1 {
  font-size: clamp(34px, 4.6vw, 52px);
  letter-spacing: -0.038em;
}

.section-head p { color: var(--tinte-2); font-size: 1.05rem; max-width: 38em; }

/* Zwei Nutzerpfade — jede Spalte ist ein „Beleg" mit Kopfzeile und
   Kassenbuch-Trennlinien statt sechs gleichförmiger Karten. */

.pfad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.pfad {
  background: var(--papier-hell);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  padding: clamp(1.3rem, 3vw, 1.9rem) clamp(1.2rem, 3vw, 1.9rem) 1.5rem;
  box-shadow: var(--schatten-fein);
}

/* Datenhoheit als eigenes Band unter den beiden Pfaden: Der Punkt gilt
   für beide Richtungen und ist ein Verkaufsargument, kein Nebensatz. */
.eigentum-band {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding: 1.5rem clamp(1.2rem, 3vw, 1.9rem);
  background: var(--papier-hell);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-fein);
}

.eigentum-band h3 {
  margin: 0 0 0.4rem;
}

.eigentum-band p {
  margin: 0;
  color: var(--tinte-2);
}

.eigentum-icon {
  flex: 0 0 auto;
  color: var(--akzent);
}

.eigentum-icon svg {
  width: 44px;
  height: 44px;
}

@media (max-width: 720px) {
  .eigentum-icon { display: none; }
}

.pfad-kopf {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 0.9rem;
  border-bottom: 1.5px solid var(--tinte);
}

.pfad-kopf .micro-label { color: var(--marke); }

.pfad-kopf h3 { margin: 0; }

.pfad-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pfad-liste li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--linie);
}

.pfad-liste li:last-child { border-bottom: none; padding-bottom: 0.35rem; }

.pfad-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-s);
  background: var(--marke-hell);
  color: var(--marke);
}

.pfad-icon svg { width: 18px; height: 18px; display: block; }

.pfad-liste h4 { margin-bottom: 0.3rem; }
.pfad-liste p { color: var(--tinte-2); font-size: 0.92rem; margin: 0; }

/* Drei Schritte als Zeitachse: durchgehende Linie, Mono-Nummern darauf */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  counter-reset: step;
  margin-top: 2.75rem;
}

.step {
  position: relative;
  padding: 1.9rem 2.25rem 0 0;
  border-top: 1px solid var(--linie-stark);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -17px;
  left: 0;
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-s);
  background: var(--tinte);
  color: var(--papier);
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 750;
  box-shadow: 0 0 0 6px var(--papier);
}

.step:first-child::before { background: var(--akzent); color: var(--auf-akzent); }

.step h3 { margin-bottom: 0.35rem; }

@media (max-width: 720px) {
  .steps { gap: 2.5rem; }
  .step { padding-right: 0; }
}

/* Fristen-Band: die gesetzliche Urgenz direkt unter dem Hero */

.fristen-band {
  background: var(--papier-schatten);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: clamp(2rem, 5vw, 3.25rem) 0;
}

.fristen-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) 1.4fr;
  gap: 2.75rem;
  align-items: center;
}

.fristen-intro h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin-bottom: 0.35em;
}

.fristen-intro p {
  color: var(--tinte-2);
  font-size: 0.95rem;
  margin-bottom: 0.9em;
}

.fristen-link { display: block; width: fit-content; font-weight: 600; font-size: 0.95rem; margin-top: 0.35rem; }

@media (max-width: 860px) {
  .fristen-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Fristen als Kassenbuch-Zeilen: Datum in Mono, rote Betonung der Pflicht */

.deadline-banner {
  background: var(--papier-hell);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--siegelrot);
  border-radius: var(--radius-l);
  padding: 0.4rem clamp(1rem, 3vw, 1.5rem);
  box-shadow: var(--schatten-fein);
}

.deadline {
  display: grid;
  grid-template-columns: minmax(140px, 180px) 1fr;
  gap: 1.25rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--linie);
}

.deadline:last-child { border-bottom: none; }

.deadline strong {
  font-family: var(--font-data);
  font-weight: 500;
  font-size: 1rem;
  color: var(--siegelrot);
  white-space: nowrap;
}

.deadline span { color: var(--tinte-2); font-size: 0.95rem; }

@media (max-width: 480px) {
  .deadline { grid-template-columns: 1fr; gap: 0.2rem; }
  .deadline .deadline-rest { margin-left: 0; }
}

/* Bereits geltende Frist: tritt zurück, sie ist Tatsache, keine Warnung */
.deadline-gilt strong { color: var(--tinte-3); }

.deadline .deadline-rest {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: 4px;
  background: var(--siegelrot-hell);
  color: var(--siegelrot);
  font-family: var(--font-data);
  font-size: 0.74rem;
  white-space: nowrap;
  vertical-align: 0.08em;
}

/* Preise */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.plan {
  background: var(--papier-hell);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  padding: clamp(1.4rem, 3vw, 1.8rem);
  display: flex;
  flex-direction: column;
  box-shadow: var(--schatten-fein);
}

.plan.highlight {
  border-color: var(--akzent);
  box-shadow: 0 0 0 1px var(--akzent), var(--schatten);
  position: relative;
}

/* „Beliebt" als kleiner Prüfstempel — greift das Signature-Element auf */
.plan .plan-flag {
  position: absolute;
  top: -15px;
  right: 1.4rem;
  transform: rotate(-2deg);
  background: var(--papier-hell);
  color: var(--akzent);
  border: 2px solid currentColor;
  font-family: var(--font-data);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: 6px;
  white-space: nowrap;
}

.plan h3 { margin-bottom: 0.25rem; }

.plan .price {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 4vw, 3rem);
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 1.05;
  margin: 0.5rem 0 0.25rem;
  font-variant-numeric: tabular-nums;
}

.plan .price span {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tinte-3);
}

.plan ul {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 1.5rem;
  flex: 1;
}

.plan li {
  padding: 0.4rem 0 0.4rem 1.6rem;
  position: relative;
  font-size: 0.95rem;
}

.plan li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--pruefgruen);
  font-weight: 700;
}

.plan li.no::before { content: "—"; color: var(--tinte-3); }
.plan li.no { color: var(--tinte-3); }

/* --------------------------------------------------------------------------
   App-Bereich
   -------------------------------------------------------------------------- */

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2rem 0 1.5rem;
}

.page-head h1 { margin: 0; font-size: clamp(1.45rem, 2.4vw, 1.85rem); letter-spacing: -0.03em; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat {
  background: var(--papier-hell);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  padding: 1rem 1.2rem 1.05rem;
  box-shadow: var(--schatten-fein);
}

@media (max-width: 560px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .stat { padding: 0.85rem 0.9rem; }
}

.stat .stat-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: var(--tinte-3);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  margin-bottom: 0.45rem;
}

/* Kennzahlen sind Daten, keine Display-Typografie: Mono mit Tabellenziffern,
   wie die Beträge in den Kassenbuch-Tabellen — ruhig und auf einen Blick lesbar. */
.stat .stat-value {
  font-family: var(--font-data);
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Rechnungsformular: Positionszeilen */

/* Grundform: Beschreibung · Menge · Einheit · Einzelpreis · USt % · [x].
   So sehen die Zeilen im Generator, im Korrektur- und im Vorlagen-
   formular aus. */
.line-grid {
  display: grid;
  grid-template-columns: minmax(200px, 3fr) minmax(70px, 1fr) minmax(110px, 1.2fr) minmax(100px, 1.2fr) minmax(80px, 1fr) 44px;
  gap: 0.5rem;
  align-items: end;
  margin-bottom: 0.5rem;
}

/* Das Rechnungsformular trägt zusätzlich die USt-Kategorie und auf
   Wunsch den Listenpreis. Ohne diese Staffelung landete der Entfernen-
   Knopf in einer eigenen Zeile. */
#invoice-lines.hat-kategorie .line-grid {
  grid-template-columns: minmax(170px, 2.6fr) minmax(64px, 0.8fr) minmax(100px, 1.1fr) minmax(96px, 1.1fr) minmax(70px, 0.9fr) minmax(120px, 1.4fr) 44px;
}

.line-grid .col-listenpreis { display: none; }

#invoice-lines.hat-kategorie.zeigt-listenpreis .line-grid {
  grid-template-columns: minmax(150px, 2.2fr) minmax(60px, 0.7fr) minmax(92px, 1fr) minmax(96px, 1.1fr) minmax(96px, 1.1fr) minmax(66px, 0.8fr) minmax(112px, 1.3fr) 44px;
}

#invoice-lines.zeigt-listenpreis .col-listenpreis { display: block; }

#invoice-lines.zeigt-listenpreis ~ #listenpreis-hinweis { display: block; }

.check-inline {
  display: inline-flex;
  /* Oben ausgerichtet statt mittig: Bricht die Beschriftung auf dem
     Telefon um, soll das Kästchen bei der ersten Zeile stehen und nicht
     in der Mitte des Absatzes schweben. */
  align-items: start;
  gap: 0.4rem;
  color: var(--tinte-2);
  cursor: pointer;
  /* Damit die Beschriftung auf schmalen Geräten umbricht statt die
     Seite hinauszuschieben. ``flex-wrap`` ist der entscheidende Teil:
     Steht ein Link in der Beschriftung, zerfällt sie in mehrere
     Flex-Elemente (Text, Link, Text), und die stehen ohne diese Zeile
     zwingend nebeneinander — das letzte landet dann außerhalb. */
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
}

.check-inline input { width: auto; margin: 0; }

/* Zu- und Abschläge auf Dokumentebene */
.ac-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) minmax(160px, 2.2fr) minmax(110px, 1.2fr) minmax(70px, 0.8fr) minmax(120px, 1.3fr) 44px;
  gap: 0.5rem;
  align-items: end;
  margin-bottom: 0.5rem;
}

.ac-grid label {
  font-size: 0.72rem;
  color: var(--tinte-3);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.line-grid label {
  font-size: 0.72rem;
  color: var(--tinte-3);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.line-remove {
  border: 1px solid var(--linie);
  background: var(--papier-hell);
  color: var(--siegelrot);
  border-radius: var(--radius-s);
  height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease;
}

.line-remove svg { width: 15px; height: 15px; }

.line-remove:hover { background: var(--siegelrot-hell); }

/* Unterschriftsfeld auf dem Abnahmebeleg */

.signature-wrap {
  position: relative;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius-m);
  background: var(--papier-hell);
}

.signature-pad {
  display: block;
  width: 100%;
  height: 180px;
  border-radius: var(--radius-m);
  /* Ohne diese Zeile scrollt das Telefon unter dem Finger weg, statt zu
     zeichnen — der Browser wertet die Geste sonst als Wischen. */
  touch-action: none;
  cursor: crosshair;
}

.signature-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.9rem;
  margin: 0;
  text-align: center;
  color: var(--tinte-3);
  font-size: 0.85rem;
  pointer-events: none;
}

/* Auf dem Telefon ist die Fläche der Hauptzweck der Seite. */
@media (max-width: 720px) {
  .signature-pad { height: 220px; }
}

/* Ampel für Ergebnislisten (Stapelprüfung, Import). Bewusst zusätzlich
   mit Text und Badge beschriftet — Farbe allein trägt keine Aussage für Menschen, die sie
   nicht unterscheiden können. */
.ampel {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.4rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.ampel-gruen { background: var(--pruefgruen); }
.ampel-gelb { background: var(--warnung); }
.ampel-rot { background: var(--siegelrot); }

details.card > summary {
  cursor: pointer;
  list-style: none;
}

details.card > summary::-webkit-details-marker { display: none; }

details.card > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.5rem;
  color: var(--tinte-3);
  transition: transform 150ms ease;
}

details.card[open] > summary::before { transform: rotate(90deg); }

/* Anlagen im Rechnungsformular */
.anlage-grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1.4fr);
  gap: 0.5rem;
  align-items: end;
  margin-bottom: 0.6rem;
}

.anlage-grid label {
  font-size: 0.72rem;
  color: var(--tinte-3);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

@media (max-width: 720px) {
  .anlage-grid { grid-template-columns: 1fr; }
}

.signature-image {
  display: block;
  max-width: min(320px, 100%);
  height: auto;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--tinte);
  padding-bottom: 0.3rem;
  /* Die Unterschrift wird auf hellem Grund gezeichnet und ist dunkel.
     Im dunklen Design wäre sie sonst kaum zu sehen. */
  background: #ffffff;
  border-radius: var(--radius-s);
}

@media (max-width: 720px) {
  .line-grid,
  #invoice-lines.hat-kategorie .line-grid,
  #invoice-lines.hat-kategorie.zeigt-listenpreis .line-grid,
  .ac-grid {
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px dashed var(--linie);
    padding-bottom: 0.75rem;
  }
  .line-grid .col-desc,
  .ac-grid .col-grund { grid-column: 1 / -1; }
}

/* Upload-Zone (Tools) */

.dropzone {
  border: 2px dashed var(--linie-stark);
  border-radius: var(--radius-l);
  background: var(--papier-hell);
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.dropzone.dragover {
  border-color: var(--marke);
  background: var(--marke-hell);
}

.dropzone input[type="file"] { display: none; }

.dropzone .file-name {
  margin-top: 0.75rem;
  font-family: var(--font-data);
  font-size: 0.85rem;
  color: var(--tinte-2);
}

/* Prüfbericht: Stempel-Status + Befundzeilen */

.finding {
  display: flex;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-s);
  margin-bottom: 0.5rem;
  font-size: 0.92rem;
  align-items: baseline;
}

.finding .code {
  font-family: var(--font-data);
  font-size: 0.76rem;
  white-space: nowrap;
  font-weight: 500;
}

.finding-error { background: var(--siegelrot-hell); color: var(--siegelrot); }
.finding-warning { background: var(--warnung-hell); color: var(--warnung); }
.finding-info { background: var(--marke-hell); color: var(--marke); }

.result-status {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  font-weight: 600;
}

.result-status.ok { background: var(--pruefgruen-hell); color: var(--pruefgruen); }
.result-status.fail { background: var(--siegelrot-hell); color: var(--siegelrot); }

.result-status .stempel {
  flex-shrink: 0;
  background: transparent;
}

/* Definitionstabellen (Viewer) */

.kv {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 0.35rem 1rem;
  font-size: 0.94rem;
}

.kv dt { color: var(--tinte-3); font-weight: 500; margin: 0; }
.kv dd { margin: 0; overflow-wrap: anywhere; }

/* Auf dem Telefon blieben für den Wert kaum 130 Bildpunkte — zusammen
   mit `overflow-wrap: anywhere` brach das mitten im Wort um
   („Hauptwe/g 2", „13.08.20/26"). Untereinander gestellt hat der Wert
   die ganze Breite. */
@media (max-width: 560px) {
  .kv {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .kv dt { font-size: 0.82rem; }
  .kv dd { margin-bottom: 0.5rem; }
}

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

/* API-Key-Anzeige */

.key-reveal {
  background: var(--papier-schatten);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-s);
  font-family: var(--font-data);
  font-size: 0.85rem;
  padding: 0.7rem 0.9rem;
  overflow-wrap: anywhere;
  user-select: all;
}

/* --------------------------------------------------------------------------
   Footer — dunkles Band mit der vollen Wortmarke
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 3px solid var(--akzent);
  background: var(--band);
  margin-top: 4rem;
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 1.75rem;
  font-size: 0.9rem;
  color: var(--auf-band);
}

.site-footer strong { color: #fff; }

.footer-inner {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) 2fr;
  gap: 2.5rem;
  align-items: start;
}

.footer-marke { display: block; height: 56px; width: fit-content; }
.footer-marke:hover { text-decoration: none; }

.footer-claim {
  margin: 1.1rem 0 0;
  color: color-mix(in srgb, var(--auf-band) 72%, transparent);
  max-width: 26em;
}

.footer-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
}

.footer-titel {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--auf-band) 60%, transparent);
  margin: 0 0 0.75rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.footer-links a { color: var(--auf-band); width: fit-content; }
.footer-links a:hover { color: var(--akzent-hover); text-decoration: none; }

.footer-fuss {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--auf-band) 14%, transparent);
  color: color-mix(in srgb, var(--auf-band) 60%, transparent);
  font-size: 0.82rem;
}

@media (max-width: 720px) {
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .footer-marke { height: 48px; }
}

/* Rechtstexte */

.prose { max-width: 46em; }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.5em; }

/* Auth-Karten */

.auth-wrap {
  max-width: 430px;
  margin: clamp(2rem, 6vw, 4rem) auto;
}

.auth-wrap .card { padding: clamp(1.4rem, 4vw, 2rem); box-shadow: var(--schatten); }

/* Kleinkram */

.actions-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Inline-Formulare (z. B. API-Key anlegen): Textfeld neben dem Button
   statt in voller Breite darüber. */
.actions-row input[type="text"] {
  width: auto;
  flex: 1 1 220px;
  max-width: 320px;
}

.divider {
  border: none;
  border-top: 1px solid var(--linie);
  margin: 1.5rem 0;
}

/* Eingeloggte Navigation hat mehr Einträge — auf mittleren Breiten
   verdichten, bevor sie umbricht. */
@media (max-width: 1180px) {
  .nav { gap: 0.9rem; }
  .nav-link { padding: 0.5rem 0.5rem; font-size: 0.88rem; }
  .nav-link[aria-current]::after { left: 0.5rem; right: 0.5rem; }
}

@media (max-width: 640px) {
  .nav { flex-wrap: wrap; padding: 0.6rem 0 0.35rem; gap: 0.4rem; }
  .brand { height: 26px; margin-right: auto; }
  .nav-aktionen { order: 2; }
  .nav-links { order: 3; }

  /* Eine Zeile zum Wischen statt vier Zeilen Umbruch. Umgebrochen nahm
     die Leiste 230 von 812 Bildpunkten ein — auf der Unterschriftsseite
     drückte das die Zeichenfläche unter die Falz, und genau dort wird
     der Beleg beim Kunden unterschrieben. */
  .nav-links {
    margin-left: 0;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* Etwas Luft am Rand, damit sichtbar bleibt, dass es weitergeht. */
    padding-bottom: 0.2rem;
  }

  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links > * { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Eingangsadresse des Postfachs. Zum Abschreiben und Weitergeben
   gedacht — deshalb umbruchfest und mit Auswahlfläche statt als
   Fließtext. */
.eingangsadresse {
  display: inline-block;
  font-family: var(--font-data);
  font-size: 0.95rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-s);
  background: var(--papier-schatten);
  border: 1px solid var(--linie);
  overflow-wrap: anywhere;
  user-select: all;
}

/* Verlaufsbalken der Kennzahlen. Bewusst reines CSS ohne Diagramm-
   Bibliothek: Es geht um eine Tendenz, nicht um ablesbare Werte — die
   Summe steht daneben. */
.sparkline {
  display: block;
  height: 28px;
  width: 100%;
  min-width: 120px;
}

.sparkline rect {
  fill: var(--akzent);
  opacity: 0.85;
}

/* Einmalkennwörter und Wiederherstellungscodes: Ziffernblock-Optik,
   damit sich Abgetipptes prüfen lässt, ohne zu zählen. */
.code-eingabe {
  font-family: var(--font-data);
  font-size: 1.4rem;
  letter-spacing: 0.25em;
  text-align: center;
}

.code-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.code-liste li {
  padding: 0.4rem 0.6rem;
  background: var(--papier-schatten);
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  text-align: center;
}

/* Ein Knopf im Formularraster steht sonst oben, weil ihm die Beschriftung
   fehlt, die die anderen Felder nach unten schiebt. */
.field-knopf {
  display: flex;
  align-items: flex-end;
}

/* Abgelegter Beleg in der Detailansicht. Begrenzt, damit ein
   hochkantiges Handyfoto die Seite nicht zur Bildergalerie macht. */
.beleg-bild {
  display: block;
  max-width: 100%;
  max-height: 420px;
  width: auto;
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
}

/* Farbwahl für den Briefkopf. Die Punkte zeigen den Ton, den das PDF
   bekommt — ein Name allein („Petrol") sagt niemandem, wie es aussieht. */
.farbwahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
}

.farbe {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  min-width: 0;
}

.farbe input { width: auto; margin: 0; }

.farbe-punkt {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  flex: 0 0 auto;
}

/* Je Farbe eine Regel statt eines style-Attributs: Die CSP erlaubt kein
   Inline-CSS, und die Auswahl ist ohnehin fest — ein freier Farbwähler
   ist hier bewusst nicht vorgesehen. Die Werte spiegeln
   app/einvoice/briefkopf.py; ein Test hält beide zusammen. */
.farbe-punkt[data-ton="gruen"]      { background: #0e5f4b; }
.farbe-punkt[data-ton="terrakotta"] { background: #9e4f1a; }
.farbe-punkt[data-ton="tinte"]      { background: #2b2621; }
.farbe-punkt[data-ton="indigo"]     { background: #2f4470; }
.farbe-punkt[data-ton="bordeaux"]   { background: #7a2230; }
.farbe-punkt[data-ton="petrol"]     { background: #17505c; }

/* Platte für den QR-Code der Zwei-Faktor-Einrichtung (#67).

   Sie bleibt in beiden Erscheinungsbildern hell — deshalb feste Werte
   statt --papier-hell und --tinte, die im dunklen Modus tauschen. Ein
   invertierter QR-Code ist zwar spezifiziert, aber nicht jedes
   Lesegerät kommt damit zurecht, und ein Einrichtungsweg ist die
   falsche Stelle, um das auszuprobieren. Die Werte sind die hellen
   Fassungen der Palette, keine neuen Farben.

   Das Polster ist Darstellung, nicht Ruhezone: Die vier Module, die
   die Norm verlangt, zeichnet segno in das Bild selbst (app/core/qr.py). */
.qr-platte {
  /* Block, nicht inline-block: Als inline-block landet die Platte in
     derselben Zeile wie die Beschriftung, und die Grundlinie einer
     hohen inline-Box schiebt den Text unter das Bild statt darüber.
     `fit-content` hält sie trotzdem so schmal wie den Code selbst. */
  display: block;
  width: fit-content;
  margin: 0.75rem 0;
  padding: 0.75rem;
  background: #ffffff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  line-height: 0;
}

.qr-platte svg {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
}