/* Schriften selbst gehostet (Cormorant Garamond, Inter — beide SIL Open
   Font License). Bewusst keine Einbindung über fonts.googleapis.com: Dabei
   wird bei jedem Seitenaufruf die IP des Besuchers an Google übertragen,
   was in Deutschland abgemahnt wurde (LG München I, 20.01.2022, 3 O
   17493/20). Lokal ausgeliefert entfällt das und die Seite bleibt ohne
   Fremdanfragen lauffähig. Dateien liegen in assets/fonts/. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/CormorantGaramond-400-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/CormorantGaramond-400-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/CormorantGaramond-600-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/CormorantGaramond-600-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/CormorantGaramond-700-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/CormorantGaramond-700-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/CormorantGaramond-500-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/CormorantGaramond-500-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Inter-400-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Inter-400-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Inter-500-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Inter-500-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Inter-600-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Inter-600-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Inter-700-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Inter-700-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;
}

:root {
  --bg: #0E0D0C;
  --bg-2: #171614;
  --card: #1D1B19;
  --gold: #C8A46A;
  --gold-hover: #D7B67E;
  --gold-2: #B89258;
  --text: #F6F2EC;
  --text-2: #C8C2B9;
  --muted: #8C8780;
  --border: #2B2927;
  --divider: #262320;

  --radius-card: 18px;
  --radius-control: 12px;
  --shadow-soft: 0 10px 40px rgba(0, 0, 0, .18);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 48px;
  --space-5: 96px;

  --container: 1400px;
  --content: 1200px;
  --text-max: 650px;

  --font-headline: 'Cormorant Garamond', Didot, 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-headline);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
h3 { font-size: 1.4rem; }

p { margin: 0 0 var(--space-2); color: var(--text-2); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.content {
  max-width: var(--content);
  margin: 0 auto;
}

.text-max { max-width: var(--text-max); }

section { padding: var(--space-5) 0; }

.section-label {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

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

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 18px 32px;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background-color .25s ease, border-color .25s ease, opacity .25s ease, transform .25s ease, box-shadow .25s ease;
}

.btn-primary {
  background: var(--gold);
  color: #0E0D0C;
}

.btn-primary:hover {
  background: var(--gold-hover);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(200, 164, 106, .28);
}

.btn-secondary {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}

.btn-secondary:hover {
  background: rgba(200, 164, 106, .08);
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color .25s ease, border-color .25s ease; }
  .btn:hover { transform: none; }
}

/* Nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(14, 13, 12, .85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

/* Der Markenname trägt denselben Gold-Verlauf wie die Überschriften, aber
   bewusst ohne die Wanderbewegung von .heading-shimmer: in der Kopfzeile
   steht er auf jeder Seite und dauerhaft im Blick — ein Effekt, der dort
   alle fünf Sekunden durchläuft, würde ständig Aufmerksamkeit abziehen.
   Deshalb ein feststehender Verlauf, der den Glanz als Zustand zeigt statt
   als Animation. Der Goldkern sitzt bewusst rechts statt mittig: das Wort
   beginnt in Warmweiß und läuft nach hinten ins Gold aus, als fiele das
   Licht von rechts darauf. Mittig gesetzt wirkte es wie ein Farbfehler in
   der Wortmitte statt wie ein Glanz. */
.brand {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  letter-spacing: .04em;
  text-decoration: none;
  background: linear-gradient(100deg,
    var(--text) 8%, var(--gold-hover) 55%, var(--gold) 78%, var(--gold-hover) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Erbt die durchsichtige Schriftfarbe, damit der Verlauf des Elternteils
   über das ganze Wort läuft. Ein eigenes Gold hier würde die zweite
   Worthälfte aus dem Verlauf herausschneiden. */
.brand strong { color: inherit; font-weight: 500; }

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

.nav-links a {
  text-decoration: none;
  color: var(--text-2);
  font-size: .95rem;
  transition: color .2s ease;
}

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

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

/* Hero */

/* .hero bleibt fix im Viewport stehen (position: fixed), während .page-body
   ab .hero-spacer normal im Dokumentfluss darüber wegscrollt und den Hero
   dabei optisch zudeckt — daher braucht .hero-spacer exakt die Hero-Höhe
   als Platzhalter, sonst rutscht der restliche Inhalt unter den Hero. */
.hero {
  position: fixed;
  inset: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: var(--bg);
  text-align: left;
}

.hero-spacer {
  height: 100vh;
  height: 100svh;
}

.page-body {
  position: relative;
  z-index: 1;
  background: var(--bg);
}

/* Eigenes Element statt background-image auf .hero, damit die Ebene per
   JS beim Scrollen unabhängig skaliert werden kann (Zoom-Effekt, während
   .page-body den Hero zudeckt). Video-Element mit hero.png als Poster
   (Ladezustand / Fallback ohne Videounterstützung / reduced motion). */
.hero-bg {
  position: absolute;
  inset: -8% 0;
  width: 116%;
  height: 116%;
  object-fit: cover;
  object-position: center;
  transform-origin: center center;
  will-change: transform;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(14, 13, 12, .72) 0%, rgba(14, 13, 12, .42) 42%, rgba(14, 13, 12, .10) 76%),
    linear-gradient(180deg, rgba(14, 13, 12, .28) 0%, rgba(14, 13, 12, .22) 42%, rgba(14, 13, 12, .90) 100%),
    radial-gradient(ellipse at top right, rgba(200, 164, 106, .10), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(200, 164, 106, .06), transparent 50%);
}

.hero .content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 72px) clamp(88px, 11vh, 128px);
}

