/*
███████████████████████████████████████████████████████████████████████████████████████████████
    FontAwesome
███████████████████████████████████████████████████████████████████████████████████████████████
*/
@import 'fontawesome/fontawesome.min.css';
@import 'fontawesome/brands.min.css';
@import 'fontawesome/solid.min.css';

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Resets
███████████████████████████████████████████████████████████████████████████████████████████████
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  font: inherit;
  border: none;
  background-repeat: no-repeat;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
}
header, section, footer, aside, nav, main, article, figure {
  display: block;
}
ol, ul {
  list-style: none;
}
ol li {
  list-style: decimal;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
img, picture, svg, video {
  display: block;
  max-width: 100%;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Viewport-Anweisung
███████████████████████████████████████████████████████████████████████████████████████████████
*/
@-ms-viewport {
  width: device-width;
  zoom: 1;
}
@-o-viewport {
  width: device-width;
  zoom: 1;
}
@viewport {
  width: device-width;
  zoom: 1;
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Variablen
███████████████████████████████████████████████████████████████████████████████████████████████
*/
:root {
  --font_serif: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  --font_sans_serif: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --font_size_html: 17px;

  --font_size_h1: 2.8em;
  --font_size_h2: 2.25em;
  --font_size_h3: 1.7em;
  --font_size_h4: 1.2em;

  --font_color_default: #333;
  --font_color_heading: #222;
  --font_color_link: #0e5287;

  --font_weight_light: 200;
  --font_weight_normal: 400;
  --font_weight_medium: 500;
  --font_weight_bold: 600;
  --font_weight_black: 700;

  --fontawesome: 'Font Awesome 6 Free';
  --fontawesome_brands: 'Font Awesome 6 Brands';

  /* CI-Farbe #1 - blau */
  --_hue_saturation_ci: 214, 84%;
  --_lightness_ci: 39%;
  --color_ci: hsl(var(--_hue_saturation_ci), var(--_lightness_ci));
  --color_ci_10p: hsl(var(--_hue_saturation_ci), min( 100%, calc( var(--_lightness_ci) + 10% ) ));
  --color_ci_20p: hsl(var(--_hue_saturation_ci), min( 100%, calc( var(--_lightness_ci) + 20% ) ));
  --color_ci_30p: hsl(var(--_hue_saturation_ci), min( 100%, calc( var(--_lightness_ci) + 30% ) ));
  --color_ci_40p: hsl(var(--_hue_saturation_ci), min( 100%, calc( var(--_lightness_ci) + 40% ) ));
  --color_ci_50p: hsl(var(--_hue_saturation_ci), min( 100%, calc( var(--_lightness_ci) + 50% ) ));
  --color_ci_60p: hsl(var(--_hue_saturation_ci), min( 100%, calc( var(--_lightness_ci) + 60% ) ));
  --color_ci_70p: hsl(var(--_hue_saturation_ci), min( 100%, calc( var(--_lightness_ci) + 70% ) ));
  --color_ci_80p: hsl(var(--_hue_saturation_ci), min( 100%, calc( var(--_lightness_ci) + 80% ) ));
  --color_ci_10m: hsl(var(--_hue_saturation_ci), max( 0%, calc( var(--_lightness_ci) - 10% ) ));
  --color_ci_20m: hsl(var(--_hue_saturation_ci), max( 0%, calc( var(--_lightness_ci) - 20% ) ));
  --color_ci_30m: hsl(var(--_hue_saturation_ci), max( 0%, calc( var(--_lightness_ci) - 30% ) ));
  --color_ci_40m: hsl(var(--_hue_saturation_ci), max( 0%, calc( var(--_lightness_ci) - 40% ) ));
  --color_ci_50m: hsl(var(--_hue_saturation_ci), max( 0%, calc( var(--_lightness_ci) - 50% ) ));
  --color_ci_60m: hsl(var(--_hue_saturation_ci), max( 0%, calc( var(--_lightness_ci) - 60% ) ));
  --color_ci_70m: hsl(var(--_hue_saturation_ci), max( 0%, calc( var(--_lightness_ci) - 70% ) ));
  --color_ci_80m: hsl(var(--_hue_saturation_ci), max( 0%, calc( var(--_lightness_ci) - 80% ) ));

  /* CI-Farbe #2 - gelb */
  --_hue_saturation_ci2: 45, 93%;
  --_lightness_ci2: 56%;
  --color_ci2: hsl(var(--_hue_saturation_ci2), var(--_lightness_ci2));
  --color_ci2_10p: hsl(var(--_hue_saturation_ci2), min( 100%, calc( var(--_lightness_ci2) + 10% ) ));
  --color_ci2_20p: hsl(var(--_hue_saturation_ci2), min( 100%, calc( var(--_lightness_ci2) + 20% ) ));
  --color_ci2_30p: hsl(var(--_hue_saturation_ci2), min( 100%, calc( var(--_lightness_ci2) + 30% ) ));
  --color_ci2_40p: hsl(var(--_hue_saturation_ci2), min( 100%, calc( var(--_lightness_ci2) + 40% ) ));
  --color_ci2_50p: hsl(var(--_hue_saturation_ci2), min( 100%, calc( var(--_lightness_ci2) + 50% ) ));
  --color_ci2_60p: hsl(var(--_hue_saturation_ci2), min( 100%, calc( var(--_lightness_ci2) + 60% ) ));
  --color_ci2_70p: hsl(var(--_hue_saturation_ci2), min( 100%, calc( var(--_lightness_ci2) + 70% ) ));
  --color_ci2_80p: hsl(var(--_hue_saturation_ci2), min( 100%, calc( var(--_lightness_ci2) + 80% ) ));
  --color_ci2_10m: hsl(var(--_hue_saturation_ci2), max( 0%, calc( var(--_lightness_ci2) - 10% ) ));
  --color_ci2_20m: hsl(var(--_hue_saturation_ci2), max( 0%, calc( var(--_lightness_ci2) - 20% ) ));
  --color_ci2_30m: hsl(var(--_hue_saturation_ci2), max( 0%, calc( var(--_lightness_ci2) - 30% ) ));
  --color_ci2_40m: hsl(var(--_hue_saturation_ci2), max( 0%, calc( var(--_lightness_ci2) - 40% ) ));
  --color_ci2_50m: hsl(var(--_hue_saturation_ci2), max( 0%, calc( var(--_lightness_ci2) - 50% ) ));
  --color_ci2_60m: hsl(var(--_hue_saturation_ci2), max( 0%, calc( var(--_lightness_ci2) - 60% ) ));
  --color_ci2_70m: hsl(var(--_hue_saturation_ci2), max( 0%, calc( var(--_lightness_ci2) - 70% ) ));
  --color_ci2_80m: hsl(var(--_hue_saturation_ci2), max( 0%, calc( var(--_lightness_ci2) - 80% ) ));

  --color_emphasis: hsl(206, 100%, 41%);

  --text_line_height: 1.7em;
  --text_block_spacer: 1.5em;

  --boundary_width_wide: 1700px;
  --boundary_width_regular: 1200px;
  --boundary_width_narrow: 980px;
}
@media (max-width: 700px) {
  :root {
    --font_size_html: 17px;
  }
}
@media (max-width: 600px) {
  :root {
    --font_size_html: 16px;
  }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    allgemeine Einstellungen
███████████████████████████████████████████████████████████████████████████████████████████████
*/
html {
  font-size: var(--font_size_html);
  scroll-behavior: smooth;
  min-height: 100%;
  position: relative;
  background-color: #fff;
}
body {
  font-size: 100%;
}
body,
body * {
  font-family: var(--font_sans_serif);
  color: var(--font_color_default);
  line-height: var(--text_line_height);
  font-weight: var(--font_weight_normal);
}
p,
table {
  margin-bottom: var(--text_block_spacer);
}
strong {
  font-weight: var(--font_weight_bold);
}
i,
em {
  font-style: italic;
}
a {
  text-decoration: none;
}
#content a:not([class]) {
  color: var(--font_color_link);
  text-decoration: underline;
}
ul[class],
ul[id] {
  list-style: none;
  margin: 0;
  padding: 0;
}
.center {
  text-align: center !important;
}
.center > * {
  display: inline-block;
}
.clear {
  clear: both;
  float: none;
  display: block;
}
.anchor {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  margin-top: -165px;
}
a.fancybox {
  display: inline-block;
  cursor: zoom-in;
  position: relative;
}
a.fancybox:hover::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow:
    inset 0 0 3.3px rgba(0, 0, 0, 0.056),
    inset 0 0 8px rgba(0, 0, 0, 0.081),
    inset 0 0 15px rgba(0, 0, 0, 0.1),
    inset 0 0 26.8px rgba(0, 0, 0, 0.119),
    inset 0 0 50.1px rgba(0, 0, 0, 0.144),
    inset 0 0 120px rgba(0, 0, 0, 0.2)
  ;
}
a.fancybox img[style*="float:left"],
a.fancybox img[style*="float: left"] {
  margin: 0 2% 1% 0;
}
a.fancybox img[style*="float:right"],
a.fancybox img[style*="float: right"] {
  margin: 0 0 1% 2%;
}
a.fancybox.right {
  display: inline-block;
  float: right;
  margin: 0 0 1% 2%;
  box-shadow:
    0px 0px 0.5px rgba(0, 0, 0, 0.017),
    0px 0px 1.1px rgba(0, 0, 0, 0.024),
    0px 0px 2.1px rgba(0, 0, 0, 0.03),
    0px 0px 3.8px rgba(0, 0, 0, 0.036),
    0px 0px 7.1px rgba(0, 0, 0, 0.043),
    0px 0px 17px rgba(0, 0, 0, 0.06)
  ;
  cursor: zoom-in;
}
@media (max-width: 850px) {
  a.fancybox.right {
    max-width: 30%;
  }
}
@media (max-width: 400px) {
  a.fancybox.right {
    float: none;
    margin-left: 0;
    max-width: unset;
  }
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    dynamische Schriftgröße
███████████████████████████████████████████████████████████████████████████████████████████████
*/
@media (max-width: 1300px) { body { font-size: 98.4%; } }
@media (max-width: 1200px) { body { font-size: 96.8%; } }
@media (max-width: 1100px) { body { font-size: 95.2%; } }
@media (max-width: 1000px) { body { font-size: 93.6%; } }
@media (max-width: 900px)  { body { font-size: 92.0%; } }
@media (max-width: 800px)  { body { font-size: 90.4%; } }
@media (max-width: 700px)  { body { font-size: 88.8%; } }
@media (max-width: 600px)  { body { font-size: 87.2%; } }
@media (max-width: 500px)  { body { font-size: 85.6%; } }
@media (max-width: 400px)  { body { font-size: 84.0%; } }
@media (max-width: 300px)  { body { font-size: 82.4%; } }

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Überschriften
███████████████████████████████████████████████████████████████████████████████████████████████
*/
h1, h2, h3, h4 {
  display: block;
  clear: both;
  float: none;
  overflow: visible;
  text-align: left;
  line-height: calc( var(--text_line_height) * .7 );
  color: var(--font_color_heading);
  font-weight: var(--font_weight_medium);
  font-family: var(--font_serif);
}
h1 *, h2 *, h3 *, h4 * {
  line-height: inherit;
  font-weight: inherit;
}
h1,
.like_h1 {
  font-size: var(--font_size_h1);
  margin-top: 0;
  margin-bottom: calc(var(--font_size_h1) * .2);
}
h2,
.like_h2 {
  font-size: var(--font_size_h2);
  margin-top: calc(var(--font_size_h2) * .5);
  margin-bottom: calc(var(--font_size_h2) * .3);
  font-weight: var(--font_weight_medium);
}
h3 {
  font-size: var(--font_size_h3);
  margin-top: calc(var(--font_size_h3) * .7);
  margin-bottom: calc(var(--font_size_h3) * .3);
}
h4 {
  font-size: var(--font_size_h4);
  margin-top: calc(var(--font_size_h4) * 1.5);
  margin-bottom: calc(var(--font_size_h4) * .3);
}
@media (max-width: 1100px) {
  h1,
  h2.like_h1 {
    font-size: calc(var(--font_size_h1) * .84);
  }
  h2,
  h1.like_h2 {
    font-size: calc(var(--font_size_h2) * .88);
  }
  h3 {
    font-size: calc(var(--font_size_h3) * .92);
  }
  h4 {
    font-size: calc(var(--font_size_h4) * .96);
  }
}
@media (max-width: 900px) {
  h1,
  h2.like_h1 {
    font-size: calc(var(--font_size_h1) * .8);
    text-transform: none;
  }
  h2,
  h1.like_h2 {
    font-size: calc(var(--font_size_h2) * .87);
  }
  h3 {
    font-size: calc(var(--font_size_h3) * .94);
  }
}
@media (max-width: 600px) {
  h1,
  h2.like_h1 {
    font-size: calc(var(--font_size_h1) * .78);
  }
  h2,
  h1.like_h2 {
    font-size: calc(var(--font_size_h2) * .83);
  }
  h3 {
    font-size: calc(var(--font_size_h3) * .88);
  }
  h4 {
    font-size: calc(var(--font_size_h4) * .93);
  }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Grund-Layout mit grid
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.content_grid {
  --padding_inline: 4vw;
  --wide_max_width: 1500px;
  --norm_max_width: 1200px;
  --narrow_max_width: 900px;
  --wide_size: calc( (var(--wide_max_width) - var(--norm_max_width)) / 2 );
  --norm_size: calc( (var(--norm_max_width) - var(--narrow_max_width)) / 2 );
  display: grid;
  grid-template-columns:
    [full_width-start] minmax(var(--padding_inline), 1fr)
      [wide-start] minmax(0, var(--wide_size))
        [norm-start] minmax(0, var(--norm_size))
          [narrow-start] min(100% - (var(--padding_inline) * 2), var(--narrow_max_width))
          [narrow-end]
        minmax(0, var(--norm_size)) [norm-end]
      minmax(0, var(--wide_size)) [wide-end]
    minmax(var(--padding_inline), 1fr) [full_width-end];
}
.content_grid > :not(.full_width, .wide, .narrow),
.full_width > :not(.full_width, .wide, .narrow) {
  grid-column: norm;
}
.content_grid > .wide {
  grid-column: wide;
}
.content_grid > .norm {
  grid-column: norm;
}
.content_grid > .narrow {
  grid-column: narrow;
}
.content_grid > .full_width {
  grid-column: full_width;
  display: grid;
  grid-template-columns: inherit;
}
.content_grid > .full_width > .wide {
  grid-column: wide;
}
.content_grid > .full_width > .narrow {
  grid-column: narrow;
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Column-Layout
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.clc {
  overflow: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
}
.clc.vcenter {
  align-items: center;
  align-content: center;
}
.clc .col {
  flex-grow: 0;
  flex-shrink: 1;
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Header
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#header {
  --animation_duration: 350ms;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  max-width: inherit;
  padding: 0;
  background-color: #fff;
  box-shadow:
    0px 0px 1.8px rgba(0, 0, 0, 0.008),
    0px 0px 4.3px rgba(0, 0, 0, 0.011),
    0px 0px 7.6px rgba(0, 0, 0, 0.014),
    0px 0px 12.7px rgba(0, 0, 0, 0.016),
    0px 0px 20.9px rgba(0, 0, 0, 0.019),
    0px 0px 36.5px rgba(0, 0, 0, 0.022),
    0px 0px 79px rgba(0, 0, 0, 0.03)
  ;
}
#header.shrink {
  background-color: rgba(255, 255, 255, .8);
  backdrop-filter: blur(.3rem);
  box-shadow:
    0px 0.8px 1.3px rgba(0, 0, 0, 0.042),
    0px 1.9px 3.2px rgba(0, 0, 0, 0.061),
    0px 3.6px 6px rgba(0, 0, 0, 0.075),
    0px 6.5px 10.7px rgba(0, 0, 0, 0.089),
    0px 12.1px 20.1px rgba(0, 0, 0, 0.108),
    0px 29px 48px rgba(0, 0, 0, 0.15)
  ;
}
/* ========================================================================================= */
#header .main_line {
  padding: 1rem 0;
  transition: all var(--animation_duration);
}
#header.shrink .main_line {
  padding: .5rem 0;
}
#header .main_line .clc {
  margin-bottom: 1.5rem;
  transition: all var(--animation_duration);
  overflow: visible;
}
#header .main_line .clc .col {
  overflow: visible;
}
#header.shrink .main_line .clc {
  margin-bottom: 0;
}
#header .main_line .logo {
  display: block;
  width: fit-content;
  margin-inline: auto;
  transition: all 500ms ease;
  opacity: 1;
  top: 0;
}
#header.shrink .main_line .logo {
  margin-bottom: 0;
  opacity: 0;
  display: block;
}
#header .main_line .logo img {
  display: block;
  height: 141px;
  transition: all var(--animation_duration);
}
#header.shrink .main_line .logo img {
  height: 0;
}
#header .main_line .wappen img {
  height: 140px;
  opacity: 1;
  transition: all var(--animation_duration);
}
#header.shrink .main_line .wappen img {
  transform: rotate(30deg);
  opacity: 0;
  height: 0;
}
#header.shrink .main_line .wappen img#schneeberg {
  transform: rotate(-30deg);
}
@media (max-width: 50rem) {
  #header .main_line .clc .col {
    width: 100%;
  }
  #header .main_line .wappen {
    display: none;
  }
}
@media (max-width: 700px) {
  #header .main_line .logo {
    float: left;
    max-width: 70%;
    margin-bottom: 0;
  }
  #header .main_line .logo img {
    height: auto;
    width: auto;
  }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Hero
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#hero {
  position: relative;
  overflow: hidden;
  background-image: url('../bilder/header/home.jpg');
  background-size: cover;
  background-position: 50% 55%;
  background-position: 50% 50%;
  padding-block: max(8rem, 15vw);
  text-align: center;
}
body.der-verein #hero {
  background-image: url('../bilder/header/der-verein.jpg');
}
body.pflegschaftsobjekte #hero {
  background-image: url('../bilder/header/pflegschaftsobjekte.jpg');
}
body.in-gedenken #hero {
  background-image: url('../bilder/header/in-gedenken.jpg');
}
body.unsere-unterstuetzer #hero {
  background-image: url('../bilder/header/unsere-unterstuetzer.jpg');
}
body.jugendarbeit #hero {
  background-image: url('../bilder/header/jugendarbeit.jpg');
}
body.traegergemeinschaft #hero {
  background-image: url('../bilder/header/traegergemeinschaft.jpg');
}
body.aktuelles-galerie #hero {
  background-image: url('../bilder/header/aktuelles-galerie.jpg');
}
body.downloads #hero {
  background-image: url('../bilder/header/downloads.jpg');
}
body.termine #hero {
  background-image: url('../bilder/header/termine.jpg');
}
body.kontakt #hero {
  background-image: url('../bilder/header/kontakt.jpg');
}
body.impressum #hero {
  background-image: url('../bilder/header/impressum.jpg');
}
body.datenschutz #hero {
  background-image: url('../bilder/header/datenschutz.jpg');
}

#hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .08);
}
#hero h1 {
  color: #fff;
  font-weight: var(--font_weight_medium);
  font-size: 2.2em;
}
#hero svg.hills {
  grid-column: full-width;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 30%;
  width: 100%;
  transition: transform 1300ms ease;
}
#hero:hover svg.hills {
  transform: scale(1.1) translateY(10px);
}
#hero svg.hills polygon {
  fill: url(#gradient);
  transition: transform 1400ms ease;
}
#hero svg.hills .hill_1 {
  filter: brightness(.94) contrast(1.2) blur(.1px) sepia(.06) hue-rotate(160deg);
}
#hero svg.hills:hover .hill_1 {
  transform: translate(-1px, 2px);
}
#hero svg.hills .hill_2 {
  filter: drop-shadow(0 0 10px rgb(0 0 0 / .25)) blur(.05px);
}
#hero svg.hills .hill_3 {
  filter: brightness(.92) contrast(1.2) blur(.1px) sepia(.05) hue-rotate(160deg);
}
#hero svg.hills:hover .hill_3 {
  transform: translate(1px, 2px);
}
@media (max-width: 60rem) {
  #hero {
    padding-block: max(5rem, 12vw);
  }
  #hero svg.hills {
    height: 25%;
  }
}
@media (max-width: 50rem) {
  #hero svg.hills {
    height: 20%;
  }
}
@media (max-width: 30rem) {
  #hero svg.hills {
    height: 15%;
  }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Button
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.button {
  --_button_color: var(--color_ci);
  --_button_hover_color: var(--color_ci_10m);
  color: #fff;
  padding: .8em 1.1em;
  font-weight: var(--font_weight_medium);
  border: 2px solid var(--_button_color);
  background-color: var(--_button_color);
  overflow: hidden;
  line-height: 1.1em;
  cursor: pointer;
  display: inline-block;
  text-decoration: none !important;
  text-align: center;
  white-space: nowrap;
  border-radius: .3rem;
}
.button:hover {
  --_button_color: var(--_button_hover_color);
}
.button + .button {
  margin-left: 1em;
}
.button.hollow {
  --_button_hover_color: var(--color_ci_50m);
  background-color: rgba(255, 255, 255, .5);
  color: var(--_button_color);
  backdrop-filter: blur(1px);
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Viewport-Effects
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.vpe.taut {
  opacity: 0;
  transform: translateX(10%);
  transition: all .3s ease-out;
}
.vpe.from_left.taut {
  transform: translateX(-10%);
}
body.nojs .vpe.taut,
.vpe.visible {
  opacity: 1;
  transform: translateX(0) !important;
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Content
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#content {
  overflow: auto;
  padding: 0;
  --section-vertical-padding: 4rem;
}
#content section {
  padding: var(--section-vertical-padding) 0;
}
#content article {
  padding-block: 3rem;
  position: relative;
}
#content article:first-of-type {
  padding-top: 1rem;
}
#content article > h2 {
  margin-top: 0 !important;
}
#content article > *:last-child {
  margin-bottom: 0 !important;
}
#content article + article::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, var(--color_ci2_40p) 0%, var(--color_ci2) 50%, var(--color_ci2_40p) 100%);
}

