/* =============================================================
   RS – Vereinheitlichte CTAs + Mobile Actionbar (final)
   Version: 2025-11-11
   - CTAs einheitlich (Hero, Hinweis, Kfz, Karten, Kontakt)
   - Actionbar NUR mobil sichtbar (<=768px), Desktop immer AUS
   ============================================================= */

:root{
  --rs-primary: #11b4c9;
  --rs-dark: #0e2a37;
  --rs-radius: 14px;
  --rs-shadow-sm: 0 6px 18px rgba(17,180,201,.25);
  --rs-shadow-md: 0 10px 26px rgba(17,180,201,.28);
}

/* === CTA Utility (kann optional als Klasse genutzt werden) === */
.rs-cta{
  appearance: none !important;
  border: 2px solid transparent !important;
  border-radius: var(--rs-radius) !important;
  padding: 14px 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  background: var(--rs-primary) !important;
  color: var(--rs-dark) !important;
  box-shadow: var(--rs-shadow-sm) !important;
  transition: transform .08s ease, box-shadow .2s ease,
              background-color .2s ease, color .2s ease, border-color .2s ease !important;
  cursor: pointer !important;
}
.rs-cta:hover{ transform: translateY(-1px) !important; filter: brightness(1.03) !important; box-shadow: var(--rs-shadow-md) !important; }
.rs-cta:focus-visible{ outline: none !important; border-color: rgba(255,255,255,.9) !important; }
.rs-cta:active{ transform: translateY(0) !important; }

/* === 1) Kfz-Rechner-Button === */
#loadRechner.rs-kfz-btn{ composes: rs-cta; }
#loadRechner.rs-kfz-btn{
  appearance: none !important; border: 2px solid transparent !important; border-radius: var(--rs-radius) !important;
  padding: 14px 18px !important; font-weight: 700 !important; line-height: 1 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-height: 48px !important; background: var(--rs-primary) !important; color: var(--rs-dark) !important;
  box-shadow: var(--rs-shadow-sm) !important; transition: transform .08s ease, box-shadow .2s ease,
  background-color .2s ease, color .2s ease, border-color .2s ease !important; cursor: pointer !important;
}
#loadRechner.rs-kfz-btn:hover{ transform: translateY(-1px) !important; filter: brightness(1.03) !important; box-shadow: var(--rs-shadow-md) !important; }
#loadRechner.rs-kfz-btn:focus-visible{ outline: none !important; border-color: rgba(255,255,255,.9) !important; }
#loadRechner.rs-kfz-btn:active{ transform: translateY(0) !important; }

/* === 2) Hero-CTAs === */
.hero-overlay-symbol .hero-ctas a{
  appearance: none !important; border-radius: var(--rs-radius) !important; padding: 14px 18px !important;
  font-weight: 700 !important; line-height: 1 !important; display: inline-flex !important;
  align-items: center !important; justify-content: center !important; min-height: 48px !important;
  transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease !important;
  box-shadow: var(--rs-shadow-sm) !important;
}
.hero-overlay-symbol .hero-ctas a.btn-primary{ background: var(--rs-primary) !important; color: var(--rs-dark) !important; border: 2px solid transparent !important; }
.hero-overlay-symbol .hero-ctas a.btn-primary:hover{ transform: translateY(-1px) !important; filter: brightness(1.03) !important; box-shadow: var(--rs-shadow-md) !important; }
.hero-overlay-symbol .hero-ctas a.btn-outline{ background: transparent !important; color: var(--rs-primary) !important; border: 2px solid var(--rs-primary) !important; }
.hero-overlay-symbol .hero-ctas a.btn-outline:hover{ background: var(--rs-primary) !important; color: var(--rs-dark) !important; transform: translateY(-1px) !important; box-shadow: var(--rs-shadow-md) !important; }
/* Mobile: Buttons im Hero ausblenden – nur Logo + Pill */
@media (max-width: 768px){
  .hero-overlay-symbol .hero-ctas{ display:none !important; }
  .hero-overlay-symbol .hero-text .muted.pill{ display:block !important; margin-top:10px !important; }
}

