:root{
    --bg-950:#0A1723; --bg-900:#0F2136; --bg-800:#15304A;
    --glass:rgba(255,255,255,.045); --glass-brd:rgba(255,255,255,.09);
    --blue-400:#29B6F0; --blue-600:#1C8FC7;
    --green-400:#8FD452; --green-600:#6FB53A;
    --grad: linear-gradient(135deg, var(--blue-400), var(--green-400));
    --white:#EAF4F8; --muted:#82A2B8;
    --alert:#FF5470; --warn:#FFC857;
    --page-bg:var(--bg-950);
  }
  :root[data-theme="light"]{ --page-bg:#0C1D2E; }
  @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --page-bg:#0C1D2E; } }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(1100px 500px at 15% -10%, rgba(41,182,240,.10), transparent 60%),
      radial-gradient(900px 500px at 100% 10%, rgba(143,212,82,.08), transparent 55%),
      var(--page-bg);
    color:var(--white); font-family:'Inter',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; min-height:100vh; padding-bottom:64px;
  }
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:960px;margin:0 auto;padding:0 16px;}

  /* ---------- Header ---------- */
  header.top{
    background:rgba(15,33,54,.85); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--glass-brd);
    position:sticky; top:0; z-index:20;
  }
  .top-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;max-width:960px;margin:0 auto;}
  .brand{display:flex;align-items:center;gap:11px;}
  .logo-tile{
    width:42px;height:42px;border-radius:11px;overflow:hidden;flex:0 0 auto;
    box-shadow:0 0 0 1px var(--glass-brd), 0 0 16px rgba(41,182,240,.25);
  }
  .logo-tile img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.35);}
  .brand-text{display:flex;flex-direction:column;line-height:1.2;}
  .brand-text .name{font-family:'Poppins',sans-serif;font-weight:800;font-size:18.5px;letter-spacing:.2px;}
  .brand-text .sub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1.1px;margin-top:1px;}

  .badge-btn{
    display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--glass-brd);
    color:var(--white); border-radius:10px; padding:8px 13px; font-family:'Inter';font-size:13px;font-weight:600;
    cursor:pointer;
  }
  .badge-btn:hover{border-color:var(--blue-400);color:var(--blue-400);}
  .badge-btn.active{background:var(--grad);border-color:transparent;color:var(--bg-950);box-shadow:0 0 18px rgba(143,212,82,.35);}

  /* ---------- Shelf sections ---------- */
  main{padding-top:20px;}
  .shelf{margin-bottom:34px;}
  .shelf-head{display:flex; align-items:center; gap:10px; margin:0 0 14px 2px;}
  .shelf-head h2{font-family:'Poppins',sans-serif; font-weight:700; font-size:17px; margin:0;}
  .shelf-head .count{font-size:12px;color:var(--muted);font-family:'IBM Plex Mono',monospace;}

  /* Admin: Regal umbenennen / löschen */
  .shelf-name-input{
    font-family:'Poppins',sans-serif; font-weight:700; font-size:17px; color:var(--white);
    background:transparent; border:1px dashed transparent; border-radius:6px; padding:4px 8px;
    flex:0 1 auto; min-width:60px;
  }
  .shelf-name-input:hover, .shelf-name-input:focus{border-color:var(--glass-brd); background:var(--bg-900); outline:none;}
  .shelf-delete-btn{
    margin-left:auto; flex:0 0 auto; width:26px; height:26px; line-height:1; font-size:12px; font-weight:600;
    border-radius:7px; border:1px solid rgba(255,84,112,.35); color:var(--alert); background:rgba(255,84,112,.08);
    cursor:pointer;
  }
  .shelf-delete-btn:hover{background:rgba(255,84,112,.18);}

  .add-shelf-tile{
    width:100%; margin:0 0 34px; padding:16px; border:1.5px dashed var(--glass-brd); border-radius:16px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    color:var(--muted); cursor:pointer; background:transparent; font-family:'Inter'; font-size:13px; font-weight:600;
  }
  .add-shelf-tile:hover{border-color:var(--blue-400);color:var(--blue-400);}
  .add-shelf-tile .plus{font-size:22px;line-height:1;font-weight:400;}
  .shelf-glass{
    height:2px;border-radius:2px;margin-bottom:16px;
    background:linear-gradient(90deg, transparent, var(--blue-400) 30%, var(--green-400) 70%, transparent);
    opacity:.55;
  }
  .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px;}
  .drop-zone.dragover{outline:2px dashed var(--green-400); outline-offset:6px; border-radius:14px;}

  /* ---------- Item card ---------- */
  .item{
    background:var(--glass); border:1px solid var(--glass-brd); border-radius:16px; padding:16px 12px 12px;
    position:relative; color:var(--white);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    box-shadow:0 8px 20px rgba(0,0,0,.35);
    transition:transform .15s ease, border-color .15s ease;
  }
  .item[draggable="true"]{cursor:grab;}
  .item.dragging{opacity:.4;}

  .icon-hex{
    width:66px;height:60px; position:relative; flex:0 0 auto;
    background:var(--grad);
    clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
    padding:2px;
  }
  .icon-hex-inner{
    width:100%;height:100%; background:var(--bg-900);
    clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
    display:flex;align-items:center;justify-content:center;
  }

  .name{font-weight:600;font-size:13.5px;text-align:center;line-height:1.2;min-height:32px;display:flex;align-items:center;}

  .price-tag{
    font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:12.5px; color:var(--white);
    padding:4px 11px; border-radius:8px; align-self:center; margin-top:2px;
    background-image:linear-gradient(var(--bg-950),var(--bg-950)), var(--grad);
    background-origin:border-box; background-clip:padding-box, border-box;
    border:1px solid transparent;
  }

  .status-ribbon{
    position:absolute; top:9px; left:9px; font-size:10px; font-weight:700; font-family:'Inter';
    padding:3px 8px; border-radius:6px; letter-spacing:.2px; z-index:2;
  }
  .status-ribbon.fehlt{background:var(--alert);color:#fff;box-shadow:0 0 12px rgba(255,84,112,.55);}
  .status-ribbon.bald{background:var(--warn);color:var(--bg-950);box-shadow:0 0 12px rgba(255,200,87,.4);}
  .status-ribbon.angebot{background:var(--grad);color:var(--bg-950);box-shadow:0 0 12px rgba(143,212,82,.45);}

  .report-btn{
    position:absolute; top:9px; right:9px; width:26px;height:26px;border-radius:8px;
    border:1px solid var(--glass-brd); background:rgba(255,255,255,.05); display:flex;align-items:center;justify-content:center;
    cursor:pointer; color:var(--muted); font-weight:700; font-size:13px; z-index:2;
  }
  .report-btn:hover{border-color:var(--alert);color:var(--alert);}
  .report-btn.done{background:var(--grad);border-color:transparent;color:var(--bg-950);cursor:default;}
  .report-btn.done:hover{color:var(--bg-950);}

  .admin-row{width:100%;display:flex;flex-direction:column;gap:6px;margin-top:4px;border-top:1px dashed var(--glass-brd);padding-top:9px;}
  .admin-row label{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
  .admin-row input[type=number], .admin-row select, .admin-row input[type=date]{
    width:100%; font-family:'IBM Plex Mono',monospace; font-size:12.5px; padding:6px 7px; color:var(--white);
    border-radius:6px; border:1px solid var(--glass-brd); background:var(--bg-900);
  }
  .admin-row select option{background:var(--bg-900);}
  .drag-handle{align-self:flex-start;font-size:10.5px;color:var(--muted);cursor:grab;}

  .name-input{
    width:100%; text-align:center; font-weight:600;font-size:13.5px;color:var(--white);
    background:transparent; border:1px dashed transparent; border-radius:6px; padding:4px 4px;
    font-family:'Inter';
  }
  .name-input:hover, .name-input:focus{border-color:var(--glass-brd); background:var(--bg-900); outline:none;}

  .item.inactive{opacity:.5;}
  .status-ribbon.inaktiv{background:var(--bg-950);color:var(--muted);border:1px solid var(--glass-brd);}

  .img-controls{display:flex;gap:6px;width:100%;}
  .img-controls label.file-btn{
    flex:1; text-align:center; font-size:11px; font-weight:600; padding:6px 4px; border-radius:6px;
    border:1px solid var(--glass-brd); color:var(--muted); cursor:pointer; background:var(--bg-900);
  }
  .img-controls label.file-btn:hover{border-color:var(--blue-400);color:var(--blue-400);}
  .img-controls input[type=file]{display:none;}
  .img-controls .rm-btn{
    flex:0 0 auto; font-size:11px; font-weight:600; padding:6px 9px; border-radius:6px;
    border:1px solid var(--glass-brd); color:var(--alert); background:var(--bg-900); cursor:pointer;
  }
  .icon-hex-inner img{width:100%;height:100%;object-fit:cover;}

  .delete-btn{
    width:100%; margin-top:2px; font-size:11px; font-weight:600; padding:7px 4px; border-radius:6px;
    border:1px solid rgba(255,84,112,.35); color:var(--alert); background:rgba(255,84,112,.08); cursor:pointer;
  }
  .delete-btn:hover{background:rgba(255,84,112,.18);}

  .add-tile{
    border:1.5px dashed var(--glass-brd); border-radius:16px; min-height:150px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    color:var(--muted); cursor:pointer; background:transparent; font-family:'Inter'; font-size:12.5px; font-weight:600;
  }
  .add-tile:hover{border-color:var(--green-400);color:var(--green-400);}
  .add-tile .plus{font-size:26px;line-height:1;font-weight:400;}

  .modal select{
    width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--glass-brd); background:var(--bg-950); color:var(--white);
    margin-bottom:10px;font-size:14px;font-family:'Inter';
  }
  .modal .file-btn{
    display:block; text-align:center; padding:10px 12px; border-radius:9px; border:1px dashed var(--glass-brd);
    color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; margin-bottom:10px;
  }
  .modal .file-btn:hover{border-color:var(--blue-400);color:var(--blue-400);}
  .modal input[type=file]{display:none;}

  /* ---------- Modals ---------- */
  .overlay{position:fixed;inset:0;background:rgba(4,10,18,.65); display:none; align-items:center;justify-content:center; z-index:50; padding:20px;}
  .overlay.show{display:flex;}
  .modal{
    background:var(--bg-900); border:1px solid var(--glass-brd); color:var(--white); border-radius:16px; padding:22px;
    width:100%; max-width:340px; box-shadow:0 20px 60px rgba(0,0,0,.5);
  }
  .modal h3{font-family:'Poppins',sans-serif;margin:0 0 6px;font-size:19px;font-weight:700;}
  .modal p{font-size:13.5px;color:var(--muted);margin:0 0 16px;line-height:1.45;}
  .modal input{
    width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--glass-brd); background:var(--bg-950); color:var(--white);
    margin-bottom:10px;font-size:14px;font-family:'Inter';
  }
  .modal textarea{
    width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--glass-brd); background:var(--bg-950); color:var(--white);
    margin-bottom:10px;font-size:14px;font-family:'Inter';resize:vertical;min-height:90px;
  }
  .modal textarea:focus, .modal input:focus{outline:none;border-color:var(--blue-400);}
  .modal .row{display:flex;gap:8px;margin-top:6px;}

  .feedback-fab{
    position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); width:52px; height:52px; border-radius:50%;
    background:var(--grad); border:none; box-shadow:0 8px 20px rgba(0,0,0,.4); cursor:pointer;
    font-size:22px; z-index:40; display:flex; align-items:center; justify-content:center;
    transition:transform .15s ease;
  }
  .feedback-fab:hover{transform:scale(1.06);}
  .btn{font-family:'Inter';font-weight:600;font-size:13.5px;border:none;border-radius:9px;padding:10px 14px;cursor:pointer;flex:1;}
  .btn.primary{background:var(--grad);color:var(--bg-950);}
  .btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--glass-brd);}
  .btn.cherry{background:var(--alert);color:#fff;}
  .err{color:var(--alert);font-size:12.5px;margin:-4px 0 8px;display:none;}

  footer{max-width:960px;margin:26px auto 0;padding:0 16px 10px;color:var(--muted);font-size:12px;}
  ::selection{background:var(--green-400);color:var(--bg-950);}


/* Admin-Login als eigenstaendige Seite (admin.php ohne Session) */
body.login-body{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:20px;}
.login-hero{max-width:380px;width:100%;border-radius:16px;overflow:hidden;margin-bottom:-8px;box-shadow:0 20px 50px rgba(0,0,0,.5);}
.login-hero img{width:100%;display:block;}
.login-standalone{max-width:340px;width:100%;position:relative;z-index:1;}
.login-standalone form input{width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--glass-brd);background:var(--bg-950);color:var(--white);margin-bottom:10px;font-size:14px;font-family:'Inter';box-sizing:border-box;}