:root{
    --bg:#0b0b0b; --fg:#eee; --muted:#a9a9a9; --card:#161616; --accent:#4ad;
    --radius:14px; --space:18px; --max:1100px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,Arial}
  .container{max-width:var(--max);margin:auto;padding:0 var(--space)}
  
  /* Header */
  .site-header{position:sticky;top:0;z-index:10;background:#111;border-bottom:1px solid #1f1f1f}
  .nav{display:flex;align-items:center;justify-content:space-between;height:60px}
  .logo{font-weight:700;letter-spacing:.5px;color:var(--accent)}
  nav a{color:var(--fg);text-decoration:none;margin-left:18px}
  nav a:hover{color:var(--accent)}
  
/* Orange Pingpongball-Button */
.btn {
  background-color: #FFA500;      /* kräftiges Orange */
  color: black;
  border: none;
  border-radius: 50px;
  padding: 12px 24px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: url('../images/cursor.png') 10 5, pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s;
}

/* Hover-Effekt */
.btn:hover {
  background-color: #ffb733; /* etwas helleres Orange */
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Falls Buttons als <a> genutzt werden */
a.btn {
  display: inline-block;
  text-decoration: none;
}

  /* Hero */
  .hero{
    background: url('../images/garneli.jpeg') center/cover no-repeat;
    min-height:55vh; display:flex; align-items:center;
    border-bottom: 1px solid #1f1f1f;
  }
  .hero-inner{padding:60px 20px}
  .hero h1{margin:0 0 8px;font-size:clamp(32px,5vw,54px);text-shadow:0 3px 16px #000}
  .hero p{color:var(--muted);margin:0;text-shadow:0 2px 10px #000}
  
  /* Sektion Titel */
  section h2{margin:28px 0 12px}

  body {
    background-color: #20214F; /* RAL 5002 Ultramarinblau */
    color: white;              /* sorgt für guten Kontrast */
    margin: 0;
    font-family: Arial, sans-serif;
  
    /* Pingpongschläger-Cursor */
    cursor: url('../images/cursor.png') 9 12, auto;
  }  
  
  
  /* Moment / Videos */
  .video-grid{display:grid;gap:var(--space)}
  .video-main{height:360px;border-radius:var(--radius);background:var(--card);display:flex;align-items:center;justify-content:center}
  .video-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space)}
  .thumb{height:120px;border-radius:var(--radius);background:var(--card);display:flex;align-items:center;justify-content:center}
  
  .placeholder{color:#bbb;border:1px dashed #2a2a2a}
  
  @media (max-width:800px){
    .video-main{height:240px}
    .video-thumbs{grid-template-columns:repeat(2,1fr)}
  }
  
  /* CTA */
  .cta{margin:16px 0 8px}
  .btn{display:inline-block;padding:10px 16px;border-radius:999px;background:var(--accent);color:#001;text-decoration:none;font-weight:600}
  
  /* Warnung / Warmups */
  .warn{margin-top:10px}
  .warmups{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space)}
  .warm{height:140px;border-radius:var(--radius);background:var(--card);display:flex;align-items:center;justify-content:center}
  @media (max-width:800px){.warmups{grid-template-columns:1fr}}

  .warmups {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .warm {
    width: 250px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    object-fit: cover;
  }
  
  
  /* Listen-Sektionen */
  .cards .list{margin:6px 0 0 18px}
  .cards .list li{margin:6px 0}
  
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
    justify-items: center;
  }
  
  .gallery figure {
    text-align: center;
    color: white;
  }
  
  .gallery img {
    width: 100%;
    max-width: 220px;
    height: 220px; /* feste Höhe für gleichmäßige Größe */
    object-fit: contain; /* sorgt dafür, dass das ganze Objekt sichtbar ist */
    background: transparent; /* kein grauer Rand */
    border: none;
    border-radius: 12px;
    box-shadow: none; /* Schatten deaktiviert, wenn du willst */
    transition: transform 0.2s ease;
    cursor: pointer;
  }
  
  
  .gallery img:hover {
    transform: scale(1.10);
  }
  
  .gallery figcaption {
    margin-top: 0.7rem;
    font-size: 1.1rem; /* vorher 0.95rem */
    font-weight: 500;
    text-align: center;
    color: white;
  }
  

  /* Footer */
  .site-footer{margin-top:40px;border-top:1px solid #1f1f1f;background:#111}
  .site-footer .container{padding:16px;color:var(--muted);text-align:center}
  
  /* Logo im Header */
.logo img {
  height: 40px;         /* ggf. anpassen */
  width: auto;
  display: block;
}

/* Hero-Video (nur auf Startseite) */
.hero-video {
  position: relative;
  height: 100vh;        /* volle Höhe */
  width: 100%;
  overflow: hidden;
}
.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* füllt den Screen */
  display: block;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  color: white;
  padding: 1rem;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.25), rgba(0,0,0,0.35));
}
.hero-overlay h1 {
  margin: 0 0 .5rem;
  font-size: clamp(32px, 6vw, 64px);
  text-shadow: 0 3px 16px rgba(0,0,0,.6);
}
.hero-overlay p {
  margin: 0;
  color: #e9e9e9;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

/* Header */
.site-header {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  padding: 1rem 0;
  position: sticky;  /* unter dem Hero bleibt er oben kleben */
  top: 0;
  z-index: 100;
}
.nav { display:flex; align-items:center; justify-content:space-between; }
nav a { color:#fff; text-decoration:none; margin-left:16px; font-weight:600; }
nav a:hover { color:#FFA500; }