/*
 * module-oz.css – Ergänzungen zu oz.css (Design-Vorlage) und module.css (erzeugte CMS-Bausteine).
 * Hier steht alles, was die Vorlage nicht kannte: Variablen der CMS-Module, Hilfsklassen statt
 * Inline-Styles (der HTML-Filter entfernt style-Attribute) und Anpassungen der CMS-Seiten an die Optik.
 */

/* Variablen, die die CMS-Module erwarten (Farben kommen aus Website → Design, includes/theme.php) */
:root {
  --line: #dfe3e9;
  --white: #fff;
  --max: 1240px;
  --shadow: 0 12px 32px rgba(53, 56, 62, .10);
  --color-surface: var(--soft);
}

body { font-family: var(--font-body, Arial, Helvetica, sans-serif); }
h1, h2, h3, h4 { font-family: var(--font-heading, Arial, Helvetica, sans-serif); }
img { max-width: 100%; }
main:focus { outline: none; }
main a:not(.button):not(.btn) { text-underline-offset: 4px; }

/* Farben der Vorlage folgen Website → Design */
.button:hover { background: var(--yellow-dark, #bc000c); border-color: var(--yellow-dark, #bc000c); }
.button.outline:hover { border-color: #c4c9d0; }
.nav-links a[aria-current="page"]:not(.button) { color: var(--brand-blue); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 7px; }

/* Staffelung beim Einblenden (statt style="--reveal-delay:…") */
.oz-delay-1 { --reveal-delay: 160ms; }
.oz-delay-2 { --reveal-delay: 320ms; }

/* Raster der Vorlage: Abstand zwischen umbrechenden Zeilen (mehr als drei Karten) */
.row { row-gap: 24px; }
.oz-link { font-size: 13px; font-weight: 700; text-underline-offset: 5px; color: var(--brand-blue); }
.oz-schmal { padding: 55px 0; }
.oz-mt { margin-top: 36px; }
.oz-zentriert { text-align: center; }

/* Seitenkopf ohne Bild (Übersichten, Rechtstexte, CMS-Seiten) */
.page-hero .legal-title h1 { margin-bottom: 0; }
.page-hero .legal-title .lead-copy { max-width: 650px; margin: 25px 0 0; font-size: 16px; }
.page-hero .legal-title .button { margin-top: 28px; }
.page-hero .hero-layout .button { margin-top: 4px; }

/* Fuß: Spaltentitel, Anschrift mit Telefon und E-Mail */
.footer-nav strong { font-size: 12px; color: var(--ink); margin-bottom: 3px; }
.address a { color: inherit; text-decoration: none; }
.address a:hover { color: var(--brand-blue); text-decoration: underline; }
.footer-utility .legal { flex-wrap: wrap; }
.footer-utility .legal button { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.quick-contact__button--whatsapp, .quick-contact__button--email { background: #fff; border: 1px solid #d3d9e2; }
.quick-contact__button--whatsapp:hover, .quick-contact__button--email:hover { background: #f3f5f8; border-color: var(--orange); }

/* Kundenstimmen */
.review-summary { margin: 18px 0 0; font-size: 14px; color: #646b75; }
.review-head a { color: inherit; text-decoration: none; }
.reviews .section-head a { color: var(--brand-blue); font-weight: 700; }

/* Inhalte aus dem Editor (CMS-Seiten, Startseiten-Abschnitte, Leistungen) */
.section > .container > h2 + p, .section > .container > p + p { margin-top: 20px; }
.section > .container > p, .section > .container > ul, .section > .container > ol { max-width: 790px; color: #596470; font-size: 16px; }
.section > .container > h3 { margin-top: 34px; color: var(--brand-blue); }
.detail-copy p + p { margin-top: 16px; }
.detail-copy ul { margin: 18px 0 0; padding-left: 20px; color: #606975; font-size: 16px; }
.oz-bild { display: block; width: 100%; height: auto; border-radius: 7px; box-shadow: 0 16px 35px #35383e12; }
.oz-zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; align-items: start; }
.oz-checkliste { list-style: none; padding: 0; margin: 22px 0 0; border-top: 1px solid #d5dae2; }
.oz-checkliste li { padding: 13px 0 13px 30px; border-bottom: 1px solid #d5dae2; position: relative; font-size: 15px; color: #596470; }
.oz-checkliste li::before { content: '↗'; position: absolute; left: 0; color: var(--orange); font-size: 18px; line-height: 1.3; }

/* Team (Seite „Über uns“) */
.oz-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.oz-person { background: #fff; border: 1px solid #dce1e7; border-radius: 6px; overflow: hidden; }
.oz-person img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: center top; }
.oz-person div { padding: 20px 22px 24px; }
.oz-person h3 { font-size: 19px; color: var(--brand-blue); margin-bottom: 8px; }
.oz-person p { font-size: 13px; color: #66707c; margin: 0 0 10px; line-height: 1.6; }
.oz-person a { font-size: 13px; color: var(--brand-blue); overflow-wrap: anywhere; }

/* Partnerlogos */
.oz-partner { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; margin-top: 30px; }
.oz-partner img { display: block; max-height: 70px; width: auto; max-width: 260px; }

/* Referenzen: Kacheln und Branchen der Vorlage */
.reference-tile > img { display: block; width: 100%; height: 270px; object-fit: cover; }
.reference-tile a { color: inherit; text-decoration: none; }
.reference-sector ul { margin-bottom: 0; }

/* Kontaktseite und Formulare der CMS-Module */
.oz-form-bereich { max-width: 1040px; }
main input[type="text"], main input[type="email"], main input[type="tel"], main input[type="number"], main input[type="date"],
main input[type="url"], main select, main textarea { border-radius: 3px; }
main .btn-primary, main .btn.btn-primary { background: var(--orange); border-color: var(--orange); border-radius: 2px; font-weight: 700; }
main .btn-primary:hover { background: var(--yellow-dark, #bc000c); border-color: var(--yellow-dark, #bc000c); }
main .btn-outline, main .btn-light { border-radius: 2px; }

/* 404-Seite */
.error-404 { padding: 90px 0 110px; background-color: #f5f6f7; }
.error-404__code { font-size: clamp(90px, 16vw, 190px); font-weight: 800; line-height: 1; letter-spacing: -6px; color: #e3e6ea; margin: 0 0 10px; }
.error-404 h1 { font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -2px; }
.error-404 p:not(.eyebrow):not(.error-404__code) { max-width: 560px; color: #646b75; margin-bottom: 30px; }

@media (max-width: 991px) {
  .oz-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oz-zweispaltig { gap: 40px; }
}
@media (max-width: 767px) {
  .row { row-gap: 18px; }
  .oz-zweispaltig { grid-template-columns: 1fr; gap: 30px; }
  .oz-schmal { padding: 40px 0; }
}
@media (max-width: 575px) {
  .oz-team { grid-template-columns: 1fr; }
  .oz-person img { height: 340px; }
}
@media print {
  .nav-shell { position: static; }
}

/* Einwilligungsfenster (privacy-consent.js): Die Regeln fehlten, das Fenster erschien ungestaltet am Seitenende (13.10.2026). */
.ry-consent[hidden] { display: none; }
.ry-consent { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ry-consent__overlay { position: absolute; inset: 0; background: rgba(23, 25, 30, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ry-consent__dialog {
  position: relative; width: 100%; max-width: 46rem; max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  padding: 1.75rem 1.6rem 1.3rem; background: #fff; border-radius: 4px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  border-top: 4px solid var(--orange); color: var(--ink); text-align: left;
}
.ry-consent__title { margin: 0; font-size: 1.6rem; line-height: 1.2; color: var(--ink); }
.ry-consent__text { margin: .6rem 0 0; font-size: .95rem; line-height: 1.6; color: #555a63; }
.ry-consent__list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.ry-consent__item { margin: 0; border: 1px solid #dcdcdc; border-radius: 4px; background: var(--paper); }
.ry-consent__label { display: flex; gap: .7rem; align-items: flex-start; margin: 0; padding: .7rem .85rem; cursor: pointer; }
.ry-consent__label input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; flex: 0 0 auto; accent-color: var(--orange); }
.ry-consent__label input:disabled { cursor: not-allowed; opacity: .75; }
.ry-consent__body { display: block; }
.ry-consent__body strong { display: block; color: var(--ink); font-size: .95rem; }
.ry-consent__hint { display: block; margin-top: .2rem; font-size: .8125rem; line-height: 1.55; color: #555a63; }
.ry-consent__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.ry-consent .ry-consent__actions .btn {
  flex: 1 1 12rem; display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
  padding: .6rem 1.2rem; border: 2px solid var(--orange); border-radius: 4px; background: transparent; color: var(--orange);
  font: inherit; font-size: .9rem; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ry-consent .ry-consent__actions .btn:hover { background: var(--paper); }
.ry-consent .ry-consent__actions .btn--primary,
.ry-consent .ry-consent__actions .btn:only-child { background: var(--orange); color: #fff; }
.ry-consent .ry-consent__actions .btn--primary:hover,
.ry-consent .ry-consent__actions .btn:only-child:hover { background: #b8000b; border-color: #b8000b; color: #fff; }
.ry-consent__links { margin: .9rem 0 0; font-size: .8125rem; color: #555a63; }
.ry-consent__links a { color: var(--orange); text-decoration: underline; }
.ry-consent :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
html.ry-consent-open { overflow: hidden; }
@media (max-width: 600px) {
  .ry-consent { align-items: flex-end; padding: 0; }
  .ry-consent__dialog { border-radius: 0; padding: 1.1rem 1rem 0; }
  .ry-consent__title { font-size: 1.35rem; }
  .ry-consent__text { font-size: .875rem; }
  .ry-consent__hint { font-size: .75rem; line-height: 1.45; }
  .ry-consent__label { padding: .55rem .7rem; }
  .ry-consent__actions {
    position: sticky; bottom: 0; z-index: 1;
    margin: .8rem -1rem 0; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid #dcdcdc; gap: .45rem;
  }
  .ry-consent .ry-consent__actions .btn { flex: 1 1 100%; min-height: 42px; }
  .ry-consent__links { margin: 0; padding: 0 0 .8rem; background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .ry-consent .ry-consent__actions .btn { transition: none; }
}

/* Bildwechsel im Titelbereich: sanftes Überblenden statt hartem Umschalten (13.10.2026). oz.js setzt hero-visual--fade
   und .is-active; ohne JavaScript bleibt nur das erste Bild sichtbar. */
.hero-visual--fade .slides { display: grid; }
/* Das neue Bild blendet über dem alten ein; das alte bleibt bis zum Ende deckend (kein Durchscheinen des Hintergrunds). */
.hero-visual--fade .slide { grid-area: 1 / 1; z-index: 1; opacity: 0; visibility: hidden; transition: opacity 0s linear 1.2s, visibility 0s linear 1.2s; }
.hero-visual--fade .slide.is-active { z-index: 2; opacity: 1; visibility: visible; transition: opacity 1.2s ease; }
@media (prefers-reduced-motion: reduce) {
  .hero-visual--fade .slide, .hero-visual--fade .slide.is-active { transition: none; }
}

/* Schaltfläche in der Hauptnavigation: beim Überfahren weiße Schrift (vorher Blau auf Rot durch .nav-links a:hover). */
.nav-links a.button, .nav-links a.button:hover, .nav-links a.button:focus-visible { color: #fff; }

/* Pfeile als SVG-Dateien (assets/img/pfeile/) statt Schriftzeichen – die Zeichen ↗ ↓ ↑ → ← ▶ zeigen Handys als bunte
   Emoji. oz_pfeile_svg() (includes/oz-layout.php) ersetzt sie in der Ausgabe durch <span class="pfeil pfeil--…">;
   die Farbe folgt der Schriftfarbe (Maske). */
.pfeil {
  display: inline-block; flex: 0 0 auto; width: 1em; height: 1em; vertical-align: -.14em; background-color: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
.pfeil--ro { -webkit-mask-image: url(../img/pfeile/pfeil-rechts-oben.svg); mask-image: url(../img/pfeile/pfeil-rechts-oben.svg); }
.pfeil--u { -webkit-mask-image: url(../img/pfeile/pfeil-unten.svg); mask-image: url(../img/pfeile/pfeil-unten.svg); }
.pfeil--o { -webkit-mask-image: url(../img/pfeile/pfeil-oben.svg); mask-image: url(../img/pfeile/pfeil-oben.svg); }
.pfeil--r { -webkit-mask-image: url(../img/pfeile/pfeil-rechts.svg); mask-image: url(../img/pfeile/pfeil-rechts.svg); }
.pfeil--l { -webkit-mask-image: url(../img/pfeile/pfeil-links.svg); mask-image: url(../img/pfeile/pfeil-links.svg); }
.pfeil--start { -webkit-mask-image: url(../img/pfeile/abspielen.svg); mask-image: url(../img/pfeile/abspielen.svg); }
@media print { .pfeil { display: none; } }
.scope-list li:before {
  content: ''; flex: 0 0 auto; width: 18px; height: 18px; align-self: center; background-color: var(--orange);
  -webkit-mask: url(../img/pfeile/pfeil-rechts-oben.svg) center / contain no-repeat; mask: url(../img/pfeile/pfeil-rechts-oben.svg) center / contain no-repeat;
}
.slider-btn .pfeil { vertical-align: middle; }

/* Kontaktband: Symbole vor Telefon und E-Mail (Linien-Symbole wie im Schnellkontakt, Farbe = Textfarbe) */
.contact-links .phone, .contact-links .mail { display: inline-flex; align-items: center; gap: 12px; }
.contact-links .kontakt-icon { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-links .phone .kontakt-icon { width: 30px; height: 30px; }
.contact-links .mail .kontakt-icon { width: 20px; height: 20px; margin: 0 5px; }
@media (max-width: 500px) { .contact-links .phone .kontakt-icon { width: 24px; height: 24px; } .contact-links .mail .kontakt-icon { margin: 0 2px; } }

/* Laufschrift-Begriffe zwischen den Abschnitten der Startseite (Test 15.10.2026, Wunsch des Nutzers; oz_scroll_text(), oz.js).
   Verhalten wie www.kerker.de: Wort startet um 55 % nach rechts versetzt und wandert beim Scrollen ganz nach links hinaus (−100 %),
   weich nachgezogen (.2 s); Größe 31,25vw (max. 600 px, Handy 140 px). OZ nutzt Arial (keine dünne Stärke) → normale Stärke. */
.scrollText {
  overflow: hidden;
}
.scrollText span {
  display: inline-block;
  font-family: var(--font-heading, Arial, Helvetica, sans-serif);
  font-size: min(31.25vw, 600px);
  font-weight: 400;
  line-height: 1em;
  padding: .06em 0 .22em;   /* sichtbar oben und unten gleich viel Abstand (Nutzer): Arial hat über den Versalien eigenen
                              Leerraum, Unterlängen (g, j) brauchen unten Platz – gemessen ≈ .18em je Seite */
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--orange, #e3000e);
  transform: translateX(55%);
  transition: transform .2s linear;
  will-change: transform;
}
@media (max-width: 639px) { .scrollText span { font-size: 140px; } }
/* Hohlschrift (Nutzer, 15.10.2026): nur rote Kontur; ohne text-stroke-Unterstützung bleibt die Schrift rot gefüllt */
@supports (-webkit-text-stroke: 1px red) {
  .scrollText span { color: transparent; -webkit-text-stroke: max(1.5px, .015em) var(--orange, #e3000e); }
}
@media (prefers-reduced-motion: reduce) { .scrollText span { transform: none; transition: none; } }

/* 15.10.2026 (Nutzer, wie Gumpp2): weniger Abstand unter dem Fuß (vorher 95 px, Handy 100 px aus oz.css) */
.footer { padding-bottom: 30px; }
@media (max-width: 767px) { .footer { padding-bottom: 30px; } }
/* Platz für den schwebenden Schnellkontakt (54 px, rechts 24 px) neben der letzten Zeile */
@media (min-width: 768px) and (max-width: 1400px) { .footer__bottom { padding-right: 64px; } }
/* 15.10.2026 (Nutzer, wie Gumpp2): Kontaktfeld im Kontaktband auf weißer Fläche statt transparent */
.contact .contact-links { background: #fff; border: 1px solid #dde1e7; padding: 30px; }
@media (max-width: 500px) { .contact .contact-links { padding: 22px 18px; } }

/* Hauptnavigation mit Logo in der Mitte (Wunsch des Nutzers 15.10.2026, oz_nav_top()): ab 1280 px drei Spalten – Leistungen links,
   Logo mittig, übrige Einträge und „Einsatz anfragen“ rechts; gleich breite Außenspalten halten das Logo genau in der Mitte.
   Darunter bleiben die Gruppen wirkungslos (display: contents), das aufklappbare Menü ist unverändert. */
.nav-gruppe { display: contents; }
@media (min-width: 1280px) {
  .navbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 28px; }
  .navbar .nav-links { display: contents; }
  .navbar .brand { grid-column: 2; grid-row: 1; justify-self: center; }
  .nav-gruppe { display: flex; align-items: center; gap: inherit; column-gap: 20px; min-width: 0; }
  .nav-gruppe--links { grid-column: 1; grid-row: 1; justify-self: start; }
  .nav-gruppe--rechts { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* Leiste über der Navigation wie bei KKG Gumpp (Wunsch des Nutzers 15.10.2026): OZ-Rot, weiße Großbuchstaben; Handy nur links */
.utility { background: var(--orange, #e3000e); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; padding: 8px 0; line-height: 1.5; }
.utility .container { display: flex; justify-content: space-between; gap: 20px; }
@media (max-width: 767px) { .utility { font-size: 9px; } .utility span:last-child { display: none; } }

/* Handy (Wunsch des Nutzers 15.10.2026): OZ-Logo im Fuß zentriert, übriger Fußinhalt bleibt linksbündig */
@media (max-width: 767px) { .footer .footer-top > .brand { align-self: center; } }

/* TEST 15.10.2026 (Vorlage des Nutzers, 2. Versuch): dunkler Titelbereich – Startseite (.hero-security in oz_home_hero()) und
   seit dem 3. Schritt alle Seitenköpfe (.page-hero: Leistungen, Referenzen, Über uns, Kontakt, Rechtliches, Blog, Angebote, Kasse) –
   mit diagonalen Linien (nach links zum Text ausgeblendet) und rotem Lichtschein rechts. OHNE overflow: hidden – die Werte-Leiste
   (.hero-strip, translateY(50%)) ragt in den nächsten Abschnitt und würde sonst abgeschnitten (Hinweis des Nutzers); die
   Hintergrund-Ebenen bleiben mit inset: 0 ohnehin innerhalb. Nur Texte direkt auf dem dunklen Grund werden hell (Überschrift,
   Überzeile, Einleitung, Brotkrumen); weiße Karten (Bildkarte, Werte-Leiste, Formulare) behalten ihre Farben.
   Seit dem 4. Schritt auch das Kontaktband (section.contact), dessen weißes Kontaktfeld weiß bleibt. */
.hero.hero-security, .page-hero, section.contact {
  --hero-bg: #121552;   /* TEST 15.10.2026 (Nutzer): Blautöne statt Schwarz – dunkles OZ-Blau (vorher #101216) */
  --hero-accent: #d92332;
  position: relative;
  isolation: isolate;
  color: #fff;
  background: var(--hero-bg);
  border-bottom-color: var(--hero-bg);
  border-top-color: var(--hero-bg);
}
.hero-security::before, .page-hero::before, section.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 28px, rgb(255 255 255 / 6%) 28px 29px, transparent 29px 56px);
  -webkit-mask-image: linear-gradient(to right, transparent, #000);
  mask-image: linear-gradient(to right, transparent, #000);
}
.hero-security::after, .page-hero::after, .page-hero.page-hero--accent::after, section.contact::after {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 90% 35%, color-mix(in srgb, var(--hero-accent) 22%, transparent), transparent 65%);
}
.hero-security .eyebrow, .page-hero .eyebrow, .page-hero .kicker, section.contact .eyebrow { color: rgb(255 255 255 / 78%); }
.hero-security h1, .page-hero h1, section.contact h2 { color: #fff; }
section.contact .contact-links { color: var(--ink, #17191e); }   /* weißes Kontaktfeld: dunkle Schrift (Telefon, E-Mail) */
.hero-security h1 span, .hero-security h1 em, .hero-security h1 strong,
.page-hero h1 span, .page-hero h1 em, .page-hero h1 strong, section.contact h2 span { color: var(--orange, #e3000e); }
.hero-security .lead-copy, .page-hero .lead-copy, .page-hero .page-hero__sub, .page-hero .page-hero__inner > p,
section.contact .contact-grid > div:first-child p { color: rgb(255 255 255 / 78%); }
.page-hero .breadcrumb-nav, .page-hero .crumb { color: rgb(255 255 255 / 65%); }
.page-hero .breadcrumb-nav a, .page-hero .crumb a { color: rgb(255 255 255 / 85%); }
.page-hero .breadcrumb-nav [aria-current], .page-hero .crumb [aria-current] { color: #fff; }
.hero-security .button.outline, .page-hero .button.outline { background: transparent; color: #fff; border-color: rgb(255 255 255 / 55%); }
.hero-security .button.outline:hover, .hero-security .button.outline:focus-visible,
.page-hero .button.outline:hover, .page-hero .button.outline:focus-visible { background: #fff; color: var(--ink, #17191e); border-color: #fff; }
.hero-security a:focus-visible, .hero-security button:focus-visible, .page-hero a:focus-visible, .page-hero button:focus-visible,
section.contact .contact-grid > div:first-child a:focus-visible { outline-color: #fff; }

/* 15.10.2026 (PageSpeed/axe): unterste Fußzeile mit ausreichendem Kontrast (vorher #737c88 = 4,2 : 1, jetzt 4,9 : 1) */
.footer__bottom { color: #68717d; }

/* 15.10.2026 (PageSpeed/axe, Kontrast ≥ 4,5 : 1): kleine Nummern in Karten (vorher #7c837e = 3,9 : 1), Schaltfläche .btn--primary
   (Referenz-Einzelseite: vorher Blau auf Rot = 2,4 : 1 → Weiß auf Rot 4,9 : 1), Code-Schrift in Texten (vorher #d63384 = 4,0 : 1). */
.number { color: #646b67; }
.btn--primary, .btn--primary:hover, .btn--primary:focus-visible { color: #fff; }
main code { color: #a8246a; }