/* ==========================================================================
   Glückkalk — Warenkorb und Kasse
   UHRIG Solutions, 22.09.2026

   Bis hierher waren beide nur vor Schaden bewahrt: dunkel.css fängt die
   hellen Bootstrap-Flächen ab, damit nichts weiß aufblitzt. Gestaltet war
   nichts — und das ist die Strecke, an der Geld verdient wird.

   HALTUNG: Ein Warenkorb ist kein Schaufenster. Wer hier ist, hat sich
   entschieden; jetzt darf ihn nichts mehr aufhalten. Deshalb bewusst
   ruhiger als der Rest der Seite: keine Bewegung, keine Bilder außer den
   Produkten, ein einziger lauter Knopf pro Ansicht. Die Farbe trägt
   Bedeutung statt Schmuck — Grün heißt „erledigt", Gelb heißt „hier geht
   es weiter".

   Das Markup stammt von NOVA und ist nicht verhandelbar; die Klassen hier
   sind aus basket/index.tpl, basket/cart_items.tpl und
   checkout/inc_steps.tpl abgelesen, nicht geraten.
   ========================================================================== */

/* ---------- Gemeinsamer Rahmen ------------------------------------------- */

.cart-wrapper,
#content > .container > form[name="Warenkorb"],
.checkout-wrapper {
  max-width: 76rem;
  margin-inline: auto;
}

/* Die Überschriften laufen in der Hausschrift mit, aber kleiner als auf den
   Verkaufsseiten — hier führt der Inhalt, nicht die Typografie. */
html body .basket-heading,
html body .checkout-heading,
html body #content h1 {
  font-family: var(--uh-display) !important;
  font-weight: 400 !important;
  letter-spacing: -.02em !important;
}
html body .basket-heading h2,
html body .cart-items h2 {
  font-size: clamp(1.3rem, 2vw, 1.7rem) !important;
  color: var(--uh-kalk) !important;
}

/* ---------- Die Schrittanzeige der Kasse ---------------------------------
   Markup: nav.stepper.checkout-steps > .step(.step-active/.step-current)
           > .step-content > .badge .badge-count + .step-text + .step-check

   Hier sind Zahlen richtig: Das IST eine Abfolge, und der Kunde will
   wissen, wo er steht und was noch kommt. (Das ist etwas anderes als eine
   durchnummerierte Aufzählung zur Zierde.)                               */

.stepper.checkout-steps {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: none;
}
.checkout-steps .step {
  flex: 1 1 0;
  padding: 0;
  max-width: none;
}
.checkout-steps .step + .step { border-left: 1px solid rgba(255,255,255,.1); }

.checkout-steps .step a {
  display: block;
  padding: 1rem clamp(.8rem, 2vw, 1.4rem);
  text-decoration: none !important;
  transition: background .25s var(--uh-kurve);
}
.checkout-steps .step a:hover { background: rgba(255,255,255,.04); }

.checkout-steps .step-content {
  display: flex;
  align-items: center;
  gap: .7rem;
}

/* Die Nummer: unerledigt nur umrandet, erledigt grün gefüllt, aktuell in
   Signalgelb. Die Farbe sagt den Zustand, nicht ein zusätzliches Wort. */
.checkout-steps .badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 999px;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.28);
  color: var(--uh-nebel) !important;
  font-family: var(--uh-display);
  font-size: .9rem;
  padding: 0 !important;
}
.checkout-steps .step-active .badge {
  background: rgba(84,184,79,.18) !important;
  border-color: var(--uh-gruen);
  color: var(--uh-gruen-hell) !important;
}
.checkout-steps .step-current .badge {
  background: var(--uh-signal) !important;
  border-color: var(--uh-signal);
  color: #14180F !important;
}

.checkout-steps .step-text {
  font-size: .95rem;
  line-height: 1.25;
  color: var(--uh-nebel);
}
.checkout-steps .step-current .step-text {
  color: var(--uh-kalk);
  font-weight: 500;
}
/* Das Häkchen doppelt die grüne Nummer — eines von beidem reicht. */
.checkout-steps .step-check { display: none !important; }

