/* ==========================================================================
   Glückkalk — Gerüst: Schrift, Kopfzeile, Seitenkopf
   UHRIG Solutions, 21.09.2026

   Rückmeldung Manuel: „Header usw. sieht alles so gleich aus, es soll
   moderner, digitaler, hochwertiger wirken." Die bisherigen Blöcke haben
   Inhalte neu geordnet, das Gerüst aber im NOVA-Zustand gelassen — 89 px
   Kopfzeile von der Stange, Suchfeld mit 2 px Radius, Artikelüberschrift
   in 24 px. Genau das wird hier angefasst.

   Lädt NACH redesign.css und startseite.css.
   ========================================================================== */

/* ---------- 1. Schrift --------------------------------------------------
   Überschriften bekommen eine eigene Stimme. Inter ist eine gute Lesefläche,
   aber als Überschrift beliebig — jeder zweite Shop sieht so aus. Space
   Grotesk hat Kanten und wirkt technisch statt dekorativ; der Fließtext
   bleibt Inter.

   Eine variable Datei für alle Schnitte (21 KB), lokal im Child — kein
   Google-Aufruf beim Besucher.                                         */

@font-face {
  font-family: 'UH Display';
  src: url('../schrift/space-grotesk-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --uh-display: 'UH Display', 'Space Grotesk', Inter, system-ui, sans-serif;
  --uh-kopf-hoehe: 84px;
}

h1, .h1, h2, .h2, h3, .h3,
.uh-start-buehne h1, .uh-abschnitt h2, .uh-zutaten-text h2,
.productbox-title, .productbox-title a,
.uh-schicht-inhalt h3, .uh-listenkopf h2, .uh-einordnung-kopf h2 {
  font-family: var(--uh-display) !important;
  font-feature-settings: 'ss01' 1, 'ss02' 1;
}

/* Die großen Überschriften vertragen engeren Satz, weil die Schrift schmaler
   läuft als Inter. */
h1, .h1 { letter-spacing: -.035em !important; }
h2, .h2 { letter-spacing: -.03em !important; }

/* Zahlen überall auf gleiche Breite: Preise, Mengen und Schrittnummern
   springen sonst beim Überfahren und in Listen. */
.price, .productbox-price, .uh-schicht-nr, .uh-listenkopf-nr,
.uh-ablauf-nr, .uh-schrittleiste-nr, .product-price {
  font-variant-numeric: tabular-nums;
  font-family: var(--uh-display);
}

/* ---------- 2. Kopfzeile ------------------------------------------------
   Vorher: 89 px hoch, Inhalt mit 16 px am Fensterrand, während der ganze
   Shop bei 1250 px steht. Jetzt auf derselben Flucht wie alles andere, mit
   klaren Zonen — Logo, Navigation, Werkzeuge.                          */

header.fixed-navbar {
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(38,40,31,.08);
  box-shadow: none !important;
  transition: background .35s var(--uh-kurve), border-color .35s var(--uh-kurve),
              box-shadow .35s var(--uh-kurve);
}
header.fixed-navbar > .container-fluid {
  max-width: 1250px;
  margin-inline: auto;
  padding-inline: 1rem;
}
header.fixed-navbar .toggler-logo-wrapper,
header.fixed-navbar nav.navbar { min-height: var(--uh-kopf-hoehe); }
header.fixed-navbar nav.navbar { align-items: center !important; padding-block: 0; }
header.fixed-navbar .navbar-collapse { align-items: center; }

/* Logo etwas kleiner, dafür mit Luft — ein 70-px-Logo in einer 89-px-Zeile
   drückt alles an den Rand.

   Beim Scrollen wird es ueber transform verkleinert, NICHT ueber height:
   eine klebende Kopfzeile rechnet sonst bei jedem Scroll-Pixel das Layout
   neu. scale laeuft auf der Grafikkarte und kostet nichts. */
header .navbar-brand img {
  height: 52px !important;
  width: auto !important;
  transform-origin: left center;
  transition: transform .3s var(--uh-kurve);
}

/* Navigation: ruhige Schrift, der Zustand kommt über eine Linie, die aus der
   Mitte wächst — kein Farbwechsel, der die Zeile unruhig macht. */
header .nav-link {
  font-family: var(--uh-display);
  font-size: .96rem !important;
  font-weight: 500 !important;
  letter-spacing: -.005em;
  color: var(--uh-tinte) !important;
  padding: .55rem .95rem !important;
}
header .nav-link::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: .15rem;
  height: 2px; border-radius: 2px; background: var(--uh-signal);
  transition: left .28s var(--uh-kurve), right .28s var(--uh-kurve);
}
header .nav-link:hover::after,
header .nav-item.active .nav-link::after { left: .95rem; right: .95rem; }