.hero h1 { max-width: 760px; }

/* Hero-Intro: Label, Überschrift, Buttons und Trust-Line blenden beim Laden
   gestaffelt und langsam ein (nicht beim erneuten Scrollen zurück nach oben).
   Bewusst ohne Blur: Filter-Animationen pausieren in inaktiven Browser-Tabs
   unsauber und können nach Fokuswechsel sichtbar "hängen bleiben" (mitten in
   der Unschärfe stecken). Opacity/Transform sind dafür zuverlässig. */
.hero .section-label,
.hero h1,
.hero .lead,
.hero .hero-actions,
.hero .trust-line {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-fade-up 1.2s cubic-bezier(.22, .61, .36, 1) forwards;
}

.hero .section-label { animation-delay: .15s; }
.hero h1 { animation-delay: .4s; }
.hero .lead { animation-delay: .7s; }
.hero .hero-actions { animation-delay: .95s; }
.hero .trust-line { animation-delay: 1.15s; }

@keyframes hero-fade-up {
  to { opacity: 1; transform: none; }
}

/* Hero-Überschrift bekommt eine eigene Variante des Goldverlaufs: statt
   automatisch zu schimmern, folgt die Verlaufsposition der Mausposition
   (per JS in --mouse-x gesetzt, siehe <script> unten). Deshalb hier keine
   heading-shimmer-Animation, nur die Fade-up-Einblendung von oben plus
   eine sanfte Übergangszeit für die Positionsänderung selbst. */
.hero h1.heading-shimmer {
  animation: hero-fade-up 1.2s cubic-bezier(.22, .61, .36, 1) .4s forwards;
  background-position: var(--mouse-x, 50%) center;
  transition: background-position .15s ease-out;
}

/* Auf schmalen Geräten bleibt die Überschrift der Zweizeiler, der sie am
   Desktop ist: Die globale h1-Größe (min. 2.4rem) ist auf einem 375-px-
   Display zu groß — die längere Zeile bräuchte 391 px bei 327 px Platz und
   bricht dadurch in vier gequetschte Zeilen um. Die Größe wächst hier mit
   der Bildschirmbreite mit und erreicht bei 768 px exakt wieder die
   Desktop-Größe, sodass am Übergang kein Sprung entsteht. Ab 769 px greift
   unverändert die globale Regel. */
@media (max-width: 768px) {
  .hero h1 { font-size: clamp(1.5rem, 8vw, 2.4rem); }
}

.hero .section-label { justify-content: flex-start; display: flex; }

.hero p.lead {
  font-size: 1.05rem;
  margin: 0 0 var(--space-3);
  max-width: 580px;
}

.hero-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 0;
}

.trust-line {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: .9rem;
}

@media (max-width: 560px) {
  .hero .content {
    padding: 0 var(--space-3) max(76px, calc(env(safe-area-inset-bottom) + 64px));
  }

  .hero p.lead { font-size: .96rem; }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 340px;
  }
}

/* Goldschimmer für Überschriften statt reinem Weiß — dezent genug fürs
   ruhige Markenbild, aber deutlich genug, um den Blick zuerst dorthin zu
   ziehen. Auf allen Section-h2 und der Hero-h1 (dort kombiniert mit dem
   Fade-up, siehe .hero h1.heading-shimmer weiter oben). */
.heading-shimmer {
  background: linear-gradient(100deg,
    var(--text) 30%, var(--gold-hover) 45%, var(--gold) 50%, var(--gold-hover) 55%, var(--text) 70%);
  background-size: 250% auto;
  background-position: 100% center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: heading-shimmer 5s ease-in-out 1.2s infinite;
}

@keyframes heading-shimmer {
  0%, 15% { background-position: 100% center; }
  85%, 100% { background-position: 0% center; }
}

