/* =============================
       Design System & Base Styles
       ============================= */
    :root {
      /* Farben – Hellmodus */
      --color-bg: #ffffff;
      --color-surface: #f6f7f9;
      --color-surface-2: #eef1f5;
      --color-text: #0f172a;
      --color-muted: #475569;
      --color-primary: #0a84ff;
      --color-primary-600: #0a6fd6;
      --color-primary-50: #e6f2ff;
      --color-accent: #22c55e;
      --color-danger: #ef4444;
      --color-border: #e5e7eb;
      --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
      --shadow-md: 0 4px 12px rgba(0,0,0,.08);
      --shadow-lg: 0 8px 24px rgba(0,0,0,.12);

      /* Spacing Scale (rem) */
      --space-0: 0;
      --space-1: .25rem; /* 4px */
      --space-2: .5rem;  /* 8px */
      --space-3: .75rem; /* 12px */
      --space-4: 1rem;   /* 16px */
      --space-5: 1.25rem;/* 20px */
      --space-6: 1.5rem; /* 24px */
      --space-8: 2rem;   /* 32px */
      --space-10: 2.5rem;/* 40px */
      --space-12: 3rem;  /* 48px */

      /* Radius */
      --radius-sm: .375rem;
      --radius-md: .75rem;
      --radius-lg: 1rem;

      /* Container Breiten */
      --container: 1100px;
      --container-wide: 1280px;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --color-bg: #0b1220;
        --color-surface: #111827;
        --color-surface-2: #0f172a;
        --color-text: #e5e7eb;
        --color-muted: #9ca3af;
        --color-primary: #60a5fa;
        --color-primary-600: #93c5fd;
        --color-primary-50: #0b1220;
        --color-accent: #34d399;
        --color-danger: #f87171;
        --color-border: #1f2937;
        --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
        --shadow-md: 0 4px 12px rgba(0,0,0,.45);
        --shadow-lg: 0 8px 24px rgba(0,0,0,.5);
      }
    }

    /* Reset/Typo */
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
      background: var(--color-bg); color: var(--color-text); line-height: 1.5;
      -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    }
    img { max-width: 100%; height: auto; display: block; }
    a { color: var(--color-primary); text-decoration: none; }
    a:hover { text-decoration: underline; }
    h1,h2,h3 { line-height: 1.2; margin: var(--space-6) 0 var(--space-3); }
    h1 { font-size: clamp(1.75rem, 2.5vw, 2.5rem); }
    h2 { font-size: clamp(1.375rem, 2vw, 1.75rem); }
    h3 { font-size: 1.125rem; }
    p { margin: 0 0 var(--space-4); color: var(--color-muted); }

    /* Utilities */
    .container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
    .container-wide { width: min(100% - 2rem, var(--container-wide)); margin-inline: auto; }
    .section { padding: var(--space-10) 0; }
    .mt-4{margin-top:var(--space-4)} .mt-6{margin-top:var(--space-6)} .mt-8{margin-top:var(--space-8)}
    .mb-4{margin-bottom:var(--space-4)} .mb-6{margin-bottom:var(--space-6)} .mb-8{margin-bottom:var(--space-8)}
    .pt-6{padding-top:var(--space-6)} .pb-6{padding-bottom:var(--space-6)}
    .hidden-sm{display:none}
    @media (min-width:1024px){ .hidden-lg{display:none} .hidden-sm{display:initial} }

    /* Grid 12-Spalten ab ≥1024px */
    .grid { display: grid; gap: var(--space-6); }
    @media (min-width:1024px){
      .grid-12 { grid-template-columns: repeat(12, 1fr); }
      .lg-col-3 { grid-column: span 3; }
      .lg-col-4 { grid-column: span 4; }
      .lg-col-6 { grid-column: span 6; }
      .lg-col-8 { grid-column: span 8; }
      .lg-col-12{ grid-column: span 12; }
    }

    /* Cards */
    .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
    .card-body { padding: var(--space-6); }
    .card-title { font-weight: 700; margin-bottom: var(--space-2); }
    .card-meta { font-size: .875rem; color: var(--color-muted); }

    /* Buttons */
    .btn { display:inline-flex; align-items:center; gap:.5rem; border:1px solid transparent; border-radius: var(--radius-md); padding:.625rem 1rem; font-weight:600; cursor:pointer; transition: .15s ease-in-out; background:transparent; color:var(--color-text); }
    .btn:focus { outline: 3px solid color-mix(in srgb, var(--color-primary) 45%, transparent); outline-offset: 2px; }
    .btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
    .btn-primary:hover { background: var(--color-primary-600); }
    .btn-outline { border-color: var(--color-border); background: var(--color-bg); }
    .btn-ghost { background: transparent; color: var(--color-primary); }
    .btn-danger { background: var(--color-danger); color:#fff; }

    /* Inputs */
    .input, select, .select, .textarea { width:100%; border:1px solid var(--color-border); background: var(--color-bg); color:var(--color-text); padding:.625rem .75rem; border-radius: var(--radius-md); }
    .input:focus, select:focus, .textarea:focus { outline: 3px solid color-mix(in srgb, var(--color-primary) 35%, transparent); border-color: var(--color-primary); }
    .input-group { display:flex; gap:.5rem; }

    /* Badges & Chips */
    .badge { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .5rem; border-radius:999px; font-size:.75rem; border:1px solid var(--color-border); background: var(--color-surface-2); color:var(--color-text); }
    .badge--success { background: color-mix(in srgb, var(--color-accent) 15%, var(--color-surface-2)); border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); }
    .chip { display:inline-flex; align-items:center; gap:.35rem; padding:.375rem .625rem; border-radius:999px; background: var(--color-primary-50); color: var(--color-text); border:1px dashed var(--color-border); cursor:default; }

    /* Tabs */
    .tabs { border-bottom:1px solid var(--color-border); display:flex; gap:.5rem; }
    .tab-btn { border:none; background:transparent; padding:.75rem 1rem; cursor:pointer; border-bottom:3px solid transparent; color:var(--color-muted); font-weight:600; }
    .tab-btn[aria-selected="true"] { color:var(--color-text); border-color: var(--color-primary); }
    .tab-panel { display:none; padding-top: var(--space-4); }
    .tab-panel[data-active="true"] { display:block; }

    /* Modal */
    dialog.modal { border:none; border-radius: var(--radius-lg); padding:0; background: var(--color-surface); color:var(--color-text); box-shadow: var(--shadow-lg); width:min(90vw, 560px); }
    dialog::backdrop { background: rgba(0,0,0,.35); }
    .modal-header { padding: var(--space-5) var(--space-6); border-bottom:1px solid var(--color-border); display:flex; justify-content:space-between; align-items:center; }
    .modal-body { padding: var(--space-6); }

    /* Header */
    header.site-header { position: sticky; top:0; z-index: 50; backdrop-filter: saturate(180%) blur(10px); background: color-mix(in srgb, var(--color-bg) 85%, transparent); border-bottom:1px solid var(--color-border); }
    .nav-wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0; }
    .brand { font-weight:800; letter-spacing:.2px; display:flex; align-items:center; gap:.5rem; }
    nav.primary-nav a { color:var(--color-text); padding:.5rem .75rem; border-radius: .5rem; }
    nav.primary-nav a[aria-current="page"], nav.primary-nav a:hover { background: var(--color-surface); }
    .nav-toggle { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius: .5rem; border:1px solid var(--color-border); background: var(--color-bg); }
    .nav-menu { display:none; }
    @media (min-width: 900px){ .nav-toggle { display:none } .nav-menu { display:flex } }

    /* Footer */
    footer.site-footer { border-top:1px solid var(--color-border); background: var(--color-surface); padding: var(--space-8) 0; }
    .footer-grid { display:grid; gap: var(--space-6); }
    @media (min-width: 700px){ .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

    /* Hero */
    .hero { padding: clamp(2rem, 4vw, 4rem) 0; }
    .hero-wrap { display:grid; gap: var(--space-8); align-items:center; }
    @media (min-width: 900px){ .hero-wrap { grid-template-columns: 1.2fr .8fr; } }
    .searchbar { display:grid; gap:.5rem; grid-template-columns: 1fr; }
    @media (min-width:700px){ .searchbar { grid-template-columns: 2fr 2fr 1.5fr auto; } }

    /* Feature Cards */
    .feature-icon { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background: var(--color-primary-50); }

    /* Event Card */
    .event-date { font-weight:700; }

    /* Focus visibility */
    :focus-visible { outline: 3px solid color-mix(in srgb, var(--color-primary) 45%, transparent); outline-offset: 2px; border-radius: .25rem; }