@charset "utf-8";
/* ----- GENERATED FILE! Do NOT EDIT directly! -----
   Always edit and re-compile original {less}-file!
   ------------------------------------------------- 
   (c) Copyright FernUniversitaet in Hagen, ZDI
 */
/* 
    Document   : multicolGroups
    Created on : 21.07.2015
    Author     : immo
    Description: Styles für Gruppen/Boxen, die bei breiteren Fenstern auf mehrere Spalten umbrechen können.
*/
/*
Notiz: Derzeit nicht mit Flexboxes umgesetzt, da diese in vertikaler Main-Achse eine Höhenbeschränkung des umgebenden Body-Elements erwarten und insgesamt
in die Breite überlaufen können (beim derzeiten auf horizontales Scrollen ausgelegten Dokument dagegen nie in mehrere Spalten wrappen), 
während bei horizontaler Main Axis die Boxen unterschiedlich breit werden und die Seitenbreite nicht ausfüllen.
Statt dessen ein Multicolumn-Ansatz mit Umbruchs-Constraints:

Update: Je nach Anwendungsfall können doch Flexboxen sinnvoll(er) sein, daher werden hier nun 
a) unter div.multicol unverändert echte Multicolumn-Groups angeboten, die wirklich wie zweispaltiger Zeitungstext auch den Fluss in Spalten anordnen
   (Gruppe 2 unterhalb von Gruppe 1, irgendwann Umbruch in zweite Spalte, keinerlei Zeilengrid)
b) unter div.flexmulticolgrid werden Gruppen zeilenweise in zwei Spalten (eher ein Grid) angeordnet. Die zwei Gruppen einer Zeile
   bekommen dabei dieselbe Höhe.
*/
:is(.multicol, .flexmulticolgrid) .group {
  --headerColor: #004c97;
  border-radius: 0.5em;
  margin: 0 0 1.5em 0;
  padding: 0 0 0.5em 0;
  background-color: #e4e4e4;
}
:is(.multicol, .flexmulticolgrid) .group.feuGreen {
  --headerColor: #336600;
}
:is(.multicol, .flexmulticolgrid) .group.feuRed {
  --headerColor: #993333;
}
:is(.multicol, .flexmulticolgrid) .group.withCenteredFooter {
  display: flex;
  flex-flow: column;
  gap: 1em;
}
:is(.multicol, .flexmulticolgrid) .group.withCenteredFooter > * {
  margin-top: 0;
  margin-bottom: 0;
}
:is(.multicol, .flexmulticolgrid) .group.withCenteredFooter > p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
:is(.multicol, .flexmulticolgrid) .group.withCenteredFooter > :nth-last-child(2) {
  flex-grow: 1;
}
:is(.multicol, .flexmulticolgrid) .group.withCenteredFooter > :last-child {
  text-align: center;
  margin-bottom: 1em;
  margin-top: 0.5em;
}
@media (prefers-color-scheme: dark) {
  body.supportsDarkMode:not(.disableDarkMode) :is(.multicol, .flexmulticolgrid) .group {
    background-color: #333;
  }
}
:is(.multicol, .flexmulticolgrid) .group :is(h2, h3, h4, h5) {
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  background-color: var(--headerColor);
  color: white;
  margin: 0;
  padding: 0.5em 1em;
  font-size: 1.1em;
}
:is(.multicol, .flexmulticolgrid) .group > * {
  padding: 0.3em 1em;
}
:is(.multicol, .flexmulticolgrid) .group > ul,
:is(.multicol, .flexmulticolgrid) .group > ol {
  padding-left: 2em;
  margin: 0.3em !important;
}
:is(.multicol, .flexmulticolgrid) .group hr {
  margin: 0;
}
:is(.multicol, .flexmulticolgrid) .group li {
  margin: 0.4em 0;
}
@media (pointer: coarse) {
  :is(.multicol, .flexmulticolgrid) .group li {
    margin: 1em 0;
  }
}
@media screen and (min-width: 55em) {
  div.multicol {
    -moz-column-count: 4;
    -moz-column-width: 25em;
    -webkit-columns: 4 25em;
    columns: 4 25em;
    -webkit-column-gap: 2em;
    -moz-column-gap: 2em;
    column-gap: 2em;
  }
  div.multicol .group {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    break-inside: avoid-column;
    display: inline-block;
    width: 100%;
  }
}
div.flexmulticolgrid {
  display: flex;
  flex-flow: row wrap;
  gap: 2em;
}
div.flexmulticolgrid .group {
  flex-basis: 25em;
  flex-grow: 1;
}