/*
PXN TOOLBOARD — gemeinsames Theme (Pixelnauten CI)
---------------------------------------------------
Diese Datei UNVERÄNDERT auf jeder Seite einbinden, direkt nach dem
Lato-Font-Link:
Enthält: Grundlayout, Auth-Sichtbarkeit (Login-Gate / App), Buttons,
Topbar und Seiten-Header. Tool-spezifische Styles (z.B. Datei-Karten,
Formulare) bleiben im jeweiligen Tool selbst.
Farben ändern? Einmal hier anpassen, wirkt auf ALLE Seiten.
*/
* { box-sizing: border-box; }
body {
font-family: 'Lato', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #003b5c 0%, #411e5a 100%);
background-attachment: fixed;
color: #ffffff;
margin: 0;
min-height: 100vh;
}
/* ---------- Auth-Sichtbarkeit (auth.js setzt data-auth auf ) ---------- */
html[data-auth="loading"] #login-gate,
html[data-auth="loading"] #app { display: none; }
html[data-auth="anonymous"] #app { display: none; }
html[data-auth="authenticated"] #login-gate { display: none; }
/* ---------- Login-Gate ---------- */
#login-gate {
max-width: 380px;
margin: 12vh auto 0;
text-align: center;
padding: 2.5rem 2rem;
background: rgba(0, 31, 48, 0.85);
backdrop-filter: blur(10px);
border-radius: 12px;
border: 1px solid rgba(0, 227, 231, 0.2);
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
#login-gate .logo { font-size: 40px; margin-bottom: 8px; }
#login-gate h1 {
color: #00e3e7; font-size: 20px; margin: 0 0 .5rem; text-transform: uppercase;
letter-spacing: 2px; font-weight: 700;
}
#login-gate p { color: #b0c4de; margin: 0 0 1.5rem; font-size: .95rem; }
/* ---------- Buttons ---------- */
.btn-pn {
background: linear-gradient(135deg, #00e3e7, #0f5a5f); color: #001f30; border: none;
padding: 10px 15px; border-radius: 8px; font-weight: bold; font-size: 14px;
transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 15px rgba(0, 227, 231, 0.4);
cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: inherit;
}
.btn-pn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 227, 231, 0.6); }
.btn-pn:disabled { background: #0f5a5f; box-shadow: none; cursor: not-allowed; transform: none; color: #8da9a9; }
.btn-pn-purple { background: linear-gradient(135deg, #a70ec3, #411e5a); color: white; box-shadow: 0 4px 15px rgba(167, 14, 195, 0.4); }
.btn-pn-purple:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(167, 14, 195, 0.6); }
.btn-pn-dark { background: rgba(0, 39, 61, 0.8); color: #00e3e7; border: 1px solid #00e3e7; box-shadow: none; }
.btn-pn-dark:hover:not(:disabled) { background: rgba(0, 227, 231, 0.1); }
.btn-pn-danger { background: linear-gradient(135deg, #ff4a4a, #990000); color: white; box-shadow: 0 4px 15px rgba(255, 74, 74, 0.4); border: none; }
.btn-pn-danger:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(255, 74, 74, 0.6); }
/* ---------- Topbar (Dashboard-Link + Logout, auf jeder Tool-Seite) ---------- */
.pxn-topbar {
display: flex; justify-content: space-between; align-items: center;
max-width: 1280px; margin: 0 auto 1.5rem;
}
.pxn-topbar a { color: #00e3e7; text-decoration: none; font-size: .85rem; font-weight: 600; }
.pxn-topbar a:hover { text-decoration: underline; }
/* ---------- Seiten-Header ---------- */
.header { text-align: center; margin-bottom: 40px; }
.header h1 {
color: #00e3e7; font-size: 34px; margin: 0; text-transform: uppercase;
letter-spacing: 2px; font-weight: 700; display: flex; align-items: center;
justify-content: center; gap: 15px;
}
.header p { color: #b0c4de; margin-top: 10px; font-size: 15px; }
/* ---------- Zugriff verweigert (rollenbeschränkte Seiten) ----------
Für jede Seite, die per /_redirects auf bestimmte Rollen beschränkt
ist: eine Box mit dieser Klasse zeigen/verstecken, je nachdem, ob
window.pxnCanAccess([...]) true liefert (siehe auth.js). Das ist nur
die zusätzliche Client-Absicherung — der eigentliche Schutz läuft
über /_redirects. */
.denied-box {
max-width: 440px;
margin: 6vh auto 0;
text-align: center;
padding: 2rem;
background: rgba(0, 31, 48, 0.85);
backdrop-filter: blur(10px);
border-radius: 12px;
border: 1px solid rgba(255, 90, 90, 0.3);
}
.denied-box p { color: #ffb0b0; font-size: .95rem; margin: 0 0 1.25rem; }