@charset "UTF-8";
/* ===================================================================
   387qm / BBK Kassel – Custom CSS
   Stand: 2026-08-10

   Aufgeraeumt & neu strukturiert am 2026-08-10:
   - Inhaltlich unveraendert, nur neu sortiert/gruppiert (gleiches
     Erscheinungsbild wie vorher).
   - Tippfehler behoben: "fotn-weight" -> "font-weight" (Sticky-Menue),
     "margin-topo" -> "margin-top" (Suchfeld). Beide Regeln griffen
     vorher NICHT, da der Browser ungueltige Property-Namen ignoriert.
   - Bug behoben: .padding-bottom-0 / .margin-bottom-0 setzten faelsch-
     licherweise 1rem statt 0 (Namensgebung vs. Wert widersprachen sich).
   - Zusammengehoerige Logo-/Sticky-Header-Regeln (vorher an 4 Stellen
     verteilt) an einer Stelle gebuendelt.
   - Wiederkehrende Markenfarben als CSS-Variablen ausgelagert (siehe
     :root: --brand-primary, --brand-secondary), Verwendungsstellen
     darauf umgestellt.
   - Alle auskommentierten Alt-Bloecke ans Dateiende in einen eigenen
     "Archiv"-Abschnitt verschoben, statt verstreut im Live-Code zu
     stehen. Nichts geloescht, nur sortiert.

   Update 2026-08-10 (2):
   - --brand-primary: #e0151d -> #000 (schwarz)
   - --brand-secondary: #6d1717 -> #999999 (grau)
   - h3-Farbe nutzt jetzt --brand-secondary (#999999) statt --brand-primary
   - Top-Bar-Hintergrund fest auf #FFF (nicht mehr ueber die Variable),
     Trennlinie/Submenue-Rahmen von Weiss auf #ccc bzw. Pfeile auf #000
     angepasst, da sie sonst auf dem jetzt weissen Hintergrund unsichtbar
     waeren.
   - Neue Top-Bar-spezifische Link-Farben (.top-bar .menu a): schwarz,
     bei :hover/aktiv grau (--brand-secondary). Gilt auch fuer das
     Dropdown-Submenue der Top-Bar (verschachtelt, traegt ebenfalls die
     Klasse "menu"). Andere Menues (mobil, Footer, Sidebar) bewusst
     unangetastet gelassen.
   - Buttons (.button, a.button, .btnredbox) abgerundet via neuer
     Variable --button-radius (999px, "Pillen"-Form). Bei Bedarf in
     :root anpassen, z.B. auf 8px fuer nur leicht abgerundete Ecken.

   Update 2026-08-21 (Duplikate bereinigt):
   - Drei verstreute .card-Regelbloecke (Abschnitt 9) zu einem
     zusammengefuehrt, "Versuch"/"Versuch Ende"-Debug-Kommentare entfernt.
   - li.show-for-large .foundlogo war ZWEIMAL definiert (margin-top: 23px
     und 16px); die erste, wirkungslose Regel entfernt, 16px bleibt aktiv
     (war schon vorher der tatsaechlich sichtbare Wert).
   - .margin-bottom-3 war ZWEIMAL definiert, einmal in den Utility-Klassen
     (3rem, Abschnitt 4) und einmal in Abschnitt 7 (3em) – Konflikt, da
     dieselbe Klasse zwei unterschiedliche Werte hatte. Abschnitt-7-Regel
     entfernt, die Utility-Klasse (3rem) ist jetzt die einzige Quelle.
     Bitte pruefen, ob 3em vs. 3rem irgendwo sichtbar einen Unterschied
     macht (bei Root-Font-Size 16px sind beide Werte identisch, in
     verschachtelten Kontexten mit abweichender font-size koennte sich
     das unterscheiden).
   - Redundantes .top-bar-right { margin-right: 1em; } innerhalb einer
     Media Query entfernt (war exakt identisch zur globalen Regel).

   Inhaltsverzeichnis:
   1. Variablen
   2. Fonts
   3. Basis / Typografie
   4. Utility-Klassen (Padding/Margin)
   5. Links & Buttons
   6. Menü / Top-Bar / Logo / Sticky-Header
   7. Layout-Grundgerüst (Rows, Hero, Grid)
   8. Parallax- / Hintergrund-Sektionen
   9. Card / Greybg / Border
   10. Footer
   11. Vollbild-Module (Slideshow, Video)
   12. Newsflash
   13. Mitglieder / Künstler
   14. Beratungsfelder / Accordion
   15. Besucherinfos
   16. Kontaktseite
   17. Suche
   18. Linke Sidebar / Modul
   19. Archiv
   20. blog featured Startseite Anppassungen
   21. Anpassungen für lazy Load
   =================================================================== */


