/* FARBAUDIT 21.08.2026 (Sitzung FARBEN, Auftrag Yunus "farbliche Uebereinstimmung"): verbotene Flaechentoene auf die Systemflaeche #f6f5f3 gezogen. Aenderungen unten je Datei benannt; Rueckbau ueber .bak-farbaudit-20260821. Struktur/Selektoren unberuehrt. */
/* Geaendert:
   #f4f4f5 -> #f6f5f3  (Hazard-Info-Button Hover)
*/
/* ============================================================
   fs-checkout.css — Sitzung KONTAKT, 20.08.2026
   Bestellprozess im FOGSMOKE-Stil: Kaufzone Produktseite,
   Warenkorb-Slider, Warenkorbseite, Kasse (#checkout).
   Grundlage: KAUFPROZESS-ANALYSE.md B1–B21 (19.08.) + Abnahme
   der Kontaktseiten-Optik (kantig, FS Display, F26-Kontraste).
   Lädt im Minify-Block NACH fs-kontakt.css.
   Verhalten (Kaufbutton-Text, Versandbalken im Slider,
   GHS-Klappe): fs-checkout.js.
   F26: CTA-Flächen mit weißer Schrift #c90f88 (5,37:1),
   Hover #830779, #E5169F nur Deko.
   ============================================================ */

/* ------------------------------------------------------------
   1. KAUFZONE PRODUKTSEITE
   B1/B2: Der Kaufbutton wird das farbstärkste Element, der
   grüne Gefahrenhinweis-Button des css_hazard-Plugins wird
   ein ruhiger Sekundärknopf. Text im Button setzt fs-checkout.js
   (.fsc-buy-label), das Icon bleibt.
   ------------------------------------------------------------ */
button[name="inWarenkorb"].btn-primary{
  background:#c90f88 !important;
  border-color:#c90f88 !important;
  color:#fff !important;
  border-radius:0 !important;
  font-family:"FS Display","FS Text",sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:17px;
}
button[name="inWarenkorb"].btn-primary:hover,
button[name="inWarenkorb"].btn-primary:focus{
  background:#830779 !important;
  border-color:#830779 !important;
}
button[name="inWarenkorb"] .fsc-buy-label{
  display:inline-block;
  vertical-align:middle;
  margin-left:10px;
}
button[name="inWarenkorb"] .btn-basket-check{vertical-align:middle}

/* B2: Gefahrenhinweis vom Signalgrün auf ruhigen Sekundärstil */
.css-hazard-info-button.btn-success,
button.css-hazard-info-button{
  background:#fff !important;
  border:1px solid #6b6b70 !important;
  color:#3d3d42 !important;
  border-radius:0 !important;
  font-weight:600;
  box-shadow:none !important;
}
.css-hazard-info-button:hover{
  background:#f6f5f3 !important;
  color:#111114 !important;
}

/* ------------------------------------------------------------
   2. WARENKORB-SLIDER (.cart-dropdown im Modal)
   B9: eine Hauptaktion. „Zur Kasse" (.cart-dropdown-next) wird
   der einzige laute Knopf; „Zum Warenkorb" wird Outline; die
   Plugin-Buttons (PayPal / Später Bezahlen) treten zurück.
   ------------------------------------------------------------ */
.cart-dropdown .basket-summary{
  background:#f6f5f3;
  border:1px solid #d9d9de;
  border-top:3px solid #E5169F;
  border-radius:0;
}
.cart-dropdown .basket-summary .cart-dropdown-total-item{
  color:#6b6b70;
  font-size:13px;
}
.cart-dropdown .basket-summary .font-weight-bold-util{
  font-size:16px;
  color:#111114;
}
/* Haupt-CTA */
.cart-dropdown .cart-dropdown-next,
.cart-dropdown .cart-dropdown-next.btn-outline-primary{
  background:#c90f88 !important;
  border:0 !important;
  color:#fff !important;
  border-radius:0 !important;
  font-family:"FS Display","FS Text",sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:16px;
  padding-top:.8rem;
  padding-bottom:.8rem;
}
.cart-dropdown .cart-dropdown-next:hover,
.cart-dropdown .cart-dropdown-next:focus{
  background:#830779 !important;
  color:#fff !important;
}
/* Zweit-CTA „Zum Warenkorb": ruhige Outline */
.cart-dropdown .cart-dropdown-buttons .btn-primary:not(.cart-dropdown-next){
  background:#fff !important;
  border:1px solid #111114 !important;
  color:#111114 !important;
  border-radius:0 !important;
  font-weight:600;
}
.cart-dropdown .cart-dropdown-buttons .btn-primary:not(.cart-dropdown-next):hover{
  background:#111114 !important;
  color:#fff !important;
}
/* Express-Zahlarten der Plugins: kleiner, grau gerahmt, klar nachgeordnet */
.cart-dropdown [class*="ppc-paypal-button"],
.cart-dropdown [class*="paypal"],
.cart-dropdown .btn-ppc{
  border-radius:0 !important;
  opacity:.92;
  transform:scale(.96);
  transform-origin:top center;
}
/* Kantige Grundflächen im Slider */
.cart-dropdown .btn{border-radius:0 !important}

