/* Ferien MAGS - eigene Farbanpassungen (user.css) */

/* Kopfbereich weiss (setzt auch Verlaeufe des Templates zurueck) */
header.header,
.container-header {
  background: #fff;
}
/* Kopf-Links dunkel, damit sie auf Weiss lesbar sind */
header.header a,
.container-header a,
.container-nav a {
  color: #333 !important;
}

/* Fusszeile dunkelgrau mit heller Schrift und hellen Links */
footer.footer,
.container-footer {
  background: #333;
  color: #f2f2f2;
}
footer.footer a,
.container-footer a {
  color: #fff;
}

/* Links in kraeftigem Rot */
a {
  color: #c00000;
}
a:hover,
a:focus {
  color: #c00000;
}
.mod-menu a {
  text-transform: uppercase;
}
.mod-menu a:hover,
a:focus,
.active > a {
  color: #c00000 !important;
}

/* Hauptmenue: Untermenues am Desktop auch bei Hover oeffnen (Cassiopeia oeffnet sonst nur per Klick auf den kleinen Pfeil) */
@media (min-width: 992px) {
  .container-header .mod-menu li:hover > ul,
  .container-nav .mod-menu li:hover > ul {
    display: block !important;
  }
}
/* Toggle-Pfeile im Hauptmenue auf dem weissen Kopf deutlich sichtbar machen */
.container-header .mod-menu li > button,
.container-nav .mod-menu li > button {
  border-color: #333 !important;
  color: #333 !important;
  opacity: 1 !important;
}

/* JOB 1 - Mobilmenue unter 992px: Ursache war ein weisser Toggler auf weissem Kopf. Dunkler Button, 44px, Balken-Fallback, falls die Icon-Font nicht rendert. Desktop (>=992px) unveraendert. */
@media (max-width: 991.98px) {
  .container-header .navbar-toggler,
  .container-nav .navbar-toggler {
    color: #333 !important;
    background: #fff !important;
    border: 2px solid #333 !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1040;
  }
  .container-header .navbar-toggler .icon-menu,
  .container-nav .navbar-toggler .icon-menu {
    font-size: 0 !important; line-height: 0 !important; color: transparent !important;
    display: inline-block !important;
    width: 26px;
    height: 19px;
    font-size: 0;
    line-height: 0;
    background-image: linear-gradient(to bottom, #333 0 3px, transparent 3px 8px, #333 8px 11px, transparent 11px 16px, #333 16px 19px);
    background-repeat: no-repeat;
  }
  .container-header .navbar-collapse,
  .container-nav .navbar-collapse {
    background: #fff !important;
    width: 100%;
    position: relative;
    z-index: 1030;
  }
  .container-header .navbar-collapse .mod-menu,
  .container-nav .navbar-collapse .mod-menu {
    display: block !important;
    width: 100%;
  }
  .container-header .navbar-collapse .mod-menu li,
  .container-nav .navbar-collapse .mod-menu li {
    display: block !important;
    width: 100%;
  }
  .container-header .navbar-collapse .mod-menu a,
  .container-nav .navbar-collapse .mod-menu a {
    display: block !important;
    width: 100%;
    color: #333 !important;
    text-transform: uppercase;
  }
  .container-header .navbar-collapse .mod-menu a:hover,
  .container-nav .navbar-collapse .mod-menu a:hover {
    color: #c00000 !important;
  }
}

/* Fusszeile: alle Modulinhalte zentriert ausrichten */
footer.footer,
.container-footer {
  text-align: center;
}
/* Fusszeile: Module untereinander in voller Breite anordnen (statt nebeneinander in Spalten) */
footer.footer,
.container-footer,
footer.footer .container,
.container-footer .container,
footer.footer .row,
.container-footer .row,
footer.footer > div,
.container-footer > div {
  display: block;
}
/* Fusszeilen-Menue (Impressum | AGB | Datenschutz) als zentrierte Zeile */
footer.footer .mod-menu,
.container-footer .mod-menu,
footer.footer ul,
.container-footer ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.5rem;
  padding-left: 0;
  list-style: none;
}
footer.footer ul li,
.container-footer ul li {
  width: auto !important;
  flex: 0 1 auto !important;
}

/* JotForm-Reiter Check-In: feststehender vertikaler Reiter am linken Bildschirmrand (oben) */
.checkin-tab a.btn.lightbox-51802904640955 {
  position: fixed;
  left: 0;
  top: 26%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  z-index: 1035;
  margin-top: 0 !important;
  border-radius: 0;
  letter-spacing: .1em;
  box-shadow: 2px 0 8px rgba(0,0,0,.3);
}

