/* Belline — Editorial.
   Eine Richtung, keine Variante der alten. Alles hier ist eine Entscheidung
   gegen etwas Bestehendes, und die Begründung steht dabei, weil "es sieht
   besser aus" in drei Wochen niemandem mehr hilft. */

:root {
  /* Warmes Papier statt reinem Weiß. #FFFFFF ist auf einem Bildschirm eine
     Lichtquelle; Papier ist es nicht, und die ganze Haltung dieser Seite ist
     gedruckt, nicht beleuchtet. */
  --paper: #FBF9F5;
  --paper-2: #F4F0E8;
  --ink: #14110D;
  --ink-2: #4A443C;
  --ink-3: #746C63;

  /* Messing, nicht Gold. Der alte Verlauf wollte teuer wirken und wirkte
     digital; ein einzelner gedeckter Ton, sparsam eingesetzt, wirkt teuer,
     weil er sich zurückhält.

     Der Ton ist dunkler als der erste Entwurf (#A67C3D), und zwar nicht aus
     Geschmack: Messing steht hier in der Kopfzeile über den Abschnitten und
     in den Uhrzeiten — kleine Schrift, also 4.5:1 gefordert. #A67C3D kam auf
     3.58 und fiel durch die Prüfung. Dasselbe galt für das Grau: #8A8176 lag
     bei 3.64. Beide sind so weit abgedunkelt, dass sie auf *beiden* Papieren
     bestehen, und keinen Schritt weiter. */
  --brass: #8A672E;
  --brass-soft: #E8DCC6;

  /* Haarlinien. Eine 1px-Linie in Tinte bei 12% ist das, was gedruckte
     Sachen benutzen, statt Karten mit Schatten übereinanderzustapeln. */
  --rule: rgba(20, 17, 13, 0.12);
  --rule-soft: rgba(20, 17, 13, 0.07);

  /* Die Auszeichnungsschrift, an einer Stelle.
     Vorher stand '"Instrument Serif", Georgia, serif' achtzehnmal im
     Stylesheet; ein Wechsel war eine Suche, bei der man eine übersieht. */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;

  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Instrument Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* 18px, nicht 17. Auf einem Laptop in Armlänge ist der Unterschied genau
     der zwischen "lesbar" und "angenehm"; die ganze Seite ist Fließtext mit
     einer Antiqua daneben, und die Antiqua wirkt nur groß, wenn die Grotesk
     daneben nicht schrumpft. */
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1220px; margin: 0 auto; padding: 0 36px; }

/* --- Typografie ------------------------------------------------------------
   Fraunces für alles Große, Instrument Sans für alles Kleine.

   Vorher stand hier Instrument Serif. Sie ist schön und sie hat genau einen
   Schnitt, und der ist leicht — bei 76 px eine elegante Auszeichnungsschrift,
   bei 21 bis 26 px dünn und eng. Und dort stand sie zwölfmal:
   Zwischenüberschriften, Uhrzeiten, FAQ-Zeilen, Anrufernamen. Das war das,
   was sich falsch anfühlte.

   Fraunces hat eine Gewichtsachse und — wichtiger — eine optische Achse. Der
   Browser wählt sie automatisch nach Schriftgröße (font-optical-sizing), also
   wird der Strich kräftiger, sobald die Schrift kleiner wird, statt zu
   verschwinden. Eine Familie, zwei Aufgaben, ohne zweite Datei.

   Und ausdrücklich nicht Manrope, Inter oder Space Grotesk. Die drei sind
   inzwischen die Standardantwort, und eine Standardantwort sieht aus wie
   eine Standardantwort. */

.display {
  font-family: var(--serif);
  font-weight: 400;
  /* Große Antiqua verträgt — und braucht — negative Laufweite und eine
     Zeilenhöhe unter 1. Auf Defaults gesetzt wirkt sie schlaff. */
  letter-spacing: -0.015em;
  line-height: 1.04;
  text-wrap: balance;
  margin: 0;
}

h1.display { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.4rem); }
h2.display { font-size: clamp(1.85rem, 1.25rem + 2.1vw, 2.9rem); }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 22px;
}

p { margin: 0 0 18px; color: var(--ink-2); max-width: 62ch; }
.lead { font-size: 1.2rem; line-height: 1.5; color: var(--ink-2); }

a { color: inherit; }

/* --- Kopfzeile -------------------------------------------------------------
   Eine Haarlinie statt einer Leiste mit Schatten. Nichts schwebt. */

.top {
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  z-index: 20;
}
.top-in {
  display: flex;
  align-items: center;
  gap: 36px;
  padding-block: 20px;
}

/* Die Wortmarke ist gesetzter Text, kein Bild. Sie erbt damit die Schrift der
   Seite, skaliert ohne zweite Datei und lässt sich in einer Zeile ändern. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
}
/* 34 statt 26. In einer 1220-px-Leiste war das Zeichen ein Detail; eine
   Marke, die man suchen muss, ist keine. */
.brand svg { width: 34px; height: 34px; color: var(--brass); display: block; }
.brand span {
  font-family: var(--serif);
  font-size: 2.05rem;
  letter-spacing: -0.015em;
}
footer .brand svg { width: 30px; height: 30px; }
footer .brand span { font-size: 1.8rem; }

.top nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.top nav a {
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--ink-2);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.top nav a:hover { border-bottom-color: var(--brass); color: var(--ink); }

/* Die eine Handlung im Kopf sieht aus wie eine Handlung. Fünf gleich graue
   Wörter nebeneinander sind eine Liste, kein Angebot. */
.top nav .nav-cta {
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 0;
}
.top nav .nav-cta:hover { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.top nav .nav-quiet {
  padding: 9px 18px;
  border-radius: 999px;
  border-bottom: 0;
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink-2);
}
.top nav .nav-quiet:hover {
  box-shadow: inset 0 0 0 1px var(--ink);
  color: var(--ink);
}

/* Der Aufklapper. Auf dem Laptop unsichtbar, auf dem Telefon das Einzige
   rechts. Ein Strich, der sich zum Kreuz dreht — kein Drei-Strich-Symbol,
   weil die Seite sonst nirgends mehrere parallele Linien benutzt. */
