/* ============================================================
   Enara Website Stylesheet
   Gestaltungsidee: Der Tagesbogen. Die Seite wandert wie ein Tag
   mit Enara: Nacht im Hero, ein warmer Morgenglow im Tagesablauf,
   der dunkelste Himmel beim Sternbild. Echte App Screens in
   Handy Rahmen sind das Herz der Seite.
   ============================================================ */

/* Schriften liegen bei uns selbst (DSGVO: keine Anfragen an Google).
   Variable Fonts: eine Datei deckt den ganzen Gewichtsbereich ab. */

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('schriften/lora.woff2') format('woff2');
}

@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/lora-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('schriften/nunito-sans.woff2') format('woff2');
}

:root {
  /* Die Farbwerte kommen woertlich aus der App (28.07.):
     Nachthimmel #0A0F22 → #131B38 → #241E4A mit Nebel #6C55B8,
     Morgenhimmel endet in #C98A3E mit Horizont #FFC96B,
     Schwalbenblau #1D2E4E, Gold #D9A441. */
  --nacht0: #0a0f22;          /* tiefe Nacht, Start des App Nachthimmels */
  --nacht1: #131b38;          /* Mitte des App Nachthimmels */
  --nacht2: #1d2e4e;          /* Kartengrund: das Schwalbenblau */
  --lila: #241e4a;            /* das Lila unten im App Nachthimmel */
  --creme: #f5f0e6;           /* Überschriften, wie in der App */
  --text: rgba(245, 240, 230, 0.78);
  --leise: rgba(245, 240, 230, 0.55);
  --linie: rgba(245, 240, 230, 0.14);
  --flaeche: rgba(245, 240, 230, 0.045);
  --gold: #d9a441;
  --goldhell: #ebc57d;
  --morgen: #c98a3e;          /* das warme Gold am App Morgenhorizont */
  --serif: 'Lora', Georgia, serif;
  --sans: 'Nunito Sans', 'Segoe UI', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--nacht0);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { font-family: var(--serif); color: var(--creme); font-weight: 500; }

a { color: var(--goldhell); }

::selection { background: rgba(217, 164, 65, 0.35); color: var(--creme); }

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

.innen { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- Sternenhimmel (zwei Ebenen aus box-shadow Punkten) ---------- */

.sterne { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.sterne::before, .sterne::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
  width: 2px; height: 2px;
  background: transparent;
}

/* ferne Sterne, ruhig */
.sterne::before {
  box-shadow:
    4vw 12vh 0 0 rgba(245,240,230,0.5), 12vw 32vh 0 0 rgba(245,240,230,0.3),
    19vw 8vh 0 0 rgba(245,240,230,0.4), 27vw 44vh 0 0 rgba(245,240,230,0.28),
    33vw 18vh 0 0 rgba(245,240,230,0.45), 41vw 66vh 0 0 rgba(245,240,230,0.3),
    48vw 10vh 0 0 rgba(245,240,230,0.35), 55vw 38vh 0 0 rgba(245,240,230,0.3),
    62vw 74vh 0 0 rgba(245,240,230,0.4), 69vw 22vh 0 0 rgba(245,240,230,0.32),
    76vw 52vh 0 0 rgba(245,240,230,0.42), 84vw 14vh 0 0 rgba(245,240,230,0.3),
    91vw 40vh 0 0 rgba(245,240,230,0.45), 96vw 70vh 0 0 rgba(245,240,230,0.3),
    9vw 82vh 0 0 rgba(245,240,230,0.3), 52vw 88vh 0 0 rgba(245,240,230,0.28),
    88vw 86vh 0 0 rgba(245,240,230,0.35), 23vw 92vh 0 0 rgba(245,240,230,0.3);
}

/* nahe Sterne, sie funkeln */
.sterne::after {
  width: 3px; height: 3px;
  box-shadow:
    8vw 24vh 0 0 rgba(245,240,230,0.85), 30vw 6vh 0 0 rgba(235,197,125,0.8),
    44vw 30vh 0 0 rgba(245,240,230,0.75), 58vw 14vh 0 0 rgba(245,240,230,0.8),
    72vw 60vh 0 0 rgba(235,197,125,0.7), 87vw 28vh 0 0 rgba(245,240,230,0.85),
    16vw 58vh 0 0 rgba(245,240,230,0.7), 66vw 84vh 0 0 rgba(245,240,230,0.75),
    38vw 78vh 0 0 rgba(235,197,125,0.65), 94vw 55vh 0 0 rgba(245,240,230,0.7);
  animation: funkeln 5s ease-in-out infinite alternate;
}

@keyframes funkeln {
  from { opacity: 0.45; }
  to   { opacity: 1; }
}

/* ---------- Sternschnuppe: der Wunschmoment ----------
   Fast den ganzen Zyklus unsichtbar, dann zieht sie in gut einer
   Sekunde schräg über den Himmel. Selten ist hier der Punkt. */

.sternschnuppe {
  position: absolute;
  top: 16%;
  left: -6%;
  width: 110px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 233, 184, 0.95));
  opacity: 0;
  pointer-events: none;
  animation: schnuppe 11s linear infinite;
  /* Negativer Start: der erste Flug kommt schon 1 Sekunde nach dem
     Laden (niemand wartet 13 Sekunden auf dem Hero), danach alle 11 */
  animation-delay: -8.9s;
}

