/* Frag die Karte - Apple-Look und Bewegung
   Wird nach styles.css geladen und überschreibt dort Größen, Radien und Abstände.
   Scroll-Effekte nutzen CSS-Scroll-Timelines. Browser ohne Unterstützung zeigen alles ruhig an. */

:root {
  --r-card: 28px;
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  interpolate-size: allow-keywords;
}
body { letter-spacing: -0.011em; }
html { scroll-padding-top: 72px; }

/* Header: dünn und gläsern */
.site-header {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  view-transition-name: site-header;
}
.nav { height: 56px; }
.nav-links { font-size: 0.875rem; gap: 26px; }

section { padding-block: 128px; }
@media (max-width: 767px) { section { padding-block: 80px; } }
.h2 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); letter-spacing: -0.04em; line-height: 1.05; }

/* Wörter aus der Unschärfe */
.w { display: inline-block; }
.accent { color: var(--accent); }

/* Link im Apple-Stil */
.link-more { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 600; font-size: 1.0625rem; text-decoration: none; }
.link-more .icon { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.link-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-more:hover .icon { transform: translateX(3px); }

/* ---------- Für Lokale: zentrierter Hero ---------- */
.hero-center { padding-block: 64px 112px; text-align: center; }
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero-center h1 { font-size: clamp(2.75rem, 7vw, 5.5rem); letter-spacing: -0.045em; line-height: 1.02; max-width: 12ch; margin-top: 24px; }
.hero-center .hero-sub { max-width: 40ch; margin-inline: auto; }
.hero-center .hero-cta { justify-content: center; align-items: center; gap: 16px 28px; }

.showcase {
  position: relative; margin-top: 64px; padding: 72px 24px;
  border-radius: var(--r-card); overflow: hidden;
  display: grid; place-items: center; text-align: left;
  background:
    radial-gradient(45% 55% at 12% 18%, var(--sky), transparent 70%),
    radial-gradient(50% 60% at 88% 88%, var(--peach), transparent 70%),
    radial-gradient(40% 45% at 88% 12%, var(--butter), transparent 70%),
    var(--mint);
}
.showcase .phone-stage { background: none; padding: 0; }
.showcase .phone { height: min(620px, 78dvh); }
.callouts { position: absolute; inset: 0; pointer-events: none; }
.co {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; white-space: nowrap;
  font-size: 0.9375rem; font-weight: 500; text-align: left;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--shadow);
}
.co .icon { width: 18px; height: 18px; color: var(--accent); }
.co-1 { left: 6%; top: 22%; }
.co-2 { left: 10%; top: 64%; }
.co-3 { right: 6%; top: 30%; }
.co-4 { right: 9%; top: 70%; }
@media (max-width: 1060px) {
  .showcase { padding: 32px 16px; gap: 24px; margin-top: 48px; }
  .callouts { position: static; order: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .co { position: static; font-size: 0.8125rem; padding: 8px 12px; }
}

/* Großer Satz, der beim Scrollen aufleuchtet */
.statement { font-size: clamp(1.875rem, 4.2vw, 3.5rem); line-height: 1.12; letter-spacing: -0.035em; font-weight: 600; max-width: 22ch; view-timeline-name: --statement; }
.why .claims { margin-top: 72px; }

/* Ablauf: Linie füllt sich Schritt für Schritt */
.step::after {
  content: ""; position: absolute; left: 23px; top: 52px; bottom: 6px; width: 1px;
  background: var(--accent); transform-origin: top; transform: scaleY(0); display: none;
}
.step:last-child::after { display: none !important; }
.step-icon { position: relative; z-index: 1; }

/* Bento und Karten etwas weicher */
.cell { padding: 36px; }
@media (max-width: 860px) { .cell { padding: 24px; } }
.faq details { border-radius: 20px; }

/* ---------- Startseite: zentrierte Suche ---------- */
.finder-panel {
  text-align: center; display: flex; flex-direction: column; align-items: center;
  padding: 88px 48px 120px;
}
.finder-panel h1 { font-size: clamp(2.75rem, 6.5vw, 5rem); max-width: 12ch; letter-spacing: -0.045em; line-height: 1.02; }
.finder-sub { margin-inline: auto; }
.finder { padding-top: 0; }
.finder-grid { row-gap: 40px; }
.searchbar {
  grid-column: 1 / -1; width: 100%; max-width: 920px; margin: -48px auto 0;
  position: sticky; top: 66px; z-index: 15;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  view-transition-name: searchbar;
}
.filters { top: 172px; }
@media (max-width: 860px) {
  .finder-panel { padding: 48px 20px 80px; }
  .searchbar { position: relative; top: auto; margin-top: -48px; }
  .finder-grid { row-gap: 20px; }
}

.venue { transition: border-color 0.3s var(--ease), transform 0.5s var(--ease-ios), box-shadow 0.5s var(--ease-ios); }
.venue:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line); }
.venue-open:active, .chip:active { transform: scale(0.96); }

