/* =========================================================================
   lerchertrain.at - Projektanpassungen
   Liegt bewusst in fileadmin (ueberlebt Sitepackage-Updates).
   Eingebunden via Project1/Setup/setup.typoscript.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) SCHRIFT: Jost (Google Fonts, SIL Open Font License 1.1)
   Selbst gehostet - es wird KEINE Verbindung zu Google aufgebaut.
   Bezogen ueber das npm-Paket @fontsource-variable/jost 5.3.0,
   Lizenztext liegt unter /fileadmin/Fonts/jost/LICENSE.txt.
   Variable Font (Gewichtsachse 100-900): ein File deckt Regular, Medium,
   SemiBold und Bold ab. Ueber unicode-range laedt der Browser den
   latin-ext-Teil nur, wenn er ihn wirklich braucht.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;              /* Variable Font: ein File, alle Schnitte */
  font-display: swap;
  src: url('/fileadmin/Fonts/jost/jost-latin-wght-normal.woff2') format('woff2-variations'),
       url('/fileadmin/Fonts/jost/jost-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;              /* Variable Font: ein File, alle Schnitte */
  font-display: swap;
  src: url('/fileadmin/Fonts/jost/jost-latin-ext-wght-normal.woff2') format('woff2-variations'),
       url('/fileadmin/Fonts/jost/jost-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 100 900;              /* Variable Font: ein File, alle Schnitte */
  font-display: swap;
  src: url('/fileadmin/Fonts/jost/jost-latin-wght-italic.woff2') format('woff2-variations'),
       url('/fileadmin/Fonts/jost/jost-latin-wght-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 100 900;              /* Variable Font: ein File, alle Schnitte */
  font-display: swap;
  src: url('/fileadmin/Fonts/jost/jost-latin-ext-wght-italic.woff2') format('woff2-variations'),
       url('/fileadmin/Fonts/jost/jost-latin-ext-wght-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* -------------------------------------------------------------------------
   2) Schrift im Sitepackage aktivieren
   Jost ist ein Variable Font mit reiner Gewichtsachse. Die auf Roboto Flex
   zugeschnittenen font-variation-settings werden neutralisiert, die Gewichte
   steuert font-weight.
   ------------------------------------------------------------------------- */
:root {
  --font-family-normal: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --menu-font-family:   var(--font-family-normal);
  --header-font-family: var(--font-family-normal);

  --font-variation-settings:            normal;
  --font-variation-settings-extralight: normal;
  --font-variation-settings-light:      normal;
  --font-variation-settings-medium:     normal;
  --font-variation-settings-semibold:   normal;
  --font-variation-settings-bold:       normal;
  --font-variation-settings-extrabold:  normal;
  --header-font-variation-settings:     normal;

  /* Navigation: SemiBold (Entscheidung Rene, Kunde schrieb "schwarz und fett") */
  --nav-font-weight: 600;
}

html, body {
  font-family: var(--font-family-normal);
  font-variation-settings: normal;
}

/* Fliesstext = Jost Regular (400) */
body, p, li, td, dd, dt, figcaption, .ce-bodytext {
  font-weight: 400;
  font-variation-settings: normal;
}

/* Ueberschriften
   H1-H3 = Jost Medium (500): grosse Grade, die Hierarchie kommt aus der
   Schriftgroesse - Medium wirkt ruhiger und passt zur Kundenvorgabe fuer H1.
   H4-H6 = SemiBold (600): liegen nahe der Fliesstextgroesse und brauchen
   etwas Gewicht, um noch als Ueberschrift gelesen zu werden. */
h1, h2, h3, .h1, .h2, .h3, h1 a, h2 a, h3 a {
  font-family: var(--font-family-normal);
  font-weight: 500;
  font-variation-settings: normal;
}

h4, h5, h6, .h4, .h5, .h6 {
  font-family: var(--font-family-normal);
  font-weight: 600;
  font-variation-settings: normal;
}

/* Formularelemente erben die Schrift NICHT automatisch vom Browser -
   ohne diese Regel rendern Eingabefelder, Buttons und Auswahllisten in
   Arial bzw. monospace statt in Jost. */
input, button, select, textarea, optgroup, option {
  font-family: var(--font-family-normal);
  font-variation-settings: normal;
}

/* Hervorhebungen = Jost SemiBold (600), entspricht der Kundenvorgabe */
strong, b, .ce-bodytext strong, .ce-bodytext b {
  font-weight: 600;
  font-variation-settings: normal;
}

/* -------------------------------------------------------------------------
   3) NAVIGATION: kein grauer Balken, rechtsbuendig, schwarz + SemiBold
   Selektoren bewusst hoch spezifisch, damit sie unabhaengig von der
   Variablen-Reihenfolge (inline <style>) sicher greifen.
   ------------------------------------------------------------------------- */
:root {
  --menu-bg: transparent;
  --menu-bg-100vw: transparent;
  --menu-hover-bg: transparent;
  --menu-current-bg: transparent;
  --menu-link-color: #000;
  --menu-link-hover-color: var(--color1, #0026a8);
}

.clean-menubg.wrapper-topmenu,
div.wrapper-topmenu,
nav.main-nav,
nav.main-nav ul#main-menu.sm-clean,
nav.main-nav ul#main-menu.sm-clean > li,
nav.main-nav ul#main-menu.sm-clean > li > a {
  background: transparent;
  box-shadow: none;
}

nav.main-nav ul#main-menu.sm-clean > li > a,
nav.main-nav ul#main-menu.sm-clean > li > a span {
  color: #000;
  font-family: var(--font-family-normal);
  font-weight: var(--nav-font-weight, 600);
  font-variation-settings: normal;
}
nav.main-nav ul#main-menu.sm-clean > li > a:hover,
nav.main-nav ul#main-menu.sm-clean > li > a:focus,
nav.main-nav ul#main-menu.sm-clean > li > a.current,
nav.main-nav ul#main-menu.sm-clean > li > a.active {
  color: var(--color1, #0026a8);
  background: transparent;
}

/* rechtsbuendig (nur Desktop; mobil bleibt das Klappmenue unveraendert) */
@media (min-width: 769px) {
  nav.main-nav ul#main-menu.sm-clean { text-align: right; }
  nav.main-nav ul#main-menu.sm-clean > li {
    float: none;
    display: inline-block;
    text-align: left;
  }
  nav.main-nav ul#main-menu.sm-clean ul {
    text-align: left;
    background: #fff;
  }
}