.menu-toggle {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: none;
  cursor: pointer;
  position: relative;
}
.menu-toggle .bar,
.menu-toggle .bar::before,
.menu-toggle .bar::after {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: transform 0.2s ease, opacity 0.15s ease;
}
.menu-toggle .bar { top: 50%; margin-top: -0.75px; }
.menu-toggle .bar::before { content: ""; top: -6px; }
.menu-toggle .bar::after { content: ""; top: 6px; }
.menu-toggle[aria-expanded="true"] .bar { transform: translateX(-50%) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar::before { transform: translateX(-50%) translateY(6px) rotate(-90deg); }
.menu-toggle[aria-expanded="true"] .bar::after { opacity: 0; }

/* --- Buttons ---------------------------------------------------------------
   Kein 8px-Radius auf allem. Die primäre Handlung ist eine gefüllte Pille,
   die sekundäre eine Linie — zwei Formen, nicht zwei Grautöne. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn.line { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.line:hover { border-color: var(--ink); }
.btn svg { width: 17px; height: 17px; }

/* --- Hero ------------------------------------------------------------------
   Links die Behauptung, rechts der Beleg. Das alte Layout war Text links,
   Screenshot rechts — die Anordnung, die jedes B2B-Produkt seit zehn Jahren
   benutzt. Der Beleg hier ist gesetzt, nicht fotografiert. */

.hero { padding: 84px 0 0; }
.hero .lead { margin-top: 28px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.hero-note {
  margin-top: 26px;
  font-size: 0.88rem;
  color: var(--ink-3);
  max-width: 52ch;
}
.hero-note a { color: var(--ink-2); text-underline-offset: 3px; }

/* Die Zahlen als Zeile mit Haarlinien dazwischen, nicht als vier Karten.
   Karten sagen "vier getrennte Dinge"; das hier ist ein Satz. */
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 96px;
  border-top: 1px solid var(--rule);
}
.fact { padding: 30px 28px 34px; border-right: 1px solid var(--rule-soft); }
.fact:first-child { padding-left: 0; }
.fact:last-child { border-right: 0; }
.fact .n {
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
.fact .k { font-size: 0.86rem; color: var(--ink-3); margin-top: 10px; }

/* --- Abschnitte ------------------------------------------------------------ */

section { padding: 110px 0; }
/* Die Kopfzeile klebt; ein Sprungziel landet sonst darunter. */
:target, #what, #trade, #price, #faq, #book { scroll-margin-top: 92px; }
.rule { border-top: 1px solid var(--rule); }

/* Die Nummerierung ist echt: das sind drei Schritte in einer Reihenfolge.
   Ziffern auf Dinge zu setzen, die keine Reihenfolge haben, ist Dekoration,
   die so tut, als wäre sie Information. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px; margin-top: 64px; }
.step .num {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--brass);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.step h3 { font-size: 1.08rem; font-weight: 600; margin: 0 0 10px; letter-spacing: -0.01em; }
.step p { font-size: 0.95rem; margin: 0; }

/* Frage und Antwort als Satzpaare mit einer Linie dazwischen. Der Inhalt ist
   ein Dialog; ein Raster aus Kacheln würde ihn zerlegen. */
.handled { margin-top: 56px; border-top: 1px solid var(--rule); }
/* Die Antwort gehört neben die Frage, nicht an den anderen Rand des
   Bildschirms. Bei 1220 px Breite standen zwischen "Do you have anything
   Friday?" und "Books it" gut 700 px Nichts, und das Auge muss die beiden
   Hälften erst wieder zusammensetzen. Die Zeile hört jetzt dort auf, wo ein
   Satz aufhört. */
.handled { max-width: 920px; }
.handled-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.handled-row .q {
  font-family: var(--serif);
  font-size: 1.42rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.handled-row .a { font-size: 0.9rem; color: var(--ink-3); text-align: right; white-space: nowrap; }
.handled-row .a.human { color: var(--brass); }

/* --- Fotografie ------------------------------------------------------------
   Randlos und groß. Ein Bild in einer Karte mit Rahmen und Schatten ist ein
   Bild, dem man nicht zutraut, allein zu stehen. */
.plate { margin-top: 72px; }
.plate img { width: 100%; height: auto; display: block; }
.plate figcaption {
  margin-top: 14px;
  font-size: 0.84rem;
  color: var(--ink-3);
  padding-left: 2px;
  border-left: 2px solid var(--brass);
  padding-inline-start: 12px;
}

@media (max-width: 900px) {
  .wrap { padding: 0 22px; }
  body { font-size: 16px; }
  .hero { padding-top: 60px; }
  .facts { grid-template-columns: repeat(2, 1fr); margin-top: 64px; }
  .fact { padding: 24px 20px 26px; }
  .fact:nth-child(2) { border-right: 0; }
  .fact:nth-child(3) { padding-left: 0; }
  .steps { grid-template-columns: 1fr; gap: 38px; }
  .handled-row { grid-template-columns: 1fr; gap: 6px; }
  .handled-row .a { text-align: left; }
  section { padding: 72px 0; }

  /* --- Das Menü auf dem Telefon -------------------------------------------
     Ein Blatt, das unter der Kopfzeile herunterkommt, nicht ein
     Vollbild-Overlay: die Seite bleibt sichtbar, also weiß man, wo man ist.
     Die Einträge stehen in der Antiqua und in Daumengröße — ein Menü, das
     man auf einem Telefon bedient, ist kein 13-px-Text. */
  .menu-toggle { display: block; }
  .top-in { gap: 16px; }

  .top nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 4px 22px calc(22px + env(safe-area-inset-bottom, 0px));
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 18px 34px -22px rgba(20, 17, 13, 0.5);

    /* Zu, und zwar so, dass es für Tastatur und Vorleseprogramm auch zu ist:
       visibility, nicht nur opacity. Ein unsichtbarer Link, den man antabben
       kann, ist eine Falle. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }
  .top nav[data-open="true"] {
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  .top nav a {
    font-family: var(--serif);
    font-size: 1.6rem;
    letter-spacing: -0.015em;
    color: var(--ink);
    padding: 17px 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  .top nav a:last-child { border-bottom: 0; }
  .top nav .nav-cta {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    padding: 16px 24px;
    margin-top: 18px;
    border-bottom: 0;
  }
  /* Im aufgeklappten Menü wieder eine Zeile, keine Pille: dort stehen die
     Punkte untereinander, und eine Pille zwischen lauter Textzeilen sieht aus,
     als wäre sie versehentlich dort gelandet. */
  .top nav .nav-quiet {
    display: block;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--ink-3);
    padding: 16px 0 0;
    border-bottom: 0;
    box-shadow: none;
    border-radius: 0;
  }
}

/* --- Auftritt -------------------------------------------------------------
   Der Hero setzt sich einmal zusammen, gestaffelt von oben nach unten.

   Wichtig: der Ruhezustand ist der sichtbare. Die Animation läuft *von* einer
   Verschiebung *zu* dem, was ohnehin dasteht — nicht von opacity:0 aus, das
   auf etwas wartet. Ohne CSS-Animation, ohne JavaScript, in einem Thumbnail
   oder in einem Screenshot ist die Seite vollständig da. Eine Seite, die erst
   durch Bewegung lesbar wird, ist kaputt, nicht lebendig. */

/* Nur Bewegung, keine Deckkraft.
 *
 * Die erste Fassung blendete von opacity: 0 auf — und genau das hatte der
 * Kommentar oben als Fehler bezeichnet, während die Keyframes es taten. Die
 * Prüfung hat es gefunden: axe misst die Seite so, wie sie in dem Moment
 * aussieht, und fand Messing bei 4.35 statt 4.92 und das Grau bei 4.31 statt
 * 4.91 — nicht weil die Farben falsch sind, sondern weil der Text noch bei
 * 78% Deckkraft stand. Ein Mensch, der in dieser halben Sekunde liest, hat
 * dasselbe Problem.
 *
 * Verschoben statt eingeblendet ist die Bewegung dieselbe und der Text von der
 * ersten Zeile an vollständig lesbar. */
@keyframes rise {
  from { transform: translateY(14px); }
  to   { transform: none; }
}

.rise { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.rise-1 { animation-delay: 0.06s; }
.rise-2 { animation-delay: 0.14s; }
.rise-3 { animation-delay: 0.22s; }
.rise-4 { animation-delay: 0.30s; }

/* --- Hero: zweispaltig ----------------------------------------------------- */

.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 64px;
  align-items: start;
}
/* 13ch, nicht 11: bei 11 brach "Someone always answers." dreizeilig, und
   drei Zeilen aus je einem Wort lesen als Gedicht, nicht als Aussage. */
.hero h1 { max-width: 15ch; }
.hero .lead { max-width: 42ch; }

/* --- Das gesetzte Gespräch -------------------------------------------------
   Der Beleg im Hero. Ein Interview in einer Zeitschrift, kein Chatfenster:
   Haarlinien statt Sprechblasen, der Anrufer in der Antiqua, Belline in der
   Grotesk. Zwei Stimmen, zwei Schriften — dieselbe Unterscheidung, die ein
   gedrucktes Interview trifft, und sie funktioniert ohne eine einzige Farbe. */

.script {
  margin: 8px 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.script-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0 22px;
  font-size: 0.8rem;
  color: var(--ink-3);
}
.script-head .at {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--brass);
  letter-spacing: -0.01em;
}

.script .line { padding: 0 0 22px; }
.script .who {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.script .line p { margin: 0; max-width: none; }

.script .caller p {
  font-family: var(--serif);
  font-size: 1.42rem;
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.script .agent {
  padding-left: 26px;
  border-left: 1px solid var(--rule);
}
.script .agent p { font-size: 0.98rem; color: var(--ink-2); }

.script-out {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 0.86rem;
  color: var(--ink-2);
}
.script-out .tag {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid var(--brass-soft);
  border-radius: 999px;
  padding: 5px 11px;
}

/* --- Beiseite gesprochen --------------------------------------------------- */

.aside {
  margin-top: 64px;
  padding-left: 26px;
  border-left: 2px solid var(--brass);
  max-width: 60ch;
}
.aside h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 0 0 10px;
  letter-spacing: -0.015em;
}
.aside p { margin: 0; font-size: 0.95rem; }

/* --- Fotografie ------------------------------------------------------------ */

.plates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  margin-top: 56px;
}
.plate { margin: 0; }
.plate img { width: 100%; height: auto; display: block; }
.plate figcaption { margin-top: 16px; font-size: 0.9rem; color: var(--ink-2); }
.plate figcaption strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.28rem;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 7px;
}

