/* ==========================================================================
   LuxeVoice — Design System
   ---------------------------------------------------------------------------
   Konzept: "Fernsprechbuch" — ein altes Telefon- und Anruf-Verzeichnis als
   Vorbild statt eines generischen "Dark-Mode-SaaS-mit-Goldakzent"-Templates.
   Signaturen: gesetzte Verzeichnis-Nummern mit Leader-Linien, Haarlinien
   statt Schatten/Radien, eine Mono-Datenebene für Zahlen/Codes, ein
   Wortmarken-Logo ohne generisches KI-Icon.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Schriften — lokal gehostet aus assets/fonts/.
   Es wird KEINE Verbindung zu fonts.googleapis.com oder fonts.gstatic.com
   aufgebaut; es werden also keine Besucher-IP-Adressen an Dritte übermittelt
   (vgl. LG München I, Urteil vom 20.01.2022 – 3 O 17493/20).
   Playfair Display, Archivo und IBM Plex Mono stehen unter der SIL Open Font
   License 1.1 — Selbsthosting und kommerzielle Nutzung sind ausdrücklich
   gestattet. Lizenztext: assets/fonts/OFL.txt
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/playfair-display-400-700-normal-latin.woff2') format('woff2');
  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;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/playfair-display-400-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/playfair-display-400-700-italic-latin.woff2') format('woff2');
  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;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/playfair-display-400-700-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/archivo-400-700-normal-latin.woff2') format('woff2');
  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;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/archivo-400-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-400-normal-latin.woff2') format('woff2');
  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;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-700-normal-latin.woff2') format('woff2');
  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;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Ink / paper — warm, not the generic cool "AI dark mode" black */
  --color-bg: #0c0b09;
  --color-bg-raised: #131210;
  --color-bg-raised-2: #1a1815;
  --color-line: rgba(200, 179, 138, 0.16);
  --color-line-strong: rgba(200, 179, 138, 0.36);

  /* Aged brass, not shiny "AI luxury" gold-gradient gold */
  --color-gold: #b6903c;
  --color-gold-light: #d9b567;
  --color-gold-dim: #6e551f;

  --color-text: #efe6d3;
  --color-text-muted: #a89a83;
  --color-text-faint: #6e6455;

  --font-display: 'Playfair Display', 'Iowan Old Style', 'Georgia', serif;
  --font-body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --container-w: 1180px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;

  --radius-sm: 1px;
  --radius-md: 2px;

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

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Keep anchor-jump targets clear of the fixed header. */
[id] {
  scroll-margin-top: 96px;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Kein Overlay auf dem Grund.
   Vorgeschichte: Hier lagen nacheinander ein Rausch-Layer mit overlay-Blend
   und spaeter ein feiner Dither. Beides war der Versuch, einen Verlauf zu
   retten, der sich nicht retten laesst — und das Rauschen hob den Schwarzwert
   der gesamten Seite um rund vier Stufen an und legte sichtbares Korn auch
   ueber voellig ruhige Flaechen. Der Grund ist jetzt eine einzige Volltonfarbe:
   nichts, was stufen oder koernen koennte. Tiefe entsteht ueber die
   abgesetzten Flaechen (--color-bg-raised) und die Haarlinien. */

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

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.6rem, 5.6vw, 5rem); font-weight: 500; }
h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 500; }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 500; }

p { margin: 0; }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--space-3);
  position: relative;
  z-index: 1;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  font-weight: 400;
}

.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--color-gold);
  display: inline-block;
}

.lede {
  font-size: 1.12rem;
  color: var(--color-text-muted);
  max-width: 46ch;
  font-weight: 400;
  line-height: 1.65;
}

/* ---- Buttons ----
   Flat, stamped — no gradients, no translateY-and-shadow "lift" cliché. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.9rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  white-space: nowrap;
}

.btn-gold {
  background: var(--color-gold);
  color: #0c0b09;
  border-color: var(--color-gold);
}

.btn-gold:hover {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
}

.btn-outline {
  border-color: var(--color-line-strong);
  color: var(--color-text);
  background: transparent;
}

.btn-outline:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-light);
}

.btn-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ---- Nav ---- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}

/* ==========================================================================
   Marke
   --------------------------------------------------------------------------
   Das Logo besteht aus drei Teilen: dem Zeichen (Headset mit einem Kopfprofil
   aus Leiterbahnen, das zugleich eine Sprechblase ist), dem Schriftzug und
   der Tonspur darunter. Zeichen und Tonspur liegen als eigene SVG-Dateien in
   assets/ — dadurch nur zwei kleine Dateien statt derselben Pfade auf acht
   Seiten, und sie bleiben auf jedem Display gestochen scharf.
   Der Schriftzug bleibt echter Text: vorlesbar, markierbar, durchsuchbar.
   In der Kopfzeile steht das Lockup waagerecht (Zeichen plus Schriftzug), in
   der Fusszeile gestapelt wie im Originallogo, dort mit Tonspur.
   ========================================================================== */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--color-text);
}

