/* ==========================================================================
Fahrradshop24 – Warenkorb, Kasse, Bestellbestätigung
--------------------------------------------------------------------------
Gestaltung der echten WooCommerce-Kaufstrecke. Die Datei wird nur auf
Warenkorb, Kasse und Bestellbestätigung geladen (siehe
inc/cart-checkout.php) und setzt ausschließlich auf den bereits global
definierten Marken-Tokens aus frontend.css auf:
--accent #d24614 Markenorange, Flächen und Primary-Buttons
--accent-dark #b93800 Hover-Zustand
--ink #111315 Textfarbe
--fs24-btn-radius eine Eckenrundung für alle Schaltflächen
Kein eigenes Farbsystem, keine Pillen-Buttons, keine dekorativen
Schatten. Es werden bewusst auch die WooCommerce-Originalklassen
mitgestylt (.form-row, .input-text, .woocommerce-error …), weil
WooCommerce Fehlermeldungen und Felder selbst erzeugt.
========================================================================== */
.fs24-cart,
.fs24-co,
.fs24-ty {
--fs24-line: #e4e7ea;
--fs24-soft: #f6f7f8;
--fs24-muted: #5d666e;
--fs24-card-radius: 14px;
color: var(--ink);
}
/* --- Gemeinsame Schaltflächen ------------------------------------------- */
.fs24-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 0 22px;
border: 1px solid transparent;
border-radius: var(--fs24-btn-radius, 10px);
font-weight: 700;
font-size: .95rem;
line-height: 1.2;
text-align: center;
cursor: pointer;
transition: background .18s ease, border-color .18s ease, color .18s ease;
}
/* Elementauswahl, damit Blocksys globales "a:hover" (0,1,1) die weiße
Schrift nicht überschreibt – dieselbe Falle wie bei den übrigen
Primary-Buttons des Shops. */
a.fs24-btn--primary,
a.fs24-btn--primary:link,
a.fs24-btn--primary:visited,
a.fs24-btn--primary:hover,
a.fs24-btn--primary:focus,
a.fs24-btn--primary:focus-visible,
a.fs24-btn--primary:active,
.fs24-btn--primary {
color: #fff;
}
.fs24-btn--primary {
background: var(--accent);
border-color: var(--accent);
}
.fs24-btn--primary:hover,
.fs24-btn--primary:focus-visible {
background: var(--accent-dark);
border-color: var(--accent-dark);
}
a.fs24-btn--ghost,
a.fs24-btn--ghost:link,
a.fs24-btn--ghost:visited,
a.fs24-btn--ghost:hover,
a.fs24-btn--ghost:focus,
a.fs24-btn--ghost:active,
.fs24-btn--ghost {
color: var(--ink);
}
.fs24-btn--ghost {
background: #fff;
border-color: var(--fs24-line);
}
.fs24-btn--ghost:hover,
.fs24-btn--ghost:focus-visible {
border-color: var(--ink);
background: var(--fs24-soft);
}
.fs24-btn:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
/* ==========================================================================
WARENKORB
========================================================================== */
.fs24-cart {
display: grid;
grid-template-columns: minmax(0, 1fr) 370px;
gap: 28px;
align-items: start;
}
.fs24-cart__form {
min-width: 0;
}
.fs24-cart__collaterals {
position: sticky;
top: 24px;
}
/* --- Positionen als Karten statt roher Tabelle -------------------------- */
.fs24-cart__items {
display: flex;
flex-direction: column;
gap: 14px;
}
.fs24-cart__item {
display: grid;
grid-template-columns: var(--fs24-cart-media-w) minmax(0, 1fr) auto auto;
gap: 18px;
align-items: center;
padding: 16px;
background: #fff;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-card-radius);
}
/* --- Produktbild der Warenkorbposition ---------------------------------
Das Bild wird vollstaendig gezeigt, nie beschnitten. Es fuellt seine
Flaeche nicht aus, sondern wird proportional hineingelegt und mittig
ausgerichtet; was uebrig bleibt, ist Freiraum.
Drei Entscheidungen, jede gegen den Augenschein gepruefte Messung:
1. Quadratische Flaeche statt Querformat. Bei "contain" bestimmt die
knappere Achse die Groesse. Ein Fahrradfoto (rund 1,5:1) ist in
einer 140x140- wie in einer 140x105-Flaeche gleich gross - es
begrenzt die Breite, nicht die Hoehe. Hoch- und quadratformatige
Artikel begrenzt dagegen die Hoehe: Das Ballistol-Spray (417x900)
wird im Quadrat 57x124 statt 41x89 gross, ein quadratisches
Bekleidungsfoto 124x124 statt 89x89 - rund 40 Prozent mehr in
beiden Faellen, bei unveraendert grossen Fahrraedern.
2. Weisser Grund statt getoentem Kasten. Nahezu alle Produktfotos des
Shops haben selbst weissen Hintergrund (geprueft an Fahrrad-,
Zubehoer- und Bekleidungsfotos). Auf einer getoenten Flaeche stand
dieses Weiss als sichtbares Rechteck im Kasten. Auf Weiss geht der
Freiraum in der Karte auf, und transparente PNGs (z. B. das
Cube-Foto) liegen ebenfalls auf Weiss statt auf Grau. Damit kostet
Entscheidung 1 optisch nichts: Der ungenutzte Teil der Flaeche ist
nicht mehr zu sehen.
3. Die Breite steht als Variable, weil sie an drei Stellen gebraucht
wird: als Rasterspalte oben, als Breite hier und als
"sizes"-Angabe des ![]()
in cart/cart.php. Wer sie aendert, muss
alle drei anfassen.
Wichtig: "object-fit: contain" allein genuegt nicht. Die Standardgroesse
"woocommerce_thumbnail" ist in diesem Shop mit hartem 1:1-Zuschnitt
registriert, das Bild ist also schon als Datei beschnitten. Die
eigentliche Korrektur sitzt deshalb im Template (Groesse
"woocommerce_single"), diese Regeln halten das Ergebnis nur unverzerrt
und mittig. Siehe Kommentar in woocommerce/cart/cart.php.
---------------------------------------------------------------------- */
.fs24-cart {
--fs24-cart-media-w: 140px;
}
.fs24-cart__media {
width: var(--fs24-cart-media-w);
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 10px;
overflow: hidden;
}
/* Der Bildlink umschliesst das ![]()
und muss die Flaeche mitnehmen,
sonst schrumpft die Klickflaeche auf die Zeilenhoehe des Inline-Bilds
und der Weg zur Produktseite wird zur Millimeterarbeit. */
.fs24-cart__media > a {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
min-width: 0;
}
.fs24-cart__media img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
object-fit: contain;
object-position: center;
padding: 8px;
}
.fs24-cart__info {
min-width: 0;
}
.fs24-cart__name {
font-weight: 700;
font-size: 1rem;
line-height: 1.35;
color: var(--ink);
}
.fs24-cart__name a {
color: inherit;
}
.fs24-cart__name a:hover {
color: var(--accent-dark);
}
.fs24-cart__facts {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
margin: 8px 0 0;
padding: 0;
list-style: none;
}
.fs24-cart__fact {
font-size: .78rem;
color: var(--fs24-muted);
background: var(--fs24-soft);
border-radius: 999px;
padding: 3px 10px;
}
/* Die Versandart ist bei Fahrrädern die häufigste Rückfrage im
Warenkorb – deshalb als einziger Fakt farblich hervorgehoben. */
.fs24-cart__fact--ship {
color: var(--accent-dark);
background: rgba(210, 70, 20, .08);
font-weight: 600;
}
.fs24-cart__unit {
margin-top: 8px;
font-size: .85rem;
color: var(--fs24-muted);
}
.fs24-cart__unit-label::after {
content: ": ";
}
.fs24-cart__info .fs24-cart__unit .amount {
color: var(--ink);
font-weight: 600;
}
.fs24-cart__col-label {
display: none;
}
.fs24-cart__qty .quantity {
display: flex;
}
.fs24-cart__qty input.qty {
width: 74px;
min-height: 44px;
padding: 6px 8px;
text-align: center;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-btn-radius, 10px);
background: #fff;
color: var(--ink);
font-weight: 600;
}
.fs24-cart__line {
display: flex;
align-items: center;
gap: 14px;
justify-self: end;
white-space: nowrap;
}
.fs24-cart__line-amount {
font-weight: 800;
font-size: 1.05rem;
}
a.fs24-cart__remove,
a.fs24-cart__remove:hover {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
border: 1px solid var(--fs24-line);
color: var(--fs24-muted);
font-size: 1.15rem;
line-height: 1;
text-decoration: none;
background: #fff;
}
a.fs24-cart__remove:hover,
a.fs24-cart__remove:focus-visible {
color: #fff;
background: var(--accent-dark);
border-color: var(--accent-dark);
}
/* --- Gutschein und Aktualisieren ---------------------------------------- */
.fs24-cart__actions {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-top: 18px;
padding: 16px;
background: #fff;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-card-radius);
}
.fs24-cart__coupon {
flex: 1 1 320px;
min-width: 0;
}
.fs24-cart__coupon-label {
display: block;
margin-bottom: 6px;
font-size: .82rem;
font-weight: 600;
color: var(--fs24-muted);
}
.fs24-cart__coupon-row {
display: flex;
gap: 8px;
}
.fs24-cart__coupon-input {
flex: 1 1 auto;
min-width: 0;
min-height: 48px;
padding: 0 14px;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-btn-radius, 10px);
background: #fff;
color: var(--ink);
}
.fs24-cart__coupon-input:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
border-color: var(--accent);
}
/* ==========================================================================
LEERER WARENKORB
--------------------------------------------------------------------------
Eigene Bühne, nicht die des gefüllten Warenkorbs: Die leere Ansicht
hat keinen Seitenkopf und keine Summenkarte, sie besteht aus genau
einer Karte. Markup siehe woocommerce/cart/cart-empty.php.
WARUM DIE TOKENS HIER NOCH EINMAL STEHEN
"--fs24-line" & Co. sind weiter oben auf ".fs24-cart, .fs24-co,
.fs24-ty" gesetzt. Die alte leere Ansicht trug keine dieser Klassen –
"border: 1px solid var(--fs24-line)" war damit eine Deklaration mit
unbekannter Variable, wurde ungültig und fiel auf "border-style: none"
zurück. Die Karte hatte also gar keinen Rahmen; genau daher der
spärliche Eindruck. Dieser Block bringt seine Tokens deshalb selbst
mit.
========================================================================== */
.fs24-cart-empty {
--fs24-line: #e4e7ea;
--fs24-soft: #f6f7f8;
--fs24-muted: #5d666e;
--fs24-card-radius: 14px;
color: var(--ink);
/* Blocksys Hero trägt auf dieser Seite sonst den oberen Abstand zur
Navigation; er ist ausgeblendet, also bringt die Ansicht ihn selbst
mit – gleiche Werte wie ".fs24-cartpage". */
padding: 40px 0 72px;
}
/* Dieselbe maximale Inhaltsbreite wie auf den übrigen Shopseiten
("--max" aus frontend.css), selbst zentriert. Der umgebende
".woocommerce"-Container wird weiter unten von seiner linksbündigen
WordPress-Deckelung befreit. */
.fs24-cart-empty__inner {
width: min(var(--max, 1540px), calc(100% - 48px));
margin-inline: auto;
}
.fs24-cart-empty__card {
padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 56px);
text-align: center;
background: #fff;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-card-radius);
}
/* --- Kopfmotiv ----------------------------------------------------------- */
/* Der Grundton --accent trägt hier eine reine Zeichnung, keinen Text:
Die Kontrastregel für orangefarbene SCHRIFT (dort --accent-dark, siehe
frontend.css) gilt für dekorative Linien nicht.
Zentriert wird über flex und NICHT über das "text-align: center" der
Karte: Blocksy setzt SVG global auf "display: block" – als Blockbox
mit fester Breite ignoriert das Motiv die Textausrichtung und stand
dadurch am linken Kartenrand (gemessen x=81 bei einem Inhaltsbeginn
von x=80). */
.fs24-cart-empty__art {
display: flex;
justify-content: center;
margin: 0 0 22px;
line-height: 0;
color: var(--accent);
}
.fs24-cart-empty__svg {
width: clamp(64px, 9vw, 96px);
height: auto;
}
/* --- Text ---------------------------------------------------------------- */
/* Blocksy färbt h1–h6 global in seinem Akzentton; jede Überschrift der
neuen Seiten setzt ihre Farbe deshalb ausdrücklich selbst. */
.fs24-cart-empty__title {
margin: 0 0 12px;
color: var(--ink);
font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.05rem);
font-weight: 750;
line-height: 1.18;
letter-spacing: -.01em;
}
.fs24-cart-empty__text {
margin: 0 auto;
max-width: 54ch;
color: var(--fs24-muted);
font-size: 1rem;
line-height: 1.6;
}
/* --- Hauptweg und Startseitenlink ---------------------------------------- */
.fs24-cart-empty__actions {
margin: 28px 0 0;
}
.fs24-cart-empty__cta {
min-height: 54px;
padding: 0 34px;
font-size: 1rem;
}
.fs24-cart-empty__home {
margin: 14px 0 0;
font-size: .92rem;
}
/* Element vor Klasse, damit Blocksys globales "a:hover" (0,1,1) nicht
gewinnt – dieselbe Spezifitätsfalle wie bei den übrigen Links des
Shops. --accent-dark statt --accent, weil hier ORANGE SCHRIFT auf
Weiss steht (5,35:1 statt 4,19:1). */
a.fs24-cart-empty__home-link,
a.fs24-cart-empty__home-link:link,
a.fs24-cart-empty__home-link:visited {
color: var(--accent-dark);
text-decoration: underline;
text-underline-offset: 3px;
}
a.fs24-cart-empty__home-link:hover,
a.fs24-cart-empty__home-link:focus-visible {
color: var(--ink);
}
a.fs24-cart-empty__home-link:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 3px;
border-radius: 4px;
}
/* --- Einstiege in die vier Hauptbereiche --------------------------------- */
.fs24-cart-empty__cats {
margin: 34px auto 0;
max-width: 880px;
}
.fs24-cart-empty__cat-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.fs24-cart-empty__cat-item {
margin: 0;
}
a.fs24-cart-empty__cat,
a.fs24-cart-empty__cat:link,
a.fs24-cart-empty__cat:visited,
a.fs24-cart-empty__cat:hover,
a.fs24-cart-empty__cat:focus,
a.fs24-cart-empty__cat:active {
color: var(--ink);
text-decoration: none;
}
.fs24-cart-empty__cat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
height: 100%;
min-height: 108px;
padding: 18px 12px;
background: #fff;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-btn-radius, 10px);
font-weight: 700;
font-size: .95rem;
line-height: 1.25;
text-align: center;
transition: border-color .18s ease, background .18s ease;
}
a.fs24-cart-empty__cat:hover,
a.fs24-cart-empty__cat:focus-visible {
background: var(--fs24-soft);
border-color: var(--accent);
}
a.fs24-cart-empty__cat:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
.fs24-cart-empty__cat-icon {
display: block;
line-height: 0;
color: var(--accent);
}
/* Die Strichvorgaben für ".fs24-cat-icon" stehen sonst in shop.css –
die wird auf dem Warenkorb nicht geladen. Ohne diese Regel stünde das
Symbol schwarz gefüllt statt orange gezeichnet da. */
.fs24-cart-empty__cat-icon .fs24-cat-icon {
width: 34px;
height: 34px;
fill: none;
stroke: currentColor;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
}
/* --- Vertrauenszeile ------------------------------------------------------
Bewusst zurückhaltend: kleine Schrift, gedeckte Farbe, nur eine feine
Trennlinie darüber. Sie ordnet sich dem Hauptweg unter und wirbt
nicht.
-------------------------------------------------------------------------- */
.fs24-cart-empty__trust {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 30px;
margin: 32px 0 0;
padding: 22px 0 0;
list-style: none;
border-top: 1px solid var(--fs24-line);
color: var(--fs24-muted);
font-size: .88rem;
}
.fs24-cart-empty__trust-item {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
}
.fs24-cart-empty__trust-icon {
display: inline-flex;
color: var(--accent);
}
/* fs24_service_icon() liefert das SVG ohne Massangabe; ohne diese Regel
stünde es in seiner Ersatzgrösse (300x150) da. */
.fs24-cart-empty__trust-icon .fs24-svc__icon {
width: 18px;
height: 18px;
}
/* --- Schmalere Breiten ---------------------------------------------------- */
/* Vier Kacheln nebeneinander werden hier zu schmal für die längeren
Bereichsnamen; ab hier zwei Spalten – auf dem Smartphone bleibt es
dabei. */
@media (max-width: 880px) {
.fs24-cart-empty__cat-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.fs24-cart-empty {
padding: 24px 0 56px;
}
.fs24-cart-empty__inner {
width: calc(100% - 28px);
}
.fs24-cart-empty__card {
padding: 30px 18px 32px;
}
/* Volle Breite statt eines schmalen Knopfes: bequemer zu treffen und
eindeutig der Hauptweg. */
.fs24-cart-empty__cta {
display: flex;
width: 100%;
}
.fs24-cart-empty__trust {
flex-direction: column;
gap: 12px;
}
}
/* ==========================================================================
SUMMENKARTE (Warenkorb)
========================================================================== */
.fs24-sum {
padding: 22px;
background: #fff;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-card-radius);
}
.fs24-sum__title {
margin: 0 0 16px;
font-size: 1.15rem;
color: var(--ink);
}
.fs24-sum__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 10px 0;
border-bottom: 1px solid var(--fs24-line);
}
.fs24-sum__row--block {
display: block;
}
.fs24-sum__label {
color: var(--fs24-muted);
font-size: .92rem;
}
.fs24-sum__value {
font-weight: 600;
text-align: right;
}
/* Die Gesamtsumme wird durch Abstand und Schriftgewicht abgesetzt, nicht
durch einen kräftigen Strich. Vorher stand hier "border-top: 2px solid
var(--ink)" – eine schwarze Doppellinie, die zusammen mit der Trennlinie
der Zeile darüber wie eine WooCommerce-Standardtabelle aussah. */
.fs24-sum__row--total {
border-bottom: 0;
border-top: 1px solid var(--fs24-line);
padding-top: 18px;
margin-top: 10px;
}
.fs24-sum__row--total .fs24-sum__label {
color: var(--ink);
font-weight: 700;
font-size: 1.02rem;
}
.fs24-sum__row--total .fs24-sum__value {
font-weight: 750;
font-size: 1.32rem;
letter-spacing: -.01em;
}
.fs24-sum__cta {
margin-top: 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* WooCommerce/Gateways liefern hier eigene Buttons ein - der
Standard-"Zur Kasse" wird auf den Markenstil gezogen. */
.fs24-sum__cta .checkout-button,
.fs24-sum__cta a.checkout-button {
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 22px;
border: 1px solid var(--accent);
border-radius: var(--fs24-btn-radius, 10px);
background: var(--accent);
color: #fff;
font-weight: 800;
font-size: 1rem;
text-decoration: none;
}
.fs24-sum__cta a.checkout-button:hover,
.fs24-sum__cta a.checkout-button:focus-visible {
background: var(--accent-dark);
border-color: var(--accent-dark);
color: #fff;
}
/* ==========================================================================
VERSANDARTEN (Warenkorb und Kasse, gemeinsames Markup)
========================================================================== */
.fs24-ship__title {
display: block;
font-size: .92rem;
color: var(--fs24-muted);
margin-bottom: 8px;
}
.fs24-sum .fs24-ship {
padding: 10px 0;
border-bottom: 1px solid var(--fs24-line);
}
.fs24-ship__list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.fs24-ship__option {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-btn-radius, 10px);
background: #fff;
}
.fs24-ship__option:has(input:checked) {
border-color: var(--accent);
background: rgba(210, 70, 20, .04);
}
.fs24-ship__option input[type="radio"] {
margin-top: 3px;
accent-color: var(--accent);
width: 18px;
height: 18px;
flex: 0 0 auto;
}
.fs24-ship__option label {
margin: 0;
font-size: .95rem;
line-height: 1.4;
cursor: pointer;
}
.fs24-ship__note,
.fs24-ship__hint {
margin: 10px 0 0;
font-size: .82rem;
color: var(--fs24-muted);
line-height: 1.5;
}
.fs24-ship__hint--none {
color: #9a3412;
background: #fff7ed;
border: 1px solid #fed7aa;
border-radius: 10px;
padding: 10px 12px;
}
/* Der Versandrechner im Warenkorb */
.shipping-calculator-button {
display: inline-block;
margin-top: 10px;
font-size: .86rem;
color: var(--accent-dark);
text-decoration: underline;
}
.shipping-calculator-form {
margin-top: 12px;
}
/* ==========================================================================
KASSE
========================================================================== */
/* Die Kasse lief bis zuletzt zweispaltig: links die Felder, rechts eine
klebende Bestellbox. Mit den drei Schritten trägt jeder Schritt für sich
und braucht die volle Bühne – die zweite Spalte gäbe es nur noch als
Wiederholung. Statt einer Seitenspalte also EINE zentrierte Bahn; die
Zweispaltigkeit steckt jetzt innerhalb der Karten (Vorname/Nachname,
PLZ/Ort). */
.fs24-co__stage {
width: min(920px, 100%);
margin-inline: auto;
}
.fs24-co__section {
padding: 22px;
margin-bottom: 18px;
background: #fff;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-card-radius);
}
.fs24-co__legend {
margin: 0 0 4px;
font-size: 1.08rem;
font-weight: 700;
color: var(--ink);
}
.fs24-co__hint {
margin: 0 0 14px;
font-size: .85rem;
color: var(--fs24-muted);
}
.fs24-co__legend + .fs24-co__fields {
margin-top: 14px;
}
/* Formularfelder: WooCommerce erzeugt .form-row/.input-text selbst. */
.fs24-co__fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 16px;
}
.fs24-co__fields .form-row {
margin: 0 0 14px;
padding: 0;
float: none;
width: auto;
}
.fs24-co__fields .form-row-wide,
.fs24-co__fields #billing_address_1_field,
.fs24-co__fields #billing_address_2_field,
.fs24-co__fields #billing_country_field,
.fs24-co__fields #shipping_address_1_field,
.fs24-co__fields #shipping_address_2_field,
.fs24-co__fields #shipping_country_field {
grid-column: 1 / -1;
}
.fs24-co__fields label {
display: block;
margin-bottom: 5px;
font-size: .84rem;
font-weight: 600;
color: var(--fs24-muted);
}
.fs24-co__fields .required {
color: var(--accent-dark);
text-decoration: none;
}
.fs24-co__fields .input-text,
.fs24-co__fields select,
.fs24-co__fields textarea,
.fs24-co .select2-container .select2-selection--single {
width: 100%;
min-height: 48px;
padding: 10px 14px;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-btn-radius, 10px);
background: #fff;
color: var(--ink);
font-size: .95rem;
}
.fs24-co__fields textarea {
min-height: 110px;
resize: vertical;
}
.fs24-co__fields .input-text:focus,
.fs24-co__fields select:focus,
.fs24-co__fields textarea:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
border-color: var(--accent);
}
/* WooCommerce markiert fehlerhafte Felder selbst - hier nur sichtbar machen. */
.fs24-co .woocommerce-invalid .input-text,
.fs24-co .woocommerce-invalid select {
border-color: #b91c1c;
background: #fef2f2;
}
.fs24-co .woocommerce-validated .input-text {
border-color: #15803d;
}
/* Versandabschnitt der Kasse */
.fs24-co__ship-body .fs24-ship__title {
font-size: .82rem;
text-transform: uppercase;
letter-spacing: .04em;
}
/* --- Zahlungsarten ------------------------------------------------------ */
.fs24-co__legend--pay {
margin: 0 0 12px;
}
.fs24-co .woocommerce-checkout-payment {
padding: 22px;
margin-bottom: 18px;
background: #fff;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-card-radius);
}
.fs24-co ul.payment_methods {
margin: 0;
padding: 0;
list-style: none;
border: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.fs24-pay__item {
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-btn-radius, 10px);
background: #fff;
overflow: hidden;
}
.fs24-pay__item:has(input:checked) {
border-color: var(--accent);
}
/* Bewusst der native Radio-Button statt eines nachgebauten Kreises:
Blocksy stylt die Auswahlfelder der Zahlungsarten selbst, ein
zusätzlicher Pseudo-Kreis stand daneben (zwei Punkte pro Zeile).
"accent-color" färbt den echten Button im Markenton und erhält
Tastaturbedienung und Screenreader-Verhalten unverändert. */
.fs24-pay__radio {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin: 0 0 0 16px;
accent-color: var(--accent);
cursor: pointer;
}
.fs24-pay__label {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px 14px 12px;
margin: 0;
cursor: pointer;
}
/* Grid statt Flex: bei langen Bezeichnungen ("Leasing (z. B. JobRad,
BusinessBike)") rutschte der Auswahlknopf sonst in eine eigene Zeile.
Die feste erste Spalte hält ihn zuverlässig neben dem Text, das
Eingabefeld der Zahlungsart spannt darunter über beide Spalten. */
.fs24-pay__item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
}
.fs24-pay__label {
min-width: 0;
}
.fs24-pay__box {
grid-column: 1 / -1;
}
.fs24-pay__text {
flex: 1 1 auto;
min-width: 0;
}
.fs24-pay__name {
display: block;
font-weight: 700;
font-size: .97rem;
color: var(--ink);
}
.fs24-pay__desc {
display: block;
margin-top: 2px;
font-size: .83rem;
line-height: 1.45;
color: var(--fs24-muted);
}
.fs24-pay__desc p {
margin: 0;
}
.fs24-pay__icon {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 6px;
}
.fs24-pay__icon img {
max-height: 26px;
width: auto;
}
.fs24-pay__box {
padding: 4px 16px 16px 50px;
margin: 0;
background: var(--fs24-soft);
border-top: 1px solid var(--fs24-line);
font-size: .9rem;
}
.fs24-pay__box::before {
display: none;
}
/* --- Bestellübersicht --------------------------------------------------- */
.fs24-co__aside-title {
margin: 0 0 14px;
font-size: 1.15rem;
color: var(--ink);
}
.fs24-co__summary {
padding: 22px;
background: #fff;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-card-radius);
margin-bottom: 18px;
}
.fs24-co__sum-head {
display: flex;
justify-content: space-between;
gap: 16px;
padding-bottom: 10px;
border-bottom: 1px solid var(--fs24-line);
font-size: .76rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--fs24-muted);
}
.fs24-co__sum-item {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid var(--fs24-line);
}
.fs24-co__sum-name {
min-width: 0;
font-size: .92rem;
line-height: 1.4;
}
.fs24-co__sum-name .product-quantity {
color: var(--fs24-muted);
font-weight: 600;
}
.fs24-co__sum-amount {
white-space: nowrap;
font-weight: 700;
}
.fs24-co__sum-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 9px 0;
border-bottom: 1px solid var(--fs24-line);
}
.fs24-co__sum-label {
color: var(--fs24-muted);
font-size: .92rem;
}
.fs24-co__sum-note {
display: block;
font-size: .78rem;
color: var(--fs24-muted);
}
.fs24-co__sum-value {
font-weight: 600;
text-align: right;
white-space: nowrap;
}
.fs24-co__sum-row--total {
border-bottom: 0;
border-top: 2px solid var(--ink);
margin-top: 4px;
padding-top: 14px;
}
.fs24-co__sum-row--total .fs24-co__sum-label {
color: var(--ink);
font-weight: 700;
font-size: 1.02rem;
}
.fs24-co__sum-row--total .fs24-co__sum-value {
font-weight: 800;
font-size: 1.22rem;
}
/* --- Rechtliche Zustimmung und Bestellbutton ---------------------------- */
.fs24-co .woocommerce-terms-and-conditions-wrapper,
.fs24-co .wc-gzd-checkbox-placeholder,
.fs24-co .place-order {
margin-top: 0;
}
.fs24-co .validate-required.terms,
.fs24-co .form-row.validate-required > label.checkbox,
.fs24-co .wc-gzd-checkbox-placeholder label {
font-size: .88rem;
line-height: 1.55;
color: var(--ink);
}
.fs24-co .place-order {
padding: 18px;
background: var(--fs24-soft);
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-card-radius);
}
.fs24-co #place_order,
.fs24-co button#place_order {
display: block;
width: 100%;
min-height: 56px;
padding: 0 24px;
border: 1px solid var(--accent);
border-radius: var(--fs24-btn-radius, 10px);
background: var(--accent);
color: #fff;
font-weight: 800;
font-size: 1.03rem;
cursor: pointer;
transition: background .18s ease, border-color .18s ease;
}
.fs24-co #place_order:hover,
.fs24-co #place_order:focus-visible {
background: var(--accent-dark);
border-color: var(--accent-dark);
}
.fs24-co #place_order:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
/* WooCommerce-Meldungen (Fehler, Hinweise) */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
border-radius: var(--fs24-card-radius);
border: 1px solid var(--fs24-line);
border-left: 4px solid var(--accent);
background: #fff;
padding: 14px 18px;
list-style: none;
font-size: .92rem;
}
.woocommerce-error {
border-left-color: #b91c1c;
background: #fef2f2;
}
.woocommerce-error li {
margin-left: 0;
}
/* ==========================================================================
BESTELLBESTÄTIGUNG
========================================================================== */
.fs24-ty {
max-width: 860px;
margin-inline: auto;
}
.fs24-ty__head {
padding: 28px 24px;
background: #fff;
border: 1px solid var(--fs24-line);
border-left: 4px solid var(--accent);
border-radius: var(--fs24-card-radius);
margin-bottom: 18px;
}
.fs24-ty__head--failed {
border-left-color: #b91c1c;
}
.fs24-ty__title {
margin: 0 0 8px;
font-size: 1.5rem;
color: var(--ink);
}
.fs24-ty__lead {
margin: 0;
color: var(--fs24-muted);
border: 0;
padding: 0;
background: none;
}
.fs24-ty__facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1px;
margin: 0 0 18px;
padding: 0;
list-style: none;
background: var(--fs24-line);
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-card-radius);
overflow: hidden;
}
.fs24-ty__fact {
margin: 0;
padding: 16px 18px;
background: #fff;
}
.fs24-ty__fact-label {
display: block;
font-size: .76rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--fs24-muted);
margin-bottom: 4px;
}
.fs24-ty__fact strong {
font-size: 1rem;
color: var(--ink);
}
.fs24-ty__details {
padding: 22px;
background: #fff;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-card-radius);
margin-bottom: 18px;
}
.fs24-ty__details table {
width: 100%;
border-collapse: collapse;
}
.fs24-ty__details th,
.fs24-ty__details td {
padding: 10px 0;
border-bottom: 1px solid var(--fs24-line);
text-align: left;
font-size: .93rem;
}
.fs24-ty__details tfoot th {
color: var(--fs24-muted);
font-weight: 600;
}
.fs24-ty__details td {
text-align: right;
}
.fs24-ty__next {
padding: 22px;
background: var(--fs24-soft);
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-card-radius);
}
.fs24-ty__next-title {
margin: 0 0 8px;
font-size: 1.08rem;
color: var(--ink);
}
.fs24-ty__next-text {
margin: 0 0 16px;
color: var(--fs24-muted);
line-height: 1.6;
}
.fs24-ty__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;
}
/* ==========================================================================
TABLET
========================================================================== */
@media (max-width: 1080px) {
.fs24-cart,
.fs24-co__grid {
grid-template-columns: minmax(0, 1fr);
}
.fs24-cart__collaterals,
.fs24-co__aside {
position: static;
}
/* Auf schmalen Breiten steht die Bestellübersicht VOR den
Zahlungsarten, damit vor der Auswahl klar ist, was bestellt wird. */
.fs24-co__grid {
display: flex;
flex-direction: column;
}
.fs24-co__fields {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ==========================================================================
MOBIL – keine horizontal unbrauchbare Tabelle, alles gestapelt
========================================================================== */
@media (max-width: 720px) {
.fs24-cart__item {
grid-template-columns: var(--fs24-cart-media-w) minmax(0, 1fr);
gap: 14px;
padding: 14px;
}
/* Schmaler als am Desktop, damit dem Produktnamen daneben auch bei
320px Platz bleibt. Die Flaeche bleibt quadratisch; die zusaetzliche
Hoehe faellt hier nicht ins Gewicht, weil die gestapelte Karte
ohnehin deutlich hoeher ist als ihr Bild (gemessen 280-426px). */
.fs24-cart {
--fs24-cart-media-w: 96px;
}
.fs24-cart__qty,
.fs24-cart__line {
grid-column: 1 / -1;
justify-self: stretch;
}
.fs24-cart__qty,
.fs24-cart__line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 12px;
border-top: 1px solid var(--fs24-line);
}
/* Auf Mobil bekommen Menge und Zwischensumme ihre Beschriftung, weil
es keine Tabellenkopfzeile mehr gibt, die sie erklären könnte. */
.fs24-cart__col-label {
display: block;
font-size: .82rem;
font-weight: 600;
color: var(--fs24-muted);
}
.fs24-cart__line-amount {
margin-left: auto;
}
.fs24-cart__actions {
flex-direction: column;
align-items: stretch;
}
/* In der Spaltenanordnung liegt die Hauptachse senkrecht - die
Flex-Basis der Gutscheinspalte wirkt dort als HÖHE. Gemessen: Die
Karte war 367 px hoch, obwohl ihr Inhalt nur 61 px braucht, weil
"flex: 1 1 320px" (für die Zeilenanordnung gedacht) zu 320 px
Mindesthöhe wurde. */
.fs24-cart__coupon {
flex: 0 0 auto;
}
.fs24-cart__update,
.fs24-cart__actions .fs24-btn {
width: 100%;
}
.fs24-co__fields {
grid-template-columns: minmax(0, 1fr);
}
.fs24-co__section,
.fs24-co__summary,
.fs24-co .woocommerce-checkout-payment,
.fs24-sum {
padding: 16px;
}
.fs24-pay__box {
padding-left: 16px;
}
.fs24-ty__facts {
grid-template-columns: minmax(0, 1fr);
}
.fs24-ty__actions .fs24-btn {
width: 100%;
}
}
/* ==========================================================================
Durchsetzung gegen Blocksy-Vorgaben
--------------------------------------------------------------------------
Blocksy stylt Formular-Buttons und das Mengenfeld über eigene Regeln
höherer Spezifität (gemessen: Buttons rgb(40,114,250) statt Markenton,
input.qty mit 87px Breite und 3px Radius). Statt "!important" wird hier
über Element- plus Kontextauswahl nachgezogen – dieselbe Vorgehensweise
wie bei den übrigen Buttons des Shops.
========================================================================== */
.fs24-cart__actions button.fs24-btn--ghost,
.fs24-cart__coupon-row button.fs24-btn--ghost,
.fs24-ty__actions a.fs24-btn--ghost,
.fs24-co a.fs24-btn--ghost {
background: #fff;
border: 1px solid var(--fs24-line);
color: var(--ink);
}
.fs24-cart__actions button.fs24-btn--ghost:hover,
.fs24-cart__actions button.fs24-btn--ghost:focus-visible,
.fs24-cart__coupon-row button.fs24-btn--ghost:hover,
.fs24-cart__coupon-row button.fs24-btn--ghost:focus-visible {
background: var(--fs24-soft);
border-color: var(--ink);
color: var(--ink);
}
/* "Warenkorb aktualisieren" ist erst nach einer Mengenänderung aktiv –
WooCommerce setzt dann disabled. Der Unterschied muss sichtbar sein. */
.fs24-cart__actions button.fs24-cart__update[disabled] {
opacity: .5;
cursor: not-allowed;
}
/* --------------------------------------------------------------------------
Mengensteuerung "- 2 +" als eine Einheit
--------------------------------------------------------------------------
Gleiche Bauweise wie auf der Produktseite (assets/css/product.css) - dort
steht die ausfuehrliche Begruendung. Kurzfassung: Blocksy liefert
mit zwei ABSOLUT positionierten
Spans (.ct-decrease / .ct-increase) und reserviert im Feld per
"padding-inline: calc(--quantity-height/1.8 + 9%)" Platz dafuer. Wer nur
das Feld umstylt, bekommt Minus und Plus an falscher Stelle.
Hier uebernimmt der Container die Anordnung selbst: Flexstreifen mit
fester Reihenfolge Minus - Zahl - Plus. Die Spans bleiben unveraendert,
Blocksys Klicklogik haengt an ihnen. */
.fs24-cart .fs24-cart__qty .quantity {
--quantity-height: 46px;
display: flex;
align-items: stretch;
width: 136px;
height: 46px;
padding: 0;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-btn-radius, 10px);
background: #fff;
overflow: hidden;
}
.fs24-cart .fs24-cart__qty .quantity .ct-decrease,
.fs24-cart .fs24-cart__qty .quantity .ct-increase {
position: static;
inset: auto;
flex: 0 0 40px;
width: 40px;
height: auto;
border-radius: 0;
background: transparent;
color: var(--metal-3, #73797d);
transition: background-color .15s ease, color .15s ease;
}
.fs24-cart .fs24-cart__qty .quantity .ct-decrease:hover,
.fs24-cart .fs24-cart__qty .quantity .ct-increase:hover {
background: var(--fs24-soft);
color: var(--ink);
}
.fs24-cart .fs24-cart__qty .quantity .ct-decrease { order: 1; }
.fs24-cart .fs24-cart__qty .quantity .ct-increase { order: 3; }
/* (0,4,1) - Blocksys ".quantity[data-type=type-2] input[type=number]"
liegt bei (0,3,1) und wuerde bei Gleichstand gewinnen, weil
woocommerce.min.css spaeter laedt. */
.fs24-cart .fs24-cart__qty .quantity input.qty {
order: 2;
flex: 0 0 54px;
width: 54px;
min-width: 0;
height: auto;
padding: 0;
padding-inline: 0;
border: 0;
text-align: center;
background: transparent;
color: var(--ink);
font-weight: 700;
font-size: 1rem;
}
.fs24-cart .fs24-cart__qty .quantity input.qty::-webkit-outer-spin-button,
.fs24-cart .fs24-cart__qty .quantity input.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.fs24-cart .fs24-cart__qty .quantity input.qty {
-moz-appearance: textfield;
appearance: textfield;
}
.fs24-cart .fs24-cart__qty .quantity:focus-within {
outline: 2px solid var(--accent);
outline-offset: 1px;
border-color: var(--accent);
}
/* Waehrend die Menge an WooCommerce geschickt wird, ist die Zeile kurz
nicht bedienbar - sonst klickt man in eine Summe, die gerade neu
gerechnet wird. */
.fs24-cart__item.is-updating {
opacity: .55;
pointer-events: none;
transition: opacity .15s ease;
}
/* Mit JavaScript uebernimmt cart.js das Aktualisieren automatisch; der
Knopf waere dann nur noch eine Sackgasse. Ohne JavaScript bleibt er
sichtbar und ist der einzige Weg - deshalb wird er ausgeblendet und
nicht entfernt. */
.fs24-has-js .fs24-cart__actions button.fs24-cart__update {
display: none;
}
/* Produktbild-Platzhalter, wenn ein Artikel (noch) kein Bild hat:
sonst zeigt der Browser das kaputte Bildsymbol samt Alt-Text. */
.fs24-cart__media img[src=""],
.fs24-cart__media img:not([src]) {
visibility: hidden;
}
/* Blocksy erzwingt den Radius des Mengenfelds mit "!important"
(woocommerce.min.css: "div.quantity input[type=number]
{border-radius: var(--theme-form-field-border-radius, 3px) !important}").
Nur deshalb steht hier ebenfalls ein "!important" – es ist die einzige
Stelle in dieser Datei, und sie zieht das Feld auf dieselbe
Eckenrundung wie alle übrigen Bedienelemente des Shops. */
.fs24-cart div.quantity input[type="number"].qty {
border-radius: var(--fs24-btn-radius, 10px) !important;
}
/* ==========================================================================
Blocksys eigenes Checkout-Raster abschalten
--------------------------------------------------------------------------
Blocksy macht "form.checkout" selbst zu einem zweispaltigen Grid
(gemessen: grid-template-columns 612.5px 612.5px). Das eigene Raster
dieser Kasse landete dadurch komplett in der ersten Spalte und die
Formularspalte kollabierte auf 161px. Die Zeile unten gibt die
Layouthoheit an .fs24-co__grid zurück; Blocksys Grid wird nur auf
diesem Formular aufgehoben, nicht global.
========================================================================== */
form.checkout.fs24-co,
.woocommerce form.checkout.fs24-co {
display: block;
grid-template-columns: none;
gap: 0;
}
/* WooCommerce/Blocksy stellen "#customer_details .col-1/.col-2"
nebeneinander. Kontakt-, Rechnungs- und Lieferblock sollen hier
untereinander stehen und die volle Spaltenbreite nutzen. */
.fs24-co #customer_details,
.fs24-co #customer_details .col-1,
.fs24-co #customer_details .col-2 {
width: auto;
max-width: none;
float: none;
display: block;
}
/* Die von Blocksy ausgegebene Überschrift über den Zahlungsarten auf
dieselbe Stufe wie die übrigen Abschnittsüberschriften ziehen. */
.fs24-co .woocommerce-checkout-payment > h3,
.fs24-co .woocommerce-checkout-payment > h2 {
margin: 0 0 12px;
font-size: 1.08rem;
font-weight: 700;
color: var(--ink);
}
/* WooCommerce/Blocksy vergeben an einzelne Formularzeilen ein
flex/grid-"order" (u. a. für die Telefon-/E-Mail-Reihenfolge). Im
Kontaktblock soll die Reihenfolge dem Markup folgen – E-Mail zuerst,
weil daran die Bestellbestätigung hängt. */
.fs24-co__fields > .form-row {
order: 0;
}
/* Im Versandabschnitt der Kasse trägt bereits die Abschnittsüberschrift
"Versand"; der von WooCommerce ausgegebene Paketname darüber wäre eine
zweite, identische Zeile. Im Warenkorb bleibt er sichtbar, weil dort
keine eigene Überschrift darübersteht. */
.fs24-co__ship-body .fs24-ship__title {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* Die von easyCredit eingefügte Schaltfläche im Warenkorb kommt als
Pillenform; sie wird auf die shopweite Eckenrundung gezogen. Farbe und
Beschriftung bleiben dem Gateway überlassen. */
.fs24-sum__cta .ratenkauf-button,
.fs24-sum__cta [class*="easycredit"] button,
.fs24-sum__cta button[class*="easycredit"] {
border-radius: var(--fs24-btn-radius, 10px);
}
/* Blocksy stylt die Zahlungsarten über deutlich spezifischere Selektoren
(u. a. "#payment ul.payment_methods li"), wodurch Grid-Layout und
Ausrichtung oben wirkungslos blieben: der Auswahlknopf sprang bei
langen Bezeichnungen in eine eigene Zeile und das Zahlungslogo stand
direkt hinter dem Text statt rechts. Hier dieselben Regeln mit
passender Spezifität. */
.fs24-co #payment ul.payment_methods li.fs24-pay__item,
.fs24-co ul.payment_methods li.fs24-pay__item {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 0;
margin: 0;
background: #fff;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-btn-radius, 10px);
}
/* "flex: 1 1 0" statt "auto": mit einer Basis von auto bestimmt der
Textinhalt die Mindestbreite, wodurch Auswahlknopf und Label bei
langen Bezeichnungen umbrachen. Mit Null-Basis schrumpft das Label
und bleibt neben dem Knopf. */
.fs24-co #payment ul.payment_methods li.fs24-pay__item > label.fs24-pay__label,
.fs24-co ul.payment_methods li.fs24-pay__item > label.fs24-pay__label {
display: flex;
align-items: center;
gap: 14px;
flex: 1 1 0;
width: auto;
padding: 14px 16px 14px 12px;
margin: 0;
min-width: 0;
}
.fs24-co ul.payment_methods li.fs24-pay__item > label.fs24-pay__label .fs24-pay__text {
flex: 1 1 auto;
min-width: 0;
}
.fs24-co #payment ul.payment_methods li.fs24-pay__item > label.fs24-pay__label .fs24-pay__icon,
.fs24-co ul.payment_methods li.fs24-pay__item > label.fs24-pay__label .fs24-pay__icon {
flex: 0 0 auto;
margin-left: auto;
}
.fs24-co ul.payment_methods li.fs24-pay__item > .fs24-pay__box {
flex: 1 1 100%;
}
.fs24-co ul.payment_methods li.fs24-pay__item > input.fs24-pay__radio {
flex: 0 0 auto;
}
/* ==========================================================================
Zahlungszeile: Auswahlknopf fest neben der Bezeichnung
--------------------------------------------------------------------------
Auswahlknopf und Label sind im WooCommerce-Markup Geschwister. Über
Flex/Grid ließ sich das nicht zuverlässig in eine Zeile bringen –
gemessen belegte das Label die volle Zeilenbreite (298 von 300px),
sodass der Knopf bei langen Bezeichnungen darüber landete.
Deshalb hier der einfache, deterministische Weg: der Knopf wird an
einer festen Position gesetzt, das Label bekommt links den passenden
Freiraum. Der Abstand von oben ist bewusst fix und nicht 50%, weil
die Zeile beim Aufklappen des Eingabefelds höher wird.
========================================================================== */
.fs24-co #payment ul.payment_methods li.fs24-pay__item,
.fs24-co ul.payment_methods li.fs24-pay__item {
display: block;
position: relative;
}
.fs24-co #payment ul.payment_methods li.fs24-pay__item > input.fs24-pay__radio,
.fs24-co ul.payment_methods li.fs24-pay__item > input.fs24-pay__radio {
position: absolute;
left: 16px;
top: 23px;
margin: 0;
}
.fs24-co #payment ul.payment_methods li.fs24-pay__item > label.fs24-pay__label,
.fs24-co ul.payment_methods li.fs24-pay__item > label.fs24-pay__label {
display: flex;
/* Oben ausrichten, nicht zentrieren: bei zweizeiligen Bezeichnungen
("Leasing (z. B. JobRad, BusinessBike)") rückte der zentrierte
Textblock sonst unter den fest positionierten Auswahlknopf. */
align-items: flex-start;
gap: 14px;
width: auto;
padding: 14px 16px 14px 46px;
margin: 0;
}
.fs24-co ul.payment_methods li.fs24-pay__item > label.fs24-pay__label .fs24-pay__icon {
align-self: center;
}
.fs24-co #payment ul.payment_methods li.fs24-pay__item > .fs24-pay__box,
.fs24-co ul.payment_methods li.fs24-pay__item > .fs24-pay__box {
padding-left: 46px;
}
/* ==========================================================================
SEITENRAHMEN DES WARENKORBS
--------------------------------------------------------------------------
Der Warenkorb saß bisher direkt in Blocksys Seitencontainer: linksbündig
im Blocksy-Raster, mit dessen Breite (gemessen 1260 px bei 1400 px
Fenster, Inhalt ab x=70) und mit Blocksys Standardüberschrift darüber.
Neben den übrigen neuen Seiten wirkte er dadurch wie ein Fremdkörper.
Ab hier gilt für den Warenkorb dieselbe Bühne wie für Produkt-, Shop- und
Serviceseiten: der zentrale Container aus frontend.css
(--max: 1540px, seitlich 24 px Luft), mittig gesetzt.
Alles in diesem Abschnitt ist auf ".woocommerce-cart" begrenzt, damit die
Kasse – die dieses Stylesheet ebenfalls lädt – unberührt bleibt.
========================================================================== */
/* Blocksys Hero trug bisher den oberen Abstand zur Navigation. Da er auf
dieser Seite entfällt, bringt der Warenkorb ihn selbst mit - sonst
klebt die Überschrift unter dem Menü. */
.fs24-cartpage {
padding: 40px 0 72px;
}
.fs24-cartpage__inner {
width: min(var(--max, 1540px), calc(100% - 48px));
margin-inline: auto;
}
/* Der Warenkorb steckt in ".entry-content.is-layout-constrained". Diese
WordPress-Layoutklasse deckelt ihre direkten Kinder auf die
Inhaltsbreite des Themes – gemessen 1260 px in einem 1400 px breiten
Bereich, und zwar LINKSBÜNDIG (margin 0/0). Genau daher kam der
Eindruck, der Warenkorb klebe am linken Rand.
Deckelung hier aufheben; die Breite bestimmt ".fs24-cartpage__inner"
und zentriert sich selbst. WordPress setzt diese Regeln über ":where()"
ohne Spezifität, eine einfache Klassenregel genügt also. */
.woocommerce-cart .entry-content > .woocommerce,
.woocommerce-cart .fs24-cartpage {
max-width: none;
width: 100%;
margin-inline: 0;
}
/* Blocksy öffnet über "woocommerce_before_main_content" einen eigenen
Inhaltscontainer mit eigener Maximalbreite und großzügigem vertikalem
Abstand. Die Breite bestimmt jetzt .fs24-cartpage__inner – gleiches
Vorgehen wie in product.css und shop.css. */
.woocommerce-cart .ct-container[data-vertical-spacing],
.woocommerce-cart .ct-container-full[data-vertical-spacing] {
width: 100%;
max-width: none;
padding: 0;
}
/* Blocksys Standardüberschrift "Warenkorb" (h1.page-title im hero-section)
entfällt zugunsten des eigenen Seitenkopfs weiter unten. Sie wird nur auf
dieser einen Seite ausgeblendet; die Vorlage der Seite selbst bleibt
unverändert, und ohne dieses Stylesheet erscheint sie wieder. */
.woocommerce-cart .hero-section,
.woocommerce-cart .entry-header .page-title {
display: none;
}
/* --------------------------------------------------------------------------
Seitenkopf
-------------------------------------------------------------------------- */
.fs24-cartpage__head {
margin: 0 0 26px;
}
/* Blocksy färbt h1–h6 global in seinem Akzentton; jede Überschrift der
neuen Seiten setzt deshalb ihre Farbe ausdrücklich selbst. */
.fs24-cartpage__title {
margin: 0 0 8px;
color: var(--ink);
font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
font-weight: 750;
line-height: 1.15;
letter-spacing: -.01em;
}
.fs24-cartpage__lead {
margin: 0;
max-width: 52ch;
color: var(--fs24-muted);
font-size: .95rem;
line-height: 1.55;
}
/* --------------------------------------------------------------------------
Zahlungshinweis unter dem Warenkorb
-------------------------------------------------------------------------- */
.fs24-cartpage__paynote {
margin: 22px 0 0;
color: var(--fs24-muted);
font-size: .86rem;
line-height: 1.55;
}
/* --------------------------------------------------------------------------
Versandrechner
--------------------------------------------------------------------------
Der Aufklapplink von WooCommerce sah wie ein roher Textlink aus. Er wird
zur ruhigen Sekundäraktion – erkennbar klickbar, aber deutlich unter dem
Hauptweg "Weiter zur Kasse".
-------------------------------------------------------------------------- */
.fs24-cart .shipping-calculator-button {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
padding: 8px 14px;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-btn-radius, 10px);
background: #fff;
color: var(--ink);
font-size: .84rem;
font-weight: 600;
text-decoration: none;
transition: border-color .15s ease, background-color .15s ease;
}
.fs24-cart .shipping-calculator-button:hover,
.fs24-cart .shipping-calculator-button:focus-visible {
border-color: var(--ink);
background: var(--fs24-soft);
color: var(--ink);
}
/* --------------------------------------------------------------------------
Express bezahlen
--------------------------------------------------------------------------
Sichtbar sind hier ausschließlich die echten Komponenten der Anbieter:
der PayPal-Smart-Button (.ppc-button-wrapper, ein PayPal-eigenes iframe)
und der Wallet-Knopf von WooPayments (Apple Pay bzw. Google Pay, je nach
Browser und Gerät). Nichts davon wird hier nachgebaut oder umgefärbt –
Wallet-Knöpfe unterliegen den Gestaltungsvorgaben von Apple und Google,
und ein nachgebauter Knopf würde ohnehin nicht bezahlen.
Gestaltet wird deshalb nur der Rahmen: Überschrift, Abstände, Breite.
-------------------------------------------------------------------------- */
.fs24-express {
display: flex;
flex-direction: column;
gap: 10px;
/* Etwas mehr Luft nach oben als der Flex-Abstand der Karte (10px)
hergibt: Darüber steht der Klarna-Ratenhinweis, und der gehört zur
Summe, nicht zu den Expresswegen. Ohne diesen Zuschlag steht er
genau mittig zwischen beiden und liest sich als Überschrift des
Expressbereichs. */
margin-top: 6px;
}
/* Bewusst klein und ruhig: Der Expressbereich ist eine Abkürzung, nicht
der Hauptweg. Der Hauptweg ist der orangefarbene Knopf darunter. */
.fs24-express__title {
margin: 0;
color: var(--fs24-muted);
font-size: .82rem;
font-weight: 600;
letter-spacing: .02em;
}
.fs24-express__buttons {
display: flex;
flex-direction: column;
gap: 10px;
/* Die Anbieter-iframes rechnen ihre Breite selbst aus. Ohne diese
Deckelung schiebt der PayPal-Knopf die Summenkarte auf schmalen
Bildschirmen auf und erzeugt waagerechtes Scrollen. */
max-width: 100%;
min-width: 0;
}
/* Beide Anbieter liefern ihre Hülle als Block mit eigener Innenabstands-
rechnung. Die Abstände macht der Flex-Abstand oben, sonst stünde
zwischen den Knöpfen doppelt so viel Luft wie gewollt. */
.fs24-express__buttons > *,
.fs24-express__buttons .ppc-button-wrapper,
.fs24-express__buttons .wcpay-express-checkout-wrapper {
margin: 0;
max-width: 100%;
min-width: 0;
}
/* WooPayments gibt seinen "— OR —"-Trenner nur auf der Kasse aus. Sollte
ein Update ihn auch im Warenkorb einblenden, stünde er neben unserem
eigenen „oder" – dann gewinnt unserer. */
.fs24-express__buttons #wcpay-express-checkout-button-separator {
display: none !important;
}
/* Der PayPal-Knopf bringt unten eine eigene Abstandsangabe mit. */
.fs24-express__buttons .ppc-button-wrapper {
padding-bottom: 0;
}
/* Trennung zwischen Expressweg und Hauptweg. Kein Knopf, keine Farbe –
nur eine ruhige Zeile, damit erkennbar bleibt, dass hier zwei
gleichwertige Alternativen stehen und nicht eine Abfolge von Schritten. */
.fs24-express__or {
display: flex;
align-items: center;
gap: 12px;
margin: 2px 0;
color: var(--fs24-muted);
font-size: .82rem;
}
.fs24-express__or::before,
.fs24-express__or::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: var(--fs24-line);
}
@media (max-width: 640px) {
/* Auf schmalen Bildschirmen ist der Wallet-Knopf der wahrscheinlichste
Weg (Apple Pay / Google Pay liegen dort im Gerät). Die Abstände
bleiben deshalb großzügig genug zum Treffen. */
.fs24-express__buttons {
gap: 12px;
}
}
/* --------------------------------------------------------------------------
Leere Hüllen im Knopfbereich
--------------------------------------------------------------------------
Der Klarna-Ratenhinweis von WooPayments (#payment-method-message) und
manche Gateway-Hüllen stehen zunächst leer im Markup und werden erst
per JavaScript gefüllt. Solange sie leer sind, dürfen sie keine Lücke
in die Summenkarte reißen.
-------------------------------------------------------------------------- */
.fs24-cart .fs24-sum__cta:empty,
.fs24-cart .fs24-sum__cta > div:empty {
display: none;
}
@media (max-width: 640px) {
.fs24-cartpage {
padding: 24px 0 56px;
}
.fs24-cartpage__inner {
width: calc(100% - 28px);
}
.fs24-cartpage__head {
margin-bottom: 20px;
}
}
/* ==========================================================================
SEITENRAHMEN DER KASSE
--------------------------------------------------------------------------
Dieselbe Bühne wie beim Warenkorb. Die Kasse saß in
".entry-content.is-layout-constrained": Diese WordPress-Layoutklasse
deckelt ihre Kinder auf die Inhaltsbreite des Themes und zwar
LINKSBÜNDIG – gemessen 1260 px in einem 1400 px breiten Bereich, Inhalt
ab x=0. Genau daher klebte die Kasse am linken Rand und die rechte
Spalte lief in den leeren Rest.
Alles hier ist auf ".woocommerce-checkout" begrenzt und nimmt die
Bestellbestätigung ausdrücklich aus – die trägt ihre eigene Gestaltung.
========================================================================== */
.fs24-checkoutpage {
padding: 40px 0 72px;
}
.fs24-checkoutpage__inner {
width: min(var(--max, 1540px), calc(100% - 48px));
margin-inline: auto;
}
.woocommerce-checkout:not(.woocommerce-order-received) .entry-content > .woocommerce,
.woocommerce-checkout:not(.woocommerce-order-received) .fs24-checkoutpage {
max-width: none;
width: 100%;
margin-inline: 0;
}
.woocommerce-checkout:not(.woocommerce-order-received) .ct-container[data-vertical-spacing],
.woocommerce-checkout:not(.woocommerce-order-received) .ct-container-full[data-vertical-spacing] {
width: 100%;
max-width: none;
padding: 0;
}
/* Blocksys Standardüberschrift "Kasse" weicht dem eigenen Seitenkopf. */
.woocommerce-checkout:not(.woocommerce-order-received) .hero-section,
.woocommerce-checkout:not(.woocommerce-order-received) .entry-header .page-title {
display: none;
}
.fs24-checkoutpage__head {
margin-bottom: 26px;
}
.fs24-checkoutpage__title {
margin: 0 0 8px;
color: var(--ink);
font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
font-weight: 750;
line-height: 1.15;
letter-spacing: -.01em;
}
.fs24-checkoutpage__lead {
margin: 0;
max-width: 52ch;
color: var(--fs24-muted);
font-size: .95rem;
line-height: 1.55;
}
/* Blocksy öffnet um Kundendaten und Bestellübersicht eigene Hüllen
(.ct-customer-details, .ct-order-review) mit eigenem Innenabstand,
eigener Fläche und eigener Rundung. Sie bleiben im Markup – daran
hängen Blocksys eigene Skripte –, geben die Gestaltung hier aber ab:
die Karten macht dieses Stylesheet. */
.fs24-co .ct-customer-details,
.fs24-co .ct-order-review {
padding: 0;
margin: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
/* ==========================================================================
FORTSCHRITTSANZEIGE
--------------------------------------------------------------------------
Drei Zustände, drei Zeichen: offen (Zahl), aktiv (orange), erledigt
(Haken). Der Haken ist ein CSS-Zeichen, kein Bild – er skaliert mit der
Schrift und braucht keine zusätzliche Datei.
Ohne JavaScript ist die Anzeige sinnlos (dann stehen alle Abschnitte
untereinander) und deshalb ausgeblendet: sichtbar wird sie erst mit der
Klasse "fs24-co--wizard", die das Skript setzt.
========================================================================== */
.fs24-steps {
display: none;
}
.fs24-co--wizard .fs24-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 0 0 26px;
padding: 0;
list-style: none;
counter-reset: none;
}
.fs24-steps__item {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-card-radius);
color: var(--fs24-muted);
font-size: .9rem;
line-height: 1.25;
}
.fs24-steps__item.is-clickable {
cursor: pointer;
}
.fs24-steps__num {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--fs24-soft);
border: 1px solid var(--fs24-line);
color: var(--fs24-muted);
font-size: .82rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.fs24-steps__label {
min-width: 0;
font-weight: 600;
}
/* Zwei Beschriftungen im Markup, immer nur eine sichtbar: Der lange Titel
passt auf breiten Bildschirmen, auf schmalen bliebe er nur als Fragment
stehen. Kein JavaScript nötig, und der Umschaltpunkt liegt dort, wo die
Schrift tatsächlich nicht mehr passt. */
.fs24-steps__label-short {
display: none;
}
.fs24-steps__item.is-active {
border-color: var(--accent);
background: rgba(210, 70, 20, .05);
color: var(--ink);
}
.fs24-steps__item.is-active .fs24-steps__num {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.fs24-steps__item.is-done {
color: var(--ink);
}
.fs24-steps__item.is-done .fs24-steps__num {
background: var(--ink);
border-color: var(--ink);
color: #fff;
font-size: 0;
}
.fs24-steps__item.is-done .fs24-steps__num::after {
content: "\2713";
font-size: .82rem;
line-height: 1;
}
/* ==========================================================================
DIE DREI ABSCHNITTE
========================================================================== */
.fs24-step {
display: block;
}
/* Der Browser blendet [hidden] nur aus, solange keine Regel "display"
setzt – die Regel darüber täte genau das. Deshalb hier ausdrücklich,
und nur hier ist das "!important" berechtigt. */
.fs24-step[hidden] {
display: none !important;
}
.fs24-step__title {
margin: 0 0 18px;
color: var(--ink);
font-size: 1.32rem;
font-weight: 750;
letter-spacing: -.01em;
}
.fs24-step__title:focus {
outline: none;
}
.fs24-step__title:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 4px;
border-radius: 4px;
}
/* Ohne JavaScript stehen alle drei Abschnitte untereinander. Damit sie
dann nicht ineinanderlaufen, bekommen sie einen Trennabstand – im
Assistenten ist immer nur einer sichtbar, dort fällt er nicht auf. */
.fs24-step + .fs24-step,
.ct-order-review .fs24-step:first-child {
margin-top: 26px;
}
.fs24-co--wizard .fs24-step {
margin-top: 0;
}
.fs24-step__nav {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 22px;
}
.fs24-step__nav .fs24-step__next {
margin-left: auto;
}
.fs24-step__nav--kontakt {
justify-content: flex-end;
}
/* Der letzte Schritt trägt den Bestellbutton. Die Zurück-Schaltfläche
steht deshalb unter ihm und nicht daneben – sie soll sichtbar sein,
aber nicht mit dem Hauptweg konkurrieren. */
.fs24-step__nav--pruefen {
margin-top: 16px;
}
/* ==========================================================================
EXPRESS-ZAHLUNG IN SCHRITT 2
--------------------------------------------------------------------------
Apple Pay und Google Pay gibt es bei WooPayments nur als Express-
Komponente, nicht als eigenes Gateway. Sie stehen deshalb hier über den
Zahlungsarten statt – wie bisher – über den Kundendaten.
Gezeigt wird die echte Wallet-Komponente; nachgebaut wird nichts.
========================================================================== */
.fs24-co__express {
padding: 18px 22px 20px;
margin-bottom: 18px;
background: #fff;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-card-radius);
}
.fs24-co__express-title {
margin: 0 0 2px;
color: var(--ink);
font-size: 1.02rem;
font-weight: 700;
}
.fs24-co__express-hint {
margin: 0 0 14px;
color: var(--fs24-muted);
font-size: .85rem;
line-height: 1.5;
}
.fs24-co__express-buttons {
max-width: 100%;
min-width: 0;
}
.fs24-co__express-buttons .wcpay-express-checkout-wrapper {
margin: 0;
max-width: 100%;
}
/* WooPayments hängt an seine Knöpfe auf der Kasse einen eigenen
"— OR —"-Trenner. Der stammt aus der Zeit, als die Leiste über dem
Formular stand und die Alternative das Formular selbst war. Hier steht
darunter die Liste der Zahlungsarten mit eigener Überschrift; der
Trenner wäre nur eine zweite, englische Zwischenzeile. */
.fs24-co__express-buttons #wcpay-express-checkout-button-separator {
display: none !important;
}
/* ==========================================================================
ANMELDEHINWEIS
========================================================================== */
.fs24-co__login {
margin-top: 14px;
}
.fs24-co__login-line {
margin: 0;
color: var(--fs24-muted);
font-size: .88rem;
}
.fs24-co__login-line .showlogin {
color: var(--accent-dark);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.fs24-co .woocommerce-form-login {
margin: 12px 0 0;
padding: 16px;
background: var(--fs24-soft);
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-card-radius);
}
.fs24-co .woocommerce-form-login .button {
min-height: 44px;
}
/* ==========================================================================
OPTIONALE FELDER (Firma, Adresszusatz, UID)
--------------------------------------------------------------------------
Die Felder bleiben vollständig im Formular – gleiche Namen, gleiche
Klassen, gleicher Wert, gleiche AJAX-Auslöser. Verborgen wird nur die
Darstellung, und auch das erst, wenn der Assistent läuft: ohne
JavaScript sind sie sichtbar, sonst käme man nie an sie heran.
========================================================================== */
.fs24-co__optional-toggle {
display: none;
}
.fs24-co--wizard .fs24-co__optional-toggle {
display: block;
grid-column: 1 / -1;
margin: 0 0 14px;
}
.fs24-co--wizard .fs24-co__optional-toggle[hidden] {
display: none;
}
/* WooCommerces Adress-Lokalisierung (wc-address-i18n.js) blendet
länderabhängige Felder mit jQuery .show() ein und schreibt dabei
"display:block" INS style-Attribut – gemessen an
#billing_address_2_field. Eine Klassenregel verliert dagegen
grundsätzlich; nur "!important" schlägt ein Inline-Attribut. Sobald das
Feld aufgeklappt ist (.is-open), greift die Regel nicht mehr und die
Länderlogik bestimmt wieder allein. */
.fs24-co--wizard .fs24-co__optional:not(.is-open) {
display: none !important;
}
.fs24-co__optional-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 14px;
background: #fff;
border: 1px dashed var(--fs24-line);
border-radius: var(--fs24-btn-radius, 10px);
color: var(--ink);
font-size: .85rem;
font-weight: 600;
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease;
}
.fs24-co__optional-btn:hover,
.fs24-co__optional-btn:focus-visible {
border-color: var(--ink);
background: var(--fs24-soft);
}
/* ==========================================================================
FELDFEHLER AM FELD
========================================================================== */
.fs24-co__row--error .input-text,
.fs24-co__row--error select,
.fs24-co__row--error textarea {
border-color: #b91c1c;
background: #fef2f2;
}
.fs24-co__error {
display: block;
margin-top: 6px;
color: #b91c1c;
font-size: .82rem;
line-height: 1.4;
}
/* ==========================================================================
ZUSAMMENFASSUNG IN SCHRITT 3
--------------------------------------------------------------------------
Zeigt, was in den Schritten davor eingegeben und gewählt wurde. Die
Werte stammen aus den Formularfeldern und aus den bereits ausgegebenen
WooCommerce-Blöcken – es gibt hier keine zweite Quelle und keine
eigene Rechnung. Beträge stehen ausschließlich in der
Bestellübersicht darunter.
========================================================================== */
.fs24-co__recap {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 14px;
margin-bottom: 18px;
}
.fs24-recap__block {
padding: 14px 16px;
background: #fff;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-card-radius);
min-width: 0;
}
.fs24-recap__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
}
.fs24-recap__label {
font-size: .76rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--fs24-muted);
}
.fs24-recap__edit {
padding: 0;
background: none;
border: 0;
color: var(--accent-dark);
font-size: .8rem;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.fs24-recap__edit:hover {
color: var(--accent);
}
.fs24-recap__body {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.fs24-recap__line {
font-size: .9rem;
line-height: 1.45;
color: var(--ink);
overflow-wrap: anywhere;
}
/* ==========================================================================
SCHMALE BILDSCHIRME
========================================================================== */
@media (max-width: 860px) {
.fs24-steps__label-long {
display: none;
}
.fs24-steps__label-short {
display: inline;
}
.fs24-co--wizard .fs24-steps {
gap: 6px;
}
.fs24-steps__item {
padding: 10px;
font-size: .84rem;
}
}
@media (max-width: 560px) {
.fs24-checkoutpage {
padding: 24px 0 56px;
}
.fs24-checkoutpage__inner {
width: calc(100% - 28px);
}
.fs24-steps__item {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 9px 10px;
font-size: .78rem;
}
.fs24-steps__num {
width: 22px;
height: 22px;
font-size: .74rem;
}
/* Volle Breite und untereinander: Auf dem Telefon ist der Daumenweg
kurz, nebeneinanderstehende Schaltflächen wären beide zu schmal. */
.fs24-step__nav {
flex-direction: column-reverse;
gap: 10px;
}
.fs24-step__nav .fs24-btn {
width: 100%;
margin-left: 0;
}
.fs24-co__recap {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==========================================================================
FELDPAARE IN SCHRITT 1
--------------------------------------------------------------------------
WooCommerce vergibt an alle Adressfelder "form-row-wide", und die Regel
weiter oben spannt die dadurch über beide Spalten. Für vier davon ist
das Verschwendung: Postleitzahl und Ort gehören nebeneinander, ebenso
Land und Telefon. Auf schmalen Bildschirmen fällt das Raster ohnehin auf
eine Spalte zurück.
========================================================================== */
.fs24-co__fields #billing_postcode_field,
.fs24-co__fields #billing_city_field,
.fs24-co__fields #billing_country_field,
.fs24-co__fields #billing_phone_field,
.fs24-co__fields #shipping_postcode_field,
.fs24-co__fields #shipping_city_field,
.fs24-co__fields #shipping_country_field {
grid-column: auto;
}
/* ==========================================================================
REIHENFOLGE IN SCHRITT 3
--------------------------------------------------------------------------
Germanized gibt die rechtliche Zustimmung unmittelbar nach dem
Zahlungsblock aus, also VOR der Bestellübersicht. An dieser
Hook-Reihenfolge wird bewusst nichts geändert – sie ist von Germanized
so gesetzt (WC_GZD_Hook_Priorities::force_hook_order) und trägt die
Button-Lösung.
Gedreht wird nur die ANZEIGE innerhalb unseres eigenen Abschnitts, damit
die Abfolge der Vorgabe entspricht: erst sehen, was man kauft, dann
zustimmen, dann kaufen. Das Markup und damit die Reihenfolge beim
Absenden bleiben unverändert.
========================================================================== */
.fs24-co--wizard #fs24-step-pruefen {
display: flex;
flex-direction: column;
}
.fs24-co--wizard #fs24-step-pruefen > * {
order: 3;
}
.fs24-co--wizard #fs24-step-pruefen > .fs24-step__title {
order: 0;
}
.fs24-co--wizard #fs24-step-pruefen > .fs24-co__recap {
order: 1;
}
.fs24-co--wizard #fs24-step-pruefen > .woocommerce-checkout-review-order-table {
order: 2;
}
.fs24-co--wizard #fs24-step-pruefen > .wc-gzd-checkbox-placeholder {
order: 4;
}
.fs24-co--wizard #fs24-step-pruefen > .wc-gzd-order-submit {
order: 5;
}
.fs24-co--wizard #fs24-step-pruefen > .fs24-co__consent-hint {
order: 6;
}
.fs24-co--wizard #fs24-step-pruefen > .ppc-button-wrapper {
order: 7;
}
.fs24-co--wizard #fs24-step-pruefen > .fs24-step__nav {
order: 8;
}
/* Die Zustimmung ist rechtlich der wichtigste Satz auf dieser Seite und
bekommt deshalb eine eigene Fläche statt einer Zeile im Fließtext.
Der Wortlaut selbst stammt unverändert aus Germanized – auch die
Sie-Ansprache, die dort bewusst steht. */
.fs24-co .wc-gzd-checkbox-placeholder-legal {
padding: 16px 18px;
margin: 16px 0 0;
background: #fff;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-card-radius);
}
.fs24-co .wc-gzd-checkbox-placeholder-legal p.checkbox-legal {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0;
}
.fs24-co .wc-gzd-checkbox-placeholder-legal label.checkbox {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0;
font-size: .88rem;
line-height: 1.55;
cursor: pointer;
}
/* Größer als die Vorgabe des Browsers: Das Kästchen trägt eine
Pflichtbestätigung und muss auf dem Telefon sicher zu treffen sein. */
.fs24-co .wc-gzd-checkbox-placeholder-legal input[type="checkbox"] {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin: 1px 0 0;
accent-color: var(--accent);
cursor: pointer;
}
.fs24-co .wc-gzd-order-submit {
margin-top: 16px;
}
/* ==========================================================================
GESPERRTER BESTELLBUTTON
--------------------------------------------------------------------------
Sichtbar, aber eindeutig nicht auslösbar: Der Knopf verliert die
Markenfarbe und den Zeiger. Gesperrt wird er über das echte
disabled-Attribut (siehe checkout-steps.js) – Tastatur und Maus sind
damit gleichermaßen ausgeschlossen, nicht nur optisch.
========================================================================== */
.fs24-co #place_order:disabled,
.fs24-co button#place_order:disabled,
.fs24-co #place_order[aria-disabled="true"] {
background: var(--fs24-soft);
border-color: var(--fs24-line);
color: var(--fs24-muted);
cursor: not-allowed;
}
.fs24-co #place_order:disabled:hover,
.fs24-co button#place_order:disabled:hover {
background: var(--fs24-soft);
border-color: var(--fs24-line);
color: var(--fs24-muted);
}
.fs24-co__consent-hint {
margin: 10px 0 0;
color: var(--fs24-muted);
font-size: .85rem;
line-height: 1.5;
}
/* ==========================================================================
ABWEICHENDE LIEFERADRESSE UND BESTELLHINWEISE
========================================================================== */
.fs24-co .woocommerce-shipping-fields,
.fs24-co .woocommerce-additional-fields {
padding: 18px 22px;
margin-top: 18px;
background: #fff;
border: 1px solid var(--fs24-line);
border-radius: var(--fs24-card-radius);
}
.fs24-co .woocommerce-shipping-fields h3 {
margin: 0;
font-size: 1rem;
}
.fs24-co .woocommerce-shipping-fields h3 label {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
font-size: .97rem;
font-weight: 700;
color: var(--ink);
cursor: pointer;
}
.fs24-co .woocommerce-shipping-fields h3 input[type="checkbox"] {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin: 0;
accent-color: var(--accent);
cursor: pointer;
}
.fs24-co .woocommerce-shipping-fields .shipping_address {
margin-top: 16px;
}
.fs24-co .woocommerce-additional-fields h3 {
margin: 0 0 4px;
font-size: 1rem;
font-weight: 700;
color: var(--ink);
}
/* Das Feld für Bestellhinweise war so hoch wie ein halber Bildschirm,
obwohl dort meist nichts oder ein Satz steht. Es wächst jetzt mit dem
Inhalt statt von vornherein Platz zu beanspruchen. */
.fs24-co .woocommerce-additional-fields textarea,
.fs24-co__fields textarea {
min-height: 76px;
}
/* ==========================================================================
ÜBERSCHRIFT DES ZAHLUNGSBLOCKS
--------------------------------------------------------------------------
"Zahlungsart auswählen" kommt von Germanized und steht zwischen den
Karten. Sie bekommt dasselbe Gewicht wie die übrigen Abschnittstitel.
========================================================================== */
.fs24-co #order_payment_heading {
margin: 18px 0 10px;
font-size: 1.08rem;
font-weight: 700;
color: var(--ink);
}
/* ==========================================================================
BESTELLÜBERSICHT ALS KARTE
========================================================================== */
.fs24-co .woocommerce-checkout-review-order-table.fs24-co__summary {
background: #fff;
}
/* Nachlauf hinter der Bestellübersicht (Lieferzeit-Zeile aus einem
Snippet). Er steht im Markup außerhalb der Abschnitte und gehört
inhaltlich zu Schritt 3; ohne Assistent bleibt er durchgehend sichtbar. */
.fs24-co--wizard:not([data-fs24-step="pruefen"]) .fs24-co__after-review {
display: none;
}
.fs24-co__after-review {
margin-top: 14px;
color: var(--fs24-muted);
font-size: .88rem;
}
/* Die Gesamtsumme der Kasse folgt jetzt der Summenkarte des Warenkorbs:
Absatz und Schriftgewicht statt schwarzem Doppelstrich. */
.fs24-co__sum-row--total {
border-top: 1px solid var(--fs24-line);
padding-top: 16px;
margin-top: 8px;
}
/* ==========================================================================
„WIRD NEU BERECHNET"
--------------------------------------------------------------------------
Zwischen dem Auslösen einer Checkout-Aktualisierung und ihrem Ergebnis
zeigt die Bestellübersicht noch die vorherige Summe. Gemessen waren das
nach einem Wechsel der Versandart drei bis vier Sekunden, in denen dort
1.617,90 € statt 1.548,90 € stand.
In dieser Zeit tritt die Übersicht zurück und bekommt eine Zeile, die
sagt, was los ist; der Bestellbutton ist währenddessen gesperrt (siehe
checkout-steps.js). Nichts wird versteckt – die Zahl bleibt lesbar, sie
gibt sich nur nicht als endgültig aus.
========================================================================== */
/* Auch die Zusammenfassung oben: Sie liest die gewählte Versandart direkt
aus dem Formular und ist damit SOFORT aktuell, während die Tabelle erst
nach der Antwort vom Server nachzieht. Genau dieser Vorsprung war das
gemeldete Bild – oben schon "Abholung vor Ort", unten noch 69,00 €.
Solange gerechnet wird, treten deshalb beide zurück. */
.fs24-co--rechnet .fs24-co__recap,
.fs24-co--rechnet .woocommerce-checkout-review-order-table {
position: relative;
opacity: .55;
transition: opacity .15s ease;
}
.fs24-co--rechnet .woocommerce-checkout-review-order-table::after {
content: attr(data-fs24-rechnet);
position: absolute;
inset: auto 0 0 0;
padding: 8px 22px;
background: var(--fs24-soft);
border-top: 1px solid var(--fs24-line);
border-radius: 0 0 var(--fs24-card-radius) var(--fs24-card-radius);
color: var(--fs24-muted);
font-size: .82rem;
font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
.fs24-co--rechnet .fs24-co__recap,
.fs24-co--rechnet .woocommerce-checkout-review-order-table {
transition: none;
}
}
/* ==========================================================================
ABGEBROCHENE NEUBERECHNUNG
--------------------------------------------------------------------------
WooCommerces "update_order_review" hat keinen Fehlerfall (dessen
$.ajax() kennt weder error- noch complete-Handler). Bricht die Anfrage
ab, sagt von Haus aus niemand etwas. Diese Meldung tut es – mit einem
Weg zurück statt einer Sackgasse.
========================================================================== */
.fs24-co__updatefehler {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 18px;
padding: 14px 18px;
margin: 0 0 20px;
background: #fef2f2;
border: 1px solid #fecaca;
border-left: 4px solid #b91c1c;
border-radius: var(--fs24-card-radius);
}
.fs24-co__updatefehler[hidden] {
display: none;
}
.fs24-co__updatefehler-text {
flex: 1 1 260px;
margin: 0;
color: #7f1d1d;
font-size: .9rem;
line-height: 1.5;
}
.fs24-co__updatefehler .fs24-btn {
min-height: 40px;
padding: 0 16px;
font-size: .88rem;
}
/* Der Anmeldehinweis steht über dem Kassenformular – dort gibt WooCommerce
ihn aus, und dort gehört er auch hin: sein Anmeldeformular ist ein
eigenes