/* Etappa · Website – Startseite (ergänzt style.css) */

.section { padding: clamp(64px, 10vw, 120px) 0; }
.section-alt { background: var(--bg-alt); }

.section-head { max-width: 680px; margin-bottom: clamp(36px, 6vw, 64px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(30px, 4.6vw, 46px); margin-top: 10px; }
.section-head p { margin-top: 14px; font-size: 19px; color: var(--ink-soft); }

/* Hero */

.hero { position: relative; overflow: hidden; padding-top: clamp(36px, 7vw, 80px); }

.hero-grid {
  display: grid;
  gap: clamp(36px, 6vw, 56px);
  align-items: center;
  text-align: center;
}

.hero h1 {
  font-size: clamp(42px, 8.2vw, 76px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-top: 20px;
}

.hero h1 .accent { color: var(--gold-ink); }

.hero .lead {
  margin: 22px auto 0;
  max-width: 34ch;
  font-size: clamp(18px, 2.2vw, 21px);
  color: var(--ink-soft);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}

@media (max-width: 599px) {
  .cta-row .btn { width: 100%; max-width: 360px; }
}

.hero-facts {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  font-size: 15px;
  color: var(--ink-muted);
}

.hero-facts li { display: inline-flex; align-items: center; gap: 7px; }
.hero-facts svg { width: 16px; height: 16px; color: var(--gold-ink); }

.hero-visual { position: relative; z-index: 1; display: flex; justify-content: center; }

.hero-panorama {
  position: relative;
  z-index: 0;
  margin-top: calc(-11vw - 40px);
}

.hero-panorama img { width: 100%; }

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; text-align: left; }
  .hero .lead { margin-left: 0; }
  .cta-row, .hero-facts { justify-content: flex-start; }
  .hero-copy { padding-bottom: 12vw; }
  .hero-panorama { margin-top: -12vw; }
}

/* Gerätedarstellung (nur CSS) */

.phone {
  width: min(300px, 70vw);
  margin: 0;
  padding: 2.6%;
  border-radius: 15% / 7%;
  background: #0D121B;
  box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(255, 255, 255, 0.12);
  flex: none;
}

.phone img { width: 100%; border-radius: 13% / 6%; }
.phone-hero { width: min(320px, 74vw); }

.ipad {
  container-type: inline-size;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 1.6%;
  border-radius: 3.6% / 4.8%;
  background: #0D121B;
  box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(255, 255, 255, 0.14);
}

/* Funktionen: Text und Bild im Wechsel (je ein Panel, siehe stack.css) */

.feature {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.feature-copy h3 { font-size: clamp(28px, 3.8vw, 40px); margin-top: 10px; }
.feature-copy > p { margin-top: 16px; font-size: 18px; color: var(--ink-soft); max-width: 46ch; }
.feature-copy .note { margin-top: 20px; max-width: 46ch; }

.checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; max-width: 46ch; }
.checks li { position: relative; padding-left: 32px; color: var(--ink-soft); }

.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--gold);
}

.checks li::after {
  content: "";
  position: absolute;
  left: 7.5px;
  top: 7.5px;
  width: 6px;
  height: 10px;
  border: solid #17233B;
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg);
}

.media-tile {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4%;
  padding: clamp(32px, 6vw, 56px) 6% 0;
  height: clamp(400px, 62vw, 560px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--tint-sand);
}

.media-tile .phone { width: min(290px, 64vw); }
.media-tile.duo .phone { width: min(250px, 41vw); }
.media-tile.duo .phone + .phone { margin-top: 12%; }
.tint-sea { background: var(--tint-sea); }
.tint-sage { background: var(--tint-sage); }
.tint-blush { background: var(--tint-blush); }

@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature-flip .feature-media { order: -1; }
}

/* iPad-Reiseboard (Illustration aus HTML) */

.band { background: var(--band-bg); color: var(--band-ink); }
.band .eyebrow { color: var(--gold); }
.band .section-head p { color: var(--band-soft); }
.band-caption { margin-top: 18px; text-align: center; font-size: 14px; color: var(--band-soft); }
.ipad-figure { margin: 0; }
.ipad-layout .section-head { margin-left: auto; margin-right: auto; text-align: center; }

@media (min-width: 1000px) {
  .ipad-layout { display: grid; grid-template-columns: minmax(280px, 0.7fr) 1.3fr; gap: 56px; align-items: center; }
  .ipad-layout .section-head { margin: 0; text-align: left; }
}

.board {
  --b-bg: #F4F1EA; --b-card: #FFFFFF; --b-ink: #17233B; --b-soft: #5B6880; --b-line: #E2DACA;
  --b-chip: #E8EEF6; --b-paid: #FBEFD9; --b-paid-ink: #7A5814; --b-plus: #1D63C9; --b-pill: rgba(244, 241, 234, 0.9);
  position: relative;
  overflow: hidden;
  border-radius: 2.4% / 3.2%;
  background: var(--b-bg);
  color: var(--b-ink);
  font-size: 1.6cqw;
  line-height: 1.3;
  aspect-ratio: 4 / 3;
}

@media (prefers-color-scheme: dark) {
  .board {
    --b-bg: #141B28; --b-card: #1D2739; --b-ink: #F3EFE6; --b-soft: #A5B0C3; --b-line: #2C394F;
    --b-chip: #24324A; --b-paid: #3A3220; --b-paid-ink: #E8C273; --b-plus: #4DA3FF; --b-pill: rgba(20, 27, 40, 0.85);
  }
}

