/* ============================================================================
fs-pdp.css — Kaufflaeche der Produktdetailseite ("Konfigurator C2")
----------------------------------------------------------------------------
Angelegt 21.08.2026, Sitzung PDP-KAUFFLAECHE. Freigabe Yunus per
/design-shotgun: Variante C2 "Konfigurator kompakt".
BESITZ: neue Datei, gehoert dieser Sitzung. Keine andere Sitzung schreibt
hier. Rollback = Datei loeschen + Zeile aus template.xml + Block
fs-pdp-details-info aus productdetails/details.tpl entfernen.
GELTUNGSBEREICH: jeder Selektor haengt an .fs-pdp (steht auf
.product-info-inner). Nichts greift ausserhalb der Produktdetailseite.
ENTSCHEIDUNGEN (Yunus, 21.08.):
D2 Ordnung -> drei Schritte, Staffelkachel ist der Mengenwaehler
D3 Merkmal-Chips -> abgeleitet, max. vier, nur was wirklich aufloesbar ist
D5 Startmenge -> 1 Stueck. KEINE Voreinstellung auf eine Staffel.
D7 Merkmale mobil -> eine Textzeile statt Kacheln
D9 Schrittzahl -> waechst mit: Nummern nur, wenn es zu waehlen gibt
Trustleiste mobil -> entfaellt (steht bereits im Kopfbereich)
Gefahrenhinweis -> bleibt in Reiter 2, nicht in der Kauffl./
FARBEN nach dem verbindlichen Farbsystem (21.08.):
Flaechen #f6f5f3 · Kanten #d9d9de · Haarlinien #e4e4e7 · Text #111114
CTA #c90f88 (textsicher) · Magenta-Flaeche #830779 · #e5169f = Deko
SCHRIFT: "FS Display" (Anton, nur 400) fuer Zahlen und Titel,
"FS Body" fuer alles andere. Nie Anton direkt einbinden.
========================================================================== */
.fs-pdp {
--fp-flaeche: #f6f5f3;
--fp-kante: #d9d9de;
--fp-haar: #e4e4e7;
--fp-ink: #111114;
--fp-weich: #5b5b63;
--fp-cta: #c90f88;
--fp-cta-d: #830779;
--fp-deko: #e5169f;
--fp-gruen: #1c7b36;
}
/* ---------- Kopf: Titel, Bewertung ---------- */
.fs-pdp .product-headline { margin: 0 0 .5rem; }
.fs-pdp .product-title {
font-family: "FS Display", "Helvetica Neue", Arial, sans-serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .005em;
font-size: clamp(1.5rem, 2.4vw, 2.06rem);
line-height: 1.05;
color: var(--fp-ink);
margin: 0;
}
/* Kein eigener Strich unter dem Titel: der Shop bringt .product-title::after
bereits mit (56x4, #e5169f). Meine Zusatzlinie stand am 21.08. doppelt. */
.fs-pdp .rating-wrapper { font-size: .78rem; margin-top: .7rem; }
/* ---------- Merkmalzeile / Chips ---------- */
.fs-pdp-mk {
display: grid;
grid-template-columns: repeat(var(--fp-mk-cols, 4), minmax(0, 1fr));
border-top: 1px solid var(--fp-haar);
border-bottom: 1px solid var(--fp-haar);
border-right: 1px solid var(--fp-haar); /* 30.08.: Rahmen rechts schliessen (links traegt ihn das erste sichtbare Item per +) */
margin: .9rem 0 0;
list-style: none;
padding: 0;
}
.fs-pdp-mk-item {
display: flex;
gap: .55rem;
align-items: center;
padding: .6rem .6rem .6rem 0;
min-width: 0;
}
.fs-pdp-mk-item + .fs-pdp-mk-item {
border-left: 1px solid var(--fp-haar);
padding-left: .7rem;
}
.fs-pdp-mk-ic {
flex: 0 0 30px;
height: 30px;
border: 1.3px solid var(--fp-ink);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.fs-pdp-mk-ic svg { display: block; }
.fs-pdp-mk-t { min-width: 0; }
.fs-pdp-mk-t b {
display: block;
font-size: .69rem;
letter-spacing: .05em;
text-transform: uppercase;
font-weight: 800;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--fp-ink);
}
.fs-pdp-mk-t i {
display: block;
font-style: normal;
font-size: .69rem;
color: var(--fp-weich);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ---------- Schrittleiste ---------- */
.fs-pdp-offer { position: relative; }
.fs-pdp-step {
display: flex;
align-items: center;
gap: .55rem;
margin: 1rem 0 .55rem;
}
.fs-pdp-step-n {
font-family: "FS Display", Arial, sans-serif;
font-weight: 400;
font-size: 1.06rem;
width: 27px;
height: 27px;
line-height: 27px;
text-align: center;
background: var(--fp-ink);
color: #fff;
border-radius: 50%;
flex: 0 0 27px;
}
.fs-pdp-step--kauf .fs-pdp-step-n { background: var(--fp-cta); }
.fs-pdp-step-t {
font-size: .69rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--fp-weich);
}
.fs-pdp-step-hint { margin-left: auto; font-size: .69rem; color: var(--fp-weich); }
.fs-pdp-step-hint b { color: var(--fp-cta); }
/* Ohne echte Wahl (weder Variante noch Staffel) faellt die Nummerierung weg. */
.fs-pdp--einfach .fs-pdp-step-n { display: none; }
.fs-pdp--einfach .fs-pdp-step { margin-top: .8rem; }
/* ---------- Schritt 1: Variationen ---------- */
.fs-pdp .variations { margin: 0; }
.fs-pdp .variations dl,
.fs-pdp .variations dt { margin: 0; }
.fs-pdp-vt {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: .55rem;
margin: 0;
padding: 0;
list-style: none;
}
.fs-pdp-vt-item { position: relative; min-width: 0; }
.fs-pdp-vt-item input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
.fs-pdp-vt-item label {
display: flex;
align-items: baseline;
gap: .4rem;
border: 1px solid var(--fp-kante);
background: #fff;
border-radius: 3px;
padding: .55rem .8rem;
margin: 0;
cursor: pointer;
min-height: 46px;
transition: border-color .12s ease, background-color .12s ease;
}
.fs-pdp-vt-zahl {
font-family: "FS Display", Arial, sans-serif;
font-weight: 400;
font-size: 1.44rem;
line-height: 1;
color: var(--fp-ink);
}
.fs-pdp-vt-rest {
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--fp-ink);
}
.fs-pdp-vt-item label:hover { border-color: var(--fp-ink); }
.fs-pdp-vt-item input:focus-visible + label { outline: 2px solid var(--fp-cta); outline-offset: 2px; }
.fs-pdp-vt-item input:checked + label {
border: 2px solid var(--fp-ink);
background: var(--fp-ink);
padding: calc(.55rem - 1px) calc(.8rem - 1px);
}
.fs-pdp-vt-item input:checked + label .fs-pdp-vt-zahl,
.fs-pdp-vt-item input:checked + label .fs-pdp-vt-rest { color: var(--fp-deko); }
.fs-pdp-vt-item input:checked + label::after {
content: "";
margin-left: auto;
align-self: center;
width: 15px;
height: 15px;
background: var(--fp-deko);
-webkit-mask: var(--fp-haken) center/contain no-repeat;
mask: var(--fp-haken) center/contain no-repeat;
--fp-haken: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.4 18.6 3.6 12.8l1.8-1.8 4 4L18.6 5.8l1.8 1.8z'/%3E%3C/svg%3E");
}
.fs-pdp-vt-item input:disabled + label { opacity: .42; cursor: not-allowed; }
/* Auswahl mit vielen Werten bleibt ein Auswahlfeld */
.fs-pdp .variation-wrapper.selectbox { display: flex; align-items: center; gap: .6rem; }
.fs-pdp .variations .form-group { margin: 0; flex: 1; }
.fs-pdp-vlabel {
font-size: .69rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--fp-weich);
flex: 0 0 auto;
}
/* ---------- Schritt 2: Staffelkacheln ---------- */
.fs-pdp-tiers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
gap: .5rem;
margin: 0;
padding: 0;
list-style: none;
}
.fs-pdp-tier { position: relative; min-width: 0; }
.fs-pdp-tier input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fs-pdp-tier label {
display: block;
border: 1px solid var(--fp-kante);
background: #fff;
border-radius: 3px;
padding: .55rem .3rem;
margin: 0;
text-align: center;
cursor: pointer;
transition: border-color .12s ease;
}
.fs-pdp-tier label:hover { border-color: var(--fp-ink); }
.fs-pdp-tier input:focus-visible + label { outline: 2px solid var(--fp-cta); outline-offset: 2px; }
.fs-pdp-tier input:checked + label {
border: 2px solid var(--fp-ink);
padding: calc(.55rem - 1px) calc(.3rem - 1px);
}
.fs-pdp-tier--best label { background: var(--fp-cta); border-color: var(--fp-cta); }
.fs-pdp-tier--best input:checked + label { border-color: var(--fp-ink); }
.fs-pdp-tier-q {
font-size: .64rem;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--fp-ink);
}
.fs-pdp-tier-p {
font-family: "FS Display", Arial, sans-serif;
font-weight: 400;
font-size: 1.06rem;
margin-top: .2rem;
color: var(--fp-ink);
}
.fs-pdp-tier-s {
font-size: .63rem;
letter-spacing: .04em;
margin-top: .15rem;
text-transform: uppercase;
font-weight: 700;
color: var(--fp-cta);
}
.fs-pdp-tier--einzel .fs-pdp-tier-s { color: var(--fp-weich); }
.fs-pdp-tier--best .fs-pdp-tier-q,
.fs-pdp-tier--best .fs-pdp-tier-p,
.fs-pdp-tier--best .fs-pdp-tier-s { color: #fff; }
/* Die Fahne sass in Magenta auf einer magentafarbenen Kachel und verschmolz
mit ihr — der Blick las das als abgeschnittene Kante, nicht als Etikett
(Befund Yunus, 22.08.). Sie traegt jetzt Schwarz und hebt sich von beiden
moeglichen Untergruenden ab: von der magentafarbenen Bester-Deal-Kachel
ebenso wie von einer weissen. */
.fs-pdp-tier-flag {
position: absolute;
top: -9px;
left: 50%;
transform: translateX(-50%);
background: var(--fp-ink);
color: #fff;
font-size: .59rem;
font-weight: 800;
letter-spacing: .09em;
padding: .18rem .55rem;
border-radius: 2px;
white-space: nowrap;
z-index: 2;
box-shadow: 0 0 0 2px #fff;
}
/* Auf der magentafarbenen Kachel ist der weisse Trennring unerwuenscht —
dort grenzt Schwarz auf Magenta schon deutlich genug ab. */
.fs-pdp-tier--best .fs-pdp-tier-flag { box-shadow: none; }
.fs-pdp-eigene {
display: flex;
align-items: center;
gap: .6rem;
margin-top: .55rem;
font-size: .72rem;
color: var(--fp-weich);
}
.fs-pdp-eigene-spar { margin-left: auto; color: var(--fp-cta); font-weight: 700; }
/* ---------- Schritt 3: Kaufblock ---------- */
.fs-pdp-kauf {
border: 1px solid var(--fp-kante);
background: #fff;
border-radius: 3px;
padding: .8rem .85rem;
}
.fs-pdp-kauf-kopf { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.fs-pdp-summe-label {
font-size: .64rem;
letter-spacing: .06em;
text-transform: uppercase;
font-weight: 800;
color: var(--fp-weich);
}
.fs-pdp .price_wrapper { margin: .1rem 0 0; }
.fs-pdp .price,
.fs-pdp .price.large {
font-family: "FS Display", Arial, sans-serif;
font-weight: 400;
font-size: 2.25rem;
line-height: 1;
color: var(--fp-ink);
}
.fs-pdp .price .footnote-reference { font-size: .9rem; vertical-align: super; }
.fs-pdp .price-note { font-size: .69rem; color: var(--fp-weich); margin-top: .3rem; }
.fs-pdp .price-note a { color: var(--fp-weich); border-bottom: 1px solid var(--fp-kante); text-decoration: none; }
.fs-pdp-liefer { margin-left: auto; text-align: right; }
.fs-pdp .delivery-status { margin: 0; }
.fs-pdp .delivery-status ul { margin: 0; }
.fs-pdp .delivery-status .status {
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.fs-pdp .delivery-status .status-2,
.fs-pdp .delivery-status .status-3 { color: var(--fp-gruen); }
/* Mengenwaehler + Kaufknopf */
.fs-pdp .product-buy { margin: .7rem 0 0; }
.fs-pdp .basket-form-inline { display: flex; gap: .6rem; align-items: stretch; margin: 0; }
.fs-pdp .basket-form-inline > [class*="col"] { padding: 0; flex: 0 0 auto; max-width: none; width: auto; }
.fs-pdp .basket-form-inline > [class*="col"]:last-child { flex: 1 1 auto; }
.fs-pdp .form-counter {
border: 1px solid var(--fp-kante);
border-radius: 3px;
background: #fff;
height: 50px;
flex-wrap: nowrap;
}
.fs-pdp .form-counter .btn { border: 0; background: none; color: var(--fp-ink); width: 40px; }
.fs-pdp .form-counter .quantity {
border: 0;
text-align: center;
font-weight: 700;
font-size: 1rem;
width: 46px;
background: none;
box-shadow: none;
}
.fs-pdp .product-buy .btn-primary,
.fs-pdp .product-buy button[name="inWarenkorb"] {
background: var(--fp-cta);
border-color: var(--fp-cta);
color: #fff;
font-family: "FS Display", Arial, sans-serif;
font-weight: 400;
font-size: 1.06rem;
letter-spacing: .05em;
text-transform: uppercase;
height: 50px;
border-radius: 3px;
width: 100%;
}
.fs-pdp .product-buy .btn-primary:hover,
.fs-pdp .product-buy button[name="inWarenkorb"]:hover {
background: var(--fp-cta-d);
border-color: var(--fp-cta-d);
}
/* Fog-Coin- und Aktionszeile am Fuss des Kaufblocks */
.fs-pdp-fuss {
display: flex;
align-items: center;
gap: .55rem;
flex-wrap: wrap;
border-top: 1px solid var(--fp-haar);
margin-top: .65rem;
padding-top: .55rem;
font-size: .72rem;
}
.fs-pdp .product-actions { margin: 0 0 0 auto; display: flex; gap: .8rem; }
.fs-pdp .product-actions .btn {
padding: 0;
font-size: .72rem;
color: var(--fp-ink);
border: 0;
border-bottom: 1px solid var(--fp-kante);
border-radius: 0;
line-height: 1.5;
}
.fs-pdp .product-actions .btn:hover { border-bottom-color: var(--fp-cta); color: var(--fp-cta); }
/* Restmenge / Lagerhinweis */
.fs-pdp-rest { font-size: .69rem; color: var(--fp-cta); font-weight: 700; }
/* Die Staffeltabelle aus price.tpl wird durch die Kacheln ersetzt. */
.fs-pdp .bulk-prices { display: none; }
/* ---------- Mobil ---------- */
@media (max-width: 767.98px) {
#content .fs-pdp .product-title { font-size: 1.56rem; }
/* D7: Merkmale als eine Zeile statt als Kacheln */
.fs-pdp-mk {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .4rem;
padding: .55rem 0;
}
.fs-pdp-mk-item { padding: 0; display: contents; }
.fs-pdp-mk-item + .fs-pdp-mk-item { border: 0; padding: 0; }
.fs-pdp-mk-ic { display: none; }
.fs-pdp-mk-item:first-child .fs-pdp-mk-ic {
display: flex;
flex: 0 0 20px;
height: 20px;
border: 0;
}
.fs-pdp-mk-t { display: flex; align-items: baseline; gap: .3rem; }
.fs-pdp-mk-t::after { content: "\00b7"; color: var(--fp-weich); margin-left: .3rem; }
.fs-pdp-mk-item:last-child .fs-pdp-mk-t::after { content: none; }
.fs-pdp-mk-t b { font-size: .72rem; text-transform: none; letter-spacing: 0; font-weight: 700; }
.fs-pdp-mk-t i { display: none; }
.fs-pdp-mk-item:first-child .fs-pdp-mk-t b { font-weight: 800; }
.fs-pdp-vt { grid-template-columns: 1fr 1fr; }
.fs-pdp-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.fs-pdp-tier-p { font-size: .94rem; }
.fs-pdp-tier-q, .fs-pdp-tier-s { font-size: .58rem; }
.fs-pdp .price, .fs-pdp .price.large { font-size: 1.75rem; }
.fs-pdp-kauf-kopf { gap: .5rem; }
.fs-pdp-liefer { margin-left: 0; text-align: left; flex-basis: 100%; }
/* Trustleiste der Kauffl. entfaellt mobil (steht bereits im Kopfbereich) */
.fs-pdp-trust { display: none; }
}
/* ---------- Feste Kaufleiste (nur mobil, vom Theme geliefert) ----------
Remake/js/global.js haengt .fixed-to-cart an die .basket-form-inline, sobald
der Kaufknopf aus dem Bild scrollt. Hier bekommt sie die FOGSMOKE-Optik und
den Preis, den sie von Haus aus nicht zeigt. */
.fs-pdp-barpreis { display: none; }
.fs-pdp .product-buy .basket-form-inline.fixed-to-cart {
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: .5rem .8rem;
background: #fff;
border-top: 1px solid var(--fp-kante);
box-shadow: 0 -6px 18px rgba(0, 0, 0, .09);
align-items: center;
gap: .5rem;
z-index: 1030;
}
.fs-pdp .basket-form-inline.fixed-to-cart .fs-pdp-barpreis {
display: block;
flex: 0 0 auto;
line-height: 1.15;
}
.fs-pdp-barpreis-zahl {
display: block;
font-family: "FS Display", Arial, sans-serif;
font-weight: 400;
font-size: 1.19rem;
color: var(--fp-ink);
}
.fs-pdp-barpreis-sub { display: block; font-size: .63rem; color: var(--fp-weich); }
/* Die Leiste bleibt EINE Zeile: Preis und Mengenwaehler nehmen ihre Breite,
der Kaufknopf bekommt den Rest. Ohne nowrap rutscht der Knopf in eine
zweite Zeile und die Leiste wird 110 statt 62 Pixel hoch. */
.fs-pdp .product-buy .basket-form-inline.fixed-to-cart { flex-wrap: nowrap; }
.fs-pdp .basket-form-inline.fixed-to-cart > [class*="col"] { flex: 0 0 auto; width: auto; max-width: none; }
.fs-pdp .basket-form-inline.fixed-to-cart > [class*="col"]:last-child { flex: 1 1 auto; min-width: 0; }
.fs-pdp .basket-form-inline.fixed-to-cart .form-counter { height: 44px; }
.fs-pdp .basket-form-inline.fixed-to-cart button[name="inWarenkorb"] {
height: 44px;
font-size: .88rem;
}
@media print {
.fs-pdp-sticky { display: none; }
}
/* Nachtrag 21.08. nach der Live-Pruefung */
/* Die Kachelzeilen standen nebeneinander statt untereinander — die Spans
brauchen display:block, sonst laufen Menge, Preis und Summe in eine Zeile. */
.fs-pdp-tier-q,
.fs-pdp-tier-p,
.fs-pdp-tier-s { display: block; }
/* Der Gefahrenhinweis-Knopf wird vom Plugin in den Kaufbereich gesetzt.
Er bleibt (gesetzlich gefordert), tritt aber leiser auf und klebt nicht
mehr am Warenkorbknopf. */
.fs-pdp .css_hazard-col-button { margin: .35rem 0 0; }
.fs-pdp .css_hazard-col-button .btn { font-size: .72rem; }
/* Leerzeilen aus JTLs Abstandsklassen im Kaufblock einsammeln */
.fs-pdp-kauf > .mb-3.mt-2:empty { display: none; }
.fs-pdp .product-buy { margin-top: .55rem; }
/* Nachtrag 2: Merkmalzeile fuellt die Breite unabhaengig von der Chipzahl */
/* Vorher ein Raster mit fester Spaltenzahl. Bleibt der Variantenchip leer
(Artikel ohne Variationen), stand eine Spalte leer. Flex verteilt nur die
sichtbaren Chips. */
.fs-pdp-mk { display: flex; flex-wrap: nowrap; }
.fs-pdp-mk-item { flex: 1 1 0; }
@media (max-width: 767.98px) {
.fs-pdp-mk { flex-wrap: wrap; }
.fs-pdp-mk-item { flex: 0 0 auto; }
}
/* Nachtrag 3: feste Kaufleiste NUR mobil */
/* Das Theme haengt .fixed-to-cart bei JEDER Fensterbreite an (global.js), nicht
nur mobil. Meine Regeln oben standen ohne Breitenbegrenzung — dadurch klebte
die Leiste am 21.08. auch auf dem Desktop am unteren Rand, wo der Entwurf
keine vorsieht. Ab 768px wird sie wieder zur normalen Zeile im Kaufblock. */
@media (min-width: 768px) {
.fs-pdp .product-buy .basket-form-inline.fixed-to-cart {
position: static;
padding: 0;
border-top: 0;
box-shadow: none;
background: transparent;
z-index: auto;
}
.fs-pdp .basket-form-inline.fixed-to-cart .fs-pdp-barpreis { display: none; }
.fs-pdp .basket-form-inline.fixed-to-cart .form-counter,
.fs-pdp .basket-form-inline.fixed-to-cart button[name="inWarenkorb"] { height: 50px; }
}
/* Nachtrag 4: Sichtpruefung mit Yunus, 21.08. abends */
/* --- Gewaehlte Variantenkachel: Zahl in LILA, Einheit in WEISS ---
Ansage Yunus woertlich: "die schwarze Flaeche mit 10 oder 20mg in LILA und
mg in weiss". Vorher standen Zahl UND Einheit in Magenta #e5169f.
Lila auf schwarzem Grund ist #a24ae0 — der aufgehellte Ton aus dem
Iconset-System ("Schwarz ruhig"), NICHT #830779: das ist auf Schwarz
praktisch unlesbar. */
/* Ansage Yunus (22.08.): "mach mal unseren normalen Ton."
Der Standardton #830779 auf der schwarzen Flaeche kommt auf 2,04:1 und ist
damit unlesbar (Schwelle fuer grosse Schrift: 3:1). Deshalb traegt jetzt die
KACHEL den Standardton und die Schrift ist weiss — 9,24:1. Der reine Ton
steht damit tatsaechlich auf dem Schirm, statt in einer aufgehellten
Ersatzfassung. Gemessen, nicht geschaetzt. */
/* Praezisierung Yunus (22.08.): Flaeche bleibt SCHWARZ, nur die ZAHL traegt
den Standardton #830779; die Einheit bleibt weiss.
Der gemessene Kontrast der Zahl auf Schwarz betraegt 2,04:1 (Schwelle fuer
grosse Schrift: 3:1). Das ist eine bewusste Markenentscheidung von Yunus,
keine Unachtsamkeit — wer sie spaeter aendern will, findet hier die Zahl.
Die Einheit in Weiss (17,4:1) traegt die Lesbarkeit der Kachel. */
/* Aufgehelltes Marken-Lila fuer dunkle Flaechen, 22.08. (Ansage Yunus:
"helleres Lila, leicht vom Magenta weg, Unterschied kaum merkbar").
#b61baa hat EXAKT den Farbton des Standardtons #830779 (305°) und ist nur
heller — dadurch bleibt es sichtbar dasselbe Lila. Zum Vergleich: das frueher
verwendete #a24ae0 liegt bei 275° und damit spuerbar ins Blaue verschoben.
Gemessen: Kontrast auf Schwarz 3,35:1 (Schwelle fuer grosse Schrift: 3:1),
Standardton waren 2,04:1. Abstand zum Standard dE 21, zum Magenta #c90f88
dE 23 — es bleibt vom CTA-Ton unterscheidbar.
Auf hellen Flaechen bleibt #830779 der Ton; dieses hier ist ausschliesslich
die Fassung fuer dunkle Flaechen. */
.fs-pdp { --fp-lila: #b61baa; }
.fs-pdp-vt-item input:checked + label {
background: var(--fp-ink);
border-color: var(--fp-ink);
}
.fs-pdp-vt-item input:checked + label .fs-pdp-vt-zahl { color: var(--fp-lila); }
.fs-pdp-vt-item input:checked + label .fs-pdp-vt-rest { color: #fff; }
.fs-pdp-vt-item input:checked + label::after { background: #fff; }
/* Bei vier oder sechs Nikotinstufen sollen die Kacheln schmaler werden
duerfen, statt in zu wenige Spalten zu brechen. */
.fs-pdp-vt { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
/* --- Titel auf die Groesse aus dem Entwurf --- */
/* #content davor, weil fs-pages.css mit "#content h1.h2" (1 ID, 1 Klasse,
1 Element) staerker wiegt als ".fs-pdp .product-title" und den Titel auf bis
zu 42px zieht. Mit #content davor stehen zwei Klassen gegen eine — meine
Regel gewinnt, ohne dass ich eine fremde Datei anfassen muss. */
#content .fs-pdp .product-title { font-size: clamp(1.45rem, 2vw, 1.75rem); }
/* --- Preiskopf: Verfuegbarkeit gehoert NEBEN den Preis, nicht darunter ---
Gemessen war der Preisblock 129 px breit und die Lieferzeile 467 px, dadurch
ist sie umgebrochen. Die Lieferangaben stapeln jetzt rechts. */
.fs-pdp-kauf-kopf { flex-wrap: nowrap; align-items: flex-start; }
.fs-pdp-kauf-kopf > :first-child { min-width: 0; flex: 1 1 auto; }
.fs-pdp-liefer { flex: 0 0 auto; max-width: 48%; }
.fs-pdp .delivery-status ul { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.fs-pdp .delivery-status li { text-align: right; }
/* --- Alter Preis neben den Preis, nicht als eigene Zeile darunter --- */
.fs-pdp .price_wrapper { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.fs-pdp .price_wrapper .price { order: 1; }
.fs-pdp .price_wrapper .fs-pdp-rabatt { order: 2; }
.fs-pdp .price_wrapper .text-stroke,
.fs-pdp .price_wrapper .old-price { order: 3; font-size: .88rem; color: var(--fp-weich); }
.fs-pdp .price_wrapper .price-note { order: 4; flex-basis: 100%; margin-top: .15rem; }
.fs-pdp-rabatt {
background: var(--fp-cta);
color: #fff;
font-size: .63rem;
font-weight: 800;
letter-spacing: .06em;
padding: .18rem .42rem;
border-radius: 2px;
line-height: 1.2;
}
/* --- Der Sale-Balken ueber den Merkmalen entfaellt: der Rabatt steht jetzt
als Zeichen am Preis (siehe fs-pdp.js). --- */
.fs-pdp .product-overlays { display: none; }
/* --- Leerraum zwischen Verfuegbarkeit und Mengenwaehler ---
JTL setzt dort ein leeres div.mb-3.mt-2 (21 px) plus Abstaende, zusammen
43 px Nichts. Der Kasten hat Hinweise nur dann, wenn es welche gibt. */
.fs-pdp-kauf > .mb-3.mt-2 { margin-top: 0; margin-bottom: 0; }
.fs-pdp-kauf > .mb-3.mt-2 > .alert { margin: .5rem 0 0; }
.fs-pdp .product-buy { margin-top: .5rem; }
/* --- Mengenwaehler ohne die graue Einheiten-Box --- */
.fs-pdp .form-counter .unit { display: none; }
/* --- Fusszeile: Fog-Coin, Beobachter, Aktionen in einer Zeile --- */
.fs-pdp-fuss { gap: .75rem; }
.fs-pdp-fuss .fs-pdp-coin,
.fs-pdp-fuss .fs-pdp-beob { margin: 0; font-size: .72rem; color: var(--fp-weich); }
.fs-pdp-fuss .fs-pdp-coin .row,
.fs-pdp-fuss .fs-pdp-coin [class*="col"] { margin: 0; padding: 0; width: auto; max-width: none; flex: 0 0 auto; }
.fs-pdp-fuss .fs-pdp-coin b,
.fs-pdp-fuss .fs-pdp-coin span[id^="admRewardPoints"] { color: var(--fp-ink); font-weight: 700; }
.fs-pdp-fuss .fs-pdp-beob { display: inline-flex; align-items: center; gap: .3rem; }
/* Nachtrag 5 */
/* Zwei
aus den Parent-Includes zogen Trennstriche quer durch die
Kauffl. (gemessen bei y=156 und y=172), die der Entwurf nicht vorsieht.
Ein hr traegt keine Information — es faellt hier weg. */
/* Die beiden Striche liegen NICHT im Angebotsblock, sondern in der linken
Spalte neben den Merkmalen — der engere Selektor .fs-pdp-offer hr hat sie
deshalb nicht erwischt. */
.fs-pdp hr { display: none; }
/* Lieferangaben duerfen etwas breiter werden, sonst bricht "Lieferzeit:" vom
Wert ab. */
.fs-pdp-liefer { max-width: 54%; }
.fs-pdp-liefer .delivery-status { font-size: .72rem; line-height: 1.35; }
/* Nachtrag 6: Sichtpruefung Yunus, 21.08. spaet */
/* --- 1. Variantenkacheln groesser (Ansage Yunus: "muss eine groessere
KACHEL sein"). Vorher 46 px hoch mit 1,44rem Zahl. --- */
.fs-pdp-vt { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.fs-pdp-vt-item label {
min-height: 64px;
padding: .7rem 1rem;
align-items: center;
gap: .5rem;
}
.fs-pdp-vt-item input:checked + label { padding: calc(.7rem - 1px) calc(1rem - 1px); }
.fs-pdp-vt-zahl { font-size: 2.1rem; }
.fs-pdp-vt-rest { font-size: .81rem; }
.fs-pdp-vt-item input:checked + label::after { width: 18px; height: 18px; }
/* --- 2. PayPal-Zeile lief 11 px links UND rechts aus dem Kaufkasten heraus
(Bootstrap-Zeilen mit negativen Aussenabstaenden) und klebte ohne Abstand
am Warenkorbknopf. --- */
.fs-pdp .product-buy .row { margin-left: 0; margin-right: 0; }
.fs-pdp .product-buy .row > [class*="col"] { padding-left: 0; padding-right: 0; }
.fs-pdp .product-buy .basket-form-inline + .row,
.fs-pdp .product-buy #paypal-button-productDetails-container,
.fs-pdp .product-buy #ppc-paypal-button-custom-productDetails-wrapper { margin-top: .55rem; }
.fs-pdp .product-buy .ppc-ecs-horizontal-container { margin-left: 0; margin-right: 0; }
/* --- 3. "(DE - Ausland abweichend)" ist NICHT mehr hier ausgeblendet, sondern
shopweit entfernt: FOGSMOKE versendet ausschliesslich nach DE (alle vier
Versandarten in tversandart fuehren cLaender='DE'), damit ist der
Auslandshinweis gegenstandslos. Die Sprachvariable shippingInfoIcon
steht jetzt leer — dadurch faellt der Hinweis auch im Warenkorb und in
der Kasse weg, nicht nur hier.
Rueckbau: ~/ruecksicherung-shippingInfoIcon-20260821.sql einspielen oder
im Adminbereich unter Sprachvariablen den Standard wiederherstellen. --- */
/* Nachtrag 7 */
/* --- Der leere PayPal-Werbebanner zwischen Preis und Warenkorbknopf ---
In dem 21 px hohen div.mb-3.mt-2 steckt ein "zoid-paypal-message"-Rahmen
(PayPal Messaging, "Später bezahlen ab ..."). Das Konto liefert dafuer keinen
Inhalt — die Konsole meldet "paypal_messages_content_unavailable" — der
Platz wird aber trotzdem reserviert. Kein Inhalt, kein Platz.
Sobald PayPal dort wieder etwas ausliefert: diese Regel loeschen. */
.fs-pdp-kauf > .mb-3.mt-2 > span[id^="zoid-paypal-message"] { display: none; }
/* --- Halbe Trennlinie unter der Lieferzeile ---
Der Lieferstatus bringt eine border-bottom mit, die nur so breit ist wie
ihr Text (gemessen 149 px) und dadurch als abgebrochener Strich erscheint. */
.fs-pdp .delivery-status { border-bottom: 0; }
/* Nachtrag 8 */
/* Mobil: die Gruppenbeschriftung steht UEBER den Kacheln, nicht daneben.
Mit den groesseren Kacheln aus Nachtrag 6 blieben neben "NIKOTINGEHALT:"
nur 215 px uebrig — die beiden Kacheln stapelten sich untereinander. */
@media (max-width: 767.98px) {
.fs-pdp .variation-wrapper.selectbox { display: block; }
.fs-pdp .variation-wrapper.selectbox .fs-pdp-vlabel { display: block; margin-bottom: .3rem; }
.fs-pdp-vt { grid-template-columns: 1fr 1fr; gap: .5rem; }
.fs-pdp-vt-item label { min-height: 58px; padding: .55rem .7rem; }
.fs-pdp-vt-item input:checked + label { padding: calc(.55rem - 1px) calc(.7rem - 1px); }
.fs-pdp-vt-zahl { font-size: 1.75rem; }
}
/* Nachtrag 9 */
/* Staffelkacheln: Spaltenzahl kommt aus fs-pdp.js (--fp-tier-cols), damit vier
Stufen mobil als 2x2 stehen statt als 3+1. Ohne JS bleibt es beim
selbstverteilenden Raster. */
@media (max-width: 767.98px) {
.fs-pdp-tiers { grid-template-columns: repeat(var(--fp-tier-cols, 3), minmax(0, 1fr)); row-gap: 1rem; }
}
/* Nachtrag 10 */
/* Der Popover-Knopf der Lieferzeit hat jetzt keinen Text mehr (Sprachvariable
shippingInfoIcon leer, weil FOGSMOKE nur nach DE liefert). Er blieb als
leeres stehen: unsichtbar, aber per Tastatur
anspringbar und fuer Vorleseprogramme ein Knopf ohne Beschriftung.
BEWUSST NICHT auf .fs-pdp begrenzt — derselbe leere Knopf steht auch im
Warenkorb und in der Kasse. Kommt der Text zurueck, greift :empty nicht mehr
und der Knopf ist automatisch wieder da. */
/* :empty greift NICHT — im Anker steht nach dem Leeren der Sprachvariable
noch Leerraum aus dem Template (ein Textknoten mit Zeilenumbruechen), und
:empty verlangt gar keinen Inhalt. Deshalb unbedingt ausblenden. Das ist
hier richtig, weil die Entscheidung feststeht: FOGSMOKE liefert nur nach DE.
Rueckbau in zwei Schritten: diese Regel loeschen UND die Sprachvariable
zuruecksetzen (~/ruecksicherung-shippingInfoIcon-20260821.sql). */
a.estimated-delivery-info { display: none; }
/* Nachtrag 11: Fog-Coin-Streifen */
/* Ansage Yunus (21.08.): "man muss groesser darstellen wie viele Coins man
dafuer erhaelt, mit einem Coin Icon davor."
Das Plugin liefert einen Fliesstextsatz; das darin umschliesst
genau "15 Fog-Coin". Deshalb wird der Satz klein und ruhig gesetzt und das
als Zahl herausgehoben — kein Nachbauen, keine kopierten Werte,
die veralten koennen, wenn das Plugin nachrechnet.
Der Streifen nimmt in der Fusszeile eine eigene Zeile ein. */
.fs-pdp-coinplatz .fs-pdp-coin {
flex: 1 1 100%;
order: -1;
display: flex;
align-items: center;
gap: .6rem;
margin: 0 0 .1rem;
padding: .5rem .7rem;
background: var(--fp-flaeche);
border: 1px solid var(--fp-haar);
border-radius: 3px;
font-size: .72rem;
line-height: 1.3;
color: var(--fp-weich);
}
.fs-pdp-coinplatz .fs-pdp-coin::before {
content: "";
flex: 0 0 30px;
width: 30px;
height: 30px;
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111114' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M9.6 16.4V7.8h4.9M9.6 12.1h4' stroke='%23e5169f' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Der Satz laeuft als normaler Text um, NICHT als Flexzeile: als Flexbox
wurden die Wortgruppen zu Flexelementen, die nicht mehr umbrachen — auf
390 px stand "im Wert von 0,45 €" ausserhalb des Bildschirms (gemessen:
23 px Ueberlauf). */
/* ACHTUNG Selektor: zwischen dem Streifen und der Textspalte liegt noch eine
Bootstrap-.row des Plugins. Ein Kind-Selektor (>) trifft die Spalte deshalb
NICHT — er traf die .row, die als display:flex stehen blieb, ihre Kinder
nicht umbrechen liess und mit ihren Negativraendern 23 px Ueberlauf auf
390 px erzeugte. Beide Ebenen werden hier flachgelegt. */
.fs-pdp-coinplatz .fs-pdp-coin .row,
.fs-pdp-coinplatz .fs-pdp-coin [class*="col"] {
display: block;
padding: 0;
margin: 0;
width: auto;
max-width: none;
min-width: 0;
flex: 1 1 auto;
}
.fs-pdp-coinplatz .fs-pdp-coin strong { display: inline-block; vertical-align: -.1em; }
.fs-pdp-coinplatz .fs-pdp-coin .color-brand-primary,
.fs-pdp-coinplatz .fs-pdp-coin .text-primary { color: inherit; }
.fs-pdp-coinplatz .fs-pdp-coin strong {
font-family: "FS Display", Arial, sans-serif;
font-weight: 400;
font-size: 1.5rem;
line-height: 1;
letter-spacing: .01em;
color: var(--fp-cta);
}
.fs-pdp-coinplatz .fs-pdp-coin #admRewardPointsValue {
color: var(--fp-ink);
font-weight: 600;
}
/* Beobachter und Aktionen darunter, in einer Zeile */
.fs-pdp-fuss .fs-pdp-beob { flex: 0 0 auto; }
.fs-pdp .product-actions { flex: 1 1 auto; justify-content: flex-end; }
/* Mobil: die Aktionsknoepfe standen als nackte Symbole da — das Theme blendet
ihre Beschriftung unter 768px aus. Ein Symbol ohne Wort ist auf einer
Kaufflaeche keine Bedienhilfe, sondern ein Raetsel. */
@media (max-width: 767.98px) {
.fs-pdp .product-actions .btn .button-text,
.fs-pdp .product-actions .btn span:not([class*="fa"]):not([class*="icon"]) { display: inline !important; }
.fs-pdp .product-actions { gap: .6rem; flex-wrap: wrap; }
.fs-pdp .product-actions .btn { font-size: .68rem; }
.fs-pdp-coinplatz .fs-pdp-coin strong { font-size: 1.35rem; }
.fs-pdp .price, .fs-pdp .price.large { font-size: 1.95rem; }
}
/* Nachtrag 12 */
/* Alter Preis steht neben dem Preis, nicht als eigene rote Zeile darunter.
Die order-Regel aus Nachtrag 4 konnte ihn nicht bewegen, weil er ein Kind
von .price-note ist und nicht dessen Geschwister — fs-pdp.js holt ihn jetzt
neben den Preis. */
/* Ansage Yunus (22.08.): der bisherige Preis gehoert UNTER den Hauptpreis,
nicht daneben. Neben dem Preis stand er in einer Reihe mit dem
Rabattzeichen und machte die Zeile unruhig; darunter liest sich die
Reihenfolge wie eine Rechnung: erst was es kostet, dann was es kostete. */
.fs-pdp .price_wrapper .fs-pdp-altpreis {
order: 3;
flex-basis: 100%;
margin-top: .15rem;
font-size: .78rem;
color: var(--fp-weich);
text-decoration: line-through;
}
.fs-pdp .price_wrapper .fs-pdp-altpreis.text-danger { color: var(--fp-weich); }
/* Mengenwaehler und Kaufknopf stehen mobil NEBENEINANDER (Ansage Yunus,
23.08.). Beim ersten Versuch am 21.08. lief "IN DEN WARENKORB" rechts aus
dem Knopf heraus; damals war der Mengenwaehler 108 px breit und die Schrift
unveraendert gross. Diesmal: Waehler auf 92 px, Beschriftung eine Stufe
kleiner, Innenabstand des Knopfes verringert — gemessen passt der Text.
Wer hier wieder etwas verbreitert, muss nachmessen, ob er noch hineinpasst. */
@media (max-width: 767.98px) {
.fs-pdp .product-buy .basket-form-inline:not(.fixed-to-cart) {
flex-wrap: nowrap;
align-items: stretch;
gap: .45rem;
}
.fs-pdp .product-buy .basket-form-inline:not(.fixed-to-cart) > [class*="col"]:first-child { flex: 0 0 auto; }
.fs-pdp .product-buy .basket-form-inline:not(.fixed-to-cart) > [class*="col"]:last-child { flex: 1 1 auto; min-width: 0; }
.fs-pdp .product-buy .basket-form-inline:not(.fixed-to-cart) .form-counter { width: 92px; }
.fs-pdp .product-buy .basket-form-inline:not(.fixed-to-cart) .form-counter .btn { width: 28px; }
.fs-pdp .product-buy .basket-form-inline:not(.fixed-to-cart) .form-counter .quantity { width: 32px; font-size: .9rem; }
.fs-pdp .product-buy .basket-form-inline:not(.fixed-to-cart) button[name="inWarenkorb"] {
font-size: .82rem;
letter-spacing: .03em;
padding: 0 .5rem;
gap: .4rem;
}
.fs-pdp .product-buy .basket-form-inline:not(.fixed-to-cart) button[name="inWarenkorb"] svg { flex: 0 0 17px; width: 17px; height: 17px; }
/* Die Beschriftung "MENGE" davor braucht den Platz jetzt anderweitig. */
.fs-pdp .product-buy .basket-form-inline:not(.fixed-to-cart)::before { content: none; }
}
/* Nachtrag 13 */
/* Der alte Preis blieb rot: .text-danger wird aus einer der spaeter geladenen
Fremddateien mit hoher Kraft gesetzt. Ein durchgestrichener Preis in
Signalrot schreit lauter als der gueltige Preis daneben — er wird ruhig
gesetzt, bleibt aber vollstaendig lesbar. */
.fs-pdp .price_wrapper .fs-pdp-altpreis,
.fs-pdp .price_wrapper .fs-pdp-altpreis.text-danger { color: var(--fp-weich) !important; }
/* Nachtrag 14 */
/* Der Fog-Coin-Streifen sitzt jetzt IM Kaufkasten, direkt ueber dem
Kaufknopf (Ansage Yunus 22.08.). Dort fuellt er die Luecke, die der leere
PayPal-Werbebanner hinterlassen hat, und steht da, wo er hingehoert: bei
der Handlung, fuer die er die Belohnung ist. */
.fs-pdp-coinplatz { margin: .65rem 0 0; }
.fs-pdp-coinplatz:empty { display: none; margin: 0; }
.fs-pdp-coinplatz .fs-pdp-coin { margin: 0; }
/* Die PayPal-Knoepfe sind Fremd-Iframes und per CSS nicht formbar. Ihre Form
kommt aus der Plugin-Einstellung smartPaymentButtons_shape, die am 22.08.
von "pill" auf "rect" steht — damit passen sie zu den 3-px-Radien der
Flaeche. Hier bleibt nur der Abstand. */
.fs-pdp .product-buy .paypal-buttons { margin: 0; }
/* Nachtrag 15 */
/* Der Mengenwaehler stand ohne Beschriftung da und liess mobil eine halbe
Zeilenbreite Weiss neben sich. Das Wort "Menge" fuellt den Platz und
benennt das Bedienelement — bisher musste man aus dem Minus und dem Plus
erraten, was es tut. Nur eine Beschriftung, kein Bedienelement: das Feld
selbst traegt weiterhin seine eigene Sprachausgabe. */
.fs-pdp .product-buy .basket-form-inline:not(.fixed-to-cart)::before {
content: "Menge";
align-self: center;
font-size: .69rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--fp-weich);
flex: 0 0 auto;
margin-right: .1rem;
}
/* In der angehefteten Leiste ist kein Platz dafuer. */
.fs-pdp .product-buy .basket-form-inline.fixed-to-cart::before { content: none; }
/* Nachtrag 16 */
/* Die beiden PayPal-Knoepfe klebten auf dem Desktop aneinander (gemessen:
beide Spalten stossen bei x=1059 ohne Spalt). Ursache war meine eigene
Regel aus Nachtrag 6, die den Bootstrap-Innenabstand der Spalten entfernt
hat — der war der Spalt. Statt ihn zurueckzuholen bekommt die Zeile einen
echten gap; das wirkt auch mobil, wo die Knoepfe untereinander stehen. */
.fs-pdp .product-buy .ppc-ecs-horizontal-container { gap: .5rem; }
.fs-pdp .product-buy .ppc-ecs-horizontal-container > [class*="col"] {
flex: 1 1 0;
max-width: none;
min-width: 0;
}
/* Der Lagerbalken ist raus (Ansage Yunus, 22.08.). Er sagte dasselbe wie der
Lieferstatus "Knapper Lagerbestand" zwei Zeilen darueber — zweimal dieselbe
Knappheit in einem Kasten. Der Lieferstatus bleibt, er ist JTLs eigener und
steht an der richtigen Stelle.
Rueckbau: diese Regel loeschen. */
.fs-pdp-kauf .stock-progress-bar-title,
.fs-pdp-kauf .stock-progress-bar-outer { display: none; }
/* Nachtrag 17 */
/* --- Fog-Coin rechts vom Preis --- */
.fs-pdp-kauf-kopf .fs-pdp-coinplatz { flex: 0 0 auto; margin: 0; max-width: 52%; }
.fs-pdp-kauf-kopf .fs-pdp-coin {
padding: .4rem .6rem;
gap: .45rem;
text-align: left;
}
.fs-pdp-kauf-kopf .fs-pdp-coin::before { flex: 0 0 26px; width: 26px; height: 26px; }
.fs-pdp-kauf-kopf .fs-pdp-coin strong { font-size: 1.3rem; }
/* --- Verfuegbarkeit und Lieferzeit in einer Zeile --- */
.fs-pdp .fs-pdp-liefer {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: .3rem .75rem;
max-width: none;
margin: .45rem 0 0;
padding: .45rem 0 0;
border-top: 1px solid var(--fp-haar);
}
.fs-pdp .fs-pdp-liefer > * { margin: 0; }
.fs-pdp .fs-pdp-liefer .delivery-status ul { flex-direction: row; align-items: baseline; gap: .3rem .75rem; flex-wrap: wrap; }
.fs-pdp .fs-pdp-liefer .delivery-status li { text-align: left; }
.fs-pdp .fs-pdp-liefer .delivery-status { font-size: .75rem; border: 0; }
.fs-pdp .fs-pdp-liefer .estimated-delivery { display: inline; }
/* Mobil steht der Fog-Coin NEBEN dem Preis (Ansage Yunus, 23.08.), nicht
darunter. Auf 307 px Breite geht das nur komprimiert: der Fliesstext des
Plugins ("Fuer dieses Produkt erhalten Sie ... im Wert von ...") wird per
font-size:0 stummgeschaltet, die beiden Werte bekommen ihre Groesse zurueck.
Uebrig bleibt: Muenze, Zahl, "Fog-Coin", Betrag. Der Satz steht auf dem
Desktop weiterhin vollstaendig da. */
@media (max-width: 767.98px) {
.fs-pdp-kauf-kopf { flex-wrap: nowrap; gap: .5rem; }
.fs-pdp-kauf-kopf > :first-child { min-width: 0; }
.fs-pdp-kauf-kopf .fs-pdp-coinplatz { flex: 0 0 auto; max-width: 47%; margin-top: 0; }
.fs-pdp-kauf-kopf .fs-pdp-coin { padding: .35rem .45rem; gap: .35rem; }
.fs-pdp-kauf-kopf .fs-pdp-coin::before { flex: 0 0 22px; width: 22px; height: 22px; }
.fs-pdp-kauf-kopf .fs-pdp-coin,
.fs-pdp-kauf-kopf .fs-pdp-coin .row,
.fs-pdp-kauf-kopf .fs-pdp-coin [class*="col"] { font-size: 0; }
.fs-pdp-kauf-kopf .fs-pdp-coin strong { font-size: 1.05rem; line-height: 1.1; }
.fs-pdp-kauf-kopf .fs-pdp-coin #admRewardPointsValue {
display: block;
font-size: .66rem;
font-weight: 600;
color: var(--fp-weich);
}
}
/* Nachtrag 18 */
/* Der Lagerbalken bringt 30 px Aussenabstand nach oben UND unten mit — im
Kaufkasten sind das 60 px Luft um eine 32 px hohe Zeile. Auf das Mass der
uebrigen Reihen gebracht. */
/* :has() greift hier nicht — der Wrapper des Balkens hat ueberhaupt keine
Klasse. Genau das ist der praezise Selektor: alle meine eigenen Reihen im
Kaufkasten tragen eine, der fremde Wrapper nicht. */
.fs-pdp-kauf > div:not([class]) { margin-top: .5rem !important; margin-bottom: .5rem !important; }
.fs-pdp-kauf .stock-progress-bar-outer { margin-bottom: 0; }
/* Nachtrag 19 */
@media (max-width: 767.98px) {
/* --- Merkmale als kleine Chips statt als Textzeile ---
Ansage Yunus (22.08.): "kleine Chips fuer die Attribute, mobil sind sie
teilweise versetzt, nimm einfach die Icons ohne Kreis drumherum."
Der Kreis um das Icon war der Grund fuer den Versatz: er ist 20 px hoch,
die Textzeile daneben nur 15 — dadurch sassen die Zeilen unterschiedlich
tief. Ohne Kreis liegen Icon und Wort auf einer Grundlinie. */
.fs-pdp-mk {
display: flex;
flex-wrap: wrap;
gap: .35rem;
border: 0;
padding: .6rem 0;
margin-top: .5rem;
border-top: 1px solid var(--fp-haar);
border-bottom: 1px solid var(--fp-haar);
}
.fs-pdp-mk-item {
display: inline-flex;
align-items: center;
gap: .3rem;
flex: 0 0 auto;
border: 1px solid var(--fp-kante);
border-radius: 3px;
background: #fff;
padding: .22rem .5rem .22rem .38rem;
}
.fs-pdp-mk-item + .fs-pdp-mk-item { border-left: 1px solid var(--fp-kante); padding-left: .38rem; }
.fs-pdp-mk-ic {
display: flex;
flex: 0 0 15px;
width: 15px;
height: 15px;
border: 0; /* kein Kreis */
border-radius: 0;
}
.fs-pdp-mk-ic svg { width: 15px; height: 15px; }
.fs-pdp-mk-t { display: block; }
.fs-pdp-mk-t::after { content: none; } /* kein Trennpunkt mehr */
.fs-pdp-mk-t b {
display: block;
font-size: .69rem;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
white-space: nowrap;
}
.fs-pdp-mk-t i { display: none; }
/* --- Aktionen in EINER Reihe --- */
.fs-pdp .product-actions {
flex-wrap: nowrap;
justify-content: space-between;
gap: .35rem;
width: 100%;
}
.fs-pdp .product-actions .btn {
font-size: .62rem;
white-space: nowrap;
padding: 0;
flex: 0 1 auto;
min-width: 0;
}
.fs-pdp-fuss { gap: .4rem; }
.fs-pdp-fuss .fs-pdp-beob { flex: 1 1 100%; }
}
/* Nachtrag 20: Kompatibilitaet */
/* Sitzt unter dem Produktbild und beantwortet die Frage, an der der Kauf
haengt: passt das in mein Geraet. Nutzt den Weissraum, der nach dem
Eindampfen der Kauffl. unter dem Bild uebrig blieb. */
.product-gallery .fs-pdp-kompat {
display: flex;
align-items: center;
gap: .6rem;
margin: .7rem 0 0;
padding: .4rem .7rem;
background: #fff;
border: 1px solid var(--fp-kante, #d9d9de);
border-left: 3px solid var(--fp-cta, #c90f88);
border-radius: 3px;
color: #111114;
}
/* EINZEILIG (Ansage Yunus: "dann wird sie nicht laenger"). Zweizeilig war die
Zeile 53 px hoch, der Weissraum unter dem Bild aber je nach Artikel nur
30 px — die Seite waere gewachsen. Einzeilig sind es rund 32 px und sie
passt in den vorhandenen Platz. */
.product-gallery .fs-pdp-kompat-ic { flex: 0 0 18px; display: flex; }
.product-gallery .fs-pdp-kompat-l {
flex: 0 0 auto;
font-size: .64rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
color: #5b5b63;
}
.product-gallery .fs-pdp-kompat-werte {
font-family: "FS Display", Arial, sans-serif;
font-weight: 400;
font-size: .95rem;
text-transform: uppercase;
letter-spacing: .01em;
color: #111114;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.product-gallery .fs-pdp-kompat-link {
margin-left: auto;
flex: 0 0 auto;
font-size: .7rem;
color: #111114;
text-decoration: none;
border-bottom: 1px solid #d9d9de;
padding-bottom: 1px;
}
.product-gallery .fs-pdp-kompat-link:hover { color: #c90f88; border-bottom-color: #c90f88; }
@media (max-width: 767.98px) {
.product-gallery .fs-pdp-kompat { margin-top: .6rem; padding: .5rem .65rem; }
.product-gallery .fs-pdp-kompat-werte { font-size: .95rem; }
}
/* Nachtrag 21: Ziffer im Mengenwaehler */
/* Die Ziffer sass sichtbar schief. Ursache: Bootstrap gibt .form-control
14 px Innenabstand links UND rechts — bei einem 37 px breiten Feld bleiben
der Zahl 9 px Inhaltsbreite. Zentriert wurde also innerhalb eines Restes,
nicht innerhalb des Feldes. Ohne Innenabstand steht sie mittig. */
.fs-pdp .form-counter .quantity {
padding-left: 0;
padding-right: 0;
text-align: center;
line-height: 1;
}
/* Auch die Zeichen der beiden Knoepfe mittig ausrichten. */
.fs-pdp .form-counter .btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
/* Nachtrag 22 */
/* --- "Menge" steht UEBER dem Regler, nicht daneben (Ansage Yunus 23.08.).
Die Beschriftung wandert dazu vom Zeilencontainer in die erste Spalte, die
zur Saeule wird. Der Kaufknopf daneben bleibt unten buendig, damit er nicht
auf die Hoehe von Beschriftung plus Regler waechst. --- */
.fs-pdp .product-buy .basket-form-inline:not(.fixed-to-cart)::before { content: none; }
.fs-pdp .product-buy .basket-form-inline:not(.fixed-to-cart) { align-items: flex-end; }
/* NICHT :first-child — das erste Kind der Zeile ist .fs-pdp-barpreis (der
Preis fuer die angeheftete Leiste, sonst unsichtbar). Die Spalte mit dem
Regler ist die erste, die KEINE letzte ist. */
.fs-pdp .product-buy .basket-form-inline:not(.fixed-to-cart) > [class*="col"]:not(:last-child) {
display: flex;
flex-direction: column;
gap: .2rem;
}
.fs-pdp .product-buy .basket-form-inline:not(.fixed-to-cart) > [class*="col"]:not(:last-child)::before {
content: "Menge";
font-size: .64rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--fp-weich);
line-height: 1;
}
/* --- Warenkorb-Symbol groesser ---
Sichtbar ist NICHT das