/* Egg-Timer — /timer/, die Landingpage der zweiten App von Tyam Productions
   (Entwurf seit 2026-10-31, DE und EN — /timer/ und /en/timer/).

   Die Seite ist bewusst „analog egg-tracker.com" gebaut: Kopf, Telefon-
   Buehne, Szene, Karten und Duo kommen unveraendert aus app.css (Klassen mit
   `app-`-Praefix; die Buehne steht mit drei Telefonen still, das Karussell
   aus app.js braucht sechs). Hier steht nur, was die
   Startseite nicht hat — die Store-Platzhalter, das Szenenbild statt des
   Videos, die beiden Funktionskarten mit Bild und der Abschluss.
   Alle Selektoren tragen das `timer-`-Praefix. Mobile-first wie app.css:
   die Basis ist der Telefonwert, `min-width` fuegt hinzu. */

/* Tokens wie in app.css dreimal notiert: dunkel, Systemwahl hell,
   ausdrueckliche Wahl hell (AGENTS.md, „Zwei Paletten, ein Regelwerk"). */
.timer-page {
  --timer-badge-bg: #0b0710;
  --timer-badge-text: #fff;
  --timer-badge-border: rgba(255, 255, 255, 0.55);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .timer-page {
    --timer-badge-bg: #1a1322;
    --timer-badge-text: #fff;
    --timer-badge-border: rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="light"] .timer-page {
  --timer-badge-bg: #1a1322;
  --timer-badge-text: #fff;
  --timer-badge-border: rgba(0, 0, 0, 0.35);
}

/* ---------- Store-Platzhalter ----------
   Dieselbe Attrappe wie auf der Startseite vor dem Store-Start (Commit
   a1009df, 2026-09-08): Badge-Geometrie, aber OHNE die Zeichen von Apple und
   Google — beide untersagen den Nachbau ihrer Badges, die offiziellen Dateien
   gibt es nur mit Link auf das Listing. Der Wortlaut sagt „bald", die
   Wortmarken als Text sind zulaessig. Zum Store-Start durch die offiziellen
   Badges ersetzen (.app-store-badge-link wie auf der Startseite).
   Hoehe = --store-badge-h aus app.css, damit der Tausch die Geometrie des
   Kopfes nicht veraendert. */
.timer-store-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--store-badge-h, 3.5rem);
  padding: 0.35rem 1.1rem;
  border-radius: 0.65rem;
  background: var(--timer-badge-bg);
  color: var(--timer-badge-text);
  border: 1.5px solid var(--timer-badge-border);
  text-align: left;
  line-height: 1.05;
}