.trade-links { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 40px; }
.trade-links a {
  font-size: 0.92rem;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--brass-soft);
  padding-bottom: 3px;
}
.trade-links a:hover { border-bottom-color: var(--brass); color: var(--ink); }

/* --- Preise ----------------------------------------------------------------
   Spalten mit Haarlinien dazwischen, keine schwebenden Karten. Der empfohlene
   Plan wird durch eine Tintenlinie oben und mehr Luft ausgezeichnet, nicht
   durch einen Schatten — Schatten sind auf Papier eine Lüge. */

.cycle {
  display: inline-flex;
  gap: 4px;
  margin-top: 36px;
  padding: 4px;
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.cycle-opt {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink-2);
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.cycle-opt.is-on { background: var(--ink); color: var(--paper); }
.cycle-save {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
}
.cycle-opt.is-on .cycle-save { color: var(--brass-soft); }

/* Die drei Spalten teilen sich ein Raster, statt jede für sich zu rechnen.
   Ohne das standen die drei Preise auf drei verschiedenen Höhen — weil der
   Hinweis "Most popular" und die unterschiedlich langen Untertitel jede
   Spalte anders weit nach unten schoben. Bei einer Preistabelle sieht man
   das sofort, auch wenn man nicht sagen kann, was stört. */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto auto 1fr auto;
  gap: 0;
  margin-top: 46px;
  border-top: 1px solid var(--rule);
}
.plan { grid-row: span 6; }
@supports (grid-template-rows: subgrid) {
  .plan { display: grid; grid-template-rows: subgrid; }
}
.plan {
  padding: 34px 32px 38px;
  border-right: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
}
.plan:first-child { padding-left: 0; }
.plan:last-child { border-right: 0; padding-right: 0; }
/* Innenlinie statt Rahmen: ein border-top haette die Spalte um seine eigene
   Breite nach unten geschoben, und das mit -1px zurueckzuziehen liess den
   mittleren Preis genau ein Pixel hoeher stehen als die beiden daneben. */
