/* =====================================================================
   TTC-Steffisburg: Variante A "Clubfarben"
   Geschrieben gegen euer page.css und page.mustache (Template mit
   .cd-singledropdownmenu und .cd-mobile-menu).

   EINBAU
   1. Layout-Dateien verwalten: page.css, page.js und page.mustache zuerst
      herunterladen (Sicherung).
   2. page.css bearbeiten (Stift-Symbol) und diesen ganzen Block ganz ans
      ENDE einfügen. Nichts löschen. page.mustache und page.js bleiben
      unverändert.
   3. Speichern, Seite neu laden (Strg+F5).

   Verwendet nur Schriften, die page.css schon lädt (Oswald, Open Sans).
   Der Präfix "html body" hebt die Spezifität über die Standardregeln,
   damit es auch gilt, falls das CSS nicht als letztes geladen wird.
   ===================================================================== */
@import url('ttc-kacheln.css');
@import url('ttc-spalten-mittig.css');
@import url('ttc-bilder.css');
@import url('ttc-tabellen.css');
@import url('ttc-beitragsliste.css');
@import url('ttc-inhaltsbreite.css');
@import url('ttc-menue.css');

:root {
  --ttc-green: #1B6B4A;
  --ttc-red: #C62F2F;
  --ttc-ink: #14201B;
  --ttc-muted: #4A5A52;
  --ttc-tint: #EEF3F0;
  --ttc-line: #D5DED9;
}

html body {
  font-family: 'Open Sans', sans-serif;
  color: var(--ttc-ink);
}

/* ---------------------------------------------------------------------
   DESKTOP-KOPF  (nav.cd-navigation-bar-container, ab 993 px)
   Zeile 1: Logo + Name links, Login rechts. Zeile 2: grüne Menüleiste.
   Umgesetzt nur mit flex-wrap und order, das HTML bleibt wie es ist.
   --------------------------------------------------------------------- */
html body.cd-header-empty .cd-navigation-bar-container,
html body.cd-scroll .cd-navigation-bar-container,
html body .cd-navigation-bar-container {
  background: #fff;
  border-bottom: 1px solid var(--ttc-line);
  box-shadow: none;
}

html body .cd-navigation-bar-content,
html body.cd-scroll .cd-navigation-bar-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Zeile 1 */
html body .cd-logo-and-name-desktop { order: 1; margin: 12px 0 12px 64px; }
html body .cd-navigation-bar-content .cd-filler { order: 2; }
html body .cd-login-link-desktop { order: 3; margin-right: 64px; }

html body .cd-logo-and-name-desktop .cd-club-logo { height: 48px; }

html body .cd-navigation-bar-container .cd-logo-and-name-desktop a.cd-club-name,
html body .cd-navigation-bar-container .cd-logo-and-name-desktop a.cd-club-name:visited,
html body .cd-navigation-bar-container .cd-logo-and-name-desktop a.cd-club-name:hover {
  font-family: Oswald, sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ttc-ink);
  margin: 0 0 0 14px;
}

/* Login als Button mit Rahmen */
html body .cd-navigation-bar-container .cd-login-link-desktop a.cd-link-login,
html body .cd-navigation-bar-container .cd-login-link-desktop a.cd-link-login:visited {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0 24px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--ttc-green);
  border: 2px solid var(--ttc-green);
  border-radius: 4px;
  text-decoration: none;
  opacity: 1;
}
html body .cd-navigation-bar-container .cd-login-link-desktop a.cd-link-login:hover {
  color: #fff;
  background: var(--ttc-green);
  text-decoration: none;
  opacity: 1;
}

/* Zeile 2: Menüleiste über die volle Breite */
html body .cd-navigation-bar-container .cd-singledropdownmenu {
  order: 4;
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 0 56px;
  background: var(--ttc-green);
}

