/* Startseite, Funktionen, Preise (Bereich "main"): Hero, Tagesleiste und Abstände der
   einzelnen Abschnitte. Wird nach site.css geladen. */

/* Tagesleiste 08-19 Uhr auf blauem Band: Achse mit Kammzähnen, Ereignisse als lange Zähne.
   <div class="day"> <div class="day-side">Ereignis davor</div> <div class="day-track"> <div class="day-axis"></div>
   <ol class="day-hours">..</ol> <div class="day-ev day-up" style="--t:1">..</div> (--t = Stunden ab 08:00) </div>
   <div class="day-side">Ereignis danach</div> </div>. Unter 75rem senkrecht. */
.day { --tick: currentColor; }
.day-ev time { display: block; font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.day-ev b { display: block; margin-top: .35rem; font-size: 1.0625rem; line-height: 1.3; }
.day-ev p { margin-top: .3rem; font-size: .9375rem; line-height: 1.5; }
.day-ev .day-free { display: inline-block; margin-top: .6rem; padding: .3rem .8rem; border-radius: 999px; background: var(--sun); color: var(--night); font-weight: 800; font-size: .9375rem; white-space: nowrap; }
.day-ev::after { content: ""; position: absolute; width: 14px; height: 14px; border: 3px solid var(--sun); border-radius: 50%; background: var(--blue); }
.day-axis, .day-hours, .day-pause-mark { display: none; }
@media (max-width: 74.99rem) { /* senkrecht: Achse links, Zähne nach rechts */
  .day { margin-left: .4rem; border-left: 3px dotted var(--tick); }
  .day-ev { position: relative; padding: 0 0 2.5rem 2rem; max-width: 34rem; }
  .day-ev::after { left: -9.5px; top: .55rem; }
  .day-side:last-child .day-ev { padding-bottom: .25rem; }
}
@media (min-width: 75rem) {
  .day { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 11rem; height: 31rem; }
  .day-side, .day-track { position: relative; }
  .day-side::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 3px dotted var(--tick); }
  .day-axis {
    display: block; position: absolute; left: 0; right: 0; top: 50%; height: 18px; border-top: 3px solid var(--tick); border-right: 2px solid var(--tick);
    background:
      linear-gradient(90deg, var(--tick) 2px, transparent 0) 0 0 / calc(100% / 11) 18px repeat-x,
      linear-gradient(90deg, var(--tick) 1px, transparent 0) 0 0 / calc(100% / 44) 8px repeat-x;
  }
  .day-hours { display: block; }
  .day-hours li { position: absolute; top: calc(50% + 1.5rem); left: calc(var(--h) / 11 * 100%); font-weight: 700; font-size: .875rem; font-variant-numeric: tabular-nums; transform: translateX(.4rem); }
  .day-pause-mark { display: block; position: absolute; top: calc(50% - 3px); left: calc(5 / 11 * 100% + 2px); width: calc(100% / 11 - 2px); height: 22px; border-top: 3px dotted var(--sun); background: var(--blue); }
  .day-ev { position: absolute; left: calc(var(--t, 0) / 11 * 100%); width: min(12.5rem, 27%); padding-left: .9rem; border-left: 2px solid var(--tick); }
  .day-up { bottom: 50%; padding-bottom: 2.25rem; }
  .day-up::after { left: -8px; bottom: -8px; }
  .day-down { top: calc(50% + 3px); padding-top: 3.4rem; }
  .day-down::after { left: -8px; top: -11px; }
  .day-side .day-ev { width: calc(100% - 1.5rem); }
}