/* Im Himmel Abschnitt fliegt sie versetzt und in eigenem Takt,
   damit nie zwei gleichzeitig unterwegs sind */
.himmel .sternschnuppe { top: 30%; left: 22%; animation-duration: 17s; animation-delay: -9s; }

@keyframes schnuppe {
  0%    { opacity: 0; transform: translate3d(0, 0, 0) rotate(16deg); }
  90%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(16deg); }
  92%   { opacity: 0.9; }
  99%   { opacity: 0.5; }
  100%  { opacity: 0; transform: translate3d(64vw, 19vw, 0) rotate(16deg); }
}

/* ---------- Navigation ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  background: rgba(10, 15, 34, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(245, 240, 230, 0.08);
}

.nav-marke {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--creme);
  font-family: var(--serif);
  font-size: 1.35rem;
}

.nav-marke img { width: 44px; height: 44px; object-fit: contain; }

.nav-links { display: flex; align-items: center; gap: 26px; }

.nav-links a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
}

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

.nav-cta {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--goldhell) !important;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
}

.nav-cta:hover { background: rgba(217, 164, 65, 0.12); }

@media (max-width: 720px) {
  /* Am Handy blieb frueher nur der Ladeknopf stehen. Wer den Preis wissen
     wollte, musste zwanzig Bildschirme scrollen, und genau das ist die Frage,
     die eine Kaufentscheidung aufhaelt. Der Preislink bleibt deshalb. */
  .nav-links a:not(.nav-cta):not([href="#preise"]) { display: none; }
  .nav-links { gap: 16px; }
}

/* ---------- Handy Rahmen ----------
   Regel: innerer Radius = äußerer Radius minus Rand, sonst wirkt
   der Rahmen billig. Screens sind 390x844, Rahmen niemals verzerren. */

.telefon {
  position: relative;
  aspect-ratio: 390 / 844;
  background: #05050e;
  padding: 10px;
  border: 1px solid rgba(245, 240, 230, 0.2);
  box-shadow:
    0 30px 60px -18px rgba(0, 0, 0, 0.75),
    0 0 70px rgba(217, 164, 65, 0.14);
  flex-shrink: 0;
}

.telefon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.telefon-gross  { width: 320px; border-radius: 48px; }
.telefon-gross img  { border-radius: 38px; }
.telefon-mittel { width: 280px; border-radius: 44px; }
.telefon-mittel img { border-radius: 34px; }
.telefon-klein  { width: 230px; border-radius: 38px; }
.telefon-klein img  { border-radius: 28px; }