/* JotForm-Reiter MagsMail: feststehender vertikaler Reiter am linken Bildschirmrand (Mitte) */
.magsmail-tab a.btn.lightbox-3515821120 {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  z-index: 1035;
  margin-top: 0 !important;
  border-radius: 0;
  letter-spacing: .1em;
  box-shadow: 2px 0 8px rgba(0,0,0,.3);
}

/* JotForm-Reiter Meldeformular: feststehender vertikaler Reiter am linken Bildschirmrand (unten) */
.melde-tab a.btn.lightbox-13182042935 {
  position: fixed;
  left: 0;
  top: 76%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  z-index: 1035;
  margin-top: 0 !important;
  border-radius: 0;
  letter-spacing: .1em;
  box-shadow: 2px 0 8px rgba(0,0,0,.3);
}
/* JotForm-Reiter: abgerundete Aussenkante (nach 180deg-Drehung sichtbar rechts) und weicher Schatten, Farben mit !important */
.checkin-tab a.btn.lightbox-51802904640955 {
  background-color: #0067ac !important;
  border-color: #0067ac !important;
  color: #FFFFFF !important;
  border-radius: 10px 0 0 10px;
  box-shadow: 3px 3px 10px rgba(0,0,0,.35);
}
.magsmail-tab a.btn.lightbox-3515821120 {
  background-color: #ff2400 !important;
  border-color: #ff2400 !important;
  color: #FFFFFF !important;
  border-radius: 10px 0 0 10px;
  box-shadow: 3px 3px 10px rgba(0,0,0,.35);
}
.melde-tab a.btn.lightbox-13182042935 {
  background-color: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #d50000 !important;
  border-radius: 10px 0 0 10px;
  box-shadow: 3px 3px 10px rgba(0,0,0,.35);
}
/* REGRESSION-FIX 27.10.2026: einzige Farbquelle fuer Body und Reiter (die vier DIAGNOSE-Bloecke oberhalb wurden am 28.10.2026 physisch geloescht) */
body { background-color: #ffffff !important; }
.checkin-tab a.btn.lightbox-51802904640955 { background-color: #0067ac !important; border-color: #0067ac !important; color: #FFFFFF !important; border-radius: 10px 0 0 10px; box-shadow: 3px 3px 10px rgba(0,0,0,.35); font-weight: 700; }
.magsmail-tab a.btn.lightbox-3515821120 { background-color: #ff2400 !important; border-color: #ff2400 !important; color: #FFFFFF !important; border-radius: 10px 0 0 10px; box-shadow: 3px 3px 10px rgba(0,0,0,.35); font-weight: 700; }
.melde-tab a.btn.lightbox-13182042935 { background-color: #ffd400 !important; border-color: #ffd400 !important; color: #d50000 !important; border-radius: 10px 0 0 10px; box-shadow: 3px 3px 10px rgba(0,0,0,.35); font-weight: 700; }
/* Header-Logo: quadratisches Logo auf Kopfzeilen-Hoehe begrenzen (sonst 500px nativ) */
.brand-logo img, .navbar-brand img { height: 64px; width: auto; }

/* JOB 2a - Reiter-Layout 28.10.2026: hoehenunabhaengiger Stapel um die Bildschirmmitte, Luecken je ca. 10px (gemessene Hoehen: Check-In ca. 100px, MagsMail ca. 107px, Meldeformular ca. 158px; Gesamt 385px) */
.checkin-tab a.btn.lightbox-51802904640955 { top: calc(50% - 142.5px) !important; }
.magsmail-tab a.btn.lightbox-3515821120 { top: calc(50% - 29px) !important; }
.melde-tab a.btn.lightbox-13182042935 { top: calc(50% + 113.5px) !important; }

/* JOB 2b - Kleine Displays: drei Kanten statt eines Stapels */
@media (max-width: 576px) or (max-height: 480px) {
  .melde-tab a.btn.lightbox-13182042935 {
    left: 0 !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) rotate(180deg) !important;
    writing-mode: vertical-rl !important;
    border-radius: 10px 0 0 10px !important;
    box-shadow: 3px 3px 10px rgba(0,0,0,.35) !important;
  }
  .checkin-tab a.btn.lightbox-51802904640955 {
    left: auto !important;
    right: 0 !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    writing-mode: vertical-rl !important;
    border-radius: 10px 0 0 10px !important;
    box-shadow: -3px 3px 10px rgba(0,0,0,.35) !important;
  }
  .magsmail-tab a.btn.lightbox-3515821120 {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    writing-mode: horizontal-tb !important;
    border-radius: 10px 10px 0 0 !important;
    box-shadow: 0 -3px 10px rgba(0,0,0,.35) !important;
  }
}
/* Hamburger-Symbol 28.10.2026: Icon-Font-Glyphe auch ueber ::before neutralisieren */
.container-header .navbar-toggler .icon-menu::before, .container-nav .navbar-toggler .icon-menu::before { content: none !important; }
/* GTranslate Flaggen 28.10.2026: Abstand und Reihenfolge, eine Zeile ohne Umbruch */
.gtranslate_wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  align-items: center !important;
}
.gtranslate_wrapper a {
  margin: 0 !important;
}
.gtranslate_wrapper a img {
  display: block !important;
}
.gtranslate_wrapper a[onclick*="|de"] { order: 1 !important; }
.gtranslate_wrapper a[onclick*="|en"] { order: 2 !important; }
.gtranslate_wrapper a[onclick*="|fr"] { order: 3 !important; }
.gtranslate_wrapper a[onclick*="|it"] { order: 4 !important; }
.gtranslate_wrapper a[onclick*="|es"] { order: 5 !important; }
.gtranslate_wrapper a[onclick*="|ru"] { order: 6 !important; }
/* GTranslate Flaggen 28.10.2026, Korrektur: Die Flaggen-Bilder kommen vom GTranslate-CDN (cdn.gtranslate.net/flags/svg/xx.svg); die Reihenfolge wird daher ueber die Bildadresse im Link gesteuert, nicht ueber onclick */
.gtranslate_wrapper a:has(img[src$="/de.svg"]) { order: 1 !important; }
.gtranslate_wrapper a:has(img[src$="/en.svg"]) { order: 2 !important; }
.gtranslate_wrapper a:has(img[src$="/fr.svg"]) { order: 3 !important; }
.gtranslate_wrapper a:has(img[src$="/it.svg"]) { order: 4 !important; }
.gtranslate_wrapper a:has(img[src$="/es.svg"]) { order: 5 !important; }
.gtranslate_wrapper a:has(img[src$="/ru.svg"]) { order: 6 !important; }

/* Gestaltungsrunde 28.10.2026 - Aufgabe 1: Schriftzug neben dem Logo */
a.brand-logo, .navbar-brand a.brand-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
a.brand-logo::after { content: "FERIEN MAGS"; font-weight: 700; font-size: 1.9rem; letter-spacing: .02em; color: #333; white-space: nowrap; line-height: 1; }
@media (max-width: 575px) { a.brand-logo::after { font-size: 1.3rem; } }

/* Gestaltungsrunde 28.10.2026 - Aufgabe 2: Beitrags-Ueberschriften rot, nur im Artikel */
.com-content-article h2, .com-content-article h3, .com-content-article__body h2, .com-content-article__body h3 { color: #c00000; }

/* Gestaltungsrunde 28.10.2026 - Aufgabe 3+4: Footer hellgrau, Menue-Balken darueber */
footer.footer, .container-footer { background: #eeeeee; color: #333; }
footer.footer a, .container-footer a { color: #c00000; }
footer.footer .mod-menu, .container-footer .mod-menu { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 24px; background: #dcdcdc; width: 100%; margin: 0; padding: 10px 16px; list-style: none; }
footer.footer .mod-menu li, .container-footer .mod-menu li { list-style: none; margin: 0; }
footer.footer .mod-menu a, .container-footer .mod-menu a { color: #333; text-decoration: none; padding: 2px 0; }
footer.footer .mod-menu a:hover, footer.footer .mod-menu a:focus, .container-footer .mod-menu a:hover, .container-footer .mod-menu a:focus { color: #c00000; }
.back-to-top-link, a.back-to-top-link { background: #333; color: #fff; border: 1px solid #333; }

/* Gestaltungsrunde 28.10.2026 - Korrektur: Menue-Balken volle Footer-Breite, oben buendig */
footer.footer .grid-child, .container-footer .grid-child { padding-top: 0; }
footer.footer .mod-menu, .container-footer .mod-menu { box-sizing: border-box; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* Gestaltungsrunde 28.10.2026 - Korrektur 2: volle Breite ohne 100vw (kein horizontaler Scroll) */
footer.footer > .grid-child, .container-footer > .grid-child { max-width: none; width: 100%; padding-left: 0; padding-right: 0; }
footer.footer .mod-menu, .container-footer .mod-menu { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }