/* ======================================================================
   Taxi Chemnitz 24h – kompakter Urban-/Taxi-Header
   Gilt global über czc_base.html. Bestehende Seiteninhalte bleiben unberührt.
   ====================================================================== */

:root {
  --nav-night-1: #061324;
  --nav-night-2: #0b1f38;
  --nav-night-3: #0a1728;
  --nav-yellow: #f6c400;
  --nav-yellow-2: #ffdc4a;
  --nav-cyan: #55d6cf;
  --nav-white: #f8fbff;
  --nav-muted: #b7c4d6;
  --nav-border: rgba(172, 199, 231, .22);
  --nav-glass: rgba(255, 255, 255, .075);
  --nav-shadow: 0 12px 34px rgba(2, 8, 23, .24);
}

/* Nur die eigentliche Hauptzeile bleibt beim Scrollen sichtbar.
   Die Suchzeile liegt normal im Dokumentfluss und verschwindet beim Scrollen. */
.site-navbar {
  position: sticky;
  top: 0;
  z-index: 1035;
  min-height: 4rem;
  padding: .38rem 0;
  color: var(--nav-white);
  border: 0;
  border-bottom: 1px solid rgba(246, 196, 0, .30);
  background:
    linear-gradient(90deg, rgba(6, 19, 36, .96), rgba(11, 31, 56, .93) 50%, rgba(6, 19, 36, .96)),
    url('/static/img/taxi-header-cityline.svg') center / cover no-repeat,
    var(--nav-night-1);
  box-shadow: var(--nav-shadow);
  isolation: isolate;
}
.site-navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  z-index: -1;
  background: repeating-linear-gradient(
    90deg,
    var(--nav-yellow) 0 14px,
    rgba(7, 20, 36, .95) 14px 28px
  );
  opacity: .92;
}
.site-navbar .container {
  min-height: 3.25rem;
  gap: .65rem;
}

