/* alexzerr.art — Kopie von xxl-art css/cart_3.css, unten ein alexzerr-Block (helle Fassung). */ /* ========================================================================== cart.css — alles zum Warenkorb in einer Datei -------------------------------------------------------------------------- Ersetzt: cart_button.css, cart_2.css, cart-amount.css, cart-layer-stagger.css MOBILE FIRST. Der Ausgangszustand gilt fuer das Handy, alles Weitere kommt per min-width dazu. Es gibt genau einen Umbruch: ab 761px Seitenansicht wird zweispaltig, Artikelzeile dreispaltig Der Layer bleibt immer zweispaltig — er ist auch auf dem Desktop schmal. INHALT 1 Warenkorb-Button .btn-swallow, .qty (Basis), .cart-sold 2 Design-Tokens :root, .cart--layer, .cart--page 3 Artikelzeile .cartItem und Kinder 4 Umbruch ab 761px 5 Summen und Buttons .cartSummary, .buttons-container 6 Mengenwaehler im Korb .cart-qty (setzt auf .qty aus Teil 1 auf) 7 Einflug des Layers .stagger-* REIHENFOLGE BEACHTEN: Teil 1 muss vor Teil 6 stehen. .qty und .cart-qty sind gleich spezifisch, es entscheidet also die Position — die Korb-Variante muss die Basis ueberschreiben koennen, nicht umgekehrt. ========================================================================== */ /* ========================================================================== 1 WARENKORB-BUTTON ========================================================================== */ /* ========================================================================== cart-button.css — animierter "In den Warenkorb"-Button -------------------------------------------------------------------------- Die ganze Choreo hängt an EINER Größe: --sw-h (Buttonhöhe). Der Puck ist genau --sw-h breit und fährt von links (0) nach rechts (100% - --sw-h). Drei clip-paths sind an dieselbe Strecke gekoppelt: Grün linke Kante = Puck linke Kante → wird am Ende zum Kreis Text alt linke Kante = Puck rechte Kante → wird vom Wagen gefressen Text neu rechte Kante = Puck linke Kante → wird dahinter freigelegt Gleiche Dauer + gleiche Kurve = die Kanten sitzen in jedem Frame exakt auf dem Puck, egal wie du --sw-dur oder das Easing änderst. Kein JS-Messen. ========================================================================== */ .btn-swallow { /* --- Stellschrauben --- */ --sw-h: 3.25rem; /* Höhe = Durchmesser der Bubble */ --sw-pad: 1.5rem; /* Innenabstand auf der Textseite */ --sw-ok: #89c106; --sw-ok-2: #89c106; --sw-ok-rgb: 137, 193, 6; /* dasselbe Grün für den Halo */ --sw-ok-ink: #5c8104; /* dunkler, für Text auf Weiß */ --sw-rest: #e4e7ea; /* liegt unter dem Grün */ --sw-rest-fg: #1f2937; --sw-err: #dc2626; --sw-label: 1.2rem; /* Schriftgröße der beiden Texte */ --sw-cart-home: .5rem; /* Ruheposition des Wagens, rechts der Puckmitte */ --sw-cart-x: var(--sw-cart-home); /* aktueller Versatz, Hover und Fahrt ändern ihn */ --sw-dur: 620ms; /* muss zu CFG.travel im JS passen */ --sw-ease: cubic-bezier(.84, -0.14, .3, 1); /* holt vor dem Start leicht aus */ --sw-pop: cubic-bezier(.84, 1.56, .64, 1); position: relative; display: inline-flex; align-items: center; height: var(--sw-h); padding: 0 var(--sw-pad) 0 var(--sw-h); border: 0; border-radius: 999px; background: var(--sw-rest); color: #fff; font: 500 1rem/1 inherit; font-family: var(--font-display); letter-spacing: .01em; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .18s var(--sw-ease); width: min(100%, 420px); max-width: 90vw; } .btn-swallow:active { transform: scale(.98); } .btn-swallow:focus-visible { outline: 2px solid var(--sw-ok-ink); outline-offset: 3px; } /* Breite: unsichtbarer Platzhalter mit beiden Texten übereinander. Beide Zustände haben denselben Gesamt-Innenabstand (--sw-h + --sw-pad), deshalb reicht eine Breite für beide. */ .btn-swallow__size { display: grid; visibility: hidden; font-size: var(--sw-label); /* Bei fester Buttonbreite darf der Platzhalter nichts aufschieben: ohne min-width kann ein Flex-Kind nicht unter seine Textbreite schrumpfen und würde über den Button hinausragen. */ min-width: 0; overflow: hidden; } .btn-swallow__size > i { grid-area: 1 / 1; white-space: nowrap; font-style: normal; } /* --- Der grüne Layer ----------------------------------------------------- */ .btn-swallow__fill { position: absolute; /* Bewusst die Langform statt inset: 0. left ist die animierte Eigenschaft, und eine Transition von auto auf eine Länge läuft nicht. Ausgeschrieben steht dort garantiert eine 0 als Startwert. */ top: 0; right: 0; bottom: 0; left: 0; z-index: 0; border-radius: 999px; background: linear-gradient(180deg, var(--sw-ok-2), var(--sw-ok)); transition: left var(--sw-dur) var(--sw-ease), background-color .25s; } .btn-swallow:hover .btn-swallow__fill { filter: brightness(1.07); } .btn-swallow.is-run:hover .btn-swallow__fill { filter: none; } /* Nur die linke Kante wandert. Weil inset: 0 auch right: 0 gesetzt hat, bleibt die rechte Kante von allein stehen und die Breite ergibt sich — eine einzige animierte Eigenschaft statt einer Form. Vorher lief das über clip-path: inset(… round 999px). Das ist die einzige Stelle im ganzen CSS mit einem Radius in der Form, und genau die sprang. Formen mit Border-Radius interpolieren nicht überall zuverlässig; scheitert es, schaltet der Browser den Wert diskret um — Sprung zur Hälfte der Dauer statt Bewegung. left ist eine schlichte Länge und animiert überall, so wie der Puck darüber, der ja auch bei dir sauber fährt. */ .btn-swallow.is-run .btn-swallow__fill { left: calc(100% - var(--sw-h)); } /* --- Die zwei Textebenen ------------------------------------------------- */ .btn-swallow__lyr { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; white-space: nowrap; border-radius: inherit; overflow: hidden; /* längere Fehlertexte bluten nicht raus */ transition: clip-path var(--sw-dur) var(--sw-ease), transform var(--sw-dur) var(--sw-ease); justify-content: center; font-size: var(--sw-label); } .btn-swallow__lyr--idle { padding: 0 var(--sw-pad) 0 var(--sw-h); clip-path: inset(0 0 0 var(--sw-h)); padding-bottom: 3px; /* Startkante = rechte Puckkante */ } .btn-swallow__lyr--done { padding: 0 var(--sw-h) 0 var(--sw-pad); color: var(--sw-rest-fg); clip-path: inset(0 100% 0 0); /* komplett zugedeckt */ } .btn-swallow.is-run .btn-swallow__lyr--idle { clip-path: inset(0 0 0 100%); transform: translateX(-12px); /* wird leicht eingesogen */ } .btn-swallow.is-run .btn-swallow__lyr--done { clip-path: inset(0 var(--sw-h) 0 0); } /* --- Der Puck: fährt die Strecke, trägt die Icons ------------------------ */ .btn-swallow__puck { position: absolute; z-index: 2; top: 0; left: 0; width: var(--sw-h); height: var(--sw-h); display: grid; place-items: center; border-radius: 999px; transition: left var(--sw-dur) var(--sw-ease); } .btn-swallow.is-run .btn-swallow__puck { left: calc(100% - var(--sw-h)); } .btn-swallow.is-done .btn-swallow__puck { animation: sw-land .55s var(--sw-pop); } @keyframes sw-land { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--sw-ok-rgb), .55); } 40% { transform: scale(1.14); } 100% { transform: scale(1); box-shadow: 0 0 0 16px rgba(var(--sw-ok-rgb), 0); } } /* --- Icons im Puck ------------------------------------------------------- */ .btn-swallow__puck > svg { grid-area: 1 / 1; width: 2.5em; height: 2.5em; overflow: visible; transition: opacity .2s var(--sw-ease), transform .35s var(--sw-pop), translate .35s var(--sw-pop); } /* Der Wagen sitzt nicht mittig im Puck, sondern etwas rechts davon. Das war vorher margin-left: 1rem — jetzt translate, aus zwei Gründen: margin ist Layout und lässt sich nicht sauber wegtransitionieren, und der Hover-Anlauf unten braucht ohnehin dieselbe Achse. Zur Umrechnung: 1rem margin ergab 8px sichtbaren Versatz, nicht 16. Beim Zentrieren rechnet der Grid die Marge mit, verschoben wird also nur um die Hälfte. .5rem translate sieht deshalb genauso aus wie 1rem margin vorher. */ .btn-swallow__cart { fill: currentColor; /* Bewusst translate und nicht transform: die Zustände weiter unten benutzen transform für Drehung und Skalierung. Getrennte Eigenschaften überschreiben sich nicht gegenseitig, beide animieren zusammen. */ translate: var(--sw-cart-x) 0; } /* Anlauf beim Überfahren: der Wagen rückt ein Stück vor und legt sich leicht zurück, als würde er gleich losfahren. Nur im Ruhezustand — während der Fahrt und danach hat der Wagen anderes zu tun. */ .btn-swallow:not(.is-run):not(.is-done):not(.is-final):hover .btn-swallow__cart { --sw-cart-x: calc(var(--sw-cart-home) + 7px); transform: rotate(-7deg); } /* Die Räder laufen einen Tick weiter als der Korb — das ist der Unterschied zwischen Anfahren und Verschieben. */ .btn-swallow:not(.is-run):not(.is-done):not(.is-final):hover .btn-swallow__cart-wheels { transform: translateX(1.4px); transition: transform .35s var(--sw-pop); } /* Sobald es losgeht, zieht sich der Wagen in die Puckmitte zurück. Sonst ragt er am rechten Ende der Strecke über den Rand der Bubble hinaus — bei 2.5em Icon und 1rem Versatz genau 2px, und die sieht man, weil dort nichts mehr clippt. */ .btn-swallow.is-run .btn-swallow__cart, .btn-swallow.is-waiting .btn-swallow__cart, .btn-swallow.is-done .btn-swallow__cart { --sw-cart-x: 0; } .btn-swallow__spin, .btn-swallow__check { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; } .btn-swallow__spin circle { stroke-dasharray: 55 28; } .btn-swallow.is-run .btn-swallow__cart { transform: rotate(-6deg); } .btn-swallow.is-waiting .btn-swallow__cart { opacity: 0; transform: scale(.5); } .btn-swallow.is-waiting .btn-swallow__spin { opacity: 1; animation: sw-spin .75s linear infinite; } .btn-swallow.is-done .btn-swallow__cart { opacity: 0; transform: scale(.4) rotate(-20deg); } .btn-swallow.is-done .btn-swallow__spin { opacity: 0; } .btn-swallow.is-done .btn-swallow__check { opacity: 1; } /* Haken wird gezeichnet — pathLength="1" macht das unabhängig von der Pfadlänge */ .btn-swallow__tick { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s var(--sw-ease); } .btn-swallow.is-done .btn-swallow__tick { stroke-dashoffset: 0; transition-delay: .08s; } @keyframes sw-spin { to { transform: rotate(360deg); } } /* --- Schon im Warenkorb: derselbe Endzustand, aber ohne Einflug --------- Der fertige Zustand steht schon im HTML, deshalb läuft beim Seitenaufbau keine Transition. is-static hält zusätzlich die Lande-Animation an, sonst würde bei jedem Seitenaufbau jede Kachel einmal aufploppen. */ .btn-swallow.is-static .btn-swallow__puck { animation: none; } .btn-swallow.is-final { cursor: default; } a.btn-swallow { text-decoration: none; cursor: pointer; } a.btn-swallow:hover .btn-swallow__fill { filter: brightness(1.07); } /* Für einen Frame alle Übergänge aus. Wird gesetzt, wenn jemand im loop-Modus nochmal klickt, während der Haken noch steht: der Button springt hart auf Anfang, statt den Wagen sichtbar rückwärts fliegen zu lassen, und die Animation kann sauber neu starten. */ .btn-swallow.is-instant, .btn-swallow.is-instant *, .btn-swallow.is-instant .btn-swallow__fill { transition: none !important; animation: none !important; } /* --- Stückzahl am Icon --------------------------------------------------- */ .btn-swallow__badge { position: absolute; top: 0.85em; right: 0.01em; min-width: 1.35em; height: 1.35em; padding: 0 .3em; display: grid; place-items: center; border-radius: 999px; background: #fff; color: var(--sw-ok-ink); font-size: 0.82em; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .3s var(--sw-pop); } /* Leer = nichts im Korb. Das JS setzt einfach den Text, den Rest macht CSS. */ .btn-swallow__badge:empty { display: none; } .btn-swallow__badge.is-bumped { animation: sw-badge .45s var(--sw-pop); } @keyframes sw-badge { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } } /* --- Fehlerfall ---------------------------------------------------------- */ .btn-swallow.is-err { animation: sw-shake .4s var(--sw-ease); } .btn-swallow.is-err .btn-swallow__fill { background: var(--sw-err); } @keyframes sw-shake { 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-3px); } 100% { transform: none; } } /* --- Farbvarianten ------------------------------------------------------- */ .btn-swallow--ink { --sw-rest: #14161a; --sw-rest-fg: #f3f4f6; } .btn-swallow--paper { --sw-rest: #fff; --sw-rest-fg: #14161a; box-shadow: inset 0 0 0 1px rgba(20,22,26,.14); } /* --- Größen (statt inline style) ----------------------------------------- */ .btn-swallow--sm { --sw-h: 2.75rem; --sw-pad: 1.15rem; font-size: .9rem; } .btn-swallow--lg { --sw-h: 3.75rem; --sw-pad: 1.75rem; font-size: 1.15rem; } /* Über die volle Spaltenbreite, z.B. in der Produktkachel. Der Platzhalter muss dann mitwachsen, sonst sitzt der Text links. */ .btn-swallow--block { display: flex; width: 100%; justify-content: flex-start; } .btn-swallow--block .btn-swallow__size { flex: 1; } /* --- Mengenwähler -------------------------------------------------------- Steht im selben Formular wie der Button. Die Höhen sind bewusst eigene Variablen und nicht --sw-h: der Wähler ist ein Nachbar des Buttons, kein Teil von ihm, und --sw-h steuert im Button die halbe Choreografie mit. */ .cart-form--qty { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .qty { --qty-h: 3.25rem; display: inline-flex; align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(20,22,26,.18); flex: none; font-family: var(--font-display); } .qty--sm { --qty-h: 2.75rem; font-size: .9rem; } .qty--lg { --qty-h: 3.75rem; font-size: 1.15rem; } .qty__btn { height: 28px; width: 28px; border: 0; display: flex; border-radius: 100px; background: rgba(255,255,255,0); color: inherit; cursor: pointer; justify-content: center; align-items: center; font-size: var(--text-base); transition:0.3s ease; } .qty__btn:hover { background: rgba(255,255,255,0.1); } .qty__btn:disabled { opacity: .3; cursor: default; background: transparent; } .qty__btn:focus-visible { outline: 2px solid var(--sw-ok-ink); outline-offset: -2px; } .qty__input { width: 4rem; height: 100%; border: 0; background: transparent; color: inherit; text-align: center; font: 500 1em/1 inherit; font-family: inherit; font-variant-numeric: tabular-nums; -moz-appearance: textfield; padding:0px; font-size: 0.8rem; } .qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty__input:focus { outline: 0; } .qty__input:focus-visible { outline: 2px solid var(--sw-ok-ink); outline-offset: -2px; border-radius: 4px; } /* --- Verkauft: gleiche Silhouette, aber nichts zum Anklicken ------------- */ .cart-sold { display: inline-flex; align-items: center; gap: .6em; height: 3.25rem; padding: 0 1.5rem; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px rgba(20,22,26,.18); color: #6b7280; font: 500 1rem/1 inherit; font-family: inherit; letter-spacing: .01em; cursor: default; } .cart-sold__icon { width: 1.2em; height: 1.2em; flex: none; opacity: .8; } /* --- Barrierefreiheit ---------------------------------------------------- */ .btn-swallow__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .btn-swallow, .btn-swallow * { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .btn-swallow__tick { stroke-dashoffset: 0; } } /* ========================================================================== 2 DESIGN-TOKENS UND WARENKORB ========================================================================== */ /* ===================== Quiet Luxury – neutrales, zurückhaltendes UI ===================== */ :root{ /* Light */ --bg: #f6f7f9; --surface: #ffffff; --card: rgba(255,255,255,0.05); --text: rgb(255, 255, 255); --muted: rgba(255, 255, 255, 0.8); --border: rgba(255, 255, 255, 0.3); --accent: rgb(255, 255, 255); /* sehr zurückhaltend genutzt */ --ring: rgb(255, 255, 255); /* Basismetriken (Page) */ --thumb: 84px; /* mobil klein, ab 761px groesser */ --gap: 14px; --pad: 14px; --radius: 12px; --fs-title: 14px; --fs-meta: 12px; --fs-price: 14px; --fs-unit: 12px; --fs-summary:14px; --fs-grand: 17px; --card-backdrop-blur: 20px; --shadow-subtle: 0 1px 2px rgba(0,0,0,.02); --hairline: inset 0 0 0 .5px var(--border); --loading-gradient: linear-gradient(360deg, rgba(255, 255, 255, 0.05) 0%, rgb(211 211 211 / 50%) 50%, rgb(255 255 255 / 20%) 100%); } /* Layout-Container */ .cart{ color: var(--text); } /* Mobile first: eine Spalte. Die zweite kommt weiter unten per min-width dazu, sobald Platz dafuer da ist. */ .cart-inner{ margin: 0 auto; max-width: 1200px; display: grid; gap: 14px; grid-template-columns: 1fr; } /* Kompaktere Metriken im Layer */ .cart--layer{ --gap: 10px; --pad: 10px; --radius: 10px; --fs-title: 13px; --fs-meta: 11.5px; --fs-price: 12.5px; --fs-unit: 11.5px; --fs-summary: 12.5px; --fs-grand: 15.5px; padding: 10px; } .cart--page{ padding: 12px; width:100%; } /* Liste */ .cartList{ display:grid; gap: 10px; } /* ====================================================================== ARTIKELZEILE Liste mit Trennlinien statt Karten. Vorher hatte jede Zeile einen eigenen Hintergrund, Radius, Blur und Innenabstand — und darin steckte der Waehler nochmal in seinem eigenen Kasten. Zwei Rahmen um dieselbe Sache. Jetzt traegt nur noch die Trennlinie die Struktur. Aufteilung, auf jeder Breite gleich: [Bild] Titel Preis Meta [− 2 +] [x] Der Waehler sitzt unter dem Preis statt daneben, dadurch braucht die rechte Spalte nur noch die Breite des Steppers. ====================================================================== */ .cartItem{ display: grid; grid-template-columns: var(--thumb) minmax(0, 1fr) auto; grid-template-areas: "thumb body tail"; gap: var(--gap); align-items: start; padding: 14px 0; border-bottom: 1px solid var(--border); } .cartItem:last-child{ border-bottom: 0; } .cartItem-thumb{ grid-area: thumb; width: var(--thumb); height: var(--thumb); overflow: hidden; display: flex; justify-content: center; align-items: flex-start; } .cartItem-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transform: translateZ(0); } .cartItem-thumb img.landscape{ width:100% !important; height:auto !important; } .cartItem-thumb img.portrait{ width:auto !important; height:100% !important; } .cartItem-body{ grid-area: body; display: grid; gap: 4px; align-content: start; min-width: 0; } .cartItem-title{ margin: 0; text-align: left; font-weight: 700; letter-spacing: .1px; font-size: var(--fs-title); line-height: 1.35; color: inherit; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cart-badge{ display:inline-flex; align-items:center; gap:6px; font-size: 11px; letter-spacing:.04em; text-transform: uppercase; padding: 0; border-radius: 999px; color: var(--muted); background: transparent; } .cart-meta{ color: var(--muted); font-size: var(--fs-meta); display:flex; gap:10px; flex-wrap:wrap; } .cart-meta.tax{ justify-content: flex-end; } /* Rechte Spalte: Preis oben, darunter Waehler und Entfernen auf einer Linie. Als Grid, weil die drei im HTML in anderer Reihenfolge stehen als sie erscheinen sollen — mit Bereichsnamen braucht es dafuer keine zusaetzliche Verschachtelung im Markup. */ .cartItem-tail{ grid-area: tail; display: grid; grid-template-areas: "price price" "qty remove"; grid-template-columns: auto auto; justify-content: end; align-items: center; gap: 8px; } .cart-price{ grid-area: price; justify-self: end; text-align: right; font-size: var(--fs-price); font-weight: 700; letter-spacing: .1px; } .cart-price .unit{ display:block; font-size: var(--fs-unit); color: var(--muted); font-weight: 450; letter-spacing:.1px; } .price-old{ display: block; text-decoration: line-through; color: var(--muted); font-weight: 500; } .price-new{ color: var(--text); } .discount-percent{ display: block; color:red; } .btn-remove{ display:inline-flex; padding:6px; border-radius: 8px; background: transparent; } .btn-remove:hover{ background: rgba(0,0,0,.035); } /* Coupon/Felder – zurückhaltend */ .coupon{ display: flex !important; gap: 8px; align-items: center; justify-content: center; margin-bottom: 15px !important; width: 100%; /* Sicherstellen, dass der Container die volle Breite nutzt */ max-width: 100%; /* Verhindert Überlaufen */ box-sizing: border-box; } .coupon input { max-width: 200px; min-width: 0; padding: 0px 15px; border: 0px solid #dddddd; border-radius: 6px; background: #646464; color: #ffffff; font-size: 20px; font-weight: 600; text-align: center; outline: none; margin: 0px; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); box-sizing: border-box; } input:focus, textarea:focus { border-color: var(--theme_color); box-shadow: 0 4px 12px var(--theme_color_shadow, rgba(0, 184, 182, 0.2)); } input::placeholder, textarea::placeholder { color: #999999; /* Mittelgrauer Platzhalter */ } .btn-ghost{ appearance:none; border:0; box-shadow: var(--hairline); background: transparent; color: var(--text); border-radius: 50px; padding: 9px 12px; font-weight:600; cursor:pointer; background-color:black; color:white; transition:0.3s ease; } .btn-ghost:hover{ background-color:white; color:black; } .btn-ghost:focus-visible{ outline: 3px solid var(--ring); outline-offset: 2px; } /* Summary */ .cartSummary{ background: none; border-radius: var(--radius); /* box-shadow: var(--hairline); */ padding: var(--pad); display:grid; gap: 6px; color: white; margin:10px 0; backdrop-filter: blur(var(--card-backdrop-blur)); justify-content: end; } .cartSummary.layer{ justify-content: unset; grid-template-columns: unset; } .cart-inner.layer, .cart-inner.checkout{ grid-template-columns: unset; } .cart-inner.checkout{ top: 130px; position: sticky; } .button-checkout-cart{ position:sticky; bottom:20px; padding: 10px;} .cart--layer .cartSummary{ bottom: 0; } .sum-row{ display:flex; justify-content: space-between; font-size: var(--fs-summary); gap: 5em;} .sum-row span:last-child{ font-variant-numeric: tabular-nums; } .sum-grand{ font-weight: 800; font-size: var(--fs-grand); letter-spacing:.1px; } /* Infos (bestehend), dezenter */ .cart-info { display: none; gap: 20px; align-items: center; justify-content: center; height: 40px; text-align: center; background: var(--card); box-shadow: var(--hairline); border-radius: 8px; margin-bottom: 8px; overflow: hidden; /* Verhindert Überlappung während Animation */ } .cart--info-product-deleted { /* display: flex; Standardmäßig flex, wird nur durch display: none überschrieben */ } .cart--info-product-deleted.show, .cart--info-product-added.show { display: flex; animation: slideDown 0.3s ease-in-out forwards; } .cart--info-product-deleted.hide, .cart--info-product-added.hide { display: none; animation: slideUp 0.3s ease-in-out forwards; } .cart--info-product-added img{ width:20px; } @keyframes slideDown { from { height: 0; opacity: 0; } to { height: 40px; opacity: 1; } } @keyframes slideUp { from { height: 40px; opacity: 1; } to { height: 0; opacity: 0; } } /* Stabilisierung der Kinderlemente */ .cart--info-product-deleted span { line-height: 40px; /* Konsistente vertikale Ausrichtung */ display: inline-flex; /* Verhindert Sprünge durch Textausrichtung */ align-items: center; } .cart--info-product-deleted img { width: 45px; padding: 10px; flex-shrink: 0; /* Verhindert Verzerrung des Bildes */ } /* --------------------------------------------------------------------- Ab hier wird breiter, nicht schmaler. Der Ausgangszustand oben gilt fuer das Handy. Die Artikelzeile braucht hier nichts mehr: sie hat auf jeder Breite dieselbe Aufteilung, weil die rechte Spalte nur noch so breit ist wie der Stepper. Nur der Seitenrahmen bekommt seine zweite Spalte. --------------------------------------------------------------------- */ @media (min-width: 761px){ .cart-inner{ grid-template-columns: 2fr 1fr; } .cartSummary{ justify-content: flex-end; } .cart--page{ --thumb: 200px; } } .buttons-container{ width: 100%; margin: 0 auto; display: flex; max-width: 500px; flex-direction: column; align-content: center; justify-content: center; } .express_checkout_title_box{ display: flex; justify-content: center; align-items: center; padding: 10px 0; text-align: center; } .express_checkout_title_box .title{ font-size:11pt; padding: 0 15px; color:#a0a0a0; } .express_checkout_title_box:before, .express_checkout_title_box:after{ border-top: none; border-left: none; border-right: none; border-style: solid; content: ""; flex-grow: 1; width: unset; height: unset; border-width: 1px; border-color: 1px solid rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.3); } .express_checkout_title_box.layer:before, .express_checkout_title_box.layer:after{ border-color: 1px solid rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.3); } .title_box_cart{ display: flex; flex-direction: row; justify-content: space-between; align-content: center; align-items: center; } .title_box_cart .button_white{ font-size: 10pt; color: white; margin: 0px; padding: 5px 10px; background-color: var(--theme_color); } .title_box_cart .button_white:hover{ color: white !important; background-color: #007c7a !important; } .title_cart{ display: block; font-size: 15pt; text-transform: uppercase; display: block; font-size: 15pt; text-transform: uppercase; margin: 0px; } .paypal-express-button { position: relative; overflow: hidden; height: 190px; display: block; border-radius:20px; padding: 0 10px; } .paypal-express-button.layer { height: 156px; } /* Klasse für den Ladeeffekt */ .paypal-express-button.loading-gradient::before { content: ''; position: absolute; top: -100%; left: 0%; height: 200%; width: 100%; background: var(--loading-gradient); animation: gradientShift 2s linear infinite; z-index: 1; } @keyframes gradientShift { 0% { transform: translateY(-100px); } 50% { transform: translateY(100%); } 100% { transform: translateY(-100px); } } .paypal-express-button.paypal-button-rendered::before { display: none; } .paypal-express-button.paypal-button-rendered{ height:auto; border-radius:0px; } /* ========================================================================== cart-amount.css — Mengen-Stepper in der Warenkorbzeile -------------------------------------------------------------------------- Setzt auf .qty aus cart-button.css auf, das ist derselbe Baustein. Hier steht nur, was die Zeile im Warenkorb zusätzlich braucht: Anordnung, kleinere Maße und der Zustand während des Speicherns. ========================================================================== */ /* Der Waehler steht in der rechten Spalte unter dem Preis. Kein eigener Kasten drumherum — der Rahmen des Steppers selbst reicht als Abgrenzung. */ .cart-qty-form { grid-area: qty; display: contents; } /* Kompakter als im Produktbereich — in der Zeile ist wenig Platz. */ .cart-qty-title { font-size: var(--text-s); } .cart-qty { grid-area: qty; --qty-h: 2rem; font-size: .82rem; border: 1px solid var(--border); box-shadow: none; } .cart-qty .qty__btn { width: 1.9em; } .cart-qty .qty__input { width: 1.9em; } /* Während der Request läuft: Zeile leicht zurücknehmen, aber nicht sperren. Wer dreimal auf Plus klickt, soll das auch können — die Klicks werden gebündelt und als eine Zahl geschickt. */ .cartItem.is-busy .cart-price, .cartItem.is-busy .cart-qty { opacity: .55; transition: opacity .15s; } /* Reserviert keinen Platz, solange nichts drinsteht — sonst klafft unter jeder Zeile eine leere Zeile. */ .cart-qty__msg { grid-area: qty; grid-column: 1 / -1; justify-self: end; font-size: .74rem; color: #ff6b6b; text-align: right; } .cart-qty__msg:empty { display: none; } /* Der Entfernen-Knopf war vorher ein . Als