/* ==========================================================
   Umbau 09/2026 — Workwear
   Eigene Schriften, Burger-Menü, Überlauf-Korrektur, Logo-Vorschau
   ========================================================== */
@font-face{font-family:"Archivo";src:url("../../assets/fonts/archivo-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Archivo";src:url("../../assets/fonts/archivo-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../../assets/fonts/instrument-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../../assets/fonts/instrument-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../../assets/fonts/instrument-sans-latin-600-normal.woff2") format("woff2");font-weight:600 800;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../../assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../../assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500 700;font-display:swap}

:root{
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Consolas,monospace;
  --display:"Archivo","Instrument Sans",system-ui,sans-serif;
}
h1,h2,h3,.brand strong{font-family:var(--display)}
.hero h1{letter-spacing:-.02em}

/* ---- Kein seitliches Scrollen mehr auf dem Handy ---- */
html,body{overflow-x:clip}
.calc,.calc-add,.calc-add>*,.calc-add label,.card,.imgbox{min-width:0}
.calc-add select{width:100%}
.thumbs{max-width:100%}

/* ---- Kopfzeile: Burger-Menü auf schmalen Bildschirmen ---- */
.burger{display:none;background:none;border:2px solid var(--ink);border-radius:var(--radius);
  width:46px;height:42px;cursor:pointer;position:relative;flex:none}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
.burger span:nth-child(1){top:12px}.burger span:nth-child(2){top:19px}.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:860px){
  .nav{flex-wrap:nowrap!important;gap:10px!important;padding:10px 16px!important;position:relative}
  .nav .brand{flex:1 1 auto!important}
  .nav a.link{display:none!important}
  .burger{display:block}
  .nav .tel{font-size:.78rem;padding:9px 11px;margin-left:0!important}
  .nav.offen a.link{display:block!important}
  .nav-panel{display:none}
  .nav.offen .nav-panel{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;
    background:var(--paper);border-bottom:3px solid var(--honey);padding:8px 24px 18px;box-shadow:0 18px 30px rgba(23,23,26,.12)}
  .nav.offen .nav-panel a.link{font-size:1.05rem;padding:13px 0;border-bottom:1px solid var(--line)}
}
@media (min-width:861px){.nav-panel{display:contents}}
@media (max-width:380px){.nav .tel{font-size:0;padding:0;width:42px;height:42px;display:flex;align-items:center;justify-content:center}
  .nav .tel::before{content:"☎";font-size:1.1rem}}

/* ---- Hero straffer ---- */
.hero p.lead{max-width:48ch}
.hero .hero-mark{opacity:.06}
@media (max-width:760px){.hero .hero-mark{display:none}}

/* ==========================================================
   Logo-Vorschau
   ========================================================== */
