/* GearSync Pro – Stylesheet für die statischen Rechtsseiten
   Eigenständig, damit Impressum/Datenschutz/AGB/Widerruf/Lizenzen auch
   erreichbar bleiben, wenn die App-JS nicht lädt. Tokens gespiegelt aus style.css. */

:root{
  --bg-primary:#090d16;
  --bg-secondary:#131c2e;
  --bg-card:#1e293b;
  --bg-input:#0f172a;
  --text-main:#f8fafc;
  --text-muted:#94a3b8;
  --brand-color:#3b82f6;
  --brand-hover:#2563eb;
  --border-color:#334155;
}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  background-color:var(--bg-primary);
  color:var(--text-main);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.legal-topbar{
  background-color:var(--bg-secondary);
  border-bottom:1px solid var(--border-color);
  padding:1rem 1.25rem;
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.legal-brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.15rem;text-decoration:none;color:var(--text-main)}
.legal-brand img{height:26px;width:auto;display:block}
.legal-brand .ac{color:var(--brand-color)}
.legal-back{
  color:var(--text-muted);text-decoration:none;font-weight:600;font-size:.9rem;
  border:1px solid var(--border-color);border-radius:8px;padding:.5rem .85rem;white-space:nowrap;
}
.legal-back:hover{color:var(--text-main);border-color:var(--brand-color)}

.legal-wrap{width:100%;max-width:860px;margin:0 auto;padding:2rem 1.25rem 1rem;flex:1}

.legal-head{margin-bottom:1.5rem}
.legal-head h1{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.5rem}
.legal-head p{color:var(--text-muted);max-width:720px}
.legal-updated{color:var(--text-muted);font-size:.85rem;margin-top:.5rem}

.legal-card{
  background-color:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:16px;
  padding:1.5rem;
  margin-bottom:1.25rem;
}
.legal-card h2{font-size:1.15rem;color:var(--brand-color);margin-bottom:.85rem}
.legal-card h3{font-size:1rem;color:var(--text-main);margin:1.25rem 0 .45rem}
.legal-card h3:first-of-type{margin-top:.25rem}
.legal-card p{color:var(--text-muted);margin:.5rem 0}
.legal-card ul,.legal-card ol{color:var(--text-muted);margin:.6rem 0 .6rem 1.25rem}
.legal-card li{margin:.3rem 0}
.legal-card a{color:var(--brand-color);text-decoration:none}
.legal-card a:hover{text-decoration:underline}
.legal-card strong{color:var(--text-main)}

.legal-note{
  border-color:rgba(59,130,246,.45);
  background:linear-gradient(135deg,rgba(59,130,246,.12),var(--bg-card));
}
.legal-warning{border-color:rgba(245,158,11,.4)}

.legal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:.5rem 0}
.legal-kv{
  background-color:var(--bg-input);
  border:1px solid var(--border-color);
  border-radius:12px;padding:.9rem;
}
.legal-kv span{
  display:block;color:var(--text-muted);font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:.35rem;
}
.legal-kv strong{color:var(--text-main);font-weight:700;overflow-wrap:anywhere}

.legal-formbox{
  background-color:var(--bg-input);
  border:1px dashed var(--border-color);
  border-radius:12px;padding:1.1rem;margin:.75rem 0;
  color:var(--text-muted);font-size:.92rem;
}

.legal-footer{
  border-top:1px solid var(--border-color);
  padding:1.5rem 1.25rem 2.5rem;
  text-align:center;color:var(--text-muted);font-size:.85rem;
}
.legal-footer nav{display:flex;flex-wrap:wrap;gap:.5rem 1.15rem;justify-content:center;margin-bottom:.9rem}
.legal-footer nav a{color:var(--text-muted);text-decoration:none;font-weight:600}
.legal-footer nav a:hover{color:var(--brand-color)}

@media (max-width:640px){
  .legal-head h1{font-size:1.55rem}
  .legal-card{padding:1.15rem}
  .legal-grid{grid-template-columns:1fr}
}