.timer-store-badge small {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

.timer-store-badge b {
  display: block;
  font-size: clamp(0.95rem, 3.6vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ---------- Szene: das Flyer-Motiv als Keyvisual ----------
   Steht direkt im Kopf unter den Badges (.app-szene-stage, Bodenlicht und
   Kante aus app.css) mit maximaler Ausstrahlungskraft (Andreas, 2026-11-05).
   Aus dem Druck-Proof des Flyers geschnitten (v10); der Ausschnitt ist endgueltig
   (2026-11-02) und liegt als archiv/vorlagen/egg-advisor-timer-szene.jpg. */
.timer-szene-stage {
  margin-top: clamp(1.25rem, 3.5vw, 2.25rem);
}

.timer-szene-bild {
  display: block;
  width: 100%;
  max-width: 44rem;
  height: auto;
  margin: 0 auto;
  border-radius: clamp(1rem, 3vw, 1.6rem);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-hero);
  background: #0f0620;
}

/* ---------- Screenshots-Buehne unter "Chess. Eggs. Timing." ----------
   Unter dem Keyvisual folgt der Claim als Ueberschrift, darunter die drei
   Screenshots mit der handschriftlichen Notiz "Aus dem Egg-Tracker-Universum"
   (Andreas, 2026-11-05). */
.timer-screens-stage {
  position: relative;
  width: 100%;
  max-width: 62.5rem;
  margin: clamp(2.5rem, 7vw, 3.5rem) auto 0;
  padding: 0 0 calc(var(--app-stage-edge-depth) + 0.9rem);
}

.timer-screens-stage .app-hook {
  margin-bottom: 0.5rem;
}

.timer-screens-stage .app-hook-sub {
  margin-bottom: clamp(1rem, 3vw, 1.75rem);
}

.timer-screens-wrap {
  position: relative;
  width: 100%;
  max-width: 62.5rem;
  margin: 0 auto;
}

.timer-screens-wrap .app-hero-stage {
  margin-top: 0.5rem;
}

/* Handschriftlicher Vermerk an den Screenshots: mobil rechtsbuendig ueber
   den Telefonen, ab 761px schwebend ueber dem rechten Telefon mit Pfeil. */
.timer-screens-note {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: fit-content;
  max-width: 100%;
  margin: 0 1rem 0.5rem auto;
  font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  font-size: clamp(1.35rem, 4.4vw, 1.75rem);
  font-weight: 600;
  line-height: 0.92;
  text-align: right;
  color: var(--app-hero-note, #D8B4FE);
  transform: rotate(-6deg);
  z-index: 2;
}

.timer-screens-note .app-arrow {
  display: block;
  width: clamp(2.4rem, 6vw, 3.2rem);
  height: auto;
  aspect-ratio: 90 / 70;
  margin: 0.25rem 0.5rem 0 0;
}

@media (min-width: 761px) {
  .timer-screens-wrap .app-hero-stage {
    margin-top: 1rem;
  }

  .timer-screens-note {
    position: absolute;
    right: clamp(0.5rem, 3vw, 3rem);
    top: -0.5rem;
    margin: 0;
    font-size: 1.95rem;
    transform: rotate(-10deg);
  }

  .timer-screens-note .app-arrow {
    position: absolute;
    left: -1rem;
    top: 3.8rem;
    width: 4.8rem;
    margin: 0;
  }
}

/* ---------- Funktionskarten: Schachuhr und Eieruhr ----------
   Bauart der Maskottchen-Karten der Startseite (.app-card-release): Bild und
   Text, ab 541px nebeneinander, die zweite Karte gespiegelt.
   Mobil steht die Pille vor dem Visual, ab 541px oberhalb der Kopie
   im Zweispalter, sodass der Abstand zum oberen Kartenrand auf beiden Karten
   identisch ist (Andreas, 2026-11-03). */
.timer-card-feature {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "chip"
    "visual"
    "copy";
  gap: clamp(0.75rem, 3vw, 1.5rem);
  align-items: start;
  max-width: 62.5rem;
}

.timer-card-feature + .timer-card-feature {
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
}

.timer-card-feature::before {
  background: radial-gradient(closest-side, var(--accent-12), transparent);
}

.timer-feature-chip {
  grid-area: chip;
  justify-self: start;
  width: fit-content;
  margin-bottom: 0;
}

.timer-feature-visual {
  grid-area: visual;
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
}

.timer-feature-copy {
  grid-area: copy;
}

.timer-feature-visual::before {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-22), transparent 70%);
}

.timer-feature-visual img {
  position: relative;
  width: clamp(9rem, 38vw, 13.5rem);
  height: auto;
  filter: drop-shadow(var(--shadow-mascot));
}

.timer-feature-phone {
  position: relative;
  width: clamp(9rem, 32vw, 12rem);
  aspect-ratio: 9 / 19;
  background: var(--app-phone-frame);
  border-radius: 14% / 6.6%;
  padding: 2.8%;
  box-shadow: var(--app-shadow-phone), inset 0 0 0 1.5px var(--app-phone-rim);
}

.timer-feature-phone .app-phone-glass {
  width: 100%;
  height: 100%;
  border-radius: 11% / 5.2%;
  overflow: hidden;
  background: #000;
}

.timer-feature-phone img {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
}

.timer-feature-koch {
  position: relative;
  display: grid;
  place-items: center;
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
}

.timer-feature-koch::before {
  content: '';
  position: absolute;
  width: clamp(9rem, 24vw, 13rem);
  height: clamp(9rem, 24vw, 13rem);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-22), transparent 70%);
}

.timer-feature-koch picture {
  position: relative;
  display: inline-block;
}

.timer-feature-koch img {
  position: relative;
  display: block;
  width: clamp(8.5rem, 22vw, 12rem);
  height: auto;
  filter: drop-shadow(var(--shadow-mascot));
}

.timer-feature-copy > h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 800;
  color: var(--text-strong);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.timer-feature-copy > h2 em {
  font-style: normal;
  color: var(--accent);
}

.timer-feature-copy > .app-check-list {
  margin-bottom: 0.9rem;
}

/* Häkchen-Liste Schachuhr: organischer Egg-Badge-Look */
.timer-feature-copy .app-check-list svg {
  width: 1.25rem;
  height: 1.35rem;
  padding: 0.16rem;
  border-radius: 50% 50% 44% 44% / 58% 58% 42% 42%;
  background: var(--accent-15);
  border: 1px solid var(--accent-30);
  box-shadow: 0 0 8px var(--accent-18);
  color: var(--accent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.timer-feature-copy .app-check-list li:hover svg {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 0 12px var(--accent-30);
}

@media (min-width: 541px) {
  .timer-card-feature {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "visual chip"
      "visual copy";
    column-gap: clamp(1.25rem, 3.5vw, 2.5rem);
    row-gap: 0.6rem;
    align-items: start;
  }

  .timer-card-feature .timer-feature-visual {
    align-self: center;
  }

  .timer-card-gespiegelt {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "chip visual"
      "copy visual";
  }
}

/* ---------- Egg-Tracker-Universum ---------- */
.timer-card-universum {
  max-width: 62.5rem;
}

.timer-universum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.85rem, 3vw, 1.5rem);
  margin: 0 0 clamp(1rem, 3.5vw, 1.4rem);
}

.timer-universum img {
  flex: none;
  width: clamp(2.75rem, 9vw, 4.25rem);
  height: auto;
  border-radius: 22.5%;
  box-shadow: var(--shadow-md), 0 0 18px var(--accent-15);
}

.timer-universum-logo-right {
  margin-left: auto;
}

.timer-universum p {
  flex: 1 1 auto;
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(0.95rem, 2.9vw, 1.05rem);
  line-height: 1.55;
}

.timer-universum strong {
  color: var(--text-strong);
}

.app-card .app-card-fuss a.timer-weiter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
}