/* ---------- Die Positionen im Korb ---------------------------------------
   Als Liste mit Haarlinien statt als Tabelle mit Rahmen: Der Blick soll
   die Zeile entlanglaufen, nicht in Zellen springen.                     */

.cart-items,
#warenkorb .table {
  background: none !important;
  border: 0 !important;
}
.cart-items .cart-item,
#warenkorb .table > tbody > tr {
  border-top: 1px solid rgba(255,255,255,.1) !important;
  border-bottom: 0 !important;
}
.cart-items .cart-item:first-child,
#warenkorb .table > tbody > tr:first-child { border-top: 0 !important; }

#warenkorb .table > tbody > tr > td,
.cart-items .cart-item > * {
  border: 0 !important;
  padding-block: clamp(1rem, 2vw, 1.5rem) !important;
  vertical-align: middle;
}
#warenkorb .table > thead th {
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
  font-family: var(--uh-display);
  font-weight: 400 !important;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--uh-nebel) !important;
  padding-bottom: .8rem !important;
}

/* Produktbild: klein, quadratisch, ruhig. */
.cart-items img,
#warenkorb .table img {
  width: 76px; height: 76px;
  object-fit: cover;
  background: var(--uh-nacht-3);
  border: 1px solid rgba(255,255,255,.08);
}

/* Artikelname trägt, die Nebenangaben treten zurück. */
.cart-items .product-title a,
#warenkorb .table .product-title a,
#warenkorb .table td a:not(.btn) {
  color: var(--uh-kalk) !important;
  text-decoration: none !important;
  font-weight: 500;
}
.cart-items .product-title a:hover,
#warenkorb .table td a:not(.btn):hover { color: var(--uh-gruen) !important; }

.cart-items .sku,
.cart-items .variation,
.cart-items .weight,
.cart-items .shortdescription,
#warenkorb .sku, #warenkorb .variation, #warenkorb .weight {
  font-size: .84rem;
  color: var(--uh-nebel) !important;
}

/* Preise rechtsbündig und in Ziffern, die sich untereinander decken —
   sonst tanzen die Kommastellen. */
.price-col, .price_value, .cart-items-price-text,
#warenkorb .table td.text-right, #warenkorb .table td.text-end {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--uh-kalk) !important;
}
.price_label, .tax_label, .total-net {
  font-size: .82rem;
  color: var(--uh-nebel) !important;
}

/* ---------- Mengenfeld ----------------------------------------------------
   Ein Eingabefeld mit zwei Knöpfen. Muss mit dem Daumen bedienbar sein,
   deshalb 44 px hoch — auch am Desktop, das schadet dort nicht.         */

.qty-wrapper, .quantity-wrapper,
#warenkorb .input-group {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--uh-rund);
  overflow: hidden;
  background: rgba(255,255,255,.04);
}
.qty-wrapper .form-control,
#warenkorb .input-group .form-control {
  width: 3.6rem;
  min-height: 44px;
  text-align: center;
  background: transparent !important;
  border: 0 !important;
  color: var(--uh-kalk) !important;
  font-variant-numeric: tabular-nums;
  box-shadow: none !important;
}
.qty-wrapper .btn,
#warenkorb .input-group .btn {
  min-width: 42px; min-height: 44px;
  background: transparent !important;
  border: 0 !important;
  color: var(--uh-nebel) !important;
  border-radius: 0 !important;
}
.qty-wrapper .btn:hover,
#warenkorb .input-group .btn:hover {
  background: rgba(255,255,255,.07) !important;
  color: var(--uh-kalk) !important;
}

/* Die Löschen-Schaltfläche ist bewusst leise — sie soll auffindbar sein,
   aber nicht zum Drücken einladen. Erst beim Überfahren wird sie rot. */
.cart-items .delete, .cart-items a[title*="öschen"],
#warenkorb a[title*="öschen"], #warenkorb .btn-delete {
  color: var(--uh-nebel) !important;
  background: none !important;
  border: 0 !important;
  transition: color .2s var(--uh-kurve);
}
.cart-items .delete:hover, #warenkorb a[title*="öschen"]:hover,
#warenkorb .btn-delete:hover { color: #FF8A8A !important; }