/* ------------------------------------------------------------
   3. VERSANDKOSTENFREI-BALKEN (fs-checkout.js baut ihn in den
   Slider; auf der Warenkorbseite wird der vorhandene Balken
   #shipping-cost-progress-bar auf denselben Stil gebracht)
   ------------------------------------------------------------ */
.fsc-bar{
  margin:0 0 12px;
  padding:12px 14px;
  background:#fff;
  border:1px solid #d9d9de;
}
.fsc-bar-line{
  font-size:13px;
  color:#111114;
  margin-bottom:8px;
}
.fsc-bar-line b{color:#c90f88}
.fsc-bar-track{
  height:8px;
  background:#e4e4e7;
  position:relative;
  overflow:hidden;
}
.fsc-bar-fill{
  position:absolute;left:0;top:0;bottom:0;
  background:#E5169F;
  transition:width .4s ease;
}
.fsc-bar.is-free .fsc-bar-line{color:#111114;font-weight:600}
.fsc-bar.is-free .fsc-bar-fill{background:#1c7b36}
.fsc-bar .fsc-check{color:#1c7b36;font-weight:700;margin-right:6px}

/* Der JTL-Balken setzt Farbe INLINE (rgb(0,0,0)) — daher !important */
#shipping-cost-progress-bar .shipping-cost-progress-bar__inner{
  background-color:#E5169F !important;
}
#shipping-cost-progress-bar .shipping-cost-progress-bar__outer,
#shipping-cost-progress-bar .shipping-cost-progress-bar__inner{
  border-radius:0 !important;
}
#shipping-cost-progress-bar strong{color:#c90f88 !important}

/* ------------------------------------------------------------
   4. WARENKORBSEITE
   Karten kantig, CTA-Hierarchie in der Bestellübersicht:
   „Zur Kasse" laut, PayPal/Später leise (B9 dort ebenso).
   ------------------------------------------------------------ */
.basket-summary{border-radius:0;border:1px solid #d9d9de;border-top:3px solid #E5169F}
.basket-summary .btn{border-radius:0 !important}
/* Warenkorbseite: „Zur Kasse" ist dort ein schlichter .btn-primary in
   .cart-summary — Haupt-CTA magenta, alles andere tritt zurück.
   AUFGEKLÄRT (FOOTER, 20.08.): Auf DEV malt /staging_custom_fix.css
   (per @import in custom.css Zeile 1, ALLES !important, existiert auf
   Live NICHT) den Knopf als 999px-Gradient-Pille über
   `.container.basket #cart-checkout-btn`. Die Regel darunter hält
   dieselbe Spezifität und lädt später — gewinnt auf Dev gegen das
   Staging-File und verhält sich auf Live neutral. Der frühere
   JS-Inline-Notbehelf in fs-checkout.js ist damit entfernt. */
.container.basket #cart-checkout-btn,
.container.basket .basket-summary .btn-primary,
.cart-summary .basket-summary .btn-primary{
  background:#c90f88 !important;
  background-image:none !important;
  border-radius:0 !important;
  border-color:#c90f88 !important;
  color:#fff !important;
  font-family:"FS Display","FS Text",sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:16px;
}
.container.basket #cart-checkout-btn:hover,
.container.basket #cart-checkout-btn:focus,
.cart-summary .basket-summary .btn-primary:hover,
.cart-summary .basket-summary .btn-primary:focus{
  background:#830779 !important;
  background-image:none !important;
  border-color:#830779 !important;
}
/* Express-Zahlarten (Plugin-Pills) auf der Warenkorbseite nachordnen */
.cart-summary [class*="ppc-paypal"],
.cart-summary .btn-ppc{
  border-radius:0 !important;
  opacity:.92;
  transform:scale(.96);
  transform-origin:top center;
}
/* Steuerzeile optisch unter die Summe (B12) — Reihenfolge regelt
   das Template-Override; hier nur die Abstufung */
.basket-summary .cart-dropdown-total-item{color:#6b6b70;font-size:13px}
.basket-summary .font-weight-bold-util{font-size:17px}
/* Warenkorbseite (Bestellübersicht): eigenes Markup (.row.tax /
   .row.basket-summary-total) — Reihenfolge per Flex-Order:
   Summe (1) vor Steuer (2), alles andere folgt in DOM-Reihenfolge (3).
   PAngV: Steuer bleibt voll sichtbar, nur die Position ändert sich. */
.cart-summary .basket-summary .card-body{display:flex;flex-direction:column}
.cart-summary .basket-summary .card-body > *{order:3}
.cart-summary .basket-summary .card-body > .basket-summary-total{order:1}
.cart-summary .basket-summary .card-body > .row.tax{order:2}
.cart-summary .basket-summary .row.tax .tax_label{color:#6b6b70;font-size:13px}
.cart-summary .basket-summary .basket-summary-total .total-sum,
.cart-summary .basket-summary .basket-summary-total .price_label{font-size:17px}

/* Gratisgeschenk-Block (B11): ruhiger, gesperrte Einträge gedimmt */
.basket-freegift{opacity:1}
.basket-freegift [class*="disabled"],
.basket-freegift .freegift-locked{opacity:.45}

/* GHS-Klappe (fs-checkout.js): zusammengeklappter Gefahrstoffblock */
.fsc-ghs-toggle{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid #d9d9de;background:#fff;color:#3d3d42;
  font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:7px 12px;cursor:pointer;
  border-radius:0;margin:6px 0;
}
.fsc-ghs-toggle:hover{border-color:#111114;color:#111114}
.fsc-ghs-body.fsc-hidden{display:none}

/* ------------------------------------------------------------
   5. KASSE (#checkout)
   Schritte, Karten, Formulare, Buttons — Optik der Kontaktseite.
   Labels statisch über dem Feld (label-slide-Wrapper-Falle:
   Label liegt im inneren .flex-column-reverse, absolut —
   position:static genügt).
   ------------------------------------------------------------ */
#checkout .card,
#checkout .card-gray{
  border-radius:0;
  border:1px solid #d9d9de;
}
#checkout .btn{border-radius:0 !important}
#checkout .form-control,
#checkout .custom-select{
  border:1px solid #d9d9de;border-radius:0;background:#fff;
  color:#111114;box-shadow:none;
}
#checkout .form-control:focus,
#checkout .custom-select:focus{
  border-color:#E5169F;box-shadow:none;outline:0;
}
#checkout .form-group label{
  position:static !important;transform:none !important;
  height:auto;padding:0 !important;margin:0 0 8px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:#111114;opacity:1;transition:none;
  background:transparent;line-height:1.3;
}
#checkout .form-group label .optional{
  color:#6b6b70;font-weight:400;text-transform:none;letter-spacing:.02em;
}
#checkout h1, #checkout h2:not(.h5):not(.h6), #checkout .h2{
  font-family:"FS Display","FS Text",sans-serif;
  font-weight:400;text-transform:uppercase;letter-spacing:.02em;
}

