/* Farb- und Layoutsystem 1:1 aus der Original-Preisliste (Colibri_Preisliste.html) übernommen. */
:root{
  --bg:#f3f6fb; --white:#fff; --ink:#1f2a37; --muted:#64748b;
  --blue:#2f6fb0; --blue-d:#235485;
  --bar:#d7e6fb; --bar-sub:#e9f1fc; --bar-line:#b7d0ef; --bar-open:#c7defa;
  --cream:#fcebcb; --cream-line:#ecd6a6;
  --sel:#2f6fb0; --sel-bg:#eaf2fb; --ok:#2e7d4f; --ok-bg:#e7f4ec;
  --bad:#b23b2c; --line:#e3e8f0;
  --gold:#c0922e;
  --shadow:0 1px 2px rgba(31,42,55,.05),0 8px 24px -12px rgba(31,42,55,.18);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;overflow-x:hidden;max-width:100%}
body{font-family:"IBM Plex Sans",system-ui,Segoe UI,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.45}
a{color:var(--blue)}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--ink)}
h1,h2,h3,h4{margin:0}

/* ---- Topbar ---- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(243,246,251,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--bar-line)}
.topbar-in{max-width:1240px;margin:0 auto;padding:11px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;text-decoration:none;color:inherit;cursor:pointer}
.frow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.chkrow{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:14.5px;cursor:pointer;user-select:none}
.chkrow input{width:20px;height:20px;accent-color:var(--ok)}
.chkrow em{color:var(--muted);font-style:italic;font-size:13px}
.brandlogo{height:40px;width:auto;flex:none;display:block}
.brand b{font-size:18px;font-weight:700;line-height:1}
.brand span{display:block;font-size:11px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.nav{display:flex;gap:4px;background:#e4ecf7;padding:4px;border-radius:10px;flex-wrap:wrap;justify-content:center}
.nav button,.nav a{border:0;background:transparent;color:var(--muted);padding:8px 14px;border-radius:7px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:7px;text-decoration:none}
.nav button.active,.nav a.active{background:var(--white);color:var(--ink);box-shadow:var(--shadow)}
.pill{background:var(--blue);color:#fff;border-radius:99px;min-width:20px;height:20px;padding:0 6px;font-size:12px;display:inline-flex;align-items:center;justify-content:center;font-weight:700}

.wrap{max-width:1240px;margin:0 auto;padding:18px 16px 120px}
.view{display:none}.view.show{display:block}

/* ---- Suche ---- */
.search{position:relative;margin-bottom:16px}
.search input{width:100%;padding:12px 16px 12px 42px;border:1px solid var(--bar-line);border-radius:11px;background:var(--white);font-size:15px}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.45}
.search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--sel-bg)}

/* ---- Accordion ---- */
details.sec{margin-bottom:8px}
details.sec>summary{list-style:none;cursor:pointer;padding:14px 18px;border-radius:10px;background:var(--bar);border:1px solid var(--bar-line);display:flex;align-items:center;gap:12px;font-weight:700;font-size:16px;color:var(--ink);transition:.12s}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary:hover{background:var(--bar-open)}
details.sec[open]>summary{border-radius:10px 10px 0 0}
.sgn{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.6);border:1px solid var(--bar-line);display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1;color:var(--blue-d);flex:none}
.cnt{font-size:12px;font-weight:600;color:var(--muted);margin-left:auto}
.sec-body{border:1px solid var(--bar-line);border-top:0;border-radius:0 0 10px 10px;background:var(--white);padding:14px}

