:root {
  --lvk-red: hsl(351, 76%, 38%);
  --lvk-blue: hsl(200, 100%, 38%);
  --border-colors: #d3d3d3;
  --menu-color: #888787;
  --mobile-screen: 320px;
  --tablet-screen: 600px;
  --desktop-screen: 992px;
  --hover-color: #0096e0;
}

/*Hinzuf�gen einer neuen Font-Family (https://www.themexpert.com/blog/how-to-add-custom-font-locally-on-joomla-template)*/
@font-face {
  font-family: "ABeeZee";
  src: url("../fonts/ABeeZee-Regular.woff2") format("woff2"),
    url("../fonts/ABeeZee-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABeeZee";
  src: url("../fonts/ABeeZee-Italic.woff2") format("woff2"),
    url("../fonts/ABeeZee-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

/*Cookiebanner auf die volle Seitenbreite skalieren*/
#redim-cookiehint-bottom {
  width: 100%;
}

/**Barrierefreiheitseinstellungen*************/
body {
  & i._access-icon.material-icons._access {
    /*Farbe*/
    background-color: var(--lvk-blue) !important;
    /*Platzierung*/
    top: 2.5% !important;
    left: 95% !important;
    line-height: 50px !important; /*Symbol wird damit der vertikalen Mitte ausgerichtet*/
  }
  /*Einblenden der Auswahlpane*/
  & div._access-menu {
    left: 75% !important;
    top: 1vh !important;
    min-width: 25% !important;
  }
}

/**Genereller Style von Inhalten ************/
/*Standarff�rbung von �berschriften*/
h2,
h3,
h4,
h5 {
  color: var(--lvk-red);
}

/*Mindesth�he f�r den body. Die Desktopdarstellung einer Seite ohne Inhalte ist zu kurz, um das ausgeklappte Mega-Menu darzustellen.*/
@media (min-width: 992px) {
  #sp-main-body {
    min-height: 442px;
  }
}

/*Generelle Umrandung f�r Bilder*/
img {
  border-radius: 3px;
  border: 2px var(--lvk-blue) solid;
  display: inline; /*Kollegen k�nnen sonst die Bilder in den eigenen Beitr�gen nicht zentrieren.*/
}

/*Styling f�r Links*/
a[href^="https://"]:not(a[rel^="noopener noreferrer"])
{
  &:after {
    font-size: small;
    content: "\1F517 ";
  }
}

a[href^="http://"]:not(a[rel^="noopener noreferrer"])
{
  &:after {
    font-size: small;
    content: "\1F517 ";
  }
}

/*Styling f�r klickbare Telefonnummern*/
a[href^="tel:"] {
  color: var(--lvk-red);
  &:before {
    /*Spiegeln des H�rersymbols*/
    font-size: small;
    content: "\260E";
    transform: scaleX(-1);
  }
}

/*Styling f�r Mailadressen*/
a[href^="mailto:"] {
  &:before {
    font-size: small;
    content: "\1F582 ";
  }
}

blockquote {
  margin: 1rem 3rem;
}

/**Logogestaltung*******************/
/*Spacing vor dem Logo*/
.top-spacer {
  background: none;
  width: 100%;
  height: 30px;
}

/*Entfernen des Standardtemplatelogos*/
.logo-image {
  display: none !important;
}

/*Einblenden des Desktoplogo-Containers*/
.desktop-svg-container {
  display: unset;
}
/*Ausblenden des Mobilelogo-Containers*/
.mobile-svg-container {
  display: none;
}

/*Logofarbauswahl*/
svg {
  /* F�llfarbe der Linie im Logo */
  & .logo_line {
    fill: url(#gradient_filling_desktop);
  }

  /*F�llfarbe der Wellen im Logo*/
  & .logo_waves {
    fill: var(--lvk-blue);
  } /* F�llfarbe der Buchstaben im Logo */

  & .logo_letters {
    fill: black;
  }
}

/*Logofarbdefinition*/
linearGradient {
  /* roter Bereich */
  & .first_stop,
  .second_stop {
    stop-color: var(--lvk-red); /*Stopp 0% und 40%, als HTML-Injection*/
  }

  /* blauer Bereich */
  & .third_stop,
  .fourth_stop {
    stop-color: var(--lvk-blue); /*Stopp bei 55% und 100%, als HTML-Injection*/
  }
}

/**Men�band******************/
.navbar {
  background-color: var(--menu-color);
  position: sticky;
  display: flex;
  justify-content: space-between;
  padding: 0 3%;
  z-index: 999;
  top: 0;
  & a {
    text-decoration: none;
    display: inherit;
    color: #fff; /* �nderung der Schriftfarbe auf Wei� */
    padding: 14px 16px;
    font-size: 20px;
    &:after {
      content: none !important;
    }
  }
  /* F�r Men�elemente ohne eigene Seite */
  & a[href="#"] {
    cursor: default !important;
  }
  & a.unicode-symbols {
    font-size: 24px;
  }
}

/* Standardm��iges verstecken des Burger-Men�s */
#burger-menu {
  display: none; /* Versteckt das Burger-Men� auf gr��eren Bildschirmen */
}

/*Die �berschriften sollen beim Hovern im Hintergrund bleiben*/
.dropdown {
  position: relative;
  display: inline-block;
}

/*Beginne Anzeige beim Hovern*/
.dropdown:hover .dropdown-content {
  display: block;
}

/*Das Dropdown soll */
.dropdown-content {
  display: none;
  position: absolute; /*�ber dem Seitentext platziert werden*/
  transform: translate(0, -3px);
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 15px;
  /*Styling der Links im Hoverkasten*/
  & a {
    color: black;
    margin-left: 5px;
    display: block;
    white-space: nowrap;
    padding: 1px;
    &:hover {
      color: #0096e0;
    }
  }
  & span {
    color: var(--lvk-red);
    font-weight: bold;
  }
}

/*Unterteilung des Hoverkasten in ein 3x3 Grid*/
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto auto;
  gap: 15px;
  width: 100%;
  height: 100%;
}