/* Leuchten hinter dem Handy, damit sich Dunkel von Dunkel löst.
   Warm statt hell: der Schein trägt etwas Morgenrot im Gold.
   WICHTIG: z-index 0, nicht -1. Mit -1 fiel der Schein hinter den
   Abschnittshintergrund, sobald die Einblend Animation endete
   (ihr transform hielt ihn nur währenddessen im eigenen Stapel). */
.glow {
  position: absolute;
  inset: -16%;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 62%, rgba(201, 130, 78, 0.2), transparent 62%),
    radial-gradient(circle, rgba(217, 164, 65, 0.34), transparent 68%);
  filter: blur(34px);
  pointer-events: none;
}

/* Der Screen liegt über dem Schein, der Schein über dem Seitengrund.
   Der Verlauf dahinter steht dort, solange ein Screen noch lädt,
   damit nie ein schwarzes Loch zu sehen ist. */
.telefon img {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #1d2e4e 0%, #131b38 55%, #0a0f22 100%);
}

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

/* Der Hero ist der App Nachthimmel: oben tiefes Blau, unten das Lila.
   Der Nebelfleck liegt als eigene Ebene darüber, damit er atmen kann. */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0c1229 0%, var(--nacht1) 52%, var(--lila) 100%);
}

/* Der lila Nebel driftet kaum merklich: der Himmel lebt, ohne dass
   man die Bewegung bewusst sieht */
.hero::before {
  content: "";
  position: absolute;
  top: -34%;
  right: -16%;
  width: 980px;
  height: 640px;
  background: radial-gradient(closest-side, rgba(108, 85, 184, 0.32), transparent 72%);
  pointer-events: none;
  animation: nebeldrift 24s ease-in-out infinite alternate;
}

@keyframes nebeldrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-70px, 44px, 0) scale(1.08); }
}

.hero-innen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 48px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}

.hero-eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  line-height: 1.15;
  max-width: 21ch;
  margin-bottom: 22px;
}

.hero-sub {
  max-width: 46ch;
  font-size: 1.15rem;
  margin-bottom: 30px;
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 14px; }

.knopf-gold {
  display: inline-block;
  padding: 14px 26px;
  background: linear-gradient(180deg, var(--goldhell), var(--gold));
  color: #241a05;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 8px 26px rgba(217, 164, 65, 0.3);
}

.knopf-gold:hover { filter: brightness(1.06); }

.knopf-geist {
  display: inline-block;
  padding: 13px 24px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  color: var(--creme);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.98rem;
}

.knopf-geist:hover { border-color: rgba(245, 240, 230, 0.4); }

.hero-hinweis { font-size: 0.92rem; color: var(--leise); }

/* außen schwebt, innen neigt sich: so überschreiben sich die
   transform Werte von Animation und Neigung nicht gegenseitig */
.hero-buehne { position: relative; display: flex; justify-content: center; }

.schwebt { animation: schweben 7s ease-in-out infinite alternate; }

@keyframes schweben {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}

.hero-buehne .telefon {
  transform: perspective(1300px) rotateY(-12deg) rotateX(3deg) rotate(1.5deg);
}

/* Dynamic Island nur am Hero Handy, oben ist dort nur Himmel */
.hero-buehne .telefon::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 24px;
  border-radius: 13px;
  background: #05050e;
  z-index: 2;
}

/* ---------- Vertrauensstreifen ---------- */

.streifen {
  border-top: 1px solid rgba(245, 240, 230, 0.08);
  border-bottom: 1px solid rgba(245, 240, 230, 0.08);
  background: var(--nacht1);
}

.streifen-innen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 56px;
  row-gap: 12px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 24px;
}

