/*
Theme Name: FoneForge
Theme URI: https://foneforge.de
Author: FoneForge
Description: Eigenes Theme fuer foneforge.de. Startseite mit scrollgesteuerter Explosionszeichnung, WooCommerce-Unterstuetzung, Germanized-tauglich.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPLv2 or later
Text Domain: foneforge
*/

/* ===========================================================
   0  Grundlagen
   =========================================================== */
:root{
  --night:#07080B; --edge:#1E232D; --edge-2:#2C333F;
  --paper:#FFFFFF; --paper-2:#F5F6F8; --paper-line:#E3E7EB;
  --ink:#0A0C0F; --ink-2:#3B4149; --muted:#666D76; --faint:#98A0A9;
  --snow:#F3F5F8; --snow-2:#AEB6C0; --snow-3:#79828E;
  --ember:#FF6B1A; --ember-ink:#BF4508; --violet:#7C4DFF; --blue:#2E7BFF;
  --disp:Unbounded,"Space Grotesk",system-ui,sans-serif;
  --sans:"Space Grotesk",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden}
img{max-width:100%; height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--disp); font-weight:800; letter-spacing:-.035em; margin:0}
.shell{max-width:1140px; margin:0 auto; padding:0 24px}
.kicker{font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:200; background:var(--ember); color:#160802; padding:10px 16px}

/* ===========================================================
   1  Kopfzeile  (global, klein und ruhig)
   =========================================================== */
.top{position:sticky; top:0; z-index:70; background:rgba(7,8,11,.9);
  border-bottom:1px solid rgba(255,255,255,.09); transition:background .25s,border-color .25s}
.top.light{background:rgba(255,255,255,.96); border-bottom-color:var(--paper-line)}
.top-in{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:8px 20px; max-width:1140px; margin:0 auto}
.top-in .brand{display:block; line-height:0; flex:none}
.top-in .brand a{display:block; line-height:0; text-decoration:none}
/* Faengt Theme-Logo UND das Customizer-Logo (a.custom-logo-link > img.custom-logo) ab */
.top-in .brand img,.top-in .brand .custom-logo,.top-in .brand .custom-logo-link{
  height:26px; width:auto; max-width:none; display:block;
  filter:brightness(0) invert(1)}
.top.light .top-in .brand img,.top.light .top-in .brand .custom-logo{filter:none}
.top-in .brand .custom-logo-link{filter:none; height:auto}
.top .nav{display:flex; align-items:center; gap:20px; font-size:13.5px; color:var(--snow-2)}
.top.light .nav{color:var(--ink-2)}
.top .nav a{text-decoration:none}
.top .nav a:hover{color:var(--ember)}
.top .nav-cta{padding:6px 13px; font-size:12.5px; font-weight:600; letter-spacing:.02em;
  background:transparent; border:1px solid rgba(255,255,255,.26); color:var(--snow-2);
  transition:border-color .15s,color .15s}
.top .nav-cta:hover{background:transparent; border-color:var(--ember); color:var(--ember)}
.top.light .nav-cta{border-color:#D6DBE1; color:var(--ink-2)}
.top.light .nav-cta:hover{border-color:var(--ember); color:var(--ember-ink)}
@media(max-width:820px){
  .top .nav a:not(.nav-cta){display:none}
  .top-in{padding:7px 16px}
  .top-in .brand img,.top-in .brand .custom-logo{height:22px}
}

/* ===========================================================
   2  Schaltflaechen  (global, auch fuer WooCommerce)
   =========================================================== */
.btn,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{
  display:inline-flex; align-items:center; justify-content:center; padding:13px 24px;
  font-family:var(--sans); font-weight:700; font-size:14.5px; line-height:1.2; text-decoration:none;
  border:1px solid transparent; border-radius:0; background:var(--ember); color:#160802;
  transition:background .15s,color .15s,border-color .15s; cursor:pointer}
.btn-1{background:var(--ember); color:#160802}
.btn-1:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{background:var(--ember-ink); color:#fff}
.btn-2{background:transparent; border-color:rgba(255,255,255,.3); color:var(--snow)}
.btn-2:hover{border-color:var(--ember); color:var(--ember); background:transparent}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:var(--ember-ink); color:#fff}
.btn-line{background:transparent; border-color:var(--paper-line); color:var(--ink-2)}
.btn-line:hover{border-color:var(--ember); color:var(--ember-ink); background:transparent}
.btn:focus-visible,.woocommerce .button:focus-visible{outline:2px solid var(--ember); outline-offset:3px}

/* ===========================================================
   3  STARTSEITE  –  alles streng unter .ff-front
       (verhindert, dass .part/.pane/.panel/.intro/.ff-row
        in WooCommerce- oder Plugin-Markup hineingreifen)
   =========================================================== */
.ff-front .cta-row,.ff-front .ff-row{display:flex; flex-wrap:wrap; gap:11px; align-items:center}

.ff-front .hero{position:relative; min-height:90vh; display:flex; align-items:flex-end; color:var(--snow);
  overflow:hidden; border-bottom:1px solid var(--edge)}
.ff-front .hero-img{position:absolute; inset:0; background-size:cover; background-position:42% 52%;
  filter:contrast(1.04) saturate(.92)}
.ff-front .hero-tint{position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(7,8,11,.72) 0%, rgba(7,8,11,.55) 38%, rgba(7,8,11,.94) 100%),
  radial-gradient(60vw 60vw at 88% 8%, rgba(124,77,255,.34), transparent 65%),
  radial-gradient(64vw 64vw at 6% 96%, rgba(255,107,26,.32), transparent 65%)}
.ff-front .hero-in{position:relative; z-index:2; width:100%; max-width:1140px; margin:0 auto; padding:150px 24px 84px}
.ff-front .hero .kicker{color:var(--ember); margin-bottom:20px}
.ff-front .hero h1{font-size:clamp(30px,5.6vw,62px); line-height:1.06; margin:0 0 22px; max-width:15ch; color:#fff}
.ff-front .hero h1 em{font-style:normal; background:linear-gradient(96deg,var(--ember),#FFA05A 42%,var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.ff-front .hero p{font-size:clamp(15px,1.8vw,18px); color:var(--snow-2); margin:0 0 30px; max-width:46ch}
.ff-front .hero p b{color:var(--snow); font-weight:500}
.ff-front .facts{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:34px; font-size:12.5px;
  color:var(--snow-3); letter-spacing:.04em}
.ff-front .facts span::before{content:"\25C6 "; color:var(--ember); font-size:9px}

.ff-front .stage{position:relative; height:620vh; background:var(--night)}
.ff-front .stage-sticky{position:sticky; top:0; height:100vh; overflow:hidden; color:var(--snow)}
.ff-front .glow{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(62vw 62vw at 74% 22%, var(--c1,#7C4DFF), transparent 62%),
             radial-gradient(58vw 58vw at 20% 84%, var(--c2,#2E7BFF), transparent 62%);
  opacity:.36; transition:background 1s ease}
.ff-front .vig{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 120% 95% at 50% 45%, transparent 38%, rgba(6,7,10,.92) 100%)}
.ff-front .mesh{position:absolute; inset:0; pointer-events:none; opacity:.3;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 48%,#000 15%,transparent 74%);
          mask-image:radial-gradient(ellipse 90% 80% at 50% 48%,#000 15%,transparent 74%)}
.ff-front .scene{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  perspective:1900px; perspective-origin:50% 46%}
.ff-front .rig{position:relative; width:1px; height:var(--rig,min(60vh,540px)); transform-style:preserve-3d;
  will-change:transform; transform:rotateX(var(--rx,2deg)) rotateY(var(--ry,-3deg)) scale(var(--s,1.04))}
.ff-front .part{position:absolute; left:50%; top:50%; transform-style:preserve-3d;
  opacity:calc(var(--vis,1) * var(--d,1));
  transform:translate3d(-50%,-50%,calc((var(--i) - 2.5) * var(--sp,0) * 1px));
  transition:transform .85s cubic-bezier(.22,.72,.24,1), opacity .5s ease, filter .5s ease}
.ff-front .part img{display:block; height:calc(var(--rig,min(60vh,540px)) * var(--rel)); width:auto; max-width:none;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.75))}
.ff-front .part.on{transform:translate3d(calc(-50% + var(--ox)),-50%,calc(((var(--i) - 2.5) * var(--sp,0) + 300) * 1px)) scale(1.04)}
.ff-front .part.on img{filter:drop-shadow(0 0 34px rgba(255,107,26,.5)) drop-shadow(0 26px 30px rgba(0,0,0,.7))}
.ff-front .part.dim{--d:.3; filter:saturate(.6)}
.ff-front .hit{position:absolute; inset:0; display:block; cursor:pointer}
.ff-front .panel{position:absolute; z-index:5; left:6%; top:50%; transform:translateY(-50%); width:min(400px,38vw)}
.ff-front .pane{position:absolute; left:0; top:0; width:100%; opacity:0; transform:translateY(16px);
  transition:opacity .45s ease, transform .45s ease; pointer-events:none}
.ff-front .pane.on{opacity:1; transform:none; pointer-events:auto}
.ff-front .pane .kicker{color:var(--snow-3); margin-bottom:12px}
.ff-front .pane .kicker i{font-style:normal; color:var(--ember)}
.ff-front .pane h2{font-size:clamp(21px,2.6vw,34px); line-height:1.1; color:#fff; margin-bottom:14px}
.ff-front .pane p{font-size:15.5px; color:var(--snow-2); margin:0 0 22px}
.ff-front .pane .pr{font-size:15px; color:var(--ember)}
.ff-front .pane .pr em{font-style:normal; color:var(--snow-3); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; margin-right:7px}
.ff-front .intro{position:absolute; z-index:5; left:0; right:0; top:50%; transform:translateY(-50%);
  text-align:center; padding:0 24px; transition:opacity .5s ease}
.ff-front .intro .kicker{color:var(--ember); margin-bottom:14px}
.ff-front .intro h2{font-size:clamp(26px,4.6vw,54px); line-height:1.04; color:#fff; max-width:15ch; margin:0 auto}
.ff-front .intro.gone{opacity:0; pointer-events:none}
.ff-front .dots{position:absolute; right:26px; top:50%; transform:translateY(-50%); z-index:6;
  display:flex; flex-direction:column; gap:10px}
.ff-front .dot{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.2);
  transition:background .25s, transform .25s}
.ff-front .dot.on{background:var(--ember); transform:scale(1.6)}
.ff-front .hint{position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:6; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--snow-3); transition:opacity .4s}
.ff-front .hint.gone{opacity:0}

@media(max-width:900px){
  .ff-front .rig{--rig:min(32vh,262px)}
  .ff-front .part img{height:calc(min(32vh,262px) * var(--rel))}
  .ff-front .scene{align-items:flex-start; padding-top:19vh}
  .ff-front .panel{left:22px; right:22px; width:auto; top:auto; bottom:6vh; transform:none}
  .ff-front .pane{position:absolute; bottom:0; top:auto; transform:translateY(14px)}
  .ff-front .pane.on{transform:none}
  .ff-front .pane h2{font-size:22px}
  .ff-front .pane p{font-size:14.5px; margin-bottom:16px}
  .ff-front .part.on{transform:translate3d(-50%,calc(-50% - 9%),calc(((var(--i) - 2.5) * var(--sp,0) + 190) * 1px)) scale(1.03)}
  .ff-front .intro{top:auto; bottom:8vh; transform:none}
  .ff-front .intro h2{font-size:clamp(24px,7vw,34px)}
  .ff-front .dots{right:12px}
  .ff-front .hint{display:none}
}

.ff-front .flow{background:var(--paper-2); border-top:1px solid var(--paper-line)}
.ff-front .flow-in{padding:74px 0 84px}
.ff-front h3.sec{font-size:clamp(21px,2.7vw,30px); line-height:1.14}
.ff-front .steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(226px,1fr)); gap:28px; margin-top:32px}
.ff-front .step{position:relative; padding-top:20px; border-top:1px solid #D4D9DF}
.ff-front .step::before{content:""; position:absolute; top:-1px; left:0; width:36px; height:2px; background:var(--ember)}
.ff-front .step-ico{height:96px; display:flex; align-items:flex-end; margin-bottom:16px}
.ff-front .step-ico img{max-height:96px; max-width:120px; width:auto; height:auto; display:block}
.ff-front .step .kicker{color:var(--ember-ink); margin-bottom:9px; font-size:11px}
.ff-front .step h4{font-size:15.5px; font-weight:600; margin-bottom:8px; letter-spacing:-.02em}
.ff-front .step p{font-size:14.5px; color:var(--muted); margin:0; line-height:1.6}

.ff-front .shop-story{position:relative; color:var(--snow); background:var(--night); overflow:hidden}
.ff-front .shop-in{display:grid; grid-template-columns:1fr 1fr; align-items:stretch}
.ff-front .shop-photo{position:relative; min-height:520px; background-size:cover; background-position:50% 42%}
.ff-front .shop-photo::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 55%,rgba(7,8,11,.85) 100%)}
.ff-front .shop-cap{position:absolute; left:22px; bottom:20px; z-index:2; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.62)}
.ff-front .shop-text{padding:74px 56px 78px; display:flex; flex-direction:column; justify-content:center; gap:20px}
.ff-front .shop-text .kicker{color:var(--ember)}
.ff-front .shop-text h3{font-size:clamp(22px,2.9vw,34px); line-height:1.12; color:#fff; max-width:16ch}
.ff-front .shop-text p{margin:0; color:var(--snow-2); font-size:16px; max-width:44ch}
.ff-front .shop-text p.lead{color:var(--snow); font-size:17.5px}
.ff-front .sig{margin-top:8px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14)}
.ff-front .sig-name{font-family:var(--disp); font-weight:600; font-size:15px; letter-spacing:-.02em; color:#fff}
.ff-front .sig-role{font-size:12.5px; color:var(--snow-3)}
@media(max-width:900px){
  .ff-front .shop-in{grid-template-columns:1fr}
  .ff-front .shop-photo{min-height:320px}
  .ff-front .shop-photo::after{background:linear-gradient(180deg,transparent 45%,rgba(7,8,11,.9) 100%)}
  .ff-front .shop-text{padding:52px 24px 60px}
}

.ff-front .rev{border-top:1px solid var(--paper-line)}
.ff-front .rev-in{padding:74px 0 84px}
.ff-front .rev-head{display:flex; align-items:center; gap:13px; margin-bottom:10px}
.ff-front .gmark{width:24px; height:24px; flex:none}
.ff-front .rev-sub{font-size:15px; color:var(--muted); margin:0 0 26px; max-width:56ch}
.ff-front .rev-box{border:1px solid var(--paper-line); background:var(--paper); display:grid; grid-template-columns:auto 1fr}
.ff-front .rev-score{padding:30px 34px; border-right:1px solid var(--paper-line); text-align:center; min-width:206px}
.ff-front .rev-num{font-family:var(--disp); font-size:40px; font-weight:800; line-height:1; color:var(--faint)}
.ff-front .stars{display:flex; gap:3px; justify-content:center; margin:11px 0 8px}
.ff-front .stars svg{width:18px; height:18px}
.ff-front .rev-count{font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint)}
.ff-front .rev-empty{padding:30px 34px; display:flex; flex-direction:column; justify-content:center; gap:13px}
.ff-front .rev-empty h4{font-size:17px; font-weight:600; letter-spacing:-.02em}
.ff-front .rev-empty p{margin:0; font-size:15px; color:var(--muted); max-width:52ch}
@media(max-width:720px){
  .ff-front .rev-box{grid-template-columns:1fr}
  .ff-front .rev-score{border-right:none; border-bottom:1px solid var(--paper-line)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ff-front .stage{height:auto}
  .ff-front .stage-sticky{position:static; height:auto; padding:52px 0}
  .ff-front .pane{position:static; opacity:1; transform:none; margin-bottom:26px; inset:auto}
  .ff-front .dots{display:none}
}

/* ===========================================================
   4  Fusszeile
   =========================================================== */
.ff-footer{border-top:1px solid var(--paper-line); background:var(--paper-2)}
.foot-in{padding:34px 0 44px; display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center}
.foot-links{display:flex; flex-wrap:wrap; gap:18px; font-size:13.5px; color:var(--muted); list-style:none; margin:0; padding:0}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--ember-ink)}
.foot-legal{font-size:11.5px; color:var(--faint); line-height:1.85}

/* ===========================================================
   5  Innenseiten
   =========================================================== */
.ff-main{min-height:60vh}
.ff-page{padding:56px 0 80px}
.ff-title{font-family:var(--disp); font-weight:800; letter-spacing:-.035em;
  font-size:clamp(24px,3.2vw,38px); line-height:1.12; margin:0 0 26px}
.ff-content h2,.ff-content h3{margin:34px 0 12px; font-size:22px}
.ff-content p,.ff-content li{color:var(--ink-2); max-width:74ch}
.ff-content ul,.ff-content ol{padding-left:22px}
.ff-content a{color:var(--ember-ink)}
.ff-404{text-align:center; padding:100px 0 120px}
.ff-404 .cta-row{display:flex; gap:11px; justify-content:center; flex-wrap:wrap}

/* ===========================================================
   6  SHOP  –  Kopfband im Stil der Startseite
   =========================================================== */
.ff-band{position:relative; background:var(--night); color:var(--snow); overflow:hidden;
  border-bottom:1px solid var(--edge)}
.ff-band::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(46vw 46vw at 88% -10%, rgba(124,77,255,.34), transparent 62%),
             radial-gradient(48vw 48vw at 4% 116%, rgba(255,107,26,.30), transparent 62%)}
.ff-band-in{position:relative; z-index:2; max-width:1140px; margin:0 auto; padding:74px 24px 62px}
.ff-band .kicker{color:var(--ember); margin-bottom:16px}
.ff-band h1{font-size:clamp(27px,4.4vw,50px); line-height:1.06; color:#fff; max-width:16ch; margin:0}
.ff-band p{margin:18px 0 0; color:var(--snow-2); font-size:16px; max-width:52ch}
.ff-band .woocommerce-breadcrumb{margin:20px 0 0; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--snow-3)}
.ff-band .woocommerce-breadcrumb a{color:var(--snow-3); text-decoration:none}
.ff-band .woocommerce-breadcrumb a:hover{color:var(--ember)}
@media(max-width:820px){ .ff-band-in{padding:48px 20px 40px} }

.ff-shop{padding:52px 0 90px}
.woocommerce .woocommerce-products-header{display:none}
.woocommerce .woocommerce-breadcrumb{display:none}
.ff-band .woocommerce-breadcrumb{display:block}

/* Zeile ueber dem Raster: Anzahl + Sortierung, sehr ruhig */
.ff-shop .woocommerce-result-count{float:none; margin:0; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint)}
.ff-shop .woocommerce-ordering{float:none; margin:0}
.ff-shop .woocommerce-ordering select{border:1px solid var(--paper-line); border-radius:0;
  padding:8px 11px; font-family:var(--sans); font-size:13.5px; background:var(--paper); color:var(--ink-2)}
.ff-toolbar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-bottom:20px; margin-bottom:34px; border-bottom:1px solid var(--paper-line)}

/* ===========================================================
   7  Produktraster  –  abgespeckt, ohne Kaesten
   =========================================================== */
.woocommerce ul.products{display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:46px 30px; margin:0 !important; padding:0 !important; list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none !important; display:none !important}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width:auto !important; margin:0 !important; padding:0 !important; float:none !important;
  clear:none !important; border:0; background:none; text-align:left; position:relative}