.brand__mark {
  width: 42px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.brand__word {
  /* Die Vorlage setzt den Schriftzug in einer geometrischen Grotesk, nicht in
     der Serifenschrift der Ueberschriften — deshalb hier die Textschrift in
     Versalien. Das negative Margin nimmt den Sperrungs-Ueberhang am rechten
     Ende zurueck, damit das Lockup buendig sitzt. */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.06rem;
  letter-spacing: 0.2em;
  margin-right: -0.2em;
  text-transform: uppercase;
  line-height: 1;
  color: #d6dade;
  white-space: nowrap;
}

/* Fusszeilen-Marke: zentriert ueber den Spalten, nicht als Link.
   Frueher war sie die linksbuendige erste Rasterspalte und zugleich eine
   Schaltflaeche zur Startseite. Beides ist raus — in der Fusszeile steht die
   Marke als Absender, und der Weg zur Startseite liegt direkt darunter in der
   Navigationsspalte. */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}

.footer-brand .brand__mark { width: 62px; height: auto; display: block; }

.footer-brand .brand__word {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.2em;
  /* Sperrung haengt rechts ueber; die Haelfte links ausgleichen haelt den
     Schriftzug optisch mittig statt geometrisch. */
  margin-left: 0.2em;
  margin-right: 0;
  text-transform: uppercase;
  line-height: 1;
  color: #d6dade;
}

.footer-brand .brand__wave { width: 80px; height: auto; display: block; }

.footer-brand p {
  margin-top: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

@media (max-width: 560px) {
  .brand__mark { width: 36px; }
  .brand__word { font-size: 0.94rem; letter-spacing: 0.16em; margin-right: -0.16em; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 400;
  position: relative;
  padding-bottom: 4px;
  transition: color 0.25s var(--ease);
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--color-gold);
  transition: right 0.3s var(--ease);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-text);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  right: 0;
}

/* Zwei Handlungen in der Kopfleiste: "Pakete ansehen" fuehrt in den Katalog,
   "Erstgespraech sichern" bleibt die Hauptsache und behaelt als einzige die
   goldene Fuellung. Beide etwas kompakter als die Standard-Schaltflaeche,
   sonst passt die Leiste knapp oberhalb des 900px-Umbruchs nicht mehr in
   eine Zeile. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.nav-actions .btn {
  padding: 0.7rem 1.15rem;
  font-size: 0.72rem;
}

/* Zwischengroessen: zwischen Umbruch und Vollbreite wird es eng, also
   Navigationsabstaende und Schaltflaechen dort zusaetzlich zusammenziehen. */
@media (max-width: 1100px) and (min-width: 901px) {
  .nav-links { gap: 1.7rem; }
  .nav-actions { gap: 0.5rem; }
  .nav-actions .btn { padding: 0.65rem 0.85rem; font-size: 0.68rem; letter-spacing: 0.05em; }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 22px;
  height: 1px;
  background: var(--color-gold-light);
  display: block;
}

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

section {
  position: relative;
  z-index: 1;
  padding: var(--space-6) 0;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  max-width: 640px;
}

.divider {
  height: 1px;
  background: var(--color-line);
  border: none;
  margin: 0;
}

/* ---- Cards / grid ----
   Ledger entries, not floating shadow cards: hairline border, square corners,
   no hover-lift. A gold rule appears on hover instead of movement. */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }

.card {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-line);
  border-top: 1px solid var(--color-line);
  border-radius: 0;
  padding: var(--space-4);
  position: relative;
  transition: border-color 0.3s var(--ease);
}

.card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-gold);
  transition: width 0.4s var(--ease);
}

.card:hover {
  border-color: var(--color-line-strong);
}

.card:hover::before {
  width: 100%;
}

/* Ledger index numbers — replaces generic roman-numeral-in-a-circle motif with
   a directory/leader-line entry, set in the mono data face. */
.roman {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-gold);
  letter-spacing: 0.04em;
}

.roman::before { content: 'N\B0 '; color: var(--color-text-faint); font-weight: 400; }

/* ---- Reveal animation ---- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

.site-footer {
  border-top: 1px solid var(--color-line);
  padding: var(--space-6) 0 var(--space-3);
  background: #080706;
}

.footer-grid {
  display: grid;
  /* Drei statt vier Spalten: die Markenspalte sitzt jetzt zentriert darueber. */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: var(--space-2);
  font-weight: 700;
}