/*Darstellung der Grid-Items (Zusammenfassung der �berschriften und Links)*/
.grid-item {
  display: inline;
  align-items: center;
  justify-content: center;
  /*Darstellung der Links in einem Grid-Item*/
  & a {
    margin-left: 5px;
    display: block;
    white-space: nowrap;
  }
  & span {
    color: var(--lvk-red);
    font-weight: bold;
  }
}

#closing-icon {
  cursor: pointer;
  font-size: 24px;
  text-align: right;
}

#mobile-menu {
  display: none;
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: -325px; /* Standardm��ig au�erhalb des Bildschirms */
  width: 320px; /* Breite des mobilen Men�s */
  height: 100%;
  background-color: white; /* Hintergrundfarbe */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
  transition: left 0.3s ease; /* Slide-in Effekt */
  z-index: 999; /* �ber anderen Inhalten */
  padding: 20px;
}

/* Zeilenweise Platzierung der Men�eintr�ge  */
.offcanva-row {
  display: flex; /* Flexbox f�r die Zeilen */
  justify-content: space-between;
  flex-direction: column; /* Vertikale Anordnung der Zeilen */
  background-color: #f0f0f0;
  margin-bottom: 10px; /* Abstand zwischen den Zeilen */
  border-radius: 5px;
  padding: 10px;
}

/* "�berschriften" im Mobile-Men� */
.offcanva-link {
  display: flex; /* Flexbox f�r die Links */
  justify-content: space-between; /* Elemente innerhalb des Containers verteilen */
  align-items: center; /* Vertikale Zentrierung der Elemente */
  background-color: #f0f0f0; /* Hintergrundfarbe f�r bessere Sichtbarkeit */
  border-radius: 5px; /* Abgerundete Ecken */
  flex-wrap: wrap;
}

.offcanva-row a,
.offcanva-link a {
  color: inherit;
  text-decoration: none;
}

.offcanva-row a.unicode-symbols {
  font-size: 24px;
}

/* +-Symbol zum Ausklappen */
.toggle-sign {
  cursor: pointer; /* Zeigt, dass es klickbar ist */
  font-size: 25px; /* Gr��e des Toggle-Symbols */
}
.toggle-sign #login-related-menu {
  display: none;
}

/* Container f�r Inhalte, die nach einem Klick auf das +-Symbol erscheinen sollen */
.offcanva-link-content {
  display: none; /* Standardm��ig ausgeblendet */
  padding-left: 20px; /* Innenabstand f�r die Inhalte */
  width: 100%;
}

/* Erscheinende Links zu Seiten*/
.offcanva-link-content a {
  display: block; /* Links untereinander anordnen */
  padding: 5px 0; /* Innenabstand f�r die Links */
  text-decoration: none; /* Unterstreichung entfernen */
}

/**Men�band alt!!!***********/
/*Deaktivierung des Standard-Mobile-Men� Offcanvas*/
div.offcanvas-menu {
  display: none;
}

/*Sticky Header aktivieren*/
div.body-innerwrapper {
  overflow-x: visible;
}

