/* Gemeinsame Bausteine der Website. Bis 01.08.2026 stand dieses CSS in jeder
   einzelnen Seite eingebettet und wurde bei jedem Aufruf neu uebertragen.
   Als eigene Datei laesst der Browser es im Zwischenspeicher. */

/* ===== Navigation, Aufklappmenue — aus components/ultra-navigation-global.php ausgelagert am 01.08.2026 ===== */
/* Dropdown Specific Styles */
.ultra-nav-item {
  position: relative;
}

.ultra-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5rem;
  background: rgba(8, 8, 12, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 245, 255, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  min-width: 680px;
  max-width: 750px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 245, 255, 0.1);
  z-index: 10500 !important;
}

/* Desktop-only: Services dropdown click behavior */
@media (min-width: 769px) {
  .ultra-nav-item.has-dropdown[data-click-only].dropdown-open .ultra-nav-dropdown,
  .ultra-nav-item.has-dropdown[data-click-only][style*="--force-open"] .ultra-nav-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
    z-index: 10500 !important;
    position: absolute !important;
  }

  .ultra-nav-item.has-dropdown[data-click-only]:hover .ultra-nav-dropdown,
  .ultra-nav-item.has-dropdown[data-click-only]:focus .ultra-nav-dropdown,
  .ultra-nav-item.has-dropdown[data-click-only] .ultra-nav-link:hover + .ultra-nav-dropdown,
  .ultra-nav-item.has-dropdown[data-click-only] .ultra-nav-link:focus + .ultra-nav-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
  }

  body .ultra-nav-global .ultra-nav-menu .ultra-nav-item.has-dropdown[data-click-only]:hover .ultra-nav-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
  }

  body .ultra-nav-global .ultra-nav-menu .ultra-nav-item.has-dropdown[data-click-only].dropdown-open .ultra-nav-dropdown {
    z-index: 10500 !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
  }
}

/* Other dropdowns (if any) can still use hover */
.ultra-nav-item.has-dropdown:not([data-click-only]):hover .ultra-nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ultra-nav-dropdown-arrow {
  margin-left: 0.5rem;
  font-size: 0.7rem;
  transition: transform 0.3s ease;
  color: rgba(255, 255, 255, 0.6);
  vertical-align: middle;
}

/* Services dropdown arrow - click only */
.ultra-nav-item.has-dropdown[data-click-only].dropdown-open .ultra-nav-dropdown-arrow {
  transform: rotate(180deg) !important;
  color: var(--primary-color) !important;
}

/* Other dropdown arrows can still use hover */
.ultra-nav-item.has-dropdown:not([data-click-only]):hover .ultra-nav-dropdown-arrow {
  transform: rotate(180deg);
  color: var(--primary-color);
}

