/* ===========================================================================
   BelegHero 2.0 - Design-Entwurf im Finom-Stil
   Nur fuer die lokale Vorschau. Aendert nichts am bestehenden theme.css.

   Grundgedanke: sehr viel Weissraum, eine einzige Signalfarbe (Gruen statt
   Finom-Pink), randlose Karten in hellem Grau, grosse runde Radien, fette
   eng laufende Headlines. Neutraltoene sind alle leicht ins Gruen gezogen,
   damit die Flaeche nicht kalt wirkt.
   ========================================================================= */

@font-face {
  font-family: "Jakarta";
  src: url("/static/fonts/PlusJakartaSans.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Schriftgroessen: eine Skala statt einundfuenfzig Einzelwerten ------
     Gemessen am 05.08.2026: 51 verschiedene rem-Werte in 534 Vorkommen ueber
     20 Seiten. Darunter 0.82, 0.83, 0.84, 0.85, 0.86, 0.87 und 0.88
     nebeneinander - den Unterschied sieht niemand, aber dass es sie alle
     gibt, beweist, dass niemand aus einer Skala auswaehlt: jede neue Stelle
     erfand ihren eigenen Wert.

     Die Stufen liegen NICHT auf einer Formel, sondern auf den gemessenen
     Haeufungen - dort, wo die meisten Werte ohnehin schon standen. Dadurch
     verschiebt sich beim Umstellen nichts weiter als 0,8px, und das ist der
     Punkt: die Aufraeumaktion darf das Aussehen nicht veraendern, nur die
     Zahl der Moeglichkeiten.

     Wer eine neue Groesse braucht: hier eine Stufe nehmen. Wer keine
     passende findet, hat vermutlich kein Groessenproblem, sondern ein
     Gewichts- oder Abstandsproblem. */
  --fs-marke:   0.72rem;   /* Etiketten, Versalien, Zaehler */
  --fs-klein:   0.80rem;   /* Hinweise, Fusszeilen */
  --fs-neben:   0.85rem;   /* Nebentext neben dem Hauptinhalt */
  --fs-text:    0.90rem;   /* Fliesstext in dichten Bereichen */
  --fs-basis:   1.00rem;   /* Grundtext */
  --fs-gross:   1.15rem;   /* betonter Text, kleine Ueberschrift */
  --fs-titel:   1.30rem;   /* Abschnittstitel */
  --fs-titel-l: 1.55rem;   /* grosser Abschnittstitel */
  --fs-kopf:    1.90rem;   /* Seitentitel */
  --fs-kopf-l:  2.60rem;   /* Seitentitel gross */

  /* --- Flaechen: Weiss und Grau, minimal ins Gruen getoent ---------------- */
  --paper: oklch(99.4% 0.003 150);
  --surface: oklch(97.1% 0.006 150);
  --surface-2: oklch(94.6% 0.009 150);
  --line: oklch(90% 0.010 150);
  --line-soft: oklch(94% 0.008 150);

  /* --- Schrift ----------------------------------------------------------- */
  --ink: oklch(18% 0.014 152);
  --ink-2: oklch(45% 0.012 152);
  /* Gemessen am 03.08.2026 ueber /account, /abo und /invoices: dieser eine
     Ton war fuer 40 Textstellen der Grund, dass Text zu hell wirkt. Bei den
     alten 60% ergab er rgb(124,130,125) und damit

         3,88 auf --paper  (rgb 252,254,252)
         3,63 auf --surface (rgb 243,247,243)
         3,37 auf --surface-2 (rgb 233,239,234)

     Verlangt sind 4,5 fuer Fliesstext. Betroffen war alles Erklaerende:
     Unterzeilen, Feldbeschriftungen, Abschnittsnamen in der Leiste, die
     Tarifzeilen - also gerade das, was jemand liest, der etwas nicht weiss.

     52% liefert rgb(101,107,102) und besteht auf allen drei Flaechen
     (5,38 / 5,04 / 4,68). Der Ton bleibt deutlich leichter als --ink (18%)
     und trennt Zweitrangiges weiterhin sichtbar vom Haupttext. */
  --ink-3: oklch(52% 0.010 152);

  /* --- Signature-Gruen ---------------------------------------------------- */
  /* #2e4f35 ist die Hausfarbe und bleibt exakt so. Weisser Text darauf
     erreicht 9,2:1, also weit ueber AA, auch fuer kleine Beschriftungen. */
  --green: #2e4f35;
  --green-deep: #223c28; /* gedrueckt und Mauszeiger darueber */
  --green-lit: oklch(58% 0.075 152); /* dekorativ: Ziffern, Balken, Punkte */
  --green-wash: oklch(95.5% 0.018 152);
  --forest: #23402c; /* dunkle Flaeche, noch eine Stufe tiefer */

  /* --- Nebenfarben, sparsam ---------------------------------------------- */
  /* Kräftig bleibt kräftig: --amber macht nur kleine Marken (Zählpille,
     ein Balkenabschnitt). Auf wenigen Quadratmillimetern ist Sättigung
     Information, keine Lautstärke. */
  --amber: oklch(64% 0.145 68);
  /* Der Wash dagegen füllt ganze Kästen - „Ein paar Angaben würden helfen",
     „Noch keine Stammdaten hinterlegt", der fehlende Drive-Anschluss.
     Rückmeldung Henry, 04.08.2026: „das orange hier ist zu aggressiv".
     Buntheit gemessen als Abstand zwischen größtem und kleinstem Kanal:
     bei 0.042 sind das 44 Punkte (255,239,211), bei 0.022 noch 24
     (255,246,231) - knapp die Hälfte. Der Ton bleibt eindeutig als Hinweis
     erkennbar, ruft aber nicht mehr.
     Der Text darauf (oklch 38% 0.045 62) kommt damit auf 9,43:1. */
  --amber-wash: oklch(97.5% 0.022 80);
  --blue: oklch(56% 0.155 258);
  --blue-wash: oklch(96% 0.035 258);

  /* --- Form -------------------------------------------------------------- */
  --r-sm: 14px;
  --r: 20px;
  --r-card: 26px;
  --r-lg: 34px;
  --r-pill: 999px;

  --sh-nav: 0 8px 28px -10px oklch(20% 0.02 150 / 0.16),
    0 1px 2px oklch(20% 0.02 150 / 0.06);
  --sh-float: 0 28px 64px -34px oklch(20% 0.03 150 / 0.42);
  --sh-tile: 0 14px 34px -20px oklch(20% 0.03 150 / 0.34);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --shell: 1220px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --nav-h: 103px; /* Pille plus Abstand, damit der Hero darunter durchlaufen kann */
}

/* ============================== Grundlagen ============================== */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Jakarta", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
video,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--green);
  color: #fff;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 6px;
}

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ============================== Typografie ============================== */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.7rem, 6.4vw, 5.1rem);
}