/* ---------- Summen -------------------------------------------------------
   Der Block, auf den am Ende alles zuläuft. Am Desktop bleibt er beim
   Scrollen stehen, damit die Summe im Blick ist, während man die Menge
   ändert.                                                                */

/* ACHTUNG, am 23.09.2026 gemessen: `.total-sum` ist bei NOVA NICHT das
   Summen-Feld, sondern ein <strong> um den BETRAG selbst. Ich hatte den
   Klassennamen gedeutet statt nachgesehen und dem Betrag einen Kasten mit
   1,8 rem Innenabstand gegeben — Ergebnis: 78x107 px, in dem „30,42 €" auf
   „3" und „€" umbrach. Genau das, was Manuel als „Zwischensumme wird nicht
   korrekt angezeigt" gemeldet hat.

   Das Feld heisst `.basket-summary`, der Betrag `.total-sum`.            */

.basket-summary, .cart-summary, #warenkorb .card.sticky-top {
  background: var(--uh-nacht-2) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--uh-rund);
}
.basket-summary .card-body { padding: clamp(1.2rem, 2.5vw, 1.8rem) !important; }

.basket-summary .row { font-variant-numeric: tabular-nums; }

/* Der Betrag: gross, in einer Zeile, ohne Kasten. */
strong.total-sum, .total-sum {
  display: inline-block;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  font-family: var(--uh-display);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--uh-kalk) !important;
  white-space: nowrap;
}

/* Die Zeile mit der Zwischensumme wird durch eine Linie abgesetzt — das
   war die Absicht hinter der alten Regel, nur an der falschen Stelle. */
.basket-summary-total {
  border-top: 1px solid rgba(255,255,255,.14) !important;
  padding-top: .9rem !important;
  margin-top: .3rem;
  align-items: center;
}

/* ---------- Knöpfe -------------------------------------------------------
   Genau EIN lauter Knopf je Ansicht: der, der weiterführt. Alles andere
   ist Kontur. Zwei gleich laute Knöpfe erzwingen eine Entscheidung, die
   niemand treffen will.                                                  */

#warenkorb .btn-primary,
.checkout-wrapper .btn-primary,
.cart-summary .btn-primary {
  min-height: 52px;
  padding-inline: 2rem;
  font-family: var(--uh-display);
  font-size: 1.02rem;
  letter-spacing: .01em;
}
#warenkorb .btn-secondary, #warenkorb .btn-outline-primary,
.checkout-wrapper .btn-secondary {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: var(--uh-kalk) !important;
  min-height: 48px;
}
#warenkorb .btn-secondary:hover, .checkout-wrapper .btn-secondary:hover {
  border-color: var(--uh-kalk) !important;
  background: rgba(255,255,255,.05) !important;
}

/* ---------- Auswahl von Versand und Zahlung ------------------------------
   NOVA rendert sie als Liste mit Radios. Die ganze Zeile wird zur
   Schaltfläche — auf dem Handy trifft sonst niemand den 16-px-Punkt.    */

.shipping-methods .list-group-item,
.payment-methods .list-group-item,
.checkout-wrapper .list-group-item {
  background: var(--uh-nacht-2) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--uh-rund);
  margin-bottom: .6rem;
  padding: 1rem 1.2rem !important;
  transition: border-color .2s var(--uh-kurve), background .2s var(--uh-kurve);
}
.checkout-wrapper .list-group-item:hover { border-color: rgba(255,255,255,.3) !important; }
.checkout-wrapper .list-group-item:has(input:checked) {
  border-color: var(--uh-gruen) !important;
  background: rgba(84,184,79,.08) !important;
}
.checkout-wrapper .list-group-item label {
  display: flex; align-items: center; gap: .8rem;
  width: 100%; margin: 0; cursor: pointer;
  min-height: 28px;
}

/* ---------- Adressen -----------------------------------------------------
   Die Adressblöcke sind Karten. Sie sollen lesbar sein, nicht schmuck. */