/*Joomla5 Standardmen� -- deaktiv -- nach Update*/
section#sp-title {
  /*Sticky Men�*/
  display: none !important;
}

.close-offcanvas {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000; /* Ensure it's on top */
  cursor: pointer; /* Make it clear it's clickable */
}

/**Ank�ndigungsbanner********/
section.announcements {
  /*Abstand zum Men�band*/
  padding-top: 35px;
  padding-bottom: 10px;
  & div.container {
    /*Rahmenf�rbung um den Ank�ndigungsbereich*/
    & div.container-inner {
      /*border: outset 5px var(--lvk-blue);*/ /*blauer Anteil am Rahmen*/
      outline: outset 10px var(--border-colors);
      /*border-radius: 15px;*/ /*= Abgerundete Ecken*/
      & div.sp-module-content {
        /* sollte nicht display: flex; sein, ansonsten wird die Beitragsl�nge beschnitten */

        /*Wenn es nur eine Ank�ndigung gibt*/
        & div.mod-articlesnews.newsflash:has(:only-child) {
          /*Abstand aller Artikel vom �u�ersten Rand*/
          padding: 10px;
          & div.mod-articlesnews__item {
            margin: 5px; /*Abstand der Ank�ndungen zueinander*/
            padding: 5px; /*Abstand des Texts von der Umrandung*/
            border: none !important;
            border-radius: none !important;
          }
        }
        /*Wenn es mehrere Ank�ndigungen gibt*/
        & div.mod-articlesnews.newsflash {
          /*Abstand aller Artikel vom �u�ersten Rand*/
          padding: 10px;
          /*Abgrenzung der einzelnen Ank�ndigungen*/
          & div.mod-articlesnews__item {
            margin: 5px; /*Abstand der Ank�ndungen zueinander*/
            padding: 5px; /*Abstand des Texts von der Umrandung*/
            border: solid var(--border-colors) 0.5px;
            border-radius: 0px;
          }
        }
      }
    }
  }
}

/*Wenn keine Ank�ndigungen (:empty) vorhanden sind --> verstecken*/
section.announcements:has(
    div.container div.container-inner div.row div div.sp-column:empty
  ),
section.announcements[data-show-element="true"] {
  display: none;
}

/**Hauptbeitr�ge**********************************/
/*Umrandung der Hauptbeitr�ge auf der Startseite*/
.article-list .article {
  border: 4px;
  border-color: var(--border-colors);
  border-style: solid; /*evtl. auskommentieren*/
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 80% 20%;
  /* Entfernen des Featured Badge f�r Hauptbeitrage */
  & .featured-article-badge {
    display: none;
    visibility: hidden;
  }
}

/* Entfernen des Featured Badge f�r die vollst�ndige Seite des Hauptbeitrags */
.article-details .featured-article-badge {
  display: none;
  visibility: hidden;
}

/*Kategorieliste*/
.article {
  display: grid;
  grid-template-columns: 80% 20%;
  grid-template-rows: 100%;
  /* !!!F�r Artikel aus dem Backend!!!*/
  /* Einleitungsbild der Beitr�ge*/
  > .article-intro-image {
    /*�berschreiben des Templateabstands*/
    margin: 0 !important;
    overflow: hidden !important; /*Schneide �berflie�ende Bildbreiten ab*/
    border: none !important;
    grid-column: 2;
    justify-self: center; /*horizontale Zentrierung*/
    align-self: center; /*vertikale Zentrierung*/
    > a {
      display: block;
      > img {
        max-width: unset;
        width: 70%;
        height: 140px; /*Gr��e, auf die Bilder angeglichen werden sollen*/
        object-fit: cover; /*Beh�lt das Seitenverh�ltnis bei*/
        justify-self: center;
        display: block;
      }
    }
  }
  /* !!!F�r Artikel aus dem Frontend!!!*/
  /*a und article-intro-image ist vertauscht*/
  > a {
    /*�berschreiben des Templateabstands*/
    grid-column: 2;
    justify-self: center; /*horizontale Zentrierung*/
    align-self: center; /*vertikale Zentrierung*/
    > .article-intro-image {
      display: block;
      margin: 0 !important;
      overflow: hidden !important;
      border: none !important;
      > img {
        max-width: unset;
        width: 70%;
        height: 140px; /*Gr��e, auf die Bilder angeglichen werden sollen*/
        object-fit: cover; /*Beh�lt das Seitenverh�ltnis bei*/
        justify-self: center;
        display: block;
      }
    }
  }
  /*Bezeichner f�r die Kategorieliste auf der Startseite*/
  & .articleBody {
    grid-row: 1;
    grid-column: 1;
  }
  /*Bezeichner f�r die Kategorieliste auf anderen Seiten*/
  & .article-body {
    grid-row: 1;
    grid-column: 1;
  }
}

