*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --cp:#0d9488;--cp-dark:#0f766e;--cp-light:#f0fdfa;--cp-mid:#ccfbf1;
    --bg:#f9fafb;--surface:#fff;--text:#111827;--muted:#6b7280;
    --border:#e5e7eb;--radius:.75rem;--radius-btn:.5rem;--radius-pill:9999px;
    --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
    --shadow-lg:0 4px 20px rgba(0,0,0,.12);
    --danger:#dc2626;
}
html,body{height:100%;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:.9rem;background:var(--bg);color:var(--text)}

/* ── Login ── */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--cp) 0%,var(--cp-dark) 100%)}
.login-card{background:#fff;border-radius:var(--radius);box-shadow:0 10px 40px rgba(0,0,0,.18);padding:2.5rem 2rem;width:100%;max-width:380px}
.login-card .logo{text-align:center;margin-bottom:1.5rem}
.login-card .logo h1{font-size:1.5rem;font-weight:700;color:var(--cp);letter-spacing:-.02em}
.login-card .logo p{font-size:.825rem;color:var(--muted);margin-top:.25rem}
.form-group{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem}
.form-group label{font-size:.78rem;font-weight:500;color:var(--muted)}
.form-group input{height:2.4rem;padding:0 .75rem;border:1px solid var(--border);border-radius:var(--radius-btn);font-size:.9rem;font-family:inherit;color:var(--text);outline:none;transition:border-color .15s}
.form-group input:focus{border-color:var(--cp)}
.btn-login{width:100%;height:2.4rem;background:var(--cp);color:#fff;border:none;border-radius:var(--radius-btn);font-size:.9rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s;margin-top:.5rem}
.btn-login:hover{background:var(--cp-dark)}
.login-error{background:#fee2e2;color:var(--danger);border-radius:var(--radius-btn);padding:.55rem .75rem;font-size:.825rem;margin-bottom:1rem;display:none}
.login-error.visible{display:block}

/* ── Hub ── */
.page{display:flex;flex-direction:column;min-height:100vh}
.hero{background:linear-gradient(135deg,var(--cp) 0%,var(--cp-dark) 100%);color:#fff;padding:2.5rem 1.5rem 2rem;flex-shrink:0}
.hero-inner{max-width:1400px;margin:0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.hero-text h1{font-size:1.8rem;font-weight:700;letter-spacing:-.02em}
.hero-text p{font-size:.9rem;opacity:.85;margin-top:.25rem}
.btn-logout{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:var(--radius-btn);padding:.4rem .9rem;font-size:.825rem;font-weight:500;cursor:pointer;font-family:inherit;transition:background .15s;white-space:nowrap}
.btn-logout:hover{background:rgba(255,255,255,.25)}
.content{flex:1;padding:2rem 1.5rem}
.container{max-width:1400px;margin:0 auto}
.section-label{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.25rem}
.tool-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem;border-top:4px solid var(--cp);display:flex;flex-direction:column;gap:1rem;transition:box-shadow .2s,transform .2s;text-decoration:none;color:inherit}
.tool-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.tool-card.c-teal{border-top-color:#0d9488}
.tool-card.c-blue{border-top-color:#2563eb}
.tool-card.c-green{border-top-color:#16a34a}
.tool-card.c-orange{border-top-color:#ea580c}
.tool-card.c-purple{border-top-color:#7c3aed}
.tool-card-header{display:flex;align-items:center;gap:.75rem}
.tool-icon{width:2.5rem;height:2.5rem;border-radius:.5rem;background:var(--cp-light);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tool-icon svg{width:20px;height:20px;stroke:var(--cp);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.tool-card.c-blue .tool-icon{background:#eff6ff}
.tool-card.c-blue .tool-icon svg{stroke:#2563eb}
.tool-card-title{font-size:1rem;font-weight:700}
.tool-card-desc{font-size:.845rem;color:var(--muted);line-height:1.55;flex:1}
.tool-card-footer{display:flex;justify-content:flex-end}
.btn-open{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .9rem;border-radius:var(--radius-btn);font-size:.825rem;font-weight:500;border:1px solid var(--cp);color:var(--cp);background:transparent;font-family:inherit;transition:background .15s;text-decoration:none;cursor:pointer}
.btn-open:hover{background:var(--cp-light)}
.tool-card.c-blue .btn-open{border-color:#2563eb;color:#2563eb}
.tool-card.c-blue .btn-open:hover{background:#eff6ff}

/* ── Fehlerseite ── */
.error-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.error-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:2.5rem 2rem;max-width:480px;text-align:center}
.error-card h2{font-size:1.2rem;font-weight:700;color:var(--danger);margin-bottom:.75rem}
.error-card p{color:var(--muted);font-size:.875rem;line-height:1.6}
.error-card a{color:var(--cp);text-decoration:none;font-weight:500}
.error-card a:hover{text-decoration:underline}

/* ── Toast ── */
.toast{position:fixed;bottom:1.25rem;right:1.25rem;background:#111827;color:#fff;padding:.6rem 1.1rem;border-radius:var(--radius-btn);font-size:.825rem;box-shadow:0 4px 12px rgba(0,0,0,.15);opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none;z-index:9999}
.toast.show{opacity:1;transform:translateY(0)}