/* ══════════════════════════════════════════════════════════
   Mein Onlineshop — Frontend  ·  "WERKSTATT / OXIDE"
   Robuste Industrie-Ästhetik: Oxid-Rost als Leitfarbe, warme
   Leinwand, kondensierte Headlines, Mono für Katalognummern.
   Variablen- & Klassennamen bleiben kompatibel zum Shop-JS.
═══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
    /* Flächen */
    --paper:#e9e3d6;        /* warme Leinwand / Seitengrund */
    --paper2:#ddd4c2;       /* tiefere Leinwand */
    --card:#fbf8f1;         /* Karten / Eingaben (warmes Off-White) */
    --steel:#211f1b;        /* dunkler Stahl (Hero/Footer/Drawer-Kopf) */
    --steel2:#2c2925;
    /* Text */
    --ink:#1d1b17;
    --ink-soft:#6c6457;
    --ink-faint:#9b9384;
    /* Linien */
    --line:#d6cdba;
    --line2:#c2b8a0;
    /* Leitfarbe: Oxid-Rost */
    --rust:#b44a1e;
    --rust-dark:#8c3714;
    --rust-soft:#f4e5dc;
    /* Sekundär: Feld-Olive */
    --field:#4c5a37;
    --field-soft:#e4e7d8;
    /* Akzente */
    --gold:#c4912d;
    --sold:#968d7e;
    /* Form & Schatten */
    --r:7px;
    --shadow:0 1px 2px rgba(33,31,27,.06),0 8px 24px rgba(33,31,27,.07);
    --shadow-lg:0 10px 30px rgba(33,31,27,.16),0 30px 70px rgba(33,31,27,.18);
    /* Schriften */
    --f-display:'Anton',Impact,sans-serif;
    --f-head:'Saira Condensed','Anton',sans-serif;
    --f-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
    --f-mono:'Spline Sans Mono',ui-monospace,monospace;
}

html{font-size:16px;border-top:5px solid var(--rust);}    /* "Produktionslinie"-Akzent ganz oben */
body{
    font-family:var(--f-body);
    color:var(--ink);line-height:1.6;min-height:100vh;
    background-color:var(--paper);
    /* feine Werkstatt-Textur: warmer Verlauf + dezentes diagonales Hatch */
    background-image:
        radial-gradient(ellipse 100% 55% at 50% -8%,rgba(180,74,30,.07),transparent 62%),
        repeating-linear-gradient(135deg,rgba(33,31,27,.018) 0 2px,transparent 2px 9px);
}
h1,h2,h3,.display{font-family:var(--f-head);font-weight:700;letter-spacing:.3px;line-height:1.1;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
::selection{background:var(--rust);color:#fff;}

.wrap{max-width:1180px;margin:0 auto;padding:0 1.4rem;}

/* ════════ Header ════════ */
.site-header{
    background:var(--card);
    border-bottom:2px solid var(--ink);
    position:relative;
}
.header-inner{display:flex;align-items:center;gap:1.75rem;padding:1.5rem 0 1.4rem;}
.site-logo-link{display:block;line-height:0;flex-shrink:0;}
.site-logo{width:min(210px,42vw);height:auto;display:block;filter:drop-shadow(0 3px 8px rgba(33,31,27,.18));}
.header-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.85rem;}
.header-top{display:flex;align-items:center;gap:1rem;}
.header-search{margin:0 !important;max-width:none;width:100%;}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start;}
.header-top .chips{flex:1 1 auto;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}

/* Suche */
.search-box{position:relative;margin-bottom:1rem;}
.search-box i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--rust);}
.search-box input{
    width:100%;padding:14px 16px 14px 44px;font-size:.95rem;font-family:inherit;
    background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);
    color:var(--ink);outline:none;transition:box-shadow .15s,border-color .15s;
}
.search-box input:focus{border-color:var(--rust);box-shadow:4px 4px 0 rgba(180,74,30,.18);}
.search-box input::placeholder{color:var(--ink-faint);}