/*Standardplatzierung f�r Beitragsbilder*/
div.article-full-image {
  text-align: center;
  & img {
    max-height: 400px; /*Gr��e, auf die Bilder angeglichen werden sollen*/
    width: auto;
    object-fit: cover; /*Beh�lt das Seitenverh�ltnis bei*/
  }
}

/*Schriftfarbe der aktiven Hauptseite anpassen*/
span.page-link[aria-current^="true"] {
  color: white !important;
}

/*Buttons mit Pfeilen zum Durchbl�ttern der Hauptbeitr�ge*/
ul.pagination {
  /*Nicht verlinkte Buttons ausblenden*/
  & li.disabled.page-item {
    display: none;
  }
  /*H�he der Buttons*/
  & li.page-item a.page-link {
    min-height: 38px;
  }
  /*Symbole der Buttons*/
  & span.fa-angle-left:after {
    content: "\2039";
  }
  & span.fa-angle-double-left:after {
    content: "\00AB";
  }
  & span.fa-angle-right:after {
    content: "\203A";
  }
  & span.fa-angle-double-right:after {
    content: "\00BB";
  }
}

/**Dokumente Downloadbox*************/
/*Styling der Downloadbox*/
div.inner-wrapper-sticky {
  /* Rahmenlinie des Downloadbereichs */
  top: 0px !important;
  & div.sp-module {
    border: none !important;
  }
}

/*Schriftstyling des Downloadbereichs*/
div.sp-module-content div.mod-custom {
  color: var(--lvk-blue);
  text-decoration: underline;
}

/*�berschrift im Downloadbereich*/
h3.sp-module-title {
  text-align: left;
}

/**�ber uns************************/
/*Zentrierung der Tabellen*/
div.overflow-buffer {
  overflow-x: auto= "";
  & table {
    border-color: var(--border-colors);
    border-width: thick;
    border-style: solid;
    width: 95% !important;
    margin-left: auto;
    margin-right: auto;
    & td {
      vertical-align: middle;
      width: 50% !important;
    }
    & tr:nth-child(even) {
      background-color: #f2f2f2;
    }
  }
}

/*SMV******************/
div.smv {
  display: inline;
  /*Platzierung der Tabelle und �berschrift in der Mitte*/
  & h2 {
    text-align: center;
  }
  & h2#second_heading_smv,
  h2#third_heading_smv {
    padding-top: 50px;
  }
  /*Grid um Titel und Sch�ler zu trennen*/
  & div.pupil {
    display: grid;
    grid-template-columns: auto auto auto;
  }
  /*alle Kindelemente des Gitters zentrieren*/
  & div.pupil > * {
    /*horizontale Zentrierung*/
    text-align: center;
    /*vertikale Zentrierung*/
    align-self: center;
  }
  /*Grid um Wochentage, Titel und LK zu trennen*/
  & div.all_liaison_teachers {
    /*Zeilen pro Wochentag erstellen*/
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    gap: 10px;
    /*Wochentage und Lehrkr�fte unterteilen*/
    & .liaison_teacher_row {
      display: grid;
      grid-template-columns: 30% auto; /*2 Spalten*/
      & .day_of_week {
        display: flex; /*F�r Vertikale Zentrierung*/
        align-items: center; /*F�r Vertikale Zentrierung*/
        color: var(--lvk-red);
        font-weight: bold;
      }
      /*Lehrkraft von Dienstgrad trennen*/
      & .liaison_teacher {
        display: grid;
        grid-template-columns: 50% auto; /*2 Spalten*/
      }
    }
    /*Keine Border zur Zeilen-Unterteilung nach dem letzten Element*/
    & .liaison_teacher_row:not(:last-child) {
      border-bottom: var(--lvk-red) solid 1px; /*Trennlinie zwischen Zeilen*/
      padding-bottom: 10px; /*Abstand zwischen Zeilen vergr��ern*/
    }
  }
}

