/* =========================================================
   SV Poseidon Hamburg – WebClub Stylesheet
   Extrahiert & aufbereitet aus svp.webclub.app (index.php)
   Enthält die vereinseigenen Styles (nicht Bootstrap/Summernote/
   Datepicker-Frameworks, die zusätzlich eingebunden werden müssen)
   ========================================================= */

@charset "utf-8";

/* ---------------------------------------------------------
   1. Schriften
   --------------------------------------------------------- */

@font-face {
  font-family: OpenSans;
  font-weight: normal;
  src: url("font/OpenSans-VariableFont_wdth,wght.ttf") format("truetype");
}

@font-face {
  font-family: OpenSans;
  font-weight: bold;
  src: url("font/OpenSans-VariableFont_wdth,wght.ttf") format("truetype");
}

/* Dekorative Schrift (Logo/Headlines) */
@font-face {
  font-family: Norican;
  font-style: normal;
  font-weight: 400;
  src: url("norican-v5-latin-regular.woff2") format("woff2"),
       url("norican-v5-latin-regular.woff") format("woff"),
       url("norican-v5-latin-regular.ttf") format("truetype");
}

.schrift1 {
  font-family: OpenSans;
}

/* ---------------------------------------------------------
   2. Farbvariablen (Corporate Design)
   --------------------------------------------------------- */

:root {
  --nav_schrift_farbe: #EBECEE;
  --nav_bg_farbe: #00445B;
  --nav_schrift_inaktiv: #CCCCCC;
  --nav_schrift_hover: #00445B;
  --nav_bg_hover: #EBECEE;
  --frame_std_farbe: #00445B;

  --table_odd: #FFFFFF;
  --table_even: #EBECEE;
  --table_hover: #F2DEDE;
  --table_head: #FFFFFF;
}

/* ---------------------------------------------------------
   3. Grundlayout: Header / Nav-Rahmen / Footer
   --------------------------------------------------------- */

header {
  border: 1px dotted var(--frame_std_farbe);
  background-image: url("https://cdn.webclub.app/img/elements/logohead.png");
  color: rgb(235, 236, 238);
}

section,
nav {
  border-left: 1px dotted var(--frame_std_farbe);
  border-right: 1px dotted var(--frame_std_farbe);
}

footer {
  border: 1px dotted var(--frame_std_farbe);
  color: rgb(235, 236, 238);
  background-color: rgb(0, 68, 91);
}

button {
  margin-top: 5px;
}

/* ---------------------------------------------------------
   4. Navigation (Bootstrap navbar-default überschrieben)
   --------------------------------------------------------- */

.navbar-default {
  background-color: var(--nav_bg_farbe);
  color: var(--nav_schrift_farbe);
}

.navbar-default .navbar-brand,
.navbar-default .navbar-text,
.navbar-default .navbar-nav > li > a {
  color: var(--nav_schrift_farbe);
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover {
  color: var(--nav_schrift_hover);
  background-color: var(--nav_bg_hover);
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: var(--nav_schrift_farbe);
  background-color: var(--nav_bg_farbe);
}

.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
  color: var(--nav_schrift_inaktiv);
  background-color: var(--nav_bg_farbe);
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: var(--nav_schrift_farbe);
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: var(--nav_schrift_hover);
    background-color: var(--nav_bg_hover);
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: var(--nav_schrift_farbe);
    background-color: var(--nav_bg_farbe);
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: var(--nav_schrift_inaktiv);
    background-color: var(--nav_bg_farbe);
  }
}

/* ---------------------------------------------------------
   5. Formulare
   --------------------------------------------------------- */

.stdform {
  border: 1px solid rgb(0, 106, 178);
  border-radius: 5px;
  padding: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.note {
  color: rgb(204, 204, 204);
  font-size: smaller;
  font-weight: normal;
}

/* ---------------------------------------------------------
   6. Tabellen
   --------------------------------------------------------- */

table > thead > tr {
  border-top: 1px solid rgb(0, 0, 0);
  border-bottom: 1px solid rgb(0, 0, 0);
  background-color: var(--table_head);
}

.table-striped > tbody > tr:nth-of-type(2n+1) {
  background-color: var(--table_odd);
}

.table-striped > tbody > tr:nth-of-type(2n) {
  background-color: var(--table_even);
}

.table-hover > tbody > tr:hover {
  background-color: var(--table_hover);
}

/* ---------------------------------------------------------
   7. News-Boxen (Statusfarben)
   --------------------------------------------------------- */

.news-std { }

.news-green {
  color: rgb(60, 118, 61);
  background-color: rgb(223, 240, 216);
  border-color: rgb(214, 233, 198);
}

.news-lightblue {
  color: rgb(49, 112, 143);
  background-color: rgb(217, 237, 247);
  border-color: rgb(188, 232, 241);
}

.news-beige {
  color: rgb(138, 109, 59);
  background-color: rgb(252, 248, 227);
  border-color: rgb(250, 235, 204);
}

.news-lightred {
  color: rgb(169, 68, 66);
  background-color: rgb(242, 222, 222);
  border-color: rgb(235, 204, 209);
}

.news-orange {
  color: rgb(255, 128, 0);
  background-color: rgb(255, 255, 153);
  border-color: rgb(255, 128, 0);
}

/* ---------------------------------------------------------
   8. Datepicker (bsndatepicker – falls kein separates
      Framework-CSS eingebunden wird)
   --------------------------------------------------------- */

i.datepicker,
span.datepicker {
  width: auto;
  padding: 0 0 0 5px;
  margin: 0;
}

span.datepicker > i.disabled {
  color: rgb(160, 160, 160) !important;
}

form.datepicker {
  border: 1px solid black;
  background-color: rgb(204, 204, 204);
  z-index: 5000;
  position: absolute;
  height: auto;
  padding: 3px;
  margin: 3px;
}

form.datepicker td,
form.datepicker th {
  border: 1px solid rgb(204, 204, 204);
  padding: 3px;
  text-align: center;
  color: rgb(0, 0, 0);
}

form.datepicker tr.head {
  background-color: rgb(204, 204, 204);
}

form.datepicker tr.week {
  background-color: rgb(255, 255, 255);
}

form.datepicker tr.week > td:first-child {
  border-right: 1px solid rgb(0, 0, 0);
}

form.datepicker td span.inaktiv {
  color: rgb(204, 204, 204);
}

form.datepicker td span.aktiv {
  color: rgb(0, 0, 0);
}

form.datepicker td span.heute {
  background-color: yellow;
  color: rgb(0, 0, 0);
}

form.datepicker tr.week > td.aktiv:hover {
  background-color: aqua;
}