.board-head { position: relative; height: 19%; }
.board-head img, .board-head .pano { position: absolute; inset: auto 0 0 0; width: 100%; }
.board-title { position: absolute; left: 3%; top: 14%; padding: 1cqw 1.8cqw; border-radius: 1.6cqw; background: var(--b-pill); }
.board-title strong { display: block; font: 800 3.4cqw/1 var(--font-display); letter-spacing: -0.02em; }
.board-title span { display: block; margin-top: 0.5em; color: var(--b-soft); }

.board-tabs { display: flex; gap: 1%; margin: 1.8% 3.5% 0; padding: 0.6%; border-radius: 99px; background: var(--b-card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.board-tabs span { flex: 1; text-align: center; padding: 0.9% 0; border-radius: 99px; color: var(--b-soft); font-weight: 600; }
.board-tabs span:first-child { background: #17233B; color: #FFFFFF; }

.board-strip { display: flex; margin: 2.2% 3.5% 0; height: 0.9cqw; border-radius: 99px; overflow: hidden; gap: 0.3%; }
.board-strip i { flex: var(--w); background: var(--c); }

.board-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3.6cqw 2.4cqw;
  margin: 3.5% 3.5% 0;
}

.stage {
  position: relative;
  background: var(--b-card);
  border-radius: 1.4cqw;
  padding: 2.2cqw 1.4cqw;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
}

.stage svg { width: 5cqw; height: 5cqw; margin: 0 auto 0.8cqw; padding: 0.8cqw; border-radius: 1cqw; background: var(--b-chip); color: var(--b-ink); }
.stage b { display: block; font-size: 1.75cqw; }
.stage small { display: block; margin-top: 0.3em; color: var(--b-soft); font-size: 1.45cqw; }
.stage .tag { display: inline-block; margin-top: 0.8cqw; padding: 0.2cqw 0.9cqw; border-radius: 99px; background: var(--b-paid); color: var(--b-paid-ink); font-size: 1.35cqw; font-weight: 600; }
.stage .next { display: block; margin-top: 0.7cqw; color: var(--b-plus); font-size: 1.35cqw; font-weight: 600; }

.stage:not(:nth-child(4n))::after {
  content: "+";
  position: absolute;
  right: -2.15cqw;
  top: 42%;
  width: 1.9cqw;
  height: 1.9cqw;
  border-radius: 50%;
  background: var(--b-plus);
  color: #FFFFFF;
  font: 700 1.5cqw/1.9cqw var(--font);
}

/* Weitere Funktionen als Kacheln */

.bento { display: grid; gap: 16px; }

.tile {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.tile h3 { font-size: 22px; margin-top: 18px; }
.tile p { margin-top: 10px; color: var(--ink-soft); }

.tile-icon {
  width: 48px;
  height: 48px;
  padding: 11px;
  border-radius: 14px;
  background: var(--tint-sand);
  color: var(--ink);
}

.tile-wide { display: grid; gap: 8px; }
.tile-shot { margin: 20px -28px -28px; height: 300px; overflow: hidden; background: var(--tint-sea); padding: 28px 28px 0; }
.tile-shot .phone { width: 240px; margin: 0 auto; }

.lang-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lang-list li { padding: 4px 12px; border-radius: 999px; background: var(--bg-alt); font-size: 15px; color: var(--ink-soft); }

@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .tile-wide { grid-row: span 2; }
}

/* Datenschutz-Versprechen */

.promise { display: grid; gap: 16px; }

.promise-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.promise-item svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--tint-sea); color: var(--sea-ink); }
.promise-item h3 { font-size: 19px; }
.promise-item p { margin-top: 4px; color: var(--ink-soft); }
.promise-foot { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; color: var(--ink-soft); }

@media (min-width: 820px) {
  .promise { grid-template-columns: repeat(2, 1fr); column-gap: 48px; }
}

/* Beta */

.beta-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #17233B;
  color: #F3EFE6;
  padding: clamp(36px, 6vw, 64px) clamp(22px, 5vw, 64px) calc(clamp(36px, 6vw, 64px) + 9%);
}

@media (prefers-color-scheme: dark) {
  .beta-card { background: #1D2739; }
}

.beta-card .panorama { position: absolute; inset: auto 0 0 0; width: 100%; opacity: 0.9; }
.beta-inner { position: relative; display: grid; gap: 36px; }
.beta-card h2 { font-size: clamp(32px, 5vw, 48px); }
.beta-card .eyebrow { color: #E8C273; }
.beta-card .lead { margin-top: 14px; color: #C6CDDA; font-size: 18px; max-width: 44ch; }
.beta-card .hint { margin-top: 18px; font-size: 14px; color: #C6CDDA; max-width: 52ch; }

.beta-card .btn-primary { background: #E8C273; color: #141B28; margin-top: 28px; }
.beta-card .btn-primary:hover { background: #F0D292; }
.beta-card :focus-visible { outline-color: #7DB7FF; }

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 18px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 40px 1fr; gap: 14px; color: #C6CDDA; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(232, 194, 115, 0.16); color: #E8C273; font-weight: 700; }
.steps strong { display: block; color: #F3EFE6; }

@media (min-width: 900px) {
  .beta-inner { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
}

/* FAQ der Startseite nutzt .faq-list aus style.css */
.faq-wrap { max-width: 820px; margin: 0 auto; }
.faq-more { margin-top: 24px; text-align: center; color: var(--ink-soft); }

/* Startseite endet mit farbigem Abschnitt – Fußzeile direkt anschließen */
.site-footer { margin-top: 0; }