/*Schulentwicklung******************/
div.qmbs_subcategories {
  /*Alle Bilder in einer Reihe*/
  display: grid;
  justify-content: space-evenly; /*Bildcontainer Verteilen*/
  gap: 15px;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  /*Styling des Figure-Blocks (Bild+Unterschrift)*/
  & figure {
    flex-direction: column; /*Text befindet sich unter dem Bild*/
    align-self: flex-start;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 300px;
    /*Gr��enzuschnitt f�r Bilder*/
    /*= Sondervariante des W�rfelaugenlayouts f�r die QMBS-Seiten*/
    & div.qmbs_cutter {
      width: 150px !important;
      height: 150px !important;
      overflow: hidden !important;
      display: flex; /*notwendiges Attribut f�r justify-content: center*/
      justify-content: center;
      align-self: center; /*Ausrichtung innerhalb der figure*/
      margin: auto;
      margin-top: 15px; /*Abstand, damit das Bild nicht am Beschreibungsrand klebt*/
      margin-bottom: 15px;
      transition: all 0.5s ease-out;
      &:hover {
        transform: scale(1.05);
        transition: all 0.5s ease-in;
      }

      /*Styling der Bilder*/
      & img {
        max-width: unset;
        width: 100%;
        height: 100%; /*Gr��e, auf die Bilder angeglichen werden sollen*/
        object-fit: cover; /*Beh�lt das Seitenverh�ltnis bei*/
      }
    }

    /*Styling der Bildunterschrift*/
    & figcaption {
      margin: 0;
      padding: 5px;
      text-align: center;
      background-color: var(--border-colors);
      color: #000;
      border-radius: 0 0 3px 3px;
      transition: color 0.2s ease-in;
      &:hover {
        color: var(--hover-color);
        transition: color 0.5s ease-out;
      }
    }
  }
}

/*QmbS-Historie*****/
.box {
  display: flex;
  flex-direction: column-reverse;
  padding: 50px 20px;
}

.box-item {
  align-items: center;
  background: #3a7cca;
  border-radius: 4px;
  color: white;
  display: flex;
  flex-grow: 1;
  height: 40px;
  justify-content: center;
  margin-bottom: 2px;
  position: relative;
}

.box-item:before,
.box-item:after {
  border-color: transparent;
  border-style: solid;
  border-width: 10px 20px 10px 0;
  border-radius: 4px;
  content: "";
  height: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
}

.box-item:before {
  top: -1px;
  border-top-color: white;
}

.box-item:after {
  bottom: -9px;
  border-top-color: #3a7cca;
}

.box-item:first-child {
  margin-bottom: 0;
}

.box-item:last-child:before,
.box-item:first-child:after {
  display: none;
}

/*Schulentwicklungstag*********/
#schulentwicklungstag {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-template-rows: auto;
  gap: 16px;
  justify-content: center;
  & > * {
    border: 1px solid black;
    padding: 5px;
  }
}

/**Erasmus*********************************/
/*Standardplatzierung f�r Beitragsbilder*/
div.article-full-image.float-left {
  text-align: left;
  & img {
    max-height: 400px; /*Gr��e, auf die Bilder angeglichen werden sollen*/
    width: auto;
    object-fit: cover; /*Beh�lt das Seitenverh�ltnis bei*/
  }
}

/**Beratung********************************/
/*Rechtsausrichtung des JaS-Logos*/
.floating_container {
  float: right;
}

/*W�rfelaugenlayout f�r Personenbilder und 'Hilfe in Notlagen'*/
div.img_of_colleagues,
div.hilfe_in_notlagen {
  /*Alle Bilder in einer Reihe*/
  display: flex;
  flex-flow: row wrap; /*am Zeilenende umbrechen*/
  justify-content: space-evenly; /*Bildcontainer Verteilen*/
  gap: 20px;
  /*Styling des Figure-Blocks (Bild+Unterschrift)*/
  & figure {
    display: flex;
    flex-shrink: 1;
    flex-direction: column; /*Text befindet sich unter dem Bild*/
    align-self: flex-start;
    border: 1px solid #ccc;
    border-radius: 5px;
    /*Gr��enanpassung f�r Links*/
    & div:has(a) {
      padding: 20px;
      justify-content: center;
      align-self: center; /*Ausrichtung innerhalb der figure*/
      text-align: center;
    }

    & p {
      max-width: 350px;
      text-align: center; /*Zentrieren*/
      padding: 10px;
    }

    /*Gr��enzuschnitt f�r Bilder*/
    & div.img_cutter {
      width: 200px;
      height: 250px;
      overflow: hidden !important;
      display: flex; /*notwendiges Attribut f�r justify-content: center*/
      justify-content: center;
      align-self: center; /*Ausrichtung innerhalb der figure*/
      margin: auto;
      margin-top: 15px; /*Abstand, damit das Bild nicht am Beschreibungsrand klebt*/
      margin-bottom: 15px;

      /*Styling der Bilder*/
      & img {
        max-width: unset;
        width: 80%;
        height: 100%; /*Gr��e, auf die Bilder angeglichen werden sollen*/
        object-fit: cover; /*Beh�lt das Seitenverh�ltnis bei*/
      }
    }

    /*Styling der Bildunterschrift*/
    & figcaption {
      margin: 0;
      padding: 5px;
      text-align: center;
      background-color: var(--border-colors);
      color: #000;
      border-radius: 0 0 3px 3px;
      & p {
        text-align: center;
        font-size: xx-small;
        margin: 0;
      }
      & span {
        font-size: x-large;
      }
    }
  }
}

