/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Fonts
███████████████████████████████████████████████████████████████████████████████████████████████
*/
@font-face {
  font-display: swap;
  font-family: "Epilogue";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/epilogue-v19-latin-regular.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Epilogue";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/epilogue-v19-latin-italic.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Epilogue";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/epilogue-v19-latin-500.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Epilogue";
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/epilogue-v19-latin-500italic.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Epilogue";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/epilogue-v19-latin-700.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Epilogue";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/epilogue-v19-latin-700italic.woff2") format("woff2");
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Variablen
███████████████████████████████████████████████████████████████████████████████████████████████
*/
:root {
  /* Fonts */
  --font_serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
  --font_sans_serif: "Epilogue", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif;

  --fontawesome: "Font Awesome 7 Free";
  --fontawesome_brands: "Font Awesome 7 Brands";

  --font_size_html: 20px;

  /* --font_weight_light: 300; */
  --font_weight_normal: 400;
  --font_weight_medium: 500;
  --font_weight_bold: 700;
  /* --font_weight_black: 800; */
  /* --font_weight_extra_bold: 900; */

  /* Layout */
  --scroll_offset: 7rem;
  --text_line_height: 1.7em;
  --text_block_spacer: 1.5rem;
  --header_init_height: 205px;

  /* Colors */
  --color_document_bg: hsl(0, 0%, 100%);

  --clr_primary_h: 203;
  --clr_primary_s: 47%;
  --clr_primary_l: 67%;
  --color_primary: hsl(
    var(--clr_primary_h),
    var(--clr_primary_s),
    var(--clr_primary_l)
  );
  --color_primary_bright: hsl(
    var(--clr_primary_h),
    var(--clr_primary_s),
    min(calc(var(--clr_primary_l) + 20%), 100%)
  );
  --color_primary_dark: hsl(
    var(--clr_primary_h),
    var(--clr_primary_s),
    max(calc(var(--clr_primary_l) - 20%), 0%)
  );

  --clr_secondary_h: 338;
  --clr_secondary_s: 94%;
  --clr_secondary_l: 34%;
  --color_secondary: hsl(
    var(--clr_secondary_h),
    var(--clr_secondary_s),
    var(--clr_secondary_l)
  );
  --color_secondary_bright: hsl(
    var(--clr_secondary_h),
    var(--clr_secondary_s),
    min(calc(var(--clr_secondary_l) + 20%), 100%)
  );
  --color_secondary_dark: hsl(
    var(--clr_secondary_h),
    var(--clr_secondary_s),
    max(calc(var(--clr_secondary_l) - 20%), 0%)
  );

  --color_key: hsl(0, 0%, 11%);

  --color_emphasis: hsl(50, 100%, 63%);

  --color_text_selection: #6c8315;

  --color_text: hsl(0, 0%, 5%);
  --color_heading: hsl(0, 0%, 11%);

  --color_text_link: hsl(240, 81%, 29%);
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
  Defaults / Normalize
███████████████████████████████████████████████████████████████████████████████████████████████
*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
* {
  background-repeat: no-repeat;
}
html,
body {
  min-height: 100%;
}
html {
  font-size: var(--font_size_html);
  scroll-padding-top: var(--scroll_offset);
  scroll-behavior: smooth;
  min-height: 100vh;
  position: relative;
  background-color: var(--color_document_bg);
}
body {
  --font_size_default: clamp(0.87rem, 1.125vw, 1.05rem);
  font-size: var(--font_size_default);
  position: relative;
}
body,
body * {
  font-family: var(--font_sans_serif);
  color: var(--color_text);
  line-height: var(--text_line_height);
  font-weight: var(--font_weight_normal);
}
::selection {
  background-color: var(--color_text_selection);
  color: #fff;
  text-shadow: 0 0 0.2ch rgba(0, 0, 0, 0.2);
}
header,
footer,
main,
section,
article {
  container-type: inline-size;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}
p,
li {
  text-wrap: pretty;
}
p,
table,
section .button_con {
  margin-bottom: var(--text_block_spacer);
}
strong {
  font-weight: var(--font_weight_bold);
}
i,
em {
  font-style: italic;
}
ul[class],
ul[id] {
  list-style: none;
  margin: 0;
  padding: 0;
}
ol li {
  list-style: decimal;
}
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}
figure img {
  border-radius: 0.15rem;
}
main a:not([class]),
main a.telephone,
main a.email {
  color: var(--color_text_link);
  text-decoration: underline;
}
a:hover {
  text-decoration-color: inherit;
}
.center {
  text-align: center !important;
  max-width: unset;
}
.center > * {
  text-align: inherit;
}
.clear {
  clear: both;
  float: none;
  display: block;
}
mark {
  background-image: linear-gradient(
    45deg,
    #ffff17 25%,
    #fff824 25%,
    #fff824 50%,
    #ffff17 50%,
    #ffff17 75%,
    #fff824 75%,
    #fff824 100%
  );
  background-size: 36.77px 36.77px;
  background-repeat: repeat;
  color: #333 !important;
  border-radius: 2px;
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Überschriften
███████████████████████████████████████████████████████████████████████████████████████████████
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  --font_size_factor: 1;
  display: block;
  text-align: left;
  text-box-trim: both;
  line-height: calc(var(--text_line_height) * 0.7);
  color: var(--color_heading);
  font-size: calc(var(--font_size_default) * var(--font_size_factor));
  font-weight: var(--font_weight_medium);
  margin-top: 0;
  margin-bottom: 1.3ch;
}
h1 {
  margin-bottom: 2ch;
}
body:not(.home) h1 {
  color: var(--color_primary_dark);
}
body:not(.home) h2 {
  color: var(--color_secondary);
}
body.home h2 {
  text-align: center;
}
* > h2:not(:first-child),
* > h3:not(:first-child),
* > h4:not(:first-child),
* > h5:not(:first-child),
* > h6:not(:first-child) {
  margin-top: calc(var(--font_size_default) * 0.8);
}
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 * {
  line-height: inherit;
  font-weight: inherit;
}
h1 {
  --font_size_factor: 2.5;
}
h2 {
  --font_size_factor: 1.9;
}
h3 {
  --font_size_factor: 1.7;
}
h3 {
  --font_size_factor: 1.5;
}
h4 {
  --font_size_factor: 1.3;
}
@media (max-width: 40rem) {
  h1 {
    --font_size_factor: 2;
  }
  h2 {
    --font_size_factor: 1.8;
  }
  h3 {
    --font_size_factor: 1.6;
  }
  h3 {
    --font_size_factor: 1.4;
  }
  h4 {
    --font_size_factor: 1.2;
  }
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
  Header
███████████████████████████████████████████████████████████████████████████████████████████████
*/
header.site_header {
  --animation_duration: 150ms;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  transition: all var(--animation_duration) ease-in-out;
  padding-block: 0;
  background-color: #fff;
}
body:not(.home) header.site_header {
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.02), 0px 0px 11px rgba(0, 0, 0, 0.04),
    0px 0px 25px rgba(0, 0, 0, 0.07), 0px 0px 45px rgba(0, 0, 0, 0.09),
    0px 0px 70px rgba(0, 0, 0, 0.11);
}
/* header.site_header::after {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  top: 100%;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(to right, var(--color_primary) 40%, var(--color_secondary) 60%);
  background-size: 400% 100%;
  animation: gradient 20s ease infinite;
}
@keyframes gradient {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
} */
body header.site_header.shrink {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.09), 0px 0px 20px rgba(0, 0, 0, 0.18),
    0px 0px 45px rgba(0, 0, 0, 0.27), 0px 0px 79px rgba(0, 0, 0, 0.36),
    0px 0px 124px rgba(0, 0, 0, 0.45);
}
header.site_header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/*
Top-Line
-----------------------------------------------------------------------------------------------
*/
header.site_header .top_line {
  background-color: var(--color_secondary);
  color: #fff;
  padding-block: 0.5rem;
  font-size: 0.9em;
  transition: padding-block var(--animation_duration) ease-in-out;
}
header.site_header.shrink .top_line {
  padding-block: 0.15rem;
}
header.site_header .top_line * {
  color: inherit;
}
header.site_header .top_line > * {
  display: flex;
  justify-content: space-between;
}
header.site_header .top_line a {
  text-decoration: none;
}
header.site_header .top_line a:hover {
  text-decoration: underline;
}
header.site_header .top_line address {
  font-style: normal;
  display: flex;
  gap: 6ch;
}
header.site_header .top_line address a::before {
  font-family: var(--fontawesome);
  font-size: 0.9em;
  display: inline-block;
  width: auto;
  text-align: center;
  margin-right: 0.4em;
  text-decoration: none;
}
header.site_header .top_line address a.telephone::before {
  content: "\f095"/ "Telefon:";
}
header.site_header .top_line address a.email::before {
  content: "\f0e0"/ "E-Mail:";
}
header.site_header .top_line .social_media_icon_list li {
  line-height: 0;
  display: flex;
  align-items: center;
}
header.site_header .top_line .social_media_icon_list i.fa-brands {
  font-size: 1.4em;
  line-height: 0;
}
header.site_header .top_line .social_media_icon_list li a {
  display: flex;
  align-items: center;
}
header.site_header .top_line ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  gap: 3ch;
}
header.site_header .top_line ul li {
  list-style: none;
  margin: 0;
}
@media (max-width: 35rem) {
  header.site_header .top_line address {
    gap: 0.3rem;
    flex-direction: column;
  }
  header.site_header .top_line address a {
    line-height: 1.1em;
  }
}
/*
Main-Line
-----------------------------------------------------------------------------------------------
*/
header.site_header .main_line {
  padding-block: 1rem;
  transition: all var(--animation_duration);
  background-color: #fff;
}
header.site_header.shrink .main_line {
  padding-block: 0.3rem;
}
header.site_header .main_line > * {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
header.site_header .main_line .logo {
  line-height: 0;
}
header.site_header .main_line .logo a {
  display: inline-block;
}
header.site_header .main_line .logo img {
  display: block;
  width: 250px;
  transition: all var(--animation_duration);
  margin-bottom: 0.1rem;
}
@media (max-width: 90rem) {
  header.site_header:not(.shrink) .logo img {
    width: 380px;
  }
}
@media (max-width: 50rem) {
  header.site_header:not(.shrink) .logo img {
    width: 280px;
  }
}
header.site_header.shrink .main_line .logo img {
  width: 160px;
  margin-bottom: 0;
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
  Main
███████████████████████████████████████████████████████████████████████████████████████████████
*/
body > main {
  --section_padding_block: 3rem;
  padding-block: 3rem;
}
body > main::after {
  content: "" / "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url("../img/haeuser-grafik.webp");
  background-repeat: no-repeat;
  background-position: 50% 80%;
  background-size: min(812px, 70dvw) auto;
  background-attachment: fixed;
  opacity: 0.07;
  filter: blur(1px);
}
body.home > main {
  padding-block: 0;
}
body.home > main::after {
  opacity: 0.1;
}
body.home > main > * {
  position: relative;
}
body > main ul {
  margin-bottom: var(--text_block_spacer);
  margin-left: 1.7em;
}
body > main ul li,
body > main ol li {
  margin-bottom: calc(var(--text_block_spacer) / 2);
}
body > main ul li:last-of-type,
body > main ol li:last-of-type {
  margin-bottom: 0;
}
body > main ul li > :last-child,
body > main ol li > :last-child {
  margin-bottom: 0;
}
body > main hr {
  border: none;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(168, 5, 65, 1) 0%,
    rgba(255, 223, 65, 1) 50%,
    rgba(131, 180, 210, 1) 100%
  );
}
/* body > main p,
body > main li {
  max-width: 90ch;
} */
/*
███████████████████████████████████████████████████████████████████████████████████████████████
  Sections
███████████████████████████████████████████████████████████████████████████████████████████████
*/
main > section {
  padding-block: var(--section_padding_block);
  margin-bottom: 0;
}
body.home main > section {
  --section_padding_block: 4.5rem;
}
body.home main > section:has(+ .wave_border) {
  padding-block-end: calc(var(--section_padding_block) + 18vw);
}
body.home main > .wave_border + section {
  padding-block-start: calc(var(--section_padding_block) + 2.5vw);
}
main > section > :first-child {
  margin-top: 0;
}
main > section > :last-child,
main > section > div:only-child > :last-child {
  margin-bottom: 0;
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Homepage
███████████████████████████████████████████████████████████████████████████████████████████████
*/
body.home h2 .small {
  font-size: max(1rem, 40%);
  text-transform: uppercase;
  line-height: 1.3em;
  margin-bottom: 0.2rem;
}
body.home h2 .small .hidden {
  opacity: 0;
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Intro (auf HP)
███████████████████████████████████████████████████████████████████████████████████████████████
*/
section.intro {
  position: relative;
}
section.intro .text_con {
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px) brightness(160%) contrast(30%);
  width: min(44ch, 97%);
  position: relative;
  bottom: -15rem;
  left: 3%;
  z-index: 1;
  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.8);
}
section.intro .text_con > :last-child {
  margin-bottom: 0;
}
section.intro h1 {
  font-size: 1.4em;
  line-height: 1.1em;
  margin-bottom: 0.3em;
  color: #000;
}
section.intro h1 > span {
  display: block;
  font-weight: var(--font_weight_light);
  font-size: 80%;
  color: inherit;
}
section.intro p {
  font-size: 0.9em;
  margin-bottom: 0.5em;
  color: #000;
  line-height: 1.4em;
}
@media (max-width: 60rem) {
  section.intro {
    padding-block-end: 4rem !important;
  }
  section.intro .text_con {
    left: 5%;
    bottom: -5rem;
  }
}
@media (max-width: 40rem) {
  section.intro .text_con {
    width: 90%;
  }
  section.intro h1 {
    font-size: 1.1em;
  }
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    VJS-Slider
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#slider_con {
  position: absolute;
  inset: 0;
  grid-column: unset;
  background-color: #444;
  min-height: 34vw;
}
#vjs_slider {
  position: absolute;
  inset: 0;
}
#vjs_slider .slide {
  display: none;
  height: 100%;
  animation-name: fade;
  animation-duration: 2500ms;
  position: relative;
}
#vjs_slider .slide:first-of-type {
  display: block;
}
#vjs_slider .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20% 60%;
}
#vjs_slider .arrow {
  cursor: pointer;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  padding: 0.3rem;
  transition: 200ms ease-out;
  transition-property: opacity, background-color;
  transition-duration: 300ms, 200ms;
  user-select: none;
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
  font-weight: 200;
}
#vjs_slider .arrow::after {
  content: "";
  display: block;
  position: relative;
  height: 2.8rem;
  aspect-ratio: 3/4;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="white" d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z"/></svg>');
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
#vjs_slider .arrow.prev::after {
  transform: rotate(180deg);
}
#vjs_slider .prev {
  left: 0;
  border-radius: 0 10% 10% 0;
}
#vjs_slider .next {
  right: 0;
  border-radius: 10% 0 0 10%;
}
#vjs_slider .arrow:hover,
#vjs_slider .arrow:focus-visible {
  background-color: rgba(11, 11, 11, 0.85);
}
@keyframes fade {
  from {
    opacity: 0.1;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 40rem) {
  #vjs_slider .arrow {
    display: none;
  }
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    News (auf HP)
███████████████████████████████████████████████████████████████████████████████████████████████
*/
section.news {
  background-color: var(--color_primary_dark);
  color: #fff;
  position: relative;
  z-index: 0;
}
section.news * {
  color: inherit;
}
section.news::before,
section.news::after {
  content: "" / "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  aspect-ratio: 12 / 1;
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 1440 390" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M 0,400 L 0,150 C 56.14321813149549,152.30181028086534 112.28643626299097,154.60362056173068 150,173 C 187.71356373700903,191.39637943826932 206.99747307953163,225.88732803394257 249,218 C 291.00252692046837,210.11267196605743 355.7236714188826,159.8470673024991 399,133 C 442.2763285811174,106.15293269750089 464.10784124493784,102.72440275606098 501,115 C 537.8921587550622,127.27559724393902 589.8449636013663,155.25532167325696 638,171 C 686.1550363986337,186.74467832674304 730.512304349597,190.25431055091116 772,172 C 813.487695650403,153.74568944908884 852.1058190002461,113.72743612309839 902,108 C 951.8941809997539,102.27256387690161 1013.0644196494186,130.83594495669527 1057,143 C 1100.9355803505814,155.16405504330473 1127.6365024020797,150.9287840501205 1166,155 C 1204.3634975979203,159.0712159498795 1254.3895707422628,171.4489188428227 1302,172 C 1349.6104292577372,172.5510811571773 1394.8052146288687,161.27554057858865 1440,150 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="%234085b0" fill-opacity="1"></path></svg>');
  background-size: 100% 100%;
  background-position: 0 0;
}
section.news::before {
  top: -5vw;
}
section.news::after {
  bottom: -5vw;
  transform: scaleX(-1) scaleY(-1);
  background-size: 100% 101%;
}
section.news h2 {
  text-align: center;
}
section.news .news_teaser {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}
section.news .news_teaser .teaser {
  padding: 2rem 1em;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-color: var(--color_emphasis);

  display: flex;
  flex-direction: column;
}
section.news .news_teaser .teaser p {
  margin-bottom: auto;
}
section.news .news_teaser .teaser h3 {
  font-size: 1.3em;
}
section.news .news_teaser .teaser .button_con {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: var(--text_block_spacer);
}
@media (max-width: 75rem) {
  section.news .news_teaser {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 50rem) {
  section.news .news_teaser {
    grid-template-columns: 1fr;
    width: 30rem;
    max-width: 100%;
    margin-inline: auto;
  }
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Teaser (auf HP)
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.teaser_con {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3.2rem;
  margin-top: 2rem;
}
.teaser_con:has(> :last-child:nth-child(4)) {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1.5rem;
}
.teaser_con > * {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 1rem;
  text-align: center;
}
.teaser_con img {
  order: -1;
  border-radius: 0.3rem;
  width: 470px;
  max-width: 100%;
  margin-inline: auto;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.02), 0px 0px 3px rgba(0, 0, 0, 0.04),
    0px 0px 6px rgba(0, 0, 0, 0.07), 0px 0px 11px rgba(0, 0, 0, 0.09),
    0px 0px 17px rgba(0, 0, 0, 0.11);
}
.teaser_con:has(> :last-child:nth-child(4)) img {
  width: 362px;
}
.teaser_con h3 {
  margin-bottom: -0.5em;
  font-size: 1.1em;
  color: var(--color_primary_dark);
  text-align: inherit;
  font-weight: var(--font_weight_bold);
  min-height: 4ch;
}
section.wave_border .teaser_con h3 {
  color: var(--color_secondary);
}
.teaser_con p {
  margin-bottom: 0;
  line-height: 1.4em;
  min-height: 5ch;
}
@media (max-width: 80rem) {
  .teaser_con {
    gap: 2rem !important;
  }
}
@media (max-width: 70rem) {
  .teaser_con {
    gap: 1rem !important;
  }
}
@media (max-width: 60rem) {
  .teaser_con:has(> :last-child:nth-child(4)) {
    grid-template-columns: 1fr 1fr;
    gap: 3rem 2rem !important;
  }
}
@media (max-width: 50rem) {
  .teaser_con {
    grid-template-columns: 1fr;
    gap: 3rem 1rem !important;
  }
  .teaser_con h3 {
    min-height: unset;
  }
  .teaser_con p {
    min-height: unset;
  }
}
@media (max-width: 35rem) {
  .teaser_con:has(> :last-child:nth-child(4)) {
    grid-template-columns: 1fr;
  }
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Kitas & Hort (auf HP)
███████████████████████████████████████████████████████████████████████████████████████████████
*/
section.kitas_hort h2 .small {
  color: var(--color_primary_dark);
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Schulsozialarbeit (auf HP)
███████████████████████████████████████████████████████████████████████████████████████████████
*/
section.schulsozialarbeit {
  background-color: var(--color_primary_bright);
  position: relative;
}
section.schulsozialarbeit::before,
section.schulsozialarbeit::after {
  content: "" / "";
  display: block;
  position: absolute;
  z-index: 0;
  width: 100%;
  aspect-ratio: 12 / 1;
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 1440 390" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M 0,400 L 0,150 C 46.04271854926115,163.16869333051363 92.0854370985223,176.33738666102724 144,184 C 195.9145629014777,191.66261333897276 253.70097015517194,193.81914668640465 306,184 C 358.29902984482806,174.18085331359535 405.1106822807899,152.38602659335427 453,159 C 500.8893177192101,165.61397340664573 549.8563007216686,200.63674694017817 586,223 C 622.1436992783314,245.36325305982183 645.4641148325359,255.06698564593304 695,218 C 744.5358851674641,180.93301435406696 820.287239948188,97.09531047608975 871,82 C 921.712760051812,66.90468952391025 947.3869253747125,120.55177244970793 991,143 C 1034.6130746252875,165.44822755029207 1096.165058552962,156.69759972507862 1153,170 C 1209.834941447038,183.30240027492138 1261.9528404134394,218.65782864997755 1309,219 C 1356.0471595865606,219.34217135002245 1398.0235797932803,184.67108567501123 1440,150 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="%23cee1ed" fill-opacity="1"></path></svg>');
  background-size: 100% 100%;
  background-position: 0 0;
}
section.schulsozialarbeit::before {
  top: -5.5vw;
}
section.schulsozialarbeit::after {
  bottom: -5.5vw;
  transform: scaleX(-1) scaleY(-1);
  background-size: 100% 101%;
}
section.schulsozialarbeit h2 .small {
  color: var(--color_primary_dark);
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Kinder- & Jugendarbeit (auf HP)
███████████████████████████████████████████████████████████████████████████████████████████████
*/
section.kinder_jugendarbeit {
  padding-block-end: calc(var(--section_padding_block) + 2.5vw);
}
section.kinder_jugendarbeit h2 .small {
  color: var(--color_primary_dark);
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
  Social Media
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.sm_link::before {
  font-family: var(--fontawesome_brands);
  font-size: 1.1em;
  display: inline-block;
  width: auto;
  margin-right: 0.4em;
  text-decoration: none;
}
.sm_link.instagram::before {
  content: "\f16d"/ "Instagram-Logo";
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
  Spalten-Layout
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.col_layout {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 60rem) {
  .col_layout {
    gap: 0;
    grid-template-columns: 1fr;
  }
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
  Figure (klickbar)
███████████████████████████████████████████████████████████████████████████████████████████████
*/
figure[role="button"] {
  cursor: zoom-in;
  transition: transform 0.3s ease;
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
}
figure[role="button"]:hover {
  transform: scale(1.04);
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Bild-Text-Layout
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.pic_text_layout {
  overflow: visible;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: stretch;
  --pic_width: 400px;
  --gap: 3rem;
  margin-bottom: var(--text_block_spacer);
  gap: calc(var(--gap) / 2) var(--gap);
}
.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: 0.5em;
}
.pic_text_layout .col.pic figure + figure {
  margin-top: 0.5rem;
}
.pic_text_layout .col.pic img {
  display: block;
  width: auto;
  max-width: min(100%, var(--pic_width));
}
.pic_text_layout .col.text {
  width: calc(100% - var(--pic_width) - var(--gap));
}
.pic_text_layout .col.text > :last-child {
  margin-bottom: 0;
}
.pic_text_layout .col > h2,
.pic_text_layout .col > h3 {
  margin-top: 0;
}
@media (max-width: 60rem) {
  .pic_text_layout {
    flex-direction: column;
  }
  .pic_text_layout .col {
    width: 100% !important;
  }
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Seite "Über Uns"
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.board {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem;
}
.board li {
  background: linear-gradient(
    125deg,
    rgba(0, 0, 0, 0.05) 20%,
    rgba(0, 0, 0, 0.07) 80%
  );
  backdrop-filter: blur(6px);
  padding: 2ch;
  line-height: 1.4em;
  border-radius: 0.3rem;
  margin-bottom: 0;
}
.board li * {
  line-height: inherit;
}
.board li .name {
  font-weight: var(--font_weight_medium);
}
.board li .position {
  font-size: 0.9em;
  line-height: 1.3em;
}
.board li .name + .position {
  margin-top: 1ch;
}
@media (max-width: 60rem) {
  .board {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 30rem) {
  .board {
    grid-template-columns: 1fr;
  }
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Aktuelles / News
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#news {
  --teaser_pic_width: 400px;
}
#news #no_news {
  display: block;
  margin-bottom: 8rem;
}
#news article {
  container-name: news_article;
  container-type: inline-size;
}
#news article + article {
  margin-top: calc(var(--section_padding_block, 3rem) * 2);
}
#news article .teaser {
  float: inline-end;
  margin-inline-start: 2rem;
  margin-block-end: 1rem;
}
@container news_article (width < 40rem) {
  #news article .teaser {
    float: none;
    margin-inline: auto;
    margin-block-end: var(--text_block_spacer, 1.5rem);
  }
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Seite "Schulsozialarbeit"
███████████████████████████████████████████████████████████████████████████████████████████████
*/
ul.ellipsis {
  margin-bottom: var(--text_block_spacer) !important;
}
.school > * {
  margin-bottom: 0.7rem;
}
.school :last-child {
  margin-bottom: 0;
}
.school .address::before {
  content: "\f3c5"/ "Standort:";
  font-family: var(--fontawesome);
  font-size: 1em;
  display: inline-block;
  width: 1.2rem;
  text-align: center;
  margin-right: 0.2em;
  text-decoration: none;
  opacity: 0.9;
}
.school .address .button {
  margin-top: 0.5rem;
  filter: grayscale(1);
}
.school .address .button:hover {
  filter: unset;
}
.school .address .button::after {
  content: "\f08e"/ "";
  font-family: var(--fontawesome);
  font-size: 0.9em;
  display: inline-block;
  margin-left: 0.5em;
}
.school .staff::before {
  content: "\f500"/ "Personal:";
  font-family: var(--fontawesome);
  font-size: 1em;
  display: inline-block;
  width: 1.2rem;
  text-align: center;
  margin-right: 0.2em;
  text-decoration: none;
  opacity: 0.9;
}
.school table.contact {
  padding: 0.7rem 1rem;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(3px);
  border-radius: 0.5rem;
  box-shadow: 0px 0px 1px rgba(3, 7, 18, 0.01), 0px 0px 5px rgba(3, 7, 18, 0.02),
    1px 1px 11px rgba(3, 7, 18, 0.03), 1px 1px 19px rgba(3, 7, 18, 0.04),
    2px 2px 30px rgba(3, 7, 18, 0.05);
}
.school table.contact caption {
  padding-bottom: 0.2ch;
}
.school table.contact td {
  padding: 0.1em 0.5em;
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Buttons
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.button_con {
  text-align: center;
}
.button {
  display: inline-block;
  padding: 0.5em 2em;
  margin: 0;
  font-weight: var(--font_weight_medium);
  text-align: center;
  text-decoration: none;
  color: #fff !important;
  background-color: var(--color_primary_dark);
  border-radius: 0.2rem;
}
.button.small {
  padding: 0.2em 0.5em;
}
.button.hollow {
  background-color: rgba(255, 255, 255, 0.3);
  font-weight: var(--font_weight_normal);
  border: 1px solid var(--color_primary_dark);
  color: var(--color_primary_dark) !important;
  font-size: 0.95em;
  backdrop-filter: blur(2px);
  border-radius: 0.3rem;
}
.button.red {
  background-color: var(--color_secondary);
  border: 1px solid #fff;
  color: #fff !important;
}
.button:hover {
  background-color: var(--color_secondary);
}
.button.hollow:hover {
  background-color: var(--color_secondary);
  color: #fff !important;
  border-color: transparent;
}
.button.red:hover {
  background-color: var(--color_emphasis);
  border: 1px solid var(--color_emphasis);
  color: #000 !important;
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
  Footer
███████████████████████████████████████████████████████████████████████████████████████████████
*/
body > footer {
  position: relative;
  --padding_block: 3rem;
  background-color: #333;
  color: #fff;
  padding-block: var(--padding_block);
}
body > footer::before {
  content: "" / "";
  display: block;
  position: absolute;
  top: -4.5vw;
  z-index: 0;
  width: 100%;
  aspect-ratio: 15 / 1;
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 1440 390" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M 0,400 L 0,150 C 26.03605086561786,146.7941558173452 52.07210173123572,143.58831163469043 86,158 C 119.92789826876428,172.41168836530957 161.747643940675,204.44090927858346 195,202 C 228.252356059325,199.55909072141654 252.93732250606416,162.6480512509758 294,143 C 335.06267749393584,123.35194874902419 392.5030660350684,120.96688571751324 430,125 C 467.4969339649316,129.03311428248676 485.0504133536623,139.48440587897116 514,167 C 542.9495866463377,194.51559412102884 583.2952805502824,239.0954907666021 613,224 C 642.7047194497176,208.9045092333979 661.7684644452079,134.1336310546204 700,130 C 738.2315355547921,125.8663689453796 795.6308616688863,192.36998501491627 833,198 C 870.3691383311137,203.63001498508373 887.7080888792473,148.3864288857145 920,130 C 952.2919111207527,111.61357111428549 999.5367828141243,130.08429944222567 1034,157 C 1068.4632171858757,183.91570055777433 1090.1447798642553,219.27637334538284 1120,222 C 1149.8552201357447,224.72362665461716 1187.8840977288546,194.81020717624307 1225,190 C 1262.1159022711454,185.18979282375693 1298.3188292203272,205.48279794964483 1334,203 C 1369.6811707796728,200.51720205035517 1404.8405853898364,175.2586010251776 1440,150 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="%23333" fill-opacity="1"></path></svg>');
  background-size: 100% 100%;
}
body > footer:has(> .bottom_line) {
  padding-bottom: 0;
}
body > footer * {
  color: inherit;
}
body > footer a {
  text-decoration: none;
}
body > footer a:hover {
  text-decoration: underline;
}
body > footer .wide {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 4rem;
}
body > footer .heading {
  display: block;
  margin-bottom: 0.5rem;
}
body > footer .iconized::before {
  font-family: var(--fontawesome);
  font-size: 1em;
  display: inline-block;
  width: 1.4rem;
  text-align: center;
  margin-right: 0.4em;
  text-decoration: none;
}
body > footer .iconized.telephone::before {
  content: "\f095"/ "Telefon:";
}
body > footer .iconized.mobile::before {
  content: "\f3cd"/ "Mobil:";
}
body > footer .iconized.fax::before {
  content: "\f1ac"/ "Fax:";
}
body > footer .iconized.email::before {
  content: "\f0e0"/ "E-Mail";
}
body > footer ul {
  margin-left: 1.2rem;
}
body > footer ul li {
  line-height: 1.2em !important;
  margin-bottom: 0.5em;
}
body > footer ul li * {
  line-height: inherit !important;
}
body > footer .legal_nav ul {
  max-width: 13ch;
}
body > footer address {
  font-style: normal;
}
body > footer address .location {
  margin-bottom: 1rem;
}
@media (max-width: 80rem) {
  body > footer .logo_col {
    display: none;
  }
}
@media (max-width: 80rem) {
  body > footer .logo_col {
    display: none;
  }
}
@media (max-width: 60rem) {
  body > footer .wide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem 1rem;
  }
  body > footer .logo_col {
    display: block;
    order: 0;
  }
  body > footer .contact {
    order: 1;
  }
  body > footer .main_nav {
    order: 2;
  }
  body > footer .legal_nav {
    order: 3;
  }
}
@media (max-width: 40rem) {
  body > footer .wide {
    display: flex;
    justify-content: space-around;
    gap: 3rem 1rem;
  }
  body > footer .legal_nav ul {
    max-width: unset;
  }
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Bottom-Line
███████████████████████████████████████████████████████████████████████████████████████████████
*/
body > footer .bottom_line {
  background-color: #222;
  padding: 0.5em 0;
  overflow: visible;
  text-align: center;
  font-size: 0.9em;
  margin-top: var(--padding_block);
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    CWD im Footer
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#cwd {
  padding: 0.5em 1em;
  color: #fff;
  background-color: #222;
  text-align: center;
  font-size: 0.75em;
  line-height: 1.4em;
}
#cwd * {
  color: inherit !important;
  line-height: inherit !important;
  opacity: 0.8;
}
#cwd a {
  text-decoration: none !important;
}
#cwd a:hover {
  text-decoration: underline !important;
  opacity: 1;
}