/* Vorher/Nachher-Schaufenster: zwei eigenständige Karten nebeneinander,
   jede mit eigenem Rahmen/Schatten — bewusst kein gemeinsamer Rahmen mehr
   darum, damit die zwei Bereiche klar getrennt wirken statt als ein
   zusammengehöriges Element. */
.showcase {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  max-width: 1240px;
  margin: var(--space-4) auto 0;
  align-items: start;
}

.showcase-col { display: flex; flex-direction: column; }

/* Pfeil zwischen den Spalten. Absolut in der Rasterlücke, damit er das
   Zwei-Spalten-Raster nicht zu einem Drei-Spalten-Raster macht.
   Die Breite ist an die Lücke gebunden, nicht frei gewählt: 72 px, keinen
   Pixel mehr. Breiter ragt er rechts in die Beschriftung „Ihr fertiges
   Video“ hinein — die beginnt exakt an der Spaltenkante.
   Auf Höhe der Beschriftungen statt mittig: Er zeigt den Schritt zwischen
   den beiden Spalten an, und dort steht er neben deren Namen, nicht quer
   über den Bildern. Gold verläuft von blass nach voll — die Leserichtung
   liegt damit in der Farbe, nicht nur in der Spitze.
   Zentriert wird über left: calc(50% - halbe Breite), nicht über
   translateX(-50 %): .reveal blendet das Element über transform ein und würde
   eine Verschiebung dort wieder überschreiben. */
.showcase-arrow {
  position: absolute;
  top: -9px;
  left: calc(50% - 36px);
  width: 72px;
  height: 39px;
  pointer-events: none;
}

.showcase-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.showcase-box { position: relative; }

/* Beide Beschriftungen stehen als reiner Text über der jeweiligen Spalte,
   ohne Kapsel oder Rahmen — sie benennen den Schritt, statt selbst ein
   Bedienelement zu imitieren. Die rechte Seite trägt die Markenfarbe, weil
   Gold für das Ergebnis steht, nicht für das Ausgangsmaterial. */
.showcase-label {
  display: block;
  align-self: flex-start;
  margin-bottom: var(--space-2);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-2);
}

.showcase-label-gold {
  color: var(--gold);
}

/* Links: Vorher-Fotos schweben ohne eigene Kartenfläche auf dem
   Sektionshintergrund — kein grauer Kasten dahinter, nur die Fotos selbst,
   mit spürbarem Luftraum zueinander statt eng gepresst. Zwei Spalten ×
   zwei Zeilen mit 16:9-Bildern ergeben rechnerisch fast exakt die Höhe des
   16:9-Nachher-Videos daneben, ganz ohne künstliches Zentrieren. */
.before-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.before-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  filter: saturate(.85) contrast(.96);
  /* Tiefe auf fast schwarzem Grund (rgb(14,13,12)) entsteht nicht durch
     einen dunklen Schatten — der verdunkelt den Hintergrund um sechs von
     255 Stufen und bleibt unsichtbar. Sichtbar wird die Kante durch eine
     helle Haarlinie ringsum plus einen warmen Lichthof; der dunkle Anteil
     wirkt nur dort, wo ein Foto auf einem anderen aufliegt. */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .10),
    0 18px 40px rgba(0, 0, 0, .6),
    0 0 34px rgba(200, 164, 106, .10);
}

/* Rechts: Nachher-Box bleibt randlos gefülltes Video in Cinematic Gold,
   eigene Karte mit Rahmen/Schatten. */
.showcase-box-after {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--gold-2);
  background: var(--card);
  /* Gleiches Prinzip wie bei den Fotos, nur eine Stufe kräftiger: Der
     goldene Lichthof im Ruhezustand bleibt deutlich schwächer als der beim
     Drüberfahren, damit die Hover-Reaktion weiterhin als Veränderung
     wahrnehmbar ist. */
  box-shadow:
    0 22px 55px rgba(0, 0, 0, .65),
    0 0 45px rgba(200, 164, 106, .18);
  transition: transform .35s ease, box-shadow .35s ease;
}

.showcase-box-after:hover {
  transform: scale(1.04);
  border-color: var(--gold);
  box-shadow: 0 24px 70px rgba(200, 164, 106, .35);
  z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
  .showcase-box-after { transition: none; }
  .showcase-box-after:hover { transform: none; }
}

/* Play-Zeichen auf dem Standbild. Liegt nur oben auf, fängt selbst keine
   Klicks ab (`pointer-events: none`) und wird ausgeblendet, sobald das
   Video läuft — die Klasse setzt das Skript in index.html. */
