/* =========================================================
   Sportverein Modern – PSV Celle (helle Variante, stabiler Hover)
   ========================================================= */

/* ---------- Design-Variablen ---------- */
:root{
  --bg: #f4f6f8;          /* Hintergrund hell */
  --bg-2: #e9ecef;        /* helles Grau */
  --card: #ffffff;        /* Karten / Content */
  --text: #222222;
  --muted: #555555;

  /* Hero-Textfarbe (auf grünem Header gut sichtbar) */
  --hero-title: #FFD500;

  /* Vereinsfarben */
  --brand: #007A33;       /* Grün */
  --brand-2: #FFD500;     /* Gelb */

  --danger: #e63946;
  --radius: 16px;
  --maxw: 1200px;
  --gap: 1.25rem;
  --shadow: 0 4px 14px rgba(0,0,0,.08);
}

/* ---------- Reset/Grundlagen ---------- */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--text);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial
}
/*img{max-width:100%;height:auto;vertical-align:middle}*/
a{color:var(--brand);text-decoration:none}
a:hover{opacity:.85}
.visually-hidden{
  position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
  height:1px;width:1px;overflow:hidden;white-space:nowrap
}

/* ---------- Skip-Link ---------- */
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{
  left:1rem;top:1rem;background:#000;color:#fff;
  padding:.5rem .75rem;border-radius:10px;z-index:1000
}

