/* ==========================================================================
   Glückkalk — Handy
   UHRIG Solutions, 22.09.2026

   Gemessen statt geschätzt: tools/handy-pruefen.py fährt sechs Seitentypen
   bei 390x844 ab und meldet Überbreite, zu kleine Tippflächen und zu kleine
   Schrift. Was hier steht, steht als Antwort auf einen konkreten Messwert —
   jede Regel nennt ihn.

   Wird als LETZTES geladen, damit sie die !important-Regeln aus
   material.css überschreiben kann, ohne dort etwas aufzureißen.
   ========================================================================== */

/* ---------- 1. Überbreite --------------------------------------------------
   Gemessen: Startseite 400 px breit bei 390 px Fenster — die Seite ließ sich
   seitlich schieben. Verursacher war `minmax(380px, 1fr)` beim Vorteile-
   Raster: `auto-fit` darf eine Spalte nicht unter das Minimum schrumpfen, also
   sprengte eine 380-px-Spalte den 350-px-Container.

   `min(380px, 100%)` nimmt dem Minimum die Zähne, sobald der Platz fehlt.
   Dasselbe vorsorglich für alle übrigen Raster — sie liegen heute knapp
   darunter, aber ein schmaleres Gerät (360 px, Galaxy-Klasse) fällt sonst
   in denselben Fehler.                                                      */

.uh-vorteile-raster { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)) !important; }
.uh-kat-raster      { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.uh-sortiment-raster{ grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.uh-ablauf          { grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); }

/* Bewusst KEIN `overflow-x: clip` auf html/body als Netz darunter. Das
   verdeckt den nächsten Ausreißer, statt ihn zu zeigen, und der Wandaufbau
   hängt an `position: sticky` — ein falsch gesetzter overflow-Wert an einem
   Vorfahren kappt den lautlos. Die Überbreite wird an der Ursache behoben
   und mit tools/handy-pruefen.py nachgemessen. */

/* ---------- 2. Tippflächen -------------------------------------------------
   Gemessen auf allen sechs Seiten. Apple nennt 44 px als Mindestmaß, Google
   48 — darunter trifft der Daumen daneben. Die Ausreißer waren:           */

/* Menüknopf: 20x25 px. Das ist der Hauptweg durch den Shop auf dem Handy und
   war die kleinste Fläche der ganzen Seite. */
@media (max-width: 991.98px) {
  #burger-menu {
    min-width: 48px !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
}

/* Fußzeilen-Akkordeon: 358x21 px. Breit genug, aber nur 21 px hoch — beim
   Zielen auf „Gesetzliche Informationen" landet man leicht daneben.

   ACHTUNG, am 22.09.2026 teuer gelernt: Diese Regel stand OHNE
   Breitenbegrenzung. `display: flex !important` hat damit auch am Desktop
   gegriffen — und dort blendet NOVA den Akkordeon-Schalter per
   `display: none` aus, weil die Spalte ihre eigene Überschrift hat. Mein
   !important hat das überstimmt, und jede Überschrift stand doppelt:
   einmal als Schalter mit Pfeil, einmal als Spaltentitel.

   Auf dem Handy fiel es nicht auf, weil dort genau umgekehrt der
   Spaltentitel versteckt ist. Wer nur mobil misst, sieht diesen Fehler nie.

   Die Regel gehört deshalb dahin, wo das Akkordeon überhaupt existiert. */
@media (max-width: 991.98px) {
  .footer-collapse-header a,
  a[id^="crd-hdr-"] {
    display: flex !important;
    align-items: center;
    min-height: 48px;
  }
}

/* Brotkrume: 62x19 px bei 13,4 px Schrift. Beides zu klein.

   KORREKTUR 22.09.2026 — der erste Versuch hat zwei neue Fehler gemacht.
   Er setzte `min-height: 40px` auf den LINK. Damit wurde der Link 40 px
   hoch, während der Pfeil davor auf Texthöhe blieb: „Startseite" saß
   sichtbar tiefer als das ‚<‘ davor. Und derselbe aufgeblähte Link zog den
   Balken so weit auf, dass er ohne Abstand an der Überschrift klebte.

   Richtig ist, die Tippfläche über Innenabstand zu holen und die Zeile als
   Ganzes auszurichten — dann sitzt der Pfeil automatisch auf der Mitte der
   Beschriftung, egal ob er ein Zeichen, ein Symbol oder ein ::before ist. */
@media (max-width: 767.98px) {
  /* KORREKTUR 23.09.2026, zweiter Anlauf: Hier stand `display: flex` auf
     `.breadcrumb-item`. NOVA rendert „Startseite" ZWEIMAL — einmal als
     Zurück-Pfeil (`.breadcrumb-arrow`) fürs Handy, einmal als Anfang der
     Kette (`.first`) — und blendet je nach Breite eine der beiden aus.
     Mein `display` hat beide sichtbar gemacht: „StartseiteStartseite".

     Das ist dasselbe Muster wie beim Fußzeilen-Akkordeon und beim
     nowrap-Namen. Merke: An einem responsiven Theme nie `display` setzen,
     um etwas auszurichten — das hebt fremde Ausblendungen auf. Ausrichten
     geht über Innenabstand und `vertical-align`.                        */
  #breadcrumb .breadcrumb-item { font-size: 14px; }
  #breadcrumb .breadcrumb-link {
    display: inline-block;
    min-height: 0;
    padding-block: 10px;
    font-size: 14px;
    vertical-align: middle;
  }
  #breadcrumb .breadcrumb-item::before,
  #breadcrumb .breadcrumb-arrow::before { vertical-align: middle; }
}