.footer-col p, .footer-col a {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin-bottom: 0.55rem;
  transition: color 0.2s var(--ease);
}

.footer-col a:hover { color: var(--color-gold-light); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-faint);
}

.footer-legal-links {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}

/* ---- Page header (inner pages) ---- */

.page-hero {
  padding: calc(78px + var(--space-6)) 0 var(--space-5);
}

.page-hero h1 {
  margin-top: var(--space-2);
}

/* ---- Utility ---- */

.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---- Responsive ---- */

@media (max-width: 900px) {
  .nav-links, .nav-actions .btn { display: none; }
  .nav-toggle { display: flex; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  section { padding: var(--space-5) 0; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }

  /* Dedicated phone scale rather than reusing the desktop clamp() floor. */
  h1 { font-size: clamp(1.8rem, 8vw, 2.35rem); }
  h2 { font-size: clamp(1.5rem, 6.5vw, 1.9rem); }
  h3 { font-size: clamp(1.05rem, 4.5vw, 1.25rem); }
  .lede { font-size: 0.96rem; line-height: 1.6; }
  .eyebrow { font-size: 0.66rem; }
  section { padding: var(--space-4) 0; }
  .page-hero { padding-top: calc(66px + var(--space-3)); padding-bottom: var(--space-3); }
  .btn { padding: 0.8rem 1.5rem; font-size: 0.72rem; }
}

/* ==========================================================================
   Mobile nav drawer
   ========================================================================== */

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: #080706;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  transform: translateY(-100%);
  transition: transform 0.4s var(--ease);
}

.nav-drawer.is-open { transform: translateY(0); }

.nav-drawer a {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--color-text);
}

.nav-drawer a:hover { color: var(--color-gold-light); }

/* Unterhalb von 900px verschwindet die ganze Kopfleiste. Bisher enthielt die
   Schublade nur Navigationslinks und gar keine Handlung — beide Schalt-
   flaechen gehoeren hier mit hinein, sonst ist "Pakete ansehen" auf dem
   Telefon nirgends zu sehen. */
.nav-drawer__actions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: min(300px, 78vw);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.nav-drawer__actions .btn {
  width: 100%;
  /* `.nav-drawer a` ist (0,1,1) und schlaegt damit `.btn` wie `.btn-gold`
     (je 0,1,0) bei font-family, font-size und color. Ohne diese drei Zeilen
     stuenden die Schaltflaechen in Playfair statt in der Mono-Schrift — und
     die goldene bekaeme cremefarbene Schrift auf goldenem Grund. */
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.nav-drawer__actions .btn-outline { color: var(--color-text); }
.nav-drawer__actions .btn-gold { color: #0c0b09; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding: calc(78px + var(--space-6)) 0 var(--space-6);
  min-height: 92vh;
  display: flex;
  align-items: center;
  position: relative;
  /* Das Ghost-Zeichen laeuft absichtlich rechts aus dem Bild. Ohne diese
     Zeile ragt es ueber die Viewport-Breite hinaus und erzeugt auf Mobil-
     browsern eine horizontale Scrollmoeglichkeit. */
  overflow: hidden;
}

/* Kein Lichtverlauf im Hero.
   Der Verlauf ging von rgba(182,144,60,0.10) auf 0 — auf dem Grund #0c0b09
   sind das ganze 14 Helligkeitsstufen (26 -> 12 im Rotkanal), verteilt auf
   etwa 700px Hoehe. Das ist eine Stufe alle 50px. Bei 8 Bit Farbtiefe laesst
   sich so ein flacher Verlauf auf dunklem Grund nicht stufenfrei darstellen,
   egal wie viele Farbstops man setzt — die Grenze ist die Quantisierung, nicht
   die Stop-Anzahl. Deshalb faellt er ersatzlos weg. */

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-5);
  align-items: center;
}

.hero-copy h1 { margin-top: var(--space-2); }

.hero-copy .lede { margin-top: var(--space-3); max-width: 42ch; }

.hero-copy .btn-row { margin-top: var(--space-4); }

/* One well-orchestrated entrance instead of scattered micro-interactions:
   the hero column staggers in on load, top to bottom. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .hero-copy > * {
    opacity: 0;
    animation: heroFadeUp 0.8s var(--ease) both;
  }

  .hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
  .hero-copy > *:nth-child(2) { animation-delay: 0.16s; }
  .hero-copy > *:nth-child(3) { animation-delay: 0.3s; }
  .hero-copy > *:nth-child(4) { animation-delay: 0.44s; }
  .hero-copy > *:nth-child(5) { animation-delay: 0.54s; }
  .hero-copy > *:nth-child(6) { animation-delay: 0.68s; }

  .hero-visual {
    opacity: 0;
    animation: heroFadeUp 0.9s var(--ease) both;
    animation-delay: 0.3s;
  }
}

/* Kennzahlenband. Vorher: zwei Eintraege, eingeklemmt in der schmalen
   Textspalte — auf dem Desktop blieb rechts daneben eine tote Flaeche.
   Jetzt: vier Eintraege ueber die volle Containerbreite unter dem Hero,
   durch Haarlinien gegliedert. */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.hero-stats .hero-stat + .hero-stat {
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-line);
}