/*Abgewandelte Bildanordnung beim QmbS-Team*/
div.img_of_colleagues.qmbs_team {
  row-gap: 30px;
  column-gap: 100px;
}

/**Ausbildungsanmeldung************************************************/
div.new_pupil_registration {
  & div {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    & div:is(:not(:first-child)) {
      border-left: 1px solid;
      padding-left: 10px;
    }
    & div {
      display: block;
    }
  }
}

/**Login-Page************************************************/
div.login {
  padding: 50px 0;
}

#login-related-menu {
  display: none;
}

/**footer & Map *******************************************/
/*Platzierung des footer1 als vertikal & horizontal zentriertes Element in der Fu�leiste*/
footer#sp-footer {
  overflow: hidden;
}

.footer1-class {
  height: 90%;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  display: flex;
}

/*Ausrichtung des Map-Modules*/
div.sp-module-content {
  & div {
    & p:has(iframe) {
      display: flex;
      margin: 0;
    }
  }
}

/*Entfernen der Karte und Zentrierung des Footers bei Deaktivierung der Cookies, greift auf js-Code zur�ck*/
div.row:has(div#sp-map[data-alt="necessity"] + div#sp-footer1) {
  align-items: center;
  justify-content: center;
}

/*Sonderregeln f�r kleinere Bildschirme*/
@media (max-width: 1120px) {
  /*Regeln f�r QmbS-Seiten auf kleineren Bildschirmen*/
  div.qmbs_subcategories {
    /*Alle Bilder in einer Reihe*/
    flex-shrink: 1;
    display: flex;
    flex-flow: row wrap; /*am Zeilenende umbrechen*/
    justify-content: space-evenly; /*Bildcontainer �ber Bildschirmbreite verteilen solange noch m�glich*/
    gap: 15px;
    /*verringere Maximalgr��e der figures f�r das Mobilelayout*/
    & figure {
      max-width: 225px;
      /*Gr��enzuschnitt f�r Bilder verringern*/
      & div.qmbs_cutter {
        width: 120px !important;
        height: 120px !important;
      }
    }
  }
  /* Barrierefreiheitseinstellungen */
  body {
    & i._access-icon.material-icons._access {
      background-color: var(--lvk-blue) !important;
      top: 2.5% !important;
      left: 93% !important;
    }
    & div._access-menu {
      left: 0% !important;
      top: 1vh !important;
      min-width: 100% !important;
    }
  }
}