/* === 3) Hinweis-Sektion === */
.container.notice-wrap .notice .btn{
  appearance: none !important; border-radius: var(--rs-radius) !important; padding: 14px 18px !important;
  font-weight: 700 !important; line-height: 1 !important; min-height: 48px !important; border: 2px solid transparent !important;
  transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease !important;
  box-shadow: var(--rs-shadow-sm) !important;
}
.container.notice-wrap .notice .btn.primary{ background: var(--rs-primary) !important; color: var(--rs-dark) !important; }
.container.notice-wrap .notice .btn.primary:hover{ transform: translateY(-1px) !important; filter: brightness(1.03) !important; box-shadow: var(--rs-shadow-md) !important; }
.container.notice-wrap .notice .btn:not(.primary){ background: transparent !important; color: var(--rs-primary) !important; border-color: var(--rs-primary) !important; }
.container.notice-wrap .notice .btn:not(.primary):hover{ background: var(--rs-primary) !important; color: var(--rs-dark) !important; transform: translateY(-1px) !important; box-shadow: var(--rs-shadow-md) !important; }
@media (max-width: 768px){ .container.notice-wrap .notice .btn{ width:100% !important; max-width:360px !important; } }

/* === 4) Leistungen-Karten === */
#leistungen .card .btn{
  appearance: none !important; border-radius: var(--rs-radius) !important; padding: 12px 14px !important;
  font-weight: 700 !important; line-height: 1 !important; min-height: 44px !important; border: 2px solid transparent !important;
  background: var(--rs-primary) !important; color: var(--rs-dark) !important; box-shadow: var(--rs-shadow-sm) !important;
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease !important;
}
#leistungen .card:hover .btn, #leistungen .card .btn:hover{ transform: translateY(-1px) !important; filter: brightness(1.03) !important; box-shadow: var(--rs-shadow-md) !important; }

/* === 5) Kontaktformular === */
#kontakt .contact-form .btn.primary{
  appearance: none !important; border: 2px solid transparent !important; border-radius: var(--rs-radius) !important; padding: 14px 18px !important;
  font-weight: 700 !important; line-height: 1 !important; min-height: 48px !important; background: var(--rs-primary) !important; color: var(--rs-dark) !important;
  box-shadow: var(--rs-shadow-sm) !important; transition: transform .08s ease, box-shadow .2s ease, filter .2s ease !important;
}
#kontakt .contact-form .btn.primary:hover{ transform: translateY(-1px) !important; filter: brightness(1.03) !important; box-shadow: var(--rs-shadow-md) !important; }
#kontakt .contact-form .btn.primary:active{ transform: translateY(0) !important; }

/* === Fokusdarstellung === */
.hero-overlay-symbol .hero-ctas a:focus-visible,
.container.notice-wrap .notice .btn:focus-visible,
#leistungen .card .btn:focus-visible,
#kontakt .contact-form .btn.primary:focus-visible,
#loadRechner.rs-kfz-btn:focus-visible{
  outline: none !important; border-color: rgba(255,255,255,.9) !important;
}

/* =============================================================
   ACTIONBAR – nur mobil sichtbar (<=768px). Kein globales display!
   ============================================================= */
@media (max-width: 768px){
  .rs-actionbar{
    display: flex !important;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(14,42,55,0.85);
    backdrop-filter: blur(4px);
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 999;
    box-shadow: 0 -6px 24px rgba(0,0,0,.18);
  }
  .rs-actionbar a{
    appearance: none !important;
    flex: 1 1 0;
    text-align: center;
    border: 2px solid transparent !important;
    border-radius: var(--rs-radius) !important;
    padding: 12px 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    background: var(--rs-primary) !important;
    color: var(--rs-dark) !important;
    min-height: 44px !important;
    box-shadow: var(--rs-shadow-sm) !important;
    transition: transform .08s ease, box-shadow .2s ease, filter .2s ease !important;
  }
  .rs-actionbar a:hover{ transform: translateY(-1px) !important; filter: brightness(1.03) !important; box-shadow: var(--rs-shadow-md) !important; }
}

/* Desktop: garantiert ausblenden */
@media (min-width: 769px){
  .rs-actionbar{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* =============================================================
   ACTIONBAR – Mobile Fade/Slide Animations
   ============================================================= */
@media (max-width: 768px){
  .rs-actionbar{
    transform: translateY(12px);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
    will-change: transform, opacity;
  }
  .rs-actionbar.is-visible{
    transform: translateY(0);
    opacity: 1;
  }
  .rs-actionbar.is-hidden{
    transform: translateY(12px);
    opacity: 0;
  }
}