.woocommerce ul.products li.product a img{margin:0; box-shadow:none; width:100%; height:100%;
  object-fit:contain; transition:transform .5s cubic-bezier(.22,.72,.24,1)}
/* Bildkachel mit festem Verhaeltnis, damit nichts mehr springt oder ueberlappt */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product > a:first-of-type{display:block; text-decoration:none}
.woocommerce ul.products li.product .ff-tile{display:block; aspect-ratio:4/5; background:var(--paper-2);
  border:1px solid var(--paper-line); overflow:hidden; margin-bottom:18px; padding:16px}
.woocommerce ul.products li.product:hover .ff-tile img{transform:scale(1.04)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--disp); font-weight:600; font-size:15.5px; letter-spacing:-.025em;
  line-height:1.3; margin:0 0 8px; padding:0; color:var(--ink)}
.woocommerce ul.products li.product .price{display:block; margin:0 0 4px; font-size:15px;
  font-weight:500; color:var(--ink); font-family:var(--sans)}
.woocommerce ul.products li.product .price del{opacity:.45; font-weight:400}
.woocommerce ul.products li.product .price ins{text-decoration:none; color:var(--ember-ink)}
.woocommerce ul.products li.product .wc-gzd-additional-info,
.woocommerce ul.products li.product .wc-gzd-additional-info-loop{font-size:11.5px; color:var(--faint);
  margin:0; line-height:1.5}
