/* Tokens: assets/tokens.css (Quelle: design-system/tokens.css im Projektordner) */
/* Giny UI · Designsprache des Analyse-Dashboards (hell, dicht, Glas auf Metall)
   Quelle der Tokens: modules/analyse/dashboard.php */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{min-height:100%;}
body{
  font-family:var(--font);color:var(--ink);
  background:var(--bg);
  background-attachment:fixed;
  font-size:13.5px;line-height:1.4;letter-spacing:-0.005em;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;}
.small{font-size:11.5px;}
.muted{color:var(--muted);}
.error{color:var(--bad);font-weight:600;}
.notice{color:var(--warn);font-weight:600;}

/* Inhalt */
.content{max-width:1200px;margin:0 auto;padding:20px 16px 60px;}
h1{font-weight:300;letter-spacing:-0.025em;font-size:24px;margin:0 0 12px;}
h2{font-weight:600;font-size:13px;letter-spacing:-0.01em;margin:18px 0 8px;}
p{color:var(--muted);margin:0 0 10px;}
p strong{color:var(--ink);font-weight:600;}

.card{
  background:linear-gradient(180deg,var(--card-grad-a) 0%,var(--card-grad-b) 100%);
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 1px 2px rgba(20,30,60,.06),0 8px 22px rgba(20,30,60,.07);
  padding:14px 16px;margin:12px 0;}
.card .label{font-size:9.5px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted-2);margin:0 0 8px;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;}
.grid .card{margin:0;}

.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid var(--line);background:var(--chip);color:var(--muted);}
.badge.on{color:var(--good);border-color:rgba(31,157,85,.35);}
.badge.off{color:var(--warn);border-color:rgba(199,122,20,.35);}

/* Zahlen (KPI-Stil des Dashboards) */
.num{font-weight:300;font-size:23px;letter-spacing:-0.02em;line-height:1;color:var(--ink);}

/* Formulare */
/* Hausschrift fuer ALLE Eingabefelder (global): Trebuchet MS. */
input, textarea, select, button, .ang-rt { font-family: var(--font-brand); }
label{display:block;font-size:9.5px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted-2);margin:12px 0 5px;}
input[type=text],input[type=email],input[type=password]{
  width:100%;font:inherit;font-size:13.5px;color:var(--ink);
  background:#FFFFFF;border:1px solid var(--line);border-radius:10px;padding:9px 12px;}
input:focus{outline:none;border-color:var(--accent);}
button{
  margin-top:14px;font:inherit;font-size:12.5px;font-weight:600;color:#fff;
  background:var(--accent);border:none;border-radius:999px;padding:8px 18px;cursor:pointer;
  transition:opacity .2s cubic-bezier(0.25,0.46,0.45,0.94);}
button:hover{opacity:0.88;}

/* Auth-Karte */
.auth-card{max-width:380px;margin:12vh auto 0;
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(241,243,248,.6) 100%);
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 1px 2px rgba(20,30,60,.06),0 8px 22px rgba(20,30,60,.07);
  padding:28px 30px;}
.auth-card h1{font-size:26px;}

/* ===== Kern-Login („auth-core") — zentriert in der Video-Kugel =====
   Greift nur auf den Auth-Seiten mit Vollbildvideo (body[data-auth="core"]).
   Felder als zentrierte Lichtlinien, ohne Box; Login als Pill. */
body[data-auth="core"]{display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0;}
body[data-auth="core"] .content{padding:0;display:flex;align-items:center;justify-content:center;width:100%;}
body[data-auth="core"] .auth-card{
  max-width:300px;margin:0;padding:0;background:none;border:none;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;text-align:center;
  animation:authcore-in .6s cubic-bezier(.2,.7,.2,1) both;}
@keyframes authcore-in{from{opacity:0;transform:translateY(8px) scale(.985);}to{opacity:1;transform:none;}}
body[data-auth="core"] .auth-card h1{
  font-size:32px;font-weight:700;color:#fff;letter-spacing:1.5px;margin:0 0 38px;
  text-shadow:0 0 22px rgba(140,110,255,.6);}
