/* ==========================================================================
   Zeitzonen UI · Light, clean, professional · Space Grotesk
   Variante A: CSS-only Welt-Backdrop (Graticule + sanfte Körnung)
   - Warm-neutrale Flächen, dezenter Kupfer-Akzent
   - Sticky Glass-Header & -Footer
   - Kompakte Dichte, mittlere Rundung, spürbare Schatten
   - Mobile-friendly, große Touch-Ziele
   ========================================================================== */

/* === Design-Variablen ===================================================== */

:root {
  /* Palette (Light) */
  --bg:            #f6f7fb;
  --surface:       #ffffff;
  --surface-2:     #f9fafc;
  --text:          #0f172a;   /* slate-900 */
  --muted:         #64748b;   /* slate-500/600 */
  --border:        #e6eaf1;

  /* Accent (subtle copper) */
  --accent:        #c8633a;
  --accent-strong: #b95731;

  /* Shape & shadow */
  --radius:        14px;
  --shadow-soft:   0 8px 22px rgba(15, 23, 42, 0.08);
  --shadow-lift:   0 16px 40px rgba(15, 23, 42, 0.14);

  /* Layout */
  --container:     1100px;

  /* Hintergrundkunst (Variante A) */
  --bg-art-opacity:  .08;   /* Master-Regler für Kunst-Layer */
  --bg-grid-opacity: .12;   /* Sichtbarkeit der Graticule-Linien */
  --bg-grain-opacity:.04;   /* Stärke des Grain-Layers */
}

/* Optional Dark-Mode Feintuning */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0c1016;
    --surface:       #121722;
    --surface-2:     #161b26;
    --text:          #e8ebf1;
    --muted:         #9aa3b2;
    --border:        #232c3a;

    --accent:        #d07a4f;
    --accent-strong: #c7683d;

    --shadow-soft:   0 12px 28px rgba(0, 0, 0, .35);
    --shadow-lift:   0 20px 48px rgba(0, 0, 0, .45);

    --bg-art-opacity:  .07;
    --bg-grid-opacity: .10;
    --bg-grain-opacity:.03;
  }
}

/* === Base Reset =========================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

a { color: inherit; text-decoration: none; }

/* Grundaufbau + sanfte radiale Akzente */
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background:
    radial-gradient(900px 420px at 9% -10%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
    radial-gradient(700px 380px at 118% -6%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 55%),
    var(--bg);
}

/* === Variante A: CSS-only World Backdrop ================================== */
/* – sanfte Körnung + Graticule (Breiten-/Längengrade) als fixe Overlays     */

body::before {
  /* Layer 1: sehr dezente Körnung */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    radial-gradient(1px 1px at 25% 30%, rgba(255, 255, 255, 0.779), transparent 60%),
    radial-gradient(1px 1px at 62% 18%, rgba(255, 255, 255, 0.779), transparent 60%),
    radial-gradient(1px 1px at 80% 65%, rgba(255, 255, 255, 0.779), transparent 60%);
  background-repeat: repeat;
  background-size: 240px 240px, 300px 300px, 360px 360px;
  opacity: var(--bg-grain-opacity);
}

body::after {
  /* Layer 2: großer “Globus” aus Graticule-Linien, weich gefadet */
  content: "";
  position: fixed;
  inset: -10vh -10vw;
  z-index: -1;
  pointer-events: none;

  background:
    /* weiches Oval (Licht-Falloff) */
    radial-gradient(ellipse at 55% 35%, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 65%) 0 0 / 100% 100% no-repeat,
    /* Breitengrade */
    repeating-linear-gradient(
      to bottom,
      color-mix(in oklab, var(--accent) 18%, var(--border)) 0,
      color-mix(in oklab, var(--accent) 18%, var(--border)) 1px,
      transparent 1px,
      transparent 28px
    ),
    /* Längengrade */
    repeating-linear-gradient(
      90deg,
      color-mix(in oklab, var(--accent) 18%, var(--border)) 0,
      color-mix(in oklab, var(--accent) 18%, var(--border)) 1px,
      transparent 1px,
      transparent 32px
    );

  mix-blend-mode: multiply;
  filter: blur(.3px) saturate(105%);
  transform: translateY(-2vh) rotate(-1.2deg) scale(1.02);
  opacity: var(--bg-grid-opacity);
}