/* Kein klobiger Knopf mehr, sondern eine feine Linie */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.added_to_cart{
  display:inline-block; margin:14px 0 0; padding:0 0 3px; background:none; border:0;
  border-bottom:1px solid var(--ink); color:var(--ink); font-size:13px; font-weight:600;
  letter-spacing:.02em; border-radius:0}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.added_to_cart:hover{
  background:none; color:var(--ember-ink); border-bottom-color:var(--ember)}
.woocommerce ul.products li.product .onsale{position:absolute; top:10px; left:10px; right:auto; margin:0;
  background:var(--ember); color:#160802; border-radius:0; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:5px 9px; min-height:0; min-width:0; line-height:1.2}
@media(max-width:900px){ .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 18px} }
@media(max-width:359px){
  .woocommerce ul.products{grid-template-columns:1fr; gap:30px}
  .woocommerce ul.products li.product .ff-tile{aspect-ratio:3/2}
}

.woocommerce nav.woocommerce-pagination{margin-top:56px; text-align:left}
.woocommerce nav.woocommerce-pagination ul{border:0; margin:0; padding:0}
.woocommerce nav.woocommerce-pagination ul li{border:0; margin:0 6px 0 0}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{
  padding:9px 14px; border:1px solid var(--paper-line); font-size:13.5px; color:var(--ink-2)}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ===========================================================
   8  Einzelnes Produkt  –  Grid statt Floats
   =========================================================== */