details.sub{margin:0 0 8px}
details.sub:last-child{margin-bottom:0}
details.sub>summary{list-style:none;cursor:pointer;padding:11px 15px;border-radius:9px;background:var(--bar-sub);border:1px solid var(--bar-line);display:flex;align-items:center;gap:10px;font-weight:700;font-size:14.5px}
details.sub>summary::-webkit-details-marker{display:none}
details.sub[open]>summary{border-radius:9px 9px 0 0}
.sub .sgn{width:22px;height:22px;font-size:15px}
.sub-body{border:1px solid var(--bar-line);border-top:0;border-radius:0 0 9px 9px;padding:14px;background:#fbfcfe}

/* ---- Produktkarten ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(255px,100%),1fr));gap:14px}
.card{background:var(--cream);border:1px solid var(--cream-line);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.card-h{text-align:center;padding:14px 14px 10px;position:relative}
.card-h.clk{cursor:pointer}
.card-h.clk:hover{background:#fbe7c4}
.card-h .chev{position:absolute;right:12px;top:14px;font-size:10px;color:var(--blue);opacity:.7}
.card-h h3{font-size:18px;font-weight:700}
.card-h .gar{font-size:12.5px;color:#7a5a1f;margin-top:2px}
.feats{padding:4px 10px 8px}
.feat{background:#fff;border:1px solid var(--cream-line);border-radius:7px;padding:8px 10px;margin:5px 0;text-align:center;font-size:13px;color:#3f361f}
.detbtn{width:100%;margin-top:6px;background:var(--blue);color:#fff;border:0;border-radius:8px;padding:8px;font-weight:600;font-size:13px;cursor:pointer}
.detbtn:hover{background:var(--blue-d)}
.inforow{width:100%;background:#fbe7c4;border:0;border-top:1px solid var(--cream-line);border-bottom:1px solid var(--cream-line);padding:9px 16px;text-align:center;font-size:13px;font-weight:600;color:#6b5a32;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.inforow:hover{background:#f7ddae}
.dlist{margin:0;padding-left:20px;font-size:14px;line-height:1.7;color:#3a4654}
.dlist li{margin-bottom:3px}
.dtext{white-space:pre-wrap;font-size:13.5px;line-height:1.55;color:#3a4654}
.col-h{display:flex;justify-content:space-between;padding:7px 16px;font-size:12.5px;color:#6b5a32;border-top:1px solid var(--cream-line);border-bottom:1px solid var(--cream-line);background:#fbe7c4}
.col-h.has-info{cursor:help}
.col-h.has-info:hover{background:#f7ddae}
.iico{color:var(--blue);font-size:12px;margin-left:2px}
#infoTip{position:fixed;z-index:95;max-width:340px;background:var(--ink);color:#fff;padding:11px 14px;border-radius:10px;font-size:13px;line-height:1.5;white-space:pre-wrap;box-shadow:0 12px 30px rgba(0,0,0,.32);opacity:0;pointer-events:none;transition:opacity .12s;left:0;top:0}
#infoTip.show{opacity:1}
.vars{padding:6px 10px}
.var{width:100%;text-align:left;background:transparent;border:1.5px solid transparent;border-radius:9px;padding:8px 10px;margin:3px 0;display:block;transition:.1s}
.var:hover{background:#f7e3ba}
.var .vl{text-align:center;font-size:13px;color:#5e4d2a;font-weight:600;margin-bottom:2px}
.var .vr{display:flex;align-items:baseline;justify-content:space-between}
.var .vp{font-size:19px;font-weight:700}
.var.sel{border-color:var(--sel);background:var(--sel-bg)}
.var.sel .vp{color:var(--blue-d)}
.sep{height:1px;background:var(--cream-line);margin:4px 0}
.surs{padding:6px 10px}
.surs .stitle{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#7a5a1f;font-weight:700;padding:4px 6px 6px}
.sur{width:100%;display:flex;align-items:center;gap:9px;background:transparent;border:0;border-radius:8px;padding:8px;margin:1px 0;font-size:13.5px;text-align:left}
.sur:hover{background:#f7e3ba}
.sur .box{width:18px;height:18px;border:2px solid #cbb583;border-radius:5px;flex:none;position:relative;background:#fff}
.sur .nm{flex:1;color:#3f361f}
.sur .pr{font-weight:600;color:#4a3c1c;white-space:nowrap}
.sur.sel{background:var(--ok-bg)}
.sur.sel .box{background:var(--ok);border-color:var(--ok)}
.sur.sel .box::after{content:"";position:absolute;left:4px;top:0;width:6px;height:11px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}
.sur.sel .nm{font-weight:600}
.card-f{margin-top:auto;border-top:1px solid var(--cream-line);background:#fbe7c4;padding:11px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-f .st{margin-right:auto}
.card-f .st small{display:block;font-size:11px;color:#7a5a1f}
.card-f .st b{font-size:18px;font-weight:700}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--cream-line);border-radius:8px;overflow:hidden;background:#fff}
.stepper button{border:0;background:transparent;width:32px;height:34px;font-size:17px;color:var(--blue-d)}
.stepper input{width:36px;text-align:center;border:0;background:transparent;font-weight:700;font-size:14px}
.addb{border:0;background:var(--blue);color:#fff;padding:9px 14px;border-radius:9px;font-weight:600;font-size:13.5px}
.addb:hover{background:var(--blue-d)}
.addb:disabled{background:#b9c4d2;cursor:not-allowed}

/* ---- Buttons & Formfelder (auch für Login/Admin) ---- */
.btn{border:0;border-radius:10px;padding:11px 18px;font-weight:600;font-size:14px;background:var(--blue);color:#fff;transition:.12s;display:inline-block;text-decoration:none;text-align:center}
.btn:hover{background:var(--blue-d)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:#f6f8fc}
.btn.sm{padding:8px 13px;font-size:13px}
.btn.danger{background:#fff;border:1px solid #e3b7af;color:var(--bad)}
.btn.danger:hover{background:#fbeeec}
.fld label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:600}
.fld input,.fld textarea,.fld select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fff}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--sel-bg)}
.fld textarea{resize:vertical;min-height:52px}
.kform{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.kform .full{grid-column:1/3}
@media(max-width:520px){.kform{grid-template-columns:1fr}.kform .full{grid-column:1}}
.note{background:#fff7e6;border:1px solid #f0d9a8;border-radius:10px;padding:11px 14px;font-size:13px;color:#7a5a1f;margin-bottom:16px}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}
.panel h2{font-size:19px;margin-bottom:3px}
.panel .sub{color:var(--muted);font-size:13px;margin-bottom:14px}
.grp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:11px;align-items:end}
.toolbtns{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
.hint{font-size:12.5px;color:var(--muted);margin:10px 0 0}

/* ---- Sticky Orderbar ---- */
.orderbar{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--blue-d);color:#fff;transform:translateY(110%);transition:.25s;box-shadow:0 -8px 24px rgba(0,0,0,.18)}
.orderbar.show{transform:none}
.orderbar-in{max-width:1240px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:14px}
.orderbar .lab{font-size:13px;opacity:.85}
.orderbar .tot{font-size:20px;font-weight:700;margin-right:auto}
.orderbar .tot small{font-size:13px;font-weight:500;opacity:.85;margin-left:8px}
.orderbar .btn{background:#fff;color:var(--blue-d)}
.orderbar .btn:hover{background:#eef3fb}

/* ---- Warenkorb ---- */
.cartlayout{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
.cline{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 17px;margin-bottom:11px;box-shadow:var(--shadow)}
.cline .top{display:flex;justify-content:space-between;gap:12px}
.cline h3{font-size:16px}
.cline .pcat{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:2px}
.cline .det{font-size:13px;color:var(--muted);margin-top:6px;display:flex;flex-direction:column;gap:2px}
.cline .det b{color:var(--ink)}
.cline .bottom{display:flex;align-items:center;justify-content:space-between;margin-top:11px;gap:10px;flex-wrap:wrap}
.lineprice{font-size:18px;font-weight:700}
.rm{display:inline-flex;align-items:center;gap:6px;border:1px solid #e3b7af;background:#fff;color:var(--bad);font-size:13px;font-weight:600;padding:8px 12px;border-radius:9px;cursor:pointer;white-space:nowrap;flex:none}
.rm:hover{background:#fbeeec}
.summary{background:#fff;border:1px solid var(--line);border-radius:12px;padding:17px;position:sticky;top:80px;box-shadow:var(--shadow)}
.summary h2{font-size:19px;margin-bottom:13px}
.kv{display:flex;justify-content:space-between;font-size:14px;padding:6px 0;color:var(--muted)}
.kv b{color:var(--ink)}
.kv.tot{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-size:16px}
.kv.tot b{font-size:24px}
.cardhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cardhead h2{font-size:21px}
.empty{text-align:center;color:var(--muted);padding:50px 20px}
.zb{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;margin:10px 0;padding:10px 12px;background:var(--ok-bg);border:1px solid #c4e2cf;border-radius:9px;cursor:pointer}
.zb input{width:18px;height:18px;accent-color:var(--ok);flex:none}
.zbline{display:flex;align-items:center;gap:8px;width:100%;margin-top:6px;font-size:13px;font-weight:600;color:var(--ok);cursor:pointer}
.zbline input{width:17px;height:17px;accent-color:var(--ok);flex:none}
.zbadge{width:100%;text-align:right;font-size:12px;font-weight:600;color:var(--bad);margin-top:3px}

/* ---- Modal ---- */
.hoverlay{position:fixed;inset:0;background:rgba(20,30,45,.45);backdrop-filter:blur(3px);z-index:80;display:none;align-items:flex-start;justify-content:center;padding:34px 16px;overflow:auto}
.hoverlay.show{display:flex}
.hmodal{background:#fff;border-radius:12px;width:100%;max-width:740px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);overflow:hidden;animation:hpop .2s ease}
@keyframes hpop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hhead{background:var(--bar);padding:15px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bar-line)}
.hhead h2{font-size:20px}
.hhead .x{border:0;background:none;font-size:24px;color:var(--muted);line-height:1;cursor:pointer}
.hbody{padding:18px 20px;max-height:72vh;overflow:auto}

.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:11px;font-size:14px;font-weight:500;opacity:0;transition:.25s;z-index:90;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- Login ---- */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}
.login-box{background:var(--white);padding:32px;border-radius:12px;box-shadow:var(--shadow);width:340px;border:1px solid var(--line)}
.login-box .logohead{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.login-box .logohead img{height:44px}
.login-box .logohead b{font-size:18px}
.login-box .sub{color:var(--muted);margin-top:0;font-size:13.5px}
.login-box form{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.login-box .error{color:var(--bad);font-size:14px;background:#fbeeec;border:1px solid #e3b7af;border-radius:8px;padding:9px 12px}
.login-box .back{margin-top:16px;font-size:14px}

/* ---- Admin-Tabellen ---- */
.admin-table{width:100%;border-collapse:collapse;margin:12px 0}
.admin-table th,.admin-table td{padding:8px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
.admin-table input{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:6px}
.inline-form{display:flex;gap:10px;align-items:flex-end;margin-top:12px;flex-wrap:wrap}
.inline-form label{display:flex;flex-direction:column;gap:4px;font-size:13px}
.inline-form input{padding:6px 8px;border:1px solid var(--line);border-radius:6px}
.stack-form{display:flex;flex-direction:column;gap:10px;max-width:500px}

/* ---- Print / PDF-Angebot ---- */
#printArea{display:none}
@media print{
  body{background:#fff}
  .topbar,.wrap,.orderbar,.hoverlay,.toast{display:none !important}
  #printArea{display:block;color:#1c1c1c;font-size:12px;font-family:"IBM Plex Sans",Arial,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .p-logo{display:block;height:82px;width:auto;margin:0 auto 10px}
  .p-rule{height:3px;background:var(--gold);border:0;margin:0 0 16px}
  .p-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:16px}
  .p-shop{font-size:20px;font-weight:700;line-height:1.1}
  .p-shop small{display:block;font-size:11px;font-weight:600;color:var(--gold);letter-spacing:.04em;margin-top:3px}
  .p-meta{text-align:right;font-size:11px;color:#555;line-height:1.5}
  .p-cust{margin-bottom:16px;font-size:12px;line-height:1.55;background:#faf6ed;border:1px solid #e8dcc2;border-radius:7px;padding:11px 13px}
  .p-cust b{font-size:13px}
  .p-cust .lbl{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#a08a5e;display:block;margin-bottom:3px;font-weight:600}
  table.p-tbl{width:100%;border-collapse:collapse;margin-bottom:16px}
  table.p-tbl th{text-align:left;background:var(--gold);color:#fff;padding:8px;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
  table.p-tbl th.num,table.p-tbl td.num{text-align:right;white-space:nowrap}
  table.p-tbl td{padding:8px;border-bottom:1px solid #eee;vertical-align:top}
  table.p-tbl tr:nth-child(even) td{background:#faf9f5}
  .p-sub{color:#6a6a6a;font-size:10.5px}
  .p-sum{margin-left:auto;width:64%;max-width:340px}
  .p-sum .row{display:flex;justify-content:space-between;padding:3px 0;font-size:11.5px}
  .p-sum .row.disc{color:#b23b2e}
  .p-tot{display:flex;justify-content:space-between;align-items:center;margin-top:7px;padding:10px 13px;background:#faf6ed;border:1px solid #e8dcc2;border-radius:7px;font-size:15px;font-weight:700}
  .p-tot .g{color:var(--gold)}
  .p-vat{text-align:right;font-size:10px;color:#666;margin-top:4px}
  .p-foot{margin-top:20px;font-size:10px;color:#666;border-top:1px solid #ddd;padding-top:10px;line-height:1.5}
  @page{margin:15mm}
}
@media(max-width:860px){.cartlayout{grid-template-columns:1fr}.summary{position:static}}

/* ---- Mobil ---- */
@media(max-width:640px){
  .topbar-in{padding:10px 12px;gap:9px}
  .brand{margin-right:0}
  .brand b{font-size:16px}
  .brand span{font-size:10px}
  .nav{width:100%}
  .nav button,.nav a{padding:8px 11px;font-size:13px}
  .wrap{padding:14px 12px 112px}
  .cards{grid-template-columns:1fr;gap:12px}
  .search input{font-size:16px}
  input,select,textarea{font-size:16px}
  details.sec>summary{font-size:15px;padding:13px 14px}
  .orderbar-in{padding:10px 12px;gap:10px}
  .orderbar .lab{display:none}
  .orderbar .tot{font-size:17px}
  .orderbar .btn{padding:10px 14px;font-size:13.5px}
  .hoverlay{padding-left:10px;padding-right:10px}
}