/* Suche: das Werkzeug, mit dem der Shop bedient wird — vorher ein 231 px
   breites Feld mit 2 px Radius, das wie ein Formularrest aussah. */
header .nav-icons .form-control,
header input[type="search"],
header .search-wrapper .form-control {
  height: 44px !important;
  min-width: 260px;
  border-radius: 999px !important;
  border: 1px solid rgba(38,40,31,.14) !important;
  background: var(--uh-kalk) !important;
  padding-inline: 1.1rem 2.9rem !important;
  font-size: .94rem !important;
  transition: border-color .25s var(--uh-kurve), background .25s var(--uh-kurve),
              box-shadow .25s var(--uh-kurve);
}
header .nav-icons .form-control:focus,
header .search-wrapper .form-control:focus {
  background: #fff !important;
  border-color: var(--uh-signal) !important;
  box-shadow: 0 0 0 4px rgba(248,191,0,.18) !important;
}
header .search-wrapper .btn {
  border-radius: 999px !important;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--uh-tief) !important;
  border: 0 !important;
  color: #fff !important;
}
header .search-wrapper .btn:hover { background: var(--uh-signal) !important; color: var(--uh-tief) !important; }

/* Werkzeug-Symbole als gleich große, anfassbare Flächen statt freistehender
   Glyphen unterschiedlicher Größe. */
header .nav-icons > li > a,
header .nav-icons > li > button,
header .nav-icons .nav-link {
  width: 44px; height: 44px;
  display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 999px;
  transition: background .25s var(--uh-kurve);
}
header .nav-icons > li > a:hover,
header .nav-icons > li > button:hover { background: var(--uh-kalk); }
header .nav-icons .fas, header .nav-icons .far { font-size: 1.12rem !important; }

/* Gescrollter Zustand: kompakter und dunkel, damit der Inhalt darunter
   Vorrang bekommt. */
header.uh-gescrollt {
  background: rgba(20,22,15,.92) !important;
  border-bottom-color: rgba(255,255,255,.1);
  box-shadow: 0 10px 34px rgba(20,22,15,.16) !important;
}
header.uh-gescrollt .toggler-logo-wrapper,
header.uh-gescrollt nav.navbar { min-height: 66px; }
header.uh-gescrollt .navbar-brand img { transform: scale(.8); }
header.uh-gescrollt .nav-link { color: var(--uh-kalk) !important; }
header.uh-gescrollt .nav-icons .fas,
header.uh-gescrollt .nav-icons .far { color: var(--uh-kalk) !important; }
header.uh-gescrollt .nav-icons > li > a:hover,
header.uh-gescrollt .nav-icons > li > button:hover { background: rgba(255,255,255,.1); }
header.uh-gescrollt .form-control {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
}
header.uh-gescrollt .form-control::placeholder { color: rgba(255,255,255,.6) !important; }

/* Die Zeile ganz oben (Kontakt, Impressum) ist Beiwerk und darf so aussehen. */
.header-top-bar, header + .top-bar, body > .top-bar {
  background: var(--uh-tief) !important;
  font-size: .8rem;
  letter-spacing: .01em;
}
.header-top-bar a, body > .top-bar a { color: rgba(244,241,234,.75) !important; }
.header-top-bar a:hover, body > .top-bar a:hover { color: var(--uh-signal) !important; }

/* ---------- 3. Seitenkopf für alle Unterseiten --------------------------
   Jede Unterseite begann bisher mit einer Brotkrume und einer 24-px-
   Überschrift direkt auf Weiß. Ein eigener Kopfbereich gibt allen Seiten
   denselben Auftakt — das ist der Unterschied zwischen „Baukasten" und
   „gestaltet".                                                          */