/* Primäraktionen der Kasse: Gast bestellen, Kundendaten
   abschicken, weiter zu Versand/Zahlung, kaufen */
#checkout .btn-primary{
  background:#c90f88 !important;
  border-color:#c90f88 !important;
  color:#fff !important;
  font-family:"FS Display","FS Text",sans-serif;
  font-weight:400;text-transform:uppercase;letter-spacing:.05em;
}
#checkout .btn-primary:hover,
#checkout .btn-primary:focus{
  background:#830779 !important;border-color:#830779 !important;
}
/* Sekundär: Anmelden u.ä. */
#checkout .btn-dark, #checkout .btn-secondary{
  background:#111114 !important;border-color:#111114 !important;
  color:#fff !important;
}

/* Schrittleiste: FS-Display-Ziffern, aktiver Schritt magenta */
#checkout .step-nums, #checkout [class*="checkout-steps"], #checkout .nav-checkout{
  border:1px solid #e4e4e7;
}
#checkout [class*="step"] .badge,
#checkout [class*="step"] [class*="circle"]{
  border-radius:0;
}

/* B18: Kundengruppen-/Freischaltungs-Jargon zurücknehmen —
   aus dem lauten Blaukasten wird eine leise Fußnote */
#checkout .alert-info{
  background:#fff;
  border:1px dashed #d9d9de;
  color:#6b6b70;
  font-size:12px;
  border-radius:0;
}

/* B5: Abnahmeintervall-Hinweis — Grundstil, falls sichtbar
   (fs-checkout.js blendet ihn bei Intervall 1 ganz aus) */