.woocommerce div.product{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:26px 56px; align-items:start}
.woocommerce div.product > *{min-width:0}
.woocommerce div.product div.images,
.woocommerce div.product div.woocommerce-product-gallery{
  width:auto !important; float:none !important; margin:0 !important; opacity:1 !important}
.woocommerce div.product div.summary{width:auto !important; float:none !important; margin:0 !important}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product section.related,
.woocommerce div.product section.upsells,
.woocommerce div.product .woocommerce-product-gallery__wrapper + *,
.woocommerce div.product .up-sells{grid-column:1 / -1; clear:none !important; float:none !important; width:auto !important}
@media(max-width:900px){
  .woocommerce div.product{grid-template-columns:1fr; gap:26px}
}

/* Galerie: genau ein Bild, keine Miniaturenreihe */
.woocommerce div.product div.woocommerce-product-gallery{position:relative}
.woocommerce div.product div.woocommerce-product-gallery figure{margin:0; display:block}
.woocommerce div.product div.woocommerce-product-gallery .woocommerce-product-gallery__image{
  width:100% !important; float:none !important; margin:0 !important; padding:0;
  border:1px solid var(--paper-line); background:var(--paper)}
.woocommerce div.product div.woocommerce-product-gallery .woocommerce-product-gallery__image:not(:first-child){display:none}
.woocommerce div.product div.woocommerce-product-gallery img{width:100%; height:auto; display:block}
.woocommerce div.product div.woocommerce-product-gallery .flex-control-thumbs,
.woocommerce div.product .flex-control-nav,
.woocommerce div.product .thumbnails,
.woocommerce div.product div.images .thumbnails,
.woocommerce div.product div.images ul.thumbnails{display:none !important}
.woocommerce div.product .woocommerce-product-gallery__trigger{display:none}