.breadcrumb-container {
  background: var(--uh-kalk);
  border-bottom: 1px solid rgba(38,40,31,.07);
  margin-bottom: 0 !important;
  padding-block: .9rem !important;
}
.breadcrumb-container .breadcrumb {
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: .84rem;
}
.breadcrumb-container a { color: var(--uh-grau) !important; text-decoration: none !important; }
.breadcrumb-container a:hover { color: var(--uh-tinte) !important; }
.breadcrumb-item.active { color: var(--uh-tinte) !important; font-weight: 600; }

/* ---------- 4. Flächen und Kanten --------------------------------------- */

/* Karten, Kästen und Formulare im ganzen Shop auf ein Maß bringen. NOVA
   mischt 0, 2 und 4 px Radien — das liest sich als Unfall, nicht als Stil. */
.card, .alert, .modal-content, .dropdown-menu, .list-group-item,
.form-control, .custom-select, .input-group-text {
  border-radius: 12px !important;
}
.form-control:focus, .custom-select:focus {
  border-color: var(--uh-signal) !important;
  box-shadow: 0 0 0 4px rgba(248,191,0,.16) !important;
}

/* Sichtbarer Tastaturfokus im ganzen Shop — NOVA setzt ihn stellenweise auf
   none, was die Seite für Tastaturbedienung unbrauchbar macht. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(248,191,0,.65) !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  header.fixed-navbar, header .navbar-brand img, header .nav-link::after {
    transition: none !important;
  }
  header.uh-gescrollt .navbar-brand img { transform: none; }
}

/* ---------- 5. Artikelseite ---------------------------------------------
   Vorher: Überschrift in 24 px über einem 780 px hohen Bild, Kaufbereich
   ohne eigene Fläche, Reiter als graue Leiste. Die Seite, auf der gekauft
   wird, sah aus wie eine Unterseite.                                    */

/* Die Überschrift trägt die Seite — sie darf nicht kleiner sein als ein
   Abschnittstitel auf der Startseite. */
