/* ==========================================================================
   watch.agencyg.de — Ergaenzungen
   --------------------------------------------------------------------------
   site.css kommt unveraendert von phone.agencyg.de und bleibt es auch, damit
   beide Seiten gleich aussehen und Aenderungen dort hier ankommen. Alles, was
   nur die Watch braucht, steht in dieser Datei.
   ========================================================================== */

/* ── Countdown ─────────────────────────────────────────────────────────── */
.countdown {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-block-start: var(--sp-5);
}
.cd-feld {
    min-inline-size: 84px;
    padding: var(--sp-4) var(--sp-3);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
}
.cd-zahl {
    display: block;
    font-size: var(--fs-6);
    font-weight: var(--fw-max);
    line-height: var(--lh-2);
    color: var(--brand-text);
    font-variant-numeric: tabular-nums;
}
.cd-name {
    display: block;
    margin-block-start: var(--sp-1);
    font-size: var(--fs-1);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx-3);
}
@media (max-width: 480px) {
    .cd-feld { min-inline-size: 68px; padding: var(--sp-3) var(--sp-2); }
}

/* Der Hinweis, sobald der Zeitpunkt vorbei ist. */
.countdown-fertig {
    margin-block-start: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    background: var(--brand-soft);
    border: 1px solid var(--line-2);
    border-radius: var(--r-3);
    color: var(--brand-text);
    font-weight: var(--fw-max);
}

/* ── Platzhalter fuer Bilder ───────────────────────────────────────────────
   Bewusst sichtbar und beschriftet: die Seite steht schon, die Bilder kommen
   zum Erscheinen dazu. Ein leerer Bereich wuerde wie ein Ladefehler wirken. */
.platzhalter {
    display: grid;
    place-items: center;
    gap: var(--sp-2);
    min-block-size: 260px;
    padding: var(--sp-6);
    text-align: center;
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    /* Eine fotografierte, dunkle Metallflaeche liegt darunter. Sie zeigt
       bewusst kein Geraet: wie die Watch aussieht, weiss heute niemand. Der
       Bereich wirkt dadurch gestaltet statt leer, und der Satz darauf sagt
       trotzdem offen, dass die Bilder noch fehlen. */
    background:
        linear-gradient(rgba(11, 13, 18, 0.05), rgba(11, 13, 18, 0.5)),
        url("/bilder/watch-textur.jpg") center / cover no-repeat,
        var(--surface);
    color: var(--tx-2);
    overflow: hidden;
}
html.light .platzhalter {
    background:
        linear-gradient(rgba(255, 253, 248, 0.82), rgba(255, 253, 248, 0.9)),
        url("/bilder/watch-textur.jpg") center / cover no-repeat,
        var(--surface);
    color: var(--tx-3);
}
.platzhalter-zeichen { font-size: var(--fs-5); color: var(--brand-text); opacity: .8; }
.platzhalter-text { font-size: var(--fs-2); max-inline-size: 34ch; }