/* Karten gleiten beim Filtern */
:root { view-transition-name: none; }
::view-transition-group(*) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0.3s; }

/* Detailansicht: iOS-Sheet */
.sheet-dialog::backdrop { background: rgb(17 21 19 / 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* FAQ klappt weich auf */
@supports selector(::details-content) {
  .faq details::details-content {
    block-size: 0; overflow-y: clip;
    transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  .w {
    opacity: 0; filter: blur(12px); transform: translateY(0.2em);
    animation: blur-in 1.1s var(--ease) forwards;
    animation-delay: calc(var(--wi) * 70ms + 80ms);
  }
  @keyframes blur-in { to { opacity: 1; filter: blur(0); transform: none; } }

  .venues.is-first > li { animation: card-in 0.8s var(--ease) both; animation-delay: calc(var(--i) * 60ms + 350ms); }
  @keyframes card-in { from { opacity: 0; transform: translateY(28px) scale(0.98); } }

  .sheet-dialog[open] .vd { animation: sheet-in 0.55s var(--ease-ios); }
  .sheet-dialog[open]::backdrop { animation: fade-in 0.35s ease-out; }
  .sheet-dialog.is-closing .vd { animation: sheet-out 0.28s ease-in forwards; }
  .sheet-dialog.is-closing::backdrop { animation: fade-out 0.28s ease-in forwards; }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(48px) scale(0.97); } }
  @keyframes sheet-out { to { opacity: 0; transform: translateY(32px) scale(0.98); } }
  @keyframes fade-in { from { opacity: 0; } }
  @keyframes fade-out { to { opacity: 0; } }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Handy kippt beim Scrollen auf */
    .showcase .phone {
      animation: phone-tilt linear both; animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
    @keyframes phone-tilt { from { transform: perspective(1400px) rotateX(24deg) translateY(48px) scale(0.9); } to { transform: none; } }

    .co-1, .co-2 { animation: co-left linear both; animation-timeline: view(); animation-range: entry 30% cover 50%; }
    .co-3, .co-4 { animation: co-right linear both; animation-timeline: view(); animation-range: entry 30% cover 50%; }
    @keyframes co-left { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
    @keyframes co-right { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }

    /* Wörter leuchten nacheinander auf */
    .wl {
      animation: word-light linear both; animation-timeline: --statement;
      animation-range: cover calc(18% + var(--wi) * 1.5%) cover calc(24% + var(--wi) * 1.5%);
    }
    @keyframes word-light { from { opacity: 0.15; } to { opacity: 1; } }

    /* Ablauf-Linie */
    .step::after { display: block; animation: line-fill linear both; animation-timeline: view(); animation-range: cover 35% cover 60%; }
    @keyframes line-fill { to { transform: scaleY(1); } }

    /* Startseite: Kopfbereich tritt beim Wegscrollen zurück */
    .finder-panel { animation: panel-out linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
    @keyframes panel-out { to { transform: scale(0.95); opacity: 0.35; } }

    /* Bento-Zellen wachsen leicht ins Bild */
    .cell { animation: cell-in linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    @keyframes cell-in { from { transform: scale(0.94); } to { transform: none; } }
  }
}