.showcase-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--gold-2);
  background: rgba(14, 13, 12, .55);
  backdrop-filter: blur(2px);
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 2;
}

/* Dreieck aus einem Rahmen, damit kein Bild nötig ist. */
.showcase-play::after {
  content: '';
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent var(--gold);
}

.showcase-box-after.is-playing .showcase-play { opacity: 0; }

/* Nachher-Video ohne Steuerelemente: Start passiert automatisch beim
   Ins-Bild-Scrollen, siehe Skript in index.html. */
.showcase-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

/* Handlungsaufforderung direkt unter dem Vorher/Nachher-Vergleich: der
   Vergleich ist das stärkste Argument der Seite, deshalb steht der Weg zum
   Kontakt unmittelbar dahinter statt erst am Seitenende. */
.showcase-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

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

  /* Gestapelt zeigt der Pfeil nach unten. Er wird hier zum normalen
     Rasterelement und landet dadurch zwischen den beiden Blöcken.
     Gedreht wird über rotate statt transform, damit .reveal seine eigene
     transform-Eigenschaft behält. Die negativen Ränder holen zurück, was
     die zusätzliche Rasterzeile an Höhe kostet — gedreht ist das Element
     40 px breit, beansprucht im Fluss aber weiter seine 72 px. */
  .showcase-arrow {
    position: static;
    width: 72px;
    height: 39px;
    margin: -22px auto;
    /* Der Pfeil zeigt seit dem Spiegeln nach rechts unten, nicht mehr nach
       rechts oben — für die gestapelte Ansicht reichen deshalb 45 statt
       90 Grad, damit er wieder senkrecht nach unten weist. */
    rotate: 45deg;
  }
}

/* Cards */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  box-shadow: var(--shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  border-color: var(--gold-2);
}

.package-card.featured:hover {
  box-shadow: 0 20px 60px rgba(200, 164, 106, .22);
}

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

.grid {
  display: grid;
  gap: var(--space-3);
}

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

@media (max-width: 980px) {
  .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* Pricing cards */

.package-card {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Höhere Spezifität als die allgemeine .reveal-Regel weiter unten. So bleibt
   die Scroll-Animation erhalten, ohne die ruhigeren Hover-Übergänge der
   Paketkarten zu überschreiben. */
.package-card.reveal {
  transition:
    transform .55s cubic-bezier(.22, .61, .36, 1),
    scale 1.15s cubic-bezier(.22, .61, .36, 1),
    translate 1.15s cubic-bezier(.22, .61, .36, 1),
    box-shadow 1.15s cubic-bezier(.22, .61, .36, 1),
    border-color .8s ease;
}

/* Der Inline-Versatz ist nur für die Welle beim Einblenden gedacht. Nach dem
   Einblenden soll Hover ohne spürbare Wartezeit reagieren. */
.package-card.reveal.is-visible {
  transition-delay: 0s !important;
}

@media (hover: hover) and (pointer: fine) {
  .package-card.reveal.is-visible:is(:hover, :focus-within) {
    z-index: 2;
    transform: none;
    scale: 1.035;
    translate: 0 -6px;
    border-color: var(--border);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .44);
  }

  .package-card.featured.reveal.is-visible:is(:hover, :focus-within) {
    border-color: var(--gold);
    box-shadow: 0 30px 76px rgba(0, 0, 0, .48);
  }

  .package-cta:is(:hover, :focus-visible) {
    transform: none;
    color: var(--gold-hover);
    background: rgba(200, 164, 106, .1);
    border-color: var(--gold-hover);
    box-shadow:
      inset 0 0 18px rgba(200, 164, 106, .06),
      0 0 28px rgba(200, 164, 106, .28);
  }

  .package-card.featured .package-cta:is(:hover, :focus-visible) {
    color: #0E0D0C;
    background: var(--gold-hover);
    border-color: var(--gold-hover);
    box-shadow:
      0 10px 28px rgba(0, 0, 0, .26),
      0 0 30px rgba(200, 164, 106, .3);
  }
}

.package-card.featured {
  border-color: var(--gold);
  box-shadow: 0 10px 40px rgba(200, 164, 106, .12);
}

.package-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #0E0D0C;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Zurückhaltendere Variante für Hinweise, die keine Empfehlung sind
   (Platzbegrenzung, vorläufiger Preis) — bewusst nicht in Gold, damit
   das "Empfohlen"-Badge bei Signatur die einzige Hervorhebung bleibt. */
.package-badge-muted {
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}

.package-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  transition: transform .35s ease, background-color .35s ease, box-shadow .35s ease;
}

.package-icon svg { width: 20px; height: 20px; }