.alert.purchase-info{
  background:#fff;border:1px dashed #d9d9de;color:#6b6b70;
  font-size:12px;border-radius:0;
}
.alert.purchase-info.fsc-hidden{display:none}

/* B19: Gastbestellung ist der Conversion-Hauptpfad — lautester Knopf */
#checkout .btn-outline-primary.unregistered-account{
  background:#c90f88 !important;
  border-color:#c90f88 !important;
  color:#fff !important;
  font-family:"FS Display","FS Text",sans-serif;
  font-weight:400;text-transform:uppercase;letter-spacing:.05em;
  font-size:16px;
}
#checkout .btn-outline-primary.unregistered-account:hover,
#checkout .btn-outline-primary.unregistered-account:focus{
  background:#830779 !important;border-color:#830779 !important;
}

/* GHS-Zeilen im Warenkorb (B16): nur display:none, Inhalt bleibt im DOM */
.fsc-ghs-li.fsc-hidden{display:none}


/* ------------------------------------------------------------
   6. FLÄCHEN- UND FORMEN-VEREINHEITLICHUNG (Auftrag Yunus 20.08.)
   EIN Flächenton für ruhige Nebenflächen: #f6f5f3 — das kaum-warme
   Off-White aus der SEOTEXT-Abnahme (das ältere Creme #f7f3ec hat
   Yunus verworfen: „kippte neben Weiß ins Beige"). Karten bleiben
   Weiß, Kanten #d9d9de, Trennlinien #e4e4e7, ALLES kantig.
   Vorher lag hier ein Grau-Zoo: #eee (card-gray, Coupon-Header),
   #f2f2f2 (Fog-Coin), #f5f2ef (Stepper), Radius 14px/3.75px/2.75px.
   ------------------------------------------------------------ */
/* Bestellübersicht (Warenkorbseite): Fläche hinter der Zwischensumme */
.cart-summary .basket-summary.card-gray,
.cart-summary .basket-summary{
  background:#f6f5f3 !important;
}
/* Fog-Coin-Hinweis */
.future-reward-points{
  background:#f6f5f3 !important;
  border:1px solid #e4e4e7;
  border-radius:0 !important;
}
/* Positionen-Karte: 14px-Rundung weg (Spezifität gegen
   /staging_custom_fix.css — gleiche Falle wie beim Kasse-Knopf) */
.basket-items,
.container.basket .basket-items,
.container.basket .basket-items .cart-items-body{border-radius:0 !important}
/* Mengen-Stepper: Fläche + kantig */
[id^="quantity-grp"],
[id^="quantity-grp"] .form-control,
[id^="quantity-grp"] .btn{
  background-color:#f6f5f3;
  border-radius:0 !important;
}
/* Karten & Kartenköpfe im Warenkorb- und Kassenbereich kantig,
   Kopfflächen (Coupon einlösen, „Ich bin bereits Kunde") im Ton */
.basket .card, .basket .card-header,
#checkout .card, #checkout .card-header{
  border-radius:0 !important;
}
.basket .card-header,
#checkout .card-header{
  background:#f6f5f3;
  border-bottom:1px solid #e4e4e7;
}
/* Leerer-Warenkorb-Hinweis: aus dem Blaugrau in die Systemfläche */
.basket .alert-info{
  background:#f6f5f3;
  border:1px dashed #d9d9de;
  color:#3d3d42;
  border-radius:0;
}

/* ------------------------------------------------------------
   7. BESTELLÜBERSICHT ALS TICKET (Abnahme Yunus 20.08., Board
   warenkorb-uebersicht, Variante A "Ticket-Kasse").
   fs-checkout.js baut: schwarzen Anton-Kopf, holt den Versand-
   balken in die Karte, ergänzt die Vertrauenszeile. Ohne JS
   bleibt die Seite im heutigen Zustand — reine Veredelung.
   Flächenton GROSSE FLÄCHEN projektweit: #f6f5f3 (Beschluss
   Yunus, gilt auch für FAQ-Paper und Blog-Weichflächen).
   ------------------------------------------------------------ */
