/* ============================================================
   TEIL C — Vertriebs-Website itivara.com
   Eine Landingpage. Zielgruppe: Inhaber von Luxusreisebüros.
   Ziel: Demo-Termin. Erbt Teil A, argumentiert aber härter.
   ============================================================ */

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247,244,239,.88); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color var(--dur-2) var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--c-rule); }
.nav__in { max-width: var(--shell); margin-inline: auto; padding: 0 var(--gutter); height: 4rem; display: flex; align-items: center; gap: var(--s-6); }
.nav__brand { display: flex; align-items: center; gap: .5rem; }
.nav__mark { width: 1.75rem; height: 1.75rem; border-radius: var(--r-sm); background: var(--brand-accent); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.0625rem; padding-top: 2px; }
.nav__word { font-family: var(--font-display); font-size: 1.3125rem; letter-spacing: .06em; color: var(--c-ink); }
.nav__links { display: none; gap: var(--s-6); margin-left: auto; }
@media (min-width: 56rem) { .nav__links { display: flex; } }
.nav__links a { font-size: var(--t-sm); color: var(--c-ink-muted); }
.nav__links a:hover { color: var(--c-ink); }
.nav__cta { margin-left: auto; }
@media (min-width: 56rem) { .nav__cta { margin-left: var(--s-4); } }

/* ---------- Hero ---------- */
.c-hero { padding-block: clamp(3rem, 8vw, 6rem) 0; overflow: hidden; }
.c-hero__grid { display: grid; gap: var(--s-10); align-items: center; }
@media (min-width: 62rem) { .c-hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--s-12); } }
.c-hero__title { text-wrap: balance; }
.c-hero__title em { font-style: italic; color: var(--brand-accent-deep); }
.c-hero__sub { margin-top: var(--s-6); }
.c-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
.c-hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-8); font-size: var(--t-xs); color: var(--c-ink-muted); }
.c-hero__trust .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--c-rule-strong); }

/* ---------- Gerätemockups ---------- */
.device-stage { position: relative; display: flex; justify-content: center; align-items: flex-end; }

.mock-phone {
  width: 16rem; flex: none; border-radius: 1.875rem; background: var(--c-night-solid);
  padding: .5rem; box-shadow: var(--sh-3); position: relative; z-index: 2;
}
.mock-phone__s { border-radius: 1.5rem; overflow: hidden; background: var(--c-paper); position: relative; }
.mock-phone__notch { position: absolute; top: .375rem; left: 50%; transform: translateX(-50%); width: 4rem; height: .8125rem; border-radius: var(--r-full); background: var(--c-night-solid); z-index: 5; }

.mock-browser {
  border-radius: var(--r-lg); overflow: hidden; background: var(--c-paper-raised);
  border: 1px solid var(--c-rule-strong); box-shadow: var(--sh-3);
}
.mock-browser__bar { height: 2rem; display: flex; align-items: center; gap: .3125rem; padding: 0 .75rem; background: var(--c-paper-sunk); border-bottom: 1px solid var(--c-rule); }
.mock-browser__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-rule-strong); }
.mock-browser__url { margin-left: var(--s-3); flex: 1; height: 1.125rem; border-radius: var(--r-full); background: var(--c-paper-raised); border: 1px solid var(--c-rule); display: flex; align-items: center; padding: 0 .5rem; font-size: .625rem; color: var(--c-ink-faint); font-family: var(--font-mono); }

/* Miniinhalt (identische Klassen wie in Teil B) */
.m-hero { height: 13rem; padding: var(--s-4); display: flex; flex-direction: column; justify-content: flex-end; color: var(--c-on-night); }
.m-eyebrow { font-size: .5rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-on-night-mut); }
.m-title { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.1; margin-top: .25rem; }
.m-meta { font-size: .5625rem; color: var(--c-on-night-mut); margin-top: .4375rem; }
.m-body { padding: .875rem; }
.m-day { border: 1px solid var(--c-rule); border-radius: var(--r-sm); overflow: hidden; margin-bottom: .4375rem; background: var(--c-paper-raised); }
.m-day__img { height: 2.75rem; }
.m-day__b { padding: .4375rem .5625rem; }
.m-day__k { font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-accent-deep); }
.m-day__t { font-family: var(--font-display); font-size: .8125rem; color: var(--c-ink); line-height: 1.2; margin-top: .0625rem; }
.m-row { display: flex; align-items: center; gap: .3125rem; padding: .25rem 0; border-top: 1px solid var(--c-rule); font-size: .5rem; color: var(--c-ink-muted); }
.m-row .i { width: .5625rem; height: .5625rem; }
.m-logo { display: flex; align-items: center; gap: .3125rem; margin-bottom: auto; }
.m-logo i { width: 1.0625rem; height: 1.0625rem; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-family: var(--font-display); font-size: .5rem; font-style: normal; }
.m-logo b { font-family: var(--font-display); font-size: .6875rem; font-weight: 400; letter-spacing: .04em; }