.plan.is-best { box-shadow: inset 0 2px 0 var(--ink); }
.plan-tag {
  /* Auch leer, als Platzhalter in den beiden anderen Spalten — und zwar
     genau eine Zeilenhoehe hoch (font-size mal line-height), sonst sitzt der
     Preis daneben sechs Pixel hoeher als der in der Mitte. */
  min-height: 1.55em;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 14px;
}
.plan h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  margin: 0;
  letter-spacing: -0.015em;
}
.plan-sub { font-size: 0.88rem; color: var(--ink-3); margin: 8px 0 0; max-width: 30ch; }

.plan-price { margin: 26px 0 24px; }
.plan-price .amt {
  display: block;
  font-family: var(--serif);
  font-size: 2.9rem;
  line-height: 1;
  letter-spacing: -0.025em;
}
.plan-price .per { display: block; font-size: 0.86rem; color: var(--ink-3); margin-top: 7px; }
.plan-price .billed { display: block; font-size: 0.78rem; color: var(--ink-3); margin-top: 10px; }

.plan ul { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 11px; }
.plan li {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-2);
  padding-left: 18px;
  position: relative;
}
.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--brass);
}
.plan .btn { margin-top: auto; align-self: start; }

.compare {
  margin: 52px 0 0;
  max-width: none;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.6rem;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.terms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  margin-top: 56px;
  padding-top: 34px;
  border-top: 1px solid var(--rule);
}
.terms h4 { margin: 0 0 9px; font-size: 0.82rem; font-weight: 600; }
.terms p { margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--ink-3); }

/* --- Fragen ---------------------------------------------------------------- */

.faq { margin-top: 48px; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule-soft); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: -0.015em;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brass); font-size: 1.2rem; }
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding-bottom: 24px; }
.faq .answer p { margin: 0 0 12px; font-size: 0.95rem; max-width: 66ch; }
.faq .answer p:last-child { margin-bottom: 0; }

/* --- Schluss und Formular --------------------------------------------------- */

.closer { background: var(--paper-2); }
.book-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
}
.fine { font-size: 0.86rem; color: var(--ink-3); margin-top: 22px; }

.book-form { display: grid; gap: 18px; }
.f-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.f { display: grid; gap: 7px; min-width: 0; }
.f > span { font-size: 0.78rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0.02em; }
.f .opt { font-weight: 400; color: var(--ink-3); }

/* Unterstrichene Felder statt Kästen. Ein Formular auf Papier ist eine Linie,
   auf die man schreibt. */