.woocommerce div.product .product_title{font-family:var(--disp); font-weight:800; letter-spacing:-.035em;
  font-size:clamp(23px,2.9vw,34px); line-height:1.12; margin:0 0 14px}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  font-family:var(--sans); font-size:22px; font-weight:500; color:var(--ink); margin:0 0 6px}
.woocommerce div.product p.price ins{text-decoration:none; color:var(--ember-ink)}
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--ink-2); font-size:15.5px; margin:18px 0 0; max-width:52ch}
.woocommerce div.product .wc-gzd-additional-info{font-size:12.5px; color:var(--faint); margin:0}

/* Variantenauswahl */
.woocommerce div.product form.cart{margin:26px 0 0; padding:24px 0 0; border-top:1px solid var(--paper-line)}
.woocommerce div.product form.cart table.variations{border:0; margin:0 0 12px; width:100%}
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations td{display:block; width:100%; border:0; padding:0}
.woocommerce div.product form.cart table.variations td.label{margin-bottom:7px}
.woocommerce div.product form.cart table.variations label{font-family:var(--sans); font-weight:600;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.woocommerce div.product form.cart table.variations td.value{margin-bottom:18px}
.woocommerce div.product form.cart table.variations select{width:100%; max-width:420px;
  border:1px solid var(--paper-line); border-radius:0; padding:12px 13px;
  font-family:var(--sans); font-size:15px; background:var(--paper); color:var(--ink)}
.woocommerce div.product form.cart .reset_variations{font-size:12.5px; color:var(--muted)}
.woocommerce div.product .woocommerce-variation-price{margin-bottom:14px}
.woocommerce div.product form.cart div.quantity{margin-right:12px}
.woocommerce div.product form.cart .button{padding:15px 30px}

/* Reiter "Beschreibung" */
.woocommerce div.product .woocommerce-tabs{margin-top:64px; padding-top:0; border-top:1px solid var(--paper-line)}
.woocommerce div.product .woocommerce-tabs ul.tabs{margin:0; padding:0 0 0 0; display:flex; gap:26px; flex-wrap:wrap}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:none; border:0; border-radius:0;
  margin:0; padding:0; box-shadow:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:20px 0; font-family:var(--sans);
  font-weight:600; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink); box-shadow:inset 0 -2px 0 var(--ember)}
