/* 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:#F5F6F4; --surface:#FFFFFF; --border:#DFE2DE; --accent:#24557E; --accent2:#193F60;
  --text:#1B1D1F; --text-dim:#4E5459; --success:#1E7B4F; --danger:#C42B1C; --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(27,29,31,.18);
  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:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; transition:background .12s;}
.tm-item:hover{background:rgba(36,85,126,.12);}
.tm-item.current{background:rgba(36,85,126,.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:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; font-size:32px; font-weight:800; 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:"Helvetica Neue",Helvetica,Arial,system-ui,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(27,29,31,.14);}
.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(36,85,126,.20), rgba(36,85,126,.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:"Helvetica Neue",Helvetica,Arial,system-ui,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-link{display:inline-flex; align-items:center; gap:8px; text-decoration:none; cursor:pointer;}
.tool-page .logo{font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-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:"Helvetica Neue",Helvetica,Arial,system-ui,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:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; font-size:26px; font-weight:800; 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:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; font-size:14px; cursor:pointer;}
.wip-back:hover{filter:brightness(1.08);}

/* ── Changelog „Was gibts Neues?" (universell, von tools.js gesteuert) ── */
.cl-overlay{position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center;
  background:rgba(27,29,31,.45); backdrop-filter:blur(2px); animation:clFade .2s ease; padding:20px;}
@keyframes clFade{from{opacity:0;}to{opacity:1;}}
.cl-modal{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:16px;
  width:100%; max-width:440px; max-height:82vh; overflow:hidden; display:flex; flex-direction:column;
  padding:26px 26px 22px; box-shadow:0 24px 60px rgba(27,29,31,.18); animation:clPop .25s cubic-bezier(.2,.9,.3,1.2);}
@keyframes clPop{from{transform:translateY(12px) scale(.96); opacity:0;}to{transform:translateY(0) scale(1); opacity:1;}}
.cl-close{position:absolute; top:12px; right:12px; width:30px; height:30px; border:none; border-radius:8px;
  background:transparent; color:var(--text-dim); font-size:16px; cursor:pointer; line-height:1; transition:background .15s, color .15s;}
.cl-close:hover{background:var(--border); color:var(--text);}
.cl-head{display:flex; align-items:center; gap:10px; margin-bottom:18px; padding-right:28px; flex-shrink:0;}
.cl-emoji{font-size:30px; line-height:1;}
.cl-title{font-size:20px; font-weight:700; color:var(--text);}
.cl-body{display:flex; flex-direction:column; gap:14px; overflow-y:auto; flex:1 1 auto; min-height:0; padding-right:4px;}
.cl-entry{background:rgba(36,85,126,.06); border:1px solid var(--border); border-radius:10px; padding:12px 14px;}
.cl-entry-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.cl-entry-title{font-size:14px; font-weight:600; color:var(--text);}
.cl-entry-date{font-size:11px; color:var(--text-dim); flex-shrink:0;}
.cl-entry-text{font-size:13px; color:var(--text-dim); line-height:1.5; margin-top:5px;}
.cl-ok{display:block; width:100%; margin-top:20px; flex-shrink:0; padding:11px; border:none; border-radius:10px;
  background:var(--accent); color:#fff; font-size:14px; font-weight:600; cursor:pointer; transition:opacity .15s;}
.cl-ok:hover{opacity:.9;} .cl-ok:active{transform:scale(.99);}

@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;}
}

/* Hyperlinks in KI-Antworten (z. B. Fristenrechner-Verweis) — helles Akzentblau, auf dunklem BG gut lesbar */
.md-link{color:var(--accent); text-decoration:underline; text-underline-offset:2px;}
.md-link:hover{color:#193F60; text-decoration:underline;}


/* ── Jurablau-Feinschliff (27.07.2026): Lesbarkeit, Marke, A/A+-Umschalter ── */
:root { --basis: 15px; --lese: 15.5px; }
html[data-groesse="gross"] { --basis: 16.5px; --lese: 17.5px; }
body.tool-page { font-size: var(--basis); }
.tool-page .header { border-bottom: 3px solid var(--accent); }
.tool-page .logo { background: none; -webkit-text-fill-color: var(--text); color: var(--text);
  font-weight: 800; letter-spacing: -.02em; }
.logo-mark { width: 22px; height: 22px; background: var(--accent); border-radius: 3px;
  display: inline-grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; flex: none; }
.tm-schrift { display: flex; align-items: center; gap: 8px; padding: 8px 11px; }
.tm-schrift-label { flex: 1; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); }
.tm-a { width: 36px; height: 30px; border: 1px solid var(--border); background: none; color: var(--text);
  border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700;
  font-family: "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; }
.tm-a.tm-a-plus { font-size: 15px; }
.tm-a:hover { border-color: var(--accent); }
.tm-a.aktiv { border-color: var(--accent); color: var(--accent); background: rgba(36,85,126,.08); }

/* Burger-Menü: mehr Luft (27.07. — Helvetica läuft enger als die frühere DM Sans) */
.tool-menu { min-width: 300px; padding: 8px; }
.tm-item { padding: 11px 12px; gap: 12px; font-size: 14.5px; line-height: 1.45; }
.tm-head { padding: 10px 12px 7px; }
.tm-sep { margin: 7px 8px; }
.tm-ic, .tm-ic svg { width: 21px; height: 21px; }
.tm-schrift { padding: 9px 12px 10px; gap: 9px; }