body[data-auth="core"] .auth-card .muted{color:#aab0d0;font-size:11.5px;line-height:1.5;max-width:260px;margin:0 auto 20px;}  /* z.B. 2FA-Anleitung – lesbar, nicht ausgeblendet */
body[data-auth="core"] .auth-card form{display:flex;flex-direction:column;align-items:center;gap:0;}
/* Feld + im Feld liegendes Label (Floating-Placeholder) */
body[data-auth="core"] .auth-card .auth-field{position:relative;width:230px;max-width:80vw;margin:0 0 26px;}
body[data-auth="core"] .auth-card .auth-field input{
  width:100%;box-sizing:border-box;background:transparent;border:none;
  border-bottom:1.5px solid rgba(160,140,255,.55);border-radius:0;color:#fff;
  font-size:15px;text-align:center;letter-spacing:.02em;padding:9px 6px;margin:0;
  outline:none;transition:border-color .2s ease, box-shadow .2s ease;}
body[data-auth="core"] .auth-card .auth-field input:focus{
  border-bottom-color:rgba(190,170,255,1);box-shadow:0 6px 14px -8px rgba(150,120,255,.8);}
/* Label sitzt MITTIG IM Feld und blendet aus, sobald getippt wird oder Fokus da ist */
body[data-auth="core"] .auth-card .auth-field label{
  position:absolute;left:0;right:0;top:9px;pointer-events:none;
  font-size:13px;color:rgba(205,210,235,.6);letter-spacing:.02em;text-align:center;
  transition:opacity .18s ease;}
body[data-auth="core"] .auth-card .auth-field input:focus + label,
body[data-auth="core"] .auth-card .auth-field input:not(:placeholder-shown) + label{opacity:0;}
body[data-auth="core"] .auth-card button{
  margin-top:10px;background:transparent;border:none;color:#fff;
  border-radius:30px;padding:10px 40px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;transition:opacity .2s ease,text-shadow .2s ease;width:auto;}
body[data-auth="core"] .auth-card button:hover{opacity:1;text-shadow:0 0 16px rgba(160,140,255,.8);}
body[data-auth="core"] .auth-card .notice,
body[data-auth="core"] .auth-card .error{
  color:#fff;font-size:12px;margin:0 0 20px;padding:8px 14px;border-radius:10px;
  background:rgba(40,30,70,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
body[data-auth="core"] .auth-card .error{background:rgba(120,30,40,.5);}
/* 2FA-Schlüsselblock lesbar auf dunklem Grund */
body[data-auth="core"] .auth-card .kv{text-align:left;margin:18px auto 22px;max-width:260px;}
body[data-auth="core"] .auth-card .kv dt{color:#9aa0c4;}
body[data-auth="core"] .auth-card .kv dd{color:#e8e9f3;}
body[data-auth="core"] .auth-card a{color:#c9bcff;}
.kv{margin:14px 0;}
.kv dt{font-size:9.5px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted-2);margin-top:10px;}
.kv dd{margin:2px 0 0;color:var(--ink);word-break:break-all;}

.foot{max-width:1200px;margin:0 auto;padding:14px 16px 32px;color:var(--muted-2);font-size:11px;}

/* Tabellen (Dashboard-Stil) */
table.list{border-collapse:collapse;width:100%;font-size:11.5px;}
table.list th,table.list td{text-align:left;padding:5px 6px;border-bottom:1px solid var(--line);}
table.list th{font-size:8.5px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted-2);}
table.list td{color:var(--muted);}
table.list td.k{color:var(--ink);font-weight:500;}

@media(max-width:700px){
  .topbar-inner{gap:8px;}
  .tabs{order:3;flex-basis:100%;}
  .content{padding:14px 12px 48px;}
}

/* ===== Rich-Text-Eingabefelder (zentral, einheitlich für alle Module) =====
   Markup: <div class="ang-rt" contenteditable> + Toolbar .ang-rt-btn.
   Logik: assets/richtext.js (GinyRichText.init). */
.ang-block{display:flex;gap:20px;align-items:flex-start;box-sizing:border-box;}
.ang-block-edit{flex:55 1 0;min-width:0;}
.ang-block-meta{flex:45 1 0;min-width:0;}
@media(max-width:760px){ .ang-block{flex-direction:column;gap:8px;} .ang-block-edit,.ang-block-meta{width:100%;} }

.ang-rt{
  min-height:44px;border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font-size:14px;line-height:1.55;background:#FFFFFF;
  color:var(--ink);overflow:hidden;box-sizing:border-box;width:100%;}
.ang-rt:focus{outline:2px solid rgba(200,16,46,.2);border-color:#c8102e;}
.ang-rt p{margin:0 0 10px;}
.ang-rt a{color:#c8102e;}

.ang-rt-toolbar{display:flex;align-items:center;gap:6px;margin:6px 0 0;flex-wrap:wrap;}
.ang-rt-btn{
  margin-top:0;background:#eee;border:1px solid #ccc;border-radius:6px;
  padding:4px 10px;cursor:pointer;font-size:13px;font-weight:400;color:#1a1a1a;}
.ang-rt-btn:hover{background:#e0e0e0;}
.ang-rt-btn strong, .ang-rt-btn em{color:#1a1a1a;}

/* Lösch-Button (roter Voll-Button mit Icon) — Angebote: gesendet/entwuerfe */
.ang-btn-del{background:#c8102e;border:1px solid #c8102e;border-radius:7px;padding:0;cursor:pointer;
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;}
.ang-btn-del:hover{background:#a60d26;border-color:#a60d26;}
.ang-btn-del svg{display:block;}