html body .cd-singledropdownmenu .cd-menu-level-1 > ul > li > a.cd-menu-item {
  padding: 15px 14px 11px;
  font-family: Oswald, sans-serif;
  font-size: 18px;
  letter-spacing: .02em;
  color: #fff;
  border: 0;
  border-bottom: 4px solid transparent;
  border-radius: 0;
}
html body .cd-singledropdownmenu .cd-menu-level-1 a:hover {
  opacity: 1;
}
html body .cd-singledropdownmenu .cd-menu-level-1 > ul > li > a.cd-menu-item:hover,
html body .cd-singledropdownmenu .cd-menu-level-1 > ul > li > a.cd-menu-active,
html body .cd-singledropdownmenu .cd-menu-level-1 > ul > li > a.cd-menu-selected {
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 4px solid var(--ttc-red);
  border-radius: 0;
}
html body .cd-singledropdownmenu .cd-menu-active { font-weight: 400; }
html body .cd-singledropdownmenu .cd-menu-level-1 .cd-menu-expander { font-size: 14px; color: #fff; }

/* Untermenü (Aufklapp-Fenster) */
html body .cd-singledropdownmenu .cd-menu-level-2 { background-color: var(--ttc-ink); margin: 0; border-radius: 0; }
html body .cd-singledropdownmenu .cd-menu-level-3 > ul { background-color: #223329; }
html body .cd-singledropdownmenu .cd-menu-level-2 a.cd-menu-active,
html body .cd-singledropdownmenu .cd-menu-level-2 a.cd-menu-selected {
  color: #fff;
  background-color: var(--ttc-red);
}
html body .cd-singledropdownmenu .cd-menu-level-3 a.cd-menu-active,
html body .cd-singledropdownmenu .cd-menu-level-3 a.cd-menu-selected {
  color: #fff;
  background-color: var(--ttc-red);
}

/* Platz unter der festen Kopfzeile: 72 px + 52 px + Luft */
@media (min-width: 993px) {
  html body.cd-header-empty .cd-content .cd-section:first-of-type { padding-top: 160px; }
}

/* ---------------------------------------------------------------------
   MOBIL-KOPF  (nav.cd-mobile-menu-bar-fixed, bis 992 px)
   Logo links, Login-Symbol und Menü-Knopf rechts, weisse Leiste.
   --------------------------------------------------------------------- */
html body.cd-header-empty .cd-mobile-menu-bar,
html body.cd-scroll .cd-mobile-menu-bar,
html body .cd-mobile-menu-bar {
  background: #fff;
  border-bottom: 1px solid var(--ttc-line);
}

html body .cd-mobile-menu-bar-content,
html body.cd-scroll .cd-mobile-menu-bar-content {
  padding: 8px 16px;
  background: none !important;
}

html body .cd-mobile-menu-bar-content .cd-logo-and-name-mobile { order: 1; }
html body .cd-mobile-menu-bar-content .filler { order: 2; }
html body .cd-mobile-menu-bar-content .cd-login-link-mobile { order: 3; }
html body .cd-mobile-menu-bar-content .mobile-menu { order: 4; margin-left: 12px; }

html body .cd-logo-and-name-mobile .cd-club-logo { height: 40px; }
html body .cd-logo-and-name-mobile .cd-club-name { display: inline; }
html body .cd-logo-and-name-mobile a.cd-club-name,
html body .cd-logo-and-name-mobile a.cd-club-name:visited,
html body .cd-logo-and-name-mobile a.cd-club-name:hover {
  font-family: Oswald, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ttc-ink);
  margin: 0 0 0 10px;
}

html body .cd-login-link-mobile a.cd-link-login,
html body .cd-login-link-mobile a.cd-link-login:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  color: var(--ttc-green);
}