/* Filter-Chips */
.chip{
    padding:7px 16px;font-size:.78rem;font-weight:600;cursor:pointer;
    font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.4px;
    background:var(--card);border:1.5px solid var(--line2);border-radius:99px;
    color:var(--ink-soft);transition:all .15s;white-space:nowrap;
}
.chip:hover{border-color:var(--rust);color:var(--rust);}
.chip.active{background:var(--ink);border-color:var(--ink);color:#fff;}

/* ════════ Hero ════════ */
.hero{
    background:var(--steel);
    color:#f3ede2;
    border-bottom:2px solid var(--ink);
    position:relative;overflow:hidden;
}
.hero::before{   /* Blueprint-Raster */
    content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
    background-image:
        linear-gradient(rgba(243,237,226,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(243,237,226,.05) 1px,transparent 1px);
    background-size:34px 34px;
    -webkit-mask-image:radial-gradient(ellipse 80% 100% at 80% 0%,#000,transparent 75%);
            mask-image:radial-gradient(ellipse 80% 100% at 80% 0%,#000,transparent 75%);
}
.hero::after{    /* Oxid-Streifen rechts */
    content:"";position:absolute;top:0;right:0;bottom:0;width:42%;pointer-events:none;
    background:repeating-linear-gradient(135deg,rgba(180,74,30,.16) 0 14px,transparent 14px 30px);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000);
}
.hero-inner{position:relative;z-index:1;padding:3.1rem 1.4rem 3.3rem;}
.hero-kicker{
    font-family:var(--f-mono);font-size:.72rem;letter-spacing:2.5px;text-transform:uppercase;
    color:var(--rust);font-weight:500;margin-bottom:.9rem;
    display:inline-flex;align-items:center;gap:.6rem;
}
.hero-kicker::before{content:"";width:26px;height:2px;background:var(--rust);}
.hero-title{
    font-family:var(--f-display);font-size:clamp(2.6rem,7vw,4.6rem);line-height:.92;
    letter-spacing:.5px;text-transform:uppercase;color:#f6f1e8;max-width:18ch;
}
.hero-title span{color:var(--rust);-webkit-text-stroke:0;}
.hero-sub{
    margin:1.1rem 0 0;max-width:54ch;font-size:1.02rem;line-height:1.6;
    color:rgba(243,237,226,.78);
}
.hero-specs{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.6rem;}
.hero-specs span{display:inline-flex;align-items:center;gap:.55rem;font-size:.86rem;font-weight:600;color:rgba(243,237,226,.9);}
.hero-specs i{color:var(--rust);}

/* ════════ Ergebnis-Zeile ════════ */
.result-info{
    font-family:var(--f-mono);font-size:.74rem;letter-spacing:.6px;text-transform:uppercase;
    color:var(--ink-soft);padding:1.4rem 0 .6rem;
    display:flex;align-items:center;gap:.6rem;
}
.result-info::before{content:"▸";color:var(--rust);}

/* ════════ Produkt-Grid ════════ */
.grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
    gap:20px;padding:.4rem 0 3.5rem;
}
.product{
    background:var(--card);border:1.5px solid var(--line2);border-radius:var(--r);
    overflow:hidden;cursor:pointer;display:flex;flex-direction:column;position:relative;
    box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s,border-color .16s;
}
.product::before{   /* Oxid-Kante oben, erscheint bei Hover */
    content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--rust);
    transform:scaleX(0);transform-origin:left;transition:transform .22s ease;z-index:3;
}
.product:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--ink);}
.product:hover::before{transform:scaleX(1);}
.product-imgwrap{position:relative;}
.product-img{
    aspect-ratio:4/3;width:100%;height:100%;object-fit:contain;background:var(--paper2);
    border-bottom:1.5px solid var(--line);
}
.product-img.placeholder{
    display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:2.4rem;
    background:repeating-linear-gradient(45deg,var(--paper2),var(--paper2) 13px,#d2c8b3 13px,#d2c8b3 26px);
}
.product-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1;}
.product-cat{
    font-family:var(--f-mono);font-size:.66rem;font-weight:500;text-transform:uppercase;letter-spacing:1px;
    color:var(--rust);display:inline-flex;align-items:center;gap:6px;
}
.product-title{font-family:var(--f-head);font-weight:600;font-size:1.18rem;letter-spacing:.3px;text-transform:uppercase;color:var(--ink);}
.product-desc{font-size:.85rem;color:var(--ink-soft);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.product-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px dashed var(--line2);}
.price{font-family:var(--f-head);font-size:1.5rem;font-weight:700;color:var(--ink);letter-spacing:.5px;}
.price.ask{font-family:var(--f-body);font-size:.9rem;color:var(--ink-soft);font-weight:600;text-transform:none;letter-spacing:0;}

