:root{
  --bg:#ffffff;
  --fg:#111111;
  --muted:#6b7280;
  --primary:#c2162b;
  --border:#e5e7eb;
  --card:#ffffff;
  --shadow:0 6px 24px rgba(0,0,0,.08);
  --radius:14px;
  --container:1100px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--fg);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--container);margin-inline:auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;gap:24px;min-height:72px}
.logo{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--fg);text-decoration:none}
.logo-img{height:44px;width:auto;display:block}
.brand{font-size:18px;letter-spacing:.4px}

.nav-toggle{display:none;background:transparent;border:1px solid var(--border);border-radius:12px;height:40px;width:44px;cursor:pointer}
.nav-toggle svg{height:22px;width:22px}

nav.primary{margin-left:auto}
nav.primary ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;align-items:center}
nav.primary li{position:relative}
nav.primary > ul > li > a, nav.primary button{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--fg);cursor:pointer;font:inherit}
nav.primary > ul > li > a:hover, nav.primary button:hover{background:#f8fafc}

.dropdown{display:none;position:absolute;left:0;top:calc(100% + 8px);background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);min-width:220px;padding:8px}
.dropdown a{display:block;padding:10px 12px;border-radius:8px;color:var(--fg)}
.dropdown a:hover{background:#f3f4f6}
nav.primary li:focus-within .dropdown,nav.primary li:hover .dropdown{display:block}

/* Mobile nav */
@media (max-width: 900px){
  .nav-toggle{display:inline-flex}
  nav.primary{display:none;position:fixed;inset:72px 0 auto 0;background:var(--card);border-bottom:1px solid var(--border)}
  nav.primary.open{display:block}
  nav.primary ul{flex-direction:column;align-items:stretch;padding:12px}
  nav.primary li .dropdown{position:static;border:none;box-shadow:none;display:none;padding:6px 4px}
  nav.primary li.open .dropdown{display:block}
  nav.primary > ul > li > a, nav.primary button{justify-content:space-between}
}

/* Sections */
.page-header{padding:28px 0;border-bottom:1px solid var(--border);background:var(--card)}
.page-header h1{margin:0;font-size:28px}
.section{padding:28px 0}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}

/* Instagram embed area */
.news-embed .instagram-media{width:100% !important;max-width:100%}

/* Verein */
.prose{max-width:var(--container);font-size:17px}
.prose h2{margin-top:1.2em}
.prose img{border-radius:12px;max-width:100%}

/* Spieler */
.players-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1100px){ .players-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:780px){ .players-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .players-grid{grid-template-columns:1fr} }
.player{position:relative;overflow:hidden;border-radius:16px;background:#111;aspect-ratio:3/4}
.player img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.player:hover img{transform:scale(1.04)}
.player .name-wrap{position:absolute;left:0;right:0;bottom:0;height:34%;display:flex;align-items:flex-end;padding:10px 12px;background:linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,0));opacity:0;transition:opacity .2s ease}
.player:hover .name-wrap,.player:focus-within .name-wrap{opacity:1}
.player .name{color:#fff;font-weight:600}

/* Masonry collage */
.masonry{column-count:4;column-gap:14px}
.masonry a{display:block;margin:0 0 14px;border-radius:14px;overflow:hidden;border:1px solid var(--border)}
.masonry img{width:100%;height:auto;display:block}
@media (max-width:1100px){ .masonry{column-count:3} }
@media (max-width:780px){ .masonry{column-count:2} }
@media (max-width:480px){ .masonry{column-count:1} }

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:1000;padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:100%;border-radius:8px}

/* Sponsors */
.sponsor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sponsor-grid a{display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:12px;background:var(--card);padding:18px;box-shadow:var(--shadow)}
.sponsor-grid img{max-width:100%;max-height:64px}

