/* sections.css — die Layouts der neun Abschnitte.
 * Reihenfolge folgt der Seite von oben nach unten.
 */

main { position: relative; }

.section {
  position: relative;
  z-index: 1;
  padding-block: var(--s-9);
}
.section-tight { padding-block: var(--s-8); }

.section-head { max-width: 46ch; margin-bottom: var(--s-7); }
.section-head .eyebrow { display: block; margin-bottom: var(--s-3); }
.section-head h2 + p { margin-top: var(--s-4); }

/* Wechselnder Grund, damit die Abschnitte sich absetzen, ohne zu streifen */
.section-raised { background: var(--raised); }
.section-raised + .section-raised { border-top: 1px solid var(--line-soft); }

/* ============ 01 · Ankunft ============ */

.hero {
  position: relative;
  min-height: min(96svh, 60rem);
  display: flex;
  align-items: center;
  padding-block: var(--s-10) var(--s-9);
  overflow: hidden;
}

/* Warmer Schein hinter der Headline — der einzige Verlauf der Seite */
.hero::before {
  content: "";
  position: absolute;
  left: 50%; top: -12%;
  width: min(120rem, 160vw); aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--accent-haze), transparent 62%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--s-8) var(--s-7);
  align-items: center;
  width: 100%;
}
@media (max-width: 900px) {
  .hero { min-height: 0; padding-block: var(--s-9) var(--s-8); }
  .hero-grid { grid-template-columns: 1fr; }
}

.hero h1 em {
  font-style: italic;
  color: var(--accent);
}
.hero .lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); max-width: 46ch; }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.hero-note { font-size: var(--t-xs); color: var(--ink-faint); }

/* Vertrauensanker unter dem Knopf: keine Logos, nur Fakten */
.hero-facts {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-xs); color: var(--ink-faint);
}
.hero-facts b { color: var(--ink-soft); font-weight: 500; font-family: var(--font-mono); }

/* ============ Telefon-Rahmen (mehrfach verwendet) ============ */

.phone {
  position: relative;
  width: 100%;
  max-width: 19rem;
  aspect-ratio: 9 / 19.5;
  margin-inline: auto;
  border-radius: 2.6rem;
  padding: .5rem;
  background: linear-gradient(160deg, var(--line), var(--line-soft));
  box-shadow: var(--shadow-lg);
}
.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 2.15rem;
  overflow: hidden;
  background: var(--ground);
}
.phone-screen img,
.phone-screen video,
.phone-screen iframe {
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
}
.phone::before {   /* Aussparung */
  content: "";
  position: absolute;
  left: 50%; top: .95rem;
  width: 28%; height: 1.1rem;
  transform: translateX(-50%);
  background: var(--ground);
  border-radius: var(--radius-pill);
  z-index: 2;
}
.phone-lg { max-width: 21.5rem; }
.phone-tilt { transform: rotate(-3.5deg); }

/* Zwei Telefone versetzt (Abschnitt 03) */
.phone-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  align-items: start;
}
.phone-pair > :first-child { transform: translateY(var(--s-6)) rotate(-3deg); }
.phone-pair > :last-child  { transform: rotate(3deg); }
@media (max-width: 560px) {
  .phone-pair { grid-template-columns: 1fr; max-width: 15rem; margin-inline: auto; }
  .phone-pair > * { transform: none !important; }
}

/* ============ Zweispalter, alternierend ============ */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8) var(--s-7);
  align-items: center;
}
.split-media-first > .split-text { order: 2; }
.split-media-first > .split-media { order: 1; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--s-6); }
  .split-media-first > .split-text,
  .split-media-first > .split-media { order: initial; }
}

/* Aufzaehlung mit Haken — bewusst schlicht */
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.ticks li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-sm); color: var(--ink-soft); }
.ticks svg { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .28rem; color: var(--accent); }
.ticks b { color: var(--ink); font-weight: 600; }