.badge{font-family:var(--f-mono);font-size:.62rem;font-weight:500;text-transform:uppercase;letter-spacing:.8px;padding:4px 9px;border-radius:4px;}
.badge-reserved{background:var(--gold);color:#3a2a08;}
.badge-sold{background:var(--sold);color:#fff;}
.img-badge{position:absolute;top:11px;left:11px;}

/* ════════ Detail-Overlay ════════ */
.overlay{
    display:none;position:fixed;inset:0;z-index:500;padding:1.5rem;
    background:rgba(20,18,15,.62);backdrop-filter:blur(5px);
    align-items:center;justify-content:center;overflow-y:auto;
}
.overlay.show{display:flex;}
.detail{
    width:780px;max-width:100%;background:var(--card);border-radius:var(--r);overflow:hidden;
    border:2px solid var(--ink);box-shadow:var(--shadow-lg);animation:pop .22s cubic-bezier(.34,1.4,.64,1);
    display:flex;max-height:90vh;
}
.detail>#detailMedia{flex:1 1 50%;min-width:0;align-self:stretch;}
@keyframes pop{from{transform:scale(.96);opacity:0;}to{transform:scale(1);opacity:1;}}
.detail-img{width:100%;height:100%;min-height:330px;object-fit:cover;background:var(--paper2);}
.detail-img.placeholder{
    display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:3.5rem;
    background:repeating-linear-gradient(45deg,var(--paper2),var(--paper2) 15px,#d2c8b3 15px,#d2c8b3 30px);
}
.detail-body{padding:0;overflow:hidden;display:flex;flex-direction:column;flex:1 1 50%;min-height:0;}
.detail-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:.6rem;padding:1.7rem 1.8rem .7rem;scrollbar-width:thin;scrollbar-color:var(--line2) transparent;}
.detail-scroll::-webkit-scrollbar{width:7px;}
.detail-scroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px;}
.detail-scroll::-webkit-scrollbar-track{background:transparent;}
.detail-cat{font-family:var(--f-mono);font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:1.2px;color:var(--rust);}
.detail-body h2{font-size:1.85rem;color:var(--ink);letter-spacing:.3px;}
.detail-price{font-family:var(--f-head);font-size:2rem;font-weight:700;color:var(--ink);letter-spacing:.5px;}
.detail-desc{font-size:.94rem;color:var(--ink-soft);white-space:pre-wrap;margin:.3rem 0 .2rem;line-height:1.65;}
.detail-ship{font-size:.84rem;color:var(--ink-soft);display:flex;align-items:center;gap:7px;margin:.1rem 0 .4rem;}
.detail-ship i{color:var(--rust);}
/* Echter fester Aktions-Fuß: außerhalb des Scrollbereichs, immer ganz unten */
.contact-row{flex:none;display:flex;flex-direction:column;gap:10px;padding:.95rem 1.8rem 1.4rem;background:var(--card);border-top:1.5px solid var(--line);}
.btn-contact{
    display:flex;align-items:center;justify-content:center;gap:9px;
    padding:14px 18px;border-radius:var(--r);font-size:.86rem;font-weight:700;font-family:var(--f-head);
    text-transform:uppercase;letter-spacing:.6px;
    transition:transform .15s,box-shadow .15s,opacity .15s,background .15s;border:none;cursor:pointer;
}
.btn-mail{background:var(--rust);color:#fff;}
.btn-contact:hover{transform:translateY(-2px);}
.detail-hint{font-size:.74rem;color:var(--ink-faint);text-align:center;margin-top:2px;}
.detail-close{
    position:absolute;top:14px;right:16px;width:36px;height:36px;border-radius:50%;
    background:var(--card);border:2px solid var(--ink);color:var(--ink);
    font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:all .15s;
}
.detail-close:hover{background:var(--rust);border-color:var(--rust);color:#fff;transform:rotate(90deg);}

/* ════════ Zustände ════════ */
.state{padding:4rem 1rem;text-align:center;color:var(--ink-faint);}
.state i{font-size:2.6rem;display:block;margin-bottom:1rem;color:var(--line2);}
.state p{font-size:.95rem;}

/* ════════ Footer ════════ */
.site-footer{
    border-top:2px solid var(--ink);padding:2rem 0;margin-top:2.5rem;
    background:var(--steel);color:rgba(243,237,226,.7);
}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.8rem;}
.footer-links{display:flex;gap:1.3rem;flex-wrap:wrap;}
.footer-links a{
    color:rgba(243,237,226,.7);transition:color .15s;
    font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;
}
.footer-links a:hover{color:var(--rust);}
.site-footer a{color:rgba(243,237,226,.92);}
.site-footer a:hover{color:var(--rust);}

/* ════════ Mobiler Warenkorb-FAB ════════ */
.cart-fab{
    display:none;position:fixed;bottom:1.4rem;right:1.2rem;z-index:500;
    width:60px;height:60px;border-radius:50%;
    background:var(--rust);color:#fff;font-size:1.4rem;border:2px solid var(--ink);cursor:pointer;
    box-shadow:0 8px 22px rgba(140,55,20,.45);align-items:center;justify-content:center;
    transition:transform .15s;
}
.cart-fab:active{transform:scale(.93);}
.cart-fab-count{
    position:absolute;top:-5px;right:-5px;min-width:22px;height:22px;padding:0 5px;border-radius:99px;
    background:var(--ink);color:#fff;font-size:.7rem;font-weight:700;font-family:var(--f-mono);
    display:flex;align-items:center;justify-content:center;border:2px solid var(--card);
}
.cart-fab-count[hidden]{display:none;}

/* ══════════════════════════════════════════════════════════
   WARENKORB & KASSE
═══════════════════════════════════════════════════════════ */
.cart-btn{
    position:relative;flex-shrink:0;width:50px;height:50px;border-radius:var(--r);
    background:var(--ink);border:2px solid var(--ink);color:#fff;font-size:1.15rem;cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.cart-btn:hover{background:var(--rust);border-color:var(--rust);transform:translateY(-1px);}
.cart-count{
    position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;padding:0 5px;border-radius:99px;
    background:var(--rust);color:#fff;font-size:.7rem;font-weight:700;font-family:var(--f-mono);
    display:flex;align-items:center;justify-content:center;border:2px solid var(--card);
}
.cart-count[hidden]{display:none;}

/* Quick-Add auf Karte */
.card-add{display:flex;align-items:center;}
.btn-add-sm{
    width:38px;height:38px;border-radius:var(--r);border:1.5px solid var(--ink);background:var(--ink);color:#fff;
    font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.btn-add-sm:hover{background:var(--rust);border-color:var(--rust);transform:translateY(-2px);}

/* Detail: primärer Add-Button + Kontaktlinks */
.btn-add{background:var(--rust);color:#fff;}
.btn-add:hover{background:var(--rust-dark);}
.btn-add:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.detail-contact{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:4px;}
.detail-contact a{font-size:.8rem;color:var(--ink-soft);display:inline-flex;align-items:center;gap:6px;font-weight:600;}
.detail-contact a:hover{color:var(--rust);}
.detail-unavail{display:flex;align-items:center;gap:8px;justify-content:center;font-size:.85rem;color:var(--ink-soft);background:var(--paper2);border:1.5px solid var(--line2);border-radius:var(--r);padding:13px;}

/* Drawer */
.cart-overlay{display:none;position:fixed;inset:0;z-index:600;background:rgba(20,18,15,.62);backdrop-filter:blur(5px);}
.cart-overlay.show{display:block;}
.cart-panel{position:absolute;top:0;right:0;height:100%;width:440px;max-width:100%;background:var(--paper);box-shadow:-14px 0 54px rgba(20,18,15,.4);display:flex;flex-direction:column;animation:slideIn .25s ease;border-left:2px solid var(--ink);}
@keyframes slideIn{from{transform:translateX(100%);}to{transform:translateX(0);}}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.4rem;border-bottom:2px solid var(--ink);background:var(--steel);color:#f3ede2;}
.cart-head .detail-close{background:transparent;border-color:rgba(243,237,226,.4);color:#f3ede2;}
.cart-head .detail-close:hover{background:var(--rust);border-color:var(--rust);color:#fff;}
.cart-title{font-family:var(--f-head);font-size:1.2rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;display:flex;align-items:center;gap:10px;}
.cart-content{flex:1;overflow-y:auto;padding:1.1rem 1.2rem;display:flex;flex-direction:column;}

/* Warenkorb-Zeilen */
.cart-lines{display:flex;flex-direction:column;gap:10px;}
.cart-line{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1.5px solid var(--line2);border-radius:var(--r);padding:11px;}
.cart-line.bad{opacity:.85;border-color:var(--rust);}
.cart-thumb{width:60px;height:50px;border-radius:5px;background:var(--paper2);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);overflow:hidden;}
.cart-thumb img{width:100%;height:100%;object-fit:cover;}
.cart-line-info{flex:1;min-width:0;}
.cart-line-name{font-size:.9rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cart-line-sub{font-size:.74rem;color:var(--ink-soft);margin:2px 0 7px;}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line2);border-radius:5px;overflow:hidden;}
.qty button{width:28px;height:28px;border:none;background:var(--paper);color:var(--ink-soft);font-size:.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;}
.qty button:hover:not(:disabled){background:var(--ink);color:#fff;}
.qty button:disabled{opacity:.35;cursor:not-allowed;}
.qty span{min-width:32px;text-align:center;font-size:.86rem;font-weight:700;font-family:var(--f-mono);}
.cart-line-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.cart-line-sum{font-family:var(--f-head);font-size:1.05rem;font-weight:700;color:var(--ink);}
.icon-x{width:30px;height:30px;border-radius:5px;border:1.5px solid transparent;background:transparent;color:var(--ink-faint);cursor:pointer;font-size:.78rem;transition:all .15s;}
.icon-x:hover{color:#fff;background:var(--rust);}

/* Footer / Summe / Buttons */
.cart-foot{margin-top:auto;padding-top:1rem;display:flex;flex-direction:column;gap:11px;}
.cart-total{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-head);font-size:1.4rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;}
.cart-total span:last-child{color:var(--rust);}
.cart-hint{font-size:.76rem;color:var(--ink-soft);display:flex;align-items:center;gap:7px;}
.cart-foot .btn-contact{width:100%;}

/* Checkout */
.back-to-cart{background:none;border:none;color:var(--ink-soft);font-size:.78rem;cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-bottom:.9rem;padding:4px 0;font-weight:600;}
.back-to-cart:hover{color:var(--rust);}
.checkout-summary{background:var(--card);border:1.5px solid var(--line2);border-radius:var(--r);padding:13px 15px;margin-bottom:1rem;}
.sum-line{display:flex;justify-content:space-between;font-size:.84rem;color:var(--ink-soft);padding:3px 0;}
.sum-line.total{border-top:1px dashed var(--line2);margin-top:6px;padding-top:9px;font-family:var(--f-head);font-size:1.15rem;font-weight:700;text-transform:uppercase;color:var(--ink);}
.sum-line.total span:last-child{color:var(--rust);}
#orderForm{display:flex;flex-direction:column;gap:12px;}
.fld{display:flex;flex-direction:column;gap:5px;flex:1;}
.fld label{font-family:var(--f-mono);font-size:.68rem;font-weight:500;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-soft);}
.fld .opt{text-transform:none;letter-spacing:0;color:var(--ink-faint);}
.fld-row{display:flex;gap:11px;}
.cinp{width:100%;padding:11px 12px;background:var(--card);border:1.5px solid var(--line2);border-radius:5px;color:var(--ink);font-size:.9rem;outline:none;font-family:inherit;transition:border-color .15s,box-shadow .15s;}
.cinp:focus{border-color:var(--rust);box-shadow:0 0 0 3px rgba(180,74,30,.14);}
textarea.cinp{resize:vertical;}
.pay-opts{display:flex;flex-direction:column;gap:8px;}
.pay-opt{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1.5px solid var(--line2);border-radius:5px;cursor:pointer;font-size:.88rem;font-weight:600;background:var(--card);transition:all .15s;}
.pay-opt:hover{border-color:var(--rust);}
.pay-opt input{accent-color:var(--rust);}
.pay-opt:has(input:checked){border-color:var(--rust);background:var(--rust-soft);}
.addr-block{display:flex;flex-direction:column;gap:12px;}

/* Bestätigung */
.order-done{text-align:center;padding:2.2rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;}
.done-ico{font-size:3.2rem;color:var(--field);}
.order-done h3{font-size:1.7rem;}
.order-done p{font-size:.9rem;color:var(--ink-soft);}
.order-no{background:var(--card);border:1.5px dashed var(--rust);border-radius:var(--r);padding:13px 24px;margin:.7rem 0;font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.8px;color:var(--ink-soft);}
.order-no strong{display:block;margin-top:4px;font-family:var(--f-head);font-size:1.5rem;letter-spacing:1px;color:var(--rust);}
.done-total{font-size:1.05rem!important;}
.order-done .btn-contact{margin-top:.6rem;}

/* ══════════════════════════════════════════════════════════
   MOBIL  (≤ 640px)
══════════════════════════════════════════════════════════ */
@media(max-width:640px){
    html,body{overflow-x:hidden;}
    body{background-image:radial-gradient(ellipse 120% 40% at 50% 0%,rgba(180,74,30,.08),transparent 60%);}

    .site-header{position:sticky;top:0;z-index:100;box-shadow:0 2px 10px rgba(33,31,27,.12);}
    .header-inner{flex-direction:column;align-items:stretch;gap:0;padding:0;}
    .site-logo-link{padding:11px 16px 6px;align-self:flex-start;}
    .site-logo{height:60px;width:auto;}
    .cart-btn{display:none;}
    .header-main{gap:0;}
    .header-top{padding:9px 12px;gap:7px;overflow:hidden;border-top:1.5px solid var(--line2);}
    .header-search{margin:0!important;padding:0 12px 11px;}
    .header-search input{font-size:16px;padding:12px 12px 12px 42px;}
    .header-search i{left:26px;}

    .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:7px;}
    .chips::-webkit-scrollbar{display:none;}
    .chip{flex-shrink:0;}

    /* Hero kompakter */
    .hero-inner{padding:2rem 1.2rem 2.2rem;}
    .hero-title{font-size:clamp(2.1rem,11vw,3rem);}
    .hero-sub{font-size:.94rem;}
    .hero-specs{gap:.5rem 1.1rem;margin-top:1.1rem;}
    .hero-specs span{font-size:.8rem;}

    .wrap{padding:0 11px;}
    .grid{grid-template-columns:1fr 1fr;gap:11px;padding:.4rem 0 6rem;}
    .product-body{padding:11px 12px 13px;}
    .product-title{font-size:1rem;}
    .product-desc{display:none;}
    .price{font-size:1.25rem;}
    .btn-add-sm{width:34px;height:34px;font-size:.85rem;}

    .overlay{padding:.5rem;}
    .detail{flex-direction:column;max-height:92vh;}
    .detail>#detailMedia{flex:0 0 auto;align-self:auto;}
    .detail-body{flex:1 1 auto;}
    .detail-img{min-height:160px;max-height:230px;}
    .detail-body{padding:1.2rem 1.3rem;}
    .detail-body h2{font-size:1.45rem;}
    .detail-price{font-size:1.6rem;}

    .cart-panel{width:100%;border-radius:16px 16px 0 0;border-left:none;border-top:3px solid var(--rust);top:auto;bottom:0;height:90%;}
    @keyframes slideIn{from{transform:translateY(100%);}to{transform:translateY(0);}}

    .site-footer{padding:1.4rem 0;margin-top:1.4rem;}
    .footer-inner{flex-direction:column;align-items:center;gap:.6rem;text-align:center;}
    .footer-links{gap:1rem;justify-content:center;}
    .result-info{padding:.7rem 0 .3rem;}
    .cart-fab{display:flex;}
}

/* ══════════════════════════════════════════════════════════
   MOBILE GLOW-UP  ·  App-Feel
══════════════════════════════════════════════════════════ */
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.product{animation:fadeIn .22s ease;}
@media(hover:none){
    *{-webkit-tap-highlight-color:transparent;}
    .cart-content,.chips,body{-webkit-overflow-scrolling:touch;}
}

/* Schwebende Warenkorb-Leiste (nur Handy, nur wenn etwas drin ist) */
.mcart{
    display:none;position:fixed;z-index:550;
    left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));
    align-items:center;justify-content:space-between;gap:1rem;
    padding:13px 16px 13px 18px;border-radius:14px;cursor:pointer;
    background:var(--ink);color:#f3ede2;border:2px solid var(--ink);
    box-shadow:0 12px 32px rgba(20,18,15,.42);
    animation:mcartUp .28s cubic-bezier(.34,1.4,.64,1);
}
@keyframes mcartUp{from{transform:translateY(135%);}to{transform:translateY(0);}}
.mcart:active{transform:scale(.985);}
.mcart-left{display:flex;align-items:center;gap:11px;font-weight:700;font-size:.92rem;}
.mcart-badge{min-width:25px;height:25px;padding:0 7px;border-radius:99px;background:var(--rust);color:#fff;font-family:var(--f-mono);font-size:.76rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;}
.mcart-right{display:flex;align-items:center;gap:10px;font-family:var(--f-head);font-weight:700;font-size:1.08rem;letter-spacing:.4px;color:var(--rust);text-transform:uppercase;white-space:nowrap;}
.mcart-right i{font-size:.82rem;}

@media(max-width:640px){
    html{scroll-behavior:smooth;}

    /* Hero kompakt & wuchtig */
    .hero-inner{padding:1.9rem 1.2rem 2.1rem;}
    .hero-kicker{font-size:.66rem;letter-spacing:2px;}
    .hero-title{font-size:clamp(2.3rem,13vw,3.2rem);}
    .hero-sub{font-size:.92rem;max-width:38ch;}
    .hero-specs{flex-direction:column;gap:.5rem;margin-top:1.2rem;}
    .hero-specs span{font-size:.85rem;}

    /* Produktkarten: tastbar, App-Feedback */
    .grid{padding-bottom:7.5rem;}
    .product{transition:transform .12s ease,box-shadow .12s ease;}
    .product:active{transform:scale(.975);}
    .product:hover{transform:none;}                 /* kein Hover-Lift auf Touch */
    .product:hover::before{transform:scaleX(0);}
    .product-title{font-size:1.05rem;}
    .price{font-size:1.3rem;}
    .product-cat{font-size:.6rem;}

    /* Chips: Snap-Scrollen */
    .chips{scroll-snap-type:x proximity;padding-bottom:2px;}
    .chip{scroll-snap-align:start;padding:8px 16px;}
    .chip:active{transform:scale(.95);}

    /* Bottom-Sheet: Greif-Indikator + Safe-Area */
    .cart-panel{padding-bottom:env(safe-area-inset-bottom,0px);}
    .cart-panel::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:46px;height:5px;border-radius:99px;background:rgba(243,237,226,.55);z-index:6;}
    .cart-head{padding-top:1.6rem;}
    .cart-fab{width:62px;height:62px;bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));}

    /* Warenkorb-Leiste sichtbar machen, FAB dann ausblenden */
    .mcart.show{display:flex;}
    .mcart.show ~ .cart-fab{display:none!important;}
}

