@import url("fonts.css");

/* ==========================================================================
   legal.css – gemeinsames Stylesheet für die Rechtsseiten
   impressum.html · datenschutz.html · nutzungsbestimmungen.html
   Farbschema/Theme wie index.css (huuu.biz)
   ========================================================================== */

  :root {
    --bg: #0b0f14;
    --bg-soft: #10161d;
    --surface: #141c25;
    --border: #22303e;
    --text: #e6edf3;
    --text-dim: #93a4b5;
    --accent: #22d3a5;
    --accent-2: #38bdf8;
    --radius: 14px;
    --font: "IBM Plex Sans", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: "Inconsolata", ui-monospace, "Cascadia Code", Consolas, monospace;
    --font-heading: "IBM Plex Sans", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  }
/* Ueberschriften folgen --font-heading (aktuell = Text-Schrift). */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
  }
  .bg-glow { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
  .bg-glow::before, .bg-glow::after {
    content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%;
    filter: blur(140px); opacity: .4;
  }
  .bg-glow::before { top: -220px; right: -140px; background: radial-gradient(circle, rgba(34,211,165,.35), transparent 65%); }
  .bg-glow::after { bottom: -260px; left: -180px; background: radial-gradient(circle, rgba(56,189,248,.28), transparent 65%); }

  header {
    border-bottom: 1px solid var(--border);
    background: rgba(11,15,20,.72);
    backdrop-filter: blur(14px);
    position: sticky; top: 0; z-index: 10;
  }
  .nav-inner {
    max-width: 860px; margin: 0 auto; padding: 0 22px;
    display: flex; align-items: center; justify-content: space-between; height: 68px;
  }
  .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; color: var(--text); text-decoration: none; }
  .logo-badge {
    width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #07100d; font-weight: 700; font-size: .85rem;
  }
  .logo em { font-style: normal; color: var(--accent); }
  .back { color: var(--accent-2); font-size: .9rem; text-decoration: none; }
  .back:hover { text-decoration: underline; }

  main { max-width: 860px; margin: 0 auto; padding: 56px 22px 80px; }
  .kicker { font-family: var(--mono); font-size: .85rem; color: var(--accent); text-transform: uppercase; letter-spacing: .12em; }
  h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; margin: 10px 0 8px; }
  .updated { color: var(--text-dim); font-size: .88rem; margin-bottom: 40px; font-family: var(--mono); }

  .card {
    background: linear-gradient(180deg, var(--surface), var(--bg-soft));
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 30px 32px; margin-bottom: 22px;
  }
  .card:last-child { margin-bottom: 0; }
  h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: 12px; color: var(--accent); }
  h3 { font-size: 1rem; font-weight: 700; margin: 22px 0 8px; }
  h3:first-child { margin-top: 0; }
  p { color: var(--text-dim); margin-bottom: 12px; }
  p:last-child { margin-bottom: 0; }
  p strong { color: var(--text); }
  ul, ol { color: var(--text-dim); margin: 0 0 14px 22px; }
  ul:last-child, ol:last-child { margin-bottom: 0; }
  li { margin-bottom: 6px; }
  a { color: var(--accent-2); }
  a:hover { text-decoration: none; }

  .entry {
    background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px;
    padding: 16px 18px; margin-bottom: 12px;
  }
  .entry:last-child { margin-bottom: 0; }
  .entry .site { color: var(--text); font-weight: 700; font-family: var(--mono); display: block; margin-bottom: 4px; }

  .notice {
    border: 1px solid rgba(248,113,113,.4); background: rgba(248,113,113,.07);
    color: var(--text-dim); border-radius: 10px; padding: 12px 16px;
    font-size: .88rem; margin-bottom: 22px;
  }
  .notice strong { color: var(--text); }
  .notice a { color: var(--accent-2); }

  code {
    font-family: var(--mono); font-size: .9em; color: var(--text);
    background: var(--bg-soft); border: 1px solid var(--border);
    border-radius: 6px; padding: 1px 6px;
  }

  footer { border-top: 1px solid var(--border); padding: 26px 0; text-align: center; color: var(--text-dim); font-size: .85rem; }
  footer nav { margin-bottom: 10px; }
  footer a { color: var(--text-dim); margin: 0 10px; }
  footer a:hover { color: var(--text); }

  @media (max-width: 560px) {
    main { padding: 40px 18px 64px; }
    .card { padding: 24px 20px; margin-bottom: 16px; }
  }