/* Schriften liegen auf dem eigenen Server: Ein Abruf bei Google Fonts gäbe
   jede Besucher-IP an Google weiter. Inter und JetBrains Mono, je Latein und
   Kyrillisch (für RU und BG), unter der SIL Open Font License 1.1. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('schrift/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('schrift/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('schrift/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('schrift/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('schrift/jetbrains-mono-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('schrift/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('schrift/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('schrift/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Aufbau: eine ruhige, mittige Spalte auf einem Bildschirm — Logo, Aufmacher,
   Countdown, Link; oben rechts der Sprachwähler wie im Shop. Farben und Maße
   aus packages/ui/src/styles/theme.css; die Marke ist bewusst nur hell. */
:root {
  --bg: #f7f7f5;
  --paper: #ffffff;
  --ink: #1f2527;
  --ink-soft: #516064;
  --heading: #182022;
  --heading-75: rgba(24, 32, 34, 0.75);
  --nav-ink: #314043;
  --mint-15: rgba(157, 202, 198, 0.15);
  --mint-18: rgba(157, 202, 198, 0.18);
  --mint-extra-deep: #547673;
  --akzent-schleier: rgba(155, 199, 183, 0.74);
  --line: rgba(24, 32, 34, 0.1);
  --verlauf: linear-gradient(135deg, #f7cce8 0%, #9dcac6 100%);
  --verlauf-zart: linear-gradient(135deg, rgba(247, 204, 232, 0.25), rgba(157, 202, 198, 0.18));
  --streifen: linear-gradient(90deg, rgba(157, 202, 198, 0.92), rgba(247, 204, 232, 0.92));
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-pill: 999px;
  --schatten-sm: 0 10px 30px rgba(18, 28, 31, 0.05);
  --schatten-md: 0 20px 55px rgba(18, 28, 31, 0.08);
  --schatten-knopf: 0 14px 34px rgba(24, 32, 34, 0.08);
  --schatten-lg: 0 30px 90px rgba(18, 28, 31, 0.1);
  --font: 'Inter', 'Segoe UI', Arial, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rand: clamp(16px, 4vw, 48px);
  color-scheme: light;
}

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--mint-extra-deep); outline-offset: 3px; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.seite { min-height: 100%; display: flex; flex-direction: column; }
.streifen { flex: none; height: 8px; background: var(--streifen); }

/* ── Sprachwähler wie im Shop (sprachwahl.tsx): Globus und Kürzel, darunter
   das Dropdown mit Kreisflaggen; geöffnet per Klick, nie per Hover ── */
