/* Künstlerfinanzen — landing site.
   The same design language as the application (frontend/src/thema/): the brand teal gauge, the
   violet marker for the reported estimate, Fira Sans, rounded cards, pill buttons, light and dark.
   The colour values are copied from frontend/src/thema/farben.ts on purpose — this site is static
   HTML with no build step and must not depend on the application bundle. Oberflaeche.test.ts
   checks the text colours below against their surfaces in both modes (WCAG AA). */

:root {
  color-scheme: light;

  /* Surfaces */
  --papier: #eef1ec;
  --papier-blatt: #ffffff;
  --papier-tief: #e3e8e1;
  --linie: #d3dad1;
  --linie-zart: #e1e6df;
  /* Text and brand */
  --tinte: #14302f;
  --tinte-leise: #4c5b58;
  --pegel: #1f5f59;
  --pegel-hell: #3f7f78;
  --pegel-zart: #6f9a94;
  --marke: #4a3d9e;
  --signal: #a8321e;
  --erledigt: #2f6b44;
  /* On the brand teal (buttons) */
  --auf-pegel: #ffffff;
  /* Tints and shadow */
  --pegel-tint: rgba(31, 95, 89, 0.09);
  --marke-tint: rgba(74, 61, 158, 0.08);
  --schatten: 0 1px 2px rgba(12, 23, 22, 0.04), 0 10px 28px -14px rgba(12, 23, 22, 0.18);

  --raum-2: 0.5rem;
  --raum-3: 0.75rem;
  --raum-4: 1rem;
  --raum-6: 1.5rem;
  --raum-8: 2rem;
  --raum-12: 3rem;
  --raum-16: 4rem;

  --t-xs: 0.78rem;
  --t-s: 0.9rem;
  --t-m: 1rem;
  --t-l: 1.2rem;
  --t-xl: 1.6rem;
  --t-2xl: 2.2rem;
  --t-3xl: 3.1rem;

  --rund: 14px;
  --rund-gross: 20px;
  --breite: 68rem;
}

/* Dark tokens, twice on purpose: for "match system" / no JavaScript, and for an explicit choice
   (farbschema.js sets html.light or html.dark). Oberflaeche.test.ts fails if the two drift. */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    color-scheme: dark;
    --papier: #0c1716;
    --papier-blatt: #132322;
    --papier-tief: #1a2e2c;
    --linie: #2b4340;
    --linie-zart: #213634;
    --tinte: #e4eeeb;
    --tinte-leise: #a3b6b1;
    --pegel: #6fc7bb;
    --pegel-hell: #9adbd1;
    --pegel-zart: #3f7a73;
    --marke: #b3a8ff;
    --signal: #ff8f7a;
    --erledigt: #7fd39a;
    --auf-pegel: #06201d;
    --pegel-tint: rgba(111, 199, 187, 0.1);
    --marke-tint: rgba(179, 168, 255, 0.09);
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
  }
}

:root.dark {
  color-scheme: dark;
  --papier: #0c1716;
  --papier-blatt: #132322;
  --papier-tief: #1a2e2c;
  --linie: #2b4340;
  --linie-zart: #213634;
  --tinte: #e4eeeb;
  --tinte-leise: #a3b6b1;
  --pegel: #6fc7bb;
  --pegel-hell: #9adbd1;
  --pegel-zart: #3f7a73;
  --marke: #b3a8ff;
  --signal: #ff8f7a;
  --erledigt: #7fd39a;
  --auf-pegel: #06201d;
  --pegel-tint: rgba(111, 199, 187, 0.1);
  --marke-tint: rgba(179, 168, 255, 0.09);
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-m);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
  hyphens: auto;
}

h1 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, var(--t-3xl));
  letter-spacing: -0.025em;
  max-width: 18ch;
}

h2 {
  font-size: var(--t-xl);
  letter-spacing: -0.015em;
  margin-bottom: var(--raum-4);
}

h3 {
  font-size: 1.05rem;
  margin-bottom: var(--raum-2);
}