@media (max-width: 900px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-4); }
  .hero-stats .hero-stat + .hero-stat { padding-left: 0; border-left: none; }
}

@media (max-width: 420px) {
  .hero-stats { grid-template-columns: 1fr; }
}

.hero-stat .num {
  font-family: var(--font-mono);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-gold-light);
  display: block;
}

.hero-stat .label {
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  text-transform: uppercase;
}

/* Hero headline: the payoff phrase gets the same italic-brass treatment as
   the "Voice" in the wordmark — one recurring device, not a one-off. */
.hero-copy h1 {
  font-size: clamp(2.6rem, 5.2vw, 5.2rem);
}

.hero-copy h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--color-gold-light);
}

/* Kein Ghost-Zeichen mehr im Hero.
   Es lag zu rund drei Vierteln hinter dem undurchsichtigen Journal-Panel und
   war nur als Streifen darunter zu sehen. Eine zu 5% sichtbare, teilweise
   verdeckte Form liest sich auf einem vollkommen flachen Grund nicht als
   Marken-Echo, sondern als Fleck — genau das, was hier weg sollte. Die
   Wortmarke steht ohnehin in Kopfzeile, Fusszeile und Favicon. */

/* Das Journal — a bracketed instrument readout (not a glowing rounded
   panel) showing real, resolving contacts instead of a stock waveform.
   This is the page's one signature moment: it proves the headline instead
   of decorating it. */

.journal {
  position: relative;
  background: var(--color-bg-raised);
  padding: var(--space-4);
}

.journal::after {
  content: '';
  position: absolute;
  inset: 14px;
  pointer-events: none;
  --tick: 20px;
  background:
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) top left / var(--tick) 1px no-repeat,
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) top left / 1px var(--tick) no-repeat,
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) top right / var(--tick) 1px no-repeat,
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) top right / 1px var(--tick) no-repeat,
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) bottom left / var(--tick) 1px no-repeat,
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) bottom left / 1px var(--tick) no-repeat,
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) bottom right / var(--tick) 1px no-repeat,
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) bottom right / 1px var(--tick) no-repeat;
}

.journal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}

.journal__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.journal__label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.6em;
  background: var(--color-gold-light);
}

@media (prefers-reduced-motion: no-preference) {
  .journal__label::before { animation: journalPulse 2s ease-in-out infinite; }
}

.journal__count {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-gold-light);
  font-variant-numeric: tabular-nums;
}

@keyframes journalPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.journal__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 15.5rem;
}

.journal__row {
  display: grid;
  grid-template-columns: 3.4rem 4.6rem 1fr auto;
  gap: var(--space-2);
  align-items: baseline;
  padding: 0.85rem 0;
  border-top: 1px solid var(--color-line);
}

.journal__row:first-child { border-top: none; }

@media (prefers-reduced-motion: no-preference) {
  .journal__row.is-new {
    animation: journalEnter 0.5s var(--ease) both;
  }
}

@keyframes journalEnter {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.journal__time {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--color-text-faint);
}

.journal__channel {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.journal__text {
  font-size: 0.88rem;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal__status {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-gold);
  white-space: nowrap;
}

.journal__status.is-pending { color: var(--color-text-faint); }

.journal__foot {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  font-size: 0.82rem;
  color: var(--color-text-faint);
  max-width: 40ch;
}

/* ==========================================================================
   Benefits list — ledger rows with a leader-line number column
   ========================================================================== */

.benefit-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-line);
  align-items: start;
}

.benefit-row:last-child { border-bottom: 1px solid var(--color-line); }

.benefit-row h3 { margin-bottom: 0.5rem; }

.benefit-row p { color: var(--color-text-muted); max-width: 58ch; }

/* ==========================================================================
   Packages / Pricing — ledger entries, featured = brass rule not a glow card
   ========================================================================== */

.package-card {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-line);
  border-radius: 0;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  transition: border-color 0.3s var(--ease);
}

.package-card:hover { border-color: var(--color-line-strong); }

.package-card.is-featured {
  border-color: var(--color-gold);
  background: var(--color-bg-raised);
}

.package-card.is-featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--color-gold);
}

