/** Shopify CDN: Minification failed

Line 416:101 Expected identifier but found "\"„\""
Line 416:144 Unterminated string token
Line 768:1 Expected "}" to go with "{"

**/
/* =====================================================================
   UpFone Theme  v1.0
   Premium, minimal, typography-first.
   ===================================================================== */

/* --- Reset --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
body{margin:0;padding:0;background:var(--color-bg);color:var(--color-fg);font-family:var(--font-body);font-size:16px;line-height:1.5;font-weight:400;overflow-x:hidden;max-width:100vw}
img,svg,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6,p{margin:0}
hr{border:0;border-top:1px solid var(--color-border);margin:0}

/* --- Typography ---------------------------------------------------- */
.t-display{font-family:var(--font-heading);font-weight:600;letter-spacing:-.025em;line-height:1.05}
.t-h1{font-family:var(--font-heading);font-weight:600;font-size:clamp(2.5rem,5vw,4.5rem);letter-spacing:-.025em;line-height:1.05}
.t-h2{font-family:var(--font-heading);font-weight:600;font-size:clamp(2rem,3.5vw,3rem);letter-spacing:-.02em;line-height:1.1}
.t-h3{font-family:var(--font-heading);font-weight:600;font-size:clamp(1.5rem,2.2vw,2rem);letter-spacing:-.015em;line-height:1.15}
.t-h4{font-family:var(--font-heading);font-weight:600;font-size:1.25rem;letter-spacing:-.01em;line-height:1.25}
.t-lead{font-size:clamp(1.125rem,1.4vw,1.375rem);line-height:1.45;color:var(--color-muted);font-weight:400}
.t-body{font-size:1rem;line-height:1.55}
.t-small{font-size:.875rem;line-height:1.5}
.t-eyebrow{font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted)}
.t-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.t-muted{color:var(--color-muted)}

/* --- Layout primitives -------------------------------------------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
@media (min-width:768px){.container{padding:0 40px}}
.section{padding:80px 0}
@media (min-width:768px){.section{padding:120px 0}}
.section--tight{padding:48px 0}
.section--surface{background:var(--color-surface)}
.section--inverse{background:var(--color-fg);color:var(--color-bg)}
.section--inverse .t-muted,.section--inverse .t-eyebrow{color:rgba(255,255,255,.6)}

.stack>*+*{margin-top:16px}
.stack-lg>*+*{margin-top:32px}
.stack-xl>*+*{margin-top:64px}

.grid{display:grid;gap:24px}
@media (min-width:768px){.grid{gap:32px}}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:767px){.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.grid--3,.grid--4{grid-template-columns:1fr}}

/* --- Buttons ------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:999px;font-weight:500;font-size:.9375rem;letter-spacing:-.005em;line-height:1;transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease;border:1px solid transparent;cursor:pointer;min-height:48px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--color-fg);color:var(--color-bg)}
.btn--primary:hover{background:#000}
.btn--ghost{background:transparent;color:var(--color-fg);border-color:var(--color-border)}
.btn--ghost:hover{border-color:var(--color-fg)}
.btn--link{padding:0;background:none;color:var(--color-fg);border-bottom:1px solid var(--color-fg);border-radius:0;min-height:auto;border:0;border-bottom:1px solid currentColor}
.btn--block{display:flex;width:100%}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}

/* --- Skip link ----------------------------------------------------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--color-fg);color:var(--color-bg);padding:12px 16px;z-index:1000}
.skip-link:focus{left:0}

/* --- Header -------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--color-border)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.site-header__logo{font-family:var(--font-heading);font-weight:600;font-size:1.125rem;letter-spacing:-.01em}
.site-nav{display:none}
@media (min-width:900px){.site-nav{display:flex;gap:32px}}
.site-nav a{font-size:.9375rem;color:var(--color-fg);padding:8px 0;position:relative}
.site-nav a:hover{color:var(--color-muted)}
.site-header__actions{display:flex;align-items:center;gap:16px}
.site-header__actions a,.site-header__actions button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--color-fg)}
.site-header__actions a:hover,.site-header__actions button:hover{background:var(--color-surface)}
.cart-count{position:absolute;top:6px;right:6px;background:var(--color-fg);color:var(--color-bg);font-size:10px;font-weight:600;border-radius:999px;padding:2px 6px;min-width:18px;text-align:center;line-height:1.2}

/* --- Announcement bar --------------------------------------------- */
.announcement{background:var(--color-fg);color:var(--color-bg);text-align:center;font-size:.8125rem;padding:10px 16px;letter-spacing:-.005em}

/* --- Footer -------------------------------------------------------- */
.site-footer{border-top:1px solid var(--color-border);padding:80px 0 32px;background:var(--color-bg)}
.site-footer h4{font-size:.9375rem;font-weight:500;margin-bottom:20px}
.site-footer ul a{display:block;padding:6px 0;color:var(--color-muted);font-size:.875rem}
.site-footer ul a:hover{color:var(--color-fg)}
.site-footer__bottom{margin-top:64px;padding-top:24px;border-top:1px solid var(--color-border);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:.8125rem;color:var(--color-muted)}