/* Der Brotkrumenbalken braucht Luft zur Überschrift. Ohne sie steht der
   Kasten direkt am Namen der Seite — das war der zweite Teil der
   Rückmeldung („die Kästen sind genau an den Namen dran"). */
.breadcrumb-container { margin-bottom: clamp(1rem, 3vw, 1.8rem); }
#content > h1:first-child,
#content > .container > h1:first-child { margin-top: 0; }

/* Kleine Textlinks im Artikel und im Fuß: Kategorie, Hersteller, Versand,
   Datenblätter, Telefonnummern — alle um 20 px hoch. Sie bekommen Luft nach
   oben und unten statt einer neuen Schriftgröße, damit der Satz ruhig bleibt. */
@media (max-width: 991.98px) {
  .product-category a,
  .product-manufacturer a,
  .vat_info a.shipment,
  .footnote-vat a,
  .desc p > a,
  .contact-form ~ * a[href^="tel:"],
  .opc-Container a[href^="tel:"],
  .opc-Container a[href^="mailto:"] {
    display: inline-block;
    padding-block: 10px;
  }
}

/* Die Produktknöpfe im Wandaufbau lagen bei 40 px — knapp darunter. */
.uh-schicht-produkte a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- 3. Schriftgrößen -----------------------------------------------
   Gemessen: Kontaktformular-Label 12,0 px, Schrittleisten-Titel 12,2 px,
   Lieferstatus 13,6 px. Unter 14 px wird auf dem Handy gekniffen gelesen —
   iOS zoomt beim Antippen eines Feldes sogar hinein, wenn das Feld selbst
   unter 16 px liegt.                                                        */
@media (max-width: 767.98px) {
  .contact-form label,
  label[id^="form-group-label-"],
  .delivery-status li,
  .uh-schrittleiste-titel,
  .form-text,
  small { font-size: 14px !important; }

  /* Gegen den iOS-Einzoom beim Fokus: Eingabefelder mindestens 16 px. */
  input.form-control,
  textarea.form-control,
  select.form-control { font-size: 16px !important; }
}

/* ---------- 4. Produktliste: drei Kacheln nebeneinander --------------------
   Gemessen auf /Produkte: die Kacheltitel waren 126 px breit — die OPC-Reihe
   behält ihre Bootstrap-Spalten und stellt auf dem Handy drei Artikel
   nebeneinander. Bei 390 px bleiben je Kachel gut 110 px; das Foto wird
   briefmarkengroß und der Name bricht mitten im Wort ab.

   Zwei nebeneinander bis 575 px, darüber wieder wie gehabt. Unter 400 px
   einer — dort ist für zwei kein Platz mehr, der dem Produkt gerecht wird. */