.streifen-punkt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--text);
  /* nie mitten im Satz umbrechen; bei Platznot rutscht der ganze Punkt in die nächste Zeile */
  white-space: nowrap;
}

.streifen-punkt .stern-icon { color: var(--gold); font-size: 1.05rem; }

@media (max-width: 720px) {
  .streifen-innen { flex-direction: column; align-items: flex-start; row-gap: 10px; padding: 16px 24px; }
  .streifen-punkt { white-space: normal; text-align: left; }
}

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

.abschnitt { position: relative; padding: 96px 0; }

/* Blau und Gold im Wechsel statt einer durchgehend schwarzen Wand:
   jeder große Abschnitt bekommt seine eigene, leise Farbinsel
   (Aurora Prinzip: weiche Radialverläufe auf dunklem Blau) */
#funktionen {
  background:
    radial-gradient(1000px 520px at 12% 16%, rgba(108, 85, 184, 0.2), transparent 70%),
    radial-gradient(900px 500px at 88% 70%, rgba(217, 164, 65, 0.08), transparent 70%),
    var(--nacht0);
}

#mehr {
  background: linear-gradient(180deg, var(--nacht0), var(--nacht1) 55%, var(--nacht0));
}

#preise {
  background:
    radial-gradient(820px 440px at 50% 26%, rgba(201, 138, 62, 0.11), transparent 70%),
    var(--nacht0);
}

.abschnitt-kopf { max-width: 640px; margin-bottom: 56px; }

.abschnitt-kopf.mittig { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 14px;
}

.abschnitt-kopf h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.2; margin-bottom: 16px; }

.abschnitt-kopf p { font-size: 1.1rem; }

/* ---------- Ein Tag mit Enara: drei Schritte, Morgenglow ---------- */

/* Der Morgenhimmel der App: das Blau kippt am unteren Horizont
   ins warme Gold (#C98A3E mit #FFC96B Leuchten) */
.tagesbogen {
  background:
    radial-gradient(900px 380px at 50% 106%, rgba(255, 201, 107, 0.13), transparent 58%),
    radial-gradient(1200px 540px at 50% 112%, rgba(201, 138, 62, 0.26), transparent 72%),
    var(--nacht0);
}

.schritte {
  display: grid;
  /* Drei Spalten fuer drei Tageszeiten: Morgens, Mittags, Abends. Der vierte
     Schritt "Mit der Zeit" wurde am 31.07.2026 entfernt, die vierte Spalte
     blieb aber stehen und zog die drei Telefone 145 px nach links, waehrend
     Ueberschrift und Text darueber zentriert blieben. */
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}

.schritt { text-align: center; }

/* Nie breiter als seine Spalte: bei drei Spalten wird es unter etwa 780 px
   Fensterbreite enger als die festen 230 px, und das Handy stuende ueber. */
.schritt .telefon { width: min(230px, 100%); margin: 0 auto 26px; }

.schritt-zeit {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 8px;
}

.schritt h3 { font-size: 1.35rem; margin-bottom: 10px; }

.schritt p { font-size: 0.99rem; max-width: 34ch; margin: 0 auto; }

@media (max-width: 900px) {
  /* Zwei Spalten am Tablet: der dritte Schritt rutscht in die zweite Reihe.
     Kuerzer als drei untereinander, und die Reihenfolge des Tages bleibt
     lesbar. */
  .schritte { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

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

/* ---------- Der Himmel: das Herzstück ---------- */

.himmel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(800px 500px at 50% 40%, rgba(74, 58, 140, 0.38), transparent 70%),
    linear-gradient(180deg, var(--nacht0), #080d1d 55%, var(--nacht0));
  text-align: center;
}

.himmel .abschnitt-kopf { margin-bottom: 40px; }

.himmel-buehne { position: relative; display: flex; justify-content: center; padding-bottom: 8px; }

.himmel-zeile {
  margin-top: 36px;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--leise);
  font-style: italic;
}

/* ---------- Feature Reihen im Wechsel ---------- */

.reihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
  padding: 56px 0;
}

