/* ==========================================================================
   Glückkalk — dunkel, kantig, schwer
   UHRIG Solutions, 21.09.2026

   Rückmeldung Manuel: „sollte hochwertiger wirken, ähnlich wie
   buconcept-ausbau … wirkt leider sehr alt immer noch."

   Der Vergleich mit buconcept-ausbau.de macht den Unterschied messbar:
   dort fast schwarzer Grund (#14181a), Archivo Black als Überschrift,
   Gelb als EINZIGER Akzent, Radius 2 px, sehr viel Luft. Hier stand
   dagegen ein heller Shop mit 12–18 px Rundungen und mittelschwerer
   Schrift — brav statt hochwertig.

   Diese Datei dreht das um. Sie lädt als LETZTE und überschreibt die
   Rundungen und Flächen der vorherigen Blöcke bewusst.

   Nebenwirkung, die hier sogar hilft: die Produktfotos sind fast weiß
   (Helligkeitsumfang 187–225 von 255). Auf hellem Grund verschwanden sie,
   auf dunklem Grund leuchten sie.
   ========================================================================== */

@font-face {
  font-family: 'UH Text';
  src: url('../schrift/archivo-var.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'UH Schwer';
  src: url('../schrift/archivo-black.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* Grundton: fast schwarz mit einem Hauch Grün, damit es nicht nach
     Tech-Dashboard aussieht, sondern nach Werkstatt. */
  --uh-nacht:     #14180F;
  --uh-nacht-2:   #1C211A;
  --uh-nacht-3:   #262C24;

  /* ZWEI Markenfarben, direkt aus dem Logo gemessen (glueck-kalk-logo.svg
     enthält exakt zwei: das Kleeblatt in #54b84f und den Schriftzug in
     #363636). Sie haben unterschiedliche Aufgaben, sonst streiten sie:

       GRÜN  = wer wir sind — Marke, Natur, Herkunft, Zustand „gut"
       GELB  = was zu tun ist — Knöpfe, aktiver Schritt, Hervorhebung

     Das Grün wird für dunklen Grund einen Hauch aufgehellt; #54b84f auf
     #14180F trägt zwar, wirkt aber gedrückt. Der Logo-Wert bleibt davon
     unberührt — im Logo selbst steht weiterhin exakt #54b84f. */
  --uh-gruen:      #54B84F;
  --uh-gruen-hell: #6FD169;
  --uh-gruen-tief: #2F6C2C;
  --uh-signal:    #F8BF00;
  --uh-signal-warm:#FFD24A;
  --uh-kalk:      #F4F3EE;
  --uh-nebel:     #9AA093;
  --uh-tinte:     #F4F3EE;
  --uh-grau:      #9AA093;
  --uh-sand:      #3A4136;

  /* Kanten statt Rundungen. 2 px liest sich als Absicht, 14 px als
     Baukasten-Voreinstellung. */
  --uh-rund: 2px;

  --uh-display: 'UH Schwer', 'Archivo Black', system-ui, sans-serif;
  --uh-text:    'UH Text', 'Archivo', Inter, system-ui, sans-serif;
  --uh-luft:    clamp(72px, 9vw, 150px);
}

/* ---------- Grundfläche ------------------------------------------------- */

html { background: var(--uh-nacht); }
body {
  background: var(--uh-nacht) !important;
  color: var(--uh-kalk) !important;
  font-family: var(--uh-text) !important;
  font-size: clamp(16px, 1.05vw, 17.5px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Alle großen Flächen, die vorher weiß oder kalkweiß waren. */
#content, #content-wrapper, main, .link-content, .content-page,
.uh-abschnitt, .uh-aufbau, .uh-einordnung {
  background: var(--uh-nacht) !important;
  color: var(--uh-kalk);
}

h1, .h1, h2, .h2, h3, .h3, .uh-abschnitt h2, .uh-zutaten-text h2,
.uh-listenkopf h2, .uh-einordnung-kopf h2, .uh-start-buehne h1 {
  font-family: var(--uh-display) !important;
  font-weight: 400 !important;
  color: var(--uh-kalk) !important;
  letter-spacing: -.02em !important;
}
p, li, td, dd { color: var(--uh-nebel); }
strong, b { color: var(--uh-kalk); }

a:not(.btn) { color: var(--uh-kalk); }
a:not(.btn):hover { color: var(--uh-signal); }

/* ---------- Kanten: Rundungen zurücknehmen ------------------------------ */

.card, .alert, .modal-content, .dropdown-menu, .list-group-item,
.form-control, .custom-select, .input-group-text,
.productbox, .uh-vorhaben, .uh-listenkopf, .uh-schrittleiste,
.uh-nachbar, .uh-ablauf-schritt a, .uh-vergleich,
.product-images, .carousel-main, .product-gallery, .variation-gallery,
.product-offer, .product-buy, .basket-form, .uh-kaufbox,
.uh-handwerk figure img, .product-thumbnails img, .table-striped,
.product-attributes table, .slick-slider-other .product-wrapper > a,
.slick-slider-other .item-slider.productbox-image {
  border-radius: var(--uh-rund) !important;
}
/* Nur diese bleiben rund: alles, was eine Plakette oder ein Knopf ist. */
.btn, .ribbon, .uh-schicht-produkte a, .uh-dazu-marken a,
.uh-schrittleiste-marken a, .uh-auszeichnung, .delivery-status,
.stock-information > [class*="col"]:first-child > *,
header .nav-icons > li > a, header .nav-icons > li > button,
header .form-control, header .search-wrapper .btn,
.product-offer .input-group, .basket-form .input-group,
.uh-vorteil .icon-plus {
  border-radius: 999px !important;
}

/* ---------- Kopfzeile --------------------------------------------------- */

header.fixed-navbar {
  background: rgba(20,24,15,.82) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.09) !important;
}
header.fixed-navbar .nav-link { color: #DFE2DB !important; }
header.fixed-navbar .nav-link:hover { color: #fff !important; }
/* Das Logo wird NICHT invertiert. brightness(0) invert(1) macht aus dem
   grünen Kleeblatt eine weiße Fläche — genau die Markenfarbe wäre weg.
   Stattdessen liegt eine helle Variante im Child, bei der nur der
   Schriftzug aufgehellt ist; das Kleeblatt bleibt #54b84f. */
header .navbar-brand img { filter: none !important; opacity: 0; }
header .navbar-brand {
  background: url('../bilder/glueck-kalk-logo-hell.svg') left center / contain no-repeat;
  display: inline-block;
}
header .nav-icons .fas, header .nav-icons .far,
header .nav-icons .fa { color: #DFE2DB !important; }
header .nav-icons > li > a:hover, header .nav-icons > li > button:hover {
  background: rgba(255,255,255,.1) !important;
}
header .form-control {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #fff !important;
}
header .form-control::placeholder { color: rgba(255,255,255,.5) !important; }
header .search-wrapper .btn { background: var(--uh-signal) !important; color: var(--uh-nacht) !important; }
/* Der gescrollte Zustand braucht keinen eigenen Look mehr — die Zeile ist
   ohnehin dunkel. Nur etwas fester und kompakter. */
header.uh-gescrollt { background: rgba(20,24,15,.96) !important; }

.top-bar, .navbar-top {
  background: #0E1109 !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

/* ---------- Seitenkopf -------------------------------------------------- */

.breadcrumb-container {
  background: var(--uh-nacht-2) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.breadcrumb-container a { color: var(--uh-nebel) !important; }
.breadcrumb-container a:hover { color: var(--uh-signal) !important; }
.breadcrumb-item.active { color: var(--uh-kalk) !important; }

/* ---------- Karten: Produkt, Vorhaben, Abschnitt ------------------------ */

.productbox, .uh-vorhaben, .slick-slider-other .product-wrapper > a {
  background: var(--uh-nacht-2) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
.productbox:hover, .uh-vorhaben:hover,
.slick-slider-other .product-wrapper > a:hover {
  border-color: var(--uh-signal) !important;
  background: var(--uh-nacht-3) !important;
  box-shadow: none !important;
  transform: translateY(-4px);
}
/* Die Bildfläche bleibt hell: der fast weiße Kalk braucht einen hellen
   Grund, sonst frisst ihn der dunkle Rahmen auf. Der Wechsel hell/dunkel
   innerhalb der Kachel ist hier das Gestaltungsmittel. */
.productbox .productbox-images, .productbox .productbox-image,
.slick-slider-other .item-slider.productbox-image {
  background: var(--uh-kalk) !important;
}
.productbox-title, .productbox-title a { color: var(--uh-kalk) !important; }
.productbox:hover .productbox-title a { color: #fff !important; }
.productbox-price, .productbox .price { color: var(--uh-signal) !important; }
.productbox .price-note, .productbox small { color: var(--uh-nebel) !important; }

.uh-vorhaben-text strong { color: var(--uh-kalk) !important; }
.uh-vorhaben-satz { color: var(--uh-nebel) !important; }

/* ---------- Abschnitte der Startseite ----------------------------------- */

.uh-aufbau { background: var(--uh-nacht-2) !important; }
.uh-schicht { border-top-color: rgba(255,255,255,.1) !important; }
.uh-schicht:last-child { border-bottom-color: rgba(255,255,255,.1) !important; }
.uh-schicht-nr { color: var(--uh-sand) !important; font-family: var(--uh-display); }
.uh-schicht:hover .uh-schicht-nr, .uh-schicht:target .uh-schicht-nr { color: var(--uh-signal) !important; }
.uh-schicht-inhalt p, .uh-lead { color: var(--uh-nebel) !important; }
.uh-schicht-produkte a {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--uh-kalk) !important;
}
.uh-schicht-produkte a:hover {
  background: var(--uh-signal) !important;
  border-color: var(--uh-signal) !important;
  color: var(--uh-nacht) !important;
}

.uh-zutaten { background: var(--uh-nacht-2) !important; }
.uh-handwerk { background: var(--uh-nacht-2) !important; }

/* ---------- Listen und Artikelseite ------------------------------------- */

.uh-schrittleiste, .uh-listenkopf {
  background: var(--uh-nacht-2) !important;
  border-color: rgba(255,255,255,.09) !important;
}
.uh-schrittleiste-marken a {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--uh-kalk) !important;
}
.uh-schrittleiste-marken a:hover { background: var(--uh-signal) !important; color: var(--uh-nacht) !important; }
.uh-schrittleiste-titel, .uh-listenkopf p { color: var(--uh-nebel) !important; }
.uh-listenkopf-nr { color: var(--uh-sand) !important; }
.uh-listenabschnitt { border-top-color: rgba(255,255,255,.1) !important; }

/* HINWEIS 22.09.2026: Die .uh-einordnung-Regeln greifen nirgends mehr.
   Der Abschnitt auf der Artikelseite wurde entfernt (Begründung in
   productdetails/index.tpl). Die Regeln bleiben bewusst stehen: ihre
   Selektoren stehen in derselben Liste wie lebende (.uh-abschnitt, .btn,
   .uh-start-buehne, .uh-listenkopf …), und die zu entwirren wäre Risiko
   für etwas, das ohnehin niemand sieht. Wer hier sucht: die Klasse wird
   nicht mehr ausgegeben. */
.uh-einordnung { background: var(--uh-nacht-2) !important; border-top-color: rgba(255,255,255,.09) !important; }
.uh-ablauf-schritt a {
  background: var(--uh-nacht-3) !important;
  border-color: rgba(255,255,255,.1) !important;
  border-top-color: rgba(255,255,255,.14) !important;
}
.uh-ablauf-titel { color: var(--uh-kalk) !important; }
.uh-ablauf-nr { color: var(--uh-nebel) !important; }
.uh-ablauf-schritt.uh-hier a { background: var(--uh-signal) !important; border-color: var(--uh-signal) !important; }
.uh-ablauf-schritt.uh-hier .uh-ablauf-titel,
.uh-ablauf-schritt.uh-hier .uh-ablauf-nr { color: var(--uh-nacht) !important; }
.uh-dazu-marken a, .uh-nachbar {
  background: var(--uh-nacht-3) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: var(--uh-kalk) !important;
}
.uh-dazu-marken a:hover { background: var(--uh-signal) !important; color: var(--uh-nacht) !important; }
.uh-nachbar strong { color: var(--uh-kalk) !important; }
.uh-nachbar-rolle { color: var(--uh-nebel) !important; }
.uh-nachbarn { border-top-color: rgba(255,255,255,.1) !important; }

.product-offer, .product-buy, .basket-form, .uh-kaufbox {
  background: var(--uh-nacht-2) !important;
  border-color: rgba(255,255,255,.1) !important;
  box-shadow: none !important;
}
.product-offer .price, .uh-kaufbox .price { color: var(--uh-signal) !important; }
.product-images, .carousel-main, .product-gallery, .variation-gallery {
  background: var(--uh-kalk) !important;
  border-color: rgba(255,255,255,.1) !important;
}
.product-offer .input-group, .basket-form .input-group {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
}
.product-offer .input-group .form-control { color: var(--uh-kalk) !important; }
.product-offer .input-group .btn { color: var(--uh-kalk) !important; }

.nav-tabs { border-bottom-color: rgba(255,255,255,.12) !important; }
.nav-tabs .nav-link { color: var(--uh-nebel) !important; }
.nav-tabs .nav-link.active { color: var(--uh-kalk) !important; }
.table-striped tbody tr:nth-child(odd) { background: var(--uh-nacht-2) !important; }
.table-striped td, .product-attributes td { color: var(--uh-nebel) !important; border-color: rgba(255,255,255,.07) !important; }
.product-attributes table { border-color: rgba(255,255,255,.1) !important; }

/* ---------- Knöpfe ------------------------------------------------------ */

.btn-primary {
  background: var(--uh-signal) !important;
  border-color: var(--uh-signal) !important;
  color: var(--uh-nacht) !important;
  font-weight: 700 !important;
}
.btn-primary:hover {
  background: var(--uh-signal-warm) !important;
  border-color: var(--uh-signal-warm) !important;
  color: var(--uh-nacht) !important;
}
.btn-secondary, .btn-outline-primary {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: var(--uh-kalk) !important;
}
.btn-secondary:hover, .btn-outline-primary:hover {
  border-color: var(--uh-signal) !important;
  color: var(--uh-signal) !important;
}

/* ---------- Formulare --------------------------------------------------- */

.form-control, .custom-select, textarea {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--uh-kalk) !important;
}
.form-control::placeholder { color: var(--uh-nebel) !important; }
.form-control:focus {
  background: rgba(255,255,255,.1) !important;
  border-color: var(--uh-signal) !important;
  box-shadow: 0 0 0 3px rgba(248,191,0,.2) !important;
}

/* ---------- Fußzeile ---------------------------------------------------- */

footer, .footer { background: #0E1109 !important; border-top: 1px solid rgba(255,255,255,.07); }

/* ---------- Luft -------------------------------------------------------- */

/* Hochwertig heißt vor allem: mehr Abstand. buconcept arbeitet mit
   72–150 px zwischen den Abschnitten, hier waren es 56–104. */
.uh-abschnitt { padding-block: var(--uh-luft) !important; }
.uh-zutaten-text { padding-block: var(--uh-luft) !important; }


/* ---------- Das Markengrün im Einsatz -----------------------------------
   Grün steht für Herkunft und Zustand, nicht für Handlung. Es markiert,
   was gut ist und was zur Marke gehört — die Handlung bleibt gelb.      */

/* Verfügbarkeit: das klassische „alles in Ordnung". */
.delivery-status, .product-delivery-status,
.stock-information > [class*="col"]:first-child > *,
.ribbon-8, .ribbon {
  background: rgba(84,184,79,.16) !important;
  color: var(--uh-gruen-hell) !important;
  border: 1px solid rgba(84,184,79,.3) !important;
}
.productbox .ribbon, .ribbon-8 {
  background: var(--uh-gruen) !important;
  color: var(--uh-nacht) !important;
  border-color: var(--uh-gruen) !important;
  font-weight: 700 !important;
}

/* Die Kleeblatt-Symbole im Vorteilsblock — hier ist Grün buchstäblich die
   Marke. */
.uh-vorteil .icon-plus { background: rgba(84,184,79,.16) !important; }
.uh-vorteil > .row {
  background: var(--uh-nacht-2) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.uh-vorteil > .row:hover { border-color: var(--uh-gruen) !important; }
.uh-vorteil p strong { color: var(--uh-kalk) !important; }
.uh-vorteil p { color: var(--uh-nebel) !important; }

/* Die kleine Zeile über jeder Überschrift trägt die Marke durch die Seite.
   Vorher war sie gelb und stand damit in Konkurrenz zu den Knöpfen. */
.uh-augenmerk, .uh-marke { color: var(--uh-gruen-hell) !important; }

/* Herkunftsangaben und Marken-Plaketten. */
.uh-auszeichnung {
  border-color: rgba(84,184,79,.45) !important;
  background: rgba(84,184,79,.12) !important;
}
.uh-auszeichnung::before { background: var(--uh-gruen) !important; }

/* Links im Fließtext: grün unterstrichen statt gelb — Gelb bleibt den
   Knöpfen vorbehalten. */
.uh-schicht-inhalt a:not(.btn), .link-content a:not(.btn),
.tab-content a:not(.btn), footer a:hover {
  color: var(--uh-gruen-hell) !important;
}

/* Aufzählungspunkte in der Artikelbeschreibung. */
.tab-content ul li::marker, .product-description ul li::marker,
.link-content ul li::marker { color: var(--uh-gruen) !important; }

/* ==========================================================================
   Vorrang vor dem Custom-CSS der Template-Einstellungen
   ==========================================================================
   Der Shop gibt die 4,3 KB „Benutzerdefinierte Styles" aus den
   Template-Einstellungen als <style>-Block am ENDE des <head> aus — also
   nach allen Stylesheets des Templates. Darin steht unter anderem

       h1, h2, h3, … { font-family: Inter, sans-serif !important; }

   Bei gleicher Spezifität gewinnt der spätere Block, und !important auf
   beiden Seiten ändert daran nichts. Ergebnis: Ueberschriften liefen
   weiter in Inter, obwohl Archivo Black geladen und die Regel aktiv war
   (21.09.2026 im CSSOM nachgewiesen — die eigene Regel stand da, wurde
   aber ueberstimmt).

   Deshalb hier dieselben Regeln mit `html body` davor. Das hebt die
   Spezifitaet ueber die Element-Selektoren des Custom-CSS.

   AUFRAEUMEN: Das Custom-CSS stammt aus dem Stand vor dem Redesign und
   kaempft nun gegen jede neue Regel. Es gehoert in den Template-
   Einstellungen des CHILD geleert (Sicherung liegt in
   template/customsass-content-18.09.2026.css). Danach kann dieser ganze
   Abschnitt weg.                                                        */

html body h1, html body .h1, html body h2, html body .h2,
html body h3, html body .h3,
html body .uh-start-buehne h1, html body .uh-abschnitt h2,
html body .uh-zutaten-text h2, html body .uh-listenkopf h2,
html body .uh-einordnung-kopf h2, html body .uh-schicht-inhalt h3,
html body .product-detail h1, html body .nav-tabs .nav-link {
  font-family: var(--uh-display) !important;
  font-weight: 400 !important;
  letter-spacing: -.02em !important;
}

html body, html body p, html body li, html body td,
html body .form-control, html body .btn, html body .nav-link {
  font-family: var(--uh-text) !important;
}

/* Produktnamen und Preise bleiben in der Textschrift, aber kraeftig —
   Archivo Black waere in einer Kachel zu laut. */
html body .productbox-title, html body .productbox-title a {
  font-family: var(--uh-text) !important;
  font-weight: 600 !important;
}
html body .price, html body .productbox-price,
html body .uh-schicht-nr, html body .uh-listenkopf-nr {
  font-family: var(--uh-display) !important;
}

/* Auch die Flaechen aus dem Custom-CSS ueberschreiben: dort stehen weisse
   Hintergruende und die alten Radien. */
html body .productbox, html body .uh-vorhaben {
  background: var(--uh-nacht-2) !important;
  border-radius: var(--uh-rund) !important;
}
html body header .form-control {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #fff !important;
}
html body header .form-control::placeholder { color: rgba(255,255,255,.55) !important; }

/* Die Zeile ganz oben lag weiss ueber dem dunklen Kopf. */
html body .topbar-main, html body .topbar-main .nav-link,
html body #shop-nav-top, html body .navbar-top {
  background: #0E1109 !important;
  color: rgba(244,243,238,.8) !important;
}
html body .topbar-main .nav-link:hover { color: var(--uh-gruen-hell) !important; }

/* ==========================================================================
   Schrift gegen den globalen Font-Override durchsetzen
   ==========================================================================
   Der Shop laedt das Stylesheet aus templates/NOVA/, NICHT aus dem Child
   (am 21.09.2026 an der ausgelieferten URL nachgewiesen). Die Kopie im
   Child zu aendern war deshalb wirkungslos, und die NOVA-Datei wird
   bewusst nicht angefasst — die sehen alle Besucher sofort, waehrend das
   Redesign nur in der Vorschau laeuft.

   Dort steht:
       html, body, :not(i):not(.fa):not(.fas):not(.far):not(.fal):not(.fab)
       :not([class^=fa-]):not([class*=" fa-"]):not(.material-icons)
       :not(.material-symbols-outlined):not(.icon)
       { font-family:"Inter", … !important }

   Nachgezaehlt: 10 Klassen/Attribute + 1 Element = Spezifitaet 0,10,1.
   Ein erster Versuch mit neun Negationen (0,9,1) reichte deshalb NICHT —
   die Regel griff nachweislich (matches() = true), verlor aber trotzdem.
   Hier stehen zwoelf: 0,12,1.

   AUFRAEUMEN: Die saubere Loesung ist, den Override aus dem Custom-CSS-Feld
   von NOVA zu entfernen (im Child ist er schon raus). Danach kann dieser
   ganze Abschnitt geloescht werden. Gehoert zum Livegang.                */

h1:not(.uh-x1):not(.uh-x2):not(.uh-x3):not(.uh-x4):not(.uh-x5):not(.uh-x6):not(.uh-x7):not(.uh-x8):not(.uh-x9):not(.uh-x10):not(.uh-x11):not(.uh-x12), h2:not(.uh-x1):not(.uh-x2):not(.uh-x3):not(.uh-x4):not(.uh-x5):not(.uh-x6):not(.uh-x7):not(.uh-x8):not(.uh-x9):not(.uh-x10):not(.uh-x11):not(.uh-x12), h3:not(.uh-x1):not(.uh-x2):not(.uh-x3):not(.uh-x4):not(.uh-x5):not(.uh-x6):not(.uh-x7):not(.uh-x8):not(.uh-x9):not(.uh-x10):not(.uh-x11):not(.uh-x12) {
  font-family: var(--uh-display) !important;
  font-weight: 400 !important;
  letter-spacing: -.025em !important;
}

body:not(.uh-x1):not(.uh-x2):not(.uh-x3):not(.uh-x4):not(.uh-x5):not(.uh-x6):not(.uh-x7):not(.uh-x8):not(.uh-x9):not(.uh-x10):not(.uh-x11):not(.uh-x12), p:not(.uh-x1):not(.uh-x2):not(.uh-x3):not(.uh-x4):not(.uh-x5):not(.uh-x6):not(.uh-x7):not(.uh-x8):not(.uh-x9):not(.uh-x10):not(.uh-x11):not(.uh-x12), li:not(.uh-x1):not(.uh-x2):not(.uh-x3):not(.uh-x4):not(.uh-x5):not(.uh-x6):not(.uh-x7):not(.uh-x8):not(.uh-x9):not(.uh-x10):not(.uh-x11):not(.uh-x12), .btn:not(.uh-x1):not(.uh-x2):not(.uh-x3):not(.uh-x4):not(.uh-x5):not(.uh-x6):not(.uh-x7):not(.uh-x8):not(.uh-x9):not(.uh-x10):not(.uh-x11):not(.uh-x12), .nav-link:not(.uh-x1):not(.uh-x2):not(.uh-x3):not(.uh-x4):not(.uh-x5):not(.uh-x6):not(.uh-x7):not(.uh-x8):not(.uh-x9):not(.uh-x10):not(.uh-x11):not(.uh-x12), td:not(.uh-x1):not(.uh-x2):not(.uh-x3):not(.uh-x4):not(.uh-x5):not(.uh-x6):not(.uh-x7):not(.uh-x8):not(.uh-x9):not(.uh-x10):not(.uh-x11):not(.uh-x12) {
  font-family: var(--uh-text) !important;
}

/* Produktnamen bleiben in der Textschrift — Archivo Black waere in einer
   Kachel zu laut. */
.productbox-title:not(.uh-x1):not(.uh-x2):not(.uh-x3):not(.uh-x4):not(.uh-x5):not(.uh-x6):not(.uh-x7):not(.uh-x8):not(.uh-x9):not(.uh-x10):not(.uh-x11):not(.uh-x12), .productbox-title a:not(.uh-x1):not(.uh-x2):not(.uh-x3):not(.uh-x4):not(.uh-x5):not(.uh-x6):not(.uh-x7):not(.uh-x8):not(.uh-x9):not(.uh-x10):not(.uh-x11):not(.uh-x12) {
  font-family: var(--uh-text) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   Startseite: Sortiment statt Erzählung
   ========================================================================== */

/* Die Bühne zeigt jetzt Material statt Baustelle. Das Zutaten-Foto ist
   quer und detailreich — der Verlauf darf kräftiger sein als beim
   Landschaftsbild, sonst trägt die Schrift nicht. */
.uh-buehne-material { min-height: min(72vh, 680px); }
.uh-buehne-material::before {
  background: linear-gradient(100deg,
              rgba(20,24,15,.93) 0%, rgba(20,24,15,.78) 42%,
              rgba(20,24,15,.35) 74%, rgba(20,24,15,.15) 100%) !important;
}

/* Die Auszeichnung ist jetzt ein Link — sie muss als solcher erkennbar
   sein und beim Überfahren reagieren. */
a.uh-auszeichnung { text-decoration: none !important; transition: border-color .25s var(--uh-kurve), background .25s var(--uh-kurve); }
a.uh-auszeichnung:hover {
  border-color: var(--uh-gruen) !important;
  background: rgba(84,184,79,.22) !important;
  color: #fff !important;
}
a.uh-auszeichnung::after {
  content: ' ↗';
  font-size: .85em;
  opacity: .8;
}

/* Das Sortiment als fünf Felder. Kein Bild je Feld: die Produktnamen
   darunter sind die Ware, und Baustellenfotos gehören auf die andere
   Seite des Betriebs. */
.uh-sortiment-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
}
.uh-sortiment-feld {
  background: var(--uh-nacht-2);
  padding: 1.8rem 1.6rem 1.9rem;
  display: flex; flex-direction: column;
  transition: background .3s var(--uh-kurve);
}
.uh-sortiment-feld:hover { background: var(--uh-nacht-3); }
.uh-sortiment-nr {
  font-family: var(--uh-display);
  font-size: .82rem; letter-spacing: .1em;
  color: var(--uh-gruen);
  margin-bottom: .9rem;
}
.uh-sortiment-feld h3 {
  font-size: 1.22rem !important;
  line-height: 1.15;
  margin-bottom: .55rem;
}
.uh-sortiment-feld p {
  font-size: .93rem; line-height: 1.6;
  color: var(--uh-nebel);
  margin-bottom: 1.2rem;
}
.uh-sortiment-feld .uh-schicht-produkte { margin-top: auto; }
.uh-sortiment-fuss { margin-top: clamp(2rem,4vw,3rem); margin-bottom: 0; }

/* Das Band „Sand und Sumpfkalk" bekommt das Material nach rechts und wird
   flacher — es ist ein Argument, kein eigener Abschnitt. */
.uh-zutaten-schmal .uh-zutaten-bild { min-height: clamp(280px, 34vw, 440px); }
.uh-zutaten-schmal .uh-zutaten-text { padding-block: clamp(2.5rem, 5vw, 4.5rem) !important; }

@media (max-width: 767.98px) {
  .uh-zutaten-schmal { grid-template-columns: 1fr; }
  .uh-zutaten-schmal .uh-zutaten-bild { order: -1; min-height: 220px; }
}

/* Fuenf Sortimentsfelder gehen in vier Spalten nicht auf — das fuenfte
   stand allein in einer Reihe mit einer grossen Leerflaeche daneben
   (21.09.2026 im Foto gesehen). Drei Spalten ergeben 3+2 und liest sich
   ruhiger. */
@media (min-width: 992px) {
  .uh-sortiment-raster { grid-template-columns: repeat(3, 1fr); }
}
/* Fuenf Spalten waren zwar bündig, quetschten die Texte aber auf vier
   Zeilen. Drei Spalten (3+2) lesen sich ruhiger — die letzte Luecke faellt
   weniger auf als der Umbruch in jedem Feld. */
.uh-sortiment-raster { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (min-width: 992px) {
  .uh-sortiment-raster { grid-template-columns: repeat(3, 1fr); }
}

/* Sechs Vorteile gehen in drei Spalten glatt auf (3+3); bei vier Spalten
   blieb rechts unten eine Zweidrittel-Luecke stehen. */
.uh-vorteile-raster { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (min-width: 992px) {
  .uh-vorteile-raster { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Vorteile und Haltung ---------------------------------------- */

.uh-vorteile-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
}
.uh-vorteil-feld {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--uh-nacht-2);
  padding: 1.7rem 1.6rem;
  transition: background .3s var(--uh-kurve);
}
.uh-vorteil-feld:hover { background: var(--uh-nacht-3); }
/* Das Kleeblatt ist die Marke — es bleibt in seinem Gruen und bekommt eine
   eigene Flaeche, damit es nicht wie ein verirrtes Symbol wirkt. */
.uh-kleeblatt {
  flex: none;
  width: 2.5rem; height: 2.5rem;
  padding: .55rem;
  background: rgba(84,184,79,.16);
  border-radius: 999px;
  box-sizing: border-box;
}
.uh-vorteil-feld strong {
  display: block;
  font-family: var(--uh-display);
  font-size: 1.02rem;
  color: var(--uh-kalk);
  margin-bottom: .4rem;
  letter-spacing: -.01em;
}
.uh-vorteil-feld p {
  font-size: .92rem; line-height: 1.6;
  color: var(--uh-nebel);
  margin: 0;
}

.uh-haltung { background: var(--uh-nacht-2) !important; }
.uh-haltung h2 { margin-bottom: 1.1rem; }
.uh-haltung p { color: var(--uh-nebel); max-width: 52ch; }
.uh-haltung figure { margin: 0; }
.uh-haltung figure img { width: 100%; height: auto; display: block; }
.uh-haltung figcaption {
  font-size: .84rem; color: var(--uh-nebel);
  margin-top: .8rem; text-align: right;
}

/* Die Spaltenregeln ganz ans Ende: weiter oben standen sie VOR der
   Grunddefinition des jeweiligen Rasters und wurden davon ueberschrieben —
   die Vorteile liefen deshalb weiter in vier Spalten. */
@media (min-width: 992px) {
  .uh-vorteile-raster { grid-template-columns: repeat(3, 1fr) !important; }
  .uh-sortiment-raster { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---------- Helle Restflaechen abfangen ---------------------------------
   Warenkorb, Kasse, Konto und Formularseiten bringen Bootstrap-Flaechen
   mit, die im Redesign nie einzeln angefasst wurden — auf dunklem Grund
   stehen sie als helle Bloecke darin (21.09.2026 im leeren Warenkorb
   gesehen). Diese Regeln fangen die gaengigen ab, damit nichts
   Unbearbeitetes weiss aufblitzt.

   Warenkorb und Kasse sind damit NICHT gestaltet — sie sind nur nicht mehr
   kaputt. Die eigentliche Arbeit daran steht noch aus.                  */

.bg-light, .bg-white, .alert-info, .alert-light, .card-body,
.list-group-item, .well, .panel, .box, .jumbotron,
.cart-empty, .basket-empty, .checkout-wrapper, .checkout-step,
.account-wrapper, .form-wrapper {
  background: var(--uh-nacht-2) !important;
  color: var(--uh-kalk) !important;
  border-color: rgba(255,255,255,.1) !important;
}
.alert-success { background: rgba(84,184,79,.14) !important; color: var(--uh-gruen-hell) !important;
                 border-color: rgba(84,184,79,.35) !important; }
.alert-warning { background: rgba(248,191,0,.14) !important; color: var(--uh-signal-warm) !important;
                 border-color: rgba(248,191,0,.35) !important; }
.alert-danger  { background: rgba(225,16,16,.14) !important; color: #FF8A8A !important;
                 border-color: rgba(225,16,16,.35) !important; }

/* Tabellen in Warenkorb und Kasse */
.table, .table td, .table th {
  color: var(--uh-kalk) !important;
  border-color: rgba(255,255,255,.1) !important;
}
.table thead th { color: var(--uh-nebel) !important; }

/* Runde weisse Symbolflaechen (z. B. der Wagen im leeren Warenkorb) */
.badge-circle, .icon-circle, .empty-icon {
  background: var(--uh-nacht-3) !important;
  color: var(--uh-nebel) !important;
}

/* Modale Fenster und Auswahllisten */
.modal-content, .modal-header, .modal-footer, .dropdown-menu {
  background: var(--uh-nacht-2) !important;
  color: var(--uh-kalk) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.dropdown-item { color: var(--uh-kalk) !important; }
.dropdown-item:hover { background: var(--uh-nacht-3) !important; color: #fff !important; }
.close, .modal-header .close { color: var(--uh-kalk) !important; opacity: .8; }

/* ==========================================================================
   Korrekturen nach dem Livegang, 21.09.2026
   ==========================================================================
   Rueckmeldung Manuel beim Durchsehen der Live-Seite.                    */

/* 1. Der weisse Balken ganz oben.
   Die Topbar besteht aus zwei Ebenen: .topbar-wrapper (aussen) und
   .topbar-main (die Linkliste). Bisher war nur die Liste eingefaerbt —
   der Wrapper blieb weiss, also lief links ein weisser Balken und rechts
   ein dunkler Block.

   Die Zeile fliegt ganz raus: "Kontakt | Impressum | Kalk Natur Bau" steht
   ohnehin in der Fusszeile, und ueber dem Logo hat sie nichts verloren. */
.topbar-wrapper, .topbar-main, .topbar-wrapper.is-fullwidth {
  display: none !important;
}

/* 2. Die Fusszeilen-Ueberschriften waren unsichtbar.
   NOVA setzt sie als .productlist-filter-headline in #363636 — fast
   schwarz auf fast schwarzem Grund. Deshalb sahen "Informationen",
   "Gesetzliche Informationen", "Kategorien" und "Links" aus wie ein
   Fehler. */
footer .productlist-filter-headline,
footer .box-normal-link,
footer .box-normal-link span,
footer .box .dropdown-toggle {
  color: var(--uh-kalk) !important;
  font-family: var(--uh-display) !important;
  font-size: .78rem !important;
  font-weight: 400 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}
footer .box-linkgroup, footer .box-categories { margin-bottom: 2rem; }
footer .productlist-filter-headline { margin-bottom: .9rem !important; }
footer li { margin-bottom: .45rem; }
footer a:not(.btn) { color: rgba(244,243,238,.68) !important; font-size: .94rem; }
footer a:not(.btn):hover { color: var(--uh-gruen-hell) !important; }
/* Die Trennlinie zwischen Fusszeile und Schlusszeile */
footer .footer-bottom, footer hr { border-color: rgba(255,255,255,.08) !important; }

/* 3. Der Shop-Abschnitt auf der Startseite: echte Produktkacheln statt
   Textlisten. Der Platzhalter bekommt oben etwas Luft, die Kacheln
   erben ihre Gestaltung aus redesign.css. */
.uh-produkte-platz { margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.uh-produkte-platz .product-list { margin-inline: 0; }
.uh-produkte-platz .container, .uh-produkte-platz .container-fluid {
  padding-inline: 0 !important; max-width: none !important;
}
.uh-shop-fuss {
  display: flex; flex-wrap: wrap; gap: .8rem;
  margin-top: clamp(2rem, 4vw, 3rem); margin-bottom: 0;
}

/* 4. Produktkacheln aus dem OnPage Composer.
   Die Kacheln der Startseite tragen die Klasse .list-gallery und bauen
   anders auf als die der Produktliste: dort faerbt .productbox-images die
   GANZE Kachel hell ein, nicht nur das Bildquadrat. Folge: heller
   Textbereich, darauf der Produktname in hellem Grau — praktisch
   unlesbar, und der gelbe Preis stand auf Weiss (21.09.2026 im Foto
   gesehen).

   Hell bleibt deshalb nur noch das Bild selbst; alles darunter ist wieder
   dunkel. Der helle Grund hinter dem Bild ist gewollt — die Produktfotos
   sind fast weiss und brauchen ihn. */
.productbox .productbox-images,
.productbox .productbox-images.list-gallery {
  background: none !important;
}
.productbox .productbox-image,
.productbox .productbox-image.square,
.productbox .productbox-image .inner {
  background: var(--uh-kalk) !important;
}
/* Der Textteil sitzt auf der Kachelfarbe. */
.productbox .productbox-details,
.productbox .productbox-inner > .row > .col:last-child,
.productbox .productbox-title,
.productbox .price_wrapper {
  background: none !important;
}
.productbox .productbox-title, .productbox .productbox-title a,
.productbox .productbox-title span {
  color: var(--uh-kalk) !important;
  opacity: 1 !important;
}
.productbox .price, .productbox .productbox-price { color: var(--uh-signal) !important; }
.productbox .price-note, .productbox small, .productbox .productbox-price small {
  color: var(--uh-nebel) !important;
}

/* Der versetzte Rhythmus gehoert nicht in einen Vier-Kachel-Block direkt
   unter der Buehne — dort wirkt er wie ein Layoutfehler statt wie Absicht. */
#uh-produkte-hier .uh-raster-versetzt > *:nth-child(even) { transform: none !important; }

/* 5. Das Zweitbild der Kachel lag UNTER dem ersten statt darueber.
   NOVA legt je Kachel zwei Bilder an — eines fuer den Normalzustand
   ("first"), eines fuer das Ueberfahren ("second"). Normalerweise liegen
   sie deckungsgleich uebereinander. Durch aspect-ratio und position:
   relative aus dem Redesign rutschte das zweite in den Textfluss: es
   begann direkt unter dem ersten und war 541 px hoch — eine weisse Flaeche
   ueber den gesamten Textbereich der Kachel, auf der Name und Grundpreis
   unsichtbar wurden (21.09.2026 gemessen).

   Beide liegen jetzt wieder uebereinander, das zweite blendet beim
   Ueberfahren ein. */
.productbox .productbox-images { position: relative; }
.productbox .productbox-image.first-wrapper,
.productbox .productbox-image[class*="first"] {
  position: relative; z-index: 1;
}
.productbox .productbox-image.second-wrapper,
.productbox .productbox-image[class*="second"] {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  z-index: 2;
  opacity: 0;
  transition: opacity .4s var(--uh-kurve);
}
.productbox:hover .productbox-image[class*="second"] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .productbox .productbox-image[class*="second"] { transition: none; }
}

/* 6. Die weisse Flaeche in der Produktkachel — die eigentliche Ursache.
   NOVA legt mit .productbox-inner::before eine WEISSE Flaeche ueber die
   ganze Kachel (absolut positioniert, hier 499 px hoch). Sie ist als
   Hover-Grund gedacht.

   Warum das so lange gedauert hat: Pseudoelemente tauchen in
   document.elementsFromPoint() NICHT auf. Die Messung zeigte an der
   Stelle nur transparente Container und darunter die dunkle Kachel — das
   Weiss war im DOM nicht auffindbar, obwohl es im Bild klar zu sehen war.
   Erst die gezielte Abfrage von getComputedStyle(el, '::before') hat es
   gefunden.

   MERKE: Ist im Bild eine Flaeche, die im Element-Stapel nicht vorkommt,
   sind es Pseudoelemente. */
.productbox .productbox-inner::before,
.productbox .productbox-inner::after {
  background: transparent !important;
}
.productbox:hover .productbox-inner::before {
  background: rgba(255,255,255,.04) !important;
}

/* ==========================================================================
   Schematik abbauen, 21.09.2026
   ==========================================================================
   Rueckmeldung Manuel: „dieses 01 02 03 04 05, diese typische Aufzaehlung
   die du gerne machst, geh weg davon — man soll nicht sehen, dass es eine
   Claude-Homepage ist."

   Der Abgleich mit der Gestaltungsrichtlinie hat vier Muster bestaetigt,
   die unabhaengig vom Thema immer wieder auftauchen und deshalb als
   maschinell gemacht gelesen werden:

     1. Nummerierte Marker (01/02/03) — legitim nur, wenn der Inhalt
        wirklich eine Reihenfolge IST. Das Sortiment ist eine Einteilung;
        niemand kauft die fuenf Gruppen der Reihe nach ab. Die Nummern
        haben also etwas behauptet, was nicht stimmt.
     2. Gesperrte Versalien-Zeile ueber jeder Ueberschrift
        („DAS SORTIMENT", „WARUM KALK").
     3. Meta-Zeilen, die mit Mittelpunkten aneinandergereiht sind
        („Pinzgau, Salzburg · seit 2024 …").
     4. Einblenden von unten auf jedem einzelnen Abschnitt.

   Alle vier sind hier abgebaut. Was bleibt, traegt ueber Schriftgroesse,
   Flaeche und Abstand — nicht ueber Etiketten.                          */

/* 1. Nummern: die Klassen bleiben bestehen, falls Markup sie noch liefert,
      werden aber nicht mehr dargestellt. */
.uh-listenkopf-nr, .uh-schrittleiste-nr, .uh-ablauf-nr, .uh-sortiment-nr {
  display: none !important;
}

/* Der Abschnittskopf ohne Nummernspalte. */
.uh-listenkopf {
  display: block;
  padding: 0 0 0 1.1rem;
  background: none !important;
  border-left: 3px solid var(--uh-gruen);
  border-radius: 0 !important;
}
.uh-listenkopf h2 { margin-bottom: .35rem; }
.uh-listenkopf p { max-width: 60ch; }

/* 2. Die Versalien-Zeilen sind aus dem Markup entfernt; die Regel bleibt
      als Sperre, falls eine wieder eingebaut wird. */
.uh-augenmerk, .uh-marke { display: none !important; }

/* Ohne Augenmerk-Zeile braucht die Ueberschrift den Abstand nach oben
   selbst. */
.uh-abschnitt h2, .uh-zutaten-text h2 { margin-top: 0; }

/* 3. Die Auszeichnung ist jetzt ein ganzer Satz statt einer Kette mit
      Mittelpunkten — sie darf zweizeilig laufen. */
a.uh-auszeichnung {
  display: inline-block;
  max-width: 52ch;
  line-height: 1.5;
  text-align: left;
  padding: .7rem 1.2rem;
  border-radius: 2px !important;
}
a.uh-auszeichnung::after { content: none; }
a.uh-auszeichnung::before { display: none; }

/* 4. Einblenden nur noch dort, wo es etwas zeigt: beim Ueberfahren einer
      Kachel. Ganze Abschnitte fahren nicht mehr ein. */
.uh-reveal, .uh-reveal.uh-da {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Die Sprungleiste ohne Nummern: reine Wortmarken. */
.uh-schrittleiste-marken a { padding: .5rem 1.15rem; }

/* Der Ablauf auf der Artikelseite ohne Nummern — eine Reihe von Namen,
   der aktuelle hervorgehoben. */
.uh-ablauf { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.uh-ablauf-schritt a {
  flex-direction: row; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--uh-text);
  font-size: .92rem; font-weight: 600;
  color: var(--uh-kalk) !important;
  padding: .7rem .8rem;
  border-top-width: 1px !important;
}
.uh-ablauf-schritt.uh-hier a { color: var(--uh-nacht) !important; font-weight: 700; }

/* ==========================================================================
   Formulare und Seitenkopf, 22.09.2026
   ==========================================================================
   Rueckmeldung Manuel von der Kontaktseite. Drei Ursachen, alle gemessen: */

/* 1. Die schwebenden Feldbeschriftungen ("Vorname *", "Nachname –
      optionale Angabe") liegen absolut ueber dem Feldrand und bekommen von
      NOVA einen WEISSEN Hintergrund, damit sie den Rand ueberdecken. Auf
      dunklem Grund ist das ein weisser Balken mit grauem Text darin
      (gemessen: background rgb(255,255,255), color rgb(112,112,112)).

      Sie brauchen die Farbe der Flaeche, auf der sie liegen — nicht Weiss. */
.form-group label, .col-form-label, .form-label,
label.col-form-label, .floating-label label {
  background: var(--uh-nacht) !important;
  color: var(--uh-nebel) !important;
  padding-inline: .4rem;
}
/* In einer Karte oder einem Kasten liegt die Beschriftung auf dessen Ton. */
.card label, .product-offer label, .uh-kaufbox label,
.bg-light label, .modal-content label {
  background: var(--uh-nacht-2) !important;
}
/* Im Fokus wird die Beschriftung deutlich — sie gehoert zum aktiven Feld. */
.form-group:focus-within label, .form-group input:focus + label {
  color: var(--uh-signal) !important;
}
/* Der Pflichtfeld-Stern bleibt rot, aber lesbar auf dunkel. */
label .required, label abbr, .form-required { color: #FF8A8A !important; }

/* 2. Der Seitenkopf hatte weisse Striche ueber und unter der Brotkrume:
      .breadcrumb-wrapper traegt border-top und border-bottom in
      rgb(235,235,235) — auf Weiss unsichtbar, auf dunkel zwei helle
      Linien. */
.breadcrumb-container .breadcrumb-wrapper,
.breadcrumb-container .row {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* 3. Aufklappmenues: die Optionen zeichnet das Betriebssystem, nicht das
      Stylesheet des Feldes. Ohne eigene Farben steht heller Text auf
      hellem Grund — der Betreff war deshalb nicht zu lesen. */
select, select.form-control, .custom-select {
  color: var(--uh-kalk) !important;
  background-color: var(--uh-nacht-2) !important;
}
select option, .custom-select option {
  background-color: var(--uh-nacht-2) !important;
  color: var(--uh-kalk) !important;
}
select option:checked, select option:hover {
  background-color: var(--uh-nacht-3) !important;
  color: #fff !important;
}

/* Textfelder und Textbereiche im selben Ton wie die Auswahlfelder. */
input.form-control, textarea.form-control {
  color: var(--uh-kalk) !important;
  background-color: rgba(255,255,255,.06) !important;
}
input.form-control::placeholder, textarea.form-control::placeholder {
  color: rgba(244,243,238,.45) !important;
}
/* Kontrollkaestchen und Auswahlknoepfe sichtbar machen. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--uh-gruen); }
.custom-control-label::before {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.25) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
  background: var(--uh-gruen) !important;
  border-color: var(--uh-gruen) !important;
}

/* ==========================================================================
   Nachbesserungen Kopfzeile und Warenkorb — 23.09.2026
   Rückmeldung Manuel, alles im Foto belegt und nachgemessen.
   ========================================================================== */

/* ---------- 1. Das Suchfeld war oben weiß -------------------------------
   Gemessen: am Seitenanfang `rgb(244,243,238)` mit WEISSER Schrift darauf —
   der Platzhalter war unsichtbar. Nach ein paar Pixeln Scrollen sprang es
   auf `rgba(255,255,255,.1)`, und genau dieser Zustand ist der richtige
   („scrollt man ein bisschen runter färbt sie sich grau, was auch besser
   aussieht").

   Ursache: gestalt.css stammt aus der HELLEN Entwurfsphase und setzt dort
   `background: var(--uh-kalk)`. Der Wähler `header .search-wrapper
   .form-control` hat Spezifität 0,2,1 und schlägt damit die dunkle Regel
   `header .form-control` (0,1,1) — `!important` steht auf beiden Seiten,
   und dann entscheidet die Spezifität, nicht die Reihenfolge der Dateien.

   Deshalb hier über die ID, die gewinnt eindeutig. Und `.tt-hint` gleich
   mit: Das ist das Geisterfeld der Suchvorschläge, das unter dem echten
   liegt — bleibt es hell, blitzt es beim Tippen durch.                  */

header #search-header,
header input.ac_input,
header input.tt-hint,
header input.tt-input,
header .search-wrapper .form-control,
header .nav-icons .form-control {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: var(--uh-kalk) !important;
}
header #search-header:focus,
header .search-wrapper .form-control:focus {
  background: rgba(255,255,255,.16) !important;
  border-color: var(--uh-signal) !important;
  box-shadow: 0 0 0 3px rgba(248,191,0,.2) !important;
}
header #search-header::placeholder,
header .search-wrapper .form-control::placeholder {
  color: rgba(244,243,238,.55) !important;
}
/* Das Geisterfeld darf gar keinen eigenen Grund haben. */
header input.tt-hint { background: transparent !important; color: rgba(244,243,238,.35) !important; }

/* ---------- 2. Alles in der Kopfzeile auf eine Mittellinie ---------------
   Gemessen bei 90 px Kopfhöhe (Mitte = 45):
     Menüpunkte  Mitte 32  → 13 px zu hoch
     Lupe        Mitte 41  →  4 px zu hoch
     Symbole     Mitte 45  → richtig
   Das ist der Grund, warum die Zeile „nicht abgestimmt" wirkt: drei
   Elementgruppen auf drei verschiedenen Höhen.

   Statt jede Gruppe einzeln zu verschieben, bekommen alle Zonen dieselbe
   Höhe wie die Kopfzeile und zentrieren ihren Inhalt. Dann sitzt alles auf
   derselben Linie, auch wenn sich später eine Schriftgröße ändert.      */

header.fixed-navbar nav.navbar,
header.fixed-navbar .navbar-collapse,
header.fixed-navbar .navbar-nav,
header.fixed-navbar .nav-icons,
header.fixed-navbar .search-wrapper {
  display: flex !important;
  align-items: center !important;
  min-height: var(--uh-kopf-hoehe, 90px);
  margin-block: 0 !important;
  padding-block: 0 !important;
}
header.fixed-navbar .navbar-nav > li,
header.fixed-navbar .nav-icons > li {
  display: flex;
  align-items: center;
}
header.fixed-navbar .navbar-nav > li > .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Die Lupe sitzt im Feld und wurde über eine feste Höhe positioniert —
   dadurch hing sie 4 px zu hoch. Senkrecht mittig setzen statt rechnen. */
header .search-wrapper .btn,
header .search-wrapper button[type="submit"] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: .35rem;
  margin: 0 !important;
}
header .search-wrapper { position: relative; }

/* ---------- 3. Helle Kästen in der Bestellübersicht ----------------------
   Gemessen im Warenkorb: `div.card.card-gray` und
   `div.card.card-gray.basket-summary` stehen auf `rgb(245,247,250)`. Auf
   dunklem Grund sind das zwei weiße Blöcke — und der Coupon-Hinweis darin
   ist heller Text auf Weiß, also unlesbar.

   `card-gray` fehlte in der Auffangliste weiter oben; NOVA benutzt die
   Klasse nur hier. Die Plaketten (`badge-light`, `bubble`) ebenso.      */

.card-gray, .card.card-gray, .basket-summary,
.bg-gray, .bg-light-gray {
  background: var(--uh-nacht-2) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--uh-kalk) !important;
}
.card-gray *, .basket-summary * { color: inherit; }
.badge-light, .badge.bubble {
  background: rgba(255,255,255,.12) !important;
  color: var(--uh-kalk) !important;
}
/* Der Coupon-Hinweis ist eine Nebenbemerkung, kein Kasten. */
.card-gray:not(.basket-summary) {
  background: none !important;
  border: 0 !important;
  padding-inline: 0 !important;
  color: var(--uh-nebel) !important;
  font-size: .86rem;
}

/* ---------- Merkmalstabelle auf der Artikelseite -------------------------
   Rückmeldung Manuel, 23.09.2026, zu /Putztraeger-Schilfmatten-10m: „die
   Attribute/Merkmale hast du mit weißem Hintergrund ausgegeben, das kann
   man nicht so gut lesen."

   Gemessen: `tr.attr-dimensions` steht auf `rgb(245,247,250)`, die Schrift
   darauf auf `rgb(244,243,238)`. Das ist NOVAs Zebrastreifen für Tabellen —
   für einen hellen Grund gedacht, auf dunklem Grund hell auf hell.

   Die Streifen bleiben, nur in der richtigen Richtung: eine Spur HELLER als
   der Grund statt fast weiß. Sie erfüllen ihren Zweck (die Zeile mit dem
   Auge halten), ohne zu blenden.                                        */

#content table tr[class^="attr-"],
#content table tr[class*=" attr-"],
.product-attributes tr,
#content .table-striped > tbody > tr:nth-of-type(odd),
#content .table-striped > tbody > tr:nth-of-type(odd) > * {
  background: rgba(255,255,255,.045) !important;
  --bs-table-accent-bg: transparent !important;
  color: var(--uh-kalk) !important;
}
#content table tr[class^="attr-"] > *,
#content .table-striped > tbody > tr > * {
  color: var(--uh-kalk) !important;
  border-color: rgba(255,255,255,.1) !important;
}
/* Die erste Spalte ist die Bezeichnung, die zweite der Wert — die
   Bezeichnung tritt zurück, sonst konkurrieren beide. */
#content table tr[class^="attr-"] > *:first-child,
.product-attributes tr > *:first-child {
  color: var(--uh-nebel) !important;
  font-weight: 400;
}