.package-cta {
  margin-top: auto;
  padding: 15px 22px;
}

.package-name { font-family: var(--font-headline); font-size: 1.3rem; }

.package-price {
  font-family: var(--font-headline);
  font-size: 2rem;
  color: var(--gold);
  transition: color .35s ease, text-shadow .35s ease;
}

.package-price span { font-size: 1rem; color: var(--muted); font-family: var(--font-body); }

.package-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--text-2);
  font-size: .92rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.package-card li::before { content: "✓  "; color: var(--gold); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .package-card,
  .package-icon,
  .package-price { transition: none; }

  .package-card.reveal.is-visible:is(:hover, :focus-within) {
    scale: 1;
    translate: 0;
  }

  .package-cta:is(:hover, :focus-visible) { transform: none; }
}

/* .included-note ist am 07.08.2026 entfallen — beide Absätze, die die Klasse
   benutzt haben (Korrekturhinweis unter den Paketen, Quellenhinweis unter den
   Kennzahlen), sind auf Friedrichs Wunsch aus index.html entfernt. */

/* Process steps */

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--divider);
  box-shadow: var(--shadow-soft);
}

@media (max-width: 980px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}

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

.step {
  position: relative;
  min-height: 260px;
  padding: clamp(26px, 3vw, 40px);
  background: linear-gradient(180deg, #191816 0%, #151412 100%);
}

.step-number {
  counter-increment: step;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  border: 1px solid rgba(200, 164, 106, .48);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-size: 2.35rem;
  font-weight: 500;
  line-height: 1;
  margin-bottom: var(--space-3);
  background: linear-gradient(145deg, rgba(200, 164, 106, .13), rgba(200, 164, 106, .035));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 14px 34px rgba(0, 0, 0, .2);
}

.step-number::before { content: counter(step, decimal-leading-zero); }

.step h3 {
  margin-bottom: 12px;
  color: var(--text);
  font-size: clamp(1.28rem, 1.8vw, 1.55rem);
}

.step p {
  max-width: 31ch;
  margin: 0;
  color: var(--text-2);
  font-size: .94rem;
  line-height: 1.7;
}

#ablauf .showcase-cta {
  max-width: 520px;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 980px) {
  .step { min-height: 230px; }
}

@media (max-width: 640px) {
  .step {
    min-height: 0;
    padding: var(--space-3);
  }

  .step-number {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    font-size: 2rem;
  }

  .step p { max-width: none; }
}

/* Contact */

.contact-card {
  text-align: center;
  padding: var(--space-4);
}

.contact-email {
  display: inline-block;
  margin-top: var(--space-2);
  font-family: var(--font-headline);
  font-size: 1.6rem;
  color: var(--gold);
  text-decoration: none;
}

.contact-email:hover { color: var(--gold-hover); }

/* Footer */

footer {
  border-top: 1px solid var(--border);
  padding: var(--space-4) 0;
  color: var(--muted);
  font-size: .85rem;
}

footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

footer a {
  color: var(--muted);
  text-decoration: none;
}

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

