/* ============================================
   site.css, WerkUp
   Seitenuebergreifende Bausteine, die auf jeder Seite gebraucht werden
   und deshalb in keinem der Seiten-Stylesheets liegen koennen:
     · Sticky CTA fuer Mobilgeraete
     · Fokusring und Reduced-Motion als gemeinsame Grundlage

   Die Farbwerte kommen aus den Tokens des jeweiligen Seiten-Stylesheets.
   Die Fallbacks in var(...) greifen nur, falls eine Seite ein Token nicht
   definiert, die fuenf :root-Bloecke im Projekt sind nicht deckungsgleich.
   ============================================ */


/* ══════════════════════════════════════════════════════════
   STICKY CTA (nur Mobilgeraete)
   Erscheint erst, wenn der Hero aus dem Blick gescrollt ist, solange
   der Hero sichtbar ist, steht dort bereits ein Primaer-CTA.
   ══════════════════════════════════════════════════════════ */
.wu-mcta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;            /* unter dem Datenschutzbanner (1000) */
  display: none;
  gap: 0.65rem;
  align-items: stretch;
  padding: 0.6rem 0.9rem;
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg-card, #ffffff);
  border-top: 1px solid var(--border, rgba(19,35,42,0.09));
  box-shadow: 0 -2px 10px rgba(0,0,0,0.06), 0 -12px 32px rgba(0,0,0,0.10);
  transform: translateY(110%);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.wu-mcta.is-visible { transform: translateY(0); }

/* Liegt das Datenschutzbanner noch an, rueckt der CTA darueber.
   Der Wert wird von components.js aus der echten Bannerhoehe gesetzt. */
.wu-mcta.is-above-banner {
  bottom: var(--wu-banner-h, 0px);
  padding-bottom: 0.6rem;
}

.wu-mcta-primary,
.wu-mcta-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  border-radius: 0.7rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.wu-mcta-primary {
  flex: 1 1 auto;
  padding: 0 1.1rem;
  background: var(--accent, #ca0013);
  color: #fff;
}
.wu-mcta-primary:hover { background: var(--accent-h, #e8001a); }
.wu-mcta-tel {
  flex: 0 0 auto;
  width: 48px;
  background: var(--bg-2, #eaedf0);
  color: var(--text, #13232a);
  font-size: 1.05rem;
}
.wu-mcta-tel:hover {
  background: var(--accent, #ca0013);
  color: #fff;
}

/* Sichtbarer Fokusring, die Leiste liegt ueber dem Inhalt, ein
   unsichtbarer Fokus waere hier besonders stoerend. */
.wu-mcta a:focus-visible {
  outline: 3px solid var(--accent, #ca0013);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .wu-mcta { display: flex; }
  /* Platz am Seitenende, damit die Leiste den letzten Inhalt nicht
     verdeckt. Wird von components.js gesetzt, sobald die Leiste da ist. */
  body.wu-has-mcta { padding-bottom: var(--wu-mcta-h, 72px); }
}

@media (prefers-reduced-motion: reduce) {
  .wu-mcta { transition: none; }
}


/* ══════════════════════════════════════════════════════════
   BARRIEREFREIHEIT, seitenuebergreifende Grundlage

   site.css wird auf jeder Seite als letztes Stylesheet geladen. Die
   folgenden Regeln greifen daher auch dort, wo das jeweilige Seiten-
   Stylesheet nichts Eigenes definiert (kontakt.css, legal.css, faq.css,
   ueber-uns.css und neuigkeiten.css hatten weder Fokusring noch eine
   Reduced-Motion-Regel).
   ══════════════════════════════════════════════════════════ */

/* Sichtbarer Fokusring fuer Tastaturbedienung. Bewusst :focus-visible,
   bei Mausklick bleibt der Ring aus, bei Tab-Navigation erscheint er. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent, #ca0013);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Auf dunklem Grund waere Rot auf Dunkelblau zu kontrastarm. */
.dark-bg a:focus-visible,
.dark-bg button:focus-visible,
.footer a:focus-visible,
.navbar a:focus-visible,
.navbar button:focus-visible,
.mob-drawer a:focus-visible,
.mob-drawer button:focus-visible {
  outline-color: #ffffff;
}

/* Wer Bewegung reduziert haben moechte, bekommt keine.
   Nicht display:none, Inhalte, die per Scroll-Animation eingeblendet
   werden, muessen sichtbar bleiben. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
  /* Scroll-Animationen aus components.js: Endzustand sofort. */
  [data-scroll] { opacity: 1 !important; transform: none !important; }
}