/* TOJA · Korrekturen aus der Endabnahme vom 20.09.2026
   ----------------------------------------------------------------------
   A9  Die Beschriftungen der Handy-Schaltflächen waren unlesbar: Die
       Grundfarbe für Verweise aus dem Design-Baukasten überschreibt das
       Weiß, das der Entwurf für .m-actionbar__btn und .mobile-drawer__cta
       vorsieht. Hier wird es zurückgeholt.
       Nachtrag: Die erste Fassung dieser Regeln stand hinter `.pg` und
       hat damit nie gegriffen - die Leiste sitzt in der Kopfzeilen-
       Vorlage. Jetzt ohne diese Einschränkung.
   C5  Zwei verschiedene Orangetöne für dieselbe Schaltfläche: Wo das
       Seiten-CSS die Variable --color-accent nicht mitbringt, greift der
       Ersatzwert #C46A1D. Der Sollwert ist #AD5617.
   ---------------------------------------------------------------------- */

html body .pg,
html body .toja-mob,
html body #toja-header,
html body #toja-footer,
html body .mobile-drawer {
  --color-accent: #AD5617;
  --color-accent-hover: #A0501A;
}

/* Die Aktionsleiste und das Schubfach am unteren Rand liegen in der
   Kopfzeilen-Vorlage, nicht im Seiteninhalt. Deshalb ohne .pg davor -
   sonst greift hier nichts, und die Beschriftung der orangen Schaltflaeche
   stand orange auf orange, also unlesbar. */
html body .m-actionbar__btn,
html body .m-actionbar__btn *,
html body .mobile-drawer__cta,
html body .mobile-drawer__cta * {
  color: #fff !important;
}

/* Z5 · Die Telefonzeile im mobilen Menue steht auf weissem Grund und war
   durch die Regel darueber weiss auf weiss. Sie ist hier ausgenommen und
   traegt wieder die Farbe der Vorlage. */
html body .mobile-drawer__tel,
html body .mobile-drawer__tel * {
  color: #1F4685 !important;
}

/* Sollfarben der beiden Schaltflaechen. Der Seiteninhalt bringt eine
   zweite, aeltere Fassung derselben Regeln mit dem falschen Orangeton
   mit; sie steht spaeter und gewinnt sonst. */
html body .m-actionbar__btn--tel { background: #1F4685 !important; }
html body .m-actionbar__btn--cta { background: #AD5617 !important; }

@media (max-width: 980px) {
  html body .mobile-drawer__cta { background: #AD5617 !important; }
}

html body .pg .btn--accent,
html body .pg .btn--accent span,
html body .mobile-drawer .btn--accent {
  color: #fff !important;
}

/* B16 · Der aufgerufene Hauptmenüpunkt wird hervorgehoben.
   Die Kennzeichnung setzt js/abnahme.js, die Gestaltung steht hier. */
html body .nav__link.toja-aktiv,
html body .nav__item-sub > .nav__link.toja-aktiv {
  text-decoration: underline;
  text-decoration-color: var(--color-accent, #AD5617);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ---------------------------------------- Auswahl-Signal statt Einfaerbung

   Das Theme faerbt in seiner Grundeinstellung jede Schaltflaeche beim
   Ueberfahren und beim Anklicken pink ein (Hintergrund #CC3366, Schrift
   weiss). Bei den Zertifikatskacheln, die technisch Schaltflaechen sind,
   sah das aus wie ein Fehler. js/ueberfahren.js entfernt diese Regel;
   hier steht, was stattdessen passiert: ein blauer Rahmen beim Anklicken
   und ein deutlich sichtbarer Ring bei Bedienung ueber die Tastatur.
   Gefaerbt wird nichts. */

html body .cert:focus,
html body .cert:focus-visible {
  background: var(--color-paper, #fff);
}

html body #pg-start .certs .cert:focus,
html body #pg-ueber-mich .certs .cert:focus {
  background: var(--color-cream, #FBF8F4);
}

html body .cert:focus:not(:focus-visible) {
  outline: none;
  border-color: var(--color-blue, #2B5FAD);
  box-shadow: 0 10px 26px rgba(15, 30, 60, .12);
}

html body .cert:focus-visible,
html body .pg button:focus-visible,
html body .pg a:focus-visible,
html body .toja-mob button:focus-visible,
html body #toja-header a:focus-visible,
html body #toja-footer a:focus-visible {
  outline: 3px solid var(--color-blue, #2B5FAD);
  outline-offset: 3px;
}