.package-badge {
  position: absolute;
  top: -11px;
  left: var(--space-4);
  background: var(--color-gold);
  color: #0c0b09;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 0;
}

.package-card .package-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-text);
}

.package-card .package-tagline {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--color-text-faint);
}

.package-price {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--color-gold-light);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.package-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex-grow: 1;
}

.package-features li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.package-features li::before {
  content: '—';
  color: var(--color-gold);
  flex-shrink: 0;
}

/* ==========================================================================
   Paketkarten im Vierer-Raster (Chatbots)
   --------------------------------------------------------------------------
   Frueher lagen die Chatbots als volle Zeilen untereinander (.offer-stack).
   Jetzt stehen sie wie die Telefon-Stufen nebeneinander im Akkordeon. Bei
   vier Spalten bleiben mit dem Standard-Innenabstand von 2,5rem nur noch
   rund 176px Textbreite je Karte — hier daher schmaler polstern und Name
   wie Merkmalsliste eine Spur kleiner setzen.
   ========================================================================== */

.grid-4 .package-card {
  padding: var(--space-3);
  gap: var(--space-2);
}

.grid-4 .package-card .package-name { font-size: 1.25rem; }
.grid-4 .package-card .package-tagline { font-size: 0.72rem; }
.grid-4 .package-features li { font-size: 0.84rem; gap: 0.5rem; }
.grid-4 .package-badge { left: var(--space-3); }

@media (max-width: 1100px) and (min-width: 901px) {
  .grid-4 { gap: var(--space-2); }
  .grid-4 .package-card { padding: var(--space-2); }
}

/* ==========================================================================
   Offer accordion — the one main product (KI-Telefonassistent), click to
   reveal its tiers. Ledger-style trigger row, flat, no shadow.
   ========================================================================== */

.offer-accordion {
  border: 1px solid var(--color-line);
  background: var(--color-bg-raised);
}

.offer-accordion__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr 28px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* Kennziffer als Kapitelmarke. Mit 0,82rem ging sie neben der 1,4rem grossen
   Ueberschrift unter — die beiden Bloecke waren dadurch kaum als getrennte
   Leistungen zu lesen. Jetzt traegt die Ziffer die Gliederung sichtbar. */
.offer-accordion__index {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
  align-self: start;
  padding-top: 0.15rem;
}

/* Schnitt zwischen den drei Leistungsbloecken. Die Kaesten sehen einander
   sehr aehnlich; eine Haarlinie ueber die volle Breite markiert die Grenze
   eindeutiger, als es Leerraum allein kann. */
.offer-divider {
  height: 1px;
  background: var(--color-line-strong);
  border: none;
  /* Die Linie liegt im Container der FOLGENDEN Sektion, ueber ihr stehen also
     zwei Sektionsabstaende (96px + 96px), darunter zunaechst keiner. So sass
     sie dicht am naechsten Block und las sich als dessen Kopfzeile statt als
     Schnitt. Das negative obere Margin nimmt einen Abstand zurueck, unten
     kommt derselbe Wert wieder drauf — die Linie steht damit mittig im
     Zwischenraum, und der Gesamtabstand bleibt unveraendert. */
  margin: calc(-1 * var(--space-6)) 0 var(--space-6);
}

/* Die Sektionsabstaende schrumpfen zweimal mit; die Linie zieht jeweils mit,
   damit sie auf jeder Breite mittig im Zwischenraum bleibt. */
@media (max-width: 900px) {
  .offer-divider { margin: calc(-1 * var(--space-5)) 0 var(--space-5); }
}

@media (max-width: 560px) {
  .offer-divider { margin: calc(-1 * var(--space-4)) 0 var(--space-4); }
}

.offer-accordion__heading h3 {
  margin: 0 0 0.3rem;
  font-size: 1.4rem;
}

.offer-accordion__heading p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.94rem;
}

.offer-accordion__icon {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-gold);
  text-align: center;
}

.offer-accordion__panel {
  max-height: 0;
  overflow: hidden;
  border-top: 0px solid var(--color-line);
  transition: max-height 0.45s var(--ease), border-top-width 0.45s var(--ease);
}

.offer-accordion__panel.is-open {
  border-top-width: 1px;
}

.offer-accordion__panel-inner {
  padding: var(--space-4);
}

/* ==========================================================================
   Add-ons — deliberately lighter than the package cards above: a compact
   list, not another row of equally-weighted cards, so the page still reads
   as "one core offer, a few optional extras" rather than a menu overload.
   ========================================================================== */

.addon-list { display: flex; flex-direction: column; }