.h2 {
  font-size: clamp(2.05rem, 4.4vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.033em;
}

.h3 {
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.16;
}

.lead {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
  margin: 1.4rem 0 0;
}

.muted {
  color: var(--ink-2);
}

.tiny {
  font-size: 0.875rem;
  color: var(--ink-3);
  letter-spacing: -0.005em;
}

p {
  margin: 0 0 1rem;
  max-width: 68ch;
}

/* Abschnittslabel, klein und ruhig ueber der Headline */
.kicker {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1.1rem;
}

/* ============================== Buttons ================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 56px;
  padding: 0.95rem 2rem;
  border: 0;
  border-radius: var(--r-pill);
  font: inherit;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
    transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.btn-primary {
  background: var(--green);
  color: #fff;
}

.btn-primary:hover {
  background: var(--green-deep);
}


.btn-quiet {
  background: var(--surface);
  color: var(--ink);
}

.btn-quiet:hover {
  background: var(--surface-2);
}


.btn-lg {
  min-height: 64px;
  padding: 1.1rem 2.4rem;
  font-size: 1.15rem;
}

/* Auf dem Video: dunkles Gruen auf dunklem Grund traegt nicht, deshalb dreht
   sich die Logik um. Weisse Flaeche mit gruener Schrift, 9,2:1. */
.btn-onfilm {
  background: var(--paper);
  color: var(--green);
}

.btn-onfilm:hover {
  background: #fff;
  color: var(--green-deep);
}

.btn-onfilm-ghost {
  background: transparent;
  color: var(--paper);
  box-shadow: inset 0 0 0 1.5px oklch(100% 0 0 / 0.55);
}

.btn-onfilm-ghost:hover {
  background: oklch(100% 0 0 / 0.14);
  box-shadow: inset 0 0 0 1.5px var(--paper);
}

.btn:active {
  transform: scale(0.985);
}

/* Textlink mit Pfeil, wie bei Finom unter den Abschnitten */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.0625rem;
  padding-block: 0.4rem;
}

.arrow-link svg {
  transition: transform 0.4s var(--ease);
}

.arrow-link:hover svg {
  transform: translateX(6px);
}

/* ======================= Schwebende Pillen-Navigation =================== */

/* Finom trennt Logo und Navigation in zwei schwebende Elemente, weil ihr Logo
   eine reine Bildmarke ist. BelegHero hat eine Wortmarke, deshalb hier eine
   durchgehende Pille: Logo links, Links mittig, Aktionen rechts. */

.nav-zone {
  position: sticky;
  top: 0;
  z-index: 60;
  padding-block: 1rem;
  pointer-events: none;
}

.nav-zone > * {
  pointer-events: auto;
}

.nav-bar {
  max-width: var(--shell);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem 0.5rem 1.4rem;
  background: var(--paper);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-nav);
}

@media (min-width: 1300px) {
  .nav-bar {
    margin-inline: auto;
  }
}

@media (max-width: 1280px) {
  .nav-zone {
    padding-inline: var(--gutter);
  }
}

/* Logo: der bestehende Radar plus Wortmarke, unveraendert uebernommen */
.nav-logo {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ink);
  padding-right: 0.6rem;
}

.nav-logo .p {
  color: var(--green);
}

.radar-sweep {
  transform-origin: 32px 32px;
  animation: radar-spin 5s linear infinite;
}

@keyframes radar-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .radar-sweep {
    animation: none;
  }
}

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