@media (max-width: 575.98px) {
  .uh-sortiment-gegliedert .product-list > [class*="col"],
  .uh-produkte-platz .product-list > [class*="col"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}
@media (max-width: 399.98px) {
  .uh-sortiment-gegliedert .product-list > [class*="col"],
  .uh-produkte-platz .product-list > [class*="col"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
/* Der Name darf dann auch zwei Zeilen brauchen, ohne das Raster zu kippen. */
@media (max-width: 575.98px) {
  .productbox-title a.text-clamp-2 { font-size: 15px; line-height: 1.3; }
}

/* ---------- 5. Der Wandaufbau auf dem Handy --------------------------------
   Die Bühne bleibt beim Scrollen stehen (`position: sticky`, Höhe 100svh)
   und ist dabei `overflow: hidden`. Auf einem Handy stapeln sich Zeichnung
   und Karte untereinander statt nebeneinander — passt das zusammen nicht in
   eine Bildschirmhöhe, wird unten abgeschnitten, und zwar lautlos.

   Deshalb hier kleiner rechnen: schmalere Zeichnung, flachere Karte, kürzerer
   Scrollweg. Der Ablauf bleibt derselbe, er braucht nur weniger Platz und
   weniger Daumen.                                                           */
@media (max-width: 767.98px) {
  .uh-aufbau-weg.uh-gesteuert { height: 330svh; }
  .uh-aufbau-raster { gap: 1.5rem; }
  .uh-schnitt { max-width: min(19rem, 88%); }
  .uh-aufbau-karten { min-height: 12rem; }
  .uh-aufbau-karte p { margin-bottom: .9rem; }
  .uh-aufbau-buehne { padding-block: 1.5rem; }
  .uh-fortschritt li { width: 100%; }
  .uh-fortschritt { margin-bottom: 1.2rem; }
}

/* Sehr flache Geräte (Landscape, kleine Handys): der Ablauf hätte keinen
   Platz mehr. Dann lieber alles untereinander zeigen als beschnitten — das
   ist derselbe Weg, den auch prefers-reduced-motion nimmt. */
@media (max-height: 620px) and (max-width: 991.98px) {
  .uh-aufbau-weg.uh-gesteuert { height: auto; }
  .uh-aufbau-weg.uh-gesteuert .uh-aufbau-buehne {
    position: static; height: auto; overflow: visible;
  }
  .uh-gesteuert .uh-aufbau-karte {
    position: static; inset: auto; opacity: 1; transform: none;
    margin-bottom: 2rem; pointer-events: auto;
  }
  .uh-gesteuert .uh-lage { opacity: 1; transform: none; }
  .uh-gesteuert .uh-ruf { opacity: 1; }
}

/* ---------- 6. Ränder ------------------------------------------------------
   Auf dem Handy standen Überschriften und Text direkt am Displayrand, weil
   die großzügigen Desktop-Innenabstände per clamp() gegen null laufen.
   16 px Luft sind das Minimum, damit der Text nicht am Glas klebt.          */
@media (max-width: 575.98px) {
  .uh-innen { padding-inline: 16px; }
  .uh-abschnitt { padding-block: clamp(2.5rem, 9vw, 4rem); }
}

/* ---------- 7. Hover gibt es nicht -----------------------------------------
   Die Seite lebt am Desktop von Hover-Antworten („Antworten statt
   Vorführen", material.css). Auf einem Touchscreen gibt es kein Hover: Der
   Zustand bliebe nach dem Antippen kleben, bis woanders getippt wird.

   Auf Zeigegeräten ohne Hover werden die Bewegungen deshalb abgeschaltet und
   der Ruhezustand so gesetzt, dass er ohne sie vollständig ist.             */
@media (hover: none) {
  .uh-kat:hover .uh-kat-bild { transform: none; }
  .uh-kat-bild { transform: none !important; }
}

/* ---------- 8. Das Handymenü -----------------------------------------------
   Rückmeldung Manuel, 22.09.2026: „auf dem handy ist das menü vollständig
   weiß das passt garnicht."

   Gemessen mit tools/menue-pruefen.py: `#mainNavigation` steht auf
   `rgb(255,255,255)`, die Einträge hatten von der dunklen Gestaltung längst
   `rgb(223,226,219)` — hellgrau auf Weiß, Helligkeitsabstand 31. Die Punkte
   waren nicht nur falsch gefärbt, sie waren praktisch unsichtbar.

   Warum es durchgerutscht ist: das Menü ist NOVAs Offcanvas. Es entsteht
   erst beim Antippen und steht in keiner Messung, die nur die Seite lädt.
   Wer nur fotografiert, was beim Laden da ist, sieht es nie.

   Die Reihenfolge der Regeln ist Absicht: erst allen Flächen im Menü den
   Hintergrund nehmen, dann dem Feld selbst einen geben. So erwischt es auch
   die Unterebenen (Kategorien klappt in eine zweite Liste auf), ohne dass
   ich jede einzeln kennen muss. Die gelben Zähler bleiben ausgenommen —
   die sind Marke, nicht Versehen.                                          */

@media (max-width: 991.98px) {

  #mainNavigation *:not(.badge):not(.label) {
    background-color: transparent !important;
  }

  #mainNavigation {
    background-color: var(--uh-nacht-2) !important;
    border-right: 1px solid rgba(255,255,255,.12);
  }

  /* Kopfzeile „✕ Menü" oben, Einträge darunter — 09.10.2026.
     dunkel.css (Abschnitt 2) setzt .navbar-collapse und .navbar-nav für die
     Desktop-Kopfzeile auf flex + align-items:center + 90 px Mindesthöhe.
     Das griff auch hier: Kopfzeile und Liste standen NEBENeinander, „Menü"
     hing in der Bildschirmmitte, die Einträge schmal darüber. */
  header.fixed-navbar #mainNavigation {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  header.fixed-navbar #mainNavigation .navbar-nav {
    align-items: stretch !important;
    min-height: 0;
  }

  #mainNavigation,
  #mainNavigation a,
  #mainNavigation button,
  #mainNavigation .nav-link,
  #mainNavigation .navbar-brand {
    color: var(--uh-kalk) !important;
  }

  /* Antwort auf die Berührung: der angetippte Punkt färbt sich grün.
     Kein Hover — den gibt es auf einem Touchscreen nicht. */
  #mainNavigation a:active,
  #mainNavigation .nav-link:active,
  #mainNavigation a:focus-visible {
    color: var(--uh-gruen) !important;
  }

  /* Trennlinien waren auf Weiß gedacht und verschwinden sonst. */
  #mainNavigation hr,
  #mainNavigation .dropdown-divider {
    border-color: rgba(255,255,255,.14) !important;
    opacity: 1 !important;
  }
  #mainNavigation li,
  #mainNavigation .nav-item,
  #mainNavigation .list-group-item {
    border-color: rgba(255,255,255,.1) !important;
  }

  /* Das Schließkreuz und die Zeile „Menü" darüber. */
  #mainNavigation .close,
  #mainNavigation .btn-close,
  #mainNavigation [data-dismiss],
  #mainNavigation [data-bs-dismiss] {
    color: var(--uh-kalk) !important;
    opacity: 1 !important;
    filter: invert(1) grayscale(1) brightness(2);
  }

  /* Suchfeld im Menü: dunkler Grund, heller Text, sichtbarer Rahmen. */
  #mainNavigation input,
  #mainNavigation .form-control {
    background-color: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.18) !important;
    color: var(--uh-kalk) !important;
  }
  #mainNavigation ::placeholder { color: rgba(244,243,238,.5) !important; }
}