.addon-row {
  display: grid;
  /* Ohne Marker-Spalte. Vorher stand hier ein "+" als reine Verzierung —
     auf derselben Seite bedeutet dasselbe Zeichen an den Akkordeons aber
     "aufklappen". Zwei Bedeutungen fuer ein Zeichen lassen die Zeile nach
     Schaltflaeche aussehen, obwohl sie keine ist. Die Haarlinie gliedert
     die Liste ohnehin. */
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
}

.addon-row:last-child { border-bottom: 1px solid var(--color-line); }


.addon-row h3 { font-size: 1.02rem; font-weight: 500; margin-bottom: 0.2rem; }

.addon-row p { margin: 0; color: var(--color-text-muted); font-size: 0.86rem; max-width: 54ch; }

.addon-price {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .addon-row { grid-template-columns: 1fr; row-gap: 0.3rem; }
  .addon-price { grid-column: 1; }
}

/* ==========================================================================
   Voice demo widget
   ========================================================================== */

.demo-panel {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-line-strong);
  border-radius: 0;
  padding: var(--space-4);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-4);
}

.demo-caller {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border-right: 1px solid var(--color-line);
  padding-right: var(--space-4);
  text-align: center;
}

.demo-orb {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid var(--color-line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.demo-orb::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.demo-orb.is-active::before {
  opacity: 1;
  animation: pulse-ring 1.8s ease-out infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

.demo-orb svg { width: 30px; height: 30px; fill: var(--color-gold-light); }

.demo-status {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.demo-transcript {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 260px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 0.4rem;
}

.demo-bubble {
  max-width: 82%;
  padding: 0.75rem 1.05rem;
  border-radius: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  animation: bubble-in 0.5s var(--ease) forwards;
}

@keyframes bubble-in {
  to { opacity: 1; transform: translateY(0); }
}

.demo-bubble.caller {
  align-self: flex-start;
  background: var(--color-bg-raised-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-line);
  border-left: 2px solid var(--color-line-strong);
}

.demo-bubble.agent {
  align-self: flex-end;
  background: var(--color-bg-raised-2);
  color: var(--color-text);
  border: 1px solid var(--color-line);
  border-right: 2px solid var(--color-gold);
}

.demo-bubble .who {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: 0.3rem;
}

.demo-controls {
  margin-top: var(--space-2);
  display: flex;
  gap: 0.8rem;
}

/* ==========================================================================
   Booking / Calendar section
   ========================================================================== */

.booking-panel {
  border: 1px solid var(--color-line);
  border-radius: 0;
  overflow: hidden;
  background: var(--color-bg-raised);
}

.booking-embed {
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.booking-fallback {
  text-align: center;
  max-width: 40ch;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.form-field { display: flex; flex-direction: column; gap: 0.5rem; }

.form-field.full { grid-column: 1 / -1; }

.form-field label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.form-field input,
.form-field select,
.form-field textarea {
  background: var(--color-bg-raised-2);
  border: 1px solid var(--color-line);
  border-radius: 0;
  padding: 0.85rem 1rem;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.25s var(--ease);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-gold);
}

.form-field textarea { resize: vertical; min-height: 120px; }

/* Service checkboxes — multiple packages selectable at once. */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  border: 1px solid var(--color-line);
  background: var(--color-bg-raised-2);
  padding: var(--space-3);
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.92rem;
  color: var(--color-text);
  cursor: pointer;
}

.checkbox-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  /* Ursache des verrutschten Hakens: die Sammelregel
     `.form-field input, ... { padding: 0.85rem 1rem }` greift auch hier,
     weil die Checkbox-Gruppe in einem .form-field liegt. Mit border-box
     hat das die 18er-Box auf 34x29 px aufgeblasen — der Haken sass dadurch
     in der oberen linken Ecke. Padding zuruecksetzen, dann stimmt die Box. */
  padding: 0;
  border: 1px solid var(--color-line-strong);
  background: var(--color-bg-raised);
  cursor: pointer;
  flex-shrink: 0;
  /* Grid statt absoluter Positionierung: der Haken sass vorher per
     left/top in der oberen linken Ecke. place-content zentriert ihn
     unabhaengig von Kastengroesse und Zoomstufe. */
  display: grid;
  place-content: center;
}

.checkbox-option input[type="checkbox"]:checked {
  border-color: var(--color-gold);
  background: var(--color-gold);
}

.checkbox-option input[type="checkbox"]:checked::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid #0c0b09;
  border-width: 0 2px 2px 0;
  /* Der gedrehte Haken ist optisch unten-links schwer; das -1px hebt ihn
     auf die optische Mitte statt auf die rein geometrische. */
  transform: rotate(45deg) translate(-1px, -1px);
}

.checkbox-option input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.form-note {
  font-size: 0.8rem;
  color: var(--color-text-faint);
}

.form-success {
  display: none;
  border: 1px solid var(--color-line-strong);
  border-left: 2px solid var(--color-gold);
  background: var(--color-bg-raised);
  padding: var(--space-3);
  border-radius: 0;
  color: var(--color-gold-light);
  font-size: 0.92rem;
}

.form-success.is-visible { display: block; }

/* Selection banner — confirms which package the visitor clicked through
   from the Leistungen page, pre-filled into the form below. Gold border,
   sits as its own full-width row above the two-column contact layout. */
.selection-banner {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  border: 1px solid var(--color-gold);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.selection-banner[hidden] { display: none; }

.selection-banner__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.selection-banner__value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-gold-light);
}

/* ==========================================================================
   Legal / prose pages
   ========================================================================== */

.prose {
  max-width: 74ch;
}

.prose h2 {
  font-size: 1.5rem;
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

.prose h2:first-child { margin-top: 0; }

.prose p, .prose li {
  color: var(--color-text-muted);
  font-size: 0.98rem;
  margin-bottom: 1rem;
}

.prose ul { padding-left: 1.2rem; }

.prose strong { color: var(--color-text); font-weight: 600; }

.prose a { color: var(--color-gold-light); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Founder / about
   ========================================================================== */

.founder-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: var(--space-5);
  align-items: start;
}

.founder-frame {
  aspect-ratio: 4/5;
  border: 1px solid var(--color-line-strong);
  border-radius: 0;
  background: var(--color-bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.founder-frame::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid var(--color-line);
  pointer-events: none;
}

.founder-frame .monogram {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 4.6rem;
  font-weight: 400;
  color: var(--color-gold);
  opacity: 0.9;
}

.value-row {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
}

.value-row:last-child { border-bottom: 1px solid var(--color-line); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { display: none; }
  .demo-panel { grid-template-columns: minmax(0, 1fr); }
  .demo-caller { border-right: none; border-bottom: 1px solid var(--color-line); padding-right: 0; padding-bottom: var(--space-3); flex-wrap: wrap; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .founder-grid { grid-template-columns: minmax(0, 1fr); }
  .founder-frame { max-width: 280px; margin: 0 auto; }
}

@media (max-width: 560px) {
  .hero { padding: calc(66px + var(--space-4)) 0 var(--space-4); min-height: auto; }
  .hero-stats { margin-top: var(--space-4); }
}

/* Kein Wisch-Karussell mehr.
   Auf schmalen Viewports lagen die Paketkarten frueher als horizontal
   scrollbare Strecke nebeneinander, mit einer Hinweiszeile darueber. Das
   versteckt Inhalte hinter einer Geste, die man erst bemerken muss. Jetzt
   stapeln sich die Karten untereinander (siehe .grid-2/-3/-4 in der
   900px-Media-Query) — alles sofort sichtbar, ohne Hinweis und ohne Geste.
   Nachtrag: Das Wischen ist auf Wunsch zurueck (siehe .offer-carousel am
   Dateiende) — nur die Hinweiszeile bleibt weg. */

/* ==========================================================================
   Leistungsuebersicht auf der Startseite
   --------------------------------------------------------------------------
   Bewusst KEINE Karten. Ein Kasten mit Rahmen, der beim Ueberfahren die
   Randfarbe wechselt und eine goldene Linie einfaehrt, liest sich wie eine
   Schaltflaeche — die drei Eintraege sind aber reine Information und nicht
   anklickbar. Darum: kein Kasten, kein Hover-Zustand, kein Cursor-Wechsel,
   nur eine Haarlinie zur Gliederung. Die einzige Handlung der Sektion ist
   die Schaltflaeche darunter, und die sieht auch danach aus.
   Nummeriert wird hier nicht: die drei Leistungen stehen nebeneinander,
   sie sind keine Reihenfolge.
   ========================================================================== */

.info-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.info-item {
  /* Reines Infoblatt: kein Rahmen, kein Hintergrund, kein Hover, kein
     Cursor-Wechsel und keine Schaltflaeche im Eintrag. Die einzige Handlung
     der Sektion ist der Pakete-Button darunter. */
  cursor: default;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line-strong);
}

.info-item h3 {
  font-size: 1.22rem;
  line-height: 1.2;
}

.info-item p {
  margin-top: 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 36ch;
}

/* Selektor bewusst mit Typ: `.info-item p` ist (0,1,1) und wuerde eine reine
   Klassenregel (0,1,0) bei font-size, color und margin-top ueberstimmen. */
.info-item p.info-item__channels {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

@media (max-width: 900px) {
  .info-list { grid-template-columns: 1fr; gap: var(--space-4); }
  .info-item p { max-width: none; }
  .info-item { height: auto; }
}

/* ==========================================================================
   Simulationsseiten (Anruf / Chat)
   --------------------------------------------------------------------------
   Eigenstaendige Seiten, absichtlich nicht in der Hauptnavigation. Man
   erreicht sie ueber die Schaltflaechen auf Start- und Leistungsseite,
   darum braucht jede Seite einen sichtbaren Rueckweg.
   ========================================================================== */

/* Auswahl der Beispielgespraeche. Vorher wurden diese Schaltflaechen per
   Inline-Style gebaut und bekamen in JS die Klasse is-active — zu der es
   im Stylesheet gar keine Regel gab. Der gewaehlte Fall war deshalb nicht
   zu erkennen. Jetzt ist der aktive Zustand eindeutig ausgezeichnet. */
.demo-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.demo-tab {
  padding: 0.5rem 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.demo-tab:hover { color: var(--color-text); border-color: var(--color-line-strong); }

.demo-tab.is-active {
  color: var(--color-gold-light);
  border-color: var(--color-gold);
  background: rgba(182, 144, 60, 0.08);
}

.demo-tab:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.demo-tab[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Die Chat-Simulation laeuft in einem Messenger-Fenster, nicht in einer
   Anrufmaske: runde Sprechblasen, Kanalkopf mit Absender statt Waehlscheibe. */
.demo-panel--chat { grid-template-columns: 0.75fr 1.25fr; }

.demo-panel--chat .demo-bubble { border-radius: 3px; }

@media (max-width: 900px) {
  .demo-panel--chat { grid-template-columns: 1fr; }
}

/* Kanalzeile unter der Simulation: welche Kanaele derselbe Bot bedient.
   Reine Information, daher ohne Hover- oder Klick-Anmutung. */
.channel-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  cursor: default;
}

.channel-row span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.channel-row span::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 0.6em;
  vertical-align: middle;
  background: var(--color-gold);
}


/* Wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt die
   Inhalte sofort und ohne Einblend-Weg zu sehen. Ohne diese Regel starten
   alle [data-reveal]-Bloecke auf opacity:0 und warten auf JavaScript. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .demo-bubble {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Innenabstaende des Akkordeons auf schmalen Geraeten.
   Steht bewusst am Dateiende: `.offer-accordion__panel-inner { padding }`
   weiter oben hat dieselbe Spezifitaet (0,1,0), also entscheidet die
   Reihenfolge. Weiter oben platziert wuerde diese Regel schlicht verlieren.
   Grund der Reduktion: Bei 375px bleiben nach 2x 2,5rem Polsterung nur noch
   rund 215px Inhaltsbreite — und die Paketkarten polstern selbst nochmal. */
@media (max-width: 900px) {
  .offer-accordion__panel-inner { padding: var(--space-3); }
}

@media (max-width: 560px) {
  .offer-accordion__trigger { padding: var(--space-3); }
}

/* Wisch-Strecke fuer die Angebots-Raster auf schmalen Geraeten.
   Steht am Dateiende, damit sie die `grid-template-columns: 1fr`-Regel der
   900px-Media-Query sicher ueberschreibt.
   Bewusst OHNE Hinweiszeile: Die Karten sind auf 85% Breite gesetzt, dadurch
   schaut die naechste am rechten Rand hervor — das ist der Hinweis, dass es
   weitergeht. Ein Satz darueber braucht es nicht.
   Das negative Margin zieht die Strecke bis an die Kante des umgebenden
   Polsters, damit die Karten buendig ein- und ausscrollen. */
@media (max-width: 900px) {
  .offer-carousel {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--space-3));
    padding: 0 var(--space-3) var(--space-2);
  }

  .offer-carousel::-webkit-scrollbar { display: none; }

  .offer-carousel > * {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   Beispielgespraech im Angebot
   --------------------------------------------------------------------------
   Die Simulation lag frueher auf zwei eigenen Seiten, die man erst anklicken
   musste. Jetzt sitzt sie fest im aufgeklappten Angebot unter den Paketen.
   Eine Haarlinie trennt sie von den Karten darueber, damit klar ist: hier
   endet die Auswahl und beginnt die Vorfuehrung.
   ========================================================================== */

.offer-demo {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.offer-demo__head {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: var(--space-3);
}

.offer-demo__head p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 62ch;
}

/* Die Simulation gehoert zum Angebot, steht aber eine Stufe tiefer in der
   Hierarchie als die Paketkarten — daher etwas ruhiger gesetzt. */
.offer-demo .demo-panel {
  border-color: var(--color-line);
}

@media (max-width: 900px) {
  .offer-demo { margin-top: var(--space-4); padding-top: var(--space-3); }
}