.nav-links a {
  padding: 0.7rem 1.05rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  white-space: nowrap;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.nav-links a:hover {
  background: var(--surface);
}

.nav-links a.is-current {
  color: var(--green);
}

.nav-act {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* HIER STAND `.nav-download-link` - der dritte Knopf in der Kopfleiste, am
   17.08.2026 entfernt (Henry: „App laden / Anmelden / Kostenlos starten evtl.
   zu viel").

   Die Regeln sind mit dem Markup zusammen raus, weil tote Regeln später wie
   Gestaltung aussehen und gepflegt werden. Was sie waren, steht hier, damit
   niemand sie aus Versehen neu erfindet:

     min-height: 46px, Pillenradius,
     border: 1.5px solid var(--green), background: oklch(96% 0.025 150)

   Also ein GRÜN UMRANDETER Knopf mit grünem Waschton, unmittelbar neben dem
   grünen `.btn-primary` „Kostenlos starten". Zwei grüne Handlungen in einer
   Leiste - genau das, was die Regel „Grün nur für die eine empfohlene
   Handlung je Bildschirm" verhindern soll. Emil hat diese Regel am 17.08.
   noch einmal bestätigt („mehr grün kannst du raus streichen").

   Der Download ist nicht verschwunden: er steht im Handy-Menü
   (`.nav-side-download`) und ab jetzt in der Fußzeile JEDER Marketingseite,
   beide auf `/#download`. Vorher war er nur über die Startseite erreichbar. */

.nav-act .signin {
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  white-space: nowrap;
  transition: background-color 0.3s var(--ease);
}

.nav-act .signin:hover {
  background: var(--surface);
}

.nav-act .btn {
  min-height: 50px;
  padding-inline: 1.5rem;
  font-size: 1rem;
}

.nav-burger {
  display: none;
  flex: none;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  color: var(--ink);
}

.nav-side {
  display: none;
}

@media (max-width: 1080px) {
  .nav-links,
  .nav-act .signin {
    display: none;
  }
  .nav-burger {
    display: grid;
    place-items: center;
  }
  .nav-logo {
    margin-right: auto;
  }
  .nav-side {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    position: fixed;
    inset: 0.9rem 0.9rem auto 0.9rem;
    background: var(--paper);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-float);
    padding: 5.4rem 1.2rem 1.2rem;
    transform: translateY(-118%);
    transition: transform 0.5s var(--ease);
    z-index: 55;
  }
  .nav-side.open {
    transform: none;
  }
  .nav-side a {
    padding: 1.05rem 0.6rem;
    font-size: 1.15rem;
    font-weight: 600;
    border-top: 1px solid var(--line-soft);
  }
  .nav-side a:first-child {
    border-top: 0;
  }
  .nav-side .btn {
    margin-top: 0.9rem;
    width: 100%;
  }
}

/* ============================== Abschnitte ============================== */

section {
  padding-block: clamp(4.5rem, 10vw, 9rem);
}

/* Sprungziele muessen unter der klebenden Leiste anhalten, sonst verdeckt
   sie die Ueberschrift und das weiche Scrollen wirkt kaputt. */
[id] {
  scroll-margin-top: 108px;
}

/* Grauer Block, wie Finoms hellgraue Zwischenflaechen */
.band-soft {
  background: var(--surface);
}


/* ACHTUNG: Breite hier in rem, nicht in ch. ch bezieht sich auf die Schrift
   DIESES Elements (17px), nicht auf die grosse Ueberschrift darin. 20ch waren
   deshalb rund 190px und die Headline brach nach jedem Wort um. */
.sec-head {
  max-width: 46rem;
  margin-bottom: clamp(2.6rem, 5vw, 4.5rem);
}

.sec-head.center {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

/* Zentrieren muss auf zwei Ebenen passieren.
   text-align zentriert nur die Zeilen INNERHALB eines Blocks. Der Block selbst
   ist durch p{max-width:68ch} oder eine ch-Breite an der Ueberschrift oft
   schmaler als sein Container und klebt dann links. Deshalb bekommen alle
   direkten Kinder zusaetzlich margin-inline:auto. */
.centered {
  text-align: center;
}

.centered > * {
  margin-inline: auto;
}

.centered p {
  max-width: 58ch;
}

.sec-head.center > * {
  margin-inline: auto;
}

.sec-head .lead {
  max-width: 52ch;
}

.sec-head.center .lead {
  margin-inline: auto;
}

/* ============================== Karten ================================== */

/* Finom-Karte: randlos, hellgrau, sehr grosser Radius, viel Innenabstand. */
.card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  position: relative;
}

.band-soft .card {
  background: var(--paper);
}


.card p {
  color: var(--ink-2);
  margin: 0;
  font-size: 1rem;
}


/* ============================== Listen ================================== */

/* Vierzackiger Funkelpunkt als Aufzaehlungszeichen */
.spark-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.15rem;
}

.spark-list li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.85rem;
  align-items: start;
  font-size: 1.0625rem;
  color: var(--ink-2);
  max-width: 52ch;
}

.spark-list li::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.35rem;
  background: var(--green);
  clip-path: polygon(
    50% 0%,
    60% 40%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0% 50%,
    40% 40%
  );
}


/* ============================== Bewegung ================================ */

/* Einblenden beim Scrollen ist eine Zugabe, keine Voraussetzung.
   Das Verstecken haengt deshalb an .js-reveal, das erst gesetzt wird, wenn
   das Skript laeuft UND einblenden kann. Ohne JavaScript, bei reduzierter
   Bewegung oder wenn das Skript scheitert, ist alles ganz normal sichtbar. */
.js-reveal .rise {
  opacity: 0;
  transform: translateY(26px);
}

.js-reveal .rise.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js-reveal .rise,
  .js-reveal .rise.in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * {
    animation-duration: 0.001ms;
    transition-duration: 0.001ms;
  }
}

/* ============================== Fusszeile =============================== */

.foot {
  background: var(--surface);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 2.5rem;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
}

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

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

/* h3, NICHT h4. Die letzte Ueberschrift vor der Fusszeile ist ein h2 -
   ein h4 danach ueberspringt eine Ebene, und wer sich mit einer
   Vorlesesoftware an Ueberschriften entlanghangelt, verliert die Ordnung.
   Am 14.08.2026 auf ACHT Seiten gemessen (scripts/barrierefreiheit.py);
   eine Ursache, elf Dateien. h4 kam im ganzen Projekt NUR hier vor, die
   Umstellung trifft also nichts anderes. Das Aussehen bleibt gleich. */
.foot h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.1rem;
}

.foot nav {
  display: grid;
  gap: 0.75rem;
}

.foot nav a {
  color: var(--ink-2);
  font-weight: 500;
}

.foot nav a:hover {
  color: var(--green);
}

.foot-base {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  justify-content: space-between;
  color: var(--ink-3);
  font-size: 0.9rem;
}

/* ========================== KI-Hilfe unten rechts =======================
   Ersetzt die frueheren Anruf-Pillen. Im Produkt haengt das am bestehenden
   Endpunkt POST /clients/{id}/chat, der denselben Anthropic-Schluessel nutzt
   wie BelegHero selbst. In dieser Vorschau gibt es kein Backend, deshalb
   antwortet die Oberflaeche mit einem klaren Hinweis statt mit erfundenem
   Text. Siehe shared/chat.js. */

