/* B2B-portal – pænere layout og bedre mobil (SR 08–09-10-2026). KUN udseende – ingen funktioner er ændret.
   Lægges oven på stilen i index.html (én <link>). */
:root{--radius:8px;--skygge:0 1px 2px rgba(20,34,56,.06),0 4px 14px rgba(20,34,56,.06);--skygge2:0 6px 22px rgba(20,34,56,.12)}

/* ---------- topbjælke: let skygge (ikke fast – en fast bjælke dækkede knapper ved klik, 09-10) ---------- */
.top{border-bottom:0;box-shadow:0 1px 0 #eef0f3,0 6px 18px rgba(20,34,56,.05)}
.top .wrap{height:84px}
.top .logo img{height:50px}
nav.menu a,nav.menu button{border-radius:6px;padding:6px 8px;transition:color .15s,background .15s}
nav.menu a:hover,nav.menu button:hover{background:#f2f7f4}
.dd .list{border-radius:var(--radius);overflow:hidden;box-shadow:var(--skygge2);border-color:#e9ecf0}
.band{background:linear-gradient(90deg,#2e3c51,#34465f)}

/* ---------- knapper og felter ---------- */
.btn{border-radius:6px;transition:filter .15s,transform .05s}
.btn:active{transform:translateY(1px)}
.sbox input{border-radius:6px 0 0 6px}
.sbox .sbtn{border-radius:0 6px 6px 0}
.sres{border-radius:var(--radius);box-shadow:var(--skygge2)}
input:focus,select:focus,textarea:focus,.sbox input:focus{outline:2px solid rgba(0,166,81,.35);outline-offset:0;border-color:var(--groen)}
.felt,label.f input,label.f textarea,label.f select{border-radius:6px}

/* ---------- varekort ---------- */
.card{background:#fff;border-radius:var(--radius);padding:10px;transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:var(--skygge2);transform:translateY(-2px)}
.card .img{border-radius:6px;border-color:#f0f1f3}
.qty{border-radius:18px}

/* ---------- vareside ---------- */
.pd .big{border-radius:var(--radius);border-color:#eef0f3;box-shadow:var(--skygge)}
.maengde,.paavej,.vbknap,.fragt,.note{border-radius:6px}

/* ---------- tabeller, kurv, kasse, konto ---------- */
.tw{border-radius:var(--radius)}
table.t tr:hover td{background:#fafbfc}
.kasse2{border-radius:var(--radius);border-color:#e3e6ea;box-shadow:var(--skygge)}
.firkant{border-radius:6px;overflow:hidden}

/* ---------- MOBIL ---------- */
@media(max-width:700px){
  body{font-size:15px}
  .wrap{padding:0 14px}
  /* kompakt topbjælke: logo + menu på én vandret, rulbar linje */
  .top .wrap{height:auto;padding:8px 14px;flex-wrap:wrap;gap:6px}
  .top .logo img{height:34px}
  /* alle menupunkter synlige (også kurv og log ud) – brydes på flere linjer */
  nav.menu{width:100%;flex-wrap:wrap;gap:5px;font-size:11.5px}
  nav.menu a,nav.menu button{padding:7px 9px;background:#f4f6f8;border-radius:16px}
  nav.menu .kurvlink{background:#e7f6ee}
  .badge{top:-6px;right:-6px}
  .sprog{margin-left:2px}
  .band .wrap{min-height:46px}
  .band h1{font-size:19px}
  .kunde{font-size:12px}
  .back{margin:14px 0 0 2px}
  /* søgning: knapperne deler pladsen */
  .sbar{margin:18px 0 20px}
  .sbar .btn{min-width:0;flex:1 1 45%;height:42px;font-size:11px;padding:0 8px}
  /* varekort: 2 kolonner, mindre luft */
  .grid{gap:14px 10px}
  .card{padding:8px}
  .card .nr{font-size:15px;margin-top:8px}
  /* vareside */
  .pd{gap:18px;margin-bottom:30px}
  .pd h1{font-size:20px}
  .price{font-size:28px;margin:16px 0 14px}
  .spec{margin-top:26px}
  .spec div{padding:11px 0;font-size:14px}
  .pd .buy{position:sticky;bottom:0;background:#fff;padding:10px 0;box-shadow:0 -8px 14px -10px rgba(20,34,56,.25);z-index:5}
  /* kurven som kort i stedet for en bred tabel */
  table.kurvtabel tr:first-child{display:none}
  table.kurvtabel,table.kurvtabel tbody{display:block}
  table.kurvtabel tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:14px 12px;margin-bottom:12px;border:1px solid #e6e9ed;border-radius:var(--radius);box-shadow:var(--skygge);background:#fff}
  table.kurvtabel td{border:0;padding:0;display:flex;align-items:center;gap:6px;font-size:14px;text-align:left!important}
  table.kurvtabel td:nth-child(1){grid-column:1 / -1;padding-bottom:6px;border-bottom:1px solid #f0f1f3}
  table.kurvtabel td:nth-child(1) .thumb{width:48px;height:48px;margin-right:10px}
  table.kurvtabel td:nth-child(n+2)::before{font-family:NHmd;font-size:11px;text-transform:uppercase;color:var(--mut);min-width:64px}
  table.kurvtabel td:nth-child(2)::before{content:'Lager'}
  table.kurvtabel td:nth-child(3)::before{content:'Før'}
  table.kurvtabel td:nth-child(4)::before{content:'Rabat %'}
  table.kurvtabel td:nth-child(5)::before{content:'Pris'}
  table.kurvtabel td:nth-child(6)::before{content:'Antal'}
  table.kurvtabel td:nth-child(7)::before{content:'I alt'}
  html[lang=en] table.kurvtabel td:nth-child(2)::before{content:'Stock'}
  html[lang=en] table.kurvtabel td:nth-child(3)::before{content:'List'}
  html[lang=en] table.kurvtabel td:nth-child(4)::before{content:'Disc. %'}
  html[lang=en] table.kurvtabel td:nth-child(5)::before{content:'Price'}
  html[lang=en] table.kurvtabel td:nth-child(6)::before{content:'Qty'}
  html[lang=en] table.kurvtabel td:nth-child(7)::before{content:'Total'}
  table.kurvtabel td:nth-child(2){flex-wrap:wrap}
  table.kurvtabel td:nth-child(7){font-family:NHmd}
  table.kurvtabel td:nth-child(8){grid-column:1 / -1;justify-content:flex-end}
  table.kurvtabel td:nth-child(8) a{font-size:13px;color:var(--roed);padding:4px 10px;border:1px solid #f1c9c9;border-radius:14px}
  table.kurvtabel td:nth-child(8) a::after{content:' Fjern';font-size:12px}
  html[lang=en] table.kurvtabel td:nth-child(8) a::after{content:' Remove'}
  table.kurvtabel td[colspan]{grid-column:1 / -1}
  table.kurvtabel td[colspan]::before{content:none!important}
  table.kurvtabel .paavej.kort{margin:0;white-space:normal}
  /* kasse og konto */
  .kasse2{padding:16px}
  .cols{gap:22px}
  dl.info{grid-template-columns:40% 1fr}
  .btn{min-height:42px}
}
/* søgeforslag: dæmpes mens nye forslag hentes (09-10) */
.sres.henter{opacity:.55;transition:opacity .12s}
/* ---- Admin: faner, nøgletal, tabeller (SR 09-10) ---- */
.afaner{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:26px 0 0;border-bottom:2px solid #22324a}
.afaner button{border:0;background:#eef1f4;color:#4a5566;padding:9px 14px;font:inherit;font-size:14px;cursor:pointer;border-radius:6px 6px 0 0}
.afaner button.on{background:#22324a;color:#fff;font-weight:600}
.aopd{margin-left:auto;font-size:12px;color:#6b7686}
.abody{padding:18px 0 30px}
.akpi{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:18px}
.akpi div{background:#f4f6f8;border-radius:8px;padding:12px 14px}.akpi b{display:block;font-size:28px;line-height:1.1;color:#22324a}.akpi small{color:#6b7686;font-size:12px}
.akpi .g b{color:#0a9a46}.akpi .o b{color:#b9770e}
.ato{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.abox{border:1px solid #e3e7ec;border-radius:8px;padding:14px 16px;background:#fff}.abox h3,.ah{margin:0 0 10px;font-size:16px;color:#22324a}.ah{margin-top:18px}
.atab{width:100%;border-collapse:collapse;font-size:13.5px}.atab th{text-align:left;color:#6b7686;font-weight:600;border-bottom:1px solid #e3e7ec;padding:6px}.atab td{border-bottom:1px solid #f0f2f5;padding:6px;vertical-align:top}.atab small{color:#6b7686}
.atom{color:#6b7686;font-size:13px}
.ahand{padding:9px 12px;border-radius:6px;margin-bottom:6px;font-size:14px;cursor:pointer;background:#eef1f4}.ahand.roed{background:#fbe5e2;color:#8c2418}.ahand.gul{background:#fdf0dc;color:#7a4f00}.ahand:hover{filter:brightness(.97)}
.aprik{display:inline-block;width:9px;height:9px;border-radius:50%;background:#b8c0ca}.aprik.g{background:#0aa04a}.aprik.y{background:#e0a800}
.atag{display:inline-block;font-size:11.5px;padding:1px 8px;border-radius:9px;background:#eef1f4;color:#4a5566}.atag.g{background:#e3f5ea;color:#0b6b33}.atag.o{background:#fdf0dc;color:#8a5a00}.atag.r{background:#fbe5e2;color:#9b2c1f}
@media(max-width:900px){.akpi{grid-template-columns:repeat(3,1fr)}.ato{grid-template-columns:1fr}.aopd{display:none}}
@media(max-width:560px){.akpi{grid-template-columns:repeat(2,1fr)}.atab{font-size:12.5px}}

/* «Kan passe på» (motortyper) */
.motortyper{margin:14px 0;padding:10px 12px;background:#f3f6f9;border-left:3px solid #2b3a52;font-size:14px;line-height:1.6}.motortyper>span{color:#6b7686;margin-right:4px}.motortyper a{color:#2b3a52;text-decoration:underline}.motortyper .mt-sm{font-size:12px;margin-top:2px}.motortyper .mt-forb{font-size:11.5px;color:#6b7686;margin-top:4px}

/* ---------- Layout-gennemgang 11-10-2026 (små rettelser) ---------- */
/* varekort: kolonner må ikke vokse af lange knaptekster (tysk «IN DEN WARENKORB» gav vandret rulning på mobil) */
.grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1000px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.buy .btn{min-width:0;hyphens:auto;overflow-wrap:anywhere}
/* radiatorbåndet: længere tekster (DE/FR/ES) blev klippet i begge ender */
/* (dansk uændret – SR godkendte båndet 11-10) */
html[lang=en] .kampbaand.rad{width:150px;height:150px}
html[lang=en] .kampbaand.rad span{top:36px;right:-50px;width:230px;font-size:9.5px}
html[lang=de] .kampbaand.rad,html[lang=es] .kampbaand.rad{width:150px;height:150px}
html[lang=de] .kampbaand.rad span,html[lang=es] .kampbaand.rad span{top:36px;right:-50px;width:230px;font-size:8.5px;letter-spacing:0}
html[lang=fr] .kampbaand.rad{width:160px;height:160px}
html[lang=fr] .kampbaand.rad span{top:40px;right:-54px;width:250px;font-size:8.5px;letter-spacing:0}
/* sprogvalg: det valgte sprog markeres; skråstregerne på linje med bogstaverne */
.sprog{align-items:center}
/* fransk menu (længste ord) ramte højre kant ved 1440 px, når Admin-punktet vises */
@media(min-width:641px){html[lang=fr] nav.menu{gap:10px}}
html[lang=da] .sprog a[onclick*="'da'"],html[lang=en] .sprog a[onclick*="'en'"],html[lang=de] .sprog a[onclick*="'de'"],html[lang=fr] .sprog a[onclick*="'fr'"],html[lang=es] .sprog a[onclick*="'es'"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
/* kunde-/leveringsoplysninger: lange tyske ord (USt-IdNr./Firmennummer) brydes i stedet for at løbe ud */
dl.info dt,dl.info dd{overflow-wrap:anywhere;min-width:0}
/* kassen: «Jeg accepterer … betingelserne» som én tekst, der ombrydes pænt */
.accept{align-items:flex-start!important;line-height:1.5}.accept input{margin-top:2px;flex:none}
@media(max-width:700px){
  /* sprogvalg som knapper – skråstregerne imellem fjernes */
  .sprog{font-size:0;gap:4px}
  nav.menu .sprog a{font-size:11.5px}
  html[lang=da] .sprog a[onclick*="'da'"],html[lang=en] .sprog a[onclick*="'en'"],html[lang=de] .sprog a[onclick*="'de'"],html[lang=fr] .sprog a[onclick*="'fr'"],html[lang=es] .sprog a[onclick*="'es'"]{background:#2b3a52;color:#fff;text-decoration:none}
  /* varekort: antal på én linje, knappen i fuld bredde under (større trykflader) */
  .card .buy{flex-wrap:wrap;gap:6px}
  .card .buy .qty{width:100%;justify-content:space-between}
  .card .qty button{width:38px;height:34px;font-size:14px}
  .card .qty input{flex:1;font-size:14px}
  .card .buy .btn{flex:1 1 100%;padding:6px}
  /* renoveringskit: tabellen ruller vandret i stedet for at gøre hele siden bredere */
  .kittabel{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:13px}
  /* kurven: kolonne-etiketterne på tysk, fransk og spansk (de stod på dansk) */
  html[lang=de] table.kurvtabel td:nth-child(2)::before{content:'Lager'}
  html[lang=de] table.kurvtabel td:nth-child(3)::before{content:'Vor Rabatt'}
  html[lang=de] table.kurvtabel td:nth-child(4)::before{content:'Rabatt %'}
  html[lang=de] table.kurvtabel td:nth-child(5)::before{content:'Preis'}
  html[lang=de] table.kurvtabel td:nth-child(6)::before{content:'Menge'}
  html[lang=de] table.kurvtabel td:nth-child(7)::before{content:'Gesamt'}
  html[lang=de] table.kurvtabel td:nth-child(8) a::after{content:' Entfernen'}
  html[lang=fr] table.kurvtabel td:nth-child(2)::before{content:'Stock'}
  html[lang=fr] table.kurvtabel td:nth-child(3)::before{content:'Avant remise'}
  html[lang=fr] table.kurvtabel td:nth-child(4)::before{content:'Remise %'}
  html[lang=fr] table.kurvtabel td:nth-child(5)::before{content:'Prix'}
  html[lang=fr] table.kurvtabel td:nth-child(6)::before{content:'Qté'}
  html[lang=fr] table.kurvtabel td:nth-child(7)::before{content:'Total'}
  html[lang=fr] table.kurvtabel td:nth-child(8) a::after{content:' Retirer'}
  html[lang=es] table.kurvtabel td:nth-child(2)::before{content:'Stock'}
  html[lang=es] table.kurvtabel td:nth-child(3)::before{content:'Antes dto.'}
  html[lang=es] table.kurvtabel td:nth-child(4)::before{content:'Dto. %'}
  html[lang=es] table.kurvtabel td:nth-child(5)::before{content:'Precio'}
  html[lang=es] table.kurvtabel td:nth-child(6)::before{content:'Cant.'}
  html[lang=es] table.kurvtabel td:nth-child(7)::before{content:'Total'}
  html[lang=es] table.kurvtabel td:nth-child(8) a::after{content:' Quitar'}
  /* ordrehistorik/tilbud: oplysninger over knapperne (ikke klemt ned i en smal spalte) */
  .okort{grid-template-columns:1fr;gap:10px;padding:0 4px 28px}
  .okort .kn{justify-content:flex-start}
}
/* ★ 13-10 (UX-gennemgang): mørkere grøn på grønne knapper (hvid tekst 3,2 → 5,4:1) · prisen i køb-bjælken kun på mobil · trykflader ≥ 44 px */
.btn.g{background:#007a3b}
.buypris{display:none}
@media(max-width:700px){.pd .buy .buypris{display:block;font-family:NHmd;font-size:17px;white-space:nowrap}.btn{min-height:44px}.kurvtabel a[title=Fjern]{display:inline-block;min-width:44px;min-height:44px;line-height:44px;text-align:center;font-size:22px}.sprog a{display:inline-block;padding:10px 3px}}