/* === Header (glassy, sticky) ============================================= */

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;

  padding: 0.9rem 1.2rem;
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}

.app-header h1 {
  margin: 0;
  font-weight: 700;
  letter-spacing: .2px;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
}

.app-header nav {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.app-header nav a {
  padding: .55rem .75rem;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid transparent;
  color: var(--muted);
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .05s ease;
}

.app-header nav a:hover {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--text);
}

/* === Main-Container ======================================================= */

main {
  flex: 1;
  width: min(var(--container), 100%);
  margin: 1.6rem auto 2.2rem;
  padding: 0 1rem;
}

.lead {
  margin: .25rem 0 1rem;
  color: var(--muted);
}

.muted { color: var(--muted); opacity: .9; }

/* === Startseite: City-Grid =============================================== */

.stadt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin-top: .8rem;
}

.stadt-card {
  display: block;
  padding: 18px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);

  transform: translateY(0);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.stadt-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
  background: var(--surface-2);
}

.stadt-card h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

/* === Stadtseite: Clock Card ============================================== */

.clock-card {
  max-width: 720px;
  margin: 1.1rem auto 1rem;
  padding: clamp(20px, 4vw, 28px);

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-soft);
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .5rem;
}

.breadcrumb { font-size: .9rem; color: var(--muted); }

.badge-live {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .22rem .56rem;
  border-radius: 999px;

  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .3px;

  color: #fff;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 36%, #fff),
    var(--accent)
  );
  box-shadow: 0 6px 16px color-mix(in oklab, var(--accent) 28%, transparent);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c7c7c7;
  border: 2px solid color-mix(in oklab, var(--surface) 70%, var(--border));
  vertical-align: middle;
  margin-left: 8px;
}
.status-dot.ok  { background: #1fbf74; }
.status-dot.bad { background: #dc4343; }

/* Große, elegante Uhrzeit */
.time {
  margin-top: .2rem;
  font-weight: 800;
  font-size: clamp(2.6rem, 8.4vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: .4px;

  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;

  color: var(--accent-strong);
}

/* Skeleton-Ladezustand */
.skeleton {
  color: transparent;
  position: relative;
  border-radius: 8px;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, .06),
    rgba(0, 0, 0, .12),
    rgba(0, 0, 0, .06)
  );
  background-size: 180% 100%;
  animation: shine 1.1s linear infinite;
}

@keyframes shine { to { background-position: -180% 0; } }

/* Meta-Daten (Datum, Zeitzone, Diff) */
.meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin-top: 14px;
}

.label {
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 2px;
}

.value {
  font-size: 1rem;
  font-weight: 600;
}

/* === Navigation Buttons =================================================== */

.nav-buttons {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin-top: .9rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 120px;
  padding: .65rem 1rem;

  border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border));
  color: var(--text);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--accent) 10%, var(--surface)),
    var(--surface)
  );

  transition: background .18s ease, border-color .18s ease, transform .08s ease, box-shadow .18s ease;
  touch-action: manipulation;
}

.btn:hover {
  border-color: color-mix(in oklab, var(--accent) 38%, var(--border));
  box-shadow: 0 10px 26px color-mix(in oklab, var(--accent) 18%, transparent);
}

.btn:active { transform: translateY(1px); }

/* === Toast (Fehler) ======================================================= */

.toast {
  margin-top: 10px;
  padding: .6rem .8rem;

  background: color-mix(in oklab, #ef4444 18%, var(--surface));
  border: 1px solid color-mix(in oklab, #ef4444 35%, var(--border));
  color: color-mix(in oklab, #ef4444 82%, var(--text));

  border-radius: calc(var(--radius) - 4px);
}

/* === Footer (glassy, sticky bottom) ====================================== */

footer {
  position: sticky;
  bottom: 0;
  z-index: 10;

  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: .92rem;
  color: var(--muted);

  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  backdrop-filter: blur(8px);
}

/* === Fokus & Accessibility =============================================== */

:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--accent) 70%, white);
  outline-offset: 2px;
  border-radius: 10px;
}

/* === Reduced Motion ======================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* === Responsive Tweaks ==================================================== */