/* ============ 02 · Merkmal-Raster ============ */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: var(--s-4);
}
.feature {
  padding: var(--s-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--raised);
  transition: border-color var(--dur) var(--ease-soft), transform var(--dur) var(--ease-out);
}
.feature:hover { border-color: var(--accent-dim); transform: translateY(-2px); }
.feature .icon {
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--accent-dim);
  color: var(--accent);
  margin-bottom: var(--s-4);
}
.feature .icon svg { width: 1.25rem; height: 1.25rem; }
.feature h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--t-base); letter-spacing: 0; margin-bottom: var(--s-2); }
.feature p { font-size: var(--t-sm); color: var(--ink-soft); }

/* ============ Kartenstil-Showreel ============ */

.reel-wrap { position: relative; }
.reel {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: var(--s-2) var(--s-5);
  scrollbar-width: thin;
}
.reel figure {
  flex: none;
  width: min(15rem, 62vw);
  margin: 0;
  scroll-snap-align: center;
}
.reel img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  filter: saturate(.9);
  transition: filter var(--dur) var(--ease-soft), transform var(--dur) var(--ease-out);
}
.reel figure:hover img { filter: saturate(1.05); transform: translateY(-3px); }
.reel figcaption {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.reel-controls { display: flex; gap: var(--s-2); margin-top: var(--s-3); }

/* Kanten ausblenden, damit die Reihe nicht abgeschnitten wirkt */
.reel-wrap::after,
.reel-wrap::before {
  content: "";
  position: absolute; top: 0; bottom: 3.5rem;
  width: 4rem;
  pointer-events: none;
  z-index: 1;
}
.reel-wrap::before { left: 0;  background: linear-gradient(90deg, var(--ground), transparent); }
.reel-wrap::after  { right: 0; background: linear-gradient(270deg, var(--ground), transparent); }
.section-raised .reel-wrap::before { background: linear-gradient(90deg, var(--raised), transparent); }
.section-raised .reel-wrap::after  { background: linear-gradient(270deg, var(--raised), transparent); }

/* ============ 05 · Reisepass-Stempel ============ */

.stamps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--s-4);
}
.stamp {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  gap: var(--s-1);
  border: 1.5px dashed var(--accent-dim);
  border-radius: var(--radius);
  color: var(--ink-soft);
  text-align: center;
  padding: var(--s-3);
  /* Der Einschnapp-Moment: leicht gedreht und blass, bis er "gesetzt" wird */
  transform: rotate(var(--stamp-rot, -4deg)) scale(.86);
  opacity: 0;
  transition: transform .5s var(--ease-out), opacity .4s var(--ease-soft), border-color .4s var(--ease-soft);
}
.stamp.is-in {
  opacity: 1;
  transform: rotate(var(--stamp-rot, -4deg)) scale(1);
  border-color: var(--accent);
}
.stamp svg { width: 1.8rem; height: 1.8rem; color: var(--accent); }
.stamp span { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; }
.stamp:nth-child(2n)   { --stamp-rot: 3deg; }
.stamp:nth-child(3n)   { --stamp-rot: -2deg; }
.stamp:nth-child(5n)   { --stamp-rot: 5deg; }

@media (prefers-reduced-motion: reduce) {
  .stamp { opacity: 1; transform: rotate(var(--stamp-rot, -4deg)); transition: none; }
}

/* ============ Zahlenreihe (Statistiken) ============ */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-block: 1px solid var(--line-soft);
}
.figure-val {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.figure-key { font-size: var(--t-xs); color: var(--ink-faint); margin-top: var(--s-2); }

/* ============ 08 · Plaene ============ */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s-4);
  align-items: start;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-5) var(--s-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--raised);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-soft);
}
.plan:hover { transform: translateY(-3px); }

/* Genau EINE Karte traegt den Akzent. Platin behaelt sein Silber
   (Hero-Feature darf eigene Identitaet haben — DESIGN.md). */
