:root {
      --bg: #2a2c30;          /* dunkles Blau/Schiefer */
      --panel: #0f172a;       /* slate-900 */
      --card: #111827;        /* gray-900 */
      --muted: #9aa6b2;       /* slate-400 */
      --text: #e5e7eb;        /* gray-200 */
      --accent: #22c55e;      /* grün */
      --accent-2: #60a5fa;    /* blau */
      --radius: 16px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--text);
      background: radial-gradient(1100px 700px at -10% -10%, rgba(96,165,250,.14), transparent 80%),
                  radial-gradient(900px 600px at 110% -10%, rgba(34,197,94,.12), transparent 55%),
                  var(--bg);
    }

    a { color: inherit; text-decoration: none; }
    .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

    /* Header */
    header.site {
      position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px) saturate(130%);
      background: linear-gradient(180deg, rgba(15,23,42,.6), rgba(150, 153, 160, 0.6));
      border-bottom: 1px solid rgba(148,163,184,.12);
    }
    .bar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding: 14px 0; }

    .brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.3px; }
    .brand .mark { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--shadow); }
    nav a { padding:10px 12px; border-radius: 999px; }
    nav a:hover { background: rgba(148,163,184,.14); }

    /* Hero */
    .hero { padding: 96px 0 56px; text-align: center; }
    .kicker { color: var(--accent-2); font-weight: 700; letter-spacing:.3px; text-transform: uppercase; font-size: 13px; }
    h1 { font-size: clamp(28px, 4vw, 46px); margin: 10px 0 12px; }
    .sub { max-width: 820px; margin: 0 auto; color: var(--muted); font-size: clamp(16px, 2.2vw, 19px); }

    .cta { margin-top: 22px; display:flex; gap: 12px; justify-content:center; flex-wrap: wrap; }
    .btn { display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius: 999px; border:1px solid rgba(148,163,184,.18); background: rgba(148,163,184,.10); font-weight:700; }
    .btn.primary { background: linear-gradient(180deg, rgba(34,197,94,.25), rgba(34,197,94,.18)); }
    .btn:hover { filter: brightness(1.05); }

    /* Sections */
    section { padding: 56px 0; }
    .grid { display:grid; gap: 18px; grid-template-columns: 1fr; }
    @media (min-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } }

    .card { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid rgba(148,163,184,.12); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
    .card h3 { margin: 8px 0 8px; }
    .muted { color: var(--muted); }

    /* About */
    .two { display:grid; gap: 24px; grid-template-columns: 1fr; }
    @media (min-width: 900px) { .two { grid-template-columns: 1.1fr .9fr; } }

    .well { padding: 18px; border-radius: var(--radius); background: rgba(2,6,23,.35); border:1px dashed rgba(148,163,184,.25); }

    /* Kontakt */
    form { display:grid; gap:12px; }
    input, textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border:1px solid rgba(148,163,184,.25); background: rgba(2,6,23,.35); color: var(--text); }
    textarea { min-height: 120px; }
    label { font-weight: 600; font-size: 14px; }

    footer { border-top: 1px solid rgba(148,163,184,.12); padding: 28px 0 64px; color: var(--muted); }
    .legal { display:flex; gap: 12px; flex-wrap: wrap; }
    .legal a { text-decoration: underline; text-underline-offset: 2px; }

    /* Accessibility helpers */
    .sr-only { position: absolute; width: 1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }