:root{
      --text:#f3f6ff;
      --muted:rgba(243,246,255,.78);
      --muted2:rgba(243,246,255,.62);

      --accent:#ff3b30;   /* Datum-Badge */
      --gold:#f4c44d;     /* Highlights */
      --stroke:rgba(255,255,255,.12);
      --stroke2:rgba(255,255,255,.10);
      --shadow: 0 18px 60px rgba(0,0,0,.45);

      --r:18px;
      --r2:26px;
      --max:1180px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      color:var(--text);
      /* keine externen Fonts */
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
      background:#0a0f1f;
      overflow-x:hidden;
    }

    /* =========================
       Hintergrund: oben Sunset, unten Asphalt
       (fixed Layer -> keine harte Kante unten)
       ========================= */
    .bg{
      position:fixed;
      inset:0;
      z-index:0;
      pointer-events:none;
      transform: translateZ(0);
      background:
        radial-gradient(1200px 700px at 78% 6%, rgba(255,220,140,.55), transparent 70%),
        radial-gradient(1000px 720px at 18% 14%, rgba(255,120,60,.52), transparent 72%),
        radial-gradient(1000px 820px at 55% 26%, rgba(120,90,255,.25), transparent 75%),

        /* Top: Himmel/Sunset -> Mid: gold -> Bottom: Asphalt */
        linear-gradient(
          180deg,
          #243a9a 0%,
          #4c2a88 18%,
          #a83a46 40%,
          #ffb54c 60%,
          #ffd07a 72%,
          #6b737f 80%,
          #3a404c 90%,
          #252a35 100%
        );
    }

    /* Wolken / Atmosphäre + Asphalt-Glow */
    .bg::before{
      content:"";
      position:absolute;
      inset:-80px;
      opacity:.45;
      background:
        radial-gradient(700px 320px at 12% 16%, rgba(255,255,255,.14), transparent 70%),
        radial-gradient(820px 360px at 44% 10%, rgba(255,255,255,.10), transparent 72%),
        radial-gradient(900px 400px at 74% 14%, rgba(255,255,255,.08), transparent 75%),

        /* ganz softes Vignette, unten mehr */
        linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,.10) 72%, rgba(0,0,0,.35) 100%),

        /* Asphalt-Haze unten */
        radial-gradient(900px 420px at 50% 110%, rgba(255,255,255,.08), transparent 65%);
      filter: blur(5px);
    }

    /* feines Grain gegen Banding */
    .bg::after{
      content:"";
      position:absolute;
      inset:0;
      opacity:.08;
      background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,0) 1px 3px),
        repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0 1px, rgba(0,0,0,0) 1px 4px);
      mix-blend-mode: overlay;
    }

    /* =========================
       Layout helpers
       ========================= */
    .wrap{ position:relative; z-index:1; }
    .container{ max-width:var(--max); margin:0 auto; padding:0 16px; }

    a{ color:inherit; text-decoration:none; }
    button{ font:inherit; color:inherit; }

    .sr-only{
      position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
    }

    /* =========================
       Topbar
       ========================= */
    .topbar{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter: blur(14px);
      background: linear-gradient(-90deg, rgba(225, 114, 17, 0.99), rgba(231, 231, 231, 0.45));
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .topbar-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 0;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    /*.logo{
      width:38px; height:38px;
      border-radius:50%;
      flex:0 0 auto;
      display:grid; place-items:center;
      border:1px solid rgba(255,255,255,.18);
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 55%),
        linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.02));
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
      overflow:hidden;
    }
    .logo svg{ width:22px; height:22px; opacity:.92; }*/

    .brand-txt{ display:flex; flex-direction:column; line-height:1.05; min-width:0; }
    .brand-txt strong{
      font-size:13px;
      letter-spacing:.16em;
      text-transform:uppercase;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .brand-txt span{
      margin-top:2px;
      font-size:11px;
      color:var(--muted);
      letter-spacing:.10em;
      text-transform:uppercase;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }

    .cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:10px 12px;
      border-radius:999px;
      background: linear-gradient(135deg, rgba(255,59,48,.95), rgba(255,106,43,.75));
      border:1px solid rgba(255,255,255,.16);
      box-shadow: 0 12px 40px rgba(255,59,48,.20);
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:11px;
      white-space:nowrap;
      cursor:pointer;
    }
    .cta .dot{
      width:8px; height:8px; border-radius:50%;
      background:rgba(255,255,255,.92);
      box-shadow: 0 0 0 4px rgba(255,255,255,.16);
    }
    .cta.alt{
      background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
      box-shadow:none;
      border:1px solid rgba(255,255,255,.14);
    }
    .cta.gold{
      background: linear-gradient(135deg, rgba(244,196,77,.92), rgba(255,106,43,.78));
      box-shadow: 0 12px 40px rgba(244,196,77,.14);
      border:1px solid rgba(255,255,255,.16);
    }
    .cta.gold .dot{
      background:rgba(0,0,0,.72);
      box-shadow: 0 0 0 4px rgba(0,0,0,.18);
    }

    .burger{
      width:42px; height:42px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      display:grid; place-items:center;
      cursor:pointer;
    }
    .burger svg{ width:20px; height:20px; fill:rgba(255,255,255,.92); }

    /* Drawer */
    .drawer-backdrop{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.52);
      backdrop-filter: blur(8px);
      display:none;
      z-index:80;
    }
    .drawer{
      position:fixed;
      right:0; top:0; bottom:0;
      width:min(86vw, 360px);
      background: rgba(8,10,18,.88);
      border-left:1px solid rgba(255,255,255,.10);
      box-shadow: -20px 0 60px rgba(0,0,0,.55);
      transform: translateX(110%);
      transition: transform .25s ease;
      z-index:90;
      padding:14px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .drawer.open{ transform: translateX(0); }
    .drawer-backdrop.open{ display:block; }

    .drawer-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:6px 2px 12px;
      border-bottom:1px solid rgba(255,255,255,.10);
    }
    .close{
      width:40px; height:40px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      display:grid; place-items:center;
      cursor:pointer;
    }
    .close svg{ width:18px; height:18px; fill:rgba(255,255,255,.92); }

    .navlink{
      padding:12px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      font-weight:900;
      letter-spacing:.10em;
      text-transform:uppercase;
      font-size:12px;
      color:rgba(255,255,255,.92);
    }
    .drawer-cta{
      margin-top:auto;
      display:grid;
      gap:10px;
    }
    .btn-wide{ width:100%; justify-content:center; padding:12px 14px; font-size:12px; }

    /* =========================
       Hero
       ========================= */
    header.hero{ padding:18px 0 16px; }

    .hero-grid{
      display:grid;
      grid-template-columns:1fr;
      gap:14px;
      align-items:stretch;
    }

    .card{
      border-radius: var(--r2);
      background: rgba(8,10,18,.38);
      border:1px solid var(--stroke);
      box-shadow: var(--shadow);
      overflow:hidden;
    }

    .hero-card{
      position:relative;
      min-height: 540px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
        rgba(8,10,18,.35);
    }

    /* “Cars / Parkplatz” ohne externes Bild:
       Silhouetten + Asphalt + Licht */
    .hero-card::before{
      content:"";
      position:absolute; inset:0;
      background:
        /* Sonnenflare rechts */
        radial-gradient(600px 320px at 86% 18%, rgba(255,220,140,.35), transparent 65%),

        /* Horizont-Licht */
        linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 35%),

        /* Car silhouettes (simple gradients) */
        radial-gradient(140px 70px at 25% 64%, rgba(255,70,70,.55), transparent 70%),
        radial-gradient(150px 70px at 75% 64%, rgba(255,255,255,.45), transparent 72%),

        /* Asphalt texture feel */
        repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, rgba(0,0,0,0) 1px 6px),
        linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.20) 45%, rgba(0,0,0,.70) 100%);
      opacity:.95;
    }

    .hero-inner{
      position:relative;
      z-index:2;
      padding:22px 18px 18px;
      height:100%;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:14px;
    }
    
    .hero-inner::before{
      content: "";
      background-image: url("/../assets/img/auto.png");
      background-position: center;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity:0.25;
    }
    
    h1 {
      position: relative;
      color: #ffffff;  
      font-size: 14rem;
      line-height: 0.9;
      text-align: center;
    }


    .kicker{
     /* display:flex; align-items:center; gap:10px;*/
      color:var(--muted);
      letter-spacing:.18em;
      text-transform:uppercase;
      font-weight:900;
      font-size:11px;
    }
    .kicker .bar{ display: inline-block; width:100px; height:2px; background:rgba(255,255,255,.35); border-radius:999px; }

    h1{
      margin:10px 0 0;
      font-size: clamp(30px, 9.2vw, 56px);
      line-height:.94;
      letter-spacing:.02em;
      text-transform:uppercase;
      font-weight: 1000;
      text-shadow: 0 14px 45px rgba(0,0,0,.55);
    }
    h1 .small{
      display:block;
      font-size: clamp(12px, 3.5vw, 20px);
      letter-spacing:.22em;
      opacity:.92;
      font-weight:900;
      margin-bottom:10px;
    }

    .sub{
      margin:12px 0 0;
      color:var(--muted);
      max-width:62ch;
      font-size:13px;
      line-height:1.7;
    }

    /* Event badges */
    .event-badge{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      margin-top:16px;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      border-radius:14px;
      background: rgba(8,10,18,.55);
      border:1px solid var(--stroke);
      backdrop-filter: blur(10px);
    }
    .badge strong{
      font-weight:1000;
      text-transform:uppercase;
      letter-spacing:.12em;
      font-size:12px;
    }
    .date-pill{
      background: linear-gradient(135deg, rgba(255,59,48,.95), rgba(255,106,43,.85));
      border:1px solid rgba(255,255,255,.20);
      box-shadow: 0 12px 40px rgba(255,59,48,.18);
    }
    .date-pill strong{ font-size:13px; letter-spacing:.10em; }

    .tagline{
      display:flex; gap:8px; align-items:center;
      color:rgba(244,196,77,.95);
      font-weight:1000;
      text-transform:uppercase;
      letter-spacing:.16em;
      font-size:11px;
      flex:1 1 100%;
    }
    .dotsep{ opacity:.55; }

    /* Checker flags */
    .flags{ display:flex; gap:10px; align-items:center; opacity:.95; }
    .flag{
      width:32px; height:20px;
      border-radius:6px;
      border:1px solid rgba(255,255,255,.16);
      overflow:hidden;
      box-shadow: 0 14px 40px rgba(0,0,0,.35);
      background:
        linear-gradient(45deg,
          #fff 0 12.5%, #111 0 25%,
          #fff 0 37.5%, #111 0 50%,
          #fff 0 62.5%, #111 0 75%,
          #fff 0 87.5%, #111 0 100%);
      background-size: 12px 12px;
    }

    /* Side panels */
    .side{ display:grid; gap:14px; }

    .panel-head{
      padding:16px 16px 12px;
      border-bottom:1px solid var(--stroke2);
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      background: rgba(255,255,255,.03);
    }
    .panel-head h2{
      margin:0;
      font-size:13px;
      letter-spacing:.18em;
      text-transform:uppercase;
      font-weight:1000;
    }
    .handle{
      font-size:11px;
      letter-spacing:.06em;
      color:var(--muted);
      white-space:nowrap;
    }
    .panel-body{ padding:14px 16px 16px; }

    .list{ display:grid; gap:10px; margin:0; padding:0; list-style:none; }
    .list li{
      display:flex; gap:10px; align-items:flex-start;
      color:var(--muted);
      line-height:1.45;
      font-size:13px;
    }
    .check{
      flex:0 0 auto;
      width:18px; height:18px;
      border-radius:6px;
      background: rgba(244,196,77,.15);
      border:1px solid rgba(244,196,77,.35);
      display:grid; place-items:center;
      margin-top:1px;
      box-shadow: 0 10px 26px rgba(244,196,77,.08);
    }
    .check svg{ width:12px; height:12px; fill: var(--gold); }

    .location{
      margin-top:12px;
      padding:14px;
      border-radius:16px;
      background: rgba(0,0,0,.22);
      border:1px solid var(--stroke2);
    }
    .location strong{
      display:block;
      font-weight:1000;
      text-transform:uppercase;
      letter-spacing:.14em;
      font-size:12px;
      margin-bottom:6px;
    }
    .location span{
      color:var(--muted);
      font-size:13px;
      line-height:1.5;
    }
    .actions{
      margin-top:12px;
      display:grid;
      gap:10px;
    }
    .actions .cta{ width:100%; justify-content:center; }

    .tiny{
      margin-top:10px;
      font-size:12px;
      color:var(--muted2);
      line-height:1.45;
    }
    .mono{
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      letter-spacing:.02em;
      vertical-align: text-bottom;
    }

    /* Sections */
    section{ padding:12px 0 32px; }

    .section-title{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      padding:16px;
      border-bottom:1px solid var(--stroke2);
      background: rgba(255,255,255,.03);
      flex-wrap:wrap;
    }
    .section-title h3{
      margin:0;
      font-size:14px;
      letter-spacing:.18em;
      text-transform:uppercase;
      font-weight:1000;
    }
    .section-title p{
      margin:0;
      color:var(--muted);
      font-size:11px;
      letter-spacing:.06em;
    }

    .section-inner{ padding:16px; }

    .grid-3{
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
    }
    .mini{
      border-radius:18px;
      background: rgba(0,0,0,.22);
      border:1px solid var(--stroke2);
      padding:12px 0px 0px 23px;
    }
    .mini strong{
      display:block;
      font-weight:1000;
      text-transform:uppercase;
      letter-spacing:.12em;
      font-size:12px;
      margin-bottom:8px;
    }
    .mini span{
      color:var(--muted);
      font-size:13px;
      line-height:1.6;
    }

    footer{
      padding:14px 0 34px;
      color:var(--muted);
      font-size:11px;
    }
    .footer-inner{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .pill{
      padding:9px 12px;
      border-radius:999px;
      border:1px solid var(--stroke2);
      background: rgba(255,255,255,.04);
    }

    /* Breakpoints */
    @media (min-width: 600px){
      .container{ padding:0 20px; }
      header.hero{ padding:26px 0 18px; }
      .hero-inner{ padding:26px 22px 20px; }
      .actions{ grid-template-columns: 1fr 1fr; }
      .cta{ font-size:12px; padding:10px 14px; }
      .tagline{ flex:0 0 auto; }
    }

    @media (min-width: 900px){
      .container{ padding:0 22px; }
      .hero-grid{ grid-template-columns: 1.2fr .8fr; gap:18px; }
      .hero-card{ min-height: 560px; }
      .grid-3{ grid-template-columns: repeat(3, 1fr); }
      .actions{ grid-template-columns: 1fr; }
      .burger{ display:none; }
    }

    @media (max-width: 360px){
      .cta{ font-size:10px; }
      .cta .dot{ display:none; }
      .cta{display:none;}
      }

    /* Reduce motion */
    @media (prefers-reduced-motion: reduce){
      .drawer{ transition:none; }
    }