/* ---------- Header / Branding ---------- */
.sv-header{position:relative;background:var(--brand);color:#fff}
.sv-bar{
  max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;
  gap:var(--gap);padding:.75rem 1rem
}
/* Hero Titel mit Logo */
.sv-title{
  display: flex;
  align-items: center;
  gap: 1rem;            /* Abstand Logo ↔ Text */
  margin-left: 2.0rem; /* Einrückung nach rechts */
  color: var(--brand-2);
}
.sv-home-link{display: inline-flex;align-items: center;gap: 1rem;text-decoration: none;color: inherit;padding: .25rem .5rem;}
.sv-home-link:hover{opacity: .9;}

.sv-title img{height: 60px;width: auto;}
.sv-title span{font-size: 2.1rem;font-weight: 800;line-height: 1.1;}
.sv-club{font-weight:800;letter-spacing:.2px}

/* ---------- Navigation (Grundlayout) ---------- */
.sv-nav{
  margin-left:auto;display:flex;align-items:center;gap:1rem;overflow:visible
}
.sv-toggle { display: none; }
.sv-menu{
  list-style:none;margin:0;padding:0;display:flex;gap:.25rem
}
.sv-item{position:relative}
.sv-link{
  display:block;padding:.62rem .95rem;border-radius:8px;
  color:#fff;transition:background .2s, color .2s;
  text-decoration:none;font-weight:600
}
.sv-link:hover{background:rgba(255,255,255,.2)}

/* Aktive/Elternseiten (Klassen von show_menu2) */
.sv-item.menu_current > .sv-link,
.sv-item.current > .sv-link,
.sv-item.current_page > .sv-link{
  background:var(--brand-2);color:#000
}

/* ---------- Desktop-Dropdowns: immer per Hover öffnen ---------- */
@media (min-width: 1025px){
  .sv-header,.sv-bar,.sv-nav{overflow:visible}

  .sv-menu > .sv-item{
    position:relative;
    padding-bottom:8px;              /* unsichtbare Hover-Zone nach unten */
  }

  /* Submenü sichtbar steuern (nicht per display toggeln) */
  .sv-menu > .sv-item > .sv-sub{
    position:absolute;left:0;top:100%;
    min-width:220px;margin-top:6px;  /* optischer Abstand innerhalb der Hover-Zone */
    background:#fff;border:1px solid var(--brand);
    border-radius:12px;list-style:none;padding:.3rem 0;
    box-shadow:var(--shadow);z-index:2000;

    display:block !important;        /* neutralisiert alte display:none-Regeln */
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .12s ease, visibility .12s ease;
  }

  /* Hover-Brücke: verhindert Abreißen zwischen Link und Menü */
  .sv-menu > .sv-item > .sv-sub::before{
    content:"";position:absolute;left:0;right:0;top:-8px;height:8px;background:transparent
  }

  /* Öffnen per Hover ODER Tastaturfokus */
  .sv-menu > .sv-item:hover > .sv-sub,
  .sv-menu > .sv-item:focus-within > .sv-sub{
    opacity:1;visibility:visible;pointer-events:auto
  }

  /* Dropdown-Links */
  .sv-menu > .sv-item > .sv-sub .sv-link{
    display:block;padding:.55rem .9rem;border-radius:0;color:var(--text);white-space:nowrap
  }
  .sv-menu > .sv-item > .sv-sub .sv-link:hover{background:var(--bg)}
}

/* ---------- Suche (Desktop) ---------- */
.sv-search{position:relative}
.sv-search-toggle{
  background:none;border:none;cursor:pointer;padding:.3rem
}
.sv-search-toggle img{
  width:22px;height:22px;filter:invert(1) /* weiße Lupe */
}
.sv-search-form{
  position:absolute;top:120%;right:0;display:none;background:#fff;
  padding:.4rem;border-radius:6px;box-shadow:var(--shadow)
}
.sv-search-form.is-open{display:block}
.sv-search-form input{
  border:1px solid #ccc;border-radius:6px;padding:.4rem .6rem;
  font-size:.95rem;min-width:220px
}

/* ---------- Burger / Mobile-Nav ---------- */
.sv-burger{display:none;background:none;border:0;width:44px;height:44px;position:relative}
.sv-burger span{
  position:absolute;left:9px;right:9px;height:2px;background:#fff;
  transition:transform .25s, top .25s, opacity .25s
}
.sv-burger span:nth-child(1){top:12px}
.sv-burger span:nth-child(2){top:20px}
.sv-burger span:nth-child(3){top:28px}
.sv-burger.is-open span:nth-child(1){top:20px;transform:rotate(45deg)}
.sv-burger.is-open span:nth-child(2){opacity:0}
.sv-burger.is-open span:nth-child(3){top:20px;transform:rotate(-45deg)}

/* ---------- Hero ---------- */
.sv-hero{max-width:var(--maxw);margin:0 auto;padding:2rem 1rem 2.5rem}
.sv-hero-title{
  margin:0 0 .3rem;font-size:clamp(1.4rem,2vw+1rem,2.4rem);
  color:var(--hero-title);text-shadow:0 1px 2px rgba(0,0,0,.2)
}
.sv-hero-sub{margin:0;color:#fff;font-weight:600;opacity:.9}

/* ---------- Breadcrumbs ---------- */
.sv-bc{
  max-width:var(--maxw);margin:0 auto 1rem auto;padding:0 1rem;
  font-size:.9rem;color:var(--muted)
}
.sv-bc a{color:var(--brand);text-decoration:none}
.sv-bc a:hover{text-decoration:underline}

/* ---------- Layout ---------- */
.sv-main{padding:1rem}
.sv-container {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--gap);
}

/* Variante ohne Sidebar */
.sv-container.no-sidebar {
  grid-template-columns: 1fr; /* eine Spalte, volle Breite */
}
.sv-content{
  background:var(--card);padding:1.25rem;border-radius:var(--radius);
  border:1px solid #ddd;box-shadow:var(--shadow)
}
.sv-sidebar{
  background:var(--card);padding:1.25rem;border-radius:var(--radius);
  border:1px solid #ddd;box-shadow:var(--shadow)
}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{line-height:1.2;margin:0 0 .6rem;font-weight:700}
h1{font-size:2rem}
h2{font-size:1.5rem}
h3{font-size:1.1rem}
p{margin:.6rem 0}
ul,ol{padding-left:1.25rem}

/* ---------- Buttons & Inputs ---------- */
button,.btn{
  border:0;border-radius:8px;padding:.6rem .95rem;font-weight:700;
  background:var(--brand-2);color:#000;cursor:pointer;transition:background .2s
}
button:hover,.btn:hover{background:#e6c800}
input[type="search"],input[type="text"],input[type="email"],textarea,select{
  width:100%;min-width:140px;border-radius:8px;border:1px solid #ccc;
  background:#fff;color:var(--text);padding:.55rem .7rem;outline:none
}
input:focus,textarea:focus,select:focus{
  border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,122,51,.15)
}

/* ---------- Footer ---------- */
.sv-footer{margin-top:2rem;background:var(--bg-2);border-top:2px solid var(--brand)}
.sv-footcols{
  max-width:var(--maxw);margin:0 auto;padding:1.25rem;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)
}
.sv-footcol.small{color:var(--muted);font-size:.95rem}

.sv-foot-extra {
  max-width: var(--maxw);
  margin: .5rem auto 0 auto;
  padding: .75rem 1rem 1.25rem;
  color: var(--muted);
  font-size: .95rem;
  text-align: center;
}
.sv-foot-extra a { color: var(--brand); text-decoration: none; }
.sv-foot-extra a:hover { text-decoration: underline; }


/* ---------- Komponenten ---------- */
.card{
  background:var(--card);border-radius:var(--radius);padding:1rem;
  border:1px solid #ddd;box-shadow:var(--shadow)
}
.badge{
  display:inline-block;padding:.2rem .5rem;border-radius:999px;
  background:var(--brand);color:#fff;font-size:.8rem;font-weight:700
}
.badge--yellow{background:var(--brand-2);color:#000}

/* ---------- Tabellen ---------- */
table{
  border-collapse:collapse;width:100%;background:var(--card);
  border:1px solid #ccc;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)
}
th,td{padding:.7rem;border-bottom:1px solid #eee;text-align:left}
th{background:var(--bg-2)}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .sv-container{grid-template-columns:1fr}
  .sv-sidebar{order:2}
}

@media (max-width: 1024px){
  .sv-burger{display:inline-block;margin-left:auto}
  .sv-title{margin-left: 0.5rem;}
  .sv-title img{height: 52px;width:auto;}
  .sv-title span{font-size: 1.6rem;}
  .sv-hero-sub{margin-left: calc(1.25rem + 40px + .75rem);}
  .sv-nav{
    position:absolute;left:0;right:0;top:100%;
    background:var(--brand);border-top:1px solid rgba(255,255,255,.2);
    display:none;flex-direction:column;align-items:stretch;gap:.25rem;
    padding:.5rem 1rem;box-shadow:var(--shadow)
  }
  .sv-nav.is-open{display:flex}
  .sv-menu{flex-direction:column;gap:0}

  /* Top-Level-Items */
  .sv-menu > .sv-item{
    position:relative;
    border-radius:8px;
    overflow:hidden;
    background:transparent;
    margin-bottom:.25rem;
  }

  .sv-menu > .sv-item > .sv-link{
    display:flex;align-items:center;justify-content:space-between;
    color:#fff;padding:.7rem .9rem;border-radius:8px
  }
  .sv-menu > .sv-item > .sv-link:hover{background:rgba(255,255,255,.12)}

  /* Toggle-Button (erscheint via JS nur bei Items mit Untermenü) */
 /* Toggle-Button für Items mit Untermenü */
  .sv-toggle{
    display: inline-flex;            /* nur mobil sichtbar */
    align-items: center;
    justify-content: center;
    margin-left: .6rem;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 6px;
    background: var(--brand-2);
    color: #000;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
  }

 /* optisch aktiv, wenn offen */
  .sv-item.is-open > .sv-link { background: rgba(255,255,255,.12); }
  .sv-item.is-open > .sv-link .sv-toggle { transform: rotate(90deg); transition: transform .15s; }

  /* Untermenüs: standardmäßig zu */
  .sv-sub{
    position:static;
    display:none;
    margin:0;padding:.2rem 0 .5rem 0;
    background:transparent;border:0;box-shadow:none
  }
  .sv-item.is-open > .sv-sub{display:block}

  /* Links im Untermenü */
  .sv-sub .sv-link{
    color:#fff;border-radius:6px;padding:.55rem .9rem;margin:0 .25rem
  }
  .sv-sub .sv-link:hover{background:rgba(255,255,255,.12)}

  /* Suche mobil: immer sichtbar und vollbreit */
  .sv-search{width:100%;margin-top:.25rem}
  .sv-search-toggle{display:none}
  .sv-search-form{display:block;position:static;box-shadow:none;background:none;padding:0}
  .sv-search-form input{width:100%}
}