.woocommerce div.product .woocommerce-tabs .panel{padding:12px 0 0; margin:0; border:0; box-shadow:none}
.woocommerce div.product .woocommerce-tabs .panel h2{font-family:var(--disp); font-size:20px;
  font-weight:600; letter-spacing:-.03em; margin:0 0 14px}
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li{color:var(--ink-2); font-size:15.5px; max-width:74ch}

.woocommerce div.product section.related > h2,
.woocommerce div.product section.upsells > h2{font-family:var(--disp); font-size:20px; font-weight:600;
  letter-spacing:-.03em; margin:64px 0 26px}

/* ===========================================================
   9  Warenkorb, Kasse, Formulare
   =========================================================== */
.woocommerce table.shop_table,.woocommerce-cart table.cart{border:1px solid var(--paper-line); border-radius:0}
.woocommerce table.shop_table th{font-family:var(--sans); font-weight:700; font-size:12.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.select2-container .select2-selection--single{
  border:1px solid var(--paper-line); border-radius:0; padding:11px 13px;
  font-family:var(--sans); font-size:15px; background:var(--paper); color:var(--ink)}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row select:focus{
  outline:2px solid var(--ember); outline-offset:1px; border-color:var(--ember)}
.woocommerce form .form-row label{font-size:13.5px; color:var(--ink-2)}
.woocommerce .quantity .qty{border:1px solid var(--paper-line); padding:11px 9px; font-family:var(--sans); width:64px}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-top-color:var(--ember); background:var(--paper-2); font-size:15px}
.woocommerce-message::before,.woocommerce-info::before{color:var(--ember)}
.woocommerce .wc-gzd-additional-info,.wc-gzd-additional-info{font-size:12.5px; color:var(--muted)}
#ppc-button-ppcp-gateway,.wc-stripe-payment-request-wrapper{max-width:420px}

/* Panel-Zeile in der Explosionszeichnung */
.ff-front .pane-row{display:flex; flex-wrap:wrap; gap:11px; align-items:center}

/* Schmales Kopfband auf der Produktseite */
.ff-band-slim .ff-band-in{padding:20px 24px}
.ff-band-slim h1{display:none}
@media(max-width:820px){ .ff-band-slim .ff-band-in{padding:16px 20px} }

/* Sichere Platzierung: alles ausser Galerie und Zusammenfassung geht ueber
   die volle Breite, damit fremdes Plugin-Markup nichts verschiebt */
.woocommerce div.product > *{grid-column:1 / -1}
.woocommerce div.product > div.images,
.woocommerce div.product > div.woocommerce-product-gallery{grid-column:1 / 2}
.woocommerce div.product > div.summary{grid-column:2 / 3}
.woocommerce div.product > span.onsale{position:absolute; z-index:3; margin:0; top:12px; left:12px;
  background:var(--ember); color:#160802; border-radius:0; padding:5px 9px; font-size:11px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; min-height:0; min-width:0; line-height:1.2}
.woocommerce div.product{position:relative}
@media(max-width:900px){
  .woocommerce div.product > div.images,
  .woocommerce div.product > div.woocommerce-product-gallery,
  .woocommerce div.product > div.summary{grid-column:1 / -1}
}

/* --- Feinschliff Produktseite ------------------------------------------ */
/* Hauptbild in eine Kachel mit festem Verhaeltnis, damit hohe Bauteilfotos
   die Seite nicht auseinanderziehen */
.woocommerce div.product div.woocommerce-product-gallery .woocommerce-product-gallery__image{
  aspect-ratio:4/5; padding:22px; display:flex; align-items:center; justify-content:center}
.woocommerce div.product div.woocommerce-product-gallery .woocommerce-product-gallery__image > a{
  display:flex; width:100%; height:100%; align-items:center; justify-content:center}
.woocommerce div.product div.woocommerce-product-gallery img{
  width:100%; height:100%; object-fit:contain; display:block}

/* Reiterleiste ohne Aufzaehlungspunkte */
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs li{list-style:none}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0}

/* Menge und Knopf nebeneinander */
.woocommerce div.product .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form){
  display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity{margin:0}
@media(max-width:560px){
  .woocommerce div.product .woocommerce-variation-add-to-cart .button{flex:1 1 auto}
}

/* Schmales Band ruhiger */
.ff-band-slim::before{opacity:.5}