/* INKiESS Belegefach-Konfigurator 1.2.1 – erzeugt aus head.html, nur innerhalb von #bfk-app gültig */
#bfk-app{
  --blau:#003366; --blau-2:#00406F; --text:#454545; --text-2:#6b6f74;
  --flaeche:#E3E3E3; --kreis:#C6C6C6; --gelb:#FFF388; --gelb-30:#FFF9C7;
  --grund:#F9FAFB; --weiss:#FFFFFF; --linie:#DADDE0; --alert:#E50019;
  --f-text:'Palanquin', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --r:6px;
  
font-family:var(--f-text);font-size:16px;line-height:1.55;color:var(--text);margin:28px 0 36px;text-align:left}
#bfk-app *,#bfk-app *::before,#bfk-app *::after{box-sizing:border-box}
#bfk-app [hidden]{display:none!important}
#bfk-app h2,#bfk-app h3{color:var(--blau);font-weight:600;line-height:1.2;text-wrap:balance;margin:0;font-family:var(--f-text);text-transform:none;letter-spacing:normal}
#bfk-app p{margin:0}
#bfk-app ul,#bfk-app li{margin:0;list-style:none}
#bfk-app table,#bfk-app th,#bfk-app td{border:0;background:none}
#bfk-app button{font:inherit;color:inherit;cursor:pointer;text-transform:none;letter-spacing:normal;line-height:1.3;min-height:0;margin:0;width:auto;height:auto;float:none}
#bfk-app button:focus-visible,#bfk-app a:focus-visible{outline:3px solid var(--blau);outline-offset:2px}
#bfk-app .mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
#bfk-app .lade{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-2);font-size:14px;pointer-events:none}
#bfk-app.bereit .lade{display:none}
.ziehchip{border-color:#003366!important}
#bfk-app .bfk{background:var(--weiss);border:1px solid var(--linie);border-radius:10px;overflow:hidden}
#bfk-app .bfk-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px;padding:22px 24px 18px;border-bottom:1px solid var(--linie)}
#bfk-app .kicker{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blau);display:inline-flex;gap:8px;align-items:center}
#bfk-app .kicker::before{content:"";width:10px;height:10px;background:var(--gelb);border:1.5px solid var(--blau);border-radius:2px}
#bfk-app .bfk-head h2{font-size:clamp(22px,2.6vw,28px);margin-top:4px}
#bfk-app .bfk-head p.lead{max-width:520px;font-size:15px;color:var(--text)}
#bfk-app .bfk-grid{display:grid;grid-template-columns:320px minmax(0,1fr);grid-template-areas:"side stage"}
#bfk-app .bfk-side{grid-area:side;border-right:1px solid var(--linie);padding:18px 18px 20px;display:flex;flex-direction:column;gap:18px;min-width:0}
#bfk-app .bfk-stage{grid-area:stage;position:relative;min-height:560px;background:linear-gradient(180deg,#F1F3F5 0%,#FBFBFC 70%);touch-action:none;min-width:0}
#bfk-app .bfk-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}
#bfk-app .label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
#bfk-app .farben{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
#bfk-app .sw{width:34px;height:34px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--kreis);position:relative;padding:0}
#bfk-app .sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--blau)}
#bfk-app .sw[aria-pressed="true"]::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--gelb)}
#bfk-app .farbname{font-size:14px;margin-top:6px;color:var(--text)}
#bfk-app .farbname b{font-weight:600;color:var(--blau)}
#bfk-app .linkbtn:disabled{color:var(--text-2);text-decoration:none;cursor:default}
#bfk-app .linkbtn{border:0;background:none;padding:0;color:var(--blau);text-decoration:underline;text-underline-offset:3px;font-size:14px;margin-top:4px}
#bfk-app .teile{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#bfk-app .teil{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;align-items:center;width:100%;text-align:left;border:1px solid var(--linie);background:var(--weiss);border-radius:var(--r);padding:6px 12px 6px 6px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;transition:border-color .15s, box-shadow .15s}
#bfk-app .teil:hover{border-color:var(--blau);box-shadow:0 2px 0 var(--gelb)}
#bfk-app .teil:active{cursor:grabbing}
#bfk-app .teil img{width:80px;height:60px;object-fit:contain;background:var(--grund);border-radius:4px;pointer-events:none}
#bfk-app .teil .tx{display:grid;gap:1px;min-width:0}
#bfk-app .teil .kopf{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
#bfk-app .teil .n{font-weight:600;color:var(--blau);font-size:16px;line-height:1.2}
#bfk-app .teil .p{font-size:14px;font-weight:600;color:var(--blau);white-space:nowrap;font-variant-numeric:tabular-nums}
#bfk-app .teil .f{font-size:13px;line-height:1.35}
#bfk-app .teil .m{font-size:12px;color:var(--text-2);line-height:1.35}
#bfk-app .regel{font-size:13px;line-height:1.5;background:var(--grund);border-left:3px solid var(--gelb);padding:10px 12px;border-radius:0 var(--r) var(--r) 0}
#bfk-app .regel b{color:var(--blau);font-weight:600}
#bfk-app .rabatt{padding:12px 24px 14px;border-bottom:1px solid var(--linie);background:var(--grund);display:grid;gap:8px}
#bfk-app .rb-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px}
#bfk-app .rb-text{font-size:15px;color:var(--text)}
#bfk-app .rb-text b{color:var(--blau);font-weight:600}
#bfk-app .rb-ziel{font-size:12px;color:var(--text-2)}
#bfk-app .rb-bar{height:12px;border-radius:999px;background:var(--flaeche);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
#bfk-app .rb-fill{height:100%;width:0;background:var(--blau);border-radius:999px;transition:width .6s cubic-bezier(.2,.8,.2,1),background-color .3s}
#bfk-app .rabatt.erreicht{background:var(--gelb-30)}
#bfk-app .rabatt.erreicht .rb-fill{background:var(--gelb);box-shadow:inset 0 0 0 1.5px var(--blau)}
#bfk-app .rabatt.erreicht .rb-ziel{color:var(--blau);font-weight:500}
#bfk-app .rb-tipp{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:14px}
#bfk-app .rb-tipp b{color:var(--blau)}
#bfk-app .rb-btn{border:0;background:var(--gelb);color:var(--blau);font-weight:600;font-size:14px;padding:6px 12px;border-radius:var(--r);box-shadow:0 0 0 1px #e6d65a inset}
#bfk-app .rb-btn:hover{background:#FFEA50}
#bfk-app .rabattzeile td{background:var(--gelb-30)}
#bfk-app .rabattzeile td.num{color:var(--blau);font-weight:600}
#bfk-app .dot.rb{background:var(--gelb);box-shadow:0 0 0 1.5px var(--blau) inset}
#bfk-app .rb-zeile{color:var(--blau);font-weight:600}
@media (max-width:480px){
#bfk-app .rabatt{padding:10px 14px 12px}
}
#bfk-app .bh-oben{position:absolute;top:12px;left:12px;right:12px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;pointer-events:none}
#bfk-app .mass{pointer-events:auto;background:rgba(255,255,255,.92);border:1px solid var(--linie);border-radius:var(--r);padding:6px 10px;font-size:13px;line-height:1.3}
#bfk-app .mass .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);font-family:var(--f-text);font-weight:600}
#bfk-app .mass .v{color:var(--blau);font-weight:500}
#bfk-app .werkzeug{display:flex;flex-wrap:wrap;gap:6px;pointer-events:auto}
#bfk-app .wbtn{border:1px solid var(--linie);background:rgba(255,255,255,.95);border-radius:var(--r);padding:5px 10px;font-size:13px;font-weight:500;color:var(--blau)}
#bfk-app .wbtn:hover{border-color:var(--blau)}
#bfk-app .wbtn .kurz{display:none}
#bfk-app .leer{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;text-align:center;padding:24px}
#bfk-app .leer p{background:rgba(255,255,255,.9);border:1px dashed var(--kreis);border-radius:8px;padding:14px 18px;max-width:300px;font-size:15px}
#bfk-app .leer b{color:var(--blau)}
#bfk-app .hinweis{position:absolute;left:12px;bottom:12px;font-size:12px;color:var(--text-2);pointer-events:none;background:rgba(255,255,255,.8);padding:2px 8px;border-radius:4px}
#bfk-app .auswahl{position:absolute;left:12px;right:12px;bottom:12px;margin-inline:auto;max-width:560px;background:var(--weiss);border:1px solid var(--blau);border-radius:8px;box-shadow:0 6px 24px rgba(0,30,60,.14);padding:10px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
#bfk-app .auswahl .t{font-weight:600;color:var(--blau);min-width:0}
#bfk-app .auswahl .t small{display:block;font-weight:400;color:var(--text-2);font-size:12px}
#bfk-app .auswahl .farben{margin:0;gap:6px}
#bfk-app .auswahl .sw{width:26px;height:26px}
#bfk-app .auswahl .akt{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
#bfk-app .auswahl .wbtn.weg{color:var(--alert)}
#bfk-app .toast{position:absolute;left:50%;top:64px;transform:translateX(-50%);background:var(--blau);color:#fff;font-size:14px;padding:8px 14px;border-radius:var(--r);max-width:calc(100% - 24px);text-align:center;box-shadow:0 6px 18px rgba(0,30,60,.2)}
#bfk-app .werkzeug{position:relative}
#bfk-app .tbtn{display:inline-flex;align-items:center;gap:7px}
#bfk-app .tdot{width:14px;height:14px;border-radius:50%;flex:none;background:var(--tc,#fff);box-shadow:0 0 0 1px rgba(0,0,0,.2) inset,0 0 0 2px #fff,0 0 0 3px var(--linie)}
#bfk-app .tbtn[aria-expanded="true"]{border-color:var(--blau);box-shadow:0 2px 0 var(--gelb)}
#bfk-app .tpop{position:absolute;top:calc(100% + 10px);right:0;z-index:6;width:280px;max-width:calc(100vw - 56px);background:var(--weiss);border:1px solid var(--linie);border-radius:10px;box-shadow:0 12px 32px rgba(0,30,60,.18);padding:12px 12px 11px;display:grid;gap:11px;text-align:left}
#bfk-app .tpop::before{content:"";position:absolute;top:-6px;right:22px;width:10px;height:10px;background:var(--weiss);border-left:1px solid var(--linie);border-top:1px solid var(--linie);transform:rotate(45deg)}
#bfk-app .tp-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
#bfk-app .tp-kopf b{color:var(--blau);font-weight:600;font-size:14px}
#bfk-app .tp-name{font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bfk-app .tp-sw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#bfk-app .tsw{display:block;aspect-ratio:3/2;border:0;padding:0;border-radius:6px;background:var(--weiss);overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.14) inset,0 1px 2px rgba(0,30,60,.1);transition:transform .12s,box-shadow .12s;position:relative}
#bfk-app .tsw:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(0,0,0,.22) inset,0 3px 8px rgba(0,30,60,.14)}
#bfk-app .tsw-f{position:absolute;inset:0;border-radius:inherit;background-color:var(--c);box-shadow:0 0 0 1px rgba(0,0,0,.14) inset;pointer-events:none}
#bfk-app .tsw.holz .tsw-f{background-image:repeating-linear-gradient(174deg,rgba(70,35,0,0) 0 2px,rgba(70,35,0,.12) 2px 3px,rgba(70,35,0,0) 3px 6px,rgba(70,35,0,.06) 6px 7px,rgba(70,35,0,0) 7px 11px)}
#bfk-app .tsw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--weiss),0 0 0 4px var(--blau)}
#bfk-app .tsw[aria-pressed="true"]::after{content:"";position:absolute;z-index:1;right:5px;bottom:5px;width:8px;height:8px;border-radius:50%;background:var(--gelb);box-shadow:0 0 0 1.5px var(--blau)}
#bfk-app .tp-eigen{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding-top:11px;border-top:1px solid var(--flaeche)}
#bfk-app .tp-rad{position:relative;display:block;width:32px;height:32px;border-radius:50%;cursor:pointer;margin:0;background:conic-gradient(#ff5a5a,#ffc83d,#7ad36b,#3cc6e8,#4f6bff,#c55be0,#ff5a5a);box-shadow:0 0 0 1px rgba(0,0,0,.12) inset}
#bfk-app .tp-rad::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--tc,#fff);box-shadow:0 0 0 2px #fff;pointer-events:none}
#bfk-app .tp-rad.an{box-shadow:0 0 0 2px var(--weiss),0 0 0 4px var(--blau)}
#bfk-app .tp-rad:focus-within{outline:3px solid var(--blau);outline-offset:2px}
#bfk-app .tp-rad input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none}
#bfk-app .tp-lbl{font-size:13px;color:var(--text)}
#bfk-app .tp-hex{width:86px;height:auto;margin:0;font-size:13px;line-height:1.3;padding:5px 8px;border:1px solid var(--linie);border-radius:var(--r);color:var(--blau);background:var(--grund);text-transform:uppercase;box-shadow:none}
#bfk-app .tp-hex:focus{outline:2px solid var(--blau);outline-offset:1px;background:#fff}
#bfk-app .tp-sub{font-size:12px;color:var(--text-2);line-height:1.4}
.ziehchip{position:fixed;z-index:50;pointer-events:none;width:96px;height:70px;border-radius:6px;background:#fff;border:2px solid var(--blau);box-shadow:0 8px 24px rgba(0,30,60,.25);transform:translate(-50%,-60%);display:grid;place-items:center}
.ziehchip img{width:88px;height:62px;object-fit:contain}
#bfk-app .liste{display:grid;grid-template-columns:minmax(0,1fr) 340px;border-top:1px solid var(--linie)}
#bfk-app .liste-tab{padding:18px 24px 22px;min-width:0}
#bfk-app .liste-tab h3{font-size:18px;margin-bottom:10px}
#bfk-app .tbl-wrap{overflow-x:auto}
#bfk-app table{border-collapse:collapse;width:100%;font-size:14px}
#bfk-app th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);font-weight:600;text-align:left;padding:6px 8px;border-bottom:1px solid var(--linie)}
#bfk-app td{padding:9px 8px;border-bottom:1px solid var(--flaeche);vertical-align:top}
#bfk-app td.num,#bfk-app th.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
#bfk-app td.menge{font-family:var(--f-mono);font-weight:500;color:var(--blau);white-space:nowrap}
#bfk-app .art{display:flex;gap:10px;align-items:flex-start}
#bfk-app .dot{width:14px;height:14px;border-radius:50%;flex:none;margin-top:4px;box-shadow:0 0 0 1px rgba(0,0,0,.15) inset}
#bfk-app .dot.klar{background:repeating-linear-gradient(45deg,#fff 0 3px,#e8eef3 3px 6px)}
#bfk-app .art b{font-weight:600;color:var(--blau)}
#bfk-app .art small{display:block;color:var(--text-2);font-size:12px;line-height:1.4}
#bfk-app .tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--gelb);color:var(--blau);padding:1px 6px;border-radius:3px;margin-left:6px;vertical-align:1px}
#bfk-app .liste-sum{background:var(--grund);border-left:1px solid var(--linie);padding:18px 22px 22px;display:flex;flex-direction:column;gap:12px}
#bfk-app .zeile{display:flex;justify-content:space-between;gap:12px;font-size:14px}
#bfk-app .zeile.gesamt{font-size:20px;font-weight:600;color:var(--blau);border-top:1px solid var(--linie);padding-top:10px}
#bfk-app .zeile .mono{white-space:nowrap}
#bfk-app .spar{font-size:13px;background:var(--gelb-30);border:1px solid #efe39a;border-radius:var(--r);padding:8px 10px}
#bfk-app .spar b{color:var(--blau)}
#bfk-app .klein{font-size:12px;color:var(--text-2);line-height:1.45}
#bfk-app .klammer-hinweis{margin-top:12px;padding:10px 12px;border-left:3px solid var(--gelb);background:var(--grund);font-size:13px;line-height:1.5;color:var(--text);border-radius:0 var(--r) var(--r) 0}
#bfk-app .klammer-hinweis[hidden]{display:none}
#bfk-app .klammer-hinweis a{color:var(--blau);font-weight:600;text-decoration:underline;text-underline-offset:2px}
#bfk-app .klammer-hinweis a::after{content:' ↗';font-weight:400}
#bfk-app .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#bfk-app .cta{border:0;background:var(--blau);color:#fff;font-weight:600;font-size:16px;padding:12px 16px;border-radius:var(--r);box-shadow:0 3px 0 var(--gelb)}
#bfk-app .cta:hover{background:var(--blau-2)}
#bfk-app .cta:disabled{background:var(--kreis);box-shadow:none;cursor:not-allowed}
#bfk-app .cta2{border:1px solid var(--blau);background:#fff;color:var(--blau);font-weight:500;font-size:14px;padding:8px 12px;border-radius:var(--r)}
@media (max-width:900px){
#bfk-app .liste{grid-template-columns:1fr}
#bfk-app .liste-sum{border-left:0;border-top:1px solid var(--linie)}
}
@media (max-width:820px){
#bfk-app .bfk-grid{grid-template-columns:1fr;grid-template-areas:"stage" "side"}
#bfk-app .bfk-side{border-right:0;border-top:1px solid var(--linie)}
#bfk-app .bfk-stage{min-height:380px}
#bfk-app .teile{grid-template-columns:1fr 1fr}
#bfk-app .teil{grid-template-columns:1fr;text-align:center;justify-items:center;padding:6px 6px 8px}
#bfk-app .teil img{width:100%;max-width:130px;height:74px}
#bfk-app .teil .tx{justify-items:center}
#bfk-app .teil .kopf{flex-direction:column;align-items:center;gap:0}
#bfk-app .bfk-stage{min-height:420px}
}
@media (max-width:480px){
#bfk-app .bfk-head{padding:16px}
#bfk-app .bfk-side{padding:14px}
#bfk-app .liste-tab{padding:14px 12px}
#bfk-app .liste-sum{padding:14px 16px 18px}
#bfk-app .teil .f{font-size:12px}
#bfk-app .teil .m{display:none}
#bfk-app .wbtn .lang{display:none}
#bfk-app .wbtn .kurz{display:inline}
#bfk-app .spalte-ep{display:none}
}
@media (prefers-reduced-motion: reduce){
#bfk-app *{transition:none!important}
}