.lv{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.lv::before{content:"";position:absolute;inset:auto 0 0 0;height:10px;
  background:repeating-linear-gradient(-45deg,var(--honey) 0 16px,var(--ink) 16px 32px)}
.lv h2{color:#fff}
.lv .section-intro{color:#b9b8b2}
.lv-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:start}
@media (max-width:900px){.lv-grid{grid-template-columns:1fr}}
.lv-buehne{position:relative;background:#fff;border-radius:10px;aspect-ratio:1/1;overflow:hidden;
  touch-action:none;user-select:none;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.lv-buehne .lv-ware{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.lv-logo{position:absolute;left:0;top:0;transform:translate(-50%,-50%);cursor:grab;max-width:none;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.12));mix-blend-mode:normal;transition:filter .2s ease}
.lv-logo:active{cursor:grabbing}
.lv-logo[hidden]{display:none}
.lv-logo.weiss{filter:brightness(0) invert(1)}
.lv-logo.schwarz{filter:brightness(0)}
.lv-leer{position:absolute;inset:auto 16px 16px 16px;background:rgba(23,23,26,.86);color:#fff;border-radius:8px;
  padding:12px 14px;font-size:.88rem;text-align:center;pointer-events:none}
.lv-steuer{display:grid;gap:22px}
.lv-schritt{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--honey);margin-bottom:10px;display:block}
.lv-upload{display:flex;align-items:center;justify-content:center;gap:10px;border:2px dashed #55555c;border-radius:10px;
  padding:22px 16px;cursor:pointer;text-align:center;font-weight:700;transition:border-color .2s ease,background .2s ease}
.lv-upload:hover,.lv-upload.drag{border-color:var(--honey);background:rgba(242,169,0,.08)}
.lv-upload input{position:absolute;width:1px;height:1px;opacity:0}
.lv-upload small{display:block;font-weight:400;color:#9d9c96;font-size:.8rem;margin-top:4px}
.lv-waren{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.lv-waren button{background:#fff;border:2px solid transparent;border-radius:8px;padding:4px;cursor:pointer;aspect-ratio:1/1}
.lv-waren button img{width:100%;height:100%;object-fit:contain}
.lv-waren button[aria-pressed="true"]{border-color:var(--honey)}
.lv-chips{display:flex;flex-wrap:wrap;gap:8px}
.lv-chips button{font:inherit;font-size:.86rem;font-weight:600;background:transparent;color:#e7e6e1;border:1.5px solid #4a4a50;
  border-radius:999px;padding:8px 14px;cursor:pointer}
.lv-chips button[aria-pressed="true"]{background:var(--honey);border-color:var(--honey);color:var(--ink)}
.lv-regler{width:100%;accent-color:var(--honey)}
.lv-aktionen{display:flex;flex-wrap:wrap;gap:10px}
.lv-aktionen .btn.ghost{color:#fff;border-color:#fff}
.lv-hinweis{font-size:.8rem;color:#9d9c96;line-height:1.5}
@media (max-width:860px){.nav.offen .nav-panel a.link.bereich{align-self:flex-start;margin-top:14px;border:1.5px solid var(--honey-deep);border-radius:var(--radius);padding:10px 14px}}
.brand strong em{font-style:normal;color:var(--honey-deep)}

/* ---- Prüfung 25.09.: Korrekturen ---- */
/* Produktbilder: height-Attribut 800 blähte jede Karte auf 1.300 px auf */
.card .imgbox img.main{height:auto}
/* Kopfzeile ohne Überlappung */
.nav a.link,.brand strong{white-space:nowrap}
@media (max-width:1200px) and (min-width:861px){.brand span>span{display:none}.nav{gap:18px}.nav a.link{font-size:.86rem}}
/* Handy: im Einstieg nur zwei Knöpfe, Anrufen/WhatsApp stehen in der festen Leiste */
@media (max-width:760px){.hero .cta-row .btn.ghost{display:none}.mobilbar a{font-size:.86rem}}
/* Lesbarkeit */
.card .sizes,.card .colors{font-size:.8rem;color:#55544f}
.lv-status{font-size:.85rem;color:var(--honey);margin-top:8px;min-height:1.2em}
@media (hover:none){.lv-upload .zieh{display:none}}
.nav .brand{flex:none!important}
@media (max-width:860px){.nav .tel{order:2}.burger{order:3}.nav .brand{flex:1 1 auto!important;min-width:0}.brand strong{font-size:.95rem}}
@media (max-width:1100px) and (min-width:861px){.nav a.link[href$="#logo-vorschau"]{display:none}}
/* Telefon in der Kopfzeile bis 480 px nur als Symbol, damit nichts mit der Marke kollidiert */
@media (max-width:480px){.nav .tel{font-size:0!important;padding:0!important;width:42px;height:42px;display:flex!important;align-items:center;justify-content:center;flex:none}
  .nav .tel::before{content:"☎";font-size:1.1rem}
  .brand strong{font-size:.9rem;letter-spacing:.03em}.brand img{width:36px;height:36px}}
@media (max-width:360px){.brand strong{font-size:.8rem}.brand span>span{font-size:.55rem}.nav{gap:6px!important}}
@media (max-width:360px){.brand img{width:30px!important;height:30px!important}.brand{gap:8px!important}.brand strong{font-size:.76rem!important;letter-spacing:.02em}.brand span>span{display:none}.nav .tel,.burger{width:40px!important;height:40px!important}}