/* ---------- Problem vs. Lösung ---------- */
.vs { display: grid; gap: var(--s-4); }
@media (min-width: 54rem) { .vs { grid-template-columns: 1fr auto 1fr; gap: var(--s-6); align-items: stretch; } }
.vs__arrow { display: none; align-self: center; color: var(--c-rule-strong); }
@media (min-width: 54rem) { .vs__arrow { display: block; } }

.vs__card { border-radius: var(--r-lg); padding: var(--s-6); display: flex; flex-direction: column; }
.vs__card--bad { background: var(--c-paper-sunk); border: 1px solid var(--c-rule); }
.vs__card--good { background: var(--c-night-solid); color: var(--c-on-night-mut); }
.vs__l { font-size: var(--t-2xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-ink-faint); }
.vs__card--good .vs__l { color: var(--brand-accent-soft); }
.vs__t { font-family: var(--font-display); font-size: 1.5rem; color: var(--c-ink); margin: var(--s-2) 0 var(--s-4); }
.vs__card--good .vs__t { color: var(--c-on-night); }

/* Anhang-Chaos */
.attach-pile { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: var(--s-4); }
.attach {
  display: inline-flex; align-items: center; gap: .375rem; font-size: var(--t-2xs);
  padding: .25rem .5rem; border-radius: var(--r-xs); background: var(--c-paper-raised);
  border: 1px solid var(--c-rule); color: var(--c-ink-muted); font-family: var(--font-mono);
}
.attach:nth-child(3n) { transform: rotate(-1.2deg); }
.attach:nth-child(4n) { transform: rotate(.9deg); }

.one-link {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4);
  border-radius: var(--r-sm); background: rgba(242,237,228,.07);
  border: 1px solid var(--c-night-rule); margin-bottom: var(--s-4);
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--c-on-night);
}

.vs__list li { display: flex; gap: var(--s-3); padding: .3125rem 0; font-size: var(--t-sm); }
.vs__card--bad .vs__list li { color: var(--c-ink-soft); }
.vs__card--bad .vs__list li::before { content: "—"; color: var(--c-ink-faint); flex: none; }
.vs__card--good .vs__list li::before { content: ""; width: 4px; height: 4px; margin-top: .5rem; transform: rotate(45deg); background: var(--brand-accent-soft); flex: none; }