/* ---------- 9. Der Pflichtfeld-Stern ---------------------------------------
   Rückmeldung Manuel, 22.09.2026: „die Kennzeichnung mit * ist so weiß
   hinterlegt, sieht auch komisch aus."

   dunkel.css nimmt den Beschriftungen von NOVA den weißen Hintergrund —
   aber nur der Beschriftung selbst. Der Stern steckt in einem eigenen
   Element DARIN und behielt sein Weiß: ein weißes Kästchen mit rotem
   Sternchen mitten in einem dunklen Eingabefeld.

   Statt zu raten, in welcher Klasse NOVA den Stern führt (`.required`,
   `.text-danger`, `sup`, `abbr` — je nach Formular verschieden), bekommt
   alles INNERHALB einer Beschriftung den Hintergrund genommen. Die
   Beschriftung selbst behält ihren, sie muss ja den Feldrand überdecken. */
.form-group label *,
.floating-label label *,
.col-form-label *,
label > span,
label > sup,
label > abbr,
label > i {
  background: transparent !important;
  background-color: transparent !important;
  padding-inline: 0 !important;
}

/* Der Stern bleibt rot, aber in einem Ton, der auf dunklem Grund nicht
   sticht. Breiter gefasst als in dunkel.css, weil NOVA ihn je nach
   Formular anders auszeichnet. */