.product-detail h1, .productdetails h1, body.product h1 {
  font-size: clamp(1.7rem, 2.9vw, 2.6rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -.03em !important;
  margin-bottom: .9rem !important;
}

/* Artikelnummer, Kategorie, Hersteller: Beiwerk, das sich vorher wie
   Fließtext las. */
.product-info-inner .small, .product-detail .text-muted,
.productbox-detail-info, .product-meta {
  font-size: .85rem !important;
  color: var(--uh-grau) !important;
}

/* Bildfläche: Rahmen, Rundung, ruhiger Grund — der fast weiße Eimer hat
   sonst keine Kante. */
.product-images, .carousel-main, .product-gallery,
.product-detail .productbox-image, .variation-gallery {
  border-radius: 18px !important;
  overflow: hidden;
  background: var(--uh-kalk) !important;
  border: 1px solid rgba(38,40,31,.07);
}
/* Vorschaubilder darunter als eigene kleine Flächen. */
.product-thumbnails img, .carousel-thumbs img, .slick-thumb img {
  border-radius: 10px !important;
  background: var(--uh-kalk);
  border: 1px solid rgba(38,40,31,.09);
  transition: border-color .25s var(--uh-kurve), transform .25s var(--uh-kurve);
}
/* ACHTUNG, am 23.09.2026 gemessen: Hier stand `transform: translateY(-2px)`
   auf dem BILD. `transform` ist eine einzige Eigenschaft — sie ersetzt, was
   vorher drinstand, sie ergaenzt es nicht. NOVA zentriert das Vorschaubild
   aber genau darueber (`translate(-50%, -50%)` zu `top/left: 50%`).

   Folge: Beim Ueberfahren wanderte das Bild von translate(-50,5/-50,5) auf
   translate(0/-2) — also 50 px nach rechts und 48 px nach unten, ins untere
   rechte Eck. Manuel: „die swipen irgendwie ins untere rechte Eck."

   Die Hebung sitzt deshalb jetzt am Rahmen, der keine eigene
   Verschiebung hat. Merke: nie `transform` auf einem Element ueberschreiben,
   das damit positioniert wird. */
.product-thumbnails .square:hover,
.product-thumbnails .slick-slide:hover,
.carousel-thumbs .square:hover {
  transform: translateY(-2px);
  transition: transform .25s var(--uh-kurve);
}
.product-thumbnails img:hover, .carousel-thumbs img:hover {
  border-color: var(--uh-signal);
}

/* Die Kaufzone bekommt eine eigene Fläche: Preis, Verfügbarkeit, Menge und
   Knopf gehören sichtbar zusammen. */
.product-offer, .product-buy, .basket-form, .uh-kaufbox {
  background: #fff;
  border: 1px solid rgba(38,40,31,.1);
  border-radius: 18px;
  padding: 1.4rem 1.5rem 1.5rem;
  box-shadow: 0 10px 34px rgba(20,22,15,.05);
}
.product-offer .price, .uh-kaufbox .price {
  font-size: clamp(1.9rem, 2.6vw, 2.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  line-height: 1.05;
}
/* Mengenfeld und Kaufknopf auf gleiche Höhe und Rundung. */
.product-offer .input-group, .basket-form .input-group { border-radius: 999px; overflow: hidden; }
.product-offer .btn-primary, .basket-form .btn-primary {
  height: 52px; font-size: 1rem !important; padding-inline: 1.8rem !important;
}
/* Verfügbarkeit als Plakette.

   ACHTUNG: .stock-information ist im NOVA-Markup eine ganze .row, die auch
   „Frage zum Artikel" enthaelt — die Plakette umschloss deshalb beides und
   sah aus wie ein zweiter Kasten in der Kaufzone (21.09.2026 im Foto
   gesehen). Die Auszeichnung gehoert auf die Statusangabe SELBST. */
.stock-information { display: flex; align-items: center; gap: .8rem; }
.delivery-status, .product-delivery-status,
.stock-information > [class*="col"]:first-child > *,
.stock-information .delivery-status-text {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(63,155,69,.1);
  color: #2C7A33 !important;
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .85rem; font-weight: 600;
  width: auto;
}

/* Reiter: Linie statt Kasten, aktiver Reiter mit Markenfarbe. */
.nav-tabs { border-bottom: 1px solid rgba(38,40,31,.12) !important; gap: .3rem; }
.nav-tabs .nav-link {
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: none !important;
  font-family: var(--uh-display);
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--uh-grau) !important;
  padding: .75rem 1.1rem !important;
  transition: color .25s var(--uh-kurve), border-color .25s var(--uh-kurve);
}
.nav-tabs .nav-link:hover { color: var(--uh-tinte) !important; }
.nav-tabs .nav-link.active {
  color: var(--uh-tinte) !important;
  border-bottom-color: var(--uh-signal) !important;
}

/* Die Beschreibung ist eine lange Kette von Aufzählungen. Mehr Zeilenluft
   und ein ruhiger Aufzählungspunkt machen sie überhaupt erst lesbar. */
.tab-content, .product-description { font-size: .98rem; line-height: 1.68; }
.tab-content h3, .product-description h3,
.tab-content strong:first-child { font-family: var(--uh-display); }
.tab-content ul, .product-description ul { padding-left: 1.1rem; }
.tab-content li, .product-description li { margin-bottom: .3rem; }
.tab-content ul li::marker, .product-description ul li::marker { color: var(--uh-signal-warm); }

/* Eigenschaftstabelle (Versandgewicht, Inhalt …) als ruhiges Raster. */
.product-attributes table, .table-striped {
  border-radius: 12px; overflow: hidden; border: 1px solid rgba(38,40,31,.09);
}
.product-attributes td, .table-striped td { padding: .7rem .9rem !important; border: 0 !important; }
.table-striped tbody tr:nth-child(odd) { background: var(--uh-kalk) !important; }

/* ---------- 6. Unterseiten mit Text ------------------------------------
   AGB, Datenschutz, Versand: reine Textseiten, die bisher randlos über die
   volle Breite liefen.                                                  */

.link-content, .content-page, #content .container > .row > .col-12 {
  font-size: 1rem;
  line-height: 1.7;
}
.link-content h1, .content-page h1 {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem) !important;
  letter-spacing: -.03em !important;
  margin-bottom: 1.2rem;
}
.link-content h2, .link-content h3 { margin-top: 2rem; }
/* Lesbare Zeilenlänge — 1250 px breiter Fließtext liest niemand. */
.link-content p, .link-content li, .content-page p { max-width: 74ch; }

/* ---------- 7. Nachjustierung nach dem ersten Blick ---------------------- */

/* Der Seitenkopf war 84 px hoch für eine einzige Zeile Brotkrume — das ist
   kein Kopfbereich, das ist Leerraum. */