p {
  margin: 0 0 var(--raum-4);
  max-width: 66ch;
}

a {
  color: var(--pegel);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

strong,
b {
  font-weight: 600;
}

.rahmen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--raum-6);
}

/* ---------- Skip link: the first Tab stop, visible only while focused ---------- */

.sprung {
  position: absolute;
  left: var(--raum-4);
  top: 0;
  z-index: 20;
  padding: var(--raum-3) var(--raum-4);
  border-radius: 999px;
  background: var(--papier-blatt);
  color: var(--pegel);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-120%);
}

.sprung:focus {
  transform: translateY(var(--raum-3));
}

/* The skip link's target takes focus without drawing the focus ring around the whole page. */
main:focus {
  outline: none;
}

/* ---------- Header: translucent bar with the gauge wordmark ---------- */

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

.kopf__innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--raum-3) var(--raum-6);
  display: flex;
  align-items: center;
  gap: var(--raum-3);
}

.wortmarke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--tinte);
  white-space: nowrap;
}

/* The mark: the logo itself (favicon.svg — a K on teal, its upright the violet estimate line),
   the same file the browser tab shows and the application's frontend/src/teile/Wortmarke.tsx
   uses. It carries its own background, so it reads on the light and the dark page alike. */
.wortmarke__strich {
  display: inline-block;
  flex: none;
  width: 28px;
  height: 28px;
  background: url('/favicon.svg') center / contain no-repeat;
}

/* Every header link gets a touch target at least 44 px tall (WCAG 2.5.5) without changing its
   look: an invisible layer, centred on the link, takes the taps. The pills are about 23 px on a
   phone, the header is taller than 44 px, so the layer fits inside it. */
.kopf__innen > a {
  position: relative;
}

.kopf__innen > a::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  min-height: 44px;
  transform: translateY(-50%);
}

.kopf__anmelden,
.kopf__sprache {
  font-size: var(--t-s);
  font-weight: 600;
  text-decoration: none;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
}

.kopf__anmelden {
  margin-inline-start: auto;
  color: var(--pegel);
  border: 1px solid var(--linie);
  background: var(--papier-blatt);
}

.kopf__anmelden:hover {
  border-color: var(--pegel);
}

/* The link to the same page in the other language (German ⇄ English). */
.kopf__sprache {
  color: var(--tinte-leise);
}

.kopf__sprache:hover {
  color: var(--tinte);
  background: var(--papier-tief);
}

/* ---------- Hero ---------- */

.buehne {
  position: relative;
  padding: var(--raum-16) 0 var(--raum-12);
}

/* A soft teal-and-violet glow behind the hero, like the application's sign-in panel. */
.buehne::before {
  content: '';
  position: absolute;
  /* Out to the viewport edges exactly, never beyond them (no sideways scrolling). */
  inset: -12rem calc(50% - 50vw) 0;
  z-index: -1;
  background:
    radial-gradient(40rem 22rem at 12% 0%, var(--pegel-tint), transparent 70%),
    radial-gradient(34rem 20rem at 92% 30%, var(--marke-tint), transparent 70%);
  pointer-events: none;
}

.buehne h1 {
  margin-bottom: var(--raum-6);
}

/* The search term the page answers, as the first line of the H1 (SEO audit 2026-09-29, item 7). */
.buehne__thema {
  display: block;
  margin-bottom: var(--raum-2);
  font-size: var(--t-l);
  letter-spacing: 0;
  color: var(--pegel);
}

.buehne__eyebrow {
  display: inline-block;
  margin-bottom: var(--raum-4);
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: var(--papier-blatt);
  color: var(--pegel);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.buehne__stand {
  font-size: var(--t-xs);
  color: var(--tinte-leise);
  margin-top: 0;
}

.buehne__vorspann {
  font-size: var(--t-l);
  color: var(--tinte-leise);
  max-width: 52ch;
}

.buehne__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
  margin-top: var(--raum-8);
}