.checkout-wrapper .address-box,
.checkout-wrapper .card {
  background: var(--uh-nacht-2) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--uh-rund);
}
.checkout-wrapper .card-header {
  background: none !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  font-family: var(--uh-display);
  font-weight: 400;
  color: var(--uh-kalk) !important;
}

/* ---------- Hinweise ------------------------------------------------------ */

.notice, .cart-note, .checkout-note {
  font-size: .86rem;
  color: var(--uh-nebel) !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* ---------- Leerer Warenkorb ---------------------------------------------
   Eine leere Seite ist eine Einladung, kein Fehler. Deshalb kein
   trauriges Symbol, sondern der Weg zurück ins Sortiment.              */

.cart-empty, .basket-empty {
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) 1rem !important;
  border: 1px dashed rgba(255,255,255,.16) !important;
  background: none !important;
}
.cart-empty .btn, .basket-empty .btn { margin-top: 1.4rem; }

/* ---------- Bestellung abgeschlossen -------------------------------------- */

.order-completed, .checkout-completed {
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
.order-completed h1, .checkout-completed h1 { color: var(--uh-gruen-hell) !important; }

/* ---------- Schmale Geräte ------------------------------------------------ */

@media (max-width: 767.98px) {
  /* Die Schrittanzeige wird zur Zeile aus Nummern; die Beschriftung
     bleibt nur beim aktuellen Schritt stehen. Das macht NOVA über
     d-none/d-md-inline-block schon selbst — hier nur die Abstände. */
  .checkout-steps .step a { padding: .8rem .6rem; }
  .checkout-steps .badge { width: 28px; height: 28px; font-size: .82rem; }
  .checkout-steps .step-content { gap: .5rem; justify-content: center; }

  /* Positionen stapeln statt in Spalten quetschen. */
  #warenkorb .table, #warenkorb .table tbody, #warenkorb .table tr,
  #warenkorb .table td { display: block; width: 100% !important; }
  #warenkorb .table thead { display: none; }
  #warenkorb .table > tbody > tr {
    padding-block: 1.2rem;
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: .2rem 1rem;
    align-items: start;
  }
  #warenkorb .table > tbody > tr > td { padding: 0 !important; }
  #warenkorb .table > tbody > tr > td:first-child { grid-row: span 3; }

  .cart-items img, #warenkorb .table img { width: 76px; height: 76px; }

  /* Der Weiter-Knopf über die volle Breite — er ist das Ziel der Seite. */
  #warenkorb .btn-primary, .checkout-wrapper .btn-primary { width: 100%; }

  .total-sum, .cart-summary { position: static !important; }
}

/* ==========================================================================
   Nachbesserung 23.09.2026 — die Schrittanzeige war weiß
   ==========================================================================
   Gemessen auf /Bestellvorgang:
     div.col.nav-item.step.step-active   background rgb(255,255,255)
     .step::before  border-left-color    rgb(235,235,235)
     .step::after   border-left-color    rgb(255,255,255) / rgb(245,247,250)

   Der aktuelle Schritt stand also auf Weiß, mit hellem Text darauf
   („Rechnungs- und Lieferadresse", Helligkeitsabstand 12 — unlesbar).

   Die Pfeilspitzen zwischen den Schritten sind KEINE Elemente, sondern
   Pseudo-Elemente aus Rahmenfarben. In einer Elementliste tauchen sie
   nicht auf — derselbe blinde Fleck wie bei der weißen Kachelfläche am
   21.09.2026, die fünf Versuche gekostet hat.

   Meine erste Fassung hat die Leiste (`nav`) getroffen, aber weder den
   einzelnen Schritt noch die Pfeile.

   Die Pfeile fliegen ganz raus: Sie sind ein Bruchstück der hellen
   Ursprungsgestaltung. Zwischen den Schritten steht ohnehin schon eine
   Haarlinie, und die passt zum Rest der Seite.                          */

