/* ============================================================
   cartoso — Basisschicht
   Reset, Typografie, sichtbarer Fokus, Hilfsklassen, Bewegungsschutz.
   Lädt nach tokens.css und vor allen seitenspezifischen Stylesheets.
   ============================================================ */

/* Die vier Wurzelklassen, unter denen unser Markup tatsächlich steht.
   .cartoso-v3 und .caradag-saas-page dürfen NICHT umbenannt werden — die
   wpautop-Guards in class-landing-pages.php prüfen auf genau diese Namen. */
.cts-scope,
.caradag-saas-page,
.cartoso-v3,
.caradag-partner-dashboard {
  font-family: var(--cartoso-font-body);
  color: var(--cartoso-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cts-scope h1, .cts-scope h2, .cts-scope h3,
.caradag-saas-page h1, .caradag-saas-page h2, .caradag-saas-page h3,
.cartoso-v3 h1, .cartoso-v3 h2, .cartoso-v3 h3,
.caradag-partner-dashboard h1, .caradag-partner-dashboard h2, .caradag-partner-dashboard h3 {
  font-family: var(--cartoso-font-display);
  letter-spacing: -0.02em;
}

/* ---------- Sichtbarer Fokus ----------
   Zweifarbig: Der Innenring in Flächenfarbe garantiert Sichtbarkeit auch AUF
   einem Primärknopf. Eine einzelne outline in Aktionsfarbe wäre dort 1:1 und
   damit unsichtbar. Vorher gab es im gesamten Portal keine Fokusregel. */
.cts-scope :focus-visible,
.caradag-saas-page :focus-visible,
.cartoso-v3 :focus-visible,
.caradag-partner-dashboard :focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--cartoso-surface),
    0 0 0 4px var(--cartoso-focus);
  border-radius: var(--cartoso-radius-sm);
}

/* Auf getönten Flächen soll der Innenring die Tönung aufnehmen, nicht Weiß. */
.caradag-saas-page .caradag-card :focus-visible,
.caradag-saas-page .caradag-tab-panel :focus-visible {
  box-shadow:
    0 0 0 2px var(--cartoso-surface),
    0 0 0 4px var(--cartoso-focus);
}

/* ---------- Nur für Screenreader ---------- */
.cts-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Sichtbar, sobald das Element den Fokus bekommt — für Sprunglinks. */
.cts-sr-only-focusable:focus,
.cts-sr-only-focusable:focus-visible {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ---------- Klickziele ----------
   WCAG 2.2, 2.5.8 AA: mindestens 24×24 px. Wir nehmen 44 px, weil das die
   Größe ist, die auf dem Telefon tatsächlich trifft. */
.caradag-saas-page button,
.caradag-saas-page .caradag-btn,
.caradag-saas-page [role='tab'],
.cartoso-v3 button {
  min-height: 44px;
}

/* Statusabzeichen sind keine Bedienelemente. */
.caradag-saas-page .caradag-badge,
.caradag-saas-page .caradag-vehicle-status,
.caradag-saas-page .caradag-vehicle-job-status {
  min-height: 0;
}

/* ---------- Sticky-Elemente dürfen den Fokus nicht verdecken ----------
   WCAG 2.2, 2.4.11 AA. */
.caradag-saas-page .caradag-tab-panel > *,
.cartoso-v3 section {
  scroll-margin-top: 88px;
  scroll-margin-bottom: 96px;
}

/* ---------- Seitenhülle des WordPress-Themes ----------
   Übernommen aus design-system.css, als die Datei entfiel: Von ihren 418
   Zeilen waren das die einzigen drei Regeln mit Wirkung — die gesamte
   .cts-*-Komponentenschicht hatte in Markup und JS keinen einzigen Aufrufer.

   Der Seitentitel steht doppelt, das Portal hat eine eigene Überschrift. Der
   Theme-Header bleibt dagegen sichtbar: Er trägt Logo und Navigation und ist
   der einzige Weg zurück zur Website. */
body.caradag-saas-focus .entry-title,
body.caradag-saas-focus .wp-block-post-title {
  display: none !important;
}

/* Unsere Wurzelklassen gestalten nur ihren eigenen Baum; der Seitenhintergrund
   des Themes bliebe sonst hell und zeigte sich als Rand um die Karten. */
body.caradag-saas-focus,
body.caradag-partner-focus {
  background: var(--cartoso-surface-2) !important;
}

body.caradag-saas-focus .wp-site-blocks,
body.caradag-partner-focus .wp-site-blocks {
  background: var(--cartoso-surface-2);
}

/* ---------- Bewegung ----------
   prefersReducedMotion ist Projektvorgabe, nicht nur Systemwunsch. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}