:root{
  --rot:#A4262C; --rot-dark:#7E1B20; --rot-hell:#C7343B;
  --schwarz:#131316; --schwarz-2:#1b1b1f;
  --weiss:#F7F6F4; --grau:#e7e7e7; --grau-2:#9a9a9a; --text:#1b1b1b;
  --gold:#c9a227;
  --font-head:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 4px 16px rgba(0,0,0,.08);
  --shadow-lift:0 14px 34px rgba(0,0,0,.16);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--text);background:var(--weiss);line-height:1.55}
img{max-width:100%}
a{color:var(--rot);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--font-head);font-weight:800;line-height:1.15;color:var(--schwarz);letter-spacing:-.015em}
.container{max-width:1120px;margin:0 auto;padding:0 1.2rem}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--rot);margin-bottom:.5rem}
.hero .eyebrow{color:#ff8f95}

/* Topbar */
.topbar{background:var(--rot);color:#fff;text-align:center;font-size:.82rem;font-weight:600;padding:.5rem 1rem;letter-spacing:.3px}

/* Header */
header.site{background:rgba(19,19,22,.97);backdrop-filter:blur(8px);color:#fff;display:flex;align-items:center;gap:1rem;padding:.7rem 1.2rem;position:sticky;top:0;z-index:900;box-shadow:0 2px 14px rgba(0,0,0,.25)}
header.site .brand{display:flex;align-items:center;gap:.65rem;color:#fff;text-decoration:none}
header.site .brand img{height:46px;width:46px;object-fit:contain}
header.site .brand span{font-family:var(--font-head);font-weight:800;font-size:1.25rem;letter-spacing:-.01em;color:#fff}
header.site nav{margin-left:auto;display:flex;gap:1.3rem;align-items:center}
header.site nav a{color:#e8e8e8;font-weight:600;font-size:.95rem;padding:.35rem 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
header.site nav a:hover{color:#fff;text-decoration:none;border-bottom-color:var(--rot)}
.cart-link .badge{background:var(--rot);color:#fff;border-radius:999px;padding:.05rem .5rem;font-size:.8rem;margin-left:.2rem}
.nav-toggle{display:none;margin-left:auto;background:none;border:2px solid #555;border-radius:8px;color:#fff;font-size:1.25rem;line-height:1;padding:.35rem .6rem;cursor:pointer}

/* Hero */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(700px 320px at 78% -10%, rgba(164,38,44,.5), transparent 65%),
  radial-gradient(560px 300px at 12% 110%, rgba(164,38,44,.32), transparent 60%),
  linear-gradient(160deg,#101014 0%, #1c1c22 100%);
  color:#fff;padding:4.4rem 1.2rem 4.6rem;text-align:center}
.hero h1{color:#fff;font-size:clamp(2.1rem,5vw,3.1rem);margin:0 0 .7rem}
.hero p{color:#d9d9dc;max-width:640px;margin:0 auto 1.5rem;font-size:1.08rem}
.hero .container{position:relative;z-index:2}
/* schwebende Deko-Cases (reines CSS, keine Bilder noetig) */
.hero .float-el{position:absolute;border:1.5px solid rgba(255,255,255,.14);border-radius:12px;
  background:linear-gradient(155deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  box-shadow:0 18px 44px rgba(0,0,0,.35);z-index:1;pointer-events:none;
  animation:heroFloat 7s ease-in-out infinite}
.hero .fe-1{width:110px;height:150px;left:6%;top:18%;transform:rotate(-9deg);animation-delay:0s}
.hero .fe-2{width:80px;height:112px;right:9%;top:12%;transform:rotate(11deg);animation-delay:1.6s;animation-duration:8.5s}
.hero .fe-3{width:64px;height:88px;right:20%;bottom:10%;transform:rotate(-6deg);animation-delay:.8s;animation-duration:9.5s}
.hero .fe-4{width:88px;height:120px;left:16%;bottom:6%;transform:rotate(7deg);animation-delay:2.4s;animation-duration:7.5s}
@keyframes heroFloat{0%,100%{translate:0 0}50%{translate:0 -16px}}
/* USP-Leiste */
.usp-bar{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.9rem;position:relative;z-index:2}
.usp-bar .usp{display:flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:.45rem .95rem;font-size:.86rem;font-weight:600;color:#eee}
.usp-bar .usp svg{width:16px;height:16px;flex:0 0 auto;stroke:#ff9ba0}

/* Buttons */
.btn{display:inline-block;background:var(--rot);color:#fff;border:none;padding:.8rem 1.4rem;border-radius:10px;cursor:pointer;font-weight:700;font-size:1rem;text-decoration:none;
  transition:background .15s, transform .12s, box-shadow .15s;position:relative;overflow:hidden}
.btn:hover{background:var(--rot-dark);text-decoration:none;transform:translateY(-1px);box-shadow:0 8px 20px rgba(164,38,44,.35)}
.btn:active{transform:translateY(0)}
.btn-block{display:block;width:100%;text-align:center}
.btn-dark{background:var(--schwarz)} .btn-dark:hover{background:#000;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.btn-ghost{background:transparent;border:2px solid #fff;color:#fff}
.btn-paypal{background:#ffc439;color:#142c8e} .btn-paypal:hover{background:#f0b62c;box-shadow:0 8px 20px rgba(240,182,44,.35)}
.btn-secondary{background:#eee;color:#333} .btn-secondary:hover{background:#e0e0e0;box-shadow:none}
/* Glanz-Sweep fuer Haupt-CTAs */
.btn-shine::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  animation:btnShine 3.2s ease-in-out infinite}
@keyframes btnShine{0%,60%{left:-80%}100%{left:130%}}

/* Sections */
section{padding:2.6rem 0}
.section-title{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.3rem}
.section-title h2{margin:0;font-size:1.7rem}

/* Product grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:1.3rem}
.card{background:#fff;border:1px solid var(--grau);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative;
  transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.card .imgwrap{aspect-ratio:1;background:#fff;display:flex;align-items:center;justify-content:center;padding:.6rem;overflow:hidden}
.card .imgwrap img{max-height:100%;object-fit:contain;transition:transform .3s ease}
.card:hover .imgwrap img{transform:scale(1.05)}
.card .body{padding:1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card .name{font-weight:700;color:#222;line-height:1.35}
.card .price{color:var(--rot);font-weight:800;font-size:1.2rem}
.card form{margin-top:auto}
.muted{color:var(--grau-2);font-size:.88rem}
/* Badges */
.badge-soldout{background:#777;color:#fff;border-radius:6px;padding:.15rem .5rem;font-size:.75rem;font-weight:700}
.badge-neu,.badge-bestseller{position:static;display:inline-block;border-radius:6px;padding:.18rem .55rem;font-size:.72rem;font-weight:800;letter-spacing:.08em}
.badge-neu{background:var(--rot);color:#fff}
.badge-bestseller{background:var(--gold);color:#1b1b1b}
.card .card-badge{position:absolute;top:.7rem;left:.7rem;z-index:3;border-radius:6px;padding:.22rem .6rem;font-size:.72rem;font-weight:800;letter-spacing:.08em;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.card .card-badge.neu{background:var(--rot);color:#fff}
.card .card-badge.bestseller{background:var(--gold);color:#1b1b1b}
.low-stock{color:var(--rot);font-weight:700;font-size:.85rem}

/* Trust-Sektion */
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.3rem}
.trust-card{background:#fff;border:1px solid var(--grau);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);text-align:center}
.trust-card svg{width:38px;height:38px;stroke:var(--rot);margin-bottom:.6rem}
.trust-card h3{margin:.2rem 0 .4rem;font-size:1.08rem}
.trust-card p{margin:0;color:#555;font-size:.93rem}

/* Scroll-Reveal (JS fuegt .visible hinzu; ohne JS bleibt alles sichtbar) */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease, transform .55s ease}
html.js .reveal.visible{opacity:1;transform:none}

/* Product detail */
.product{display:grid;grid-template-columns:1.1fr 1fr;gap:2.2rem;align-items:start}
.product .gallery{background:#fff;border:1px solid var(--grau);border-radius:var(--radius);padding:1rem;text-align:center}
.product .buybox{position:sticky;top:86px;background:#fff;border:1px solid var(--grau);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}
.product .price{font-size:1.8rem;color:var(--rot);font-weight:800}
.qty{width:76px;padding:.55rem;border:1px solid #ccc;border-radius:8px}
.gallery .thumbs{display:flex;gap:.5rem;margin-top:.7rem;flex-wrap:wrap;justify-content:center}
.gallery .thumbs img{height:62px;width:62px;object-fit:cover;border:1px solid var(--grau);border-radius:8px;cursor:pointer;transition:border-color .15s, transform .15s}
.gallery .thumbs img:hover{border-color:var(--rot);transform:scale(1.06)}
.feature-list{list-style:none;padding:0;margin:1.1rem 0 0}
.feature-list li{display:flex;gap:.55rem;align-items:flex-start;padding:.3rem 0;color:#333}
.feature-list svg{width:18px;height:18px;flex:0 0 auto;stroke:var(--rot);margin-top:.2rem}
.ship-note{display:flex;gap:.5rem;align-items:center;color:#555;font-size:.88rem;margin-top:1rem;border-top:1px dashed var(--grau);padding-top:.8rem}
.ship-note svg{width:17px;height:17px;stroke:#888;flex:0 0 auto}

/* Werbung */
.promo-top{color:#fff;text-align:center;padding:.5rem 1rem;font-size:.92rem}
.promo-top a{color:#fff;text-decoration:underline;margin-left:.5rem;white-space:nowrap}
.promo-top-inner{display:flex;gap:.6rem;align-items:center;justify-content:center;flex-wrap:wrap}
.promo-top img{height:28px;border-radius:4px}
.promo-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:1000}
.promo-popup{background:#fff;border-radius:var(--radius);max-width:430px;width:90%;padding:1.7rem;text-align:center;position:relative;box-shadow:0 12px 44px rgba(0,0,0,.32)}
.promo-popup img{max-width:100%;border-radius:8px;margin-bottom:.7rem}
.promo-popup h3{margin:.2rem 0}
.promo-popup-close{position:absolute;top:.3rem;right:.6rem;border:none;background:none;font-size:1.7rem;cursor:pointer;color:#999;line-height:1}
.promo-fullwidth{max-width:1500px;margin:1.6rem auto;padding:0 1.2rem}
.promo-block{position:relative;overflow:hidden;border-radius:16px;padding:2rem 2.2rem;box-shadow:var(--shadow)}
.promo-block .pb-content{position:relative;z-index:2}
.promo-block h2{color:inherit;margin:0 0 .5rem;font-size:1.8rem;font-family:var(--font-head)}
.promo-block p{margin:0 0 1rem;font-size:1.05rem;opacity:.96}
.promo-block.layout-left{display:flex;gap:1.8rem;align-items:center}
.promo-block.layout-right{display:flex;flex-direction:row-reverse;gap:1.8rem;align-items:center}
.promo-block.layout-left .pb-img,.promo-block.layout-right .pb-img{height:150px;width:auto;border-radius:12px;flex:0 0 auto;position:relative;z-index:2}
.promo-block.layout-center{text-align:center}
.promo-block.layout-center .pb-content{display:flex;flex-direction:column;align-items:center}
.promo-block.layout-center .pb-img{max-height:160px;border-radius:12px;margin:0 auto 1rem;display:block;position:relative;z-index:2}
.promo-block.layout-background{min-height:210px;display:flex;align-items:center}
.promo-block .pb-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* Werbe-Animationen (waehlbar im Editor) */
.promo-block.anim-fade{animation:promoFade .9s ease both}
@keyframes promoFade{from{opacity:0}to{opacity:1}}
.promo-block.anim-slide{animation:promoSlide .7s cubic-bezier(.2,.7,.3,1) both}
@keyframes promoSlide{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.promo-block.anim-pulse{animation:promoPulse 2.6s ease-in-out infinite}
@keyframes promoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
.promo-block.anim-shine::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;z-index:3;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  animation:promoShine 3.8s ease-in-out infinite;pointer-events:none}
@keyframes promoShine{0%,55%{left:-70%}100%{left:135%}}
.promo-block.anim-float .pb-img{animation:heroFloat 6s ease-in-out infinite}
/* Laufband (marquee): Inhalt doppelt gerendert -> nahtlose Endlos-Schleife, pausiert bei Hover */
.promo-top-marquee{overflow:hidden;padding:.5rem 0}
.marquee-track{display:inline-flex;white-space:nowrap;animation:marquee 18s linear infinite;will-change:transform}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{display:inline-block;padding:0 3rem}
.promo-block .marquee-track{position:relative;z-index:2;font-size:1.15rem}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.promo-block.anim-marquee{padding:1.1rem 0;text-align:center}
.promo-nl-form{display:flex;gap:.5rem;flex-wrap:wrap}
.promo-nl-form input[type=email]{flex:1;min-width:160px;max-width:280px;color:#222}
.marketing-box{border:1px solid var(--grau);border-radius:10px;padding:1rem 1.2rem;margin:1rem 0}
.marketing-box legend{font-weight:700;padding:0 .4rem}
.marketing-box .mk{display:flex;align-items:center;gap:.6rem;margin:.5rem 0;font-weight:400}
.marketing-box .mk input{width:auto;margin:0}

/* Tables */
table.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--grau);border-radius:10px;overflow:hidden}
table.tbl th,table.tbl td{padding:.7rem .8rem;text-align:left;border-bottom:1px solid var(--grau)}
table.tbl th{background:#fafafa;font-size:.85rem;text-transform:uppercase;letter-spacing:.4px;color:#555}
table.tbl tr:last-child td{border-bottom:none}
.right{text-align:right}

/* Summary box */
.summary{background:#fff;border:1px solid var(--grau);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow)}
.summary .row{display:flex;justify-content:space-between;padding:.35rem 0}
.summary .total{font-size:1.3rem;font-weight:800;border-top:1px solid var(--grau);margin-top:.5rem;padding-top:.6rem}

/* Forms */
form .field{margin-bottom:1rem}
label{display:block;font-weight:600;margin-bottom:.3rem}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
textarea, select{
  width:100%;padding:.6rem .7rem;border:1px solid #ccc;border-radius:8px;font-size:1rem;
  font-family:inherit;background:#fff;color:var(--text)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--rot);box-shadow:0 0 0 2px rgba(164,38,44,.15)}
textarea{min-height:90px}
.panel{background:#fff;border:1px solid var(--grau);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);max-width:540px;margin:0 auto}
.two-col{display:grid;grid-template-columns:2fr 1fr;gap:1.6rem;align-items:start}
.form-row{display:flex;gap:1rem;flex-wrap:wrap}
.form-row .field{flex:1;min-width:140px}
.field small.err{color:var(--rot);display:block;margin-top:.25rem;font-weight:600}
.field.checkbox label{font-weight:400;display:block;position:relative;padding-left:1.7rem;line-height:1.55}
.field.checkbox input{position:absolute;left:0;top:.25rem;width:auto;margin:0}

/* Flash */
.flash{padding:.8rem 1rem;border-radius:8px;margin:1rem 0}
.flash-ok{background:#e6f6ea;color:#1c6b35;border:1px solid #b7e3c2}
.flash-error{background:#fdeaea;color:#a11;border:1px solid #f3c2c2}

/* Pay options */
.pay-option{border:1px solid var(--grau);border-radius:var(--radius);padding:1.1rem;margin-bottom:1rem;background:#fff}
.pay-option h3{margin:.1rem 0 .7rem}
.note-box{background:#fff8e6;border:1px solid #f0deb0;border-radius:10px;padding:1rem;font-size:.92rem}

/* Footer */
footer.site{background:var(--schwarz);color:#cfcfcf;margin-top:3rem;padding:2.6rem 0 1.2rem}
footer.site a{display:block;color:#cfcfcf;margin:.3rem 0}
footer.site a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.footer-logo{height:56px;width:56px;object-fit:contain}
footer.site strong{color:#fff;display:block;margin-bottom:.5rem}
.pay-note{color:#9a9a9a;font-size:.85rem}
.pay-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.pay-chips span{background:#26262b;border:1px solid #3a3a40;color:#ddd;border-radius:6px;padding:.25rem .6rem;font-size:.78rem;font-weight:700;letter-spacing:.03em}
.copyright{margin-top:1.6rem;color:#7c7c7c;font-size:.85rem;border-top:1px solid #2a2a2a;padding-top:1rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* Admin */
.admin-wrap{display:grid;grid-template-columns:220px 1fr;gap:1.5rem;padding:1.5rem 1rem;max-width:1400px}
.admin-navgroup{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:#9a9a9a;font-weight:800;margin:.85rem 0 .15rem;padding:0 .7rem}
.admin-maintbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.55rem .9rem;border-radius:10px;margin-bottom:1.2rem}
.admin-maintbar.on{background:#eef7ee;border:1px solid #cfe6cf}
.admin-maintbar.off{background:#fdeaea;border:1px solid #f0c2c2}
.admin-maintbar .btn{padding:.4rem .9rem;font-size:.9rem}
.pill{display:inline-block;background:#eef1f8;color:#3b4a66;border-radius:999px;padding:.1rem .55rem;font-size:.72rem;font-weight:700;line-height:1.5}
.admin-nav a{display:block;padding:.5rem .7rem;border-radius:8px;color:#333;font-weight:600}
.admin-nav a:hover{background:#eee;text-decoration:none}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:start}
.preview-pane{position:sticky;top:1rem}
.preview-pane iframe{width:100%;height:78vh;border:1px solid var(--grau);border-radius:8px;background:#fff}
@media(max-width:900px){.settings-grid{grid-template-columns:1fr}.preview-pane{position:static}}

/* Seiten-Baukasten */
.block-hero{padding:3.4rem 1.2rem}
.block-imgtext{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.block-imgtext.flip img{order:2}
.block-imgtext img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;object-fit:cover}
.block-image img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
.block-image figcaption{text-align:center;margin-top:.4rem}
.block-text h2{margin-top:0}

/* Mobile */
@media(max-width:760px){
  .block-imgtext{grid-template-columns:1fr}
  .block-imgtext.flip img{order:0}
  .product{grid-template-columns:1fr}
  .product .buybox{position:static}
  .two-col{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .admin-wrap{grid-template-columns:1fr}
  .hero{padding:3.2rem 1rem 3.4rem}
  .hero .float-el{display:none}
  .nav-toggle{display:block}
  header.site{flex-wrap:wrap}
  header.site nav{display:none;flex-direction:column;align-items:flex-start;gap:.2rem;width:100%;margin:0;padding:.6rem 0 .3rem;border-top:1px solid #2c2c31}
  header.site nav.open{display:flex}
  header.site nav a{width:100%;padding:.55rem .2rem;border-bottom:none}
}

/* Barrierefreiheit: reduzierte Bewegung -> alle Animationen aus */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none}
}