/* Highrizz — sitweite Farb-Angleichung von Header/Footer an das neue Redesign.
   Laeuft auf ALLEN Seiten (nicht nur Startseite), weil Nav und Footer ueberall
   gleich aussehen sollen, auch bevor die restlichen Seiten neu gestaltet sind.
   Farben doppelt hier definiert (nicht die --hrz-* Variablen aus dem Homepage-CSS),
   weil Header/Footer ausserhalb von .hrz-home liegen. */

/* Site ist bewusst nur hell designt (Kraftpapier-Optik), kein reviewter
   Dark Mode. Ohne diese Angabe dunkeln manche mobilen Browser (v.a. Android)
   Seiten ohne explizites Farbschema von sich aus ein, das war vermutlich die
   Ursache fuer den kompletten Farbumschwung am Handy. */
html{
  color-scheme:light !important;
}

/* Mobile Kopfzeile war in den urspruenglichen Einstellungen fest auf Schwarz
   gesetzt (eigene Mobile-Einstellung, nicht an Dark Mode gekoppelt), passt
   nicht mehr zum hellen Redesign. Weiss statt Kraftpapier-Creme, weil das
   die native Desktop-Farbe ist (--theme-palette-color-8) — Header bleibt so
   auf beiden Breakpoints gleich und optisch von der Creme-Seite abgesetzt. */
.ct-header [data-row*="top"]{
  background-color:#ffffff !important;
  background-image:none !important;
}

/* Aufklapp-Menu am Handy (Hamburger) wirkte halbtransparent/verzerrt, weil
   der Panel-Hintergrund nicht deckend gesetzt war. */
#offcanvas,
#offcanvas .ct-panel-content-inner{
  background-color:#EDE7D8 !important;
  opacity:1 !important;
}
#offcanvas,
#offcanvas p,
#offcanvas .ct-menu-link{
  color:#161512 !important;
}

/* Menu-Links (Header + Footer). Text sitzt direkt auf .ct-menu-link, das war schon
   richtig getroffen. Der aktive Unterstrich ist aber ein eigenes Pseudo-Element
   mit background-color (kein border, kein text-decoration), das brauchte eine
   eigene Regel. */
.ct-menu-link,
.ct-menu-link:visited{
  color:#161512 !important;
}
.ct-menu-link:hover,
.ct-menu-link:focus,
.current-menu-item > .ct-menu-link,
.ct-menu-link[aria-current="page"]{
  color:#992014 !important;
}
[data-menu]>ul>li[class*="current-menu-"]>a:before,
[data-menu]>ul>li[class*="current-menu-"]>a:after,
[data-menu]>ul>li:hover>a:before,
[data-menu]>ul>li:hover>a:after{
  background-color:#992014 !important;
}
.ct-footer .ct-menu-link:hover,
.ct-footer .ct-menu-link:focus,
.ct-footer .current-menu-item > .ct-menu-link{
  color:#F5B700 !important;
}
.ct-footer [data-menu]>ul>li[class*="current-menu-"]>a:before,
.ct-footer [data-menu]>ul>li[class*="current-menu-"]>a:after,
.ct-footer [data-menu]>ul>li:hover>a:before,
.ct-footer [data-menu]>ul>li:hover>a:after{
  background-color:#F5B700 !important;
}

/* Icons (Warenkorb, Social, Menu-Pfeile) haengen an fill ueber eine eigene
   CSS-Variable, nicht an color — muss direkt am svg ueberschrieben werden. */
.ct-header-cart svg,
.ct-header-cart .ct-icon-container svg,
.ct-header-search svg,
.ct-header-trigger svg,
.ct-social-box svg,
.ct-menu-link svg{
  fill:#161512 !important;
}
.ct-header-cart:hover svg,
.ct-header-cart:focus-within svg,
.ct-header-search:hover svg,
.ct-header-search:focus svg,
.ct-header-trigger:hover svg,
.ct-header-trigger:focus svg,
.ct-social-box a:hover svg,
.ct-menu-link:hover svg{
  fill:#992014 !important;
}
/* Mobile hatte in den urspruenglichen Einstellungen hartes Weiss fuer diese
   Icons hinterlegt (fuer den alten, dunklen Mobile-Header gedacht), auf dem
   jetzt hellen Grund unsichtbar. Direkt am svg ueberschrieben deckt das
   automatisch auch den Mobile-Breakpoint mit ab. */

/* Warenkorb-Preis: sitzt in einem eigenen <span class="ct-label">, das seine
   Farbe direkt selbst setzt statt vom umschliessenden Link zu erben. */
.ct-header-cart .ct-label{
  color:#161512 !important;
}
.ct-header-cart:hover .ct-label,
.ct-header-cart:focus-within .ct-label{
  color:#992014 !important;
}

/* Mini-Warenkorb (Hover-Popup am Warenkorb-Icon). War fest auf dunkles Navy
   (--mini-cart-background-color:#29333C) samt Blocksys blauer Link-/Button-
   Palette eingestellt, komplett unabhaengig vom Redesign. Eigene Variablen
   direkt ueberschreiben statt gegen jede einzelne Regel anzukaempfen. */