/* ---------- Kernfeatures ---------- */
.feat { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 62rem) { .feat { grid-template-columns: 1fr 1.15fr; gap: var(--s-16); } }
.feat + .feat { margin-top: var(--s-24); }
.feat--flip .feat__media { order: -1; }
@media (max-width: 61.99rem) { .feat--flip .feat__media { order: 0; } }
.feat__no { font-family: var(--font-display); font-size: 2.5rem; color: var(--brand-accent-soft); line-height: 1; }
.feat__t { font-family: var(--font-display); font-size: clamp(1.625rem, 3.2vw, 2.125rem); color: var(--c-ink); margin: var(--s-3) 0 var(--s-4); line-height: 1.15; }
.feat__list { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.feat__item { display: flex; gap: var(--s-3); font-size: var(--t-sm); color: var(--c-ink-soft); }
.feat__item .i { color: var(--brand-accent); margin-top: .1875rem; }

/* Editor-Miniatur für Feature 2 */
.m-editor { display: grid; grid-template-columns: 5.5rem 1fr 6.5rem; height: 15rem; font-size: .5rem; }
.m-editor__days { background: var(--c-paper); border-right: 1px solid var(--c-rule); padding: .5rem .375rem; }
.m-editor__day { padding: .3125rem .375rem; border-radius: 3px; margin-bottom: .125rem; color: var(--c-ink-muted); line-height: 1.35; }
.m-editor__day.is-on { background: var(--c-paper-raised); border: 1px solid var(--c-rule-strong); color: var(--c-ink); }
.m-editor__mid { background: var(--c-paper-sunk); padding: .625rem; overflow: hidden; }
.m-editor__b { background: var(--c-paper-raised); border: 1px solid var(--c-rule); border-radius: 4px; padding: .375rem .5rem; margin-bottom: .25rem; display: flex; align-items: center; gap: .375rem; color: var(--c-ink-soft); }
.m-editor__b--ai { border-color: var(--brand-accent-soft); background: var(--brand-accent-wash); color: var(--brand-accent-deep); }
.m-editor__prev { background: var(--c-paper); border-left: 1px solid var(--c-rule); padding: .5rem; }
.m-editor__phone { border-radius: 6px; background: var(--c-night-solid); padding: 2px; }

/* ---------- White-Label ---------- */
.wl { background: var(--c-night-solid); color: var(--c-on-night-mut); border-radius: var(--r-lg); padding: var(--s-12) var(--s-6); }
@media (min-width: 62rem) { .wl { padding: var(--s-16); } }
.wl__row { display: flex; gap: var(--s-5); justify-content: center; flex-wrap: wrap; margin-top: var(--s-10); }
.wl__item { text-align: center; }
.wl__item .mock-phone { width: 12.5rem; }
.wl__name { font-size: var(--t-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-on-night-mut); margin-top: var(--s-4); }

/* ---------- Preise ---------- */
.price-grid { display: grid; gap: var(--s-4); }
@media (min-width: 54rem) { .price-grid { grid-template-columns: 1.1fr 1fr; gap: var(--s-5); align-items: start; } }
.price {
  border: 1px solid var(--c-rule); border-radius: var(--r-lg); padding: var(--s-8);
  background: var(--c-paper-raised); position: relative;
}
.price--featured { border-color: var(--brand-accent); box-shadow: 0 0 0 3px var(--brand-accent-wash), var(--sh-2); }
.price__flag { position: absolute; top: calc(-1 * var(--s-3)); left: var(--s-8); background: var(--brand-accent); color: #fff; font-size: var(--t-2xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; padding: .25rem .625rem; border-radius: var(--r-xs); }
.price__t { font-family: var(--font-display); font-size: 1.625rem; color: var(--c-ink); }
.price__d { font-size: var(--t-sm); color: var(--c-ink-muted); margin-top: var(--s-2); min-height: 2.75rem; }
.price__n { font-family: var(--font-display); font-size: 3rem; color: var(--c-ink); line-height: 1; margin: var(--s-5) 0 var(--s-1); }
.price__u { font-size: var(--t-xs); color: var(--c-ink-muted); }
.price__list { margin: var(--s-6) 0; display: grid; gap: var(--s-2); }
.price__list li { display: flex; gap: var(--s-3); font-size: var(--t-sm); color: var(--c-ink-soft); }
.price__list .i { color: var(--brand-accent); margin-top: .1875rem; flex: none; }
.price__note { font-size: var(--t-xs); color: var(--c-ink-faint); margin-top: var(--s-4); }

/* ---------- Demo-Buchung ---------- */
.demo { display: grid; gap: var(--s-8); }
@media (min-width: 62rem) { .demo { grid-template-columns: 1fr 25rem; gap: var(--s-12); align-items: center; } }
.cal { background: var(--c-paper-raised); border: 1px solid var(--c-rule); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-2); }
.cal__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.cal__m { font-family: var(--font-display); font-size: 1.1875rem; color: var(--c-ink); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__dow { font-size: var(--t-2xs); color: var(--c-ink-faint); text-align: center; padding-bottom: var(--s-2); letter-spacing: .06em; }
.cal__d { aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--r-sm); font-size: var(--t-xs); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.cal__d--off { color: var(--c-ink-faint); opacity: .5; }
.cal__d--free { background: var(--brand-accent-wash); color: var(--brand-accent-deep); font-weight: 500; }
.cal__d--free:hover { background: var(--brand-accent-soft); color: #fff; }
.cal__d--sel { background: var(--brand-accent); color: #fff; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-top: var(--s-5); }
.slot { padding: .4375rem; border: 1px solid var(--c-rule-strong); border-radius: var(--r-sm); font-size: var(--t-xs); color: var(--c-ink); text-align: center; font-variant-numeric: tabular-nums; }
.slot:hover { border-color: var(--c-ink); }
.slot[aria-pressed="true"] { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }

/* ---------- Footer ---------- */
.c-footer { background: var(--c-night-solid); color: var(--c-on-night-mut); padding-block: var(--s-12) var(--s-8); margin-top: var(--section-y); }
.c-footer a { color: var(--c-on-night-mut); font-size: var(--t-sm); }
.c-footer a:hover { color: var(--c-on-night); }
.c-footer__top { display: grid; gap: var(--s-8); padding-bottom: var(--s-8); border-bottom: 1px solid var(--c-night-rule); }
@media (min-width: 48rem) { .c-footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
.c-footer__h { font-size: var(--t-2xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #6C665C; margin-bottom: var(--s-3); }
.c-footer__col { display: grid; gap: var(--s-2); align-content: start; }
.c-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-5); font-size: var(--t-2xs); color: #6C665C; }

/* Auf schmalen Geräten keine hängenden Trennpunkte */
@media (max-width: 33.99rem) {
  .c-hero__trust { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .c-hero__trust .sep { display: none; }
}