/* ------------------------- 1. Variablen ------------------------- */

:root {
  --brand-primary: #000;
  --brand-secondary: #999999;
  --button-radius: 999px;
}


/* ------------------------- 2. Fonts ------------------------- */

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'),
       url('../fonts/roboto-v19-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/roboto-v19-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-300italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
       url('../fonts/roboto-v19-latin-300italic.woff2') format('woff2'),
       url('../fonts/roboto-v19-latin-300italic.woff') format('woff');
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v19-latin-regular.woff2') format('woff2'),
       url('../fonts/roboto-v19-latin-regular.woff') format('woff');
}

/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'),
       url('../fonts/roboto-v19-latin-italic.woff2') format('woff2'),
       url('../fonts/roboto-v19-latin-italic.woff') format('woff');
}


/* ------------------------- 3. Basis / Typografie ------------------------- */

body {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
}

p {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-size: 1.25rem;
}

strong, .bold {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
}

h1 {
  font-family: 'Roboto';
  font-style: normal;
  font-size: 2.75rem;
  font-weight: 400;
  color: var(--brand-primary);
  margin-bottom: 0.5em;
}

h1 a:link, h1 a:visited, p.h1 a:link, p.h1 a:visited {
  color: var(--brand-primary);
}

h1 a:hover, p.h1 a:hover {
  color: #000;
}

h2 {
  font-family: 'Roboto';
  font-style: normal;
  font-size: 1.875rem;
  font-weight: 300;
  color: #000;
  margin-bottom: 0.75em;
}

h3 {
  font-family: 'Roboto';
  font-style: normal;
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--brand-secondary) !important;
  margin: 1.25em 0 0.5em 0;
}

h3.newsflash-title {
  margin: 0em 0 0.5em 0;
}

@media screen and (min-width: 40em) {
  h3 {
    font-size: 1.875rem;
    font-weight: 300;
  }
}


/* --------------- 4. Utility-Klassen (Padding/Margin) --------------- */

/* Padding (alle Seiten) */
.padding-0 { padding: 0 !important; }
.padding-1 { padding: 1rem !important; }
.padding-2 { padding: 2rem !important; }
.padding-3 { padding: 3rem !important; }

/* Padding Top */
.padding-top-0 { padding-top: 0rem !important; }
.padding-top-1 { padding-top: 1rem !important; }
.padding-top-2 { padding-top: 2rem !important; }
.padding-top-3 { padding-top: 3rem !important; }

/* Padding Bottom */
.padding-bottom-0 { padding-bottom: 0rem !important; } /* war faelschlich 1rem */
.padding-bottom-1 { padding-bottom: 1rem !important; }
.padding-bottom-2 { padding-bottom: 2rem !important; }
.padding-bottom-3 { padding-bottom: 3rem !important; }

/* Padding Left */
.padding-left-0 { padding-left: 0rem !important; }
.padding-left-1 { padding-left: 1rem !important; }
.padding-left-2 { padding-left: 2rem !important; }
.padding-left-3 { padding-left: 3rem !important; }

/* Padding Right */
.padding-right-0 { padding-right: 0rem !important; }
.padding-right-1 { padding-right: 1rem !important; }
.padding-right-2 { padding-right: 2rem !important; }
.padding-right-3 { padding-right: 3rem !important; }

/* Padding Links/Rechts (horizontal) */
.padding-horizontal-0 { padding: 0rem 0rem !important; }
.padding-horizontal-1 { padding: 0rem 1rem !important; }
.padding-horizontal-2 { padding: 0rem 2rem !important; }
.padding-horizontal-3 { padding: 0rem 3rem !important; }

/* Padding Oben/Unten (vertikal) */
.padding-vertical-0 { padding: 0rem 0rem !important; }
.padding-vertical-1 { padding: 1rem 0rem !important; }
.padding-vertical-2 { padding: 2rem 0rem !important; }
.padding-vertical-3 { padding: 3rem 0rem !important; }

/* Margin (alle Seiten) */
.margin-0 { margin: 0 !important; }
.margin-1 { margin: 1rem !important; }
.margin-2 { margin: 2rem !important; }
.margin-3 { margin: 3rem !important; }