.ultra-nav-dropdown-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.ultra-nav-group-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(0, 245, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 0.4rem 0.5rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ultra-nav-dropdown-grid {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ultra-nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  transition: all 0.2s ease;
}

.ultra-nav-dropdown-item:hover {
  background: rgba(0, 245, 255, 0.08);
  border-color: rgba(0, 245, 255, 0.15);
  color: #00f5ff;
}

.ultra-nav-dropdown-icon {
  font-size: 1rem;
  width: 1.2rem;
  text-align: center;
}

.ultra-nav-dropdown-text {
  font-size: 0.88rem;
  font-weight: 500;
}

/* Mobile-Menü Conversion-CTAs: nur ≤768px sichtbar */
.ultra-nav-mobile-actions { display: none; }

/* Mobile Dropdown - !important needed to override JS inline styles */
@media (max-width: 768px) {
  .ultra-nav-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 245, 255, 0.2);
  }
  .unma-call, .unma-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 1.25rem;
    border-radius: 12px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    min-height: 50px;
  }
  .unma-call {
    background: linear-gradient(135deg, #00f5ff, #00c4cc);
    color: #000;
    box-shadow: 0 2px 12px rgba(0, 245, 255, 0.25);
  }
  .unma-contact {
    background: rgba(0, 245, 255, 0.1);
    border: 1px solid rgba(0, 245, 255, 0.3);
    color: #00f5ff;
  }
  .ultra-nav-dropdown,
  .ultra-nav-item.has-dropdown .ultra-nav-dropdown,
  .ultra-nav-item.has-dropdown[data-click-only] .ultra-nav-dropdown,
  .ultra-nav-item.has-dropdown[data-click-only].dropdown-open .ultra-nav-dropdown {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    margin-top: 0.5rem;
    min-width: auto !important;
    max-width: 100% !important;
    border-radius: 12px;
    box-shadow: none;
  }

  .ultra-nav-dropdown,
  .ultra-nav-item.has-dropdown .ultra-nav-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    display: block !important;
    padding: 0;
  }

  .ultra-nav-item.has-dropdown.dropdown-open .ultra-nav-dropdown {
    max-height: 800px;
    padding: 0.8rem;
  }

  .ultra-nav-item.has-dropdown:hover .ultra-nav-dropdown:not(.dropdown-open .ultra-nav-dropdown) {
    max-height: 0;
  }

  .ultra-nav-dropdown-groups {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .ultra-nav-dropdown-group {
    padding: 0;
  }

  .ultra-nav-group-label {
    font-size: 0.65rem;
    padding: 0 0.3rem 0.4rem;
    margin-bottom: 0.2rem;
  }

  .ultra-nav-dropdown-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem;
  }

  .ultra-nav-dropdown-item {
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.3rem;
    text-align: center;
    min-height: auto;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
  }

  .ultra-nav-dropdown-icon {
    font-size: 1.3rem;
  }

  .ultra-nav-dropdown-text {
    font-size: 0.7rem;
    line-height: 1.2;
  }
}
  @keyframes rsSbPulse {
    0%  { transform:scale(.7); opacity:1; }
    100%{ transform:scale(2.3); opacity:0; }
  }

  /* Tablet */
  
  /* Mobile */
  
  /* Die Beschriftung "Alle Zeiten" ist 116 px breit. Mit ihr passte die
     Leiste zwischen 721 und rund 790 px nicht in eine Zeile — gemessen am
     01.08.2026 bei 760 px: 117 px hoch statt 55. */
  /* Der Punkt-Trenner (ab 721 px sichtbar) und die Beschriftung "Alle Zeiten"
     (ab 821 px) kosteten zusammen mehr Breite als vorhanden war: bei 760 px
     war die Leiste 109 px hoch statt 55, bei 821 px sogar 117. Beide kommen
     jetzt erst ab 900 px dazu. */
  
  /* Untereinander kostete die Leiste 100 px ganz oben auf jeder Seite, gemessen
     am 01.08.2026 bei 390 px Fensterbreite. Nebeneinander sind es rund 45. Dafuer
     traegt "UPS" den Zusatz "Access Point" nur ab 520 px. */
  
  /* Unter 480 px passen beide Angaben nicht nebeneinander: bei 320 px wurde
     „öffnet Di 12:00" abgeschnitten. Dort steht nur der Werkstatt-Status, dafuer
     mit vollem Namen und mit dem Pfeil — der fuehrt auf die Seite mit allen
     Zeiten einschliesslich UPS. Die Beschriftung „Alle Zeiten" passt dort nicht
     (bei 320 px braeuchte die Zeile 354 von 291 verfuegbaren Pixeln). */
  