/* Startseite */
.hero { position: relative; overflow: hidden; background: var(--sky-50); }
.hero.wave-bottom { padding-bottom: calc(clamp(3rem, 1.5rem + 4vw, 6rem) + var(--wave)); }
.hero::before { content: ""; position: absolute; top: -18rem; right: -16rem; width: min(62rem, 120vw); height: 52rem; border-radius: 38% 62% 44% 56% / 58% 36% 64% 42%; background: var(--sky-100); }
.hero::after { content: ""; position: absolute; top: -3.5rem; right: -3.5rem; width: 7rem; height: 7rem; border-radius: 50%; background: var(--sun); }
@media (min-width: 64rem) { .hero::after { top: -5rem; right: -5rem; width: 13rem; height: 13rem; } }
.hero-in { position: relative; z-index: 1; display: grid; gap: 2rem; align-items: center; padding-top: clamp(2rem, 1rem + 4vw, 5rem); }
.hero h1 { max-width: 11ch; }
.hero .lead { margin-top: 1.5rem; max-width: 30em; }
.hero .actions { margin-top: 2.25rem; }
.hero .note { margin-top: 1.1rem; }
.hero-media { position: relative; }
.hero-media .blob { inset: 8% 2% 0 10%; background: var(--sky); }
@media (min-width: 64rem) { .hero-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; } .hero-media { margin-right: -4rem; } }
.path-start { position: relative; z-index: 2; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin: calc(-1.6rem - var(--wave) / 2) auto 0; border: 3px solid var(--line); border-radius: 50%; background: #fff; }
.path-start::after { content: ""; width: 1rem; height: 1rem; background: var(--blue); mask: var(--arrow) center / contain no-repeat; transform: rotate(90deg); }
.landing-path { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }
.landing-setup .card h3 { margin-top: 1rem; }
.landing-spots .card { padding: 0 0 1.75rem; overflow: hidden; }
.landing-spots .card > :not(img) { margin-inline: 1.6rem; }
.landing-spots .card img { aspect-ratio: 5 / 4; background: var(--sky-50); }
.landing-spots .card h3 { margin-top: 1.4rem; }
.landing-shot { max-width: 62rem; }
.landing-shot img { aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.landing-setup-cta { margin-top: 2.25rem; }
.landing-features, .landing-shot { margin-top: clamp(3.5rem, 2rem + 4vw, 6rem); }
.landing-more { margin-top: 2.5rem; }
.landing-fine { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.75rem; }
.landing-trust p + p { margin-top: .4rem; }
.landing-faq { max-width: 52rem; }
.landing-setup-split { align-items: start; }
.landing-phone { justify-self: center; width: min(100%, 20rem); }
@media (min-width: 64rem) { .landing-setup-split { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }

/* Funktionen */
.fn-jump { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: clamp(1rem, .5rem + 2vw, 2rem); }
.fn-jump a { padding: .5rem 1.1rem; border: 2px solid var(--line); border-radius: 999px; font-weight: 700; font-size: .9375rem; text-decoration: none; }
.fn-jump a:hover { border-color: var(--blue); }
.fn-jump + .section { padding-top: clamp(3.5rem, 2rem + 4vw, 6rem); }
.fn-split { display: grid; gap: 3rem; align-items: start; }
.fn-phone { justify-self: center; width: min(100%, 20rem); }
@media (min-width: 64rem) { .fn-split { grid-template-columns: minmax(0, 1fr) 20rem; gap: 4.5rem; } .fn-phone { position: sticky; top: 2rem; } }
.fn-rows { display: grid; gap: clamp(3.5rem, 2rem + 5vw, 7rem); }
.fn-row h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: var(--blue); }
.fn-checks { display: grid; gap: .75rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.fn-checks li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .75rem; }
.fn-checks li::before { content: ""; width: 1.5rem; height: 1.5rem; margin-top: .1rem; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%2313294B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.section-alt .fn-planned, .fn-planned { border-style: dashed; border-color: var(--sky); }
.fn-tag { justify-self: start; display: inline-block; padding: .2rem .75rem; border-radius: 999px; background: var(--sky-50); font-weight: 800; font-size: .875rem; }
.fn-not { max-width: 44rem; margin-top: 2.5rem; }

/* Preise */
.pr-plans .price { font-size: clamp(4rem, 2rem + 6vw, 7rem); }
.pr-plans .actions { margin-top: 2rem; }
.pr-year { margin-top: 1.25rem; padding: .9rem 1.1rem; border-radius: 14px; background: var(--blue-deep); }
.pr-how { margin-top: 1.75rem; font-size: .9375rem; }
.pr-tax { margin-top: 1.75rem; font-weight: 700; }
.pr-terms-more { margin-top: 2rem; }
.section-alt .card .icon-lg { margin-bottom: .5rem; }
.feature-list + .link-more { margin-top: 2rem; }