:root{
      --bg:#0f172a;
      --bg-soft:#020617;
      --card:#1e293b;
      --text:#e2e8f0;
      --muted:#94a3b8;
      --accent:#38bdf8;
      --radius:14px;
      --maxw:1150px;
    }

    *{box-sizing:border-box}

    body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    header {
      position: fixed;
      width: 100%;
      top:0;
      display:flex;
      justify-content:center;
      background: rgba(15, 23, 42, 0.65);
      backdrop-filter: blur(10px);
      z-index: 1000;
      border-bottom:1px solid rgba(255,255,255,0.05);
    }

    h2::after{
      content:"";
      display:block;
      width:60px;
      height:2px;
      background:var(--accent);
      margin:10px auto 0;
      opacity:0.6;
    }

    .nav-container{
      width:100%;
      max-width:var(--maxw);
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:14px 24px;
    }

    header h1 { font-size: 1rem; letter-spacing: 1.5px; }

    nav a {
      margin-left: 18px;
      color: var(--muted);
      text-decoration: none;
      font-size:0.9rem;
    }

    nav a:hover { color: var(--accent); }

    section {
      padding: 90px 20px 70px;
      display:flex;
      justify-content:center;
      position:relative;
    }

    .content{
      width:100%;
      max-width:var(--maxw);
    }

    .center { text-align:center; }

    /* HERO */
    .hero {
      height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      overflow:hidden;
    }

    .hero::before{
      content:"";
      position:absolute;
      width:100%;
      height:120%;
      background:
        linear-gradient(to bottom, rgba(15,23,42,0.6), rgba(15,23,42,0.95)),
        url('https://www.bernstadt-wuertt.de/wp-content/uploads/bernstadt-eigen-partnergemeinde-02-1024x683.jpg') center/cover;
      transform: translateY(var(--scroll,0));
      z-index:1;
    }

    .hero-content{
      position:relative;
      z-index:2;
    }

    .hero h2 { font-size: 2.8rem; margin-bottom: 10px; }
    .hero p { color: var(--muted); font-size:1.1rem; }

    .divider{
      height:200px;
      background:url('gallery/beach.jpeg') center/cover fixed;
      opacity:0.15;
    }

    h2{ font-size:1.6rem; margin-bottom:12px; }
    p{ font-size:0.95rem; max-width:700px; }

    /* ABOUT */
    .about-box{
      background: var(--card);
      padding:30px;
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,0.05);
    }

    /* CARDS */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
      margin-top: 7.5vh;
    }

    .card {
      overflow:hidden;
      background: var(--card);
      padding: 20px;
      border-radius: var(--radius);
      transition: 0.25s;
      border:1px solid rgba(255,255,255,0.05);
    }

    .card img{
      width:100%;
      object-fit:cover;
      border-radius:10px;
      margin-bottom:10px;
      aspect-ratio: 16/9;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.4);
      scale: 1.1;
    }

    .card-a {
        text-decoration: none;
        color: white;
    }

    /* FULL WIDTH GALLERY FIXED */
    #gallery {
      width:100%;
      padding: 20vh 0;
      padding-bottom: 10vh;
      display:flex;
      flex-direction:column;
      align-items:center;
      overflow:hidden;
      position:relative;
    }

    #gallery h2{
      text-align:center;
      margin-bottom:30px;
      font-size:1.8rem;
      letter-spacing:1px;
      position:relative;
    }

    #gallery h2::after{
      content:"";
      display:block;
      width:60px;
      height:2px;
      background:var(--accent);
      margin:10px auto 0;
      opacity:0.6;
    }

    .gallery-wrapper{
      width:150vw;
      display:flex;
      flex-direction:column;
      gap:20px;
      margin: 0 0 0;
    }

    .photo-row {
      display:flex;
      gap:15px;
      margin:0 auto;
      justify-content:flex-start;
      overflow:hidden;
    }

    .photo-track {
      display:flex;
      gap:15px;
      transition: transform 0.2s linear;
    }

    .photo {
      min-width:300px;
      height:180px;
      border-radius:10px;
      background:url('https://picsum.photos/500/300') center/cover;
      flex-shrink:0;
    }

    footer {
      text-align: center;
      padding: 20px;
      background: var(--bg-soft);
      font-size:0.8rem;
      color:var(--muted);
    }

    .glow {
      color: var(--accent);
      text-shadow: 0 0 10px var(--accent);
    }