footer .footer-links {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Scroll reveal: Elemente werden als komplette, voll sichtbare Komponente von
   unten an ihren Platz geschoben — bewusst kein Fade (keine Opacity im Spiel),
   die Bewegung selbst trägt den Effekt. Die Verzögerung (transition-delay)
   wird per JS anhand der horizontalen Position gesetzt, dadurch entsteht eine
   leichte Welle von links nach rechts, wenn mehrere Elemente nebeneinander-
   stehen (Karten, Schritte). Läuft in beide Richtungen: Verlässt ein Element
   den Viewport wieder (hoch- oder runtergescrollt), setzt sich die Position
   zurück, damit die Animation beim nächsten Reinscrollen erneut abläuft.
   Bewusst ohne Blur: siehe Begründung beim Hero-Intro weiter oben — Filter-
   Übergänge bleiben in inaktiven Tabs manchmal mitten in der Unschärfe hängen. */
/* Zurückhaltender seit 07.08.2026 (Wunsch Friedrich): Weg von 56 auf 24 px,
   Dauer von .8 auf .55 s. Der Effekt bleibt als leichtes Nachrücken erkennbar,
   schiebt die Seite beim Scrollen aber nicht mehr sichtbar zusammen. Der
   Wellen-Versatz dazu steckt im Skript am Seitenende. */
.reveal {
  transform: translateY(24px);
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

.reveal.is-visible {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: none; }
  .hero .section-label,
  .hero h1,
  .hero .lead,
  .hero .hero-actions,
  .hero .trust-line { opacity: 1; transform: none; animation: none; }
  .heading-shimmer { animation: none; background-position: 0% center; }
  .hero h1.heading-shimmer { animation: none; transition: none; background-position: 50% center; }
  html { scroll-behavior: auto; }
}

/* KI-Kennzeichnung im Hero.

   Das Hero-Video trägt die Zeile seit 07.08.2026 unten rechts fest
   eingebrannt. Auf der Seite ist sie dort aber grundsätzlich nicht zu sehen:
   .hero-bg liegt mit object-fit: cover auf 116 % Höhe UND 116 % Breite bei
   left: 0 / top: -8 %. Der untere und der rechte Rand des Videos liegen damit
   auf jedem Bildschirm außerhalb des Ausschnitts — also genau dort, wo das
   eingebrannte Label steht. Früher war das nur eine Frage schmaler Fenster
   (deshalb stand hier eine Bedingung ab Seitenverhältnis 0,86); mit der
   Position unten rechts gilt es immer, und die Bedingung ist entfallen.

   Die eingebrannte Zeile bleibt trotzdem sinnvoll: Sie hängt am File und
   überlebt Download, Reshare und Abfilmen. Auf der Seite übernimmt diese
   Zeile — gleicher Wortlaut, gleiche Gestaltung: nur Schrift, kein Kasten,
   Kontrast über eine weiche Schattierung statt über eine Platte.

   Sichtbar nur ganz oben: Das JS in index.html blendet sie beim Scrollen aus,
   sobald der Hero zugedeckt wird. Ohne JS oder bei reduzierter Bewegung
   bleibt sie stehen — im Zweifel lieber sichtbar als weg. */
.hero-ai-note {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 1;
  margin: 0;
  pointer-events: none;
  font-size: .68rem;
  letter-spacing: .04em;
  color: rgba(246, 242, 236, .72);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .9),
    0 0 12px rgba(0, 0, 0, .65);
}

/* .demo-note ist am 07.08.2026 mit dem Absatz selbst entfallen (Wunsch
   Friedrich, siehe Kommentar an der Stelle in index.html). */

/* Kennzahlen ohne Karten: nur Typografie auf dem Seitenhintergrund. */

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

@media (max-width: 900px) {
  .stats { grid-template-columns: 1fr; gap: var(--space-4); max-width: var(--text-max); }
}

.stat p {
  margin: var(--space-2) 0 0;
  color: var(--text-2);
  font-size: .96rem;
  line-height: 1.65;
  max-width: 34ch;
}

.stat-figure {
  display: block;
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: clamp(3rem, 5.5vw, 4.4rem);
  line-height: 1;
  color: var(--gold);
}

/* Quellenlink sitzt im Fließtext statt als eigene Zeile darunter. Deshalb
   nur unterstrichen und in Textfarbe — er soll belegen, nicht ablenken. */
.stat p a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(200, 164, 106, .45);
  text-underline-offset: 3px;
  transition: color .25s ease, text-decoration-color .25s ease;
}

.stat p a:hover {
  color: var(--gold);
  text-decoration-color: var(--gold);
}

/* Vergleich: gleiche Grundidee wie eine klassische Leistungsmatrix, aber
   mit beschreibenden Angaben statt pauschaler Haken und Kreuze. Die
   Szenovelle-Spalte bleibt als schnell erfassbarer Schwerpunkt markiert. */

.comparison-intro {
  margin-top: var(--space-2);
}

.comparison-shell {
  margin-top: var(--space-4);
}

.comparison-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 30px 0;
}

.comparison-table-frame {
  position: relative;
  isolation: isolate;
  min-width: 860px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

.comparison-table-frame::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -30px;
  bottom: -30px;
  left: 23%;
  width: 25.666%;
  border: 1px solid rgba(200, 164, 106, .58);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(200, 164, 106, .36), rgba(184, 146, 88, .22));
  box-shadow: 0 24px 70px rgba(200, 164, 106, .16);
  pointer-events: none;
}