.reihe-medien { display: flex; justify-content: center; position: relative; }

.reihe h3 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); line-height: 1.25; margin-bottom: 16px; }

.reihe p { margin-bottom: 14px; }

.reihe .merkmale { list-style: none; margin-top: 18px; }

.reihe .merkmale li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 0.99rem;
}

.reihe .merkmale li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--gold);
  font-size: 0.85rem;
}

/* jede zweite Reihe spiegeln */
.reihe.getauscht .reihe-medien { order: 2; }

@media (max-width: 900px) {
  .reihe, .reihe.getauscht { grid-template-columns: 1fr; gap: 36px; padding: 40px 0; }
  .reihe.getauscht .reihe-medien { order: 0; }
}

.ehrlich {
  border-left: 2px solid var(--gold);
  padding: 10px 16px;
  background: var(--flaeche);
  border-radius: 0 12px 12px 0;
  font-size: 0.93rem;
  color: var(--leise);
  margin-top: 18px;
}

.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.chip {
  padding: 7px 16px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--text);
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.chip:hover { border-color: var(--gold); color: var(--creme); }

/* Weicher Wechsel des App Screens, wenn eine Satzstaerke gewaehlt wird */
#sternendeck-bild { transition: opacity 0.2s ease; }
#sternendeck-bild.wechselt { opacity: 0; }

.chip.aktiv { background: var(--creme); color: #241a05; border-color: var(--creme); font-weight: 700; }

/* ---------- Kaufknopf in der Seitenmitte ---------- */

.mitte-cta { text-align: center; padding: 40px 0 8px; }

.mitte-cta p { margin-top: 14px; font-size: 0.92rem; color: var(--leise); }

/* ---------- App Store Badge ----------
   Apples Original, unveraendert (Regel: die Badge darf nicht nachgebaut oder
   umgefaerbt werden, nur die gelieferte Grafik zaehlt). Hoehe 48px, Apple
   verlangt am Bildschirm mindestens 40. Der Rand ringsum ist der geforderte
   Freiraum von einem Viertel der Hoehe, dort darf nichts hineinragen. */
.store-badge {
  display: inline-block;
  line-height: 0;
  margin: 12px;
}

.store-badge img {
  height: 48px;
  width: auto;
  display: block;
}

/* Sanftes Anheben beim Zeigen, aber die Grafik selbst bleibt unberuehrt */
.store-badge:hover { transform: translateY(-2px); }
.store-badge { transition: transform 0.2s ease; }

/* Die Ladezeile: Badge und darunter der Hinweis auf die Gratistage */
.laden {
  text-align: center;
  padding: 32px 0 8px;
}

.laden p {
  margin-top: 6px;
  font-size: 0.92rem;
  color: var(--leise);
}

/* ---------- Bento: und noch mehr ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.bento-karte {
  background: var(--flaeche);
  border: 1px solid rgba(245, 240, 230, 0.1);
  border-radius: 20px;
  padding: 26px 24px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.bento-karte:hover { border-color: rgba(217, 164, 65, 0.45); transform: translateY(-3px); }

.bento-karte .zeichen { font-size: 1.4rem; color: var(--goldhell); margin-bottom: 12px; }

.bento-karte h3 { font-size: 1.12rem; margin-bottom: 8px; }

.bento-karte p { font-size: 0.93rem; color: var(--leise); }

/* Bleibt am Ende eine einzelne Karte uebrig, spannt sie die volle Breite.
   Eine Waise neben zwei Luecken sieht nach Fehler aus, nicht nach Absicht. */
.bento-karte:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; }
  /* bei zwei Spalten faellt die Waise auf ungerade Positionen */
  .bento-karte:last-child:nth-child(3n + 1) { grid-column: auto; }
  .bento-karte:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .bento-karte:last-child { grid-column: auto; }
}