label .required,
label abbr,
label sup,
label .text-danger,
.form-required {
  color: #FF8A8A !important;
}

/* ---------- 10. Luft unter der Brotkrume ---------------------------------
   Rückmeldung Manuel, 23.09.2026: „Bestellübersicht-Kasten ist genau oben
   drüber an dem Kasten, und Warenkorb steht auch sehr nah an der Kategorie."

   Gemessen auf /Warenkorb: der Brotkrumenbalken endet bei y=196, und die
   Überschrift wie auch das Bestellübersicht-Feld beginnen bei y=196.
   **Null Pixel dazwischen** — beides klebt am Balken.

   Meine Regel `.breadcrumb-container { margin-bottom: … }` weiter oben
   greift nicht; der gemessene Außenabstand steht auf 0. Statt ihr mit
   !important nachzuhelfen, sitzt der Abstand jetzt dort, wo er hingehört:
   am Inhaltsbereich selbst. Der wirkt auf ALLES, was unter dem Balken
   anfängt — Überschrift, Seitenspalte, Formulare —, statt nur auf ein
   Element.

   Die Startseite ist davon ausgenommen: Dort setzt index.tpl
   `padding-top: 0 !important`, weil die Bühne direkt unter der Kopfzeile
   beginnen soll.                                                        */

#content { padding-top: clamp(1.4rem, 3vw, 2.4rem); }

/* Das klebende Bestellübersicht-Feld darf beim Scrollen nicht unter der
   Kopfzeile verschwinden — und auch nicht bündig an ihr kleben. */
.cart-summary.sticky-top,
#warenkorb .sticky-top {
  top: calc(var(--uh-kopf-hoehe, 90px) + 1rem) !important;
}

/* ---------- Kategorien am Handy in zwei Spalten — 08.10.2026 --------------
   Gesamtprüfung: Einspaltig standen die neun Kacheln bei 390 px rund
   2.700 px lang untereinander — der längste Block der ganzen Startseite.
   Zwei Spalten mit kleinerem Text; die neunte Kachel läuft über die volle
   Breite, damit unten keine allein steht. Ab Tablet drei Spalten (3x3). */
@media (min-width: 768px) {
  .uh-kat-raster { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 767.98px) {
  .uh-kat-raster { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .uh-kat-wort { padding: .8rem .85rem 1rem; }
  .uh-kat-wort strong { font-size: 1.05rem; margin-bottom: .3rem; overflow-wrap: anywhere; }
  .uh-kat-wort span {
    font-size: .8rem; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  .uh-kat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .uh-kat:last-child:nth-child(odd) .uh-kat-bild { aspect-ratio: 2 / 1; }
}

/* Warenkorb-Knopf auf der Artikelseite: NOVA blendet unter 576 px die
   Beschriftung aus und lässt nur das Wagen-Symbol. Hier steht der Knopf
   aber in voller Breite unter der Mengenwahl — ein gelber Balken mit
   einem kleinen Symbol sah nach Fehler aus (Gesamtprüfung 08.10.2026). */
button[name="inWarenkorb"].btn-block .btn-basket-check > span {
  display: inline !important;
  margin-right: .45rem;
}

/* ---------- Inhaltsseiten (OPC): Lücken zwischen den Blöcken — 08.10.2026 --
   Gesamtprüfung: Auf /produktion und /glueckkalk standen am Handy 140 bis
   237 px Leere zwischen zwei Blöcken. Zusammengesetzt aus dem Außenabstand
   der OPC-Container (48 oben, 100 unten), dem Innenabstand der Bänder
   (56 px) und deren Mindesthöhe von 56 % der Fensterhöhe. */
#content .opc-Container { margin-bottom: 0 !important; }
#content .opc-Container + .opc-Container { margin-top: clamp(1.75rem, 4vw, 3.5rem) !important; }
.uh-band { padding-block: clamp(2rem, 5vw, 4.5rem) !important; }
@media (max-width: 991.98px) {
  .uh-band, .uh-buehne { min-height: 0 !important; padding-block: 1.75rem !important; }
}