.plan-featured { border-color: var(--accent); box-shadow: var(--shadow-md); }
.plan-platin   { border-color: color-mix(in srgb, var(--platin) 45%, transparent); }

.plan-badge {
  position: absolute;
  top: calc(var(--s-3) * -1);
  left: var(--s-5);
  padding: .22rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.plan-platin .plan-badge { background: var(--platin); color: #1B140D; }

.plan h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--t-lg); letter-spacing: 0; }
.plan-price {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan-price small { font-size: .42em; font-family: var(--font-body); color: var(--ink-faint); font-weight: 400; }
.plan-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.plan-lines li { display: flex; gap: var(--s-3); font-size: var(--t-sm); color: var(--ink-soft); align-items: baseline; }
.plan-lines .k { color: var(--ink-faint); flex: 1; }
.plan-lines .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.plan-note { font-size: var(--t-xs); color: var(--ink-faint); }

/* ============ 09 · Download ============ */

.download-card {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: var(--s-7);
  align-items: center;
  padding: var(--s-7);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at 15% 0%, var(--accent-haze), transparent 58%),
    var(--raised);
}
@media (max-width: 780px) {
  .download-card { grid-template-columns: 1fr; padding: var(--s-6) var(--s-5); text-align: left; }
  .download-qr { display: none; }
}
.store-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.download-qr {
  justify-self: end;
  width: 10.5rem;
  padding: var(--s-3);
  background: #fff;
  border-radius: var(--radius);
}
.download-qr img { width: 100%; }
.download-qr p { font-size: .6rem; color: #6B5B45; text-align: center; margin-top: var(--s-2); font-family: var(--font-mono); letter-spacing: .06em; }

/* ============ 10 · Fragen ============ */

.faq { max-width: 52rem; }
.faq details {
  border-bottom: 1px solid var(--line-soft);
}
.faq summary {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-4);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--t-base);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  margin-left: auto;
  width: .62rem; height: .62rem;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
  flex: none;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > div { padding-bottom: var(--s-5); color: var(--ink-soft); font-size: var(--t-sm); max-width: var(--measure); }
.faq details > div > * + * { margin-top: var(--s-3); }
.faq ol, .faq ul { padding-left: 1.2rem; }
.faq li { margin-bottom: var(--s-2); }

/* ============ Rechtstext-Seiten ============ */

.prose { max-width: var(--measure); padding-block: var(--s-8); }
.prose h1 { font-size: var(--t-3xl); margin-bottom: var(--s-5); }
.prose h2 { font-size: var(--t-xl); margin-block: var(--s-6) var(--s-3); }
.prose h3 { font-size: var(--t-lg); margin-block: var(--s-5) var(--s-2); }
.prose p, .prose li { color: var(--ink-soft); font-size: var(--t-sm); }
.prose p + p { margin-top: var(--s-3); }
.prose ul, .prose ol { padding-left: 1.2rem; margin-block: var(--s-3); }
.prose li { margin-bottom: var(--s-2); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin-block: var(--s-4); }
.prose th, .prose td { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.prose th { color: var(--ink-faint); font-weight: 500; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; }

/* ============ Platzhalter fuer fehlende Screenshots ============
 * Ehrlicher als eine verzerrte Illustration im Telefonrahmen: es ist sichtbar,
 * dass hier ein Bild fehlt, und die Seite wirkt trotzdem fertig.
 * Sobald der Screenshot da ist, ersetzt ein <img> den ganzen Block. */

.phone-placeholder {
  width: 100%; height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-5);
  text-align: center;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 11px, var(--accent-haze) 11px 12px),
    var(--sheet);
}
.phone-placeholder svg { width: 2.6rem; height: 2.6rem; color: var(--accent); opacity: .8; }
.phone-placeholder b {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-soft);
}
.phone-placeholder span {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}