.breadcrumb-container {
  padding-block: .65rem !important;
  min-height: 0 !important;
}
.breadcrumb-container > .container,
.breadcrumb-container > .container-fluid { padding-block: 0 !important; }

/* Karten in Karten in Karten: die Kaufzone ist EINE Fläche. Was darin liegt
   — Verfügbarkeit, Mengenfeld, Knopf — braucht keinen eigenen Rahmen mehr,
   sonst zerfällt der Bereich optisch in drei Kästen. */
.product-offer .card, .basket-form .card,
.product-offer > .row > div > .card,
.product-offer .border, .basket-form .border {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Das Mengenfeld bleibt eine Einheit, aber als Umriss statt als Karte. */
.product-offer .quantity-wrapper, .basket-form .quantity-wrapper,
.product-offer .input-group, .basket-form .input-group {
  border: 1px solid rgba(38,40,31,.14) !important;
  border-radius: 999px !important;
  background: #fff !important;
  overflow: hidden;
}
.product-offer .input-group .form-control,
.basket-form .input-group .form-control {
  border: 0 !important;
  border-radius: 0 !important;
  text-align: center;
  background: none !important;
  box-shadow: none !important;
}
.product-offer .input-group .btn, .basket-form .input-group .btn {
  border: 0 !important; background: none !important;
  color: var(--uh-tinte) !important;
}
.product-offer .input-group .btn:hover { background: var(--uh-kalk) !important; }

/* Die Zeile ganz oben bekommt eine eigene Fläche, damit sie sich vom
   Kopfbereich absetzt statt frei über dem Logo zu schweben. */
.top-bar, .navbar-top, header .top-bar-wrapper {
  background: var(--uh-tief) !important;
  border-bottom: 0 !important;
}
.top-bar a, .navbar-top a {
  color: rgba(244,241,234,.8) !important;
  font-size: .82rem;
  text-decoration: none !important;
}
.top-bar a:hover, .navbar-top a:hover { color: var(--uh-signal) !important; }
.top-bar .container, .navbar-top .container { max-width: 1250px; }

/* Der Seitenkopf blieb trotz kleinem Padding 76 px hoch — die Hoehe kam von
   der inneren Zeile, nicht vom Container. */
.breadcrumb-container .breadcrumb-wrapper,
.breadcrumb-container .row { min-height: 0 !important; }
.breadcrumb-container .breadcrumb-wrapper > * { padding-block: 0 !important; }

/* Mengenfeld: die 12-px-Rundung stammt aus der allgemeinen .form-control-
   Regel weiter oben. Innerhalb der Mengenauswahl gehoert sie weg, sonst
   liegt ein abgerundetes Feld in einem abgerundeten Rahmen. */
.product-offer .form-control, .basket-form .form-control,
.quantity-wrapper .form-control, .product-quantity .form-control {
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: center;
}
.product-offer input[type="number"], .basket-form input[type="number"] {
  -moz-appearance: textfield;
}
.product-offer input[type="number"]::-webkit-outer-spin-button,
.product-offer input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* ---------- 8. Karte-in-Karte aufloesen --------------------------------- */

/* Selbst gebaut und selbst gefunden: .product-buy liegt INNERHALB von
   .product-offer, und beide standen oben in derselben Karten-Regel. Ergebnis
   war ein Kasten im Kasten (21.09.2026 gemessen: aeussere 593x386 mit 18 px
   Radius, innere 543x123 mit denselben Werten).

   Die Kaufzone ist EINE Flaeche. Was darin liegt, trennt sich ueber Abstand
   und Linien, nicht ueber weitere Rahmen. */
.product-offer .product-buy,
.uh-kaufbox .product-buy,
.product-offer .basket-form,
.uh-kaufbox .basket-form {
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 1.1rem;
  padding-top: 1.1rem !important;
  border-top: 1px solid rgba(38,40,31,.1) !important;
}

/* Der Seitenkopf blieb bei 76 px, obwohl die Brotkrume nur 22 px hoch ist —
   der Rest kam aus Abstaenden weiter innen. Hier wird die Hoehe direkt
   gesetzt, damit die Seite nicht mit Leerraum beginnt. */
.breadcrumb-container {
  padding-block: .7rem !important;
  line-height: 1.4;
}
.breadcrumb-container * { margin-bottom: 0 !important; }
.breadcrumb-container .row { align-items: center; }