@media (max-width: 760px) {
  .app-header { padding: .8rem 1rem; }
  .stadt-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

@media (max-width: 420px) {
  .stadt-grid { grid-template-columns: 1fr; }
  .btn        { min-width: 0; width: 48%; }
  .nav-buttons{ justify-content: space-between; }
}

.card-top{display:flex;align-items:center}
.card-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}

.status-dot{width:10px;height:10px;border-radius:50%;
  background:#c7c7c7;
  border:2px solid color-mix(in oklab, var(--surface) 70%, var(--border));
}
.status-dot.ok{ background:#1fbf74; }       /* grün */
.status-dot.bad{ background:#dc4343; }      /* rot  */

/* === Fluid Layout Overrides (am Ende der Datei einfügen) ================= */

/* Container reagiert auf Viewport-Breite */
:root { 
  --container: clamp(340px, 92vw, 1200px);
}

main{ 
  padding-inline: clamp(12px, 2vw, 24px);
}

/* Card nutzt volle Container-Breite, Padding skaliert */
.clock-card{
  width: 100%;
  max-width: none;
  padding: clamp(16px, 3.2vw, 40px);
  margin: clamp(12px, 2vw, 20px) auto;
}

/* Große, fluide Uhr */
.time{
  font-size: clamp(2.4rem, 7.2vw, 5rem);
  line-height: 1.08;
}

/* Meta-Infos brechen automatisch in Spalten um */
.meta{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
  margin-top: clamp(10px, 1.2vw, 14px);
}

/* Buttons: Touch-freundlich, fluide Breite/Abstände */
.nav-buttons{ gap: clamp(.5rem, 1.5vw, 1rem); }
.btn{
  min-width: clamp(120px, 24vw, 220px);
  padding: clamp(.55rem, 1.2vw, .85rem) clamp(.8rem, 2vw, 1.2rem);
}

/* Kleine Screens: Top-Bereich stapeln */
@media (max-width: 480px){
  .card-top{ 
    flex-direction: column; 
    align-items: flex-start; 
    gap: .5rem; 
  }
}

/* Sehr breite Screens: etwas größer werden lassen */
@media (min-width: 1400px){
  :root{ --container: 1400px; }
  .time{ font-size: clamp(3rem, 5vw, 6rem); }
}

/* Optional: Startseiten-Grid noch flüssiger
.stadt-grid{
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
}
*/

/* ===== Header hierarchy & buttons ===================================== */
.app-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1.1rem;
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}

.app-header--city { /* same base, different name scale on city pages */ }

.header-left { display: flex; align-items: baseline; gap: .75rem; min-width: 0; }
.brand {
  font-size: .92rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; white-space: nowrap;
}

.city {
  margin: 0; line-height: 1.1;
  font-weight: 800;
  /* big but responsive */
  font-size: clamp(1.25rem, 3.8vw, 2rem);
  text-wrap: balance;  /* nicer wraps like “Los Angeles” */
  color: var(--text);
}

.header-nav { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.nav-link {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .55rem .8rem;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  color: var(--muted);
  font-weight: 600; font-size: .95rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease,
             transform .05s ease, box-shadow .15s ease;
}

.nav-link:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: color-mix(in oklab, var(--accent) 18%, var(--border));
}

.nav-link--active {
  color: var(--text);
  border-color: color-mix(in oklab, var(--accent) 28%, var(--border));
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 5%, var(--surface)),
    var(--surface)
  );
}

.nav-link--primary { /* distinct “Hauptseite” button */
  color: #FF7F50;
  border-color: transparent;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 15%, #fff),
    var(--accent)
  );
  box-shadow: 0 10px 24px color-mix(in oklab, var(--accent) 22%, transparent);
}
.nav-link--primary:hover {
  background: var(--accent-strong);
  box-shadow: 0 14px 32px color-mix(in oklab, var(--accent) 30%, transparent);
}

/* Mobile layout: stack title and nav nicely */
@media (max-width: 680px) {
  .app-header { align-items: flex-start; }
  .header-left { flex-direction: column; gap: .25rem; }
  .header-nav { width: 100%; order: 99; padding-top: .25rem; }
  .nav-link { padding: .5rem .7rem; font-size: .95rem; }
}