/* ---------- Sections ---------- */

.abschnitt {
  padding: var(--raum-12) 0;
  scroll-margin-top: 5rem;
}

.abschnitt + .abschnitt {
  border-top: 1px solid var(--linie-zart);
}

.antwort {
  font-size: var(--t-l);
  line-height: 1.5;
  max-width: 60ch;
  margin-bottom: var(--raum-6);
  padding: var(--raum-4) var(--raum-6);
  border-left: 3px solid var(--pegel);
  border-radius: 0 var(--rund) var(--rund) 0;
  background: var(--pegel-tint);
}

/* Figure tiles */
.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--raum-4);
  margin: var(--raum-8) 0;
}

.zahlen > div {
  background: var(--papier-blatt);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  padding: var(--raum-6);
}

.zahl__wert {
  display: block;
  font-size: var(--t-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--raum-2);
  color: var(--pegel);
}

.zahl__text {
  font-size: var(--t-s);
  color: var(--tinte-leise);
}

/* Feature cards */
.spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--raum-4);
}

.spalten > div {
  background: var(--papier-blatt);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  padding: var(--raum-6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.spalten > div:hover {
  transform: translateY(-2px);
}

.spalten p {
  margin: 0;
  color: var(--tinte-leise);
}

.symbol {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--raum-4);
  border-radius: 12px;
  background: var(--pegel-tint);
  color: var(--pegel);
}

.symbol svg {
  width: 1.35rem;
  height: 1.35rem;
}

/* What the product does not do */
.grenze {
  background: var(--papier-blatt);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--marke);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  padding: var(--raum-6) var(--raum-8);
}

.grenze ul {
  margin: 0;
  padding-left: var(--raum-4);
}

.grenze li {
  margin-bottom: var(--raum-3);
  max-width: 66ch;
}

.grenze li:last-child {
  margin-bottom: 0;
}

/* ---------- Price: one card per pass ---------- */

.preise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--raum-4);
  margin-bottom: var(--raum-6);
  max-width: 44rem;
}

.preis {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  margin-bottom: var(--raum-4);
  background: var(--papier-blatt);
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  box-shadow: var(--schatten);
  padding: var(--raum-6);
}

.preise .preis {
  margin-bottom: 0;
}

.preise .preis:first-child {
  border: 2px solid var(--pegel);
}