.checkout-steps .step,
.checkout-steps .nav-item.step {
  background: transparent !important;
}
.checkout-steps .step::before,
.checkout-steps .step::after {
  display: none !important;
  content: none !important;
}

/* Der aktuelle Schritt wird durch eine gelbe Standlinie markiert, nicht
   durch eine Fläche — das ist ruhiger und trägt dieselbe Aussage. */
.checkout-steps .step-current {
  background: rgba(255,255,255,.04) !important;
  box-shadow: inset 0 -2px 0 var(--uh-signal);
}
.checkout-steps .step a,
.checkout-steps .step .text-decoration-none-util {
  background: transparent !important;
}
.checkout-steps .step,
.checkout-steps .step a,
.checkout-steps .step .step-text {
  color: var(--uh-nebel) !important;
}
.checkout-steps .step-current .step-text,
.checkout-steps .step-current a { color: var(--uh-kalk) !important; }

/* ---------- Pflichtfeld-Sternchen, auch als Pseudo-Element ---------------
   handy.css nimmt allem INNERHALB einer Beschriftung den Hintergrund. Im
   Kassenformular blieb trotzdem ein weißes Kästchen stehen — ein
   Pseudo-Element hängt nicht als Kind im Baum und wird davon nicht
   erfasst.                                                              */
label::before, label::after,
.required-star, .required-info .required-star,
.form-group label::after {
  background: transparent !important;
  background-color: transparent !important;
}
.required-star { color: #FF8A8A !important; }

/* ---------- Nachbesserung 23.09.2026, zweite Runde -----------------------
   Gemessen in der rechten Spalte des Warenkorbs:

     div.sticky-top.cart-summary   385x373  — die Klammer um alles
     div.h2.basket-heading         383x45   Schrift 41,76 px, ohne Abstand
     div.card.card-gray            transparent  (meine Regel greift)
       └ div.card-header           rgb(245,247,250)  ← DAS war der helle Kasten

   Zwei Lehren daraus: Der Kasten sass eine Ebene tiefer als vermutet, und
   die Ueberschrift verlor ihren Innenabstand, als ich ihn von `.basket-
   summary` auf `.card-body` verschoben habe — sie liegt daneben, nicht
   darin.                                                                */

.cart-summary { padding: clamp(1.2rem, 2.5vw, 1.8rem) !important; }
.cart-summary .basket-summary { border: 0 !important; background: none !important; }
.cart-summary .basket-summary .card-body { padding: 0 !important; }

/* Die Ueberschrift ist eine Feldbeschriftung, kein Seitentitel. 41 px
   schreien hier; die Summe darunter soll die groesste Zahl sein. */
html body .cart-summary .basket-heading,
html body .cart-summary .h2 {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem) !important;
  margin-bottom: 1rem !important;
  color: var(--uh-kalk) !important;
}

/* Der Coupon-Hinweis: eine Nebenbemerkung in Textform, kein Kasten. */
.cart-summary .card-gray,
.cart-summary .card-gray .card-header,
.checkout-wrapper .card-gray .card-header {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 0 1rem 0 !important;
  font-size: .86rem !important;
  color: var(--uh-nebel) !important;
}

/* ---------- Überschriften auf der Kaufstrecke ----------------------------
   Gemessen: Warenkorb 41,8 px, Kasse 65,6 px. Auf einer Verkaufsseite ist
   das richtig, hier nicht: „Als Neukunde fortfahren" ist eine Ansage, kein
   Aushängeschild, und es steht neben dem Anmeldefeld, das genauso wichtig
   ist. Die größte Zahl auf diesen Seiten soll die Summe sein.

   Das ist dieselbe Haltung wie oben im Kopf der Datei — ruhiger als der
   Rest der Seite, nichts lenkt vom Weiterkommen ab.                     */

html body #warenkorb h1,
html body .checkout-wrapper h1,
html body .checkout-register-form h1,
html body #content .cart-wrapper h1,
html body #content form[name="Warenkorb"] h1 {
  font-size: clamp(1.7rem, 3vw, 2.4rem) !important;
  line-height: 1.08 !important;
  margin-bottom: 1rem !important;
}