/* Menü-Knopf: grüne Fläche mit weisser Schrift */
html body .cd-mobile-menu-button {
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  background: var(--ttc-green);
  border-radius: 4px;
}
html body .cd-mobile-menu-button .nav-icon { margin: 0 10px 0 0; height: 18px; position: relative; }
html body .cd-mobile-menu-button .menu-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  color: #fff;
}
html body .cd-mobile-menu-button .nav-icon span,
html body .cd-mobile-menu-button .nav-icon.open span { background: #fff; }

/* Geöffnetes Menü: Ebene 1 beginnt direkt unter der schmaleren Leiste */
html body .cd-mobile-menu .cd-mobile-menu-level-1,
html body .cd-mobile-menu .cd-mobile-menu-background { background: var(--ttc-green); }
html body .cd-mobile-menu .cd-mobile-menu-level-1.open { top: 58px; }
html body .cd-mobile-menu .cd-mobile-menu-level-1 > ul > li > a.cd-menu-item {
  font-size: 20px;
  border-width: 0 0 1px 0;
  border-color: rgba(255,255,255,.25);
}
html body .cd-mobile-menu .cd-mobile-menu-level-2,
html body .cd-mobile-menu .cd-mobile-menu-level-3 { background-color: var(--ttc-ink); }
html body .cd-mobile-menu .cd-mobile-menu-level-1 > ul > li > .cd-menu-selected,
html body .cd-mobile-menu .cd-mobile-menu-level-1 > ul > li > .cd-menu-active,
html body .cd-mobile-menu .cd-mobile-menu-level-2 > ul > li > .cd-menu-active,
html body .cd-mobile-menu .cd-mobile-menu-level-3 a.cd-menu-active {
  color: #fff;
  background-color: var(--ttc-red);
}

@media (max-width: 992px) {
  html body.cd-header-empty .cd-content .cd-section:first-of-type { padding-top: 100px; }
}

/* ---------------------------------------------------------------------
   INHALT
   --------------------------------------------------------------------- */
html body .cd-content h1,
html body .cd-content h2,
html body .cd-content h3,
html body .cd-content h4 {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.05;
  color: var(--ttc-ink);
}
html body .cd-content h1 { font-size: clamp(44px, 7vw, 84px); }
html body .cd-content h2 { font-size: clamp(30px, 4vw, 40px); }
html body .cd-content h3 { font-size: clamp(26px, 3.4vw, 34px); }

html body .cd-content a { color: var(--ttc-green); }
html body .cd-content a:hover { color: var(--ttc-red); }

/* Tabellen (Trainingszeiten) */
html body .cd-content table { width: 100%; border-collapse: collapse; }
html body .cd-content thead th,
html body .cd-content tr:first-child th { text-align: left; border-bottom: 3px solid var(--ttc-ink); }
html body .cd-content td,
html body .cd-content th { padding: 14px 12px; border-bottom: 1px solid var(--ttc-line); }

/* Buttons (geprüft: a.cd-button.cd-button-primary / -secondary / -tertiary).
   Die Standardregeln von ClubDesk sind sehr spezifisch, darum !important. */
html body a.cd-button,
html body input.cd-button,
html body button.cd-button {
  font-family: Oswald, sans-serif !important;
  letter-spacing: .04em;
  border-radius: 4px !important;
  padding: 14px 28px !important;
  border-width: 2px !important;
  border-style: solid !important;
  box-shadow: none !important;
}
/* Primär: rot */
html body a.cd-button-primary,
html body input.cd-button-primary,
html body button.cd-button-primary {
  background-color: var(--ttc-red) !important;
  border-color: var(--ttc-red) !important;
  color: #fff !important;
}
html body a.cd-button-primary:hover,
html body input.cd-button-primary:hover,
html body button.cd-button-primary:hover {
  background-color: #fff !important;
  color: var(--ttc-red) !important;
}
/* Sekundär: grün */
html body a.cd-button-secondary,
html body input.cd-button-secondary,
html body button.cd-button-secondary {
  background-color: var(--ttc-green) !important;
  border-color: var(--ttc-green) !important;
  color: #fff !important;
}
html body a.cd-button-secondary:hover,
html body input.cd-button-secondary:hover,
html body button.cd-button-secondary:hover {
  background-color: #fff !important;
  color: var(--ttc-green) !important;
}
/* Tertiär (z. B. "Weitere Einträge"): nur Rahmen */
html body a.cd-button-tertiary,
html body input.cd-button-tertiary,
html body button.cd-button-tertiary {
  background-color: transparent !important;
  border-color: var(--ttc-ink) !important;
  color: var(--ttc-ink) !important;
  padding: 10px 22px !important;
}
html body a.cd-button-tertiary:hover,
html body input.cd-button-tertiary:hover,
html body button.cd-button-tertiary:hover {
  background-color: var(--ttc-ink) !important;
  color: #fff !important;
}

html body .cd-content img { border-radius: 0; }

/* ---------------------------------------------------------------------
   FUSSZEILE
   --------------------------------------------------------------------- */
html body .cd-footer .cd-section.cd-dark {
  background-color: var(--ttc-ink) !important;
  color: #fff;
}
html body .cd-footer .cd-section.cd-dark a { color: #fff; }
html body .cd-footer .cd-section.cd-dark a:hover { color: #B9C7BF; }

/* Cookie-Hinweis und Nach-oben-Knopf im Clubstil */
html body .cc-window, html body .cc-revoke { background-color: var(--ttc-tint); }
html body .cc-btn { background-color: var(--ttc-green); color: #fff; border-radius: 4px; }
html body .cd-totop-button { background-color: var(--ttc-green); color: #fff; border-radius: 4px; }