:root{
  --brand:#2563eb;
  --brand-deep:#1e40af;
  --accent:#22e6cf;
  --ink:#0f172a;
  --ink-soft:#475569;
  --bg:#f8fafc;
  --radius:18px;
  --nav-h:64px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--ink);
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  padding-bottom:72px; /* Platz für Sticky-Bar (Mobile) */
}
@media (min-width: 992px){ body{ padding-bottom:0; } }

a{ color:var(--brand); }
a:hover{ color:#1743a1; }

.btn-brand{
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  border:0;
  color:#fff;
  box-shadow:0 12px 30px rgba(37,99,235,.28);
}
.btn-brand:hover{ filter:brightness(1.05); color:#fff; }
.btn-brand:active{ transform: translateY(1px); }

.btn-ghost{
  border:1px solid rgba(203,213,225,.95);
  color:var(--ink);
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{ background:#f1f5f9; }

.btn-outline-light{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.5);
  color:#fff;
}
.btn-outline-light:hover{ background: rgba(255,255,255,.18); color:#fff; }

.shadow-soft{ box-shadow:0 10px 30px rgba(2,8,23,.08); }

.section{ padding:3.2rem 0; }
@media (min-width: 992px){ .section{ padding:4rem 0; } }

.badge-usp{
  background: rgba(226,232,240,.92);
  color:#0f172a;
  border:1px solid rgba(203,213,225,.7);
}

.card-ghost{
  background: rgba(255,255,255,.92);
  border:1px solid #e5e7eb;
  border-radius: var(--radius);
}
.card-ghost .card-body{ padding:1.25rem; }
.card-ghost .card-img-top{
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.card-accent{
  border:1px solid rgba(34,230,207,.28);
  position:relative;
  overflow:hidden;
  box-shadow:0 14px 40px rgba(2,8,23,.10);
}
.card-accent::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(700px 260px at 10% 10%, rgba(34,230,207,.26), transparent 60%),
    radial-gradient(700px 260px at 90% 0%, rgba(37,99,235,.22), transparent 55%);
  pointer-events:none;
}
.card-accent > *{ position:relative; z-index:1; }

.list-check li{ padding-left:1.5rem; position:relative; }
.list-check li::before{ content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:800; }

.small, .text-muted{ color:var(--ink-soft)!important; }

.kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .6rem;
  border-radius:999px;
  background: rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.18);
  color: var(--ink);
  font-size:.85rem;
}

.gradient-text{
  background: linear-gradient(90deg, #ffffff, rgba(34,230,207,.92));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* HERO */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(900px 480px at 10% 20%, rgba(34,230,207,.18), transparent 60%),
    radial-gradient(1000px 520px at 90% 0%, rgba(37,99,235,.22), transparent 55%),
    #0b1020;
  color:#fff;
}
.hero > .container{ position:relative; z-index:1; }
.hero .lead{ color:#e2e8f0; }
.hero .kicker{
  background: rgba(34,230,207,.12);
  border:1px solid rgba(34,230,207,.22);
  color:#d7fff8;
}

/* HERO (mit Hintergrundbild per CSS-Variable) */
.hero--img{ background:#0b1020; }
.hero--img::before{
  content:"";
  position:absolute; inset:0;
  background: var(--hero-img) right/cover no-repeat;
}
.hero--img::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(11,16,32,.96) 0%,
      rgba(11,16,32,.78) 55%,
      rgba(11,16,32,.20) 100%),
    radial-gradient(900px 480px at 10% 20%, rgba(34,230,207,.18), transparent 60%),
    radial-gradient(1000px 520px at 90% 0%, rgba(37,99,235,.22), transparent 55%);
  pointer-events:none;
}

.hero-box{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
}

.qr-img{
  background:#fff;
  border-radius:16px;
  border:1px solid #e5e7eb;
  padding:.5rem;
}

.app-sticky{
  position:fixed; left:0; right:0; bottom:0;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid #e5e7eb;
  z-index: 9999;
}
.app-sticky .btn{ white-space:nowrap; }

.footer-dark{ background:#0b1020; color:#e2e8f0; }
.footer-dark a{ color:#e2e8f0; text-decoration:underline; text-underline-offset:.12em; }

/* Accessibility */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:1rem;
  top:1rem;
  width:auto;
  height:auto;
  padding:.5rem .75rem;
  background:#fff;
  z-index:10000;
  border-radius:.5rem;
  box-shadow:0 10px 30px rgba(2,8,23,.12);
}

/* Minor polish */
.navbar .navbar-brand{ letter-spacing:.2px; }

.site-search-wrap{
  position: relative;
  z-index: 1020;
}

.site-search{
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

.site-search input{
  border-radius: 999px;
  padding: .8rem 1rem;
  box-shadow: none;
}

.site-search input:focus{
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.12);
}

.site-search-results{
  position: absolute;
  top: calc(100% + .4rem);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 1rem;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  overflow: hidden;
  max-height: 70vh;
  overflow-y: auto;
}

.site-search-group-title{
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #6c757d;
  padding: .75rem 1rem .35rem;
  background: #fff;
}

.site-search-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .8rem 1rem;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid rgba(0,0,0,.04);
}

.site-search-item:hover,
.site-search-item.is-active{
  background: #f8f9fa;
}

.site-search-item small{
  color: #6c757d;
  white-space: nowrap;
}

.site-search-empty{
  padding: 1rem;
  color: #6c757d;
}

@media (max-width: 991.98px){
  .site-search{
    max-width: 100%;
  }

  .site-search input{
    font-size: 16px;
  }
}

/* ========================================================================
   GAMECHANGER UX PATCH – Taxi Chemnitz 24h
   Ziel: mehr mobile Anrufe/Anfragen, bessere Tastatur-/Touch-Nutzung,
   weniger Reibung bei Sticky-CTA, saubere Fokus-States.
   Kann ans Ende von static/css/czc.css angehängt werden.
   ======================================================================== */

:root{
  --focus-ring: rgba(34,230,207,.58);
  --sticky-bg: rgba(248,250,252,.96);
  --sticky-border: rgba(148,163,184,.35);
  --sticky-shadow: 0 -18px 46px rgba(15,23,42,.16);
  --tap-min: 44px;
}

/* Saubere, sichtbare Fokus-Zustände: wichtig für Qualität, Bedienbarkeit und Vertrauen. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.navbar-toggler:focus-visible{
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 .25rem rgba(37,99,235,.12);
}

/* Touch-Ziele: gerade Taxi-Seiten werden mobil unter Stress genutzt. */
.btn{
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}
.btn-sm{ min-height: 38px; }
.btn-lg{ min-height: 50px; }

/* Telefon-CTA etwas prominenter, ohne unseriös zu wirken. */
a[href^="tel:"]{
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}
@media (prefers-reduced-motion: no-preference){
  .hero a.btn-brand[href^="tel:"],
  .app-sticky a.btn-brand[href^="tel:"]{
    animation: taxiCtaPulse 3.2s ease-in-out infinite;
  }
  @keyframes taxiCtaPulse{
    0%, 100%{ box-shadow: 0 12px 30px rgba(37,99,235,.28); }
    50%{ box-shadow: 0 16px 42px rgba(37,99,235,.42), 0 0 0 .28rem rgba(34,230,207,.12); }
  }
}

/* Sticky-Bestellleiste: aus vorhandener Markup-Struktur einen echten Mobile-Conversion-Hebel machen. */
.app-sticky{
  background: var(--sticky-bg);
  border-top: 1px solid var(--sticky-border);
  box-shadow: var(--sticky-shadow);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.app-sticky .container{
  max-width: 1180px;
}
.app-sticky .small strong{
  display:inline-block;
  color: var(--ink);
}
.app-sticky .btn{
  border-radius: 999px;
  font-weight: 700;
}

/* Desktop braucht keine mobile Sticky-Bar. */
@media (min-width: 992px){
  .app-sticky{ display:none !important; }
}

/* Tablet/Mobile: Buttons gleichmäßig, keine abgeschnittenen CTAs. */
@media (max-width: 991.98px){
  body{ padding-bottom: 104px; }

  .app-sticky .container{
    display:grid !important;
    grid-template-columns: 1fr;
    gap:.55rem !important;
  }

  .app-sticky .small{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.65rem;
    padding-right: 2rem;
    line-height:1.2;
  }

  .app-sticky .small .text-muted{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .app-sticky .d-flex{
    width:100%;
    display:grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap:.45rem !important;
    align-items:stretch !important;
  }

  .app-sticky .d-flex .btn{
    width:100%;
    min-width:0;
    padding:.55rem .5rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .app-sticky .btn-link{
    position:absolute;
    top:.35rem;
    right:.45rem;
    width:34px;
    min-height:34px;
    padding:0;
    color:#64748b !important;
  }
}

/* Kleine Handys: maximaler Fokus auf die drei stärksten Bestellwege. App/PWA bleibt über Navigation und Seite erreichbar. */
@media (max-width: 575.98px){
  body{ padding-bottom: 112px; }

  .app-sticky .small{
    font-size:.82rem;
  }

  .app-sticky .small .text-muted{
    display:none;
  }

  .app-sticky .d-flex{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .app-sticky .d-flex a[data-app-smart="1"]{
    display:none !important;
  }

  .app-sticky .d-flex .btn{
    font-size:.86rem;
  }
}

/* Suchleiste: als Website-Navi stärker und sauberer auf Mobile. */
.site-search-wrap{
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
}
.site-search input{
  border:1px solid rgba(37,99,235,.18);
  background: rgba(255,255,255,.98);
}
.site-search input:focus{
  border-color: rgba(37,99,235,.42);
  box-shadow: 0 0 0 .22rem rgba(37,99,235,.13);
}
.site-search-results{
  z-index: 1040;
}

/* Snippet-/AEO-Boxen und Trust-Cards wirken klarer ohne Layout-Bruch. */
.card-ghost{
  box-shadow: 0 10px 30px rgba(2,8,23,.055);
}
.card-ghost:hover{
  border-color: rgba(37,99,235,.20);
}

/* Anchors landen nicht unter Sticky-Navbar/Suche. */
[id]{ scroll-margin-top: 96px; }

/* Bewegungen reduzieren, wenn das Gerät / der Nutzer das vorgibt. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Fallback für Browser ohne Backdrop-Filter. */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))){
  .app-sticky,
  .btn-ghost,
  .hero-box{
    background:#ffffff;
  }
  .hero-box{
    background:rgba(15,23,42,.86);
  }
}

/* ========================================================================
   HOTFIX 2026-07-11 – Mobile Sticky-CTA lesbar machen
   Problem: Auf kleinen Smartphones wurden die CTA-Buttons unten als enge
   Pillen/Kreise dargestellt und der Text wurde abgeschnitten.
   Lösung: Unter 576px Titelzeile ausblenden, nur 3 Kernaktionen anzeigen,
   Buttons als breite, gut lesbare Kacheln mit Zeilenumbruch rendern.
   ======================================================================== */
@media (max-width: 575.98px){
  body{
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .app-sticky{
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 0 !important;
    background: rgba(248,250,252,.98) !important;
    border-top: 1px solid rgba(148,163,184,.38) !important;
    box-shadow: 0 -12px 34px rgba(15,23,42,.14) !important;
  }

  .app-sticky .container{
    width: 100% !important;
    max-width: none !important;
    display: block !important;
    padding: .48rem .7rem calc(.48rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Auf sehr kleinen Displays nimmt die Textzeile links zu viel Platz weg.
     Die Seite selbst und die Buttons erklären den Kontext bereits klar. */
  .app-sticky .small{
    display: none !important;
  }

  .app-sticky .d-flex{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .5rem !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  /* App/PWA bleibt im Menü und auf der Seite erreichbar; unten zählen die 3 schnellsten Wege. */
  .app-sticky .d-flex > a[data-app-smart="1"]{
    display: none !important;
  }

  /* Das kleine X war auf kleinen Displays zusätzliche Reibung und hat Platz/Lesbarkeit verschlechtert. */
  .app-sticky .btn-link{
    display: none !important;
  }

  .app-sticky .d-flex > a.btn{
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    height: auto !important;
    padding: .42rem .25rem !important;
    border-radius: 15px !important;
    font-size: clamp(.76rem, 3.25vw, .9rem) !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .18rem !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.10) !important;
    -webkit-tap-highlight-color: rgba(37,99,235,.14);
  }

  .app-sticky .d-flex > a.btn-ghost{
    background: #fff !important;
    color: #0f172a !important;
    border: 1px solid rgba(203,213,225,.92) !important;
  }

  .app-sticky .d-flex > a.btn-brand{
    color: #fff !important;
    border: 1px solid rgba(37,99,235,.20) !important;
  }
}

/* Extrem schmale Geräte: Beschriftung weiter straffen, aber weiterhin lesbar. */
@media (max-width: 360px){
  .app-sticky .container{
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }
  .app-sticky .d-flex{
    gap: .38rem !important;
  }
  .app-sticky .d-flex > a.btn{
    min-height: 48px !important;
    font-size: .74rem !important;
    border-radius: 13px !important;
  }
}

/* ========================================================================
   MOBILE STICKY CTA READABILITY FIX – 2026-07-11
   Zweck: Die mobile Taxi-Leiste darf auf iPhone/Safari nicht als kleine,
   unlesbare Pillen/Kreise erscheinen. Titel immer eigene Zeile, Buttons
   darunter als echte Touch-Flächen. Risikoarm: nur .app-sticky betroffen.
   ======================================================================== */

@media (max-width: 991.98px){
  body{
    /* genug Platz, damit die Leiste keine Inhalte verdeckt */
    padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .app-sticky{
    left: max(.55rem, env(safe-area-inset-left, 0px)) !important;
    right: max(.55rem, env(safe-area-inset-right, 0px)) !important;
    bottom: max(.45rem, env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    border: 1px solid rgba(148,163,184,.38) !important;
    border-radius: 18px !important;
    overflow: visible !important;
    padding: 0 !important;
    background: rgba(248,250,252,.97) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 -12px 34px rgba(15,23,42,.18), 0 8px 28px rgba(15,23,42,.10) !important;
  }

  .app-sticky .container,
  .app-sticky .container.d-flex{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: .42rem !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    flex-direction: column !important; /* Fallback falls ein Browser grid ignoriert */
    flex-wrap: nowrap !important;
    padding: .55rem .62rem .62rem !important;
  }

  .app-sticky .container > .small{
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .35rem !important;
    padding: 0 2.05rem 0 0 !important;
    margin: 0 !important;
    line-height: 1.08 !important;
  }

  .app-sticky .container > .small strong{
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: .86rem !important;
    line-height: 1.1 !important;
    color: #0f172a !important;
  }

  .app-sticky .container > .small .text-muted{
    display: none !important;
  }

  .app-sticky .container > .d-flex,
  .app-sticky .container > .d-flex.d-flex{
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: .42rem !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    flex-wrap: nowrap !important;
  }

  .app-sticky .container > .d-flex > .btn:not(.btn-link){
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: .43rem .28rem !important;
    border-radius: 13px !important;
    font-size: clamp(.72rem, 2.35vw, .84rem) !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .app-sticky .container > .d-flex > .btn-link{
    position: absolute !important;
    top: .35rem !important;
    right: .45rem !important;
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    color: #64748b !important;
    background: rgba(255,255,255,.72) !important;
  }
}

@media (max-width: 575.98px){
  body{
    padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .app-sticky .container,
  .app-sticky .container.d-flex{
    padding: .5rem .55rem .58rem !important;
    gap: .38rem !important;
  }

  .app-sticky .container > .d-flex,
  .app-sticky .container > .d-flex.d-flex{
    /* Online bekommt etwas mehr Platz, weil der Text länger ist */
    grid-template-columns: minmax(0,1.02fr) minmax(0,1.24fr) minmax(0,1.08fr) !important;
    gap: .36rem !important;
  }

  .app-sticky .container > .d-flex > a[data-app-smart="1"]{
    display: none !important;
  }

  .app-sticky .container > .d-flex > .btn:not(.btn-link){
    min-height: 45px !important;
    padding: .40rem .18rem !important;
    font-size: clamp(.70rem, 3.15vw, .78rem) !important;
  }
}

@media (max-width: 380px){
  .app-sticky .container > .small strong{
    font-size: .80rem !important;
  }

  .app-sticky .container > .d-flex > .btn:not(.btn-link){
    min-height: 44px !important;
    font-size: 0 !important; /* extrem kleine Geräte: klare Kurzlabels per ::after */
  }

  .app-sticky .container > .d-flex > a:nth-of-type(1)::after{
    content: "📞 Anrufen";
    font-size: .72rem;
    line-height: 1.05;
  }
  .app-sticky .container > .d-flex > a:nth-of-type(2)::after{
    content: "🚕 Online";
    font-size: .72rem;
    line-height: 1.05;
  }
  .app-sticky .container > .d-flex > a:nth-of-type(3)::after{
    content: "💬 WhatsApp";
    font-size: .72rem;
    line-height: 1.05;
  }
}