/* ---------- Vertrauen: tiefblaue Bühne mit Gold ----------
   Kein Farbbruch zur Nacht, sondern der blaueste Moment der
   Seite, und die goldenen Kartenränder tragen die Brandfarbe. */

.vertrauen {
  background:
    radial-gradient(900px 480px at 50% 0%, rgba(74, 58, 140, 0.35), transparent 70%),
    linear-gradient(180deg, var(--nacht0), var(--nacht1) 45%, var(--nacht0));
}

.vertrauen-gitter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.vertrauen-karte {
  background: rgba(29, 46, 78, 0.45);
  border: 1px solid rgba(217, 164, 65, 0.28);
  border-radius: 20px;
  padding: 26px;
}

.vertrauen-karte h3 {
  font-size: 1.05rem;
  color: var(--goldhell);
  margin-bottom: 8px;
  font-family: var(--sans);
  font-weight: 800;
}

.vertrauen-karte p { font-size: 0.95rem; }

@media (max-width: 720px) { .vertrauen-gitter { grid-template-columns: 1fr; } }

/* ---------- Preise ---------- */

.preise-gitter {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 22px;
  align-items: stretch;
  max-width: 880px;
  margin: 0 auto;
}

.preis-karte {
  background: var(--flaeche);
  border: 1px solid rgba(245, 240, 230, 0.12);
  border-radius: 24px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
}

.preis-karte.plus {
  background: linear-gradient(180deg, rgba(217, 164, 65, 0.13), rgba(217, 164, 65, 0.04));
  border-color: rgba(217, 164, 65, 0.55);
  box-shadow: 0 18px 50px -20px rgba(217, 164, 65, 0.35);
}

.preis-karte h3 { font-size: 1.5rem; margin-bottom: 4px; }

.preis-karte .preis-unter { font-size: 0.92rem; color: var(--leise); margin-bottom: 20px; }

.preis-betrag { font-family: var(--serif); font-size: 2rem; color: var(--creme); margin-bottom: 2px; }

.preis-betrag span { font-size: 1rem; color: var(--leise); font-family: var(--sans); }

.preis-jahr { font-size: 0.95rem; color: var(--goldhell); margin-bottom: 20px; }

.preis-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--gold);
  color: #241a05;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

.preis-karte ul { list-style: none; margin-top: 4px; }

.preis-karte li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 0.97rem;
}

.preis-karte li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--gold);
  font-size: 0.85rem;
}

.preis-zeile {
  max-width: 640px;
  margin: 30px auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--leise);
}

@media (max-width: 760px) { .preise-gitter { grid-template-columns: 1fr; } }

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

.faq-liste { max-width: 760px; margin: 0 auto; }

.faq-liste details { border-bottom: 1px solid rgba(245, 240, 230, 0.12); }

.faq-liste summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 4px;
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--creme);
}

.faq-liste summary::-webkit-details-marker { display: none; }

.faq-liste summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 1.3rem;
  color: var(--gold);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.faq-liste details[open] summary::after { transform: rotate(45deg); }

.faq-liste .faq-antwort { padding: 0 4px 22px; font-size: 0.98rem; max-width: 64ch; }

/* ---------- Finale ---------- */

.finale {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 120px 24px 110px;
  background:
    radial-gradient(700px 380px at 50% 20%, rgba(108, 85, 184, 0.28), transparent 70%),
    var(--nacht0);
}

.finale-logo { width: 120px; margin: 0 auto 30px; opacity: 0.95; }

.finale h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 16px; }

.finale p { max-width: 52ch; margin: 0 auto 30px; }

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

footer {
  border-top: 1px solid rgba(245, 240, 230, 0.08);
  background: #080d1d;
}