.bp-chat-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 60px;
  padding: 0 1.5rem 0 1.2rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--green);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.012em;
  cursor: pointer;
  box-shadow: var(--sh-float);
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.bp-chat-btn:hover {
  background: var(--green-deep);
  transform: translateY(-2px);
}

.bp-chat-btn[aria-expanded="true"] {
  transform: scale(0.9);
  opacity: 0;
  pointer-events: none;
}

.bp-chat-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 96;
  width: min(400px, calc(100vw - 40px));
  max-height: min(640px, calc(100vh - 40px));
  display: none;
  flex-direction: column;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-float);
  overflow: hidden;
}

.bp-chat-panel.open {
  display: flex;
}

.bp-chat-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.1rem 1rem 1.1rem 1.4rem;
  background: var(--green);
  color: #fff;
}

.bp-chat-head b {
  font-size: 1.08rem;
  letter-spacing: -0.024em;
}

.bp-chat-head small {
  display: block;
  font-weight: 500;
  font-size: 0.84rem;
  color: oklch(90% 0.03 152);
}

.bp-chat-close {
  margin-left: auto;
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: oklch(100% 0 0 / 0.16);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.bp-chat-close:hover {
  background: oklch(100% 0 0 / 0.28);
}

.bp-chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background: var(--surface);
}

.bp-msg {
  max-width: 86%;
  padding: 0.85rem 1.1rem;
  border-radius: 20px;
  font-size: 1rem;
  line-height: 1.45;
}

.bp-msg.bot {
  align-self: flex-start;
  background: var(--paper);
  color: var(--ink);
  border-bottom-left-radius: 7px;
}

.bp-msg.me {
  align-self: flex-end;
  background: var(--green);
  color: #fff;
  border-bottom-right-radius: 7px;
}

.bp-msg.note {
  align-self: stretch;
  max-width: none;
  background: var(--amber-wash);
  color: oklch(35% 0.08 62);
  font-size: 0.94rem;
}

.bp-chat-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0 1.2rem 0.9rem;
  background: var(--surface);
}

.bp-chat-hints button {
  border: 0;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}

.bp-chat-hints button:hover {
  color: var(--green);
}

.bp-chat-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.8rem;
  border-top: 1px solid var(--line-soft);
}

.bp-chat-form input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
}

.bp-chat-form input:focus {
  border-color: var(--green);
}

.bp-chat-form button {
  flex: none;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.bp-chat-form button:hover {
  background: var(--green-deep);
}

@media (max-width: 480px) {
  .bp-chat-btn span {
    display: none;
  }
  .bp-chat-btn {
    padding: 0;
    width: 60px;
    justify-content: center;
  }
}

/* ===== Vorschau-Hinweisband, damit der Entwurf nie mit Prod verwechselt wird
   Sitzt links, damit es der KI-Hilfe rechts nicht in die Quere kommt. */
.preview-flag {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: var(--sh-float);
}

.preview-flag i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-lit);
}

@media print {
  .preview-flag {
    display: none;
  }
}

/* ===================== MOBIL, ergaenzt am 03.08.2026 =====================
   Gemessen bei 375, 390 und 414 px gegen das laufende Backend. Jede Regel
   behebt einen Befund, der vorher nachweisbar war.

   Befund 1: .nav-act lief bei 375px bis 433px - 58px ueber den Rand. Der
   Menueknopf sass dadurch bei 383..433px, also komplett ausserhalb des
   Bildschirms. Auf dem Handy war die Navigation damit gar nicht erreichbar.
   Ursache: Die Schaltflaeche "Kostenlos starten" (181px) und der Menueknopf
   (50px) standen nebeneinander, dafuer ist neben dem Logo kein Platz.

   Loesung: Unter 640px traegt die Leiste nur Logo und Menueknopf. "Kostenlos
   starten" steht ohnehin im aufgeklappten Menue und zusaetzlich im Inhalt
   jeder Seite - es geht also kein Weg zum Produkt verloren. */

@media (max-width: 640px) {
  .nav-zone { max-width: 100%; overflow-x: clip; }
  .nav-bar { gap: 0.5rem; }
  .nav-act { margin-left: auto; gap: 0.4rem; }
  .nav-act .btn-primary,
  .nav-act .signin { display: none; }
  .nav-burger { display: grid; place-items: center; width: 44px; height: 44px; flex: none; }

  /* Der Umschalter Monat/Jahr wurde durch das Sparen-Etikett auseinander
     gezogen. Untereinander bleibt beides lesbar und gross genug zum Tippen. */
  .toggle { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }
  .toggle button { flex: 1 1 auto; min-height: 52px; }
  .save-badge { margin-left: 0; margin-top: 0.5rem; flex-basis: 100%; text-align: center; }
}

/* Die Medienabfrage für 360px stand hier und hat den Kopfleisten-Download auf
   engen Handys auf „App" verkürzt. Sie ist mit ihm zusammen raus (17.08.2026);
   ohne Markup hätte sie eine Anpassung beschrieben, die es nicht mehr gibt. */

/* Nichts darf die Seite breiter machen als das Fenster. Der haeufigste
   Ausloeser sind lange Woerter ohne Trennstelle und Medien ohne Begrenzung. */
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .shell, .wrap, main, section { max-width: 100%; }
  img, video, svg, iframe, table, pre { max-width: 100%; }
  h1, h2, h3, p, li, td, th { overflow-wrap: break-word; }
}

