:root{
      --bg: #0b0f14;
      --card: rgba(255,255,255,.06);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.68);
      --accent: #00d1ff; /* Thomas 13 Eder vibe */
      --border: rgba(255,255,255,.12);
      --shadow: 0 18px 40px rgba(0,0,0,.45);
      --radius: 22px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      /* Weniger aufwendige Hintergründe (GPU-schonender) */
      background:
        radial-gradient(900px 500px at 20% 20%, rgba(0,209,255,.10), transparent 60%),
        radial-gradient(900px 500px at 80% 20%, rgba(255,255,255,.06), transparent 60%),
        var(--bg);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
    }

    .wrap{
      width:min(920px, 100%);
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:18px;
    }

    /* Camper-Animation */
    .camper{
      position:absolute;
      width:48px;
      height:48px;
      pointer-events:none;
      animation: camperPath 22s linear infinite;
      z-index:3;
    }

    @keyframes camperPath{
      /* Oben: Camper fährt nach rechts, Unterkante zeigt nach oben -> rotate(180deg) */
      0%   { top: 8px; left: 8px; transform: rotate(180deg); }
      
      /* Rechts: Camper fährt nach unten, Unterkante zeigt nach rechts */
      25%  { top: 8px; left: calc(100% - 56px); transform: rotate(270deg); }
      
      /* Unten: Camper fährt nach links, Unterkante zeigt nach unten */
      50%  { top: calc(100% - 56px); left: calc(100% - 56px); transform: rotate(0deg); }
      
      /* Links: Camper fährt nach oben, Unterkante zeigt nach links */
      75%  { top: calc(100% - 56px); left: 8px; transform: rotate(90deg); }
      
      /* Zurück zum Start */
      100% { top: 8px; left: 8px; transform: rotate(180deg); }
    }
      25%  { top: 8px; left: calc(100% - 56px); transform: rotate(90deg); }
      50%  { top: calc(100% - 56px); left: calc(100% - 56px); transform: rotate(180deg); }
      75%  { top: calc(100% - 56px); left: 8px; transform: rotate(270deg); }
      100% { top: 8px; left: 8px; transform: rotate(360deg); }
    }
    }

    .card{

      position:relative;
      border:1px solid var(--border);
      background: linear-gradient(180deg, var(--card), rgba(255,255,255,.03));
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      overflow: visible; /* Camper darf nicht abgeschnitten werden */
    }

    /* Leichtere Animation: weniger Kontrast, langsamer, weniger Repaints */
    .card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        repeating-linear-gradient(135deg,
          rgba(0,209,255,.10) 0px,
          rgba(0,209,255,.10) 14px,
          rgba(255,255,255,.06) 14px,
          rgba(255,255,255,.06) 28px);
      transform: translateX(-20%);
      opacity:.10;
      will-change: transform;
      animation: slide 16s linear infinite; /* langsamer = weniger Last */
      pointer-events:none;
    }

    @keyframes slide{
      0%{ transform: translateX(-20%) }
      100%{ transform: translateX(20%) }
    }

    .content{
      position:relative;
      padding:42px 42px 36px;
      /* backdrop-filter entfernt -> GPU-schonender */
    }

    .badge{
      display:inline-flex;
      gap:10px;
      align-items:center;
      padding:10px 14px;
      border:1px solid var(--border);
      background: rgba(0,0,0,.25);
      border-radius: 999px;
      color: var(--muted);
      font-size: 13px;
      letter-spacing:.2px;
    }

    .dot{
      width:10px;height:10px;border-radius:99px;
      background: radial-gradient(circle at 30% 30%, #fff, var(--accent));
      box-shadow: 0 0 0 3px rgba(0,209,255,.12);
    }

    h1{
      margin:14px 0 10px;
      font-size: clamp(30px, 4vw, 46px);
      line-height:1.05;
      letter-spacing:-.6px;
    }

    p{
      margin:0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.6;
      max-width: 60ch;
    }

    .actions{
      margin-top:22px;
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:center;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:12px 16px;
      border-radius: 14px;
      text-decoration:none;
      font-weight:600;
      font-size: 14px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.06);
      color: var(--text);
      transition: transform .12s ease, background .12s ease;
    }
    .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); }
    .btn.primary{
      background: linear-gradient(90deg, rgba(0,209,255,.22), rgba(255,255,255,.12));
      border-color: rgba(255,255,255,.18);
    }

    .side{
      padding:26px;
      display:flex;
      flex-direction:column;
      gap:14px;
    }

    .mini{
      border:1px solid var(--border);
      border-radius: 18px;
      background: rgba(0,0,0,.22);
      padding:18px;
    }

    .mini h2{
      margin:0 0 6px;
      font-size: 14px;
      letter-spacing:.3px;
      text-transform: uppercase;
      color: rgba(255,255,255,.78);
    }

    .mini p{ font-size: 14px; }

    .divider{
      height:1px;
      background: rgba(255,255,255,.10);
      margin:14px 0 0;
    }

    footer{
      margin-top:auto;
      color: rgba(255,255,255,.55);
      font-size: 12px;
    }

    @media (max-width: 860px){
      .wrap{ grid-template-columns: 1fr; }
      .content{ padding: 34px 26px 28px; }
    }

    @media (prefers-reduced-motion: reduce){
      .card::before{ animation:none; }
      .btn{ transition:none; }
    }