/* --- Hero ---------------------------------------------------------- */
.hero{padding:96px 0 64px;text-align:center}
@media (min-width:768px){.hero{padding:160px 0 96px}}
.hero__eyebrow{margin-bottom:20px}
.hero__title{max-width:880px;margin:0 auto}
.hero__lead{max-width:640px;margin:24px auto 0}
.hero__cta{margin-top:40px;display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero__media{margin-top:64px}
.hero__media img{width:100%;max-width:920px;margin:0 auto;border-radius:var(--radius)}

/* --- USP strip ----------------------------------------------------- */
.usp{border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);padding:32px 0}
.usp__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;align-items:center}
@media (max-width:767px){.usp__grid{grid-template-columns:repeat(2,1fr);gap:24px}}
.usp__item{display:flex;align-items:center;gap:12px;font-size:.875rem;color:var(--color-muted)}
.usp__item svg{flex-shrink:0;width:20px;height:20px}

/* --- Condition grades --------------------------------------------- */
.grades__intro{max-width:720px;margin:0 auto 64px;text-align:center}
.grade-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);padding:32px;height:100%;transition:border-color .15s ease,transform .15s ease}
.grade-card:hover{border-color:var(--color-fg);transform:translateY(-2px)}
.grade-card__badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.75rem;font-weight:500;background:var(--color-surface);margin-bottom:24px;letter-spacing:-.005em}
.grade-card__badge--neu{background:#0a0a0a;color:#fff}
.grade-card__badge--sehr-gut{background:#f5f5f7;color:#0a0a0a}
.grade-card__badge--gut{background:#fff;color:#0a0a0a;border:1px solid var(--color-border)}
.grade-card h3{margin-bottom:8px}
.grade-card p{color:var(--color-muted);font-size:.9375rem;line-height:1.55}
.grade-card__specs{margin-top:24px;padding-top:24px;border-top:1px solid var(--color-border);display:grid;gap:8px}
.grade-card__spec{display:flex;justify-content:space-between;font-size:.8125rem}
.grade-card__spec span:first-child{color:var(--color-muted)}

/* --- Process / Transparency steps --------------------------------- */
.process__list{counter-reset:step;display:grid;gap:48px;max-width:880px;margin:0 auto}
.process__item{counter-increment:step;display:grid;grid-template-columns:64px 1fr;gap:24px;align-items:start}
@media (max-width:767px){.process__item{grid-template-columns:48px 1fr;gap:16px}}
.process__item::before{content:"0" counter(step);font-family:var(--font-heading);font-weight:500;font-size:1.5rem;color:var(--color-muted);letter-spacing:-.01em}
.process__item h3{margin-bottom:8px}
.process__item p{color:var(--color-muted);font-size:1rem;line-height:1.6}

/* --- Battery quality (highlight) ---------------------------------- */
.battery{background:var(--color-fg);color:var(--color-bg);padding:120px 0;border-radius:var(--radius);margin:0 auto;max-width:calc(var(--container) - 48px)}
.battery__grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding:0 64px}
@media (max-width:899px){.battery__grid{grid-template-columns:1fr;gap:40px;padding:0 32px}}
.battery h2{color:#fff}
.battery__lead{color:rgba(255,255,255,.7);margin-top:24px;font-size:1.125rem;line-height:1.55}
.battery__metrics{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:48px}
.battery__metric{padding-top:16px;border-top:1px solid rgba(255,255,255,.2)}
.battery__metric strong{display:block;font-family:var(--font-heading);font-weight:600;font-size:2.5rem;letter-spacing:-.02em}
.battery__metric span{display:block;color:rgba(255,255,255,.6);font-size:.8125rem;text-transform:uppercase;letter-spacing:.1em;margin-top:4px}
.battery__visual{aspect-ratio:1/1;border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));display:flex;align-items:center;justify-content:center;overflow:hidden}
img.battery__visual{width:100%;height:100%;object-fit:cover;display:block;background:#000}

/* --- FAQ ----------------------------------------------------------- */
.faq{max-width:840px;margin:0 auto}
.faq__item{border-top:1px solid var(--color-border);padding:0}
.faq__item:last-child{border-bottom:1px solid var(--color-border)}
.faq__item summary{padding:24px 0;font-size:1.0625rem;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-size:1.5rem;font-weight:300;color:var(--color-muted);transition:transform .2s ease;flex-shrink:0}
.faq__item[open] summary::after{content:"−"}
.faq__body{padding:0 0 28px;color:var(--color-muted);line-height:1.6;max-width:680px}

/* --- Product card -------------------------------------------------- */
.product-card{display:block;border-radius:var(--radius);overflow:hidden;background:var(--color-bg);transition:transform .2s ease}
.product-card:hover{transform:translateY(-4px)}
.product-card__media{aspect-ratio:1/1;background:var(--color-surface);border-radius:var(--radius);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:12%}
.product-card__media img{width:100%;height:100%;object-fit:contain;transition:transform .4s ease}
.product-card:hover .product-card__media img{transform:scale(1.03)}
.product-card__body{padding:20px 4px 0}
.product-card__title{font-size:1.0625rem;font-weight:500;letter-spacing:-.01em}
.product-card__meta{color:var(--color-muted);font-size:.875rem;margin-top:4px}
.product-card__price{margin-top:12px;font-size:1rem;font-weight:500}
.product-card__price-from{color:var(--color-muted);font-weight:400;font-size:.8125rem;margin-right:4px}

/* --- Product page -------------------------------------------------- */
.pdp{padding:48px 0 96px}
.pdp__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:start}
@media (max-width:899px){.pdp__grid{grid-template-columns:1fr;gap:32px}}
.pdp__gallery{position:sticky;top:88px;min-width:0}
@media (max-width:899px){.pdp__gallery{position:static}}
.pdp__media-main{aspect-ratio:1/1;background:transparent;border-radius:var(--radius);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0}
.pdp__media-main img{width:100%;height:100%;object-fit:cover;display:block}
.pdp__thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px;width:100%}
@media (max-width:480px){.pdp__thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pdp__thumb{aspect-ratio:1/1;background:transparent;border-radius:calc(var(--radius) - 4px);padding:0;cursor:pointer;border:1px solid var(--color-border);transition:border-color .15s ease;overflow:hidden;min-width:0}
.pdp__thumb[aria-current="true"]{border-color:var(--color-fg)}
.pdp__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pdp{overflow-x:hidden}

.pdp__title{font-family:var(--font-heading);font-weight:600;font-size:clamp(1.875rem,3vw,2.5rem);letter-spacing:-.02em;line-height:1.1}
.pdp__subtitle{color:var(--color-muted);margin-top:8px}
.pdp__price{margin-top:24px;font-size:1.5rem;font-weight:500;letter-spacing:-.01em}
.pdp__price-old{color:var(--color-muted);text-decoration:line-through;margin-left:8px;font-size:1rem;font-weight:400}
.pdp__price-savings{display:inline-block;margin-left:8px;font-size:.8125rem;color:#0a8a3a;font-weight:500}

.pdp__section{margin-top:32px;padding-top:32px;border-top:1px solid var(--color-border)}
.pdp__section:first-of-type{border-top:0;padding-top:0;margin-top:32px}
.pdp__section-label{font-size:.8125rem;font-weight:500;letter-spacing:-.005em;margin-bottom:16px;color:var(--color-fg)}
.pdp__section-label small{color:var(--color-muted);font-weight:400;margin-left:8px}

.option-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:479px){.option-grid{grid-template-columns:repeat(2,1fr)}}
.option-pill{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer;background:var(--color-bg);transition:border-color .15s ease,background .15s ease;text-align:left}
.option-pill:hover{border-color:var(--color-fg)}
.option-pill input{position:absolute;opacity:0;pointer-events:none}
.option-pill input:checked+span+span,.option-pill input:checked~.option-pill__main{font-weight:500}
.option-pill[data-checked="true"]{border-color:var(--color-fg);background:var(--color-surface)}
.option-pill__main{font-size:.9375rem;font-weight:500}
.option-pill__sub{font-size:.75rem;color:var(--color-muted)}
.option-pill[data-unavailable="true"]{opacity:.4;cursor:not-allowed;text-decoration:line-through}

.pdp__buy{margin-top:32px;display:grid;gap:12px}
.pdp__buy .btn{padding:18px 28px;font-size:1rem;min-height:56px}

.pdp__trust{margin-top:24px;display:grid;gap:8px;font-size:.875rem;color:var(--color-muted)}
.pdp__trust li{display:flex;align-items:center;gap:8px}
.pdp__trust svg{width:16px;height:16px;flex-shrink:0}

.pdp__details{margin-top:48px}
.pdp__details summary{padding:20px 0;border-top:1px solid var(--color-border);font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.pdp__details summary::-webkit-details-marker{display:none}
.pdp__details summary::after{content:"+";font-size:1.5rem;font-weight:300;color:var(--color-muted)}
.pdp__details[open] summary::after{content:"−"}
.pdp__details-body{padding:0 0 24px;color:var(--color-muted);line-height:1.65}
.pdp__details-body table{width:100%;border-collapse:collapse;margin-top:8px}
.pdp__details-body td{padding:10px 0;border-top:1px solid var(--color-border);font-size:.875rem}
.pdp__details-body td:first-child{color:var(--color-muted);width:40%}
.pdp__details-body td:last-child{color:var(--color-fg)}

/* Condition selector spec callout */
.condition-info{margin-top:12px;padding:16px;background:var(--color-surface);border-radius:var(--radius);font-size:.875rem;line-height:1.55;color:var(--color-muted)}
.condition-info strong{color:var(--color-fg);display:block;margin-bottom:4px;font-weight:500}

/* --- Collection page ---------------------------------------------- */
.collection-header{padding:64px 0 32px;text-align:center}
.collection-toolbar{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);font-size:.875rem;color:var(--color-muted)}
.collection-toolbar select{border:0;background:transparent;font:inherit;color:inherit;cursor:pointer}

/* --- Cart ---------------------------------------------------------- */
.cart-page{padding:64px 0 96px}
.cart-line{display:grid;grid-template-columns:96px 1fr auto;gap:24px;padding:24px 0;border-bottom:1px solid var(--color-border)}
.cart-line__media{aspect-ratio:1/1;background:var(--color-surface);border-radius:calc(var(--radius) - 4px);padding:12px}
.cart-line__media img{width:100%;height:100%;object-fit:contain}
.cart-line__title{font-weight:500}
.cart-line__variant{color:var(--color-muted);font-size:.875rem;margin-top:4px}
.cart-line__price{font-weight:500;text-align:right}
.cart-line__qty{display:inline-flex;align-items:center;border:1px solid var(--color-border);border-radius:999px;margin-top:8px}
.cart-line__qty button{width:32px;height:32px;font-size:1rem;color:var(--color-muted)}
.cart-line__qty button:disabled,[data-qty] button:disabled{opacity:.3;cursor:not-allowed}
.cart-line__remove{display:inline-block;margin-top:10px;font-size:.8125rem;color:var(--color-muted);text-decoration:underline;text-underline-offset:2px}
.cart-line__remove:hover{color:var(--color-fg)}
.cart-line__qty input{width:40px;height:32px;text-align:center;border:0;background:transparent}
.cart-totals{margin-top:32px;padding:32px;background:var(--color-surface);border-radius:var(--radius)}
.cart-totals__row{display:flex;justify-content:space-between;padding:8px 0}
.cart-totals__row--total{padding-top:16px;border-top:1px solid var(--color-border);font-weight:500;font-size:1.125rem}

/* --- Newsletter ---------------------------------------------------- */
.newsletter{text-align:center;max-width:560px;margin:0 auto}
.newsletter__form{display:flex;gap:8px;margin-top:24px}
.newsletter__input{flex:1;padding:14px 20px;border:1px solid var(--color-border);border-radius:999px;background:var(--color-bg);outline:none;transition:border-color .15s ease}
.newsletter__input:focus{border-color:var(--color-fg)}

/* --- Password page ------------------------------------------------- */
.password{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px}
.password__inner{max-width:480px;text-align:center}
.password__eyebrow{font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;margin-bottom:32px}
.password__title{font-family:var(--font-heading);font-weight:600;font-size:2.5rem;letter-spacing:-.02em;line-height:1.1}
.password__lead{color:var(--color-muted);margin:16px 0 32px}
.password__input{padding:14px 20px;border:1px solid var(--color-border);border-radius:999px;background:var(--color-bg);outline:none;width:100%;margin-bottom:12px}
.password__login{margin-top:32px;font-size:.875rem;color:var(--color-muted)}
.password__login summary{cursor:pointer;padding:8px 0}

/* --- 404 ----------------------------------------------------------- */
.not-found{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 24px}

/* --- Utility ------------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-center{text-align:center}
.flex-row{display:flex;gap:16px;align-items:center}
.flex-row--between{justify-content:space-between}

/* --- Reveal animation --------------------------------------------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* =====================================================================
   v1.1 — Hero Banner, Compare Table, Sustain, Trust Grid, Final CTA
   ===================================================================== */

/* --- Hero Banner with image --- */
.hero-banner{position:relative;min-height:88vh;display:flex;align-items:center;color:#fff;overflow:hidden;margin-top:0}
@media (max-width:767px){.hero-banner{min-height:72vh}}
.hero-banner__media{position:absolute;inset:0;z-index:0}
.hero-banner__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-banner__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.45) 60%,rgba(0,0,0,.75) 100%);z-index:1}
.hero-banner__inner{position:relative;z-index:2;text-align:center;padding:96px 24px 64px}
@media (min-width:768px){.hero-banner__inner{padding:160px 40px 96px}}
.hero-banner__eyebrow{color:rgba(255,255,255,.85);margin-bottom:24px}
.hero-banner__title{font-family:var(--font-heading);font-weight:700;font-size:clamp(2.5rem,6vw,5rem);letter-spacing:-.025em;line-height:1.02;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.25);max-width:900px;margin:0 auto}
.hero-banner__lead{color:rgba(255,255,255,.92);font-size:clamp(1.125rem,1.5vw,1.5rem);line-height:1.45;max-width:680px;margin:24px auto 0;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.hero-banner__cta{margin-top:48px;display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* --- Extra button variants --- */
.btn--xl{padding:18px 36px;font-size:1.0625rem;min-height:60px}
.btn--ghost-inverse{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn--ghost-inverse:hover{background:rgba(255,255,255,.2);border-color:#fff}
.btn--primary-inverse{background:#fff;color:#0a0a0a}
.btn--primary-inverse:hover{background:#f5f5f7}

/* --- Compare Table --- */
.compare{margin-top:48px;border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;background:var(--color-bg)}
.compare__row{display:grid;grid-template-columns:1.4fr 1fr 1fr;border-top:1px solid var(--color-border);align-items:stretch}
.compare__row:first-child{border-top:0}
.compare__row--head{background:var(--color-surface);font-size:.8125rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase}
.compare__row--head .compare__col{padding:16px 20px}
.compare__row--head .compare__col--us{color:var(--color-fg);text-align:center}
.compare__row--head .compare__col--them{color:var(--color-muted);text-align:center}
.compare__feature{padding:20px;font-weight:500;font-size:.9375rem;display:flex;align-items:center}
.compare__col{padding:20px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9375rem;border-left:1px solid var(--color-border)}
.compare__col--us{background:#f8fbf9;color:#0a3a1c;font-weight:500}
.compare__col--them{color:var(--color-muted)}
@media (max-width:767px){
  .compare__row{grid-template-columns:1fr;gap:0}
  .compare__row--head{display:none}
  .compare__feature{font-weight:600;font-size:.8125rem;letter-spacing:.05em;text-transform:uppercase;color:var(--color-muted);padding-bottom:8px;border-bottom:1px solid var(--color-border)}
  .compare__col{justify-content:flex-start;text-align:left;border-left:0;padding:8px 20px;border-top:0}
  .compare__col--us::before{content:"UpFone: ";font-weight:600;margin-right:8px}
  .compare__col--them::before{content:"Andere: ";font-weight:600;margin-right:8px;color:var(--color-muted)}
}

/* --- Sustain section --- */
.sustain{padding:96px 0;background:#e8f5ee;background:linear-gradient(180deg,#f0f8f3 0%,#e8f5ee 100%)}
@media (min-width:768px){.sustain{padding:120px 0}}
.sustain__grid{display:grid;grid-template-columns:200px 1fr;gap:48px;align-items:center;max-width:980px;margin:0 auto}
@media (max-width:767px){.sustain__grid{grid-template-columns:1fr;gap:24px;text-align:center}.sustain__visual{margin:0 auto}}
.sustain__visual{flex-shrink:0}
.sustain__copy h2{color:#0a3a1c}
.sustain__copy .t-eyebrow{color:#1f8a4c}
.sustain__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
@media (max-width:479px){.sustain__stats{grid-template-columns:1fr}}
.sustain__stats li{padding-top:16px;border-top:1px solid rgba(31,138,76,.25)}
.sustain__stats strong{display:block;font-family:var(--font-heading);font-weight:600;font-size:1.75rem;letter-spacing:-.02em;color:#0a3a1c}
.sustain__stats span{display:block;font-size:.8125rem;color:#1f5a35;margin-top:4px}

/* --- Trust Grid --- */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media (max-width:899px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:479px){.trust-grid{grid-template-columns:1fr}}
.trust-item{padding:32px;background:var(--color-bg);border-radius:var(--radius);text-align:center;border:1px solid var(--color-border)}
.trust-item__icon{width:48px;height:48px;border-radius:50%;background:var(--color-fg);color:var(--color-bg);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.trust-item__icon svg{width:24px;height:24px}
.trust-item h3{margin-bottom:8px}

/* --- Final CTA --- */
.cta-final{padding:120px 24px;background:var(--color-fg);color:#fff;text-align:center}
.cta-final__title{font-family:var(--font-heading);font-weight:600;font-size:clamp(2.25rem,4vw,3.5rem);letter-spacing:-.02em;line-height:1.05;color:#fff}
.cta-final__lead{color:rgba(255,255,255,.7);font-size:1.125rem;line-height:1.5;max-width:560px;margin:24px auto 40px}

/* --- Sticky add-to-cart bar (PDP mobile) --- */
@media (max-width:767px){
  .sticky-cart{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--color-bg);border-top:1px solid var(--color-border);padding:12px 16px;display:flex;gap:12px;align-items:center;box-shadow:0 -4px 20px rgba(0,0,0,.06)}
  .sticky-cart__price{font-weight:500;font-size:.9375rem}
  .sticky-cart .btn{flex:1;min-height:48px}
}
/* --- Gallery image swap animation --- */
.pdp__media-main{position:relative}
.pdp__media-main img{transition:opacity .25s ease}
.pdp__media-main.is-loading::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(110deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 70%);
  background-size:200% 100%;
  animation:shimmer 1.1s infinite linear;
  pointer-events:none;
}
.pdp__media-main.is-loading img{opacity:.45}
.pdp__media-main img.is-fading-in{opacity:0}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){
  .pdp__media-main img,.pdp__media-main.is-loading::after{transition:none;animation:none}
}
/* =====================================================================
   v1.2 — Steps, About, Reviews, Newsletter Strip
   ===================================================================== */

/* --- 3 Schritte --- */
.steps{padding:96px 0}
@media (min-width:768px){.steps{padding:120px 0}}
.steps__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:64px}
@media (max-width:899px){.steps__grid{grid-template-columns:1fr;gap:24px}}
.step-card{padding:40px 32px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg);transition:transform .2s ease,border-color .2s ease;position:relative;overflow:hidden}
.step-card:hover{transform:translateY(-2px);border-color:var(--color-fg)}
.step-card__num{font-family:var(--font-heading);font-weight:600;font-size:.875rem;letter-spacing:.1em;color:var(--color-muted);margin-bottom:24px}
.step-card h3{margin-bottom:12px}
.step-card p{color:var(--color-muted);font-size:.9375rem;line-height:1.55}

/* --- Über UpFone --- */
.about{padding:96px 0;background:var(--color-surface)}
@media (min-width:768px){.about{padding:120px 0}}
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media (max-width:899px){.about__grid{grid-template-columns:1fr;gap:32px}}
.about__media{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--color-bg);display:flex;align-items:center;justify-content:center}
.about__media img{width:100%;height:100%;object-fit:cover}
.about__placeholder{color:var(--color-muted);opacity:.5}
.about__copy{padding:0}
.about__copy h2{font-size:clamp(2rem,3.2vw,2.75rem)}

/* --- Kundenstimmen --- */
.reviews{padding:96px 0}
@media (min-width:768px){.reviews{padding:120px 0}}
.reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
@media (max-width:899px){.reviews__grid{grid-template-columns:1fr;gap:16px}}
.review-card{padding:32px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg);display:flex;flex-direction:column;height:100%}
.review-card__stars{font-size:1rem;color:#f5a623;letter-spacing:1px;margin-bottom:16px}
.review-card__text{font-style:normal;font-size:.9375rem;line-height:1.6;color:var(--color-fg);quotes:"„" """ "‚" "'";margin:0 0 24px;flex:1}
.review-card__text::before{content:open-quote;color:var(--color-muted)}
.review-card__text::after{content:close-quote;color:var(--color-muted)}
.review-card__author{display:flex;flex-direction:column;border-top:1px solid var(--color-border);padding-top:16px;font-style:normal}
.review-card__author strong{font-size:.9375rem;font-weight:500;color:var(--color-fg)}
.review-card__author span{font-size:.8125rem;color:var(--color-muted);margin-top:2px}

/* --- Newsletter-Strip --- */
.newsletter-strip{padding:96px 0;background:var(--color-fg);color:#fff;text-align:center}
.newsletter-strip .t-eyebrow{color:rgba(255,255,255,.6)}
.newsletter-strip .t-h2{color:#fff}
.newsletter-strip .t-lead{color:rgba(255,255,255,.7)}
.newsletter-strip .newsletter__form{max-width:520px;margin:32px auto 0;display:flex;gap:8px}
.newsletter-strip .newsletter__input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;flex:1;padding:14px 20px;border-radius:999px;outline:none}
.newsletter-strip .newsletter__input::placeholder{color:rgba(255,255,255,.5)}
.newsletter-strip .newsletter__input:focus{border-color:#fff;background:rgba(255,255,255,.12)}
.newsletter-strip .btn--primary{background:#fff;color:#0a0a0a}
.newsletter-strip .btn--primary:hover{background:#f5f5f7}
@media (max-width:540px){.newsletter-strip .newsletter__form{flex-direction:column;gap:12px}.newsletter-strip .btn--primary{width:100%}}

/* --- PDP Mobile Sticky CTA --- */
.pdp-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--color-border);
  padding:12px 16px;
  display:none;
  align-items:center;
  gap:12px;
  box-shadow:0 -8px 24px rgba(0,0,0,.06);
  transform:translateY(100%);
  transition:transform .25s ease;
}
.pdp-sticky.is-visible{transform:translateY(0)}
.pdp-sticky__info{flex:1;min-width:0}
.pdp-sticky__title{font-size:.8125rem;color:var(--color-muted);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdp-sticky__price{font-size:1rem;font-weight:600}
.pdp-sticky .btn{flex-shrink:0;min-height:44px;padding:10px 20px;font-size:.9375rem}
@media (max-width:767px){
  .pdp-sticky{display:flex}
  body.template-product main{padding-bottom:80px}
}
/* =====================================================================
   v1.3 — Image integration: Process, Sustain, About, Unboxing
   ===================================================================== */

/* --- About: Bild kann jetzt Cover-Image statt Placeholder --- */
.about__media{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--color-bg)}
.about__media img{width:100%;height:100%;object-fit:cover;display:block}

/* --- Process-Section neu: 2-Spalten-Layout mit Bild + Text --- */
.process-section{padding:96px 0}
@media (min-width:768px){.process-section{padding:120px 0}}
.process-section__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:64px}
@media (max-width:899px){.process-section__grid{grid-template-columns:1fr;gap:32px;margin-bottom:48px}}
.process-section__media{aspect-ratio:3/2;border-radius:var(--radius);overflow:hidden;background:var(--color-surface)}
.process-section__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.process-section__media:hover img{transform:scale(1.03)}
.process-section__copy h2{font-size:clamp(2rem,3.2vw,2.75rem)}

/* --- Sustain visual: Bild statt SVG --- */
.sustain__visual{aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;background:transparent}
.sustain__visual img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:767px){.sustain__visual{aspect-ratio:5/3;max-width:480px;margin:0 auto}}

/* --- Unboxing-Preview nach den 3 Schritten --- */
.unboxing-preview{margin-top:64px;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;background:var(--color-surface);max-width:100%}
@media (min-width:768px){.unboxing-preview{margin-top:80px;aspect-ratio:21/9}}
.unboxing-preview img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s ease}
.unboxing-preview:hover img{transform:scale(1.02)}

/* --- Sustain grid braucht jetzt mehr Platz für Bild --- */
.sustain__grid{max-width:1080px}
/* =====================================================================
   v1.4 — Layout-Fixes: Sustain bigger image, Process grid, About pills
   ===================================================================== */

/* --- Sustain: Bild bekommt jetzt 50/50 Aufteilung statt 200px --- */
.sustain__grid{grid-template-columns:1fr 1fr;gap:48px;max-width:1100px}
@media (max-width:899px){.sustain__grid{grid-template-columns:1fr;gap:32px}}
.sustain__visual{max-width:100%;aspect-ratio:5/4}
@media (max-width:899px){.sustain__visual{max-width:560px;margin:0 auto;aspect-ratio:5/3}}

/* --- Process-Section: Image left, text right, balanced --- */
.process-section__grid{grid-template-columns:1.1fr 1fr;gap:48px}
@media (max-width:899px){
  .process-section__grid{grid-template-columns:1fr;gap:32px}
  .process-section__media{aspect-ratio:16/10;max-width:640px;margin:0 auto}
}

/* --- About-Pills (statt Mehr-Button) --- */
.about__pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;list-style:none;padding:0}
.about__pills li{padding:8px 14px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:999px;font-size:.8125rem;font-weight:500;color:var(--color-fg)}

/* --- Force Mobile-Sticky-Cart wirklich nur auf Mobile --- */
@media (min-width:768px){
  .pdp-sticky{display:none !important}
}
/* =====================================================================
   v1.5 — Clean rebuild: Sustain, Process, Spacing
   Diese Regeln stehen am Ende der Datei und ueberschreiben alle aelteren.
   ===================================================================== */

/* --- Sustain: gleiches 50/50-Layout wie About, Bild gross und prominent --- */
.sustain{padding:120px 0;background:linear-gradient(180deg,#f0f8f3 0%,#e8f5ee 100%)}
@media (max-width:767px){.sustain{padding:80px 0}}
.sustain__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
  max-width:1180px;
  margin:0 auto;
}
.sustain__visual{
  aspect-ratio:5/4;
  border-radius:var(--radius);
  overflow:hidden;
  width:100%;
  max-width:none;
  margin:0;
  background:transparent;
}
.sustain__visual img{width:100%;height:100%;object-fit:cover;display:block}
.sustain__copy h2{font-size:clamp(2rem,3.2vw,2.75rem);line-height:1.1}
@media (max-width:899px){
  .sustain__grid{grid-template-columns:1fr;gap:40px;text-align:left}
  .sustain__visual{max-width:560px;margin:0 auto;aspect-ratio:5/3}
  .sustain__copy{text-align:left}
}

/* --- Process-Section: Text dominiert, Bild kleiner --- */
.process-section{padding:120px 0}
@media (max-width:767px){.process-section{padding:80px 0}}
.process-section__grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:64px;
  align-items:center;
  max-width:1180px;
  margin:0 auto 80px;
}
.process-section__media{
  aspect-ratio:4/3;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--color-surface);
  width:100%;
}
.process-section__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.process-section__copy h2{font-size:clamp(2rem,3.2vw,2.75rem);line-height:1.1}
@media (max-width:899px){
  .process-section__grid{grid-template-columns:1fr;gap:40px;margin-bottom:56px}
  .process-section__media{max-width:560px;margin:0 auto;aspect-ratio:16/10}
}

/* --- About: gleicher Stil wie Sustain --- */
.about{padding:120px 0;background:var(--color-surface)}
@media (max-width:767px){.about{padding:80px 0}}
.about__grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:64px;
  align-items:center;
  max-width:1180px;
  margin:0 auto;
}
.about__media{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;width:100%}
.about__media img{width:100%;height:100%;object-fit:cover;display:block}
.about__copy h2{font-size:clamp(2rem,3.2vw,2.75rem);line-height:1.1}
@media (max-width:899px){
  .about__grid{grid-template-columns:1fr;gap:40px}
  .about__media{max-width:480px;margin:0 auto;aspect-ratio:4/5}
}

/* --- Standardisierte Section-Abstände (mehr Luft) --- */
.section{padding:120px 0}
@media (max-width:767px){.section{padding:80px 0}}
.section--tight{padding:64px 0}
.steps{padding:120px 0}
@media (max-width:767px){.steps{padding:80px 0}}
.reviews{padding:120px 0}
@media (max-width:767px){.reviews{padding:80px 0}}

/* --- Steps: mehr Gap, etwas mehr Atemraum --- */
.steps__grid{gap:32px;margin-top:80px}
@media (max-width:899px){.steps__grid{margin-top:56px}}

/* --- Unboxing-Preview: nicht mehr Ultra-Wide --- */
.unboxing-preview{
  margin-top:80px;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:16/10;
  background:var(--color-surface);
}
@media (min-width:768px){.unboxing-preview{aspect-ratio:21/10}}
@media (max-width:767px){.unboxing-preview{margin-top:48px}}

/* --- Compare-Tabelle: mehr Abstand zum Heading --- */
.compare{margin-top:64px}
/* =====================================================================
   v1.6 — HART FORCIERTE Layouts (winnt gegen Cache + alte CSS-Regeln)
   ===================================================================== */

/* --- Hero kleiner: 70vh statt 88vh --- */
.hero-banner{min-height:68vh !important}
@media (max-width:767px){.hero-banner{min-height:55vh !important}}

/* --- Process-Section: Bild deutlich kleiner gewichten --- */
.process-section .process-section__grid{
  grid-template-columns:0.85fr 1.15fr !important;
  gap:72px !important;
  max-width:1180px !important;
  margin:0 auto 96px !important;
}
.process-section .process-section__media{
  aspect-ratio:4/3 !important;
  max-width:520px !important;
  width:100% !important;
}
@media (max-width:899px){
  .process-section .process-section__grid{
    grid-template-columns:1fr !important;
    gap:40px !important;
  }
  .process-section .process-section__media{
    max-width:520px !important;
    margin:0 auto !important;
  }
}

/* --- Sustain: Bild jetzt deutlich groesser, 1.25fr zu 1fr --- */
.sustain .sustain__grid{
  grid-template-columns:1.25fr 1fr !important;
  gap:72px !important;
  max-width:1240px !important;
  margin:0 auto !important;
  align-items:center !important;
}
.sustain .sustain__visual{
  aspect-ratio:4/3 !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  border-radius:var(--radius) !important;
  overflow:hidden !important;
}
.sustain .sustain__visual img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
@media (max-width:899px){
  .sustain .sustain__grid{
    grid-template-columns:1fr !important;
    gap:40px !important;
  }
  .sustain .sustain__visual{
    max-width:640px !important;
    margin:0 auto !important;
    aspect-ratio:5/3 !important;
  }
}

/* --- About: Bildspalte etwas kleiner als Text --- */
.about .about__grid{
  grid-template-columns:0.85fr 1.15fr !important;
  gap:72px !important;
  max-width:1180px !important;
  align-items:center !important;
}
.about .about__media{
  aspect-ratio:4/5 !important;
  max-width:460px !important;
  width:100% !important;
}
@media (max-width:899px){
  .about .about__grid{grid-template-columns:1fr !important;gap:40px !important}
  .about .about__media{max-width:420px !important;margin:0 auto !important}
}

/* --- Mehr vertikaler Abstand zwischen Sections --- */
.section{padding:140px 0 !important}
.process-section{padding:140px 0 !important}
.about{padding:140px 0 !important}
.sustain{padding:140px 0 !important}
.steps{padding:140px 0 !important}
.reviews{padding:140px 0 !important}
@media (max-width:767px){
  .section,.process-section,.about,.sustain,.steps,.reviews{padding:88px 0 !important}
}

/* --- Mehr Atemraum zwischen Heading und Inhalt --- */
.grades__intro{margin-bottom:80px}
@media (max-width:767px){.grades__intro{margin-bottom:48px}}
.steps__grid{margin-top:72px}
.compare{margin-top:72px}
.reviews__grid{margin-top:72px}

/* --- Trust-Grid Container: max-width vereinheitlichen --- */
.trust-grid{max-width:1180px;margin:0 auto}

/* --- Unboxing-Preview: Aspect Ratio weniger extrem --- */
.unboxing-preview{
  aspect-ratio:16/9 !important;
  margin-top:80px !important;
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}
@media (min-width:768px){.unboxing-preview{aspect-ratio:21/10 !important}}
@media (max-width:767px){.unboxing-preview{margin-top:48px !important}}
/* =====================================================================
   v2.2 — UpFone Product Card (robust, fallback, clean)
   ===================================================================== */
.upf-card{position:relative;display:flex;flex-direction:column;color:inherit;text-decoration:none;background:#fff;border:1px solid #ececec;border-radius:14px;overflow:hidden;transition:transform .2s ease,box-shadow .25s ease,border-color .25s ease;height:100%}
.upf-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px -10px rgba(10,10,10,.14),0 4px 10px -4px rgba(10,10,10,.06);border-color:#dcdcdc}

.upf-card__media{position:relative;width:100%;aspect-ratio:1/1;background:#f6f6f7;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:18%;flex-shrink:0}
.upf-card__img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .4s cubic-bezier(.2,.7,.2,1);max-width:100%;max-height:100%}
.upf-card:hover .upf-card__img{transform:scale(1.05)}
.upf-card__placeholder{width:55%;height:auto;opacity:.85}

.upf-card--soldout:hover{transform:none;box-shadow:none;border-color:#ececec}
.upf-card--soldout:hover .upf-card__img{transform:none}

.upf-card__body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto}
.upf-card__title{font-family:var(--font-heading);font-size:1.0625rem;font-weight:600;line-height:1.2;letter-spacing:-.015em;color:var(--color-fg);margin:0}
.upf-card__colors{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.upf-card__color-dot{display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.upf-card__color-more{font-size:.6875rem;color:var(--color-muted);margin-left:2px;line-height:1;font-weight:500}
.upf-card__spacer{flex:1 1 auto;min-height:4px}

.upf-card__pricing{display:flex;flex-direction:column;gap:4px}
.upf-card__price-line{display:flex;align-items:baseline;gap:8px;line-height:1;flex-wrap:wrap}
.upf-card__price-prefix{font-size:.875rem;color:var(--color-muted);font-weight:500;line-height:1}
.upf-card__price{font-family:var(--font-heading);font-size:1.875rem;font-weight:700;color:var(--color-fg);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.upf-card__save-pill{display:inline-flex;align-items:center;align-self:center;padding:4px 8px;background:#e8f5ec;color:#0e7a32;border-radius:5px;font-size:.6875rem;font-weight:700;letter-spacing:.01em;line-height:1;font-variant-numeric:tabular-nums}
.upf-card__uvp-line{font-size:.8125rem;color:var(--color-muted);line-height:1;font-variant-numeric:tabular-nums}
.upf-card__uvp{text-decoration:line-through}

@media (max-width:767px){
  .upf-card{border-radius:12px}
  .upf-card__body{padding:14px 14px 16px;gap:6px}
  .upf-card__title{font-size:.9375rem}
  .upf-card__price{font-size:1.625rem}
  .upf-card__price-prefix{font-size:.8125rem}
  .upf-card__media{padding:14%}
  .upf-card__uvp-line{font-size:.75rem}
}