/* Sehr schmale Geraete (320px, aeltere iPhone SE). Breiter als das Fenster
   duerfen Elemente nur, wenn ihr Container in sich scrollt - sonst wird der
   Inhalt durch overflow-x:clip abgeschnitten, und Abschneiden ist schlimmer
   als Scrollen. Gemessen: auf /fuer-kanzleien reichten Ueberschrift und
   Paket-Kachel bis 357px in ein 320px-Fenster. */
@media (max-width: 360px) {
  :root { --gutter: 0.9rem; }
  .shell, .wrap { padding-inline: var(--gutter); }
  .shell > *, .wrap > *, main > * { min-width: 0; }
  h1, h1.display { font-size: clamp(1.75rem, 9vw, 2.4rem); }
  .packet, .packet-head, .template-card, .plan, .faq-item { min-width: 0; max-width: 100%; }
  .grid-2, .plans, .faq-grid { grid-template-columns: 1fr; }
}

/* FEHLER, von Emil am Handy gefunden: Das Menü liess sich nicht mehr
   schliessen, sobald es einmal offen war.

   Ursache ist die Verschachtelung. .nav-side liegt INNERHALB von .nav-zone.
   Im selben Stapelkontext gewinnt das Panel mit z-index:55 gegen die
   Leiste, die gar keinen z-index hat - das offene Menü legt sich also
   ueber den eigenen Menueknopf. Der zweite Tipp landete auf der oberen
   Polsterung des Panels (5,4rem) statt auf dem Knopf.

   Der z-index:60 an .nav-zone half nicht: der gilt nach aussen, nicht
   zwischen den Geschwistern darin. */
.nav-bar {
  position: relative;
  z-index: 56;
}

/* Zweiter Weg hinaus, unabhaengig vom Knopf: eine Flaeche hinter dem Menü,
   die auf Antippen schliesst. Auf dem Handy erwartet man das, und es
   rettet den Fall, falls der Knopf noch einmal verdeckt wird. */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 54;
  background: oklch(20% 0.02 150 / 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.nav-scrim.an {
  opacity: 1;
  pointer-events: auto;
}

/* Der Knopf zeigt den Zustand: drei Striche zu, Kreuz auf. Ohne das sieht
   man dem Knopf nicht an, dass er auch schliesst. */
.nav-burger svg { transition: transform 0.3s var(--ease); }
.nav-burger[aria-expanded="true"] svg { transform: rotate(90deg); }

/* Die Hilfe-Blase liegt fest unten rechts (z-index 95). Auf 375px lag sie
   genau auf "Jederzeit kündbar" in der Vertrauenszeile des Hero - gemessen
   auf der Live-Seite. Die Zeile bekommt deshalb rechts unten Platz, damit
   nichts dauerhaft verdeckt ist. */
@media (max-width: 640px) {
  .hero-note {
    padding-right: 4.75rem;
    padding-bottom: 0.5rem;
  }
  .hero-note span { display: block; }
}

/* Tabellen in den Rechtstexten. Die Datenschutzerklärung enthält eine
   dreispaltige Übersicht (Daten / Zweck / Rechtsgrundlage), die bei 375px
   499px breit war und vom overflow-x:clip der Seite abgeschnitten wurde -
   die dritte Spalte war schlicht nicht lesbar. Sie scrollt jetzt in sich. */
.legal table,
.legal-col table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}
.legal table th,
.legal table td,
.legal-col table th,
.legal-col table td {
  min-width: 8.5rem;
  vertical-align: top;
}

/* --- Bezahlvorgang auf der Preisseite ------------------------------------
   Die Meldungszeile kommt von checkout.js; gestaltet wird sie von der
   Preisseite. Die feste Kaufleiste am Fensterboden ist seit 12.08.2026 weg
   — der Kauf startet am Tarifknopf. Frueher standen hier zentrierte Regeln
   (max-width 46rem); die sind entfernt. */
  .bp-checkout-status { margin-inline: var(--gutter); }

/* ===========================================================================
   Empfehlung auf der Preisseite

   `.plan.featured` gibt es im Entwurf bereits: gruener Balken oben an der
   Karte plus Schlagschatten. Es sagt nur nirgends, WAS die Hervorhebung
   bedeutet - wer die Seite zum ersten Mal sieht, kann den Balken auch fuer
   Dekoration halten. Deshalb ein Wort dazu.

   Steht hier und nicht im <style>-Block von preise.html: den erzeugt
   scripts/uebernehme_entwurf.py bei jedem Lauf neu aus dem Entwurf. bp2.css
   gehoert dem Projekt und bleibt unberuehrt.
   ========================================================================= */

.plan-empfehlung {
  margin: 0.15rem 0 0.6rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* --green auf --green-wash: 8,4:1. Der helle Ton --green-lit haette auf
     Weiss nur 3,1:1 erreicht und waere fuer 12,5px-Versalien zu wenig. */
  color: var(--green);
}

/* Der Balken oben ist 6px hoch; ohne diesen Abstand sitzt das Wort direkt
   darauf. */
.plan.featured { padding-top: 1.9rem; }

/* ===========================================================================
   Grün auf Grün, Teil 2: die Preisseite

   preise.html:74 setzt für den gewählten Tarif
   `.plan.chosen .price-btn { background: var(--green-wash); color: var(--green-deep) }`
   - gemessen rgb(34,60,40) auf rgb(232,244,234). Zwei Töne derselben Farbe
   übereinander; die Zahl schwimmt auf der Fläche.

   Die Korrektur steht hier und nicht in app-neu.css, weil dort jede Regel mit
   `body.bp-neu` beginnt - und diese Klasse setzt app-shell.js, das auf den
   Marketingseiten gar nicht geladen wird. Dort hätte sie nie gegriffen.

   Und nicht im <style>-Block von preise.html, weil den
   scripts/uebernehme_entwurf.py bei jedem Lauf neu aus dem Entwurf erzeugt.

   `:not(#bp-nie)` hebt die Regel über die (0,3,0) des Seiten-Stylesheets,
   das später im Dokument steht und sonst gewänne.
   ========================================================================= */
