/* Übernommen aus dem bisherigen Child-Theme «divi-varry» (style.css, live gemessen 21.10.2026): Hintergrund der Website
   und durchsichtige Zahlungsbox. Gilt für die Seiten, die weiter Divi ausgibt (Besucher vor der Freischaltung). */
body {
    background-color: #0a0a0a!important;
    background-image: url(https://varryart.com/wp-content/uploads/2022/06/varry_background_test.jpg)!important;
}

#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box {
    background-color: transparent!important;
}

/* ==========================================================================
   varryart.com – Korrekturen aus dem Website-Audit vom 19.10.2026
   Einfügen: Divi → Theme-Optionen → Allgemein → Benutzerdefiniertes CSS
   (oder style.css eines Child-Themes). Danach: Divi → Theme-Optionen →
   Builder → Erweitert → «Statische CSS-Datei-Generierung» → Leeren, und den
   Cache von Jetpack Boost leeren.
   ========================================================================== */

/* D-01 · Menüpunkt «Henkermuseum» überdeckt das Logo (981–1099 px) */
@media (min-width: 981px) and (max-width: 1099px) {
  #top-menu > li { padding-right: 12px !important; }
  #top-menu > li > a { font-size: 18px !important; }
}

/* D-02 · Falsche Symbole im Smartphone-Menü («4c» statt Plus, «4d» statt Schliessen)
   Wurzel: Divi → Theme-Optionen → Benutzerdefiniertes CSS enthält content:"4c" und "4d" ohne
   umgekehrten Schrägstrich; Divi gibt dieses Feld nach der style.css aus (gemessen 19.10.2026).
   Der Vorsatz «html» gewinnt trotzdem; besser zusätzlich dort die falschen Zeilen löschen. */
html #main-header .et_mobile_menu span.menu-closed::before,
html .et_pb_fullwidth_menu .et_mobile_menu span.menu-closed::before { content: "\4c"; }
html #main-header .et_mobile_menu span.menu-closed.menu-open::before,
html .et_pb_fullwidth_menu .et_mobile_menu span.menu-closed.menu-open::before { content: "\4d"; }

/* A-02 · Rote Schrift unter dem Mindestkontrast (WCAG 1.4.3)
   Wurzel: Das bestehende benutzerdefinierte CSS setzt «.et_pb_widget a{color:#cc1818!important}»;
   das trifft Fusszeile und Shop-Knöpfe. Die Regeln unten übersteuern es gezielt.
   Fusszeile: #ff6b5e auf #222 = 5,69 : 1 (gemessen). Die Monarch-Kacheln
   (Facebook, Instagram …) sind ausgenommen, ihre Schrift bleibt weiss. */
html #main-footer .et_pb_widget:not(.widget_monarchwidget) a,
html #main-footer h4.title { color: #ff6b5e !important; }
/* Knopf «Zeig mir mehr» im Bildwechsler der Startseite */
html body #page-container .et_pb_section [class*="et_pb_post_slider_"].et_pb_slider .et_pb_more_button.et_pb_button { color: #fff !important; }
/* Knopf «In den Warenkorb» in Shop-Übersicht und Produktlisten: weiss auf #560000 = 15,05 : 1 */
html body .et_pb_widget a.wp-block-button__link,
html body a.add_to_cart_button { color: #fff !important; }

/* A-03 · Sichtbarer Tastaturfokus (WCAG 2.4.7); Sprunglink-Stil steht im Skript */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible { outline: 3px solid #ffd54a !important; outline-offset: 2px; }

/* A-04 · Klickziele der Bildwechsler-Punkte mindestens 24 × 24 px (WCAG 2.5.8) */
.et-pb-controllers a {
  width: 24px; height: 24px; padding: 8px;
  background-clip: content-box; box-sizing: border-box;
}

/* L-01 · Kein Springen beim Laden: Divi-Header-Abstände vorab setzen (gemessen 19.10.2026 mit aktueller style.css;
   Werte = was Divi nach dem Laden selbst setzt) */
html body.et_fixed_nav.et_show_nav.et_secondary_nav_enabled #page-container{padding-top:217px}
html body.et_fixed_nav.et_show_nav.et_secondary_nav_enabled #main-header{top:37.67px}
@media (max-width:980px){
  html body.et_fixed_nav.et_show_nav.et_secondary_nav_enabled #page-container{padding-top:136px}
  html body.et_fixed_nav.et_show_nav.et_secondary_nav_enabled #main-header{top:36.67px}
}
@media (max-width:329px){
  html body.et_fixed_nav.et_show_nav.et_secondary_nav_enabled #page-container{padding-top:149px}
  html body.et_fixed_nav.et_show_nav.et_secondary_nav_enabled #main-header{top:49.33px}
}
/* D-03 · Startbereich sofort sichtbar statt Zoom-Einblendung */
html body .et_pb_section_0.et_animated{opacity:1!important;animation:none!important;transform:none!important}

/* K-01 · Desktop-Menü mittig im schwarzen Kopfbereich, damit das Logo frei steht.
   Divi richtet die Menüpunkte an der Grundlinie des Logos aus; die Schrift sass bei
   141–170 px, der schwarze Bereich reicht von 38 bis 219 px (Mitte 128 px). 28 px höher
   ergibt 113–142 px. Verschiebung ohne Neuberechnung des Layouts, die Höhe bleibt 181 px. */
@media (min-width: 981px) {
  html #main-header:not(.et-fixed-header) #top-menu > li:not(.centered-inline-logo-wrap),
  html #main-header:not(.et-fixed-header) #et_top_search { top: -28px; }
}

/* M-01 · Smartphone-Menü lesbar: 20 px statt 14 px (Unterpunkte 18 px), hellere Farbe
   #ff6b5e auf Schwarz statt rgba(224,11,0,.81), Plus-Symbol mittig zur Zeile. */
@media (max-width: 980px) {
  html #main-header .et_mobile_menu li a { font-size: 20px; line-height: 26px; color: #ff6b5e; padding-top: 12px; padding-bottom: 12px; }
  html #main-header .et_mobile_menu li li a { font-size: 18px; }
  html #main-header .et_mobile_menu span.menu-closed { top: 7px; }
}