.footer-innen {
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.footer-innen nav { display: flex; gap: 20px; flex-wrap: wrap; }

.footer-innen a { color: var(--text); text-decoration: none; opacity: 0.8; }

.footer-innen a:hover { opacity: 1; text-decoration: underline; }

.footer-copy { opacity: 0.5; }

/* ---------- Rechtsseiten ---------- */

.recht-kopf {
  background: linear-gradient(180deg, var(--nacht1), var(--nacht0));
  padding: 64px 0 40px;
}

.recht-kopf .innen { max-width: 760px; }

.recht-kopf h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin-bottom: 10px; }

.recht-kopf .stand { color: var(--leise); font-size: 0.95rem; }

.recht-inhalt { padding: 40px 0 90px; }

.recht-inhalt .innen { max-width: 760px; }

.recht-inhalt h2 { font-size: 1.35rem; margin: 38px 0 12px; }

.recht-inhalt h3 { font-size: 1.1rem; margin: 26px 0 10px; }

.recht-inhalt p, .recht-inhalt ul { margin-bottom: 14px; }

.recht-inhalt ul { padding-left: 22px; }

.recht-inhalt li { margin-bottom: 8px; }

/* ---------- Scroll Reveal ---------- */

.zeigen {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.zeigen.sichtbar { opacity: 1; transform: none; }

/* ---------- Ruhe für alle, die es wünschen ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .schwebt, .sterne::after, .hero::before { animation: none; }
  .sternschnuppe { animation: none; opacity: 0; }
  .zeigen { opacity: 1; transform: none; transition: none; }
  .bento-karte, .bento-karte:hover { transform: none; transition: none; }
}

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 900px) {
  .hero-innen { grid-template-columns: 1fr; padding: 48px 24px 72px; text-align: center; }
  .hero h1, .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .hero-buehne { margin-top: 20px; }
  .hero-buehne .telefon { transform: none; }
  .abschnitt { padding: 72px 0; }
}

/* ---------- Plus Kennzeichnung (31.07.2026) ----------
   Der Funktionsteil beschrieb Gespraeche, Impulse, Mondritual und die
   Vorlagen, ohne dass irgendwo stand, dass sie zur Bezahlfassung gehoeren.
   Das erfuhr man erst in der Preistabelle weit unten. Bei einer
   Preisueberschrift "Ehrlich und einfach" ist das der teuerste Widerspruch
   der Seite. Das Zeichen steht bewusst leise neben der Ueberschrift, es soll
   einordnen und nicht bremsen. */
.plus-marke {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  padding: 2px 10px;
  border: 1px solid rgba(217, 164, 65, 0.5);
  border-radius: 999px;
  font-family: var(--sans, inherit);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold, #d9a441);
  white-space: nowrap;
  transform: translateY(-2px);
}

/* ---------- Kompakt am Handy (31.07.2026) ----------
   Gemessen: die Seite lief auf 22 Bildschirmhoehen, davon waren nur rund 11
   Text und Bild. Die andere Haelfte war Weissraum, gebaut fuer den grossen
   Bildschirm. Am Handy wirkt derselbe Abstand doppelt so gross, weil alles
   untereinander steht statt nebeneinander.
   Es geht hier also KEIN Inhalt verloren, die Seite atmet nur weniger tief.
   Die neun Telefonbilder allein trugen 6,3 Bildschirme. */
@media (max-width: 720px) {
  .abschnitt { padding: 44px 0; }
  .abschnitt-kopf { margin-bottom: 28px; }

  /* Die Geraetebilder sind hoch (780 zu 1688), jedes kostet also fast eine
     ganze Bildschirmlaenge. Etwas schmaler spart die meiste Strecke. */
  .telefon-gross  { width: 230px; }
  .telefon-mittel { width: 205px; }
  .telefon-klein  { width: 170px; }

  .reihe, .reihe.getauscht { gap: 24px; padding: 24px 0; }
  .bento { gap: 12px; }
  .laden { padding: 20px 0 4px; }
  .mitte-cta { padding: 24px 0 4px; }
}