.preis__wert {
  font-size: var(--t-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.preis > span:not(.preis__wert) {
  color: var(--tinte-leise);
}

/* ---------- Buttons: pills like the application's ---------- */

.knopf,
.knopf--leise {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 999px;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.knopf {
  background: var(--pegel);
  color: var(--auf-pegel);
  border: 1px solid var(--pegel);
  box-shadow: 0 6px 18px -8px var(--pegel);
}

.knopf:hover {
  background: var(--pegel-hell);
  border-color: var(--pegel-hell);
  color: var(--auf-pegel);
  transform: translateY(-1px);
}

.knopf--leise {
  background: var(--papier-blatt);
  color: var(--tinte);
  border: 1px solid var(--linie);
}

.knopf--leise:hover {
  border-color: var(--pegel);
  color: var(--pegel);
}

/* ---------- FAQ ---------- */

dl {
  margin: 0;
  max-width: 50rem;
}

dt {
  font-weight: 600;
  padding: var(--raum-4) var(--raum-6) 0;
  background: var(--papier-blatt);
  border: 1px solid var(--linie);
  border-bottom: 0;
  border-radius: var(--rund) var(--rund) 0 0;
}

dd {
  margin: 0;
  padding: var(--raum-2) var(--raum-6) var(--raum-4);
  color: var(--tinte-leise);
  background: var(--papier-blatt);
  border: 1px solid var(--linie);
  border-top: 0;
  border-radius: 0 0 var(--rund) var(--rund);
  margin-bottom: var(--raum-3);
}

/* ---------- Footer ---------- */

.fuss {
  margin-top: var(--raum-12);
  border-top: 1px solid var(--linie);
  background: var(--papier-blatt);
  padding: var(--raum-8) 0 var(--raum-12);
  font-size: var(--t-s);
  color: var(--tinte-leise);
}

.fuss__reihe {
  display: flex;
  gap: var(--raum-3) var(--raum-6);
  flex-wrap: wrap;
  margin-bottom: var(--raum-4);
}

.fuss a {
  color: var(--tinte-leise);
}

.fuss a:hover {
  color: var(--pegel);
}

/* ---------- Guides (Wissen), hub, developer and legal pages ---------- */

.krumen {
  font-size: var(--t-s);
  color: var(--tinte-leise);
  margin: var(--raum-6) 0 var(--raum-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

/* A chevron between the steps; decorative, the links carry the meaning. */
.krumen a::after {
  content: '›';
  margin-inline-start: 0.5rem;
  color: var(--tinte-leise);
  text-decoration: none;
  display: inline-block;
}

.buehne--schmal {
  padding: var(--raum-12) 0 var(--raum-8);
}

.buehne--schmal h1 {
  max-width: 24ch;
  font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem);
}

.karten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--raum-4);
}

.karte {
  background: var(--papier-blatt);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  padding: var(--raum-6);
  transition: transform 0.2s ease;
}

.karte:hover {
  transform: translateY(-2px);
}

.karte h3 {
  margin: 0 0 var(--raum-2);
}

.karte p {
  margin: 0;
  color: var(--tinte-leise);
  max-width: 62ch;
}

.liste {
  max-width: 62ch;
}

.liste li + li {
  margin-top: var(--raum-2);
}

.tabelle {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  max-width: 50rem;
  font-variant-numeric: tabular-nums;
  background: var(--papier-blatt);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  overflow: hidden;
}

.tabelle th,
.tabelle td {
  border-bottom: 1px solid var(--linie-zart);
  padding: var(--raum-3) var(--raum-4);
  text-align: left;
  vertical-align: top;
}

.tabelle tr:last-child td {
  border-bottom: 0;
}

.tabelle th {
  background: var(--papier-tief);
  font-weight: 600;
  color: var(--tinte-leise);
}

.code {
  background: var(--papier-tief);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: var(--raum-4);
  overflow-x: auto;
  font-size: 0.875rem;
}

.quellen {
  max-width: 62ch;
}

.zart {
  color: var(--tinte-leise);
  font-size: 0.9375rem;
}

.merksatz {
  font-size: var(--t-l);
  font-weight: 600;
  max-width: 54ch;
}

.feld__erlaeuterung {
  color: var(--tinte-leise);
}

/* The answer first: a short summary under a guide's heading, the passage most likely to be quoted. */
.kurz {
  max-width: 50rem;
  margin-block: var(--raum-6) 0;
  padding: var(--raum-4) var(--raum-6);
  background: var(--papier-blatt);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--pegel);
  border-radius: var(--rund);
}
.kurz__titel {
  margin: 0 0 var(--raum-2);
  font-weight: 700;
}
.kurz p:last-child,
.kurz ul:last-child {
  margin-bottom: 0;
}

/* The way into the product at the end of a guide: after the content, before the sources. */
.weiter {
  margin: 2.5rem 0;
  padding: var(--raum-6) var(--raum-8);
  border-radius: var(--rund-gross);
  border: 1px solid var(--linie);
  background:
    radial-gradient(24rem 10rem at 0% 0%, var(--pegel-tint), transparent 70%),
    var(--papier-blatt);
  box-shadow: var(--schatten);
}

.weiter p:last-child {
  margin-bottom: 0;
}

/* ---------- Small screens ---------- */

@media (max-width: 52rem) {
  .buehne__raster {
    grid-template-columns: 1fr;
    gap: var(--raum-8);
  }
}

@media (max-width: 40rem) {
  .rahmen,
  .kopf__innen {
    padding-left: var(--raum-4);
    padding-right: var(--raum-4);
  }

  .buehne {
    padding: var(--raum-8) 0;
  }

  .kopf__anmelden,
  .kopf__sprache {
    padding: 0.35rem 0.6rem;
  }

  /* "Künstlerfinanzen" is longer than the old name; at 390 px the header would scroll sideways.
     Linux renders the font a few pixels wider than macOS (the first CI run on 2026-10-03 was 6 px
     over where macOS fitted), so the header keeps room to spare: about 25 px at 390 px. */
  .kopf__innen {
    gap: var(--raum-2);
  }

  .wortmarke {
    font-size: 1rem;
    gap: 0.4rem;
  }

  /* The logo is wider than the gauge line it replaced (2026-10-03); smaller here, so the room
     to spare named above stays. */
  .wortmarke__strich {
    width: 22px;
    height: 22px;
  }

  /* The language link shows "EN"/"DE" on phones. The word stays the link's text, so screen
     readers still say "English"/"Deutsch"; the short form's alternative text is empty, so it
     is not read out as well. */
  .kopf__sprache[data-kurz] {
    font-size: 0;
  }

  .kopf__sprache[data-kurz]::after {
    content: attr(data-kurz) / "";
    font-size: var(--t-s);
  }

  .grenze {
    padding: var(--raum-4) var(--raum-6);
  }

  .preis__wert {
    font-size: var(--t-2xl);
  }

  .weiter {
    padding: var(--raum-4) var(--raum-6);
  }

  .tabelle {
    display: block;
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .kopf,
  .buehne::before {
    position: static;
    background: none;
  }

  .knopf,
  .knopf--leise {
    box-shadow: none;
  }
}

/* --- Theme control (farbschema.js). Hidden until the script builds it: no JS, no empty box. --- */
.farbwahl {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Opens the right-hand group (control · Anmelden · English) on every page, with or without nav. */
  margin-inline-start: auto;
}
.farbwahl ~ .kopf__anmelden {
  margin-inline-start: 0;
}
.farbwahl[hidden] {
  display: none;
}
.farbwahl svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.farbwahl svg .gefuellt {
  fill: currentColor;
  stroke: none;
}
.farbwahl__ausloeser,
.farbwahl__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--raum-2);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tinte-leise);
  font: inherit;
  cursor: pointer;
}
.farbwahl__knopf[aria-pressed='true'] {
  background: var(--papier-blatt);
  color: var(--pegel);
  box-shadow: 0 0 0 1px var(--linie);
}
.farbwahl__ausloeser:focus-visible,
.farbwahl__knopf:focus-visible {
  outline: 2px solid var(--pegel);
  outline-offset: 2px;
}
.farbwahl__text {
  font-size: var(--t-s);
  font-weight: 600;
}