#content hr {
  --space_multiplier: 2;
  position: relative;
  border: none;
  height: 1px;
  margin-inline: 0;
  margin-top: calc( max( 0, (var(--space_multiplier) - 1)) * var(--text_block_spacer) );
  margin-bottom: calc( var(--space_multiplier) * var(--text_block_spacer));
  background: linear-gradient(to right, var(--color_ci2_40p) 0%, var(--color_ci2) 50%, var(--color_ci2_40p) 100%);
}
#content hr + * {
  margin-top: 0 !important;
}
#content ul:not([class]):not([id]) {
  margin-left: 1.5rem;
  list-style: none;
  margin-bottom: var(--text_block_spacer);
}
#content ul:not([class]):not([id]) li {
  margin-top: calc( var(--text_block_spacer) * .5 );
  line-height: calc( var(--text_line_height) * .9 );
}
#content ul:not([class]):not([id]) li:first-child {
  margin-top: 0;
}
#content ul:not([class]):not([id]) li::before {
  content: '\f6fc';
  font-family: var(--fontawesome);
  font-size: .4em;
  display: block;
  float: left;
  width: 1.5rem;
  margin-left: -1.5rem;
  text-align: center;
}
#content ol {
  margin-left: 3.3em;
}
#content ol li {
  margin-top: .6em;
}
#content p,
#content table,
#content ol {
  margin-bottom: var(--text_block_spacer);
}
#content p.right {
  text-align: right;
}
#content img {
  max-width: 100%;
}
#content img.right {
  float: right;
  margin: 0 0 .5em 1.5em;
  max-width: 50%;
}
#content img.left {
  float: left;
  margin: 0 1.5em .5em 0;
  max-width: 50%;
}
#content .fullsize_pic {
  display: block;
  width: 100%;
}
#content figure {
  max-width: 100%;
}
#content figure img {
  max-width: 100%;
}
#content figure figcaption {
  margin-top: -.2em;
  font-style: italic;
}
#content ul a.fancybox {
  display: inline-block;
  margin: .4em .4em .7em .4em;
  line-height: 0;
  box-shadow:
    0 0px 0.7px -3px rgba(0, 0, 0, 0.02),
    0 0px 1.6px -3px rgba(0, 0, 0, 0.028),
    0 0px 3px -3px rgba(0, 0, 0, 0.035),
    0 0px 5.4px -3px rgba(0, 0, 0, 0.042),
    0 0px 10px -3px rgba(0, 0, 0, 0.05),
    0 0px 24px -3px rgba(0, 0, 0, 0.07)
  ;
}
#content button {
  border: none;
}
@media (max-width: 700px) {
  #content img.left,
  #content img.right {
    float: none;
    margin: 0 0 1em 0;
    width: auto;
    max-width: 100%;
  }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Bild-Text-Layout
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.pic_text_layout {
  overflow: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  --pic_width: 500px;
  --gap: 4rem;
}
.pic_text_layout + .pic_text_layout {
  margin-top: 3em;
}
.pic_text_layout .col {
  flex-grow: 0;
  flex-shrink: 1;
}
.pic_text_layout .col.pic {
  width: var(--pic_width);
  padding-top: .5em;
}
.pic_text_layout .col.pic img {
  display: block;
  width: auto;
  max-width: 100%;
}
.pic_text_layout .col.text {
  width: calc( 100% - var(--pic_width) - var(--gap));
}
@media (max-width: 70rem) {
  .pic_text_layout {
    display: block;
  }
  .pic_text_layout .col {
    width: 100% !important;
  }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    HP-Section "Intro"
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#intro {
  background: linear-gradient(180deg, rgba(221,221,221,1) 0%, rgba(255,255,255,0) 50%);
}
#intro h1 {
  text-align: center;
}
#intro .service_list {
  display: grid;
  align-content: start;
  justify-items: center;
  justify-content: space-between;
  align-items: start;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  margin: 2rem auto !important;
  width: 100%;
  max-width: 1000px;
  --list_item_padding: .6rem;
}
#intro .service_list li {
  position: relative;
  justify-self: stretch;
  align-self: stretch;
  text-decoration: none !important;
  border-radius: 3px;
  overflow: hidden;
  margin: 0 !important;
  box-shadow:
    0.7px 0.6px 4.5px rgba(0, 0, 0, 0.017),
    1.7px 1.5px 10.8px rgba(0, 0, 0, 0.024),
    3.3px 2.9px 20.3px rgba(0, 0, 0, 0.03),
    5.8px 5.1px 36.2px rgba(0, 0, 0, 0.036),
    10.9px 9.6px 67.7px rgba(0, 0, 0, 0.043),
    26px 23px 162px rgba(0, 0, 0, 0.06)
  ;
}
#intro .service_list li a {
  text-decoration: none;
  transition: all 500ms ease;
}
#intro .service_list:hover li a:not(:hover) {
  opacity: .6;
  filter: grayscale(.5) blur(.5px);
}
#intro .service_list li img {
  display: block;
  width: 100%;
  height: 18rem;
  object-fit: cover;
  background-position: 50% 50%;
}
#intro .service_list li span {
  display: block;
  padding: var(--list_item_padding);
  font-size: 1.3em;
  line-height: 1.1em;
  text-align: center;
  font-weight: var(--font_weight_medium);
}
#intro .service_list li a:hover span {
  background-color: var(--color_ci2);
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}
@media (max-width: 70rem) {
  #intro .service_list {
    gap: 1rem;
    margin-block: 1.2em !important;
  }
}
@media (max-width: 55rem) {
  #intro .service_list li img {
    height: 29vw;
  }
}
@media (max-width: 40rem) {
  #intro .service_list li span {
    font-size: 1.1em;
  }
}
@media (max-width: 35rem) {
  #intro .service_list {
    gap: .6rem;
  }
}
@media (max-width: 30rem) {
  #intro .service_list {
    grid-template-columns: 1fr;
    max-width: 311px;
  }
  #intro .service_list li img {
    height: 45vw;
  }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    HP-Section "Mitglied werden"
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#recruitment {
  background-image: url('../bilder/home/mitglied-werden.jpg');
  background-position: 50% 80%;
  background-size: cover;
  position: relative;
  padding-block: 10rem !important;
}
#recruitment::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color_ci2_20p);
  opacity: .8;
}
#recruitment > * {
  position: relative;
  z-index: 1;
}
#recruitment h2 {
  margin-top: 0;
}
#recruitment .wrapper {
  display: grid;
  align-content: start;
  justify-items: center;
  justify-content: space-between;
  align-items: stretch;
  grid-template-columns: 1fr auto;
  gap: 5rem;
  width: 100%;
}
#recruitment .wrapper > .col {
  justify-self: stretch;
  align-self: center;
}
#recruitment .wrapper .col .button {
  display: block;
  width: fit-content;
}
#recruitment .wrapper > .col > *:last-child{
  margin-bottom: 0;
}
@media (max-width: 90rem) {
  #recruitment {
    padding-block: 10% !important;
  }
}
@media (max-width: 70rem) {
  #recruitment .wrapper {
    gap: 3rem;
  }
}
@media (max-width: 40rem) {
  #recruitment .wrapper {
    grid-template-columns: 1fr;
    gap: var(--text_block_spacer);
  }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    HP-Section "Geschichte"
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#history {
  position: relative;
  overflow: hidden;
}
#history::after {
  content: '';
  position: absolute;
  top: -.5%;
  left: -.5%;
  width: 101%;
  height: 101%;
  background-image: url('../bilder/home/alles-kommt-vom-berge-her.jpg');
  background-size: cover;
  background-position: 50% 60%;
  filter: grayscale(.8) contrast(.5) brightness(1.5) blur(1px);
  opacity: .25;
}
#history > * {
  position: relative;
  z-index: 1;
}
#history h2 {
  margin-top: 0;
}
#history .text_block {
  column-count: 2;
  column-gap: 5rem;
}
#history .text_block p {
  text-align: justify;
  break-inside: avoid-column; /* Firefox-Fix */
}
@media (max-width: 80rem) {
  #history .text_block {
    column-gap: 4rem;
  }
}
@media (max-width: 60rem) {
  #history h2 {
    text-align: center;
  }
  #history .text_block {
    max-width: 40em;
    margin-inline: auto;
    column-count: unset;
    column-gap: unset;
  }
}
@media (max-width: 40rem) {
  #history h2 {
    text-align: left;
  }
  #history .text_block p {
    text-align: left;
  }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    HP-Section "Mitgliedschaft"
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#membership_listing {
  overflow: visible;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}