/* ===== Nav: Primary Pill (Hauptseite) – bessere Lesbarkeit ===== */

/* Tuning-Variablen nur für die Pille */
:root{
  --nav-pill-fg:        #1b0e09; /* dunkler Text im Light-Mode */
  --nav-pill-bg1:       color-mix(in oklab, var(--accent) 32%, #fff);
  --nav-pill-bg2:       color-mix(in oklab, var(--accent-strong) 82%, #fff);
  --nav-pill-border:    color-mix(in oklab, var(--accent-strong) 60%, #000);
  --nav-pill-shadow:    0 10px 24px color-mix(in oklab, var(--accent) 22%, transparent);
}
@media (prefers-color-scheme: dark){
  :root{
    /* Im Dark-Mode Pille etwas dunkler + weißer Text */
    --nav-pill-fg:      #ffffff;
    --nav-pill-bg1:     color-mix(in oklab, var(--accent-strong) 30%, #000);
    --nav-pill-bg2:     color-mix(in oklab, var(--accent-strong) 70%, #000);
    --nav-pill-border:  color-mix(in oklab, var(--accent-strong) 70%, #000);
    --nav-pill-shadow:  0 12px 28px color-mix(in oklab, var(--accent) 28%, transparent);
  }
}

/* Die eigentliche „Hauptseite“-Pille */
.header-nav .nav-link--primary{
  color: var(--nav-pill-fg);
  font-weight: 700;              /* kräftiger */
  letter-spacing: .2px;
  background: linear-gradient(180deg, var(--nav-pill-bg1), var(--nav-pill-bg2));
  border: 1px solid var(--nav-pill-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, var(--nav-pill-shadow);
  /* leichte Innenkante für Klarheit */
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: light){
  .header-nav .nav-link--primary{
    text-shadow: 0 1px 0 rgba(255,255,255,.45);   /* Kontrast auf heller Pille */
  }
}
@media (prefers-color-scheme: dark){
  .header-nav .nav-link--primary{
    text-shadow: 0 1px 0 rgba(0,0,0,.55);        /* Kante im Dark-Mode */
  }
}

/* Hover/Focus: noch klarer Rand + etwas dunkler */
.header-nav .nav-link--primary:hover,
.header-nav .nav-link--primary:focus-visible{
  border-color: color-mix(in oklab, var(--accent-strong) 85%, #000);
  filter: saturate(105%);
  transform: translateY(-1px);
}

/* Optional: wenn dir der Text immer noch zu „weich“ ist, aktiviere eine minimale Outline */
.header-nav .nav-link--primary[data-outline="1"]{
  text-shadow:
    0 1px 0 rgba(0,0,0,.18),
    0 -1px 0 rgba(0,0,0,.08);
}

/* === Favoriten-Leiste ===================================================== */
.favs-bar{
  display:block;
  margin: 1rem auto 1.25rem;
  padding: .6rem .8rem;
  width: min(var(--container), 100%);
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow-soft);
}
.favs-title{
  font-size:.9rem;
  color:var(--muted);
  margin: .2rem .2rem .5rem;
}
.favs-list{
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  padding-bottom:.2rem;
}
.fav-chip{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .6rem;
  border:1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  white-space:nowrap;
}
.fav-link{ font-weight:600; }
.fav-time{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  opacity:.9;
}
.fav-time.bad { opacity:.6; }
.fav-remove{
  border:1px solid color-mix(in oklab, var(--accent) 15%, var(--border));
  background: color-mix(in oklab, var(--accent) 6%, var(--surface));
  border-radius: 999px;
  width: 1.35rem; height: 1.35rem; line-height:1rem;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.fav-remove:hover{
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}

/* Stern-Button auf Stadtseite */
.card-actions{ display:flex; align-items:center; gap:.6rem; }
.fav-toggle{
  border:1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  width: 36px; height: 36px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-soft);
  cursor:pointer;
}
.fav-toggle:hover{ border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); }
.fav-toggle svg{ width:18px; height:18px; fill: color-mix(in oklab, var(--muted) 85%, #000); }
.fav-toggle[aria-pressed="true"] svg{ fill: var(--accent-strong); }