/* Wide screens: a segmented control of three icons; names for screen readers and as tooltips. */
@media (min-width: 600px) {
  .farbwahl__ausloeser {
    display: none;
  }
  .farbwahl__gruppe {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--linie);
    border-radius: 999px;
  }
  .farbwahl__knopf {
    position: relative;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
  }
  /* The pill stays 36 px; the touch target is 44 px (D39). */
  .farbwahl__knopf::before {
    content: '';
    position: absolute;
    inset: -4px;
  }
  .farbwahl__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Phones: one button that opens the three choices as a small menu. */
@media (max-width: 599.98px) {
  .farbwahl__gruppe {
    display: none;
  }
  .farbwahl[data-offen] .farbwahl__gruppe {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 6px);
    /* Opens rightwards, over Anmelden and English: the control sits mid-header on phones, so a
       right-anchored menu ran past the left screen edge at 390 px. */
    left: 0;
    z-index: 20;
    min-width: 12rem;
    padding: var(--raum-2);
    background: var(--papier-blatt);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    box-shadow: var(--schatten);
  }
  .farbwahl[data-offen] .farbwahl__knopf {
    justify-content: flex-start;
    width: 100%;
    padding: 0 var(--raum-3);
  }
}

/* --- Hero (landing redesign 2026-09-27) --------------------------------------------------- */
.buehne__raster {
  display: grid;
  gap: var(--raum-12);
  align-items: center;
}
@media (min-width: 900px) {
  .buehne__raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
}
.frist-abzeichen {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-bottom: var(--raum-4);
  padding: 0 var(--raum-4);
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--papier-blatt);
  color: var(--tinte);
  font-size: var(--t-s);
  font-weight: 600;
  text-decoration: none;
}
.frist-abzeichen b {
  color: var(--marke);
}
.buehne__zusage {
  margin-top: var(--raum-4);
  color: var(--tinte-leise);
  font-size: var(--t-s);
}
.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.vorschau {
  margin: 0;
}
.vorschau__fenster {
  padding: var(--raum-4);
  background: var(--papier-blatt);
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  box-shadow: 0 30px 60px -28px rgba(12, 23, 22, 0.45);
}
@media (min-width: 900px) {
  .vorschau__fenster {
    transform: perspective(1100px) rotateY(-7deg) rotateX(2deg);
  }
}
.vorschau__kopf {
  display: flex;
  justify-content: space-between;
  margin: 0 0 var(--raum-3);
  max-width: none;
  color: var(--tinte-leise);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vorschau__beispiel {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}
.vorschau__kacheln {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--raum-2);
  margin-bottom: var(--raum-4);
}
.vorschau__kachel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: var(--raum-2) var(--raum-3);
  background: var(--papier-tief);
  border-radius: 10px;
}
/* Direct child only: the label. A descendant selector would also catch the value spans that
   .vorschau__differenz splits below, overriding their bold, larger value styling. */