.ct-header-cart .ct-cart-content,
[data-header] [data-id="cart"] .ct-cart-content{
  --mini-cart-background-color:#EDE7D8 !important;
  --theme-text-color:#161512 !important;
  --theme-link-initial-color:#161512 !important;
  --theme-link-hover-color:#992014 !important;
  border:1px solid #00000018 !important;
}
.ct-header-cart .ct-cart-content,
.ct-header-cart .ct-cart-content .total,
.ct-header-cart .ct-cart-content .total *{
  color:#161512 !important;
}
.ct-header-cart .ct-cart-content a{
  color:#161512 !important;
}
.ct-header-cart .ct-cart-content a:hover{
  color:#992014 !important;
}
.ct-header-cart .ct-cart-content .quantity,
.ct-header-cart .ct-cart-content .woocommerce-Price-amount{
  font-family:'JetBrains Mono',monospace;
}
.ct-header-cart .ct-cart-content .remove{
  color:#992014 !important;
}
/* "View basket" / "Checkout" Buttons im Mini-Warenkorb */
.ct-header-cart .ct-cart-content .button,
.ct-header-cart .ct-cart-content a.button,
.ct-header-cart .ct-cart-content a.checkout{
  background-color:#161512 !important;
  color:#EDE7D8 !important;
  border-radius:28px !important;
  font-family:'JetBrains Mono',monospace !important;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.ct-header-cart .ct-cart-content .button:hover,
.ct-header-cart .ct-cart-content a.button:hover,
.ct-header-cart .ct-cart-content a.checkout:hover{
  background-color:#992014 !important;
  color:#EDE7D8 !important;
}

/* Klassische WooCommerce-Buttons (Pay/Cancel/My account auf order-pay, view-order,
   fehlgeschlagene Zahlung usw.). Das sind ANDERE, aeltere Templates als der
   Block-Checkout, eigene, schlichte .button-Klasse aus dem WooCommerce-Core,
   ueberall dort wo "woocommerce"-Wrapper-Klasse vorhanden ist. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #payment #place_order{
  background-color:#161512 !important;
  color:#EDE7D8 !important;
  border-radius:28px !important;
  font-family:'JetBrains Mono',monospace !important;
  font-weight:600 !important;
  text-transform:uppercase;
  letter-spacing:.03em;
  border:0 !important;
  box-shadow:none !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  background-color:#992014 !important;
  color:#EDE7D8 !important;
}
.woocommerce table.shop_table{
  border-color:#00000018 !important;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  border-color:#00000018 !important;
  color:#161512;
}

/* Warenkorb-Artikel-Zaehler (die kleine Bubble mit der Anzahl) war blau */
.ct-dynamic-count-cart{
  background-color:#992014 !important;
  color:#EDE7D8 !important;
}

/* Suchmodal — Blocksys blaues Standard-Button-Blau raus. [type=submit] deckt
   sowohl button als auch input ab, das war vorher zu eng auf button[type] gezielt. */
#search-modal [type="submit"],
#search-modal .ct-button,
#search-modal button{
  background-color:#161512 !important;
  color:#EDE7D8 !important;
}
#search-modal [type="submit"]:hover,
#search-modal .ct-button:hover,
#search-modal button:hover{
  background-color:#992014 !important;
}
#search-modal input:focus,
#search-modal .ct-search-form-inner:focus-within{
  border-color:#992014 !important;
  outline-color:#992014 !important;
}

/* Social-Icons im Footer: gleiche fill-Problematik wie oben, nur mit hellem
   Ton fuer den dunklen Footer-Hintergrund. */
.ct-footer .ct-social-box svg,
.ct-footer .ct-menu-link svg{
  fill:#EDE7D8 !important;
}
.ct-footer .ct-social-box a:hover svg,
.ct-footer .ct-menu-link:hover svg{
  fill:#F5B700 !important;
}

/* Footer: dunkler Ink-Ton statt dem alten hellblauen Grau */
.ct-footer{
  background-color:#161512 !important;
}
.ct-footer,
.ct-footer p,
.ct-footer a,
.ct-footer .ct-footer-copyright,
.ct-footer .ct-footer-copyright p{
  color:#EDE7D8 !important;
}
.ct-footer a:hover{
  color:#F5B700 !important;
}

/* Footer-Proportionen: die alte Einstellung hatte einen 400px-Abstand zwischen
   Logo/Menu/Socials in der obersten Zeile vorgesehen, das wirkt jetzt, wo alles
   sichtbar ist, wie zufaellig verstreut. Auf einen normalen, engeren Abstand umstellen. */
.ct-footer [data-row="top"] .ct-container-fluid{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem 2.5rem;
  padding:2.5rem clamp(1.25rem,4vw,3rem);
}
.ct-footer [data-row="top"] [data-column]{
  flex:0 0 auto;
  min-width:0;
}

/* Footer-Logo wurde durch die Flex-Umstellung breiter gerendert als vorgesehen
   (Flex-Items wachsen ohne Bremse auf die Bildgroesse) — Breite wieder einfangen. */
.ct-footer [data-column="widget-area-1"] img{
  max-width:150px;
  width:auto;
  height:auto;
}
.ct-footer [data-row="middle"] .ct-container{
  padding:0.5rem 0 1.5rem;
}
.ct-footer [data-row="bottom"] .ct-container{
  padding:0 0 3rem;
}

/* Footer-Logo ist eine schwarze PNG, auf dunklem Grund unsichtbar — invertieren statt neues Asset */
.ct-footer [data-column="widget-area-1"] img{
  filter:invert(1);
}

/* Zahlungsarten-Bild hat einen weissen Hintergrund fest im PNG eingebacken.
   Statt das als nackten weissen Balken auf dunklem Footer haengen zu lassen,
   wird daraus bewusst eine kleine "Beleg"-Karte, passend zur Etiketten-Optik. */
.ct-footer [data-row*="bottom"] .ct-container{
  display:flex;
  justify-content:center;
}
.ct-footer [data-column="widget-area-2"]{
  background:#ffffff;
  padding:1rem 1.5rem;
  border-radius:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  max-width:420px;
}
.ct-footer [data-column="widget-area-2"] img{
  width:100%;
  height:auto;
  display:block;
}