.plan.chosen .price-btn:not(#bp-nie),
.plan.chosen .price-btn:not(#bp-nie) span {
  color: var(--ink) !important;
}

/* „netto“ neben der Zahl — Kennzeichnung, nicht der Preis selbst.
   Emil, 12.08.2026: ganz klein daneben, nicht in derselben Größe wie „29 €“. */
.preis-netto {
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 0.45em;
  margin-left: 0.18em;
  color: var(--ink-3);
}
.price-big .preis-netto {
  /* Der große Preisanriss auf der Startseite ist 3–5,5 rem — dort muss
     „netto“ relativ noch kleiner wirken, sonst konkurriert es mit der Zahl. */
  font-size: 0.26em;
  vertical-align: 0.85em;
  font-weight: 700;
}
/* Ohne !important: .preis-netto (oben) und .price-big .preis-netto stehen
   früher und sind weniger spezifisch — diese Regel gewinnt allein über die
   Spezifität. Ein !important hätte die Sperrklinke (Grenze 1 in bp2.css)
   gesprengt, ohne etwas zu ändern, das die Kaskade nicht schon löst. */
.plan.chosen .price-btn:not(#bp-nie) .preis-netto {
  color: var(--ink-3);
}


/* =========================================================================
   Handeln zwischendurch (.tu-es)

   Gemessen am 05.08.2026 auf allen fuenf oeffentlichen Seiten: zwischen dem
   Knopf in der Navigation und dem naechsten lagen

       Startseite       9.189px   (10,8 Bildschirme)
       Funktionen       5.054px   ( 5,6)  - die GANZE Seite
       Sicherheit       3.386px   ( 3,8)
       Fuer Kanzleien   2.560px   ( 2,8)
       Preise             696px   ( 0,8)  - in Ordnung, das ist die Kaufseite

   Wer auf halbem Weg ueberzeugt ist, musste bis ganz nach unten scrollen.
   Das ist die teuerste Art, jemanden zu verlieren: nicht am Einwand,
   sondern am fehlenden Knopf.

   Zur Form siehe den Kommentar unten - der erste Entwurf hatte drei
   schwebende Mitten statt zweier Kanten.
   ===================================================================== */
/* ERSTER ENTWURF WAR UNAUFGERAEUMT, und zwar messbar: Flexbox mit
   justify-content:center liess Text, Knopf und Belegzeile jeweils ihre
   EIGENE Mitte suchen. Gemessen bei 1280px Fensterbreite lagen die drei
   Mittelachsen bei 499, 923 und 640 - nichts fluchtete. Dazu spannte sich
   die Belegzeile ueber die volle Kartenbreite (1076px), waehrend der Text
   nur 541px belegte: die drei Zusagen standen also nicht unter dem Satz,
   auf den sie sich beziehen.

   Jetzt Raster statt Flexbox: EINE Kante links fuer Text und Belege, der
   Knopf rechts als Gegengewicht. Zwei Achsen statt drei schwebender Mitten.
   Der Text ist linksbuendig - zentrierter Flattersatz ueber zwei Zeilen
   war der zweite Grund fuer den unruhigen Eindruck. */
.tu-es {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 1rem 2rem;
  padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1.4rem, 3vw, 2.2rem);
  background: var(--paper); border-radius: var(--r-card);
}
.band-soft .tu-es { background: var(--surface); }
.tu-es-text { display: grid; gap: 0.7rem; }
.tu-es p { margin: 0; color: var(--ink-2); font-size: 1.05rem; max-width: 52ch; }
.tu-es strong { color: var(--ink); }
.tu-es .btn { white-space: nowrap; }
.tu-es-belege {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.3rem;
  font-size: 0.92rem; color: var(--ink-3);
}
.tu-es-belege span { display: flex; align-items: center; gap: 0.42rem; }
.tu-es-belege span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--green); flex: none;
}
@media (max-width: 720px) {
  /* Untereinander, aber weiterhin an DERSELBEN linken Kante - nicht
     zentriert. Zentriert saehe am Telefon ordentlich aus und braeche die
     Fluchtlinie zum uebrigen Seiteninhalt, der ebenfalls links steht. */
  .tu-es { grid-template-columns: 1fr; gap: 1.2rem; }
  .tu-es .btn { justify-self: stretch; text-align: center; }
}

/* ---------------------------------------------------------------------------
   RECHTSTABELLEN AM HANDY: GESTAPELT STATT SEITLICH GEROLLT

   Gefunden am 08.08.2026 von der pruefenden Sitzung (kaputt.py, 390px):
   auf /datenschutzerklaerung acht Tabellen, auf /avv drei, die waagerecht
   rollen. Gemessen 512px Inhalt in 353px sichtbarer Breite, einzelne Zellen
   reichten bis x=530. Wer die Datenschutzerklaerung am Handy liest, sieht die
   halbe Tabelle nicht - und ein Rollbereich ohne sichtbaren Hinweis sagt ihm
   auch nicht, dass da noch etwas ist.

   DAS IST NICHT NUR HAESSLICH. Art. 12 Abs. 1 DSGVO verlangt, dass die
   Informationen "in praeziser, transparenter, verstaendlicher und LEICHT
   ZUGAENGLICHER Form" bereitgestellt werden. Eine Tabelle mit den
   Verarbeitungszwecken, von der man am Telefon ein Drittel sieht, erfuellt
   das nicht zuverlaessig.

   AM RECHNER AENDERT SICH NICHTS. Die Regel steht in einer Handy-Bedingung,
   und sie trifft ausschliesslich `.rechtstabelle` - nicht die Tabellen im
   Arbeitsbereich und nicht die auf den anderen oeffentlichen Seiten.

   DIE SPALTENNAMEN kommen aus der Tabelle selbst (site.js schreibt sie in
   `data-spalte`), nicht aus fest verdrahtetem Text: die elf Tabellen haben
   verschiedene Ueberschriften, und eine hartkodierte Beschriftung waere bei
   der Haelfte falsch. Ohne JavaScript bleibt es beim bisherigen Verhalten -
   die Regel greift dann einfach nicht. */