/* Contact */
.contact-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}
@media (max-width:980px){ .contact-wrap{grid-template-columns:1fr;gap:16px} }
form.contact{display:grid;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
input[type="text"],input[type="email"],textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--fg)}
textarea{min-height:160px;resize:vertical}
button.btn{background:var(--primary);color:#fff;border:none;border-radius:12px;padding:12px 16px;cursor:pointer;font-weight:600}
button.btn:hover{filter:brightness(.95)}
.contact-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.map{border:0;width:100%;height:300px;border-radius:12px}
.form-note{font-size:14px;color:var(--muted)}
.form-msg{margin-top:6px;font-size:14px}
.form-msg.ok{color:#065f46}
.form-msg.err{color:#b91c1c}

/* Footer */
.site-footer{margin-top:40px;border-top:1px solid var(--border);background:var(--card)}
.footer-inner{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:18px 0}
.footer-links{display:flex;gap:12px;flex-wrap:wrap}
.footer-links a{color:var(--fg)}
.address{color:var(--muted);font-size:14px}

/* Desktop: Dropdown ohne Lücke unter dem Reiter */
nav.primary li.has-sub .dropdown{top:100%; transform:translateY(8px)} /* statt calc(100% + 8px) */
@media (hover:hover) and (pointer:fine){
  nav.primary li.has-sub:hover .dropdown{display:block}
}

/* Toggle-Button nur mobil sichtbar */
.submenu-toggle{
  display:none; border:1px solid var(--border); border-radius:10px;
  background:transparent; height:36px; width:36px; margin-left:6px;
  align-items:center; justify-content:center; cursor:pointer;
}
.submenu-toggle svg{width:18px;height:18px}

@media (max-width:900px){
  .submenu-toggle{display:inline-flex}
  nav.primary li.has-sub{display:flex; align-items:center}
  nav.primary li.has-sub .dropdown{position:static; transform:none}
  nav.primary li.open .dropdown{display:block}
}
/* Dropdown-Grundlage */
nav.primary li.has-sub{position:relative}
nav.primary li.has-sub .dropdown{
  display:none;
  position:absolute;
  left:0;
  top:100%;          /* direkt unter dem Reiter */
  margin-top:8px;    /* optischer Abstand */
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  min-width:220px;
  padding:8px;
  z-index:20;
}

/* Nur Hover öffnet auf Desktop */
@media (hover:hover) and (pointer:fine){
  nav.primary li.has-sub:hover .dropdown{display:block}
}

/* Hover-Brücke: verhindert Schließen beim Herunterziehen */
nav.primary li.has-sub::after{
  content:"";
  position:absolute;
  left:-8px; right:-8px;  /* seitliche Toleranz */
  top:100%;
  height:14px;            /* Zeit/Fläche zum Herunterziehen */
}


/* Standard: Button ausblenden, Dropdown per Hover */
.submenu-toggle{display:none}
nav.primary li.has-sub{position:relative}
nav.primary li.has-sub .dropdown{
  display:none;position:absolute;left:0;top:100%;margin-top:8px;
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);min-width:220px;padding:8px;z-index:20;
}
/* Hover-Brücke für stabiles Herunterziehen */
nav.primary li.has-sub::after{
  content:"";position:absolute;left:-8px;right:-8px;top:100%;height:14px;
}
/* Desktop: nur Hover öffnet */
@media (hover:hover) and (pointer:fine){
  nav.primary li.has-sub:hover .dropdown{display:block}
}

/* Mobil: Button sichtbar, Dropdown per .open Klasse */
/* Nur echte Touch-Geräte: Menü einklappen + Buttons zeigen */
@media (hover:none) and (pointer:coarse){
  .nav-toggle{display:inline-flex !important}

  nav.primary{
    display:none;
    position:fixed; inset:72px 0 auto 0;
    background:var(--card); border-bottom:1px solid var(--border);
  }
  nav.primary.open{display:block}
  nav.primary ul{flex-direction:column; align-items:stretch; padding:12px}
  nav.primary li .dropdown{position:static; border:none; box-shadow:none; display:none; padding:6px 4px}
  nav.primary li.has-sub.open .dropdown{display:block}

  .submenu-toggle{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    height:36px; width:36px; margin-left:6px;
    border:1px solid var(--border); border-radius:10px; background:transparent; cursor:pointer;
  }
}

/* /* --- Navigation final --- */

/* Basis */
.nav-toggle,.submenu-toggle{display:none}
nav.primary li.has-sub{position:relative}
nav.primary li.has-sub .dropdown{
  display:none; position:absolute; left:0; top:100%; margin-top:8px;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); min-width:220px; padding:8px; z-index:20;
}
/* Hover-Brücke */
nav.primary li.has-sub::after{content:""; position:absolute; left:-8px; right:-8px; top:100%; height:14px;}
/* Desktop: Hover-Menü, keine Buttons */
@media (hover:hover) and (pointer:fine){
  nav.primary li.has-sub:hover .dropdown{display:block}
}

/* Mobil-Layout nach Breite */
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  nav.primary{
    display:none; position:fixed; inset:72px 0 auto 0;
    background:var(--card); border-bottom:1px solid var(--border);
  }
  nav.primary.open{display:block}
  nav.primary ul{flex-direction:column; align-items:stretch; padding:12px}
  nav.primary li .dropdown{position:static; border:none; box-shadow:none; display:none; padding:6px 4px}
  nav.primary li.has-sub.open .dropdown{display:block}
  .submenu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    height:36px; width:36px; margin-left:6px; border:1px solid var(--border);
    border-radius:10px; background:transparent; cursor:pointer;
  }
}

/* Schmale Desktopfenster: Button trotzdem aus, Menü sichtbar */
@media (max-width:900px) and (hover:hover) and (pointer:fine){
  .nav-toggle,.submenu-toggle{display:none}
  nav.primary{display:block; position:static; border:none}
}
/* Default: Buttons aus */
.nav-toggle,
.submenu-toggle{display:none!important}

/* Nur auf Touch-Geräten anzeigen */
html.is-touch .nav-toggle,
html.is-touch .submenu-toggle{display:inline-flex!important}

/* Handy: Menü-Button rechts und sauber zentriert */
html.is-touch #navToggle{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;        /* keine Innenabstände */
  line-height:0;    /* keine Zeilenhöhe-Verschiebung */
}
html.is-touch #navToggle svg{
  display:block;
  width:22px;
  height:22px;
}