/* ===== Sticky-Leiste am unteren Rand — aus components/sticky-cta-bar.php ausgelagert am 01.08.2026 ===== */
#sticky-cta-bar{position:fixed;bottom:0;left:0;right:0;z-index:9998;background:rgba(10,10,15,.95);backdrop-filter:blur(12px);border-top:1px solid rgba(0,245,255,.2);padding:.6rem 1rem;transform:translateY(100%);transition:transform .3s ease;display:none}
  #sticky-cta-bar.visible{display:block;transform:translateY(0)}
  .sticky-cta-phone{display:inline-flex;align-items:center;gap:.5rem;background:rgba(0,245,255,.1);border:1px solid rgba(0,245,255,.3);color:#00f5ff;text-decoration:none;padding:.55rem 1.2rem;border-radius:999px;font-size:.9rem;font-weight:600;transition:all .2s ease}
  .sticky-cta-phone:hover{background:rgba(0,245,255,.2)}
  .sticky-cta-btn{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,#00f5ff,#00c4cc);color:#000;text-decoration:none;padding:.55rem 1.4rem;border-radius:999px;font-size:.9rem;font-weight:700;transition:all .2s ease;box-shadow:0 2px 12px rgba(0,245,255,.25)}
  .sticky-cta-btn:hover{transform:scale(1.03);box-shadow:0 4px 20px rgba(0,245,255,.35)}

/* ---------------------------------------------------------------------------
   Kachelraster: die letzte Zeile fuellt die Breite
   ---------------------------------------------------------------------------
   Regel des Hauses: kein Raster darf mit einer angebrochenen letzten Zeile
   enden. Statt fester Spalten bekommt jede Kachel eine Wunschbreite
   (--rs-basis) und darf wachsen; die letzte Zeile verteilt den Rest unter
   ihren Kacheln. Gemessen am 01.08.2026: 109 angebrochene letzte Zeilen.
   --------------------------------------------------------------------------- */
.rs-fuellt { display: flex; flex-wrap: wrap; }
.rs-fuellt > * { flex: 1 1 var(--rs-basis, 260px); min-width: 0; }

/* ---------------------------------------------------------------------------
   Vertrauenszeile im Hero (service-hero-trust)
   ---------------------------------------------------------------------------
   19 Seiten nutzen das Markup, aber nur regensburg-kumpfmuehl trug die
   Stilregel — ueberall sonst stapelten sich die Punkte ungestylt
   untereinander (gesehen 02.08.2026 auf /standorte/schwandorf/). Regel
   deshalb zentral; die Kopie in kumpfmuehl darf bleiben, sie ist identisch. */
.service-hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  max-width: 860px;
  margin: 0 auto;
}
.service-hero-trust .trust-item {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1.1rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50px;
  color: rgba(255,255,255,.94);
  font-size: .86rem;
  font-weight: 500;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.service-hero-trust .trust-item:hover {
  background: rgba(0,245,255,.09);
  border-color: rgba(0,245,255,.38);
  color: #fff;
  transform: translateY(-2px);
}
.service-hero-trust .trust-icon { font-size: 1rem; line-height: 1; }
@media (max-width: 768px) {
  .service-hero-trust { gap: .5rem; }
  .service-hero-trust .trust-item { padding: .45rem .9rem; font-size: .78rem; }
}

/* ---------------------------------------------------------------------------
   FAQ-Aufklapper
   ---------------------------------------------------------------------------
   Diese zehn Regeln standen am 02.08.2026 auf 41 Seiten wortgleich im
   Seitenkopf. Sie stehen jetzt einmal hier; Seiten mit abweichenden Werten
   behalten ihren eigenen Block, der als Inline-<style> spaeter kommt und
   deshalb weiterhin gewinnt.
   --------------------------------------------------------------------------- */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
  background: var(--glass-bg, rgba(255,255,255,.08));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border, rgba(255,255,255,.12));
  border-radius: 16px;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: all .3s ease;
}
.faq-item:hover { border-color: var(--primary-color, #00f5ff); }
.faq-question {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.5rem 2rem; cursor: pointer; transition: background .3s ease;
}
.faq-question:hover { background: rgba(0,245,255,.05); }
.faq-question h3 {
  font-size: 1.1rem; font-weight: 600;
  color: var(--text-primary, #fff); margin: 0;
}
.faq-toggle {
  width: 2rem; height: 2rem;
  background: var(--primary-color, #00f5ff);
  color: var(--dark-bg, #0a0a0b);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 300; flex-shrink: 0;
  transition: transform .3s ease;
}
.faq-answer {
  padding: 0 2rem 1.5rem;
  color: var(--text-secondary, rgba(255,255,255,.7));
  line-height: 1.7;
  display: none;
}
.faq-item.active .faq-answer { display: block; }
.faq-item.active .faq-toggle { transform: rotate(45deg); }
@media (max-width: 640px) {
  .faq-question { padding: 1rem; }
  .faq-answer { padding: 0 1rem 1rem; }
  .faq-question h3 { font-size: 1rem; margin-right: 1rem; }
  .faq-toggle { width: 1.75rem; height: 1.75rem; font-size: 1rem; }
}