.book-form input,
.book-form select,
.book-form textarea {
  font: inherit;
  font-size: 0.98rem;
  width: 100%;
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  transition: border-color 0.15s ease;
}
.book-form textarea { resize: vertical; min-height: 78px; }
.book-form input:focus,
.book-form select:focus,
.book-form textarea:focus { outline: none; border-bottom-color: var(--ink); }
.book-form input.is-bad, .book-form select.is-bad { border-bottom-color: #A33327; }
.book-form input.is-hint { border-bottom-color: var(--brass); }

.f-err { font-size: 0.8rem; font-style: normal; color: #A33327; }
.f-err.is-hint { color: var(--brass); }
.f-err button {
  appearance: none; border: 0; background: none; font: inherit; font-size: inherit;
  color: var(--ink); text-decoration: underline; cursor: pointer; padding: 0;
}
.book-submit { justify-content: center; margin-top: 6px; }
.f-note { font-size: 0.82rem; color: var(--ink-3); margin: 0; }
.f-note.is-good { color: #2F6B4F; }
.f-note.is-bad { color: #A33327; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Fuß ------------------------------------------------------------------- */

footer { border-top: 1px solid var(--rule); padding: 44px 0 60px; }
.foot-in { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
footer p { font-size: 0.86rem; color: var(--ink-3); margin: 0; line-height: 1.7; }
footer a { color: var(--ink-2); text-underline-offset: 3px; }

/* --- Die Glocke ------------------------------------------------------------ */

.bell-fab {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px 16px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 500;
  box-shadow: 0 0 0 4px var(--paper), 0 14px 34px -14px rgba(20, 17, 13, 0.5);
  transition: transform 0.16s ease;
}
.bell-fab { isolation: isolate; }
.bell-fab[hidden] { display: none; }
.bell-fab svg { width: 27px; height: 27px; display: block; color: var(--brass-soft); }

/* Ein Telefon, das klingelt.
 *
 * Drei Dinge auf demselben Takt, weil eins allein zu wenig war: das Zeichen
 * schwingt, der Knopf ruckt mit, und ein Ring läuft nach außen weg. Der Ring
 * ist der Teil, den man aus dem Augenwinkel sieht — eine 27-px-Glocke, die
 * sich dreht, sieht nur, wer ohnehin schon hinschaut.
 *
 * Der Takt ist 1,5 s statt 2,4 s und der Ausschlag 22° statt 15°. Die
 * Schwingung selbst bleibt schnell und klingt ab: eine Glocke schwingt und
 * steht dann still. */
.bell-fab svg { animation: bell-shake 1.5s ease-in-out 0.7s infinite; }
@keyframes bell-shake {
  0%, 27%, 100% { transform: rotate(0deg); }
  2% { transform: rotate(-22deg); }
  4% { transform: rotate(22deg); }
  6% { transform: rotate(-19deg); }
  8% { transform: rotate(19deg); }
  10% { transform: rotate(-15deg); }
  12% { transform: rotate(15deg); }
  14% { transform: rotate(-11deg); }
  16% { transform: rotate(11deg); }
  18% { transform: rotate(-8deg); }
  20% { transform: rotate(8deg); }
  22% { transform: rotate(-4deg); }
  24% { transform: rotate(4deg); }
}

.bell-fab { animation: bell-nudge 1.5s ease-in-out 0.7s infinite; }
@keyframes bell-nudge {
  0%, 14%, 100% { transform: translateY(0) rotate(0deg); }
  3% { transform: translateY(-2px) rotate(-1.6deg); }
  7% { transform: translateY(-2px) rotate(1.6deg); }
  11% { transform: translateY(-1px) rotate(-0.8deg); }
}

/* Der Ring. Liegt hinter dem Knopf (z-index: -1 in einem eigenen
   Stapelkontext), damit er nicht über der Schrift landet, und ist
   pointer-events: none, damit er den Klick nicht abfängt. */
.bell-fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--brass);
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  animation: bell-ring 1.5s ease-out 0.7s infinite;
}
@keyframes bell-ring {
  0%   { transform: scale(1); opacity: 0.55; }
  55%  { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}

/* Beim Überfahren hört es auf zu klingeln — wer den Zeiger darauf hat, ist
   schon aufmerksam geworden, und weiter zu wackeln macht das Ziel kleiner. */
.bell-fab:hover,
.bell-fab:focus-visible { animation: none; transform: translateY(-2px); }
.bell-fab:hover svg,
.bell-fab:focus-visible svg,
.bell-fab:hover::after,
.bell-fab:focus-visible::after { animation: none; }

/* --- Der Chat-Knopf ---------------------------------------------------------
 *
 * Sitzt über der Glocke und ist bewusst der leisere von beiden: Papier mit
 * Kontur statt Tinte, und er klingelt nicht. Die Glocke ist das, was dieses
 * Produkt kann und ein Chat-Widget nicht — sie bleibt der Hauptknopf. Dieser
 * hier ist für den, der genau jetzt nicht sprechen kann.
 *
 * Dasselbe Zeichen in beiden, in einer Sprechblase: die Verwandtschaft trägt
 * die Marke, die Blase sagt, was passiert. */
.chat-fab {
  position: fixed;
  right: 26px;
  bottom: 96px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 22px 13px 19px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 0 0 4px var(--paper), 0 12px 28px -14px rgba(20, 17, 13, 0.42);
  transition: transform 0.16s ease;
}
.chat-fab[hidden] { display: none; }
.chat-fab svg { width: 23px; height: 23px; display: block; color: var(--brass); }
.chat-fab:hover,
.chat-fab:focus-visible { transform: translateY(-2px); }

/* Der Chat braucht Höhe, das Gespräch nicht — ein Anruf ist eine Leiste, ein
   Chat ist ein Fenster. Auf dem Telefon nimmt er den ganzen Schirm: 380 px
   Chat in einem 390-px-Gerät sind kein Panel, sondern ein Versehen. */
.chat-dock {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 50;
  width: min(384px, calc(100vw - 36px));
  height: min(544px, calc(100vh - 52px));
  /* Papier, wie das Panel darin — der Grund ist nur eine Sekunde sichtbar,
     während der Rahmen lädt, und eine schwarze Sekunde ist ein Aufblitzen. */
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(20, 17, 13, 0.55);
}
/* Die Ecke rundet der Rahmen selbst, nicht der Behälter: mit overflow:hidden
   würde der Schließknopf, der zehn Pixel außerhalb sitzt, weggeschnitten. */
.chat-frame { width: 100%; height: 100%; border: 0; display: block; border-radius: 14px; }

@media (max-width: 620px) {
  .chat-dock {
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .chat-frame { border-radius: 0; }
  /* Auf dem ganzen Schirm gibt es kein Außerhalb mehr. Die rechte Ecke der
     Kopfzeile ist frei — auf unserer eigenen Seite steht dort kein "Lieber
     sprechen?", weil unser Widget nur den Chat anbietet. */
  .chat-dock .call-shut {
    top: 12px;
    right: 12px;
    border-color: var(--rule);
    background: var(--paper);
    color: var(--ink-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-fab { transition: none; }
}

/* --- Das angedockte Gespräch ------------------------------------------------ */

.call-dock {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 50;
  width: min(400px, calc(100vw - 36px));
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 20px 46px -16px rgba(20, 17, 13, 0.4);
}
.call-frame { width: 100%; height: 76px; border: 0; display: block; }
.call-shut {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 1000px) {
  .plans { grid-template-columns: 1fr; }
  .plan { padding: 30px 0; border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .plan.is-best { margin-top: 0; }
  .terms { grid-template-columns: 1fr; gap: 24px; }
  .plates { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; gap: 46px; }
  .hero h1 { max-width: 16ch; }
  .book-grid { grid-template-columns: 1fr; gap: 34px; }
  .f-row { grid-template-columns: 1fr; }
  .script .caller p { font-size: 1.25rem; }
  .compare { font-size: 1.3rem; text-align: left; }
  .bell-fab {
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: 60px; height: 60px; padding: 0; justify-content: center; gap: 0;
  }
  /* Der Chat-Knopf macht dasselbe wie die Glocke, sonst steht auf dem Telefon
     ein runder Knopf neben einer beschrifteten Pille — zwei Knöpfe, die
     aussehen, als gehörten sie nicht zusammen. */
  .chat-fab {
    right: 18px;
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    width: 56px; height: 56px; padding: 0; justify-content: center; gap: 0;
  }
  .bell-fab-say,
  .chat-fab-say {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .call-dock { right: 16px; left: 16px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .rise,
  .bell-fab,
  .bell-fab svg,
  .bell-fab::after,
  .call-wave i { animation: none; }
  .bell-fab { transition: none; }
  .bell-fab::after { opacity: 0; }
}

/* --- Handelsseiten ----------------------------------------------------------
   Die vier Seiten unter /dental, /clinics, /salons, /restaurants. Sie sind die
   Startseite mit anderem Wissen, also erben sie deren Bausteine — Hero,
   .script, .plate, .btn — und brauchen nur zwei eigene Muster.

   Kein zweiter Satz Karten: was hier dazukommt, sind Haarlinien wie überall
   sonst. */

/* Was der Kalender dieses Gewerbes tatsächlich enthält. Vier Bedingungen,
   nebeneinander gesetzt statt untereinander aufgezählt — sie sind gleichrangig
   und keine Reihenfolge, deshalb ein Raster und keine Nummern. */
.knows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  margin-top: 52px;
  border-top: 1px solid var(--rule);
}
.knows > div { padding: 28px 0; border-bottom: 1px solid var(--rule-soft); }
.knows h3 {
  margin: 0 0 9px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: -0.015em;
}
.knows p { margin: 0; font-size: 0.92rem; color: var(--ink-2); max-width: 46ch; }

/* Die Grenze: links der Satz, rechts der Anruf, an dem er sich beweist. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.split .btn { margin-top: 30px; }

/* Dieselbe Marke wie in .handled-row: was ein Mensch übernimmt, steht in
   Messing. */
.script-out .tag.human { color: var(--brass); }

/* Ein einzelnes Bild, nicht eines von dreien im Raster. `.plate` wird zweimal
   gesetzt und die spätere Regel nimmt den Außenabstand wieder weg; hier kommt
   er zurück, ohne die Reihe auf der Startseite anzufassen. */
.plate.solo { margin-top: 64px; }

@media (max-width: 900px) {
  .knows { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  .split { grid-template-columns: 1fr; gap: 42px; }
}

/* --- Der Anruf, der läuft ---------------------------------------------------
 *
 * Im Hero stand zuletzt ein gesetztes Gespräch, das stillstand. Es las sich
 * wie ein Screenshot, und ein Screenshot ist genau das, was diese Seite nicht
 * sein will: das Produkt ist eine Stimme, die antwortet, und ein Bild davon
 * überzeugt niemanden.
 *
 * Also läuft es wieder — dieselbe Mechanik wie vorher (site.js, unverändert),
 * nur nicht mehr als dunkles Chatfenster, sondern in der Typografie des Rests
 * der Seite: Haarlinien, der Anrufer in der Antiqua, Belline in der Grotesk.
 * Die Zeilen kommen in dem Tempo, in dem sie gesprochen werden, der Status
 * sagt "Checking the book", wenn das Ding tatsächlich den Kalender liest, und
 * "Listen" spielt die echte Aufnahme.
 *
 * Der Ruhezustand ist die fertige Unterhaltung: site.js malt sie sofort und
 * spielt sie erst, wenn sie im Bild ist. Wer nie scrollt, sieht trotzdem
 * alles — wie bei .rise ist die Bewegung eine Zugabe, keine Bedingung. */

.call { margin: 8px 0 0; border-top: 1px solid var(--ink); }

/* Die Reiter. Auf der Startseite vier Gewerbe, auf einer Gewerbeseite die
   beiden Seiten derselben Leitung — gebucht und abgelehnt. */
.call-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 16px 0 0;
}
.call-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0 0 5px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
}
.call-tab:hover { color: var(--ink); }
.call-tab[aria-selected="true"] { color: var(--brass); border-bottom-color: var(--brass); }

/* Kopfzeile: die Uhrzeit, was gerade passiert, und der Knopf für den Ton. */
.call-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0 20px;
  font-size: 0.8rem;
  color: var(--ink-3);
}
.call-status {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}
.call-line { margin-left: 2px; }
.call-listen {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: none;
  font: inherit;
  font-size: 0.78rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.call-listen:hover { border-color: var(--ink); color: var(--ink); }
.call-listen[aria-pressed="true"] { border-color: var(--brass); color: var(--brass); }

/* Die Kurve. Neun Striche, die nur laufen, während Belline spricht — das ist
   der einzige Unterschied zwischen "es antwortet" und "es steht da". */
.call-wave { display: inline-flex; align-items: flex-end; gap: 3px; height: 15px; }
.call-wave i {
  display: block;
  width: 2px;
  height: 4px;
  background: var(--ink-3);
  border-radius: 1px;
  transition: background 0.2s ease;
}
[data-speaking="true"] .call-wave i {
  background: var(--brass);
  animation: call-wave 0.9s ease-in-out infinite;
}
.call-wave i:nth-child(2) { animation-delay: 0.08s; }
.call-wave i:nth-child(3) { animation-delay: 0.16s; }
.call-wave i:nth-child(4) { animation-delay: 0.24s; }
.call-wave i:nth-child(5) { animation-delay: 0.32s; }
.call-wave i:nth-child(6) { animation-delay: 0.40s; }
.call-wave i:nth-child(7) { animation-delay: 0.48s; }
.call-wave i:nth-child(8) { animation-delay: 0.56s; }
.call-wave i:nth-child(9) { animation-delay: 0.64s; }
@keyframes call-wave {
  0%, 100% { height: 4px; }
  50% { height: 15px; }
}

/* Der Mitschnitt. Dieselben zwei Stimmen in zwei Schriften wie im gesetzten
   Gespräch — ein gedrucktes Interview, kein Chatfenster mit Sprechblasen.

   min-height, damit die Seite nicht springt, während die Zeilen eintreffen:
   ein Layout, das unter dem Text wegrutscht, liest sich als Fehler. */
.call-body { min-height: 268px; }
.call-body .turn { padding: 0 0 22px; }
.call-body .who {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.call-body .said { display: block; }
.call-body .caller .said {
  font-family: var(--serif);
  font-size: 1.46rem;
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.call-body .agent {
  padding-left: 26px;
  border-left: 1px solid var(--rule);
}
.call-body .agent .said { font-size: 1rem; color: var(--ink-2); line-height: 1.5; }

/* Jede Zeile kommt von unten herein, nie aus dem Nichts — dieselbe Regel wie
   bei .rise: bewegen, nicht einblenden. */
.call-body .turn,
.call-body .call-out { animation: call-in 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes call-in {
  from { transform: translateY(8px); }
  to { transform: none; }
}

.call-out {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 0.86rem;
  color: var(--ink-2);
}
.call-out .tag {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid var(--brass-soft);
  border-radius: 999px;
  padding: 5px 11px;
  white-space: nowrap;
}
.call-out .tag.human { color: var(--ink-2); border-color: var(--rule); }

@media (max-width: 900px) {
  /* Kleiner reserviert, aber reserviert: ohne min-height wächst das Feld,
     während die Zeilen eintreffen, und alles darunter rutscht mit. Ein
     Layout, das unter dem Daumen wegspringt, liest sich als Fehler. */
  .call-body { min-height: 210px; }
  .call-body .caller .said { font-size: 1.3rem; }
  .call-head { flex-wrap: wrap; gap: 10px 12px; }
  .call-listen { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .call-body .turn,
  .call-body .call-out,
  [data-speaking="true"] .call-wave i { animation: none; }
}

/* --- Die Kopfzeile eines Abschnitts -----------------------------------------
 *
 * Überschrift links, Einleitung rechts, beide auf derselben Grundlinie unten.
 *
 * Vorher stand beides untereinander in der linken Hälfte und die rechte Hälfte
 * blieb leer. Das liest sich nicht als Großzügigkeit, sondern als eine Seite,
 * die für ein Telefon gebaut und auf einem Laptop geöffnet wurde: die Schrift
 * wirkt klein, weil das Maß halb so breit ist wie der Bildschirm.
 *
 * align-items: end, damit die letzte Zeile der Einleitung mit der letzten
 * Zeile der Überschrift abschließt — zwei Spalten, die oben beginnen, aber
 * unten unterschiedlich enden, sehen aus, als hätte sie niemand gesetzt. */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 24px 64px;
  align-items: end;
}
.sec-head > div { min-width: 0; }
.sec-head .eyebrow { margin-bottom: 18px; }
.sec-head .sec-lead { margin: 0; max-width: 46ch; }

@media (max-width: 900px) {
  .sec-head { grid-template-columns: 1fr; gap: 22px; }
  .sec-head .sec-lead { max-width: none; }
}

/* Die drei Gewerbe als Notizen nebeneinander, ohne Bild. Der Unterschied
   zwischen einem Tisch und einem Termin ist eine Sache von Sätzen, nicht von
   Fotos — und drei mittelmäßige Fotos nebeneinander sagen weniger als eins,
   das etwas kann. */
.trades {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 56px;
  padding-top: 34px;
  border-top: 1px solid var(--rule);
}
.trades h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.34rem;
  letter-spacing: -0.015em;
}
.trades p { margin: 0; font-size: 0.94rem; color: var(--ink-2); }

/* Das eine Bild. Hochformat auf ein Band beschnitten: die Glocke sitzt im
   unteren Drittel der Aufnahme, also zeigt object-position dorthin statt in
   die Mitte, wo nur Decke wäre. */
.plate img { object-fit: cover; }

/* --- Die vier Gewerbe --------------------------------------------------------
 *
 * Vorher: vier Links in einer Zeile und darunter ein großes Foto einer leeren
 * Rezeption. Das Foto hat das Problem ein zweites Mal erzählt, das die
 * Überschrift schon erzählt hatte, und die vier Links — das Einzige in diesem
 * Abschnitt, das jemand anklickt — unter die Falz geschoben.
 *
 * Jetzt vier Karten. Vier Spalten, dann zwei, dann eine: bei drei Spalten
 * stünde eine Karte allein in der letzten Zeile. Die Ziffer ist keine
 * Dekoration — sie sagt, dass es genau vier sind und dass man sie zählen kann,
 * bevor man sie liest.
 */
.trade-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 52px;
  border-top: 1px solid var(--rule);
}
.trade-cards a {
  display: flex;
  flex-direction: column;
  padding: 30px 26px 28px;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  color: inherit;
  text-decoration: none;
  transition: background 0.18s ease;
}
.trade-cards a:first-child { padding-left: 0; }
.trade-cards a:last-child { border-right: 0; padding-right: 0; }
.trade-cards a:hover,
.trade-cards a:focus-visible { background: var(--paper-2, rgba(20, 17, 13, 0.025)); }

.trade-n {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--brass);
  margin-bottom: 16px;
}
.trade-cards h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.32rem;
  letter-spacing: -0.015em;
}
.trade-cards p {
  margin: 0 0 22px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-2);
}
/* Der Pfeil rückt beim Überfahren nach — die einzige Bewegung im Abschnitt,
   und sie zeigt in die Richtung, in die der Klick führt. */
.trade-go {
  margin-top: auto;
  font-size: 0.84rem;
  color: var(--brass);
  border-bottom: 1px solid var(--brass-soft);
  padding-bottom: 2px;
  align-self: start;
}
.trade-go::after {
  content: " →";
  display: inline-block;
  transition: transform 0.18s ease;
}
.trade-cards a:hover .trade-go::after { transform: translateX(3px); }

@media (max-width: 1040px) {
  .trade-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trade-cards a { padding: 26px 22px; }
  .trade-cards a:first-child { padding-left: 22px; }
  .trade-cards a:last-child { padding-right: 22px; }
  .trade-cards a:nth-child(2n) { border-right: 0; padding-right: 0; }
  .trade-cards a:nth-child(2n + 1) { padding-left: 0; }
}
@media (max-width: 600px) {
  .trade-cards { grid-template-columns: 1fr; margin-top: 36px; }
  .trade-cards a { padding: 24px 0; border-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .trade-cards a,
  .trade-go::after { transition: none; }
}

@media (max-width: 900px) {
  .trades { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
}


/* --- Die Antiqua in kleinen Graden ------------------------------------------
 * Fraunces' optische Achse macht den Strich kräftiger, je kleiner der Grad —
 * aber sie kann das Gewicht nicht erraten. Alles zwischen 20 und 30 Pixeln
 * ist hier eine Zwischenüberschrift oder eine Zahl, die gelesen werden muss,
 * und bekommt deshalb 500 statt 400. Die großen Überschriften bleiben bei
 * 400: dort ist der Grad das Gewicht.
 *
 * Gesammelt an einer Stelle statt an zwölf, damit "die Antiqua ist zu dünn"
 * eine Zeile zu ändern ist und keine Suche.
 */
.brand span,
.fact .n,
.step .num,
.handled-row .q,
.plate figcaption strong,
.trades h3,
.knows h3,
.faq summary,
.compare,
.script-head .at,
.script .caller p,
.call-head .call-line,
.call-body .caller .said,
.plan-price .amt,
.sec-head .k,
.rule-row .k {
  font-weight: 500;
}

/* Die kleinsten Vorkommen — Uhrzeit und Betrag in einer Zeile mit Grotesk —
   brauchen am meisten, weil daneben eine Grotesk mit gleichmäßigem Strich
   steht und jeder Unterschied als "blass" gelesen wird. */
.script-head .at,
.call-head .call-line { font-weight: 600; }

/* --- Kaufen ----------------------------------------------------------------
 *
 * Eine Handlung, überall dieselbe, und sie sieht aus wie eine Handlung.
 *
 * Vorher standen im Hero zwei gleich große Knöpfe nebeneinander — und der
 * gefüllte war die Demo. Die auffälligste Handlung auf der Startseite war
 * "kauf noch nicht". Die Demo ist jetzt ein Link darunter: sie überzeugt,
 * aber sie verkauft nicht, und sie darf dem Knopf, der es tut, nicht die
 * Aufmerksamkeit wegnehmen.
 */
.btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.95rem;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--brass-soft);
  padding: 0 0 4px;
  align-self: center;
}
.btn-quiet:hover { border-bottom-color: var(--brass); color: var(--ink); }
.btn-quiet svg { width: 17px; height: 17px; color: var(--brass); }

/* Drei Zahlen statt vier, und alle drei sind Ergebnisse. "Unter 1s bis zum
   ersten gesprochenen Wort" ist eine Kennzahl für einen Entwickler. */
.facts-3 { grid-template-columns: repeat(3, 1fr); }

/* Vier Fähigkeiten, nicht zwölf Karten. */
.does {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 64px;
  margin-top: 52px;
  border-top: 1px solid var(--rule);
}
.does > div { padding: 30px 0; border-bottom: 1px solid var(--rule-soft); }
.does h3 {
  margin: 0 0 9px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.34rem;
  letter-spacing: -0.015em;
}
.does p { margin: 0; font-size: 0.96rem; color: var(--ink-2); max-width: 42ch; }

/* --- Ein Preis -------------------------------------------------------------
 * Drei Pläne und ein Umschalter sind vier Entscheidungen vor einem Kauf. Der
 * Preis, der für fast jeden gilt, steht vorn; die beiden anderen sind ein
 * Satz für die Minderheit, die sie braucht.
 */
.price-one {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 64px;
  margin-top: 10px;
  align-items: start;
}
.price-list { list-style: none; padding: 0; margin: 26px 0 0; }
.price-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 11px;
  font-size: 0.96rem;
  color: var(--ink-2);
}
.price-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--brass);
}
.price-aside {
  padding: 28px 0 0;
  border-top: 1px solid var(--rule);
}
.price-aside h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
}
.price-aside p { font-size: 0.92rem; margin: 0 0 16px; }
.price-aside details { border-top: 1px solid var(--rule-soft); padding-top: 14px; }
.price-aside summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--ink-2);
}
.price-aside summary::-webkit-details-marker { display: none; }
.price-aside summary::after { content: " +"; color: var(--brass); }
.price-aside details[open] summary::after { content: " –"; }
.price-aside details p { font-size: 0.86rem; margin-top: 12px; color: var(--ink-3); }

