/* ================================
   FC Tennis – Theme CSS (Bootstrap-basiert)
   Pfad: /files/theme/tennisclub/css/theme.css
   ================================ */

/* --- Design-Variablen --- */
:root{
  --tc-red:#d6001c;    /* Vereinsrot */
  --tc-dark:#111;      /* Schwarz */
  --tc-gray:#6b7280;   /* Sekundärtext */
  --tc-light:#fafafa;  /* sehr helles Grau */
  --tc-max:1200px;     /* eigene Container-Breite */
}

/* --- Basis & Typo --- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--tc-dark);
  background:#fff;
}

/* eigener Container (parallel zu Bootstrap .container) */
.container{max-width:var(--tc-max);margin:0 auto;padding:0 1rem}

/* --- Skip-Link (A11y) --- */
.visually-hidden-focusable,
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden
}
.visually-hidden-focusable:focus,
.skip-link:focus{
  position:fixed;left:1rem;top:1rem;width:auto;height:auto;overflow:visible;
  background:#000;color:#fff;padding:.5rem 1rem;border-radius:.25rem;z-index:10000
}

/* ================================
   NAVBAR (Bootstrap + Contao-Modul)
   ================================ */

/* rote Unterkante */
.tc-navbar{border-bottom:2px solid var(--tc-red)}
.tc-navbar .navbar-brand{font-weight:800;letter-spacing:.2px;color:var(--tc-dark)}
.tc-navbar .navbar-brand:hover{color:var(--tc-dark);text-decoration:none}

/* Toggler-Streifen (dunkel) */
.navbar-toggler{border-color:rgba(0,0,0,.15)}
.navbar-toggler-icon{background-image:none;width:1.5rem;height:1.5rem;position:relative}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
  content:"";position:absolute;left:0;right:0;height:2px;background:var(--tc-dark)
}
.navbar-toggler-icon::before{top:.45rem}
.navbar-toggler-icon::after{bottom:.45rem}

/* Contao Navigationsmodul in Navbar einpassen */
#mainNav .mod_navigation > h2{position:absolute;left:-9999px}

/* Desktop: horizontal, rechtsbündig */
#mainNav .level_1{
  display:flex;align-items:center;justify-content:flex-end;
  gap:.5rem;margin:0;padding:0;list-style:none;
}
#mainNav .level_1 > li{margin:0}

/* Links wie Pills/Buttons */
#mainNav .level_1 > li > a,
#mainNav .level_1 > li > strong{
  display:block;padding:.5rem .75rem;text-decoration:none;border-radius:.375rem;color:var(--tc-dark)
}
#mainNav .level_1 > li > a:hover{background:rgba(214,0,28,.08)}
#mainNav .level_1 > li > strong,
#mainNav .level_1 > li > a[aria-current="page"]{background:var(--tc-red);color:#fff}

/* Dropdown-Ebenen (falls genutzt) */
#mainNav .level_2,#mainNav .level_3{list-style:none;margin:0;padding:.25rem 0 .25rem 1rem}
#mainNav .level_2 > li > a{display:block;padding:.25rem .5rem;border-radius:.25rem}

/* Mobile: vertikal & linksbündig */
@media (max-width: 991.98px){
  .navbar-collapse{width:100%}
  #mainNav{width:100%}
  #mainNav .level_1{
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:0;width:100%;
  }
  #mainNav .level_1 > li{width:100%}
  #mainNav .level_1 > li > a,
  #mainNav .level_1 > li > strong{width:100%;padding:.75rem 0}
}

/* ================================
   BREADCRUMB
   ================================ */
.tc-breadcrumb-wrapper{padding:.5rem 0}
.tc-breadcrumb-wrapper .breadcrumb{--bs-breadcrumb-divider:'›';margin:0}
.tc-breadcrumb-wrapper .breadcrumb a{text-decoration:none}

/* ================================
   MAIN / CONTENT
   ================================ */
.tc-main{padding:2rem 0}
.tc-main h1,.tc-main h2,.tc-main h3{line-height:1.25}
.tc-main table{width:100%;border-collapse:collapse}
.tc-main td,.tc-main th{border:1px solid #eee;padding:.5rem}
.tc-main img{max-width:100%;height:auto}

/* ================================
   FOOTER
   ================================ */
.tc-footer{background:var(--tc-light);border-top:1px solid #eee;margin-top:2rem;padding:2rem 0;color:#333}
.tc-footer a{text-decoration:none}

/* Utilities */
.text-muted-2{color:var(--tc-gray)}
.bg-red-weak{background:rgba(214,0,28,.08)}
.border-red{border-color:var(--tc-red)!important}