/* Karten der Kartengruppe */
.lc-card__title { font-weight: 500; }
.lc-card__more  { font-weight: 600; }

/* -------------------------------------------------------------------------
   4) NAVIGATION MOBIL: weisser Hintergrund im aufgeklappten Menue
   (Abschnitt 3 setzt das Menue transparent - mobil lag die Schrift
   dadurch direkt auf dem Hintergrundbild). 08.10.2026
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  nav.main-nav ul#main-menu.sm-clean,
  nav.main-nav ul#main-menu.sm-clean ul {
    background: #fff;
  }
  nav.main-nav ul#main-menu.sm-clean {
    position: relative;
    z-index: 100;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
  }
}

/* -------------------------------------------------------------------------
   5) TEXTAUSRICHTUNG aus dem RTE (class="text-justify" usw.)
   Der Editor setzt diese Klassen, das Sitepackage definiert sie aber nicht.
   Blocksatz mit Silbentrennung, sonst entstehen (v.a. mobil) grosse Luecken.
   08.10.2026
   ------------------------------------------------------------------------- */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-justify {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 3;   /* nur laengere Woerter trennen */
}

/* -------------------------------------------------------------------------
   6) EINGETRAGENE MARKE (®) in den Karten hochgestellt, ohne die
   Zeilenhoehe zu verschieben. 08.10.2026
   ------------------------------------------------------------------------- */
.lc-card sup.lc-reg {
  font-size: .6em;
  line-height: 0;
  vertical-align: super;
  margin-left: .05em;
}

/* -------------------------------------------------------------------------
   7) COOKIE-BANNER (Klaro): Kontrast nach WCAG AA (>= 4,5:1) und CI-Farben.
   Hintergrund ist #333. 08.10.2026
   ------------------------------------------------------------------------- */
.klaro .cookie-modal .cm-btn.cm-btn-accept-all,
.klaro .cookie-notice .cm-btn.cm-btn-success {
  background-color: #005ea8 !important;            /* Logo-Blau, Weiss darauf 6,6:1 */
}
.klaro .cookie-modal .cm-btn.cm-btn-accept,
.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-info {
  background-color: #004175 !important;            /* Weiss darauf 10,4:1 */
}
.klaro .cookie-modal a,
.klaro .cookie-notice a {
  color: #ffffff !important;                       /* 12,6:1 auf #333 */
  text-decoration: underline !important;
}
.klaro .cookie-modal .cm-list-description,
.klaro .cookie-modal .cm-list-description span,
.klaro .cookie-modal .cm-powered-by,
.klaro .cookie-modal .cm-powered-by a {
  color: #b5b5b5 !important;                       /* 6,2:1 auf #333 */
}

/* -------------------------------------------------------------------------
   8) SEO-H1 nur fuer Suchmaschinen/Screenreader (Inhaltselement "Ueberschrift"
   mit Rahmen-Klasse "sr-only"). Sichtbares Layout bleibt unveraendert.
   08.10.2026
   ------------------------------------------------------------------------- */
.frame-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* -------------------------------------------------------------------------
   9) BANNER OBEN SOFORT ANZEIGEN (Ladezeit/LCP): fadeInContent.js blendet
   .fade erst nach document.ready ein - beim Banner kostete das am Handy
   ~2 s. Inhalte darunter blenden weiterhin ein. 08.10.2026
   ------------------------------------------------------------------------- */
.header-image .fade {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}