.vorschau__kachel > span {
  color: var(--tinte-leise);
  font-size: var(--t-xs);
}
.vorschau__kachel b {
  font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.2rem);
  white-space: nowrap;
}
.vorschau__marke {
  color: var(--marke);
}
/* The difference tile's value is too wide to fit one line at narrow widths even with nowrap
   (~119px needed vs. ~79px available at 390px); split it so it wraps cleanly between the euro
   figure and the percentage instead of overflowing or breaking inside either number. */
.vorschau__kachel b.vorschau__differenz {
  white-space: normal;
}
.vorschau__differenz span {
  white-space: nowrap;
}
.vorschau__latte {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: var(--papier-tief);
}
.vorschau__fuellung {
  width: 62%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pegel-zart), var(--pegel));
  transform-origin: left;
  animation: vorschau-fuellen 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.vorschau__strich {
  position: absolute;
  top: -5px;
  left: 75%;
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: var(--marke);
}
@keyframes vorschau-fuellen {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.vorschau__monate {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 4px;
  height: 64px;
  margin-top: var(--raum-4);
}
.vorschau__monate i {
  height: var(--h, 8%);
  border-radius: 3px 3px 0 0;
  background: var(--pegel-zart);
}
.vorschau__monate .vorschau__jetzt {
  background: var(--pegel);
}
.vorschau__monate .vorschau__leer {
  height: 8%;
  background: var(--papier-tief);
}
.vorschau__fristen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin: var(--raum-4) 0 0;
  max-width: none;
}
.vorschau__fristen span {
  padding: 2px var(--raum-2);
  border-radius: 8px;
  background: var(--papier-tief);
  font-size: var(--t-xs);
}
@media (prefers-reduced-motion: reduce) {
  .vorschau__fuellung {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* --- Facts strip and steps ----------------------------------------------------------------- */
.fakten {
  margin-block: var(--raum-12) 0;
}
.zahlen--gross .zahl__wert {
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
}
.fakten__quelle {
  margin-top: var(--raum-3);
  font-size: var(--t-s);
}
.schritte {
  display: grid;
  gap: var(--raum-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
@media (min-width: 800px) {
  .schritte {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.schritt {
  position: relative;
  padding: var(--raum-6);
  background: var(--papier-blatt);
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  box-shadow: var(--schatten);
}
.schritt__nummer {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--raum-3);
  border-radius: 50%;
  background: var(--pegel);
  color: var(--auf-pegel);
  font-weight: 700;
}
.schritt__bild {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin-top: var(--raum-4);
}
.schritt__bild > span {
  padding: 2px var(--raum-2);
  border-radius: 8px;
  background: var(--papier-tief);
  color: var(--tinte-leise);
  font-size: var(--t-xs);
  font-weight: 600;
}
.schritt__bild .vorschau__latte {
  width: 100%;
}

/* --- Header in-page links (hidden on phones, where the header has no room) ------------------- */
.kopf__nav {
  display: none;
  gap: var(--raum-4);
  margin-left: auto;
}
.kopf__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tinte-leise);
  font-weight: 600;
  text-decoration: none;
}
.kopf__nav a:hover {
  color: var(--tinte);
}
@media (min-width: 45rem) {
  .kopf__nav {
    display: inline-flex;
  }
  /* While the nav shows it carries the auto margin, so the right-hand group stays together;
     on phones the nav is hidden and Anmelden keeps its own auto margin. */
  .kopf__nav ~ .kopf__anmelden,
  .kopf__nav ~ .farbwahl {
    margin-inline-start: 0;
  }
}

/* --- Feature grid, trust block, pass cards, knowledge, FAQ ---------------------------------- */
.spalten--raster {
  display: grid;
  gap: var(--raum-4);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
/* From 900px: the first large tile takes 4 of 6 columns and two rows, the other two large tiles
   stack beside it, and the six small cards fill two rows of three. */
@media (min-width: 900px) {
  .spalten--raster {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .spalten--raster > * {
    grid-column: span 2;
  }
  .spalten--raster > .karte--gross:first-child {
    grid-column: span 4;
    grid-row: span 2;
  }
}
.karte__bild {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin-block: var(--raum-3);
}
.karte__bild span {
  padding: 2px var(--raum-2);
  border-radius: 8px;
  background: var(--papier-tief);
  color: var(--tinte-leise);
  font-size: var(--t-xs);
  font-weight: 600;
}
#grenze .grenze {
  padding: var(--raum-6) var(--raum-4);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--marke);
  border-radius: var(--rund-gross);
  background: var(--marke-tint);
}
@media (min-width: 600px) {
  #grenze .grenze {
    padding: var(--raum-8);
  }
}
.preise__hinweis {
  color: var(--tinte);
  font-weight: 600;
}
.preise__steuer {
  margin-top: calc(-1 * var(--raum-2));
  color: var(--tinte-leise);
  font-size: var(--t-s);
}
.preis--hervor {
  border-color: var(--pegel);
  box-shadow: 0 0 0 2px var(--pegel-tint), var(--schatten);
}
.wissen {
  display: grid;
  gap: var(--raum-8);
}
@media (min-width: 1000px) {
  .wissen {
    grid-template-columns: 14rem minmax(0, 1fr);
    align-items: start;
  }
  .wissen__inhalt {
    position: sticky;
    top: 5rem;
    margin-top: var(--raum-12);
  }
}
.wissen__titel {
  margin: 0 0 var(--raum-2);
  color: var(--tinte-leise);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wissen__inhalt ol {
  margin: 0;
  padding-left: 1.2rem;
  font-size: var(--t-s);
}
.wissen__inhalt a {
  display: inline-block;
  padding-block: 0.7rem;
}
.fragen {
  display: grid;
  max-width: 50rem;
  gap: var(--raum-3);
}
.frage {
  background: var(--papier-blatt);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
}
.frage summary {
  min-height: 44px;
  padding: var(--raum-3) var(--raum-4);
  font-weight: 700;
  cursor: pointer;
}
.frage summary:focus-visible {
  outline: 2px solid var(--pegel);
  outline-offset: 2px;
}
.frage__antwort {
  padding: 0 var(--raum-4) var(--raum-4);
  color: var(--tinte-leise);
}