/* SchKG AI – gemeinsame Styles: Tool-Hub (4 Kacheln), Werkzeug-Menü (Burger) und Platzhalter-Toolseiten.
   Wird von index.html UND den standalone Tool-Seiten geladen. Theme-Variablen sind mit index.html identisch. */
:root{
  --bg:#0f1117; --surface:#1a1d27; --border:#2a2d3a; --accent:#4f8ef7; --accent2:#7c5cbf;
  --text:#e8eaf0; --text-dim:#8b8fa8; --success:#3ecf8e; --danger:#ff5c5c; --radius:12px;
}

/* ─── Werkzeug-Menü (Burger + Dropdown), oben links in JEDEM Tool ─── */
.tool-menu-wrap{position:relative; display:flex; align-items:center; flex-shrink:0;}
.tool-burger{background:none; border:1px solid var(--border); color:var(--text); width:38px; height:38px;
  border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .15s, color .15s; flex-shrink:0;}
.tool-burger:hover{border-color:var(--accent); color:var(--accent);}
.tool-menu{position:absolute; top:46px; left:0; z-index:300; min-width:280px; background:var(--surface);
  border:1px solid var(--border); border-radius:14px; padding:6px; box-shadow:0 14px 44px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .16s, transform .16s, visibility .16s;}
.tool-menu.open{opacity:1; visibility:visible; transform:none;}
.tm-head{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-dim); padding:9px 11px 6px;}
.tm-sep{height:1px; background:var(--border); margin:6px 6px;}
.tm-item{display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:none;
  color:var(--text); padding:10px 11px; border-radius:9px; cursor:pointer; font-size:14px;
  font-family:'DM Sans',sans-serif; transition:background .12s;}
.tm-item:hover{background:rgba(79,142,247,.12);}
.tm-item.current{background:rgba(79,142,247,.10);}
.tm-item.locked{opacity:.5; cursor:not-allowed;}
.tm-item.locked:hover{background:none;}
.tm-ic{width:22px; height:22px; flex:none; color:var(--accent); display:flex;}
.tm-ic svg{width:22px; height:22px;}
.tm-tx{flex:1; display:flex; align-items:center; gap:8px; min-width:0;}
.tm-wip{font-size:10px; color:var(--text-dim); border:1px solid var(--border); border-radius:6px; padding:1px 6px; white-space:nowrap; margin-left:auto;}
.tm-check{color:var(--accent); font-size:9px;}

/* ─── Tool-Hub: 4 Kacheln nach dem Login ─── */
.hub-main{max-width:940px; margin:0 auto; padding:52px 20px 64px;}
.hub-welcome{text-align:center; margin-bottom:42px;}
.hub-welcome h1{font-family:'DM Serif Display',serif; font-size:32px; font-weight:400; margin-bottom:8px;}
.hub-welcome p{color:var(--text-dim); font-size:15px;}
.hub-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.hub-tile{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:28px 26px;
  text-align:left; cursor:pointer; font-family:'DM Sans',sans-serif; color:var(--text);
  transition:border-color .16s, transform .16s, box-shadow .16s;}
.hub-tile:hover{border-color:var(--accent); transform:translateY(-3px); box-shadow:0 16px 44px rgba(0,0,0,.38);}
.hub-tile.locked{cursor:not-allowed; opacity:.6;}
.hub-tile.locked:hover{border-color:var(--border); transform:none; box-shadow:none;}
.hub-ic{width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(79,142,247,.20), rgba(124,92,191,.20)); color:var(--accent);}
.hub-ic svg{width:27px; height:27px;}
.hub-name{font-size:17px; font-weight:600;}
.hub-desc{font-size:13px; color:var(--text-dim); line-height:1.5;}
.hub-wip{position:absolute; top:15px; right:15px; font-size:11px; color:var(--text-dim);
  background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:3px 9px;}

/* ─── Platzhalter-Toolseiten (standalone, body.tool-page) ─── */
.tool-page *, .tool-page *::before, .tool-page *::after{box-sizing:border-box; margin:0; padding:0;}
body.tool-page{min-height:100vh; background:var(--bg); color:var(--text);
  font-family:'DM Sans',sans-serif; font-size:15px; line-height:1.6;}
.tool-page .header{display:flex; align-items:center; gap:12px; min-height:60px; padding:0 18px;
  border-bottom:1px solid var(--border); background:var(--surface);}
.tool-page .logo{font-family:'DM Serif Display',serif; font-size:22px; letter-spacing:-.3px;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent;}
.tool-page .header-badge{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim); background:var(--border); border-radius:20px; padding:3px 8px;}
.tool-page .user-chip{display:flex; align-items:center; gap:7px; padding:4px 10px 4px 6px;
  background:var(--border); border-radius:20px; font-size:12px; color:var(--text-dim);}
.tool-page .user-chip .avatar{width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; display:flex;
  align-items:center; justify-content:center; font-size:11px; font-weight:600;}
.tool-page .admin-badge{font-size:10px; font-weight:700; color:var(--accent); border:1px solid var(--accent); border-radius:5px; padding:1px 5px;}
.tool-page .logout-btn{background:none; border:1px solid var(--border); color:var(--text-dim);
  padding:7px 12px; border-radius:8px; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:12px; transition:.15s;}
.tool-page .logout-btn:hover{border-color:var(--danger); color:var(--danger);}
.tool-main{display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 60px); padding:24px;}
.wip-card{max-width:470px; text-align:center; background:var(--surface); border:1px solid var(--border);
  border-radius:20px; padding:50px 38px;}
.wip-emoji{font-size:58px; margin-bottom:14px;}
.wip-card h1{font-family:'DM Serif Display',serif; font-size:26px; font-weight:400; margin-bottom:12px;}
.wip-text{color:var(--text-dim); margin-bottom:28px;}
.wip-back{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border:none;
  padding:11px 20px; border-radius:10px; font-family:'DM Sans',sans-serif; font-size:14px; cursor:pointer;}
.wip-back:hover{filter:brightness(1.08);}

@media (max-width:640px){
  .hub-grid{grid-template-columns:1fr;}
  .hub-main{padding:34px 16px 48px;}
  .hub-welcome h1{font-size:26px;}
  .tool-menu{min-width:240px;}
}