.leiste {
  display: flex; justify-content: flex-end;
  padding-top: 10px;
  padding-left: max(var(--rand), env(safe-area-inset-left, 0px));
  padding-right: max(var(--rand), env(safe-area-inset-right, 0px));
}
.sprachwahl { position: relative; }
.sprache-knopf {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 10px;
  border: 0; border-radius: var(--r-pill); background: transparent;
  font: 600 12px/1 var(--font); letter-spacing: 0.03em; color: var(--nav-ink);
  cursor: pointer; transition: background-color 0.2s, color 0.2s;
}
.sprache-knopf:hover, .sprache-knopf[aria-expanded="true"] { background: var(--mint-15); color: var(--mint-extra-deep); }
.sprache-liste {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 10;
  min-width: 176px; padding: 4px 0;
  background: rgba(255, 255, 255, 0.98); border: 1px solid var(--line);
  border-radius: var(--r-sm); box-shadow: var(--schatten-md); overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.sprache-liste.offen { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.sprache-option {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 44px; padding: 0 16px; box-sizing: border-box;
  border: 0; background: transparent; text-align: left;
  font: 500 0.92rem/1.2 var(--font); color: var(--heading); white-space: nowrap;
  cursor: pointer; transition: background-color 0.15s ease;
}
.sprache-option:hover, .sprache-option:focus-visible { background: var(--mint-18); }
.sprache-option[aria-current="true"] { font-weight: 700; background: var(--verlauf-zart); cursor: default; }
.flagge { width: 22px; height: 22px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.flagge-de { background: linear-gradient(180deg, #111 33.33%, #dd0000 33.33% 66.66%, #ffce00 66.66%); }
.flagge-bg { background: linear-gradient(180deg, #fff 33.33%, #00966e 33.33% 66.66%, #d62612 66.66%); }
.flagge-ru { background: linear-gradient(180deg, #fff 33.33%, #0039a6 33.33% 66.66%, #d52b1e 66.66%); }

/* ── Bühne ── */
.buehne {
  flex: 1 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(28px, 5vh, 48px);
  box-sizing: border-box; width: 100%; max-width: 820px; margin-inline: auto;
  padding-top: clamp(16px, 4vh, 48px);
  padding-bottom: clamp(32px, 7vh, 80px);
  padding-left: max(var(--rand), env(safe-area-inset-left, 0px));
  padding-right: max(var(--rand), env(safe-area-inset-right, 0px));
  text-align: center;
}
.marke {
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--heading); font-weight: 700; font-size: clamp(17px, 2vw, 20px); letter-spacing: 0.01em;
}
.marke img { width: clamp(52px, 7vw, 68px); height: auto; }
/* Jeder Satz eine Zeile, sobald das Gerät es zulässt. Die Spalte endet bei
   724 px, der längste Satz („Innovation. Knowledge. Future.") misst 14,8 em —
   mehr als 3rem (48 px) passt nicht, sonst bricht jeder Satz ab 1100 px
   Fensterbreite in zwei Zeilen. Unter 2rem umbrechen Telefone ohnehin. */
h1 {
  max-width: 16em;
  font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em;
  color: var(--heading); text-wrap: balance;
}
h1 .zweiter { display: block; color: var(--mint-extra-deep); }

.uhr {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; box-sizing: border-box;
  border-radius: var(--r-lg); box-shadow: var(--schatten-lg);
  padding: clamp(16px, 3vw, 32px);
}
/* Das Sortiment liegt unter Milchglas: zu sehen ist, dass etwas kommt, nicht was. */
.uhr-bild {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; filter: blur(14px); transform: scale(1.15); z-index: -2;
}
.uhr::before { content: ""; position: absolute; inset: 0; background: var(--akzent-schleier); z-index: -1; }
.felder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.5vw, 16px); }
.feld {
  background: rgba(255, 255, 255, 0.9); border-radius: var(--r-md); box-shadow: var(--schatten-sm);
  padding: clamp(14px, 2.4vw, 26px) 4px clamp(12px, 2vw, 18px);
}
.feld-wert {
  display: block; font-size: clamp(2.2rem, 7vw, 4.25rem); line-height: 1; font-weight: 700;
  letter-spacing: -0.03em; color: var(--heading); font-variant-numeric: tabular-nums;
}
.feld-name {
  display: block; margin-top: 10px; font-family: var(--mono); font-size: clamp(9.5px, 2.5vw, 11px);
  line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: var(--heading-75);
}

.ausblick { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ausblick p { max-width: 30em; color: var(--ink-soft); text-wrap: balance; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 8px 28px; box-sizing: border-box;
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--verlauf); box-shadow: var(--schatten-knopf);
  font: 600 14px/1.3 var(--font); letter-spacing: 0.02em;
  color: var(--heading); text-decoration: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.knopf:hover { transform: translateY(-1px); box-shadow: 0 18px 44px rgba(24, 32, 34, 0.14), 0 0 24px rgba(157, 202, 198, 0.25); }

/* Besucherzähler: klein in der Ecke unten rechts, kein Bedienelement. Er
   erscheint erst, wenn der Stand da ist — vorher und bei einem Fehler nichts. */
.fuss {
  display: flex; justify-content: flex-end;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--rand), env(safe-area-inset-left, 0px));
  padding-right: max(var(--rand), env(safe-area-inset-right, 0px));
}
.besucher {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; line-height: 1.3; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--heading-75); font-variant-numeric: tabular-nums;
}
.besucher[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .knopf, .sprache-knopf, .sprache-option, .sprache-liste { transition: none; }
  .knopf:hover { transform: none; }
  .sprache-liste { transform: none; }
}