/* Marke */
.site-navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: .62rem;
  min-width: 0;
  margin-right: .55rem;
  padding: 0;
  color: var(--nav-white) !important;
  text-decoration: none !important;
}
.site-navbar-brand:hover,
.site-navbar-brand:focus-visible { color: #fff !important; }
.site-brand-mark {
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  display: grid;
  place-items: center;
  border-radius: .72rem;
  background: rgba(246, 196, 0, .10);
  box-shadow: inset 0 0 0 1px rgba(246, 196, 0, .34);
}
.site-brand-mark img {
  display: block;
  width: 2.18rem;
  height: 2.18rem;
}
.site-brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.site-brand-title {
  color: #fff;
  font-size: 1.02rem;
  font-weight: 850;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.site-brand-subtitle {
  margin-top: .2rem;
  color: var(--nav-yellow-2);
  font-size: .64rem;
  font-weight: 760;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Primärnavigation */
.site-navbar .navbar-collapse {
  min-width: 0;
}
.site-primary-nav {
  min-width: 0;
  align-items: center;
  gap: .04rem;
}
.site-primary-nav .nav-link {
  position: relative;
  padding: .48rem .38rem !important;
  border-radius: .58rem;
  color: rgba(248, 251, 255, .78) !important;
  font-size: .79rem;
  font-weight: 640;
  line-height: 1.15;
  white-space: nowrap;
  transition: color .16s ease, background-color .16s ease, transform .16s ease;
}
.site-primary-nav .nav-link:hover,
.site-primary-nav .nav-link:focus-visible {
  color: #fff !important;
  background: rgba(255, 255, 255, .08);
  text-decoration: none;
}
.site-primary-nav .nav-link.active {
  color: var(--nav-yellow-2) !important;
  background: rgba(246, 196, 0, .10);
}
.site-primary-nav .nav-link.active::after {
  content: "";
  position: absolute;
  left: .45rem;
  right: .45rem;
  bottom: .17rem;
  height: 2px;
  border-radius: 999px;
  background: var(--nav-yellow);
}

/* Kompakte Aktionsgruppe – keine vertikale Button-Säule mehr am Desktop */
.site-nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap !important;
  gap: .36rem !important;
  min-width: max-content;
}
.site-nav-actions .btn {
  min-height: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  border-radius: .68rem;
  padding: .4rem .63rem;
  border-width: 1px;
  font-size: .78rem;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}
.site-action-icon {
  display: inline-grid;
  place-items: center;
  width: 1.12rem;
  height: 1.12rem;
  font-size: .92rem;
  line-height: 1;
}
.site-action-call {
  color: #fff !important;
  border-color: rgba(146, 192, 246, .42) !important;
  background: rgba(37, 99, 235, .24) !important;
}
.site-action-call:hover,
.site-action-call:focus-visible {
  color: #fff !important;
  border-color: rgba(146, 192, 246, .72) !important;
  background: rgba(37, 99, 235, .38) !important;
}
.site-action-order {
  color: #111827 !important;
  border-color: #ffe276 !important;
  background: linear-gradient(180deg, #ffdc4a, var(--nav-yellow)) !important;
  box-shadow: 0 7px 18px rgba(246, 196, 0, .20) !important;
}
.site-action-order:hover,
.site-action-order:focus-visible {
  color: #050b14 !important;
  border-color: #fff0a8 !important;
  background: linear-gradient(180deg, #ffe873, #f6c400) !important;
  transform: translateY(-1px);
}
.site-action-more,
.site-language-toggle {
  color: var(--nav-white) !important;
  border-color: var(--nav-border) !important;
  background: var(--nav-glass) !important;
}
.site-action-more:hover,
.site-action-more:focus-visible,
.site-language-toggle:hover,
.site-language-toggle:focus-visible,
.site-language-toggle.show,
.site-action-more.show {
  color: #fff !important;
  border-color: rgba(246, 196, 0, .55) !important;
  background: rgba(255, 255, 255, .13) !important;
}
.site-action-more::after,
.site-language-toggle::after { margin-left: .16rem; }
.site-more-dots {
  font-size: 1.12rem;
  letter-spacing: .06em;
  transform: translateY(-.08rem);
}

/* Sprachflaggen */
.site-language-toggle {
  min-width: 3.25rem;
}
.site-language-flag {
  display: inline-block;
  width: 1.42rem;
  height: .96rem;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: .17rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .32), 0 2px 6px rgba(0, 0, 0, .18);
  object-fit: cover;
}
.site-language-code {
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.site-language-native { display: none; }
.language-menu,
.site-more-menu {
  margin-top: .48rem !important;
  padding: .45rem;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: .82rem;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 46px rgba(2, 8, 23, .20);
}
.language-menu .dropdown-item,
.site-more-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: .58rem;
  min-height: 2.3rem;
  padding: .46rem .58rem;
  border-radius: .55rem;
  color: #172033;
  font-size: .88rem;
  font-weight: 620;
}
.language-menu .dropdown-item:hover,
.language-menu .dropdown-item:focus,
.site-more-menu .dropdown-item:hover,
.site-more-menu .dropdown-item:focus {
  color: #071426;
  background: #edf4ff;
}
.language-menu .dropdown-item.active {
  color: #071426;
  background: #fff2ad;
}
.site-more-menu .dropdown-divider { margin: .38rem 0; }
.site-more-menu .dropdown-item.text-danger { color: #b42318 !important; }

/* Suchzeile: urban statt weiß; nicht sticky und bewusst flacher */
.site-search-wrap {
  position: relative !important;
  top: auto !important;
  z-index: 1020;
  padding: .48rem 0 .56rem;
  border-bottom: 1px solid rgba(246, 196, 0, .24);
  background:
    linear-gradient(90deg, rgba(6, 19, 36, .98), rgba(12, 34, 60, .96) 50%, rgba(6, 19, 36, .98)),
    url('/static/img/taxi-header-cityline.svg') center 68% / cover no-repeat,
    var(--nav-night-1);
  box-shadow: 0 9px 24px rgba(2, 8, 23, .12);
}
.site-search-wrap .container { padding-top: 0 !important; padding-bottom: 0 !important; }
.site-search-wrap .site-search {
  position: relative;
  width: min(100%, 47rem);
  margin-inline: auto;
}
.site-search-wrap .site-search::before {
  content: "⌕";
  position: absolute;
  left: .95rem;
  top: 50%;
  z-index: 2;
  transform: translateY(-52%);
  color: #36577d;
  font-size: 1.16rem;
  font-weight: 800;
  pointer-events: none;
}
.site-search-wrap .form-control {
  min-height: 2.55rem;
  padding: .52rem 2.85rem .52rem 2.65rem;
  border: 1px solid rgba(151, 183, 220, .48);
  border-radius: 999px;
  color: #101a2b;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 22px rgba(2, 8, 23, .16), inset 0 1px 0 rgba(255, 255, 255, .85);
  font-size: .9rem;
}
.site-search-wrap .form-control::placeholder { color: #61728a; opacity: 1; }
.site-search-wrap .form-control:focus {
  border-color: var(--nav-yellow);
  box-shadow: 0 0 0 .2rem rgba(246, 196, 0, .20), 0 9px 24px rgba(2, 8, 23, .18);
}
.site-search-wrap .site-search-results {
  top: calc(100% + .38rem);
  border: 1px solid rgba(15, 23, 42, .11);
  border-radius: .85rem;
  background: rgba(255, 255, 255, .99);
  box-shadow: 0 20px 50px rgba(2, 8, 23, .22);
}

/* Hamburger */
.site-navbar .navbar-toggler {
  width: 2.55rem;
  height: 2.38rem;
  padding: .35rem;
  border-color: rgba(246, 196, 0, .45);
  border-radius: .65rem;
  background: rgba(255, 255, 255, .06);
  box-shadow: none;
}
.site-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(246, 196, 0, .20);
}

/* Auf sehr breiten Displays darf der ausgeschriebene Sprachname erscheinen. */
@media (min-width: 1400px) {
  .site-language-native { display: inline; }
  .site-language-code { display: none; }
  .site-primary-nav .nav-link { padding-inline: .48rem !important; font-size: .82rem; }
  .site-brand-title { font-size: 1.06rem; }
}

/* 1200–1399 px: besonders kompakt, damit nichts mehr in eine rechte Button-Säule umbricht. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .site-navbar .container { max-width: 1140px; }
  .site-brand-subtitle { display: none; }
  .site-brand-mark { width: 2.14rem; height: 2.14rem; flex-basis: 2.14rem; }
  .site-brand-mark img { width: 2rem; height: 2rem; }
  .site-brand-title { font-size: .94rem; }
  .site-primary-nav .nav-link { padding-inline: .29rem !important; font-size: .735rem; }
  .site-nav-actions .btn { padding-inline: .5rem; font-size: .73rem; }
  .site-action-more .site-action-label { display: none; }
}

/* Unter 1200 px bewusst Burger statt gequetschter Desktop-Navigation.
   Damit bleibt der Header auch auf 1024×768 und ähnlicher Hardware klein. */
@media (max-width: 1199.98px) {
  .site-navbar { padding: .34rem 0; }
  .site-navbar .container { min-height: 3.05rem; flex-wrap: wrap; }
  .site-navbar-brand { margin-right: auto; }
  .site-brand-subtitle { display: none; }
  .site-navbar .navbar-collapse {
    width: 100%;
    padding: .75rem 0 .32rem;
    border-top: 1px solid rgba(172, 199, 231, .17);
    margin-top: .38rem;
  }
  .site-primary-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .34rem;
    margin-bottom: .7rem;
  }
  .site-primary-nav .nav-item { min-width: 0; }
  .site-primary-nav .nav-link {
    display: flex;
    align-items: center;
    min-height: 2.55rem;
    padding: .62rem .72rem !important;
    border: 1px solid rgba(172, 199, 231, .13);
    background: rgba(255, 255, 255, .045);
    font-size: .88rem;
  }
  .site-primary-nav .nav-link.active::after { display: none; }
  .site-nav-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem !important;
    align-items: stretch !important;
    min-width: 0;
  }
  .site-nav-actions > .dropdown,
  .site-nav-actions > a { width: 100%; min-width: 0; }
  .site-nav-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 2.55rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .site-language-native { display: inline; }
  .site-language-code { display: none; }
  .site-language-toggle,
  .site-action-more { justify-content: space-between !important; }
  .site-nav-actions .language-dropdown,
  .site-nav-actions .site-more-dropdown { grid-column: auto; }
  .site-nav-actions .language-dropdown .dropdown-menu,
  .site-nav-actions .site-more-dropdown .dropdown-menu {
    position: static !important;
    transform: none !important;
    inset: auto !important;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-top: .38rem !important;
  }
  .site-search-wrap { padding-block: .42rem .48rem; }
  .site-search-wrap .site-search { width: min(100%, 42rem); }
}

@media (max-width: 575.98px) {
  .site-brand-title { font-size: .9rem; }
  .site-brand-mark { width: 2.08rem; height: 2.08rem; flex-basis: 2.08rem; }
  .site-brand-mark img { width: 1.94rem; height: 1.94rem; }
  .site-primary-nav { grid-template-columns: 1fr; }
  .site-nav-actions { grid-template-columns: 1fr; }
  .site-search-wrap { padding-inline: .2rem; }
  .site-search-wrap .form-control { font-size: .84rem; min-height: 2.45rem; }
}

/* Kleine vertikale Displays: noch etwas flacher. */
@media (min-width: 1200px) and (max-height: 760px) {
  .site-navbar { padding-block: .25rem; }
  .site-navbar .container { min-height: 3rem; }
  .site-search-wrap { padding-block: .34rem .4rem; }
  .site-search-wrap .form-control { min-height: 2.35rem; }
}

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

/* ======================================================================
   SMART MOBILE CTA BAR – 2026-07-20
   Die mobile Taxi-Leiste bleibt als Conversion-Hilfe erhalten, blockiert aber
   weder Burger-Menü noch Sprachauswahl, Suche, Formulare oder iOS-Tastatur.
   Diese Regeln liegen bewusst in der zuletzt geladenen Urban-CSS und
   überschreiben ältere .app-sticky-Hotfixes aus czc.css.
   ====================================================================== */

@media (max-width: 1199.98px) {
  .site-navbar .navbar-collapse.show,
  .site-navbar .navbar-collapse.collapsing {
    max-height: calc(100dvh - 4.25rem - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 991.98px) {
  body,
  body:not(.has-smart-sticky) {
    padding-bottom: 0 !important;
  }

  body.has-smart-sticky {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .app-sticky.app-sticky-smart {
    position: fixed !important;
    left: max(.55rem, env(safe-area-inset-left, 0px)) !important;
    right: max(.55rem, env(safe-area-inset-right, 0px)) !important;
    bottom: max(.42rem, env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1028 !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(148, 163, 184, .38) !important;
    border-radius: 1.05rem !important;
    background: rgba(248, 250, 252, .96) !important;
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    box-shadow: 0 -10px 30px rgba(15, 23, 42, .16), 0 12px 30px rgba(15, 23, 42, .12) !important;
    transform: translate3d(0, calc(115% + env(safe-area-inset-bottom, 0px)), 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .22s ease, opacity .18s ease, visibility 0s linear .22s;
  }

  .app-sticky.app-sticky-smart.is-visible {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .22s ease, opacity .18s ease, visibility 0s linear 0s;
  }

  .app-sticky.app-sticky-smart .container {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: block !important;
    padding: .46rem !important;
  }

  .app-sticky.app-sticky-smart .app-sticky-actions {
    width: 100%;
    min-width: 0;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .42rem;
  }

  .app-sticky.app-sticky-smart .app-sticky-action {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .28rem !important;
    padding: .48rem .25rem !important;
    border: 1px solid rgba(203, 213, 225, .92) !important;
    border-radius: .82rem !important;
    color: #0f172a !important;
    background: #fff !important;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .08) !important;
    font-size: clamp(.74rem, 3.1vw, .88rem) !important;
    font-weight: 820 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: rgba(37, 99, 235, .14);
  }

  .app-sticky.app-sticky-smart .app-sticky-action--call {
    color: #fff !important;
    border-color: rgba(37, 99, 235, .30) !important;
    background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  }

  .app-sticky.app-sticky-smart .app-sticky-action--order {
    color: #111827 !important;
    border-color: #ffe276 !important;
    background: linear-gradient(180deg, #ffdd50, #f6c400) !important;
  }

  .app-sticky.app-sticky-smart .app-sticky-action--whatsapp {
    color: #064e3b !important;
    border-color: rgba(16, 185, 129, .32) !important;
    background: #ecfdf5 !important;
  }

  .app-sticky-action-icon {
    flex: 0 0 auto;
    font-size: .98rem;
    line-height: 1;
  }
}

@media (max-width: 359.98px) {
  body.has-smart-sticky {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .app-sticky.app-sticky-smart {
    left: max(.35rem, env(safe-area-inset-left, 0px)) !important;
    right: max(.35rem, env(safe-area-inset-right, 0px)) !important;
  }

  .app-sticky.app-sticky-smart .container {
    padding: .36rem !important;
  }

  .app-sticky.app-sticky-smart .app-sticky-actions {
    gap: .32rem;
  }

  .app-sticky.app-sticky-smart .app-sticky-action {
    min-height: 47px !important;
    padding-inline: .14rem !important;
    font-size: .7rem !important;
  }

  .app-sticky-action-icon {
    font-size: .88rem;
  }
}

@media (min-width: 992px) {
  .app-sticky.app-sticky-smart {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-sticky.app-sticky-smart {
    transition: none !important;
  }
}