#membership_listing li {
  flex-grow: 0;
  flex-shrink: 1;
  width: 33.333%;
  text-align: center;
}
#membership_listing li::before {
  display: none !important;
}
#membership_listing li img {
  display: inline-block;
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    HP-Section "Förderungen"
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#promotion {
  box-shadow:
    inset 0 0 1.4px rgba(0, 0, 0, 0.017),
    inset 0 0 3.3px rgba(0, 0, 0, 0.024),
    inset 0 0 6.1px rgba(0, 0, 0, 0.03),
    inset 0 0 10.9px rgba(0, 0, 0, 0.036),
    inset 0 0 20.5px rgba(0, 0, 0, 0.043),
    inset 0 0 49px rgba(0, 0, 0, 0.06)
  ;
}
#promotion .clc {
  align-items: center;
  gap: 3rem 0;
}
#promotion .clc .col {
  text-align: center;
  padding-inline: 1rem;
}
#promotion .clc .col.erz {
  width: 19%;
}
#promotion .clc .col.sachs {
  width: 56%;
}
#promotion .clc .col.slv {
  width: 25%;
}
#promotion .clc .col img {
  display: inline-block;
  max-width: 100%;
}
@media (max-width: 65rem) {
  #promotion .clc .col {
    padding-inline: 0;
  }
  #promotion .clc .col.erz {
    order: 2;
    width: 48%;
  }
  #promotion .clc .col.sachs {
    order: 1;
    width: 100%;
  }
  #promotion .clc .col.slv {
    order: 3;
    width: 48%;
  }
}
@media (max-width: 45rem) {
  #promotion .clc .col.erz {
    width: 40%;
  }
  #promotion .clc .col.slv {
    width: 53%;
  }
}
@media (max-width: 35rem) {
  #promotion .clc {
    gap: 2rem 0;
  }
  #promotion .clc .col {
    width: 100% !important;
  }
  #promotion .clc .col.erz img,
  #promotion .clc .col.slv img {
    max-width: 180px;
  }
}
@media (max-width: 18rem) {
  #promotion .clc .col.erz img,
  #promotion .clc .col.slv img {
    max-width: 100%;
  }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Seite "Der Verein"
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.board_list {
  display: grid;
  align-content: start;
  justify-items: center;
  justify-content: space-between;
  align-items: start;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2rem;
  margin: 0 auto !important;
  width: 100%;
  max-width: 1100px;
  --list_item_padding: .6rem;
}
.board_list li {
  position: relative;
  justify-self: stretch;
  align-self: stretch;
  text-decoration: none !important;
  font-size: 1.2em;
  line-height: 1em;
  border-radius: 3px;
  overflow: hidden;
  margin: 0 !important;
  box-shadow:
    0.7px 0.6px 4.5px rgba(0, 0, 0, 0.017),
    1.7px 1.5px 10.8px rgba(0, 0, 0, 0.024),
    3.3px 2.9px 20.3px rgba(0, 0, 0, 0.03),
    5.8px 5.1px 36.2px rgba(0, 0, 0, 0.036),
    10.9px 9.6px 67.7px rgba(0, 0, 0, 0.043),
    26px 23px 162px rgba(0, 0, 0, 0.06)
  ;
}
.board_list li img {
  display: block;
  width: 100%;
  height: auto;
}
.board_list li div {
  display: block;
  padding: var(--list_item_padding);
  text-align: center;
}
.board_list li div span {
  display: block;
  line-height: 1.1em;
}
.board_list li div span.position {
  font-style: italic;
  opacity: .75;
  font-size: .85em;
  margin-top: .25em;
}
@media (max-width: 70rem) {
  .board_list {
    gap: 1.5rem;
  }
  .board_list li {
    font-size: 1.1em;
  }
}
@media (max-width: 55rem) {
  .board_list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 40rem) {
  .board_list {
    gap: 3vw;
  }
  .board_list li {
    font-size: 1em;
  }
}
@media (max-width: 35rem) {
  .board_list {
    grid-template-columns: 1fr 1fr;
    --list_item_padding: .4rem;
  }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Accordion
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#content .accordion {
  overflow: hidden;
  margin: 1em auto 2em auto;
  width: 100%;
  text-align: left;
  --animation_duration: 900ms;
}
#content .accordion * {
  text-align: inherit;
}
#content .accordion .pic_text_layout .col.text > *:first-child {
  margin-top: 0;
}
.pic_text_layout + .pic_text_layout {
  margin-top: 3em;
}