.fsc-hide{display:none !important}
.container.basket .cart-summary .basket-summary.fsc-ticket{border-top:0 !important}
.fsc-thead{
  background:#111114;color:#fff;padding:15px 20px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
}
.fsc-thead .fsc-tt{
  font-family:"FS Display","FS Text",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.03em;font-size:19px;
}
.fsc-thead .fsc-tt em{font-style:normal;color:#E5169F}
.fsc-thead .fsc-tn{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;color:#9a9aa0;letter-spacing:.08em;
}
/* Balken in der Ticket-Karte: weiße Box auf der f6f5f3-Fläche */
.fsc-ticket #shipping-cost-progress-bar{
  background:#fff;border:1px solid #e4e4e7;padding:12px 14px;margin:0 0 14px;
}
.fsc-ticket #shipping-cost-progress-bar .shipping-cost-progress-bar__title{font-size:13px}
.fsc-ticket #shipping-cost-progress-bar .shipping-cost-progress-bar__footer{font-size:11px;color:#6b6b70}
/* Vertrauenszeile unter den Kauf-Buttons */
.fsc-trust{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}
.fsc-trust span{
  border:1px solid #d9d9de;background:#fff;color:#6b6b70;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;padding:4px 8px;
}
.fsc-trust .fsc-trust-ts{color:#111114;border-color:#111114}
/* Positionen-Karte: Hairline statt Schatten */
.basket-items{border:1px solid #d9d9de;box-shadow:none !important}
/* Gratisgeschenk-Überschrift in die Display-Typo, Bilder gezähmt */
#freeGiftsHeading{
  font-family:"FS Display","FS Text",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.03em;font-size:20px;
}
.basket-freegift img{max-height:150px;width:auto}

/* Mobil: "Zwischensumme :" nicht umbrechen lassen */
.cart-summary .basket-summary .basket-summary-total .col{white-space:nowrap}
@media (max-width:575.98px){
  .cart-summary .basket-summary .basket-summary-total .total-sum,
  .cart-summary .basket-summary .basket-summary-total .price_label{font-size:16px}
}

/* ============================================================================
   7. GASTBESTELLUNG UND FELDMASSE (Auftrag Yunus 22.08., Sitzung REGISTRIERUNG)
   Angefasst von der Registrierungs-Sitzung, weil der Gast- und der
   Neukunden-Weg im Checkout DASSELBE Formular sind wie auf /Registrieren
   (register/form/customer_account.tpl). Zwei Quellen fuer dieselbe Flaeche
   waeren schlimmer als dieser Nachtrag — deshalb hier und nicht in
   fs-register.css. Sicherung: fs-checkout.css.bak-register-*
   ============================================================================ */

/* (a) Feldmasse wie auf /Registrieren und im Konto: eine Hoehe im ganzen Kauf-
   weg. Vorher standen die Checkout-Felder auf der geerbten Theme-Hoehe (40px),
   die Registrierung daneben auf 44 — derselbe Nutzer, zwei Groessen.
   16px mobil ist Pflicht, nicht Geschmack: darunter zoomt iOS Safari beim
   Antippen in die Seite hinein. Werte aus fs-kanon.css. */
#checkout .form-control,
#checkout .custom-select{
  height:var(--fs-feld-h,44px);
  min-height:var(--fs-feld-h,44px);
  /* 16px auf beiden Breiten: die Schriftleiter kennt kein 15, und mobil ist
     16 ohnehin Pflicht (iOS zoomt darunter beim Antippen). */
  font-size:var(--fs-t-m,16px);
}
@media (max-width:767.98px){
  #checkout .form-control,
  #checkout .custom-select{ font-size:var(--fs-feld-fs-mobil,16px); }
}
/* Textfelder und Auswahlfelder mit mehreren Zeilen duerfen wachsen */
#checkout textarea.form-control,
#checkout select[multiple].form-control{ height:auto; min-height:0; }

/* (b) Der Gastknopf ist der Hauptpfad (B19) — dann soll er auch die
   herausgehobene Sprosse der Knopfleiter tragen, nicht die Standardhoehe. */
#checkout .btn-outline-primary.unregistered-account{
  min-height:var(--fs-knopf-l,52px);
}

/* (c) B2B-Hinweis des Plugins ws5_b2b im Checkout leiser stellen.
   Wortlaut: "Kundengruppen, die erst freigeschaltet werden muessen, sind im
   Checkout nicht verfuegbar!" — fuer den Privatkunden, der neun von zehn
   Faellen ausmacht, ist das Fachchinesisch an der Kaufschwelle. Der Hinweis
   BLEIBT (Gewerbekunden brauchen ihn), verliert aber die Alarmfarbe und die
   Groesse eines Fehlers. */
#checkout #ws5_layer.alert-info{
  background:#f6f5f3 !important;
  border:0 !important;
  border-left:3px solid #d9d9de !important;
  border-radius:0 !important;
  color:#6b6b70 !important;
  font-size:12px;
  line-height:1.5;
  padding:.6rem .8rem;
}
#checkout #ws5_layer.alert-info .title{ font-weight:400; }