/* ── Selbst gehostete Webfonts (Google, latin) ── */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Anton-400.woff2) format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/HankenGrotesk-400_500_600_700.woff2) format('woff2');}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/SairaCondensed-600.woff2) format('woff2');}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/SairaCondensed-700.woff2) format('woff2');}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/SplineSansMono-500.woff2) format('woff2');}
/* ── Font Awesome (Subset, selbst gehostet) ── */
@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/fa-solid-900.woff2) format("woff2")}
@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/fa-regular-400.woff2) format("woff2")}
@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/fa-brands-400.woff2) format("woff2")}
.fa,.fas,.fa-solid,.far,.fa-regular,.fab,.fa-brands{-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}
.fa-solid,.fas{font-family:"Font Awesome 6 Free";font-weight:900}
.fa-regular,.far{font-family:"Font Awesome 6 Free";font-weight:400}
.fa-brands,.fab{font-family:"Font Awesome 6 Brands";font-weight:400}
.fa-spin{animation:fa-spin 2s linear infinite}@keyframes fa-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.fa-meta:before{content:"\e49b"}
.fa-1:before{content:"\31"}
.fa-0:before{content:"\30"}
.fa-l:before{content:"\4c"}
.fa-m:before{content:"\4d"}
.fa-link:before{content:"\f0c1"}
.fa-whatsapp:before{content:"\f232"}
.fa-facebook:before{content:"\f09a"}
.fa-image:before{content:"\f03e"}
.fa-twitter:before{content:"\f099"}
.fa-cloudflare:before{content:"\e07d"}
.fa-icons:before{content:"\f86d"}
.fa-print:before{content:"\f02f"}
.fa-display:before{content:"\e163"}
.fa-font-awesome:before{content:"\f2b4"}
.fa-6:before{content:"\36"}
.fa-5:before{content:"\35"}
.fa-store:before{content:"\f54e"}
.fa-7:before{content:"\37"}
.fa-google:before{content:"\f1a0"}
.fa-i:before{content:"\49"}
.fa-filter:before{content:"\f0b0"}
.fa-3:before{content:"\33"}
.fa-2:before{content:"\32"}
.fa-n:before{content:"\4e"}
.fa-t:before{content:"\54"}
.fa-b:before{content:"\42"}
.fa-pager:before{content:"\f815"}
.fa-8:before{content:"\38"}
.fa-tractor:before{content:"\f722"}
.fa-a:before{content:"\41"}
.fa-h:before{content:"\48"}
.fa-xmark:before{content:"\f00d"}
.fa-header:before{content:"\f1dc"}
.fa-v:before{content:"\56"}
.fa-4:before{content:"\34"}
.fa-opencart:before{content:"\f23d"}
.fa-cart-shopping:before{content:"\f07a"}
.fa-magnifying-glass:before{content:"\f002"}
.fa-search:before{content:"\f002"}
.fa-z:before{content:"\5a"}
.fa-f:before{content:"\46"}
.fa-r:before{content:"\52"}
.fa-section:before{content:"\e447"}
.fa-p:before{content:"\50"}
.fa-circle-check:before{content:"\f058"}
.fa-truck:before{content:"\f0d1"}
.fa-comments:before{content:"\f086"}
.fa-spinner:before{content:"\f110"}
.fa-handshake:before{content:"\f2b5"}
.fa-phone:before{content:"\f095"}
.fa-s:before{content:"\53"}
.fa-ghost:before{content:"\f6e2"}
.fa-repeat:before{content:"\f363"}
.fa-star:before{content:"\f005"}
.fa-try:before{content:"\e2bb"}
.fa-x:before{content:"\58"}
.fa-g:before{content:"\47"}
.fa-k:before{content:"\4b"}
.fa-box:before{content:"\f466"}
.fa-map:before{content:"\f279"}
.fa-e:before{content:"\45"}
.fa-tags:before{content:"\f02c"}
.fa-copy:before{content:"\f0c5"}
.fa-arrow-right:before{content:"\f061"}
.fa-eur:before{content:"\f153"}
.fa-key:before{content:"\f084"}
.fa-c:before{content:"\43"}
.fa-add:before{content:"\2b"}
.fa-d:before{content:"\44"}
.fa-remove:before{content:"\f00d"}
.fa-paypal:before{content:"\f1ed"}
.fa-js:before{content:"\f3b8"}
.fa-cat:before{content:"\f6be"}
.fa-triangle-exclamation:before{content:"\f071"}
.fa-list:before{content:"\f03a"}
.fa-box-open:before{content:"\f49e"}
.fa-images:before{content:"\f302"}
.fa-gears:before{content:"\f085"}
.fa-tag:before{content:"\f02b"}
.fa-cart-plus:before{content:"\f217"}
.fa-arrow-left:before{content:"\f060"}
.fa-y:before{content:"\59"}
.fa-circle-info:before{content:"\f05a"}
.fa-envelope:before{content:"\f0e0"}
.fa-trash:before{content:"\f1f8"}
.fa-minus:before{content:"\f068"}
.fa-plus:before{content:"\2b"}
.fa-cash-register:before{content:"\f788"}
.fa-radio:before{content:"\f8d7"}
.fa-paper-plane:before{content:"\f1d8"}
.fa-lock:before{content:"\f023"}
.fa-city:before{content:"\f64f"}
.fa-message:before{content:"\f27a"}
.fa-shop:before{content:"\f54f"}
.fa-dashboard:before{content:"\f624"}
.fa-o:before{content:"\4f"}
.fa-upload:before{content:"\f093"}
.fa-font:before{content:"\f031"}
.fa-ellipsis:before{content:"\f141"}
.fa-info:before{content:"\f129"}
.fa-italic:before{content:"\f033"}
.fa-th:before{content:"\f00a"}
.fa-mobile:before{content:"\f3ce"}
.fa-circle-exclamation:before{content:"\f06a"}
.fa-right-to-bracket:before{content:"\f2f6"}
.fa-bars:before{content:"\f0c9"}
.fa-bell:before{content:"\f0f3"}
.fa-arrow-up-right-from-square:before{content:"\f08e"}
.fa-right-from-bracket:before{content:"\f2f5"}
.fa-gauge:before{content:"\f624"}
.fa-boxes-stacked:before{content:"\f468"}
.fa-receipt:before{content:"\f543"}
.fa-file-invoice-dollar:before{content:"\f571"}
.fa-house:before{content:"\f015"}
.fa-clock:before{content:"\f017"}
.fa-euro-sign:before{content:"\f153"}
.fa-bolt:before{content:"\f0e7"}
.fa-eye:before{content:"\f06e"}
.fa-pen-to-square:before{content:"\f044"}
.fa-cloud-arrow-up:before{content:"\f0ee"}
.fa-file:before{content:"\f15b"}
.fa-check:before{content:"\f00c"}
.fa-arrows-rotate:before{content:"\f021"}
.fa-download:before{content:"\f019"}
.fa-trash-can:before{content:"\f2ed"}
.fa-circle-xmark:before{content:"\f057"}
.fa-pen:before{content:"\f304"}
.fa-edit:before{content:"\f044"}
.fa-save:before{content:"\f0c7"}
.fa-user:before{content:"\f007"}
.fa-money-bill-wave:before{content:"\f53a"}
.fa-location-dot:before{content:"\f3c5"}
.fa-comment:before{content:"\f075"}
.fa-sort:before{content:"\f0dc"}
.fa-table:before{content:"\f0ce"}
.fa-w:before{content:"\57"}
.fa-server:before{content:"\f233"}
.fa-u:before{content:"\55"}
.fa-location:before{content:"\f601"}
.fa-gem:before{content:"\f3a5"}
.fa-9:before{content:"\39"}