@media (max-width: 992px) {
  /*Standardmen� in der Mobilen Ansicht ausblenden*/
  section#sp-title {
    display: none;
  }

  /*Downloadbox �berlappt Elemente*/
  div.sp-column.downloads {
    & div.inner-wrapper-sticky {
      position: relative !important;
      top: initial !important;
      left: initial !important;
    }
  }

  #schulentwicklungstag {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    gap: 16px;
    justify-content: center;
    & > * {
      border: 1px solid black;
      padding: 5px;
    }
  }

  /**Anmeldung***/
  div.new_pupil_registration {
    & div {
      grid-template-columns: auto;
      grid-template-rows: auto auto;
      & div:is(:not(:first-child)) {
        border-top: 1px solid;
        border-left: none;
      }
      & div {
        display: block;
        padding-bottom: 15px;
      }
    }
  }

  /*Deaktiviert die Darstellung des Mobile-Menus von Joomla (slide-out funktioniert nicht mehr)*/
  div.offcanvas-menu {
    display: none;
  }

  /*Styling des Bereichs um das Burger-Men� herum*/
  /* Links im Standardmen� unsichtbar  */
  .navbar {
    z-index: 1;
    & a {
      display: none;
    }
  }

  #mobile-menu {
    display: initial;
    overflow: scroll;
  }

  /* Design des Burger-Menu zum start des Slide-In Effekts f�r das Offcanva*/
  #burger-menu {
    align-self: center;
    display: block; /* Macht das Burger-Men� sichtbar */
    cursor: pointer; /* Zeigt, dass es klickbar ist */
    padding: 10px; /* Innenabstand f�r bessere Klickfl�che */
  }

  #burger-menu div {
    display: flex; /* Flexbox f�r die drei Linien */
    flex-direction: column; /* Vertikale Anordnung der Linien */
    justify-content: space-between; /* Abstand zwischen den Linien */
    height: 20px; /* H�he des gesamten Burger-Men�s */
  }

  #burger-menu span {
    display: block; /* Macht jede Linie sichtbar */
    width: 30px; /* Breite der Linien */
    height: 3px; /* H�he der Linien */
    background-color: white; /* Farbe der Linien */
    border-radius: 2px; /* Abgerundete Ecken f�r einen weicheren Look */
    transition: all 0.3s ease; /* Animationseffekt f�r Hover oder Aktivierung */
  }

  #burger-menu:hover span {
    background-color: #ccc; /* Farbe �ndern beim Hover */
  }

  /* ersetzt das urspr�ngliche Symbol (wird nicht korrekt gerendert), zum Ausklappen der Untermen�s -- deaktiv --*/
  /* .menu-toggler:after {
    content: "+" !important;
  } */

  /*vergr��ern der Unicode-Symbole*/
  /* li { 
    /*diese Elemente sind die eigentlichen Links eines Abschnitts im ausgeklappten Untermenu
    /* a[href*="search-and-find.html"] {
      font-size: 0 !important;
      &::after {
        font-size: xx-large;
      }
    }
    a[href*="log-in.html"] {
      font-size: 0 !important;
      &::after {
        font-size: xx-large;
      }
    }
  } */

  /*Abstand vor dem Logo leicht vergr��erster Abstand vor dem Logo damit Barrierefreiheit nichts �berdeckt*/
  .top-spacer {
    height: 50px;
  }
  /*Farbverlauf f�r mobile muss erneut gesetzt werden, da das Desktopelement ausgeblendet wird (display:none)*/
  #shared-paths,
  svg {
    /* F�llfarbe der Linie im Logo */
    & .logo_line {
      fill: url(#gradient_filling_mobile);
    }
    /*F�llfarbe der Wellen im Logo*/
    & .logo_waves {
      fill: var(--lvk-blue);
    } /* F�llfarbe der Buchstaben im Logo */

    & .logo_letters {
      fill: black;
    }
  }

  /* zur Logo Skalierung */
  /*Einblenden des Desktoplogo-Containers*/
  .desktop-svg-container {
    display: none;
  }
  /*Einblenden des Mobilelogo-Containers*/
  .mobile-svg-container {
    display: unset;
  }

  /* CSS-Klasse Einleitungsbild der Beitr�ge bei kleinen Bildschirmen*/
  .article-intro-image {
    width: 35% !important; /*Breite ist hier gr��er*/
    & a {
      & img {
        height: 140px; /*Gr��e, auf die Bilder angeglichen werden sollen (steigt bei Mobile)*/
      }
    }
  }

  /*footer1 wird bei kleineren Bildschirmen zentriert unterhalb der Karte platziert*/
  .footer1-class {
    height: 90%;
    width: 100%;
    text-align: center;
    display: block;
  }

  /*map wird von einer linksb�ndigen Darstellung in die Mitte geschoben*/
  .map-class {
    padding-left: 18%;
    width: auto;
  }

  /* Barrierefreiheitseinstellungen */
  body {
    & i._access-icon.material-icons._access {
      background-color: var(--lvk-blue) !important;
      top: 2.5% !important;
      left: 80% !important;
    }
    & div._access-menu {
      left: 0% !important;
      top: 1vh !important;
      min-width: 100% !important;
    }
  }
}

/* Sonderregeln f�r kleinste Bildschirme */
@media (max-width: 600px) {
  /* Barrierefreiheitseinstellungen */
  body {
    & i._access-icon.material-icons._access {
      background-color: var(--lvk-blue) !important;
      top: 2.5% !important;
      left: 80% !important;
    }
    & div._access-menu {
      left: 0% !important;
      top: 1vh !important;
      min-width: 100% !important;
    }
  }
  /* CSS-Klasse Einleitungsbild der Beitr�ge*/
  .article-intro-image {
    display: none !important;
  }

  /*Zentrierung des JaS-Logos f�r Mobile*/
  .floating_container {
    justify-items: center;
    float: unset;
  }

  div.img_of_colleagues,
  div.hilfe_in_notlagen {
    /*Styling des Figure-Blocks (Bild+Unterschrift)*/
    & figure {
      /*Gr��enanpassung f�r Links*/
      & div:has(a) {
        max-width: 300px;
      }
    }
  }

  /*Sch�lersprecher wird als 1. Element angezeigt*/
  div.smv {
    width: 100%;
    & div.pupil {
      display: grid;
      grid-template-columns: 100%;
      grid-template-rows: 30% 30% 30%;
    }
    & div.pupil > :nth-child(2) {
      grid-row: 1;
    }
    & div.all_liaison_teachers {
      /*Zeilen pro Wochentag erstellen*/
      display: grid;
      grid-template-rows: auto auto auto auto auto;
      /*Wochentage und Lehrkr�fte unterteilen*/
      & .liaison_teacher_row {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto auto;
        /*Wochentag*/
        & .day_of_week {
          justify-content: center; /*horizontal zentriert*/
          align-items: center; /*vertikal zentriert*/
        }
        /*Lehrkr�fte auf 2 Zeilen aufteilen*/
        & .liaison_teachers_weekday {
          display: grid;
          grid-template-columns: 100%;
          grid-template-rows: auto auto;
          /*Name und Dienstgrad trennen*/
          & .liaison_teacher {
            display: grid;
            grid-template-columns: 45% 55%;
            justify-items: center; /*horizontal zentriert*/
            align-items: center; /*vertikal zentriert*/
            padding: 0 20px;
            & .liaison_teacher_rank {
              text-align: left;
            }
            & .liaison_teacher_name {
              text-align: right;
            }
          }
        }
      }
    }
  }
}

/*Zweitrangig: Jahresabh�ngige Animationen*****/
div.season {
  & .snow-wrapper {
    /*season != winter -> display == none else inline-flex*/
    display: none;
    position: fixed; /*fixed -> element moves along while scrolling || absolute -> element is placed at absolute top border*/
    justify-content: space-between;
    top: -50px; /*begin animation afar from screen*/
    left: 0;
    width: 100%;
    height: 100vh; /*Platzhalter: Dynamische H�he wird beim Scrollen per JS angepasst*/
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
    & .snow {
      /*retrieve display from wrapper class*/
      display: inherit;
      font-size: 120%;

      /*visible*/
      background: none;
      border-radius: 50%;

      /*animation*/
      animation: snowing-animation ease-out 15s infinite;

      /*content*/
      &:after {
        content: "\2744 ";
        color: lightgray;
        -webkit-text-stroke-color: silver;
        -webkit-text-stroke-width: 0.5px;
      }
      /*blur every second, fourth and tenth child*/
      &:nth-child(2n) {
        filter: blur(1px);
        font-size: 90%;
      }
      &:nth-child(4n) {
        filter: blur(2px);
        font-size: 105%;
      }
      &:nth-child(10n) {
        filter: blur(4px);
        font-size: 110%;
      }
      /*falling speed*/
      &:nth-child(even) {
        animation-duration: 35s;
        animation-delay: 1s;
      }
      &:nth-child(odd) {
        animation-duration: 20s;
        animation-delay: 7s;
      }
      &:nth-child(3n) {
        animation-duration: 21s;
        animation-delay: 2s;
      }
      &:nth-child(4n) {
        animation-duration: 22s;
        animation-delay: 2s;
      }
      &:nth-child(5n) {
        animation-duration: 23s;
        animation-delay: 4s;
      }
      &:nth-child(6n) {
        animation-duration: 24s;
        animation-delay: 3s;
      }
      &:nth-child(7n) {
        animation-duration: 25s;
        animation-delay: 6s;
      }
      &:nth-child(8n) {
        animation-duration: 26s;
        animation-delay: 8s;
      }
      &:nth-child(9n) {
        animation-duration: 27s;
      }
      &:nth-child(10n) {
        animation-duration: 28s;
        animation-delay: 10s;
      }
      &:nth-child(11n) {
        animation-duration: 29s;
        animation-delay: 9s;
      }
      &:nth-child(12n) {
        animation-duration: 30s;
        animation-delay: 7s;
      }
      &:nth-child(13n) {
        animation-duration: 31s;
        animation-delay: 5s;
      }
      &:nth-child(14n) {
        animation-duration: 32s;
        animation-delay: 5s;
      }
      &:nth-child(15n) {
        animation-duration: 33s;
        animation-delay: 7s;
      }
      &:nth-child(16n) {
        animation-duration: 34s;
        animation-delay: 9s;
      }
      &:nth-child(17n) {
        animation-duration: 35s;
        animation-delay: 11s;
      }
      &:nth-child(18n) {
        animation-duration: 34s;
        animation-delay: 13s;
      }
    }
  }
}

@keyframes snowing-animation {
  0% {
    transform: translateY(0vh);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}