/* --- Der Beweis im Abschluss ----------------------------------------------- */
.proof {
  margin-top: 56px;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
  max-width: 54ch;
}
.proof h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.015em;
}
.proof p { font-size: 0.96rem; margin: 0 0 18px; }
.dial {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.7rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--brass-soft);
  padding-bottom: 3px;
}
.dial:hover { border-bottom-color: var(--brass); }
.proof ul { list-style: none; padding: 0; margin: 20px 0 0; }
.proof ul li {
  font-size: 0.9rem;
  color: var(--ink-3);
  padding-left: 20px;
  position: relative;
  margin-bottom: 7px;
}
.proof ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 1px;
  background: var(--brass-soft);
}

/* --- Die Leiste für den Daumen ---------------------------------------------
 *
 * Nur auf dem Telefon, und dort erst, wenn der Hero vorbei ist — eine Leiste,
 * die sofort erscheint, verdeckt genau die Überschrift, die sie verkaufen
 * soll. Ausgelöst wird sie von .buybar-on, das site.js setzt.
 */
.buybar { display: none; }

@media (max-width: 900px) {
  .does { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  .price-one { grid-template-columns: 1fr; gap: 40px; }
  .facts-3 { grid-template-columns: 1fr 1fr; }
  .facts-3 .fact:last-child { border-right: 0; padding-left: 0; }
  .cta-row { gap: 20px; }
  .btn-quiet { align-self: flex-start; }

  .buybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--rule);
    transform: translateY(110%);
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .buybar-on .buybar { transform: none; }
  .buybar-cta {
    flex: 1;
    text-align: center;
    padding: 15px 20px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
  }
  .buybar-demo {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid var(--rule);
    color: var(--brass);
  }
  .buybar-demo svg { width: 24px; height: 24px; }

  /* Zwei runde Knöpfe in derselben Ecke sind einer zu viel. Die Glocke tritt
     zurück, sobald die Leiste da ist — die Demo sitzt jetzt in ihr. */
  .buybar-on .bell-fab,
  .buybar-on .chat-fab { display: none; }

  /* Platz, damit die Leiste den Abschluss nicht überdeckt. */
  body { padding-bottom: 0; }
  .closer { padding-bottom: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .buybar { transition: none; }
}

/* Die beiden größeren Pläne und die Minutendefinition stehen zusammengeklappt
   in der Randspalte. Sie müssen auf der Seite stehen — check:billing bricht
   den Build, wenn eine lebende Funktion fehlt — aber sie müssen nicht vor dem
   Knopf stehen. */
.price-aside details + details { margin-top: 10px; }
.price-aside .price-list { margin-top: 12px; }
.price-aside .price-list li { font-size: 0.86rem; margin-bottom: 7px; color: var(--ink-3); }
.price-aside summary { font-weight: 500; color: var(--ink); padding: 4px 0; }

/* --- Wo sie antwortet --------------------------------------------------------
 * Zwei Kanäle, weil zwei stimmen. WhatsApp ist gebaut, ausgeliefert und
 * getestet und hängt an keiner Nummer — es steht deshalb nicht auf der Seite.
 * Am Tag, an dem eine Nummer antwortet, bekommt dieser Block eine dritte
 * Spalte statt einer Entschuldigung.
 */
.channels {
  display: grid;
  /* Drei, seit die Website auch getippt beantwortet wird. Bei zwei Spalten
     stünde die dritte Karte allein in einer eigenen Zeile — dieselbe Angabe,
     aber optisch ein Nachtrag statt ein gleichwertiger Kanal. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 48px;
  margin-top: 52px;
  border-top: 1px solid var(--rule);
}
.channels > div { padding: 32px 0; border-bottom: 1px solid var(--rule-soft); }
.channels h3 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
}
.channels p { margin: 0 0 14px; font-size: 0.96rem; max-width: 44ch; }
/* Die Zeile, die die Angst nimmt: wie viel Arbeit ist das für mich? */
.channel-how {
  margin: 0 !important;
  font-size: 0.86rem !important;
  color: var(--brass);
}

/* Was noch nicht läuft, steht trotzdem da — nur eben als Notiz und nicht als
   Versprechen. Ruhiger gesetzt als die Kanäle darüber, weil es keiner ist. */
.channel-note {
  margin: 26px 0 0;
  font-size: 0.9rem;
  color: var(--ink-3);
  max-width: 64ch;
  line-height: 1.65;
}

/* Drei oder eins, nichts dazwischen: zwei Spalten für drei Karten lassen
   immer eine allein in der letzten Zeile stehen. */
@media (max-width: 1040px) {
  .channels { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
}

/* Der Weg aus dem Aufklapper heraus. Zwei Pläne standen dort lesbar und
   unkaufbar: die Funktionen aufgelistet, kein Knopf nirgends. */
.plan-pick {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--brass-soft);
  padding-bottom: 3px;
}
.plan-pick:hover { border-bottom-color: var(--brass); }