/* Margin Top */
.margin-top-0 { margin-top: 0rem !important; }
.margin-top-1 { margin-top: 1rem !important; }
.margin-top-2 { margin-top: 2rem !important; }
.margin-top-3 { margin-top: 3rem !important; }

/* Margin Bottom */
.margin-bottom-0 { margin-bottom: 0rem !important; } /* war faelschlich 1rem */
.margin-bottom-1 { margin-bottom: 1rem !important; }
.margin-bottom-2 { margin-bottom: 2rem !important; }
.margin-bottom-3 { margin-bottom: 3rem !important; }

/* Margin Left */
.margin-left-0 { margin-left: 0rem !important; }
.margin-left-1 { margin-left: 1rem !important; }
.margin-left-2 { margin-left: 2rem !important; }
.margin-left-3 { margin-left: 3rem !important; }

/* Margin Right */
.margin-right-0 { margin-right: 0rem !important; }
.margin-right-1 { margin-right: 1rem !important; }
.margin-right-2 { margin-right: 2rem !important; }
.margin-right-3 { margin-right: 3rem !important; }

/* Margin Links/Rechts (horizontal) */
.margin-horizontal-0 { margin: 0rem 0rem !important; }
.margin-horizontal-1 { margin: 1rem 0rem !important; }
.margin-horizontal-2 { margin: 2rem 0rem !important; }
.margin-horizontal-3 { margin: 3rem 0rem !important; }

/* Margin Oben/Unten (vertikal) */
.margin-vertical-0 { margin: 0rem 0rem !important; }
.margin-vertical-1 { margin: 1rem 0rem !important; }
.margin-vertical-2 { margin: 2rem 0rem !important; }
.margin-vertical-3 { margin: 3rem 0rem !important; }

.margin-bottom { margin-bottom: 6em; }


/* ------------------------- 5. Links & Buttons ------------------------- */