.comparison-table {
  position: relative;
  z-index: 1;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.comparison-table th,
.comparison-table td {
  padding: 22px 24px;
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
}

.comparison-table thead th {
  height: 112px;
  text-align: center;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  background: #191816;
}

.comparison-table thead th:first-child {
  width: 23%;
  text-align: left;
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.comparison-table thead th:first-child { border-top-left-radius: calc(var(--radius-card) - 1px); }
.comparison-table thead th:last-child { border-top-right-radius: calc(var(--radius-card) - 1px); }

.comparison-table thead th:not(:first-child) { width: 25.666%; }

.comparison-table thead th > span,
.comparison-table thead th > small {
  display: block;
}

.comparison-table thead th > small {
  margin-top: 5px;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 400;
}

.comparison-brand {
  font-family: var(--font-headline);
  font-size: 1.55rem;
  letter-spacing: .03em;
}

.comparison-brand strong {
  color: var(--gold);
  font-weight: 500;
}

.comparison-table tbody th {
  text-align: left;
  color: var(--text);
  font-size: .94rem;
  font-weight: 600;
  background: var(--card);
}

.comparison-table tbody td {
  height: 76px;
  text-align: center;
  color: var(--text-2);
  font-size: .9rem;
  line-height: 1.45;
}

.comparison-table tbody tr:nth-child(even) th,
.comparison-table tbody tr:nth-child(even) td:not(.comparison-featured) {
  background: rgba(255, 255, 255, .018);
}

.comparison-table .comparison-featured {
  border-right: 1px solid rgba(200, 164, 106, .34);
  border-left: 1px solid rgba(200, 164, 106, .34);
  background: transparent;
}

.comparison-table thead .comparison-featured {
  border-top: 0;
  background: transparent;
}

.comparison-table thead .comparison-featured small {
  color: rgba(246, 242, 236, .68);
}

.comparison-table thead .comparison-featured .comparison-brand strong {
  color: var(--text);
}

.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
  border-bottom: 0;
}

.comparison-table tbody tr:last-child .comparison-featured {
  border-bottom: 0;
}

.comparison-table tbody tr:last-child th:first-child {
  border-bottom-left-radius: calc(var(--radius-card) - 1px);
}

.comparison-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: calc(var(--radius-card) - 1px);
}

.comparison-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.comparison-mark-yes {
  color: var(--gold);
  border: 1px solid rgba(200, 164, 106, .5);
  background: rgba(200, 164, 106, .12);
}

.comparison-featured .comparison-mark-yes {
  position: relative;
  isolation: isolate;
  width: 36px;
  height: 36px;
  color: #6F5128;
  border-color: rgba(246, 242, 236, .72);
  background: radial-gradient(circle at 34% 28%, #fff 0%, #F6F2EC 52%, #E9DDCB 100%);
  box-shadow:
    0 0 0 7px rgba(246, 242, 236, .055),
    0 0 30px rgba(229, 196, 140, .32),
    0 12px 26px rgba(0, 0, 0, .24);
  animation: comparison-check-glow 4.2s ease-in-out infinite;
}

.comparison-featured .comparison-mark-yes::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -9px;
  border: 1px solid rgba(246, 242, 236, .13);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 242, 236, .09), transparent 68%);
}

.comparison-table tbody tr:nth-child(2) .comparison-featured .comparison-mark-yes { animation-delay: -.7s; }
.comparison-table tbody tr:nth-child(3) .comparison-featured .comparison-mark-yes { animation-delay: -1.4s; }
.comparison-table tbody tr:nth-child(4) .comparison-featured .comparison-mark-yes { animation-delay: -2.1s; }
.comparison-table tbody tr:nth-child(5) .comparison-featured .comparison-mark-yes { animation-delay: -2.8s; }
.comparison-table tbody tr:nth-child(6) .comparison-featured .comparison-mark-yes { animation-delay: -3.5s; }