@media (max-width: 640px) {
  table.rechtstabelle,
  table.rechtstabelle tbody,
  table.rechtstabelle tr,
  table.rechtstabelle td { display: block; width: 100%; }
  /* Die Kopfzeile entfaellt - ihre Namen stehen ab jetzt an jeder Zelle. */
  table.rechtstabelle tr:has(th) { display: none; }
  table.rechtstabelle tr {
    border: 1px solid var(--bp-line, #e8e8e8);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    margin: 0 0 0.7rem;
  }
  table.rechtstabelle td { border: 0; padding: 0.35rem 0; }
  table.rechtstabelle td + td { border-top: 1px solid var(--bp-line, #e8e8e8); padding-top: 0.6rem; }
  table.rechtstabelle td[data-spalte]::before {
    content: attr(data-spalte);
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 0.6;
    margin-bottom: 0.15rem;
  }
}


/* ===================== Fristen im Hero und Verlustrechner ==================
   Emil, 14.08.2026: "die visitor sollen richtig denken die verpassen was."
   Sie sollen es denken, weil es stimmt - beide Fristen stehen im Gesetz.
   Deshalb steht die Fundstelle unter jeder Zahl: eine Frist ohne Quelle ist
   eine Behauptung, eine mit Quelle ist nachpruefbar. */
.hero-fristen {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  margin: 1.6rem 0 0.4rem;
}
.hero-fristen[hidden] { display: none; }
.hero-fristen .frist {
  display: flex; align-items: baseline; gap: 0.6rem;
  text-decoration: none; color: inherit;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(3px);
}
.hero-fristen .frist:hover { background: rgba(255, 255, 255, 0.22); }
.frist-zahl {
  font-size: 1.5rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.frist-text { font-size: 0.86rem; line-height: 1.35; }
.frist-quelle { opacity: 0.72; font-size: 0.78rem; }

/* Emil am 14.08.2026: „im rechner ist der hintergrund so leicht orange das
   passt nicht so ganz. außerdem muss die zahl deutlich roter".

   Beides kam aus derselben Ursache: `--bp-still` und `--bp-warn` sind
   NIRGENDS definiert. Es griffen also die Ersatzwerte, die hier im Code
   stehen - #f7f6f2 (gelbstichig) und #a8432e (Ziegel). Eine Variable, die
   es nicht gibt, sieht im Code aus wie eine Stellschraube und ist keine:
   niemand haette die Farbe zentral aendern koennen.

   Gemessen am 14.08.2026 im Browser (ueber die Leinwand, nicht ueber
   getComputedStyle - das gibt oklch woertlich zurueck und ein RGB-Parser
   rechnet daraus Unsinn):

     alle anderen getoenten Baender   oklch(0.971 0.006 150) -> rgb(243,247,243)
     der Rechner vorher               rgb(247,246,242)   gelbstichig

   `--surface-2` statt `--surface`, weil DIREKT DARUEBER schon ein
   `.band-soft` mit `--surface` liegt - beide gleich, und die zwei
   Abschnitte verschmelzen zu einem grauen Block. */
.verlust { padding: 4rem 0; background: var(--surface-2); }
.verlust h2 { margin: 0 0 0.4rem; }
.verlust-lead { margin: 0 0 1.8rem; opacity: 0.75; }
.verlust-eingabe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.verlust-eingabe label {
  display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem;
}
.verlust-eingabe input, .verlust-eingabe select {
  font: inherit; font-size: 1.05rem; padding: 0.6rem 0.7rem;
  border: 1px solid var(--bp-line, #d8d5cc); border-radius: 8px;
  background: var(--bp-white, #fff); color: inherit;
}
.verlust-ergebnis { text-align: center; }
/* DIE ZAHL IST DER GANZE ABSCHNITT. Sie ist das einzige, was jemand
   mitnimmt - deshalb ist sie so gross wie eine Ueberschrift und traegt die
   Warnfarbe, nicht das Gruen der empfohlenen Handlung. */
.verlust-zahl {
  font-size: clamp(2.6rem, 7vw, 4.2rem); font-weight: 800; line-height: 1;
  /* ROT, NICHT ZIEGEL. Der alte Wert rgb(168,67,46) trug 67 Gruen und 46
     Blau mit sich - das liest sich als Rostbraun, nicht als Warnung.
     rgb(190,0,13) hat den Gruenkanal auf NULL.
     Kontrast gegen den neuen Grund rgb(233,239,234): 5,63. Verlangt sind
     4,5 fuer Fliesstext und 3,0 fuer grossen Text; diese Zahl ist beides
     mit Abstand.
     (Der Wert 6,07 aus dem ersten Durchgang galt gegen das HELLERE Band
     und nicht gegen den Grund, der jetzt darunter liegt - er steht hier
     nur, damit niemand ihn spaeter aus einem Kommentar abschreibt.) */
  color: oklch(50% 0.21 27); font-variant-numeric: tabular-nums;
}
.verlust-dazu { margin: 0.8rem auto 1.6rem; max-width: 34rem; }
.verlust-klein { display: block; margin-top: 0.4rem; font-size: 0.86rem; opacity: 0.7; }
@media (max-width: 40rem) {
  .hero-fristen { gap: 0.7rem; }
  .hero-fristen .frist { width: 100%; }
}

/* ========================= Einwilligung zur Messung =======================
   BEIDE KNOEPFE GLEICH GROSS UND GLEICH AUFFAELLIG. Eine Einwilligung ist
   nur freiwillig, wenn Ablehnen genauso leicht ist wie Zustimmen (Art. 4
   Nr. 11 DSGVO). Ein kleiner grauer "Ablehnen"-Link neben einem grossen
   gruenen Knopf ist der Musterfall, den die Aufsichtsbehoerden beanstanden -
   und fuer ein Unternehmen, das Rechtssicherheit verkauft, waere er peinlich.

   UNTEN UND SCHMAL, nicht als Vorhang ueber der Seite. Das Fristenband im
   Hero ist das erste, was jemand sehen soll; ein Overlay davor wuerde genau
   die Wirkung zerschlagen, fuer die es gebaut wurde. */
.mess-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 90;
  max-width: 46rem; margin: 0 auto;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  background: var(--bp-white, #fff); color: var(--bp-ink, #1c2420);
  border: 1px solid var(--bp-line, #d8d5cc); border-radius: 14px;
  padding: 1rem 1.2rem;
  box-shadow: 0 10px 30px rgba(28, 36, 32, 0.16);
}
.mess-text { margin: 0; flex: 1 1 20rem; font-size: 0.9rem; line-height: 1.5; }
.mess-text strong { display: block; font-size: 1rem; }
/* Zweite Zeile als Block: die Ueberschrift steht darueber, nicht daneben.
   Zusammenlaufend saehe es aus wie ein Fliesstext mit fetten Woertern -
   und genau das war an der ersten Fassung falsch. */
.mess-zeile { display: block; color: var(--bp-muted, #5b6b60); }
.mess-text a { color: var(--bp-accent, #2e4f35); }
.mess-knoepfe { display: flex; gap: 0.6rem; flex: 0 0 auto; }
.mess-knopf {
  font: inherit; font-size: 0.95rem; font-weight: 700;
  padding: 0.6rem 1.4rem;
  /* GLEICHE BREITE, NICHT NUR EINE UNTERGRENZE.
     `min-width` allein hat nicht gereicht: „Akzeptieren" ist laenger als
     „Ablehnen", also wuchs nur der eine Knopf - gemessen 136 zu 120 Pixel.
     Eine Einwilligung ist nur freiwillig, wenn Ablehnen genauso leicht ist
     wie Zustimmen (Art. 4 Nr. 11 DSGVO); ein sichtbar kleinerer
     Ablehnen-Knopf ist der Musterfall, den die Aufsichtsbehoerden
     beanstanden. `flex: 1 1 0` gibt beiden dieselbe Basis, unabhaengig
     vom Text - auch wenn der Text spaeter geaendert wird.
     Der frueher hier gepruefte `min-width` blieb als Mindestgroesse. */
  flex: 1 1 0; min-width: 8.5rem;
  border-radius: 999px; cursor: pointer;
  border: 1px solid var(--bp-accent, #2e4f35);
  background: var(--bp-white, #fff); color: var(--bp-accent, #2e4f35);
}
/* --bp-still gibt es nicht - hier galt still #f1f5f1. --surface ist der
   Ton, den die Marketingbaender wirklich tragen: rgb(243,247,243). */
.mess-knopf:hover { background: var(--surface); }
@media (max-width: 34rem) {
  .mess-knoepfe { width: 100%; }
  .mess-knopf { flex: 1; min-width: 0; }
}

/* ========================= Aktionsfenster ==========================
   Erscheint nach 90 Sekunden Lesezeit, wenn eine Aktion laeuft.
   Gebaut auf <dialog show Modal>: der Browser uebernimmt Fokusfalle,
   Esc und die Sperre des Hintergrunds - drei Dinge, die von Hand
   nachgebaut regelmaessig halb funktionieren. */
.aktion-fenster {
  border: 0;
  padding: 2.1rem 2rem 1.9rem;
  border-radius: var(--r-card);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--sh-float);
  max-width: 25rem;
  width: calc(100vw - 2.4rem);
  text-align: center;
  position: relative;
  overflow: visible;
}
.aktion-fenster::backdrop {
  background: oklch(18% 0.014 152 / 0.42);
  backdrop-filter: blur(3px);
}
.aktion-zu {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-3);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.aktion-zu:hover { background: var(--surface-2); color: var(--ink); }
.aktion-marke {
  margin: 0 0 0.55rem;
  font-size: var(--fs-marke);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-lit);
  font-weight: 700;
}
.aktion-titel {
  margin: 0 0 0.7rem;
  font-size: var(--fs-kopf);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.aktion-titel span {
  font-size: var(--fs-titel);
  font-weight: 500;
  color: var(--ink-2);
}
.aktion-text {
  margin: 0 0 1.2rem;
  font-size: var(--fs-neben);
  line-height: 1.5;
  color: var(--ink-2);
}
/* Der Code ist ein Knopf, weil er einen tut: kopieren. Ein Kaestchen, das
   aussieht wie Text und beim Klick etwas macht, findet niemand. */
.aktion-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  width: 100%;
  padding: 0.75rem 0.9rem 0.75rem 1.1rem;
  margin-bottom: 0.9rem;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--green-wash);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.aktion-code:hover { border-color: var(--green-lit); }
.aktion-code.kopiert { border-style: solid; border-color: var(--green); }
.aktion-code-wort {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-gross);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--green);
}
.aktion-code-hinweis {
  font-size: var(--fs-marke);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  white-space: nowrap;
}
/* Die Uhr laeuft in Ziffern gleicher Breite. Ohne das springt die ganze
   Zeile bei jedem Sekundenwechsel, weil eine 1 schmaler ist als eine 8. */
.aktion-uhr {
  margin: 0 0 1.1rem;
  font-size: var(--fs-neben);
  color: var(--ink-2);
}
.aktion-uhr strong {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink);
}
.aktion-los { width: 100%; justify-content: center; }