a { color: #000; }
a:link, a:visited { color: #000; }
a:hover { color: var(--brand-primary); }
a:active { color: #000; }

a.button, .button {
  background-color: var(--brand-secondary);
  color: #FFF;
  font-size: 1.25rem;
  font-weight: 400;
  margin: 1.25em 0;
  border-radius: var(--button-radius);
}

a.button:hover, .button:hover {
  background-color: var(--brand-primary);
  color: #FFF;
}

div.button.partner { margin: 2em 0 0 0; }
div.button.partner a { color: #FFF; }
div.button.partner a:hover, div.button.partner a:focus { color: #FFF; }

.btnredbox {
  display: block;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  background-color: var(--brand-primary);
  color: #FFF;
  font-size: 1.25rem;
  font-weight: 400;
  padding: 0.6em 1em;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
}

/* Artikel-Inhalt (Links im Fließtext) */
.article-body a {
  color: var(--brand-primary);
  font-weight: bold;
}
.article-body a:link, .article-body a:visited {
  color: var(--brand-primary);
  font-weight: bold;
}
.article-body a:hover { color: #000; font-weight: bold; }
.article-body a:active { color: #000; }
.article-body a.button:link, .article-body a.button:visited {
  color: #FFF;
  font-weight: normal;
}
.article-body ul {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-size: 1.25rem;
}

figcaption {
  margin: 0.5em 0 0.5em 1.125em;
  font-weight: 400;
  font-size: 1rem;
  color: #888;
}

.card figcaption {
  font-size: 0.875rem;
}

.com-content-article.item-page figcaption {
  margin: 0.5em 0 2em 1.125em;
  font-weight: 400;
  font-size: 1rem;
  color: #888;
  text-align: right;
}

/* Orbit Slideshow */
.orbit-caption {
  position: static;
  width: 100%;
  padding: 1rem;
  background-color: #FFF;
  color: #888;
  text-align: right;
  margin: 0;
}

.year {
  line-height: 1.5;
  color:#666;
  font-size: 1.25rem;
  margin-top: 0.575em;
  margin-right:1em;
}


/* ------------- 6. Menü / Top-Bar / Logo / Sticky-Header ------------- */

.menu a, .menu a:link, .menu a:visited {
  line-height: 1.5;
  color: #FFF;
  font-size: 1.25rem;
  font-weight: 400;
}
.menu a:hover { color: #000; }
.menu .active > a { color: #000; background: transparent; }
.menu .is-active > a { background: #FFF; color: var(--brand-primary); }

.dropdown.menu > li.is-active > a { background: transparent; color: #000; }
.dropdown.menu > li.is-dropdown-submenu-parent > a::after { border-color: #999999 transparent transparent; }
.dropdown.menu .is-active > a { color: var(--brand-secondary); }

.is-accordion-submenu-parent > a::after { border-color: #dbdbdb transparent transparent; }

.is-dropdown-submenu { border: 1px solid #ccc; background: #FFF; }
.is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a::after { border-color: transparent #000 transparent transparent; }
.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a::after { border-color: transparent transparent transparent #000; }

/* Top-Bar-Links (Hauptmenü + Dropdown-Submenü, da das Submenü ebenfalls
   die Klasse "menu" trägt und im DOM innerhalb der .top-bar verschachtelt
   liegt) – bewusst hier statt in der generischen .menu-Regel weiter oben,
   damit andere Menüs (mobiles Menü, Footer, Sidebar) unberührt bleiben. */
.top-bar .menu a,
.top-bar .menu a:link,
.top-bar .menu a:visited {
  color: var(--brand-secondary);
}

.top-bar .menu a:hover,
.top-bar .menu .active > a,
.top-bar .menu .is-active > a {
  color: var(--brand-primary);
  background: transparent;
}

/* Top-Bar Grundfarben */
.sticky.is-anchored { z-index: 5; }

.show-for-large.sticky-container, .top-bar, .top-bar ul { background-color: #FFF; }

.top-bar-right { margin-right: 1em; }

.title-bar.hide-for-medium { margin-bottom: 0em; }

/* Logo (großer Header) */
.foundlogobox { padding: 0 !important; margin: 0; }
li.foundlogobox a { padding: 0.7em 1em 0.7em 0.1875em !important; }
.foundlogo { margin-left: 0; }

.title-bar .foundlogo {
  width: 80px;
  height: auto;
  max-width: 80px;
  margin-top: 6px;
}

/* Logo-Claim neben dem Logo */
.logo-claim {
  display: none;
  color: #FFF;
  font-size: 1.875rem;
  font-weight: 400;
  margin-top: 1.125em;
}

@media screen and (min-width: 64.0625em) {
  .logo-claim { display: inherit; }
}

.claimtext p {
  font-size: 1rem;
  font-weight: 400;
  margin-top: 0.5em;
}

/* Sticky-Logo (kleines Logo, nur sichtbar wenn Header "stuck" ist bzw. auf mittleren Screens) */
div.logo-sticky { display: none; }

@media screen and (min-width: 40em) and (max-width: 45em) {
  div.logo-sticky { display: inherit; }
  li.menu-text.foundlogobox { display: none; }
}

/* Zustand: Header ist beim Scrollen "gestuckt" (sticky aktiv) */
div.sticky.is-at-top.is-stuck {
  border-bottom: 1px solid #000;
  background: #FFF;
  opacity: 0.8;
}

div.sticky.is-at-top.is-stuck .top-bar,
div.sticky.is-at-top.is-stuck .top-bar ul {
  background-color: #FFF;
}

div.sticky.is-at-top.is-stuck .top-bar-right { margin: 1em; }
div.sticky.is-at-top.is-stuck li.menu-text .logo-claim { display: none; }
div.sticky.is-at-top.is-stuck li.menu-text a img.foundlogo { display: none !important; }
div.sticky.is-at-top.is-stuck li.menu-text div.logo-sticky { display: inherit; }
div.sticky.is-at-top.is-stuck .top-bar.show-for-medium .show-for-medium-only { display: none; }

div.sticky.is-at-top.is-stuck .menu a,
div.sticky.is-at-top.is-stuck .menu a:link,
div.sticky.is-at-top.is-stuck .menu a:visited {
  line-height: 1.5;
  color: #888888;
  font-size: 1.25rem;
  font-weight: 400; /* war "fotn-weight" (Tippfehler) und griff dadurch vorher gar nicht */
}

div.sticky.is-at-top.is-stuck .menu a:hover,
div.sticky.is-at-top.is-stuck .menu .active > a,
div.sticky.is-at-top.is-stuck .menu .is-active > a 
{ color:#333333; }

/* Logo groß (SVG, ersetzt frühere PNG-Logos) */
li.show-for-large .foundlogo {
  width: 170px;
  height: auto;
  max-width: 170px;
  margin-top: 16px;
}

/* Mobile Titelleiste + Off-Canvas-/Accordion-Menü */
.title-bar-title { display: none; }

.title-bar {
  padding: 0.8rem;
  background: #FFFFFF;
  color: var(--brand-secondary);
}

.menu-icon::after {
  background: var(--brand-secondary);
  box-shadow: 0 7px 0 var(--brand-secondary), 0 14px 0 var(--brand-secondary);
}

.menu-icon:hover::after {
  background: var(--brand-primary);
  box-shadow: 0 7px 0 var(--brand-primary), 0 14px 0 var(--brand-primary);
}

#found-mobile-menu .menu a, #found-mobile-menu .menu a:link, #found-mobile-menu .menu a:visited { color: #000; }
#found-mobile-menu .menu a:hover { color: var(--brand-primary); }
#found-mobile-menu .menu .active > a { color: #000; }

ul.nav.vertical.medium-horizontal.menu.show-for-small-only li a { padding: 0.5rem 0rem; }




/* --------------- 7. Layout-Grundgerüst (Rows, Hero, Grid) --------------- */

.grid-container { max-width: 90em; }

.hero { background-color: #FFF; }

.mainrow { margin-top: 3em; }

.aktuelles-und-vorschau .mainrow, .mainrow .rueckblick, .medien .mainrow { min-height: 50em; }

.above-row {
  padding: 0.25em 0 3em 0;
  background-color: #FFF;
  margin: 3em 0em 3em 0em;
}

.below-content { padding: 2.5em 0; }

.ausstellungskataloge .below-content, .pressespiegel .below-content, .kuenstler-innen .below-content { padding: 0 0 2.5em 0; }

section.myrow { max-width: 100%; }


/* --------------- 8. Parallax- / Hintergrund-Sektionen --------------- */

.above-content-two-grey {
  margin: 3em 0;
  background-color: #efefef;
  padding: 6em 0 4em 0;
}

.above-content-four-grey {
  height: 600px;
  background-image: url(../images/parallax-2.jpg);
  background-position: top center;
  background-attachment: scroll;
  background-color: #FFF;
}

.above-content-four-grey::after { content: "Arno Siggemann"; }

@media (min-width: 1025px) {
  .above-content-four-grey {
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
  }
}

.above-content-five-grey .grid-container { max-width: 100%; }

.above-content-five-grey .grid-container p.caption.parallax {
  font-weight: 400;
  font-size: 1rem;
  color: #888;
  margin-top: 1em;
}

.above-content-three-white {
  padding: 3em 0 0 0;
  background-color: #FFF;
}

.mygrey, .contact-form { background-color: #FFF; }


/* --------------- 9. Card / Greybg / Border --------------- */

.greybg { margin-bottom: 2em; }
.greybg a { display: block; width: 100%; }
.greybg a p { background-color: #efefef; padding: 1em 0; }

.border-bottom { border-bottom: 1px dotted #999; }

.item-image-intro { margin-bottom: 2em; }

.card {
  position: relative; /* WICHTIG: ohne das positioniert sich der Overlay-Link relativ zur ganzen Seite statt zur Karte! */
  display: flex;
  flex-direction: column;
  margin-bottom: 1.875em;
}

.card:hover {
  cursor: pointer;
  -webkit-box-shadow: 0px -1px 10px 0px rgba(50, 50, 50, 0.37);
  -moz-box-shadow: 0px -1px 10px 0px rgba(50, 50, 50, 0.37);
  box-shadow: 0px -1px 10px 0px rgba(50, 50, 50, 0.37);
}

.card .item-image-intro { margin-bottom: 0em; }
.card p.podcastheading { font-size: 1rem; }
.card .card-section p { font-size: 1rem; font-weight: 400; }

/* Ganze Karte klickbar machen (Stretched-Link-Technik), zwei Varianten
   je nach Template im Einsatz:
   - .card-stretched-link: eigenes, unsichtbares <a> als Overlay
     (z.B. blog_item.php)
   - .stretched-link::after: Pseudo-Element auf einem normalen Link
     innerhalb der Karte (z.B. Referenz-Grid #ref-1) */
.card-stretched-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.stretched-link::after {
  position: absolute;
  content: "";
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; als Fallback für ältere Browser */
  z-index: 1;
}

/* Titel-Link, Weiterlesen-Button und Jahres-Badge trotz Overlay
   eigenständig klickbar/fokussierbar halten */
.card-title-wrap a,
.card .readmore a,
.card-year-badge {
  position: relative;
  z-index: 2;
}

/* Card-Innenlayout: gleich hohe Karten per Flexbox statt per JS-Equalizer,
   Beschreibungstext auf feste Zeilenzahl gekappt, Weiterlesen-Button
   sitzt dank margin-top: auto immer bündig unten */
.item-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.card-title-wrap {
  flex: 0 0 auto;
}

.card-description {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  min-height: calc(4 * 1.5em);
}

.readmore {
  margin-top: auto;
}


/* ------------------------- 10. Footer ------------------------- */

.bottom-row {
  margin-top: 3em;
  background-color: #efefef;
  padding: 3em 0;
}

.start .bottom-row { margin-top: 0em; }

.bottom-row h3 {
  font-size: 1.5em;
  margin-top: 0.25em;
  color: #FFF;
  font-weight: 400;
}

h5.footerheader {
  color: #000;
  font-size: 1.875rem;
  font-weight: 400;
}

p.footerp { font-size: 1rem !important; }

.anschrift { margin-top: 0.875em; }
.eintritt { margin-bottom: 1.75em; }

.bottom-row p {
  font-size: 1.25em;
  color: #000;
  font-weight: 400;
}

.bottom-row tbody {
  background: transparent;
  border: 0px;
  color: #000;
  font-size: 1.25rem;
  font-weight: 400;
}

.bottom-row tbody td { padding: 0rem 0.625rem 0.1425rem 0rem; }

.bottom-row table tbody tr:nth-child(2n) {
  border-bottom: 0;
  background-color: transparent;
}

.fonfax { width: 4.5em; display: inline-block; }
.divider { padding-right: 0.5em; }

.bottom-row a:link, .bottom-row a:visited, .bottom-row a:focus, .bottom-row a:active { color: #000; }
.bottom-row a:hover { color: var(--brand-primary); }

.footer-row { background-color: #FFF; padding: 1.5em 0; }
.footbox { margin-top: 1em; }

.menufooter a:link, .menufooter a:visited, .menufooter a:hover, .menufooter a:focus, .menufooter a:active { color: #666; }
.menufooter a:hover { color: #000; }

.logofooterbox { margin-bottom: 1em; }

.logofooter {
  width: 100px;
  max-width: 100px;
  height: auto;
  margin-top: 8px;
}

.footer-row img {
    max-height:30px;
}


/* --------------- 11. Vollbild-Module (Slideshow, Video) --------------- */

.frame {
  height: 100vh;
  width: 100%;
  background: url("../images/aumeier2.jpg") #FFF;
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: repeat;
  background-position: center center;
  background-size: cover;
}

#slideshow-container {
  width: 1440px;
  height: 600px;
  position: relative;
  overflow: hidden;
  text-align: left;
  margin: auto;
}

#slideshow-container img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

.sigeih { margin-top: 3em; }
.sige_thumb img { padding: 0px !important; }
.sige_thumb { background: none !important; margin: 6px !important; }

/* Vollbild-Hintergrundvideo */
.video-container {
  position: relative;
  min-height: 100vh;
  z-index: 0;
}

.flex-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  z-index: -1;
}

.flex-video video {
  left: 50%;
  min-height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media (max-aspect-ratio: 1.7777777778) {
  .video-container:not(.fixed-device) .flex-video video {
    width: calc(100vh*1280/720);
    height: 100vh;
  }
}

@media (min-aspect-ratio: 1.7777777778) {
  .video-container:not(.fixed-device) .flex-video video {
    width: 100vw;
    height: calc(100vw*720/1280);
  }
}

/* Dummy Content (Platzhalter-Sektionen im Video-Container) */
.dummy-container-class .flex-video { margin-bottom: 0; }
.dummy-container-class .row { margin: 1em auto; padding: 1em; }
.dummy-container-class .columns { overflow: hidden; }

.dummy-container-class.video-container .row {
  color: white;
  background: transparent;
  width: 100%;
  text-align: center;
}

.dummy-container-class.video-container:last-of-type .row { position: absolute; top: 20%; }

.dummy-container-class.video-container:last-of-type .row.sm {
  position: absolute;
  top: 0px;
  padding-top: 0;
}

.dummy-container-class button,
.dummy-container-class button:visited,
.dummy-container-class button:hover,
.dummy-container-class button:active,
.dummy-container-class button:focus {
  background-color: transparent;
}

.buttontext { font-weight: bold; font-size: 1.25em; display: block; }


/* ------------------------- 12. Newsflash ------------------------- */

ul.fields-container {
  font-size: 1.25rem;
  font-weight: 300;
  list-style: none;
  margin-left: 0;
}

ul.fields-container li span.field-label { width: 5em; display: inline-block; }

.mitgliederbbk ul.fields-container li span.field-label { width: 3em; display: inline-block; }

ul.fields-container li.field-entry.datum-start,
ul.fields-container li.field-entry.datum-ende.inline { display: inline-block; }

ul.fields-container li.field-entry.teilnehmer {
  margin-top: 1em;
  font-size: 1.425rem;
  font-weight: 400;
}


/* ------------------------- 13. Mitglieder / Künstler ------------------------- */

.category-desc { margin: 2em 0; }

.mitgliederbox ul li, .com-content-article__body ul li {
  /*list-style: url("../images/square-16.png");*/
  margin-left: 0.125em;
  font-size: 1.25rem;
  font-weight: 300;
  padding: 0 0 1em 0.5em;
}

.mitgliederbox .card-section { padding: 2em 1em 0em 1em; }
.mitgliederbox .card-section p { font-size: 1.25rem; margin-bottom: 1.5em; font-weight: 300; }

.mitglieder { margin-top: 6.5em; }

.mitgliedercatbox {
  border: 1px solid #ccc;
  margin: 2em 0 3em 0;
  padding: 2em;
}

.mitgliedercatbox a.button { width: 2.825em; }

.com-content-category-blog__item.blog-item.cell .card-section h2,
.com-content-category-blog__child.cell h2 {
  font-family: 'Roboto';
  font-style: normal;
  font-size: 1.25rem;
  margin-bottom: 0;
}

.com-content-category-blog__item.blog-item.cell .card-section h2 a { color: #333; font-weight: 400; }

.mod-tagspopular.tagspopular ul { margin-top: 2em; list-style: none; margin-left: 0; }

.mod-tagspopular.tagspopular ul li a:link,
.mod-tagspopular.tagspopular ul li a:visited,
.mod-tagspopular.tagspopular ul li a {
  background-color: var(--brand-primary);
  color: #FFF;
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 1.065em;
  padding: 0.35em 1em;
  display: inline-block;
  width: 100%;
}

.mod-tagspopular.tagspopular ul li a:hover {
  background-color: var(--brand-secondary);
  color: #FFF;
}

.mitgliederbbk ul.tags {
  list-style: none;
  margin-left: 0;
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 2em;
}

.field-entry.plz, .field-entry.mitglieder-ort { display: inline-block; }

.mitgliederbbk h6, .mitgliederbbk .h6 {
  font-family: 'Roboto';
  font-style: normal;
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--brand-primary) !important;
  margin-bottom: 0.75em;
  margin-top: 1.5em;
}

@media screen and (min-width: 40em) {
  .mitgliederbbk h6, .mitgliederbbk .h6 {
    font-size: 1.875rem;
    font-weight: 300;
  }
}

.card a.imageresize .field-value, #gallery1 .field-value, #gallery2 .field-value, #gallery3 .field-value {
  margin: 0 auto;
  display: inline-block;
  text-align: center;
  width: 100%;
}

.card a.imageresize .field-value img {
  max-width: 100%;
  height: auto;
  max-height: 300px;
  width: auto;
  text-align: center;
}

.mitgliederbbk .card-section { text-align: center; }

/* ------------------- Künstler------------------- */

.kuenstler-innen .badge.secondary {
  background: #999;
  color: #fefefe;
  font-size: 1rem;
  margin-bottom:1em;
}

.kuenstler-innen .accordion-title {
  padding:0;
  border: 0px solid #FFF;
  font-size: 1.25rem;
  line-height: 2;
  color: #666;
}

.kuenstler-innen .accordion-title::before {
  display:none;
}

.kuenstler-innen .accordion-title:hover, .kuenstler-innen .accordion-title:focus {
  background-color: #FFF;
  color: #000;
}

.kuenstler-innen .accordion-content {
  padding: 1rem;
  border:0;
  border-top: 1px solid #e6e6e6;
  background-color: #FFF;
  color: #666;
}

.kuenstler-innen :last-child:not(.is-active) > .accordion-title {
  border-bottom: 0px solid #e6e6e6;
  border-radius: 0 0 0 0;
}

.kuenstler-innen .valuebox {
    padding-bottom:0.5em;
}

/* Layout fließend */

.kuenstler-columns {
  column-gap: 1rem;
  column-count: 1;
}

@media screen and (min-width: 40em) {
  .kuenstler-columns {
    column-count: 3;
  }
}

@media screen and (min-width: 64em) {
  .kuenstler-columns {
    column-count: 3;
  }
}

.artistbox {
  break-inside: avoid;
  -webkit-column-break-inside: avoid; /* ältere Safari/Webkit-Absicherung */
  margin-bottom: 1rem;
  display: inline-block;
  width: 100%;
}



/* ------------------- 14. Beratungsfelder / Accordion ------------------- */

.is-active > .accordion-title::before { content: " – "; }

ul.accordion li.accordion-item {
  list-style: none !important;
  margin-left: 0 !important;
  padding: 0 !important;
}

.accordion-title {
  border: 1px solid #e6e6e6;
  border-bottom-color: rgb(230, 230, 230);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom: 0;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: inherit;
  color: var(--brand-primary);
}


/* ------------------------- 15. Besucherinfos ------------------------- */

.besucherinfobox {
  margin-top: 3em;
  border-top: 1px dotted #999;
  padding-top: 4em;
  padding-bottom: 3em;
}

.besuchermore { margin-top: 3em; }


/* ------------------------- 16. Kontaktseite ------------------------- */

#map {
  position: relative;
  overflow: hidden;
  height: 419px;
}

#jform_captcha-lbl, #jform_com_fields_datenschutz-lbl { display: none; }

.vcard { border-top: 1px dotted #ccc; margin: 2em 0; }
.vcard a { margin-top: 1.2em; margin-right: 1em; }

#jform_com_fields_datenschutz0 { margin: 1em 0.5em 0 0; }

.form-actions { margin-bottom: 3em; }

.found6contact .headingdivider { display: none; }
.found6contact .thumbnail.pull-right { display: none; }


/* ------------------------- 17. Suche ------------------------- */

.hssearchbox {
  text-align: center;
  padding: 0 0.9375em 1em 0.9375em;
  border-bottom: 0px dashed #ccc;
}

.hssearchbox h1 { font-size: 1.4em; text-align: center; }

.hssearchbox span.hsflex { font-size: 1.8rem; display: block; text-align: center; }

.hssearchbox h2 { font-size: 1.125em; margin-bottom: 0; }

ul.menu.search { display: block; margin-top: 2em; }

.inputbox.search-query.input-medium {
  background: transparent;
  border: 0px solid #FFF;
  border-bottom: 1px solid #f29400;
  width: 100%;
  height: inherit;
  margin-top: 2em; /* war "margin-topo" (Tippfehler) und griff dadurch vorher gar nicht */
}

.search .hssearch .button .menu a, .menu .button { display: none; }

.suche .finder { min-height: 40em; }

.suche [type="text"], [type="password"], [type="date"], [type="datetime"], [type="datetime-local"],
[type="month"], [type="week"], [type="email"], [type="number"], [type="search"], [type="tel"],
[type="time"], [type="url"], [type="color"], textarea {
  height: 3.5rem;
}

.suche button.btn.btn-primary.button.expanded { margin: 0; }

a.searchlink::before { content: url('../images/lupeblack.png'); }
div.sticky.is-at-top.is-stuck a.searchlink::before { content: url('../images/lupeblack.png'); }

.inputbox::placeholder { color: var(--brand-primary); }


/* --------------------- 18. Linke Sidebar / Modul --------------------- */

.leftbox { padding: 1.5em 0 0 1.2em; }

.moduletable.show-for-large .vertical.menu {

}

.modleft { margin: 3em 0 0 2.5em; }

h5.modflyer { font-size: 1.2em; }


/* --------------------- 19. Linke Sidebar / Modul --------------------- */

.fullimagebox img {
    width:100%
}

.breadcrumbs li, .breadcrumbs li a  {
    color:#999!important;
}

/* --------------------- 20. blog featured Startseite Anppassungen --------------------- */


.blog-featured .sige_thumb_masonry a img {

}

/* Tags Schlagworte in Beiträgen ausblenden */

.tags.list-inline {
    display: none;
}

/* Tags / Schlagworte auf der der Startseite als Überschrift formatieren */

.item-tags-top {
    font-size:3rem;
    line-height: 1.4;
    color:#ccc;
    width:100%;
    padding-bottom:0.5rem;
    border-bottom:1px solid #ccc;
    margin-bottom:1em;
}

/* --------------------- 21.Anppassungen für Lazy Load --------------------- */

.js-reveal { opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease; }
.js-reveal.is-visible { opacity: 1; transform: translateY(0); }

#scroll-sentinel { height: 1px; }
#scroll-sentinel.is-loading::after {
  content: ''; display: block; margin: 2rem auto; width: 32px; height: 32px;
  border: 3px solid #ccc; border-top-color: #333; border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }