/* ======== taxi-de.de Urban Theme (Gold/Grau/Schwarz/Weiß) ======== */

/* Farbpalette (Dark-first) */
:root{
  --gold:#d4af37;            /* klassisches Gold */
  --gold-2:#f1d37a;          /* helles Gold für Gradients */
  --ink:#0b0c0f;             /* nahezu schwarz */
  --charcoal:#14161c;        /* Kartenhintergrund */
  --graphite:#1d212b;        /* Sekundärflächen */
  --ring:#272c37;            /* Border/Divider */
  --fg:#eef2f7;              /* Text hell */
  --muted:#9aa3b2;           /* Text sekundär */

  --brand:var(--gold);
  --brand2:#9098a6;          /* kühles Grau als Kontrast */

  --shadow-lg:0 18px 50px rgba(0,0,0,.45);
  --shadow-md:0 10px 26px rgba(0,0,0,.28);
  --radius:16px;
}

/* Light-Mode Anpassungen */
@media (prefers-color-scheme: light){
  :root{
    --ink:#ffffff;
    --charcoal:#f7f7f9;
    --graphite:#ffffff;
    --ring:#e6e6ea;
    --fg:#0b0c0f;
    --muted:#626b78;
    --shadow-lg:0 18px 50px rgba(0,0,0,.10);
    --shadow-md:0 10px 26px rgba(0,0,0,.08);
  }
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--fg);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:inherit}

/* Container */
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}

/* ---------- Top-Navigation & Ticker ---------- */
.topnav{
  position:sticky;top:0;z-index:100;
  background:linear-gradient(180deg, rgba(0,0,0,.46), rgba(0,0,0,.18));
  backdrop-filter:blur(10px) saturate(1.05);
  border-bottom:1px solid color-mix(in srgb, var(--ring) 84%, transparent);
}
@media (prefers-color-scheme: light){
  .topnav{ background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65)) }
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.nav-brand img{height:28px;width:auto;display:block;filter:grayscale(0)}
.nav-links{display:flex;gap:16px;flex-wrap:wrap}
.nav-links a{opacity:.9;text-decoration:none}
.nav-links a:hover{opacity:1}

/* Buttons */
.btn{
  display:inline-block; padding:10px 16px; border-radius:12px;
  text-decoration:none; border:1px solid color-mix(in srgb, var(--ring) 80%, transparent);
  background:var(--graphite); color:var(--fg); transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-md)}
.btn.primary{
  border:none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gold) 70%, #fff 0%), var(--gold)),
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  color:#0b0c0f; font-weight:800;
  box-shadow:0 6px 18px rgba(212,175,55,.35);
}
.btn.primary:hover{box-shadow:0 10px 24px rgba(212,175,55,.45)}
.btn.big{padding:12px 18px; border-radius:14px}
.btn.ghost{background:transparent}

/* Ticker-Bar (du hast bereits .ticker-Struktur) */
.ticker{
  border-bottom:1px solid color-mix(in srgb, var(--ring) 84%, transparent);
  background:linear-gradient(90deg, rgba(212,175,55,.12), rgba(144,152,166,.10));
}
.ticker-inner{display:flex;align-items:center;gap:12px;padding:8px 0}
.ticker-label{font-weight:900; letter-spacing:.02em; color:var(--brand)}
.ticker-scroll{flex:1; overflow:hidden}
.ticker-track{white-space:nowrap; animation:ticker 28s linear infinite}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-right{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.dot{width:8px;height:8px;border-radius:50%;background:#1ed760;display:inline-block}

/* ---------- HERO ---------- */
.hero{position:relative; padding:26px 0}
.hero-inner{
  display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:center;
}
@media (max-width: 980px){ .hero-inner{ grid-template-columns:1fr } }

.hero-text h1{
  font-size: clamp(30px, 4.2vw, 48px); line-height:1.1; margin:0 0 8px;
}
.accent{
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent
}
.lead{color:var(--muted); font-size:clamp(16px,2vw,18px)}

.hero-logo-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    radial-gradient(80% 80% at 50% 0%, rgba(212,175,55,.12), transparent 70%);
  border:1px solid color-mix(in srgb, var(--ring) 70%, transparent);
  border-radius:20px; padding:22px; box-shadow:var(--shadow-lg)
}
.hero-logo-card img{ width:100%; max-width:420px; height:auto; display:block; border-radius:12px }

/* ---------- STRIP / Slider ---------- */
.strip{padding:8px 0 0}
.strip-head{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.strip-controls{display:flex;gap:8px}
.ctrl{
  cursor:pointer; border:1px solid color-mix(in srgb, var(--ring) 76%, transparent);
  background:var(--graphite); color:var(--fg); border-radius:10px; padding:8px 10px;
  transition:transform .12s ease
}
.ctrl:hover{ transform:translateY(-1px) }
.row-scroll{
  display:flex; gap:12px; overflow:auto; scroll-snap-type:x proximity; padding:8px 0 16px
}
.row-scroll::-webkit-scrollbar{height:8px}
.row-scroll::-webkit-scrollbar-thumb{background:var(--ring);border-radius:8px}

/* Karten */
.card{
  min-width:260px; flex:0 0 auto; text-decoration:none; color:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid color-mix(in srgb, var(--ring) 74%, transparent);
  border-radius:14px; padding:14px; scroll-snap-align:start;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 30px rgba(0,0,0,.18);
}
.card.wide{min-width:360px}
.card.disabled{opacity:.55; pointer-events:none}
.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md) }
.card-tag{font-size:12px; color:var(--muted)}
.card-title{font-weight:900; letter-spacing:.01em; margin-top:6px}
.card-meta{color:var(--muted); margin-top:4px}

/* ---------- GRID + News-Liste ---------- */
.grid-section{padding:6px 0 28px}
.grid-section h2{margin:12px 0}
.grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px
}
.badge{
  display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px;
  margin-bottom:8px; border:1px solid color-mix(in srgb, var(--ring) 70%, transparent)
}
.badge.live{ background:rgba(26,185,85,.16); color:#22c55e; border-color:rgba(26,185,85,.35) }
.badge.soon{ background:rgba(212,175,55,.12); color:var(--gold); border-color:rgba(212,175,55,.35) }

.news-list{ margin-top:18px; display:grid; gap:12px }
.news-item{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid color-mix(in srgb, var(--ring) 74%, transparent);
  border-radius:14px; padding:16px
}
.news-date{font-size:12px; color:var(--muted)}
.news-item h3{margin:6px 0}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid color-mix(in srgb, var(--ring) 84%, transparent);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  margin-top:16px
}
.foot-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
.foot-links a{color:var(--muted); text-decoration:none; margin-left:12px}
.foot-links a:hover{color:var(--fg); text-decoration:underline}

/* ---------- Micro-Details ---------- */
/* leichte „Goldkante“ für Fokus-Elemente */
.card, .hero-logo-card, .btn, .news-item{
  outline: 0.5px solid transparent;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 0 0 0.5px rgba(212,175,55,.08);
}
@media (max-width: 760px){
  .sticky-cta{
    position: sticky; bottom: 0; inset-inline: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.0)), var(--graphite);
    border-top: 1px solid color-mix(in srgb, var(--ring) 80%, transparent);
    padding: 10px 16px; text-align:center; z-index: 60;
  }
  .sticky-cta a{
    display:inline-block; padding:12px 18px; border-radius:14px; font-weight:800;
    background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 70%, #fff 0%), var(--gold));
    color:#0b0c0f; text-decoration:none; box-shadow:0 6px 18px rgba(212,175,55,.35);
  }
}