.platzhalter-reihe {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.platzhalter-reihe .platzhalter { min-block-size: 180px; }

/* ── Zeile mit Eckdaten ────────────────────────────────────────────────── */
.eckdaten { display: grid; gap: var(--sp-2); }
.eckdaten div { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; }
.eckdaten dt { color: var(--tx-3); font-size: var(--fs-2); min-inline-size: 12ch; }
.eckdaten dd { margin: 0; font-weight: var(--fw-max); }

/* ── Die Uhr im Kopfbereich ─────────────────────────────────────────────
   Steht dort, wo auf phone.agencyg.de das Produktfoto liegt. Es ist aber
   kein Foto, sondern die laufende Oberflaeche: dadurch in jeder Aufloesung
   scharf und in beiden Farbschemata richtig, ohne zweites Bild. */
.hero-uhr {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 420px;
}
.hero-uhr iframe {
    inline-size: 420px;
    block-size: 660px;
    max-inline-size: 100%;
    /* Der Rahmen selbst ist durchsichtig. Ein durchsichtiger Rahmen zeigt
       aber nicht die Seite dahinter, sondern die weisse Grundflaeche des
       Browsers - im dunklen Modus stand deshalb ein weisses Feld um die Uhr.
       Genommen wird die Farbe der Karte, in der die Uhr steht, nicht die
       der Seite - sonst zeichnet sich ein dunkleres Rechteck darin ab. */
    background: var(--surface);
}
@media (max-width: 900px) {
    .hero-uhr { min-block-size: 340px; }
}

/* ── Knoepfe unter der Demo ─────────────────────────────────────────────
   Dieselbe Bauart wie die Demo-Knoepfe auf phone.agencyg.de, damit beide
   Seiten sich gleich anfuehlen. */
.demo-taste {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    block-size: var(--btn-h-md);
    padding-inline: var(--btn-pad-md);
    font-family: inherit;
    font-size: var(--fs-2);
    font-weight: var(--fw-head);
    border-radius: var(--r-2);
    border: 1px solid var(--line-2);
    background: transparent;
    color: var(--tx);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.demo-taste:hover {
    border-color: var(--brand-line);
    background: var(--brand-soft);
}
/* Eingeschaltet, nicht nur beruehrt: der Zustand muss auch dann noch zu
   sehen sein, wenn der Zeiger woanders ist. */
.demo-taste.an {
    background: var(--brand);
    color: var(--brand-ink);
    border-color: transparent;
}
.demo-taste:focus-visible {
    outline: 2px solid var(--brand-line);
    outline-offset: 2px;
}

/* Der Rahmen der Demo bekommt etwas Luft nach unten, damit die Knoepfe
   nicht am Armband kleben. */
#phone-mount { margin-block-end: var(--sp-2); }

/* ── Startbereich auf schmalen Geraeten ─────────────────────────────────────
   site.css setzt das Startraster unterhalb von 1200 Pixeln fest auf zwei
   Spalten. Gemeint war damit der Bereich zwischen 900 und 1150, wo sonst ein
   Knopf allein in die zweite Zeile rutschte - die Regel greift aber bis
   hinunter aufs Handy. Dort standen Text und Produktbild dann in zwei Spalten
   zu je etwa 130 Pixeln nebeneinander, und vom Bild blieb ein Daumennagel.

   Unterhalb von 900 gilt hier wieder, was die Grundregel ohnehin vorsieht:
   untereinander. site.css bleibt unangetastet, damit sie weiter unveraendert
   von phone.agencyg.de kommen kann. */
@media (max-width: 899px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .hero-visual { inline-size: 100%; max-inline-size: 460px; margin-inline: auto; }
}

/* ── Kopfbereich: keine Kachel, sondern Los Santos dahinter ────────────────
   phone.agencyg.de und pad.agencyg.de zeigen ihr Geraet nicht in einem
   grauen Kasten, sondern vor einer weich auslaufenden Skyline
   (site.css, .hero3d::before). Genau dasselbe Bild, dieselbe Deckkraft und
   dieselbe Maske stehen jetzt auch hier - nur haengen sie an .hero-visual,
   weil die Watch-Seite kein hero3d.js benutzt.

   Die Maske ist der ganze Trick: ein hartes Rechteck hinter dem Geraet
   waere wieder nur eine Kachel in anderer Farbe. Der Verlauf laesst das
   Bild zum Rand hin verschwinden, die Uhr bleibt der Blickfang. */
.hero-visual {
    position: relative;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.hero-visual::before {
    content: "";
    position: absolute;
    /* groesser als der Behaelter, damit der weiche Rand Platz hat */
    inset: -14% -12%;
    z-index: 0;
    pointer-events: none;
    background: url("/img/hero-hintergrund-gta.webp") center center / cover no-repeat;
    opacity: .62;
    /* Der Radius muss kleiner als der halbe Kasten sein, sonst liegt das
       Ende des Verlaufs ausserhalb und es bleibt ein hartes Rechteck. */
    -webkit-mask-image: radial-gradient(ellipse 50% 52% at 50% 45%, #000 0%, #000 26%, rgba(0,0,0,.5) 66%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 52% at 50% 45%, #000 0%, #000 26%, rgba(0,0,0,.5) 66%, transparent 100%);
}
.hero-visual img { position: relative; z-index: 1; }

@media (max-width: 900px) {
    .hero-visual::before { background-image: url("/img/hero-hintergrund-gta@800.webp"); }
}
@media (prefers-reduced-motion: no-preference) {
    .hero-visual::before { animation: heroGrundAuf .9s ease-out; }
}
@keyframes heroGrundAuf { from { opacity: 0 } }

/* ── Nur dunkel ────────────────────────────────────────────────────────────
   phone.agencyg.de und pad.agencyg.de haben den hellen Modus abgeschafft,
   diese Seite zieht nach. Das ist keine Geschmacksfrage: die Uhr ist ein
   dunkles Geraet vor einer naechtlichen Skyline. Auf hellem Grund wurde aus
   dem Bild ein grauer Fleck, und die Demo im Rahmen haette dieselbe Farbe
   noch einmal mitgebracht.

   Erzwungen wird es an der Wurzel, damit light-dark() in tokens.css gar
   nicht erst umschalten kann - auch dann nicht, wenn irgendwo noch ein
   Schalter light-mode setzt. */
:root, html, html.light-mode, html[data-theme="light"] {
    color-scheme: dark !important;
}

/* ── Vollbild ──────────────────────────────────────────────────────────────
   Der Rahmen der Demo geht auf die ganze Flaeche. Die Uhr setzt sich darin
   von allein in die Mitte, deshalb genuegt es, dem Rahmen Platz zu geben. */
#phone-mount:fullscreen {
    inline-size: 100vw;
    block-size: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    margin: 0;
}
#phone-mount:fullscreen iframe {
    inline-size: 100vw !important;
    block-size: 100vh !important;
}

/* ── Erinnerung: Anmeldung direkt auf der Seite ────────────────────────────
   Vorher fuehrte der Knopf in den Shop. Die Adresse wird jetzt hier
   aufgenommen und an dieselbe Route weitergereicht. Feld und Knopf teilen
   sich eine Zeile, ab Handybreite untereinander. */
.erinnerung-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
    align-items: stretch;
    margin-block-start: var(--sp-5);
}
.erinnerung-form .btn { margin: 0; }
/* display:flex schlaegt das hidden-Attribut aus dem Browser-Stylesheet.
   Ohne diese Zeile bleibt das Formular nach der Anmeldung stehen. */
.erinnerung-form[hidden] { display: none; }

.erinnerung-feld {
    flex: 1 1 22rem;
    max-inline-size: 26rem;
    min-inline-size: 0;
    padding-inline: var(--sp-4);
    padding-block: 0;
    block-size: var(--btn-h-lg, 3rem);
    color: var(--tx);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    font-family: inherit;
    font-size: var(--fs-3);
    transition: border-color .18s ease, background-color .18s ease;
}
.erinnerung-feld::placeholder { color: var(--tx-3); }
.erinnerung-feld:hover { border-color: var(--line-2); }
.erinnerung-feld:focus-visible {
    outline: none;
    border-color: var(--brand-text);
    background: var(--surface-2);
}

/* Honigtopf. Nicht display:none, sonst fuellen ihn manche Bots trotzdem und
   Screenreader stolpern anders darueber als gedacht. */
.erinnerung-falle {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px; border: 0;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
}

.erinnerung-hinweis {
    margin-block-start: var(--sp-3);
    min-block-size: 1.4em;
    font-size: var(--fs-2);
    color: var(--tx-2);
}
.erinnerung-hinweis[data-art="erfolg"] { color: var(--brand-text); font-weight: var(--fw-ui); }
.erinnerung-hinweis[data-art="fehler"] { color: var(--danger, #ff6b6b); }

.erinnerung-nurlesbar {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px; border: 0;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 560px) {
    .erinnerung-form { flex-direction: column; }
    .erinnerung-feld { max-inline-size: none; }
}