#content .accordion input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
#content .accordion .tab {
  width: 100%;
  overflow: hidden;
  margin: 0;
}
#content .accordion .tab_label {
  display: flex;
  position: relative;
  padding: 1em 2.9em .9em .9em;
  background-color: #fff;
  background: linear-gradient(to top, var(--color_ci2_50p) 30%, #fff 100%);
  font-weight: var(--font_weight_medium);
  font-size: 1.5em;
  cursor: pointer;
  border-bottom: 1px solid var(--color_ci2);
  transition: all var(--animation_duration) ease;
}
#content .accordion .tab_label:hover {
  background: linear-gradient(to top, var(--color_ci2_30p) 30%, var(--color_ci2_40p) 100%);
}
#content .accordion .tab_label h2 {
  padding: 0;
  margin: 0;
  line-height: 1.3em;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
}
#content .accordion .tab_label::after {
  font-family: var(--fontawesome);
  content: "\f055";
  position: absolute;
  right: 0;
  margin-right: 1em;
  width: 1em;
  height: 1em;
  line-height: 1.3em;
  text-align: center;
  transform-origin: .55em .65em;
  transition: transform var(--animation_duration) ease;
}
#content .accordion .tab_content {
  background-color: #fff;
  transition: grid-template-rows var(--animation_duration) ease;
  display: grid;
  grid-template-rows: 0fr;
}
#content .accordion .tab_content > article {
  display: block;
  overflow: hidden;
  padding: 0 1.5em;
  transition: padding var(--animation_duration) ease;
}
#content .accordion .tab_content > article > *:first-child {
  margin-top: 0;
}
#content .accordion .tab_content > article > *:last-child {
  margin-bottom: 0;
}
#content .accordion .tab_content .button {
  margin-top: 1.5rem;
}
#content .accordion .tab_content p,
#content .accordion .tab_content ul {
  margin-bottom: 1.5em;
}
#content .accordion input:checked + .tab_label {
  background: unset;
  border: 1px solid var(--color_ci);
  margin-top: 10px;
  color: var(--color_ci_10m);
}
#content .accordion input:checked + .tab_label::after {
  transform: rotateY(720deg);
  content: "\f056";
}
#content .accordion input:checked ~ .tab_content {
  grid-template-rows: 1fr;
  border: 1px solid var(--color_ci);
  border-top: none;
}
#content .accordion input:checked ~ .tab_content > article {
  padding-top: 2em;
  padding-bottom: 3em;
}
@media (max-width: 50rem) {
  #content .accordion .tab_label {
    font-size: 1.1em;
  }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Seite "In Gedenken"
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.in_memory_list {
  display: grid;
  align-content: start;
  justify-items: center;
  justify-content: space-between;
  align-items: start;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1.5rem;
  margin: 0 auto !important;
  width: 100%;
  max-width: 1100px;
  --list_item_padding: .6rem;
}
.in_memory_list li {
  position: relative;
  justify-self: stretch;
  align-self: stretch;
  text-align: center;
  text-decoration: none !important;
  font-size: 1em;
  line-height: 1em;
  overflow: visible;
  border-radius: .3rem;
  margin: 0 !important;
  background-color: #252525;
  padding-top: 4px;
}
.in_memory_list li img {
  display: inline-block;
  width: auto;
  height: auto;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.in_memory_list li > div {
  display: block;
  padding: var(--list_item_padding);
  text-align: center;
  color: #fff;
  margin-top: 3px;
  border-radius: 4px;
}
.in_memory_list li div * {
  color: inherit;
}
.in_memory_list li div span {
  display: block;
  line-height: 1.1em;
}
.in_memory_list li div span.name {
  line-height: 1.2em;
  min-height: 2.4em;
}
.in_memory_list li div span.position {
  font-style: italic;
  opacity: .75;
  font-size: .95em;
  margin-top: .25em;
}
.in_memory_list li div span.date_of_birth {
  margin-top: .6em;
}
.in_memory_list li div span.date_of_birth::before {
  content: '*';
  display: inline-block;
  min-width: .7em;
}
.in_memory_list li div span.date_of_death {
  margin-top: .2em;
}
.in_memory_list li div span.date_of_death::before {
  content: '†';
  display: inline-block;
  min-width: .7em;
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    News-Teaser
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#news_teaser {
  overflow: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
}
#news_teaser .teaser {
  flex-grow: 0;
  flex-shrink: 1;
  width: 48%;
  margin: 1%;
}
#news_teaser .teaser img {
  float: left;
  margin: 0 1em .5em 0;
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Aktuelles / News
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#news {
  --teaser_pic_width: 400px;
}
#news #no_news {
  display: block;
  margin-bottom: 8em;
}
#news .newsblock {
  margin-bottom: 3rem;
}
#news .clc {
  overflow: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
}
#news .clc .col {
  flex-grow: 0;
  flex-shrink: 1;
}
#news .clc .col.pic {
  width: var(--teaser_pic_width);
}
#news .clc .col.contents {
  width: calc( 100% - var(--teaser_pic_width) - 2em );
}
#news .clc .col.pic img {
  display: block;
  width: auto;
  max-width: 100%;
}
#news .clc .col.contents h2 {
  margin-top: 0;
}
#news .contents a.fancybox {
  outline: none;
}
#news .contents a.fancybox img {
  max-width: 60%;
}
#news .contents a.fancybox img[style*="float:left"] {
  margin: 0 2em 2em 0;
}
#news .contents a.fancybox img[style*="float:right"] {
  margin: 0 0 2em 2em;
}
#news .flex_gallery {
  margin-top: 1.5rem;
}
#news .news_date {
  display: block;
  float: none;
  clear: both;
  margin-bottom: 2em;
  font-size: .8em;
  padding-right: .5em;
  font-style: italic;
  text-align: right;
  opacity: .4;
}
@media (max-width: 600px) {
  #news .contents a.fancybox {
    display: inline-block;
    overflow: visible;
    line-height: 0;
  }
  #news .contents a.fancybox img {
    float: none !important;
    clear: both;
    max-width: 100%;
    margin: 0 !important;
  }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Download-Liste
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.download_list {
  margin: 0 !important;
  overflow: auto;
}
.download_button {
  display: block;
  width: 100%;
  background-color: #DADADA;
  text-decoration: none !important;
  overflow: auto;
  margin-bottom: 1em;
  border-radius: 3px;
}
.download_button .title,
.download_button .filesize {
  display: table-cell;
  padding: .8em .8em;
}
.download_button .title {
  color: #474747;
  float: left;
}
.download_button .filesize {
  color: #939393;
  text-align: right;
  float: right;
  min-width: 5em;
  background-color: rgba(255,255,255,0.3);
}
.download_button:HOVER {
  background-color: var(--color_ci);
}
.download_button:HOVER .title {
  color: #FFF;
}
.download_button:HOVER .filesize {
  color: #E6E6E6;
}
@media (max-width: 450px) {
  .download_button .filesize {
    display: none;
  }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Termine
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#termine_con {
  text-align: center;
}
#termine_con a {
  margin-bottom: 2rem;
}
#termine_con img {
  display: block;
  width: auto;
  margin-inline: auto;
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Kontakt-Seite
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#contact_data {
  margin: 2rem 0;
}
#contact_data .col {
  width: 50%;
  text-align: center;
}
#contact_data .col .wrapper {
  display: inline-block;
  text-align: left;
  padding: 1.5rem 2rem;
  border: 2px solid var(--color_ci);
}
#emergancy_numbers .col {
  width: 33.33333%;
}
@media (max-width: 50rem) {
  #emergancy_numbers .col {
    width: 100%;
    padding: 1rem;
  }
}
@media (max-width: 48rem) {
  #contact_data {
    max-width: 25rem;
    margin: 1rem auto 2rem;
    padding: 1.5rem 2rem;
    border: 2px solid var(--color_ci);
  }
  #contact_data .col {
    width: 100%;
  }
  #contact_data .col + .col {
    margin-top: 1rem;
  }
  #contact_data .col .wrapper {
    display: block;
    border: none;
    padding: 0;
  }
}
@media (max-width: 22rem) {
  #contact_data {
    padding: 0;
    border: none;
  }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Flex-Galerien
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.flex_gallery {
  overflow: visible;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  margin-bottom: 1.5em;
  --gap: .5rem;
  --pics_per_row: 4;
  gap: var(--gap);
}
.flex_gallery.per_row_2 {
  --pics_per_row: 2;
}
.flex_gallery.per_row_3 {
  --pics_per_row: 3;
}
.flex_gallery.per_row_4 {
  --pics_per_row: 4;
}
.flex_gallery.per_row_5 {
  --pics_per_row: 5;
}
.flex_gallery.per_row_6 {
  --pics_per_row: 6;
}
.flex_gallery.per_row_7 {
  --pics_per_row: 7;
}
.flex_gallery a {
  align-items: center;
  align-content: flex-start;
  flex-grow: 0;
  flex-shrink: 1;
  line-height: 0;
  position: relative;
  width: calc( ( 100% - ( ( var(--pics_per_row) - 1 ) * var(--gap) ) ) / var(--pics_per_row) );
  cursor: zoom-in;
  background-color: #888;
  text-decoration: none !important;
  color: #fff;
  border-radius: .2em;
  overflow: hidden;
  transition: all 250ms ease-in-out;
  box-shadow:
    0px 0px 0.8px rgba(0, 0, 0, 0.031),
    0px 0px 2px rgba(0, 0, 0, 0.044),
    0px 0px 3.8px rgba(0, 0, 0, 0.055),
    0px 0px 6.7px rgba(0, 0, 0, 0.066),
    0px 0px 12.5px rgba(0, 0, 0, 0.079),
    0px 0px 30px rgba(0, 0, 0, 0.11)
  ;
}
.flex_gallery a:hover {
  color: #fff;
}
.flex_gallery a:hover figure img {
  scale: 1.02;
}
.flex_gallery a img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.flex_gallery a figcaption {
  padding: .6em;
  line-height: 1.3em;
  color: #fff;
  font-style: normal !important;
  font-weight: var(--font_weight_light);
  font-size: .95em;
}
.flex_gallery a:hover img {
  filter: saturate(1.15) contrast(1.2);
}
.flex_gallery a div {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(25, 25, 25, .6);
  padding: .4em;
  line-height: 1.2em;
  color: #fff;
}
.flex_gallery a:hover div {
  background-color: var(--color_ci);
}
@media (max-width: 800px) {
  .flex_gallery {
    --gap: 1rem;
  }
  .flex_gallery.per_row_4 {
    --pics_per_row: 2;
  }
  .flex_gallery.per_row_3 {
    --pics_per_row: 2;
  }
}
@media (max-width: 600px) {
  .flex_gallery.per_row_2 a {
    width: 100%;
  }
}
@media (max-width: 400px) {
  .flex_gallery a {
    width: 100%;
  }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Bildquelle
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.psc {
  position: relative;
}
.pic_source {
  font-family: Arial, Verdana, Helvetica, sans-serif !important;
  position: absolute;
  z-index: 1;
  right: 3px;
  bottom: 3px;
  display: inline-block;
  background-color: #777;
  color: #fff;
  vertical-align: top;
  line-height: 1em;
  padding: 1px 0 0 0;
  font-size: 13px;
  cursor: pointer;
  border-radius: 10px;
  font-weight: 300;
  margin-bottom: 0;
}
.pic_source.top {
  bottom: unset !important;
  top: 3px;
}
.pic_source * {
  color: inherit !important;
  vertical-align: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  margin: 0 !important;
  font-size: inherit !important;
  text-transform: none !important;
}
.pic_source::before {
  content: '\00A9';
  display: block;
  float: left;
  overflow: hidden;
  width: 1em;
  height: 1em;
  text-align: center;
  font-weight: 100;
  font-size: 1.2em;
  line-height: 1.05em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.pic_source input[type=checkbox] {
  display: none;
}
.pic_source span {
  display: none;
  padding-top: 1px;
  padding-right: .5em;
  line-height: 1em;
}
.pic_source input[type=checkbox]:checked ~ span {
  display: inline-block;
}
.pic_source input[type=checkbox]:checked ~ span:first-of-type {
  padding-left: .1em;
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Back-to-Top-Button
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#b2t_btn {
  background: #000;
  position: fixed;
  bottom: 1.5%;
  right: 1.5%;
  height: 2em;
  width: 2em;
  border-radius: 99em;
  opacity: .5;
  transition: all .3s ease;
  box-shadow:
    0px 0px 3.1px rgba(255, 255, 255, 0.062),
    0px 0px 7.4px rgba(255, 255, 255, 0.089),
    0px 0px 14px rgba(255, 255, 255, 0.11),
    0px 0px 25px rgba(255, 255, 255, 0.131),
    0px 0px 46.8px rgba(255, 255, 255, 0.158),
    0px 0px 112px rgba(255, 255, 255, 0.22)
  ;
}
#b2t_btn::before {
  content: '';
  display: inline-block;
  position: absolute;
  height: .45em;
  width: .45em;
  border: solid #FFF;
  border-width: .2em 0 0 .2em;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  top: 42%;
  left: 51%;
  margin-left: -16%;
  transition: all .1s ease;
}
#b2t_btn:hover {
  opacity: 1;
}
#b2t_btn:hover::before {
  margin-top: -.2em;
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Google Maps On Demand
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.gmod {
  width: 100%;
  height: 520px;
  border: 1px solid rgba(0,0,0,.2);
  margin-bottom: 1em;
  position: relative;
  overflow: hidden;
}
.gmod .bg_map {
  position: absolute;
  top: -1%;
  left: -1%;
  height: 102%;
  width: 102%;
  background-image: url('../bilder/gmod-bg.png');
  background-repeat: repeat;
  background-position: 0 0;
  filter: blur(.05rem);
}
.gmod .opt_in_banner {
  background-color: rgba(120,120,120,.8);
  color: #fff;
  padding: 1em;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: .85em;
}
.gmod .opt_in_banner .desc {
  color: #fff;
  text-align: center;
  margin-bottom: 1em;
  line-height: 1.3em;
}
.gmod .opt_in_banner .desc a {
  color: inherit !important;
}
.gmod .opt_in_banner .show_map_btn {
  display: inline-block;
  padding: .6em 1.2em;
  margin-bottom: .9em;
  background-color: #2AA549;
  color: #fff;
  border: none;
  font-size: 1em;
  line-height: 1.2em;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,.3);
}
.gmod .opt_in_banner .show_map_btn:hover {
  background-color: #208039;
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Footer
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#footer {
  position: relative;
  overflow: hidden;
  background-color: #222;
  background: linear-gradient(to bottom, #111 30%,#444 100%);
  color: #fff;
  padding: 4rem 0 1rem 0;
}
#footer * {
  color: inherit;
}
#footer .text_con {
  position: relative;
  z-index: 1;
}
#footer a {
  text-decoration: none;
}
#footer a:hover {
  text-decoration: underline !important;
}
#footer .clc {
  justify-content: space-between;
  align-items: center;
  overflow: visible;
}
#footer .clc .col {
  width: 32%;
}
#footer .clc .col_address {
  text-align: left;
}
#footer .clc .col_slogan {
  text-align: center;
}
#footer .clc .col_slogan * {
  text-align: inherit;
}
#footer .crests img {
  display: inline-block;
  margin-inline: 1rem;
}
#footer .slogan {
  font-weight: var(--font_weight_light);
  font-size: 1.5em;
  line-height: 1em;
}
#footer .slogan * {
  font-weight: inherit;
}
#footer .slogan em {
  display: inline-block;
  margin-right: .2em;
}
#footer .clc .col_contact {
  text-align: right;
}
#footer .clc .col .wrapper {
  display: inline-block;
  text-align: left;
}
#footer .legal_menu {
  text-align: center;
  margin-top: 3rem;
}
#footer .legal_menu ul {
  display: inline-block;
}
#footer .legal_menu ul li {
  display: inline-block;
  margin: 0 .7em;
}
#footer a.social_link {
  font-size: 1.7em;
  text-decoration: none !important;
}
#footer .social_link + .social_link {
  margin-left: .4em;
}
#footer svg.hills {
  grid-column: full-width;
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
  height: 40%;
  width: 100%;
  transition: transform 2300ms ease;
  opacity: .05;
  transform: scale(1.9, 1.3);
}
#footer:hover svg.hills {
  transform: scale(1.4, 1.2) translateY(10px);
}
#footer svg.hills polygon {
  fill: url(#gradient);
  transition: transform 1400ms ease;
}
#footer svg.hills .hill_1 {
  filter: blur(.1px);
}
#footer svg.hills .hill_2 {
  filter: drop-shadow(0 0 10px rgb(0 0 0 / .8)) blur(.05px);
}
#footer svg.hills .hill_3 {
  filter: blur(.1px);
}
#footer svg.hills:hover .hill_3 {
  transform: translate(1px, 2px);
}
@media (max-width: 87rem) {
  #footer {
    padding-bottom: 1rem;
  }
  #footer .clc {
    align-items: flex-start;
  }
  #footer .clc .col {
    width: 50% !important;
  }
  #footer .clc .col_menu {
    width: 100% !important;
    text-align: center !important;
    margin-top: 2rem;
    font-size: .9em;
  }
  #footer .clc .col_contact {
    text-align: left;
  }
  #footer .clc .col_menu ul li {
    display: inline-block;
    margin-inline: 1em;
  }
}
@media (max-width: 53rem) {
  #footer .clc .col {
    width: 100% !important;
    text-align: left;
  }
  #footer .clc .col_address {
    margin-bottom: 1rem;
  }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    CWD im Footer
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#cwd {
  padding: .5em 1em;
  color: #fff;
  background-color: #222;
  text-align: center;
  font-size: .75em;
  line-height: 1.4em;
}
#cwd * {
  color: inherit !important;
  line-height: inherit !important;
  opacity: .8;
}
#cwd a {
  text-decoration: none !important;
}
#cwd a:hover {
  text-decoration: underline !important;
  opacity: 1;
}