@keyframes comparison-check-glow {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 7px rgba(246, 242, 236, .055),
      0 0 30px rgba(229, 196, 140, .32),
      0 12px 26px rgba(0, 0, 0, .24);
  }
  50% {
    transform: scale(1.055);
    box-shadow:
      0 0 0 9px rgba(246, 242, 236, .075),
      0 0 40px rgba(229, 196, 140, .46),
      0 14px 30px rgba(0, 0, 0, .28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .comparison-featured .comparison-mark-yes { animation: none; }
}

.comparison-mark-no {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  background: #C94A45;
  box-shadow: 0 8px 22px rgba(201, 74, 69, .18);
}

.comparison-swipe {
  display: none;
  margin: 0;
  padding: 12px var(--space-2);
  border-top: 1px solid var(--divider);
  color: var(--muted);
  font-size: .78rem;
  text-align: center;
}

@media (max-width: 760px) {
  .comparison-table-frame { min-width: 680px; }

  .comparison-table th,
  .comparison-table td { padding: 18px 16px; }

  .comparison-table thead th:first-child,
  .comparison-table tbody th {
    position: sticky;
    left: 0;
    z-index: 2;
  }

  .comparison-table thead th:first-child { z-index: 3; }
  .comparison-table tbody tr:nth-child(even) th { background: #211f1d; }
  .comparison-swipe { display: block; }
}

/* Zufriedenheitsversprechen */

.packages-intro {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(500px, 1.1fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

.packages-heading p { margin-bottom: 0; }

.guarantee {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: 0;
  padding: var(--space-3);
  border: 1px solid rgba(200, 164, 106, .3);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(200, 164, 106, .07), rgba(200, 164, 106, .02));
  max-width: none;
}

.guarantee h3 {
  margin: 0 0 var(--space-1);
  font-size: 1.25rem;
  color: var(--text);
}

.guarantee p {
  margin: 0;
  color: var(--text-2);
  font-size: .94rem;
  line-height: 1.65;
}

.guarantee-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.guarantee-icon svg { width: 22px; height: 22px; }

@media (max-width: 980px) {
  .packages-intro {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

@media (max-width: 640px) {
  .guarantee { flex-direction: column; }
}

/* Paketkarten: Zusatzzeile und gemeinsamer Leistungsblock */

.package-hint {
  margin: 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--muted);
}

.included-band {
  margin-top: clamp(52px, 6vw, 84px);
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(200, 164, 106, .24);
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 12% 0%, rgba(200, 164, 106, .11), transparent 34%),
    linear-gradient(180deg, #191816 0%, #151412 100%);
  box-shadow: var(--shadow-soft);
}

.included-band-heading {
  margin-bottom: clamp(24px, 3vw, 36px);
}

.included-band-label {
  margin: 0 0 8px;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold);
}

.included-band-heading h3 {
  margin: 0;
  font-size: clamp(1.65rem, 2.5vw, 2.2rem);
}

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

.included-item {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, .018);
}

.included-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border: 1px solid rgba(200, 164, 106, .55);
  border-radius: 50%;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.included-icon svg {
  width: 20px;
  height: 20px;
}

.included-item strong,
.included-item span:not(.included-icon) {
  display: block;
}

.included-item strong {
  margin-bottom: 5px;
  color: var(--text);
  font-size: .95rem;
}

.included-item span:not(.included-icon) {
  color: var(--text-2);
  font-size: .8rem;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .included-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .included-grid { grid-template-columns: 1fr; }
  .included-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 0 16px;
    align-items: center;
  }
  .included-icon { margin-bottom: 0; }
}

/* Handlungsaufforderungen: Unterzeile unter dem Knopf */

.cta-sub {
  margin: var(--space-2) 0 0;
  font-size: .84rem;
  color: var(--muted);
  text-align: center;
  width: 100%;
}

.showcase-cta { flex-wrap: wrap; }

/* Kontaktformular im Overlay */

.dialog {
  /* Feste Positionierung mit margin:auto zentriert zuverlässig und macht den
     Dialog zugleich zum Bezugsrahmen für den absolut gesetzten Schließknopf. */
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(680px, calc(100vw - 2 * var(--space-3)));
  max-height: calc(100vh - 2 * var(--space-3));
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
  color: var(--text);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
  overflow: auto;
}

.dialog::backdrop {
  background: rgba(8, 7, 6, .74);
  backdrop-filter: blur(4px);
}

.dialog h2 { margin: 0 0 var(--space-2); font-size: 1.9rem; }

.dialog-intro {
  margin: 0 0 var(--space-3);
  color: var(--text-2);
  font-size: .94rem;
  line-height: 1.6;
}

.dialog-close-form { position: absolute; top: var(--space-2); right: var(--space-2); }

.dialog-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}

.dialog-close:hover { color: var(--gold); border-color: var(--gold); }

.feld-reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

@media (max-width: 560px) {
  .feld-reihe { grid-template-columns: 1fr; }
}

.feld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-2);
}

.feld > span {
  font-size: .82rem;
  letter-spacing: .03em;
  color: var(--text-2);
}

.feld em { color: var(--gold); font-style: normal; }

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .95rem;
  transition: border-color .25s ease;
}

.feld textarea { resize: vertical; min-height: 96px; }

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

.feld input::placeholder,
.feld textarea::placeholder { color: var(--muted); }

.feld-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: var(--space-2) 0 var(--space-3);
  font-size: .85rem;
  line-height: 1.55;
  color: var(--text-2);
}

.feld-check input {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  accent-color: var(--gold);
  flex-shrink: 0;
}

.feld-check a { color: var(--gold); }

.feld-fehler {
  margin: 0 0 var(--space-2);
  font-size: .86rem;
  color: #E0A0A0;
}

.dialog-submit { width: 100%; justify-content: center; }

.dialog-fuss {
  margin: var(--space-3) 0 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--muted);
}

.dialog-danke {
  margin: 0;
  padding: var(--space-3) 0;
  color: var(--text-2);
  line-height: 1.65;
}

/* Legal pages */

.legal main {
  padding: var(--space-5) 0;
}

.legal h2 { margin-top: var(--space-4); }

.legal .content { max-width: var(--text-max); }