/* *****************************************
Theme Name: Stiftung Fonk
Theme URI: https://www.stiftung-fonk.de/
Author: Internet Agentur Scherer
***************************************** */

/* ---------------------------------------------------------------------- */
/*                      Fonts                                             */
/* ---------------------------------------------------------------------- */

/* dm-sans-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/dm-sans-v17-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/dm-sans-v17-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/dm-sans-v17-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/dm-sans-v17-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/dm-sans-v17-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/dm-sans-v17-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dm-sans-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/dm-sans-v17-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/dm-sans-v17-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/dm-sans-v17-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/dm-sans-v17-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/dm-sans-v17-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/dm-sans-v17-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/dm-sans-v17-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/dm-sans-v17-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/dm-sans-v17-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/dm-sans-v17-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/dm-sans-v17-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-serif-text-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Serif Text';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dm-serif-text-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-serif-text-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Serif Text';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/dm-serif-text-v13-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/* ---------------------------------------------------------------------- */
/*                      Basics                                            */
/* ---------------------------------------------------------------------- */

:root {
  --header-h: 96px;
  --brand-1: #00708F;
  --brand-2: #ECEAE7;
  --brand-3: #A02DD2;
  --white: #FFFFFF;

  --ff-serif: "DM Serif Text", serif;
  --ff-sans:  "DM Sans", system-ui, sans-serif;

  --fs-80pt: 6.667rem;   /* 80 pt */
  --fs-60pt: 5rem;       /* 60 pt */
  --fs-40pt: 3.333rem;   /* 40 pt */
  --fs-30pt: 2.5rem;     /* 30 pt */
  --fs-20pt: 1.667rem;   /* 20 pt */
  --fs-15pt: 1.65rem;
  --fs-10pt: 1.167rem;

  --fs-display:    clamp(3.2rem, 6vw + 1rem, var(--fs-80pt));  /* Serifen-Hero (80pt) */
  --fs-title:      clamp(2.4rem, 4vw + 0.8rem, var(--fs-60pt));/* Serifen-Titel (60pt) */

  --fs-lead-bold:  clamp(2.5rem, 2.8vw + 0.6rem, var(--fs-40pt));/* Sans ExtraBold (40pt) */
  --fs-sub-bold:   clamp(1.4rem, 2vw + 0.5rem,  var(--fs-15pt));

  --fs-body:       clamp(1.125rem, 0.6vw + 0.9rem, var(--fs-10pt)); /* Standard (20pt) */

  --lh-tight: 1.1;
  --lh-title: 1.2;
  --lh-body:  1.5;

  --space: 7rem;
  --space-small: 5rem;
}

html {
 font-size: 100%;
}

body {
  color: var(--brand-1);
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.container-big {
  max-width: 1920px;
  margin: 0 auto;
}

.container-big img {
  width: 100%;   /* füllt den Container, skaliert bei Bedarf hoch */
  height: auto;  /* Seitenverhältnis bleibt korrekt */
}

@media (min-width: 1400px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1600px;
  }
}

.mt-div {
  margin-top: var(--space) !important;
}

.my-div {
  margin-top: var(--space) !important;
  margin-bottom: var(--space) !important;
}


.p-div {
  padding: var(--space) !important;
}

.py-div {
  padding-top: var(--space) !important;
  padding-bottom: var(--space) !important;
}

.py-div-m {
  padding-top: var(--space-small) !important;
  padding-bottom: var(--space-small) !important;
}




.row {
  margin-right: 0px;
  margin-left: 0px;
}

p {
  color: var(--brand-1);
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

a,
a:hover,
a:focus {
  color: var(--brand-1);
}

#main .link-underline {
  text-decoration: none; position: relative; color: var(--brand-1);
}
#main .link-underline::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background: currentColor; transform: scaleX(0); transform-origin:left;
  transition: transform .25s ease;
}
#main .link-underline:hover::after,
#main .link-underline:focus-visible::after{ transform: scaleX(1); }



/* ---------------------------------------------------------------------- */
/*                      Header                                            */
/* ---------------------------------------------------------------------- */

header.container-header {
  background-color: var(--white);
  background-image: none;
}

header.container-header .header-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

header.container-header .header-row__brand {
  flex: 0 0 auto;
}

header.container-header .header-row__brand img.img-brand {
  width: 100%;
  max-width: 150px;
}

header.container-header .header-row__nav {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 1rem;
}

header.container-header .header-row__nav .site-nav {
  grid-column: 2;
  justify-self: center;
}

header.container-header .header-row__nav .site-search {
  grid-column: 3;
  justify-self: end;
}

header.container-header .header-row .site-nav ul,
header.container-header .header-row .site-nav .navbar-nav,
header.container-header .header-row .site-nav .mod-menu {
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

header.container-header .header-row .site-nav,
header.container-header .header-row .site-nav ul,
header.container-header .header-row .site-nav .navbar-nav,
header.container-header .header-row .site-nav .mod-menu {
  float: none;
  text-align: initial;
  margin-inline-start: 0;
}

header.container-header .header-row__brand .navbar-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
}

@media (max-width: 992px) {
	header.container-header .header-row {
	  flex-wrap: wrap;
	}
}

header.container-header .header-row .site-nav ul,
header.container-header .header-row .site-nav .navbar-nav,
header.container-header .header-row .site-nav .mod-menu {
  gap: 1.25rem; /* z. B. 20px */
}

.container-header .mod-menu>li:after { content: none; }

@media (max-width: 1200px) {
	header.container-header .header-row .site-nav ul,
	header.container-header .header-row .site-nav .navbar-nav,
	header.container-header .header-row .site-nav .mod-menu {
	  gap: .5rem;
	}
}

@media (max-width:  992px) {
	header.container-header .header-row .site-nav ul {
	  gap: .75rem;
	}
}

header.container-header .header-row .site-nav a {
  padding-inline: .1rem;
  padding-block: .375rem;
  color: var(--brand-1);
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media (max-width: 1200px) {
	header.container-header .header-row .site-nav a {
	  font-size: 1.2rem;
	}
}


header.container-header .header-row .site-nav .navbar-nav > li > a {
  padding-inline: .75rem;
}

header.container-header .header-row .site-nav .navbar-nav {
  gap: 1rem;
}

header.container-header .header-row .site-nav .mod-menu a.kontakt {
  color: var(--brand-1);
  align-items: center;
  padding: .5rem .9rem;
  border: 2px solid var(--brand-1);
  border-radius: 999px;
  background: transparent;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .05s;
}

header.container-header .header-row .site-nav .mod-menu a.kontakt:hover,
header.container-header .header-row .site-nav .mod-menu a.kontakt:focus{
  background: var(--brand-1);
  color: #fff;
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta-color) 25%, transparent);
}

header.container-header .header-row .site-nav .mod-menu a.kontakt:focus-visible{
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--cta-color) 30%, transparent);
}

header.container-header .header-row .site-nav .mod-menu a.kontakt:active{
  transform: translateY(1px);
}

header.container-header .header-row .site-nav .mod-menu .current > a.kontakt,
header.container-header .header-row .site-nav .mod-menu .active  > a.kontakt{
  background: var(--brand-1);
  color: #fff;
  border-color: var(--brand-1);
}


/* ---------------------------------------------------------------------- */
/*                      Mobile                                            */
/* ---------------------------------------------------------------------- */

.burger {
  position: relative;

  width: 44px;
  height: 44px;
  padding: 10px;
  border: 2px solid var(--brand-1);
  border-radius: 999px;
  background: transparent;
  display: inline-flex;
  gap: 4px;
  flex-direction: column;
  justify-content: center;
}
.burger span {
  display:block;
  width: 20px;
  height: 2px;
  background: var(--brand-1);
  border-radius: 2px;
}
.burger:focus {
  outline: none;
  box-shadow: 0 0 0 .25rem color-mix(in oklab, var(--brand-1) 30%, transparent);
}

header.container-header .header-row__nav #trigger-overlay {
  grid-column: 2;
  justify-self: center;
  align-self: center;
  width: auto;
}

.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  visibility: hidden; opacity: 0;
  transition: opacity .2s ease, visibility .2s step-end;
}

.overlay.open {
  visibility: visible; opacity: 1;
  transition: opacity .2s ease, visibility .2s step-start;
}

.overlay__panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(85vw, 420px);
  background: #fff;
  transform: translateX(100%);
  transition: transform .2s ease;
}

.overlay.open .overlay__panel { transform: translateX(0); }

.overlay-close{
  position: absolute;
  top: .75rem; right: .75rem;
  appearance: none;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 2px solid var(--brand-1, #333);
  background: transparent;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.overlay-close::before,
.overlay-close::after{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px; height: 2px;
  background: var(--brand-1, #333);
  transform-origin: center;
}
.overlay-close::before{ transform: rotate(45deg); }
.overlay-close::after{  transform: rotate(-45deg); }

.overlay-close:hover,
.overlay-close:focus{
  background: var(--brand-1, #333);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-1, #333) 25%, transparent);
}

.overlay-close:hover::before,
.overlay-close:hover::after,
.overlay-close:focus::before,
.overlay-close:focus::after{
  background: #fff;
}

.overlay__panel .site-nav .mod-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.overlay__panel .site-nav .mod-menu > li > a {
  display: block;
  padding: .625rem .75rem;
  text-decoration: none;
}

.overlay__panel .site-nav .mod-menu > li > a { text-align: center; }

.overlay__panel .site-nav .mod-menu > li > a::after { content: none; }

.overlay__panel .site-nav .mod-menu > li > a.kontakt{
  --cta-color: var(--brand-3, #0d6efd);
  display: inline-flex;
  justify-content: center;
  margin-inline: auto;         /* zentriert */
  padding: .6rem 1rem;
  border: 2px solid var(--cta-color);
  border-radius: 999px;
  background: transparent;
  color: var(--cta-color);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.overlay__panel .site-nav .mod-menu > li > a.kontakt:hover,
.overlay__panel .site-nav .mod-menu > li > a.kontakt:focus{
  background: var(--cta-color);
  color: #fff;
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta-color) 25%, transparent);
}


/* ---------------------------------------------------------------------- */
/*                      Hero                                              */
/* ---------------------------------------------------------------------- */

#hero .claim {
  background: var(--brand-1);
}

#hero .claim h1.hero-title {
  color: var(--white);
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
}

.projekte #hero .claim h1.hero-title {
  color: var(--white);
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 900;
  font-size: 2.5rem;
}

.projekte #hero .claim p.hero-text {
  color: var(--white);
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-size: 1.0rem;
  line-height: 1.3;
}

.projekte #hero .claim .equal-row {
  display: flex;
  align-items: stretch;
}

.projekte #hero .claim .claim-img {
  display: flex;
}

.projekte #hero .claim-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ---------------------------------------------------------------------- */
/*                      Intro                                        */
/* ---------------------------------------------------------------------- */

#intro,
#intro .intro,
#intro .intro-text,
#intro .intro-cta {
  background: var(--brand-2);
}

#intro .intro h1.intro-title {
  color: var(--brand-1);
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-lead-bold);
  line-height: var(--lh-tight);
}

#intro .intro h2.intro-title {
  color: var(--brand-1);
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-lead-bold);
  line-height: var(--lh-tight);

}

#intro .intro-text p {
  color: var(--brand-1);
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

#intro .cta-wrap {
  text-align: center;
}

#intro .btn-cta {
  --cta-color: var(--brand-3);
  display: inline-block;
  padding: .625rem 1rem;
  border: 2px solid var(--brand-3);
  border-radius: 999px;
  background: transparent;
  color: var(--brand-3);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}

#intro .btn-cta:hover,
#intro .btn-cta:focus {
  background: var(--brand-3);
  color: var(--white);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-3) 25%, transparent);
}

/* Tastaturfokus sichtbar, auch ohne Hover */
#intro .btn-cta:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand-3) 30%, transparent);
}

#intro .btn-cta[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

#intro ul li {
  color: var(--brand-1);
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media (max-width: 768px) {
	 body.stiftung  #intro .py-div-m  {
	  padding-top: 0px !important;
	  padding-bottom: 0px !important;
	}
	 body.stiftung  #intro .p-5  {
	  padding-top: 0px !important;
	}
}

/* ---------------------------------------------------------------------- */
/*                      Foerderung                                        */
/* ---------------------------------------------------------------------- */

main #foerderung h2 {
  color: var(--brand-1);
  text-align: center;
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-lead-bold);
  line-height: var(--lh-tight);
}

main #foerderung .tile {
  border-radius: 25px;
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
}

main #foerderung .bildung {
  background: var(--brand-1);
}

main #foerderung .bildung img.tile-icon {
  text-center;
  width: 80px;
  aspect-ratio: 1;
  display:block; margin-inline:auto; 
}

main #foerderung .bildung h3 {
  color: var(--white);
  text-align: center;
}

main #foerderung .bildung p {
  color: var(--white);
  text-align: center;
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

main #foerderung .gesundheit {
  background: var(--brand-2);
}

main #foerderung .gesundheit img.tile-icon {
  text-center;
  width: 80px;
  aspect-ratio: 1;
  display:block; margin-inline:auto; 
}

main #foerderung .gesundheit h3 {
  color: var(--brand-1);
  text-align: center;
}

main #foerderung .gesundheit p {
  color: var(--brand-1);
  text-align: center;
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

main #foerderung .kinder-jugendhilfe {
  background: var(--brand-3);
}

main #foerderung .kinder-jugendhilfe img.tile-icon {
  text-center;
  width: 80px;
  aspect-ratio: 1;
  display:block; margin-inline:auto; 
}

main #foerderung .kinder-jugendhilfe h3 {
  color: var(--white);
  text-align: center;
}

main #foerderung .kinder-jugendhilfe p {
  color: var(--white);
  text-align: center;
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

main #foerderung .cta-wrap {
  text-align: center;
}

main #foerderung .btn-cta {
  --cta-color: var(--brand-3);
  display: inline-block;
  padding: .625rem 1rem;
  border: 2px solid var(--brand-3);
  border-radius: 999px;
  background: transparent;
  color: var(--brand-3);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}

main #foerderung .btn-cta:hover,
main #foerderung .btn-cta:focus {
  background: var(--brand-3);
  color: var(--white);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-3) 25%, transparent);
}

/* Tastaturfokus sichtbar, auch ohne Hover */
main #foerderung .btn-cta:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand-3) 30%, transparent);
}

main #foerderung .btn-cta[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

body.foerderung .antrag-bg-1 {
  background: var(--brand-2);
  border-radius: 25px;
}

body.foerderung #foerderung-antrag h2 {
  color: var(--brand-1);
  text-align: center;
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-lead-bold);
  line-height: var(--lh-tight);
}

body.foerderung .antrag-bg-1 .cta-wrap {
  text-align: center;
}

body.foerderung .antrag-bg-1 .btn-cta {
  --cta-color: var(--brand-3);
  display: inline-block;
  padding: .625rem 1rem;
  border: 2px solid var(--brand-3);
  border-radius: 999px;
  background: transparent;
  color: var(--brand-3);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}

body.foerderung .antrag-bg-1 .btn-cta:hover,
body.foerderung .antrag-bg-1 .btn-cta:focus {
  background: var(--brand-3);
  color: var(--white);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-3) 25%, transparent);
}

/* Tastaturfokus sichtbar, auch ohne Hover */
body.foerderung .antrag-bg-1 .btn-cta:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand-3) 30%, transparent);
}

body.foerderung .antrag-bg-1 .btn-cta[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

body.foerderung .antrag-bg-2 {
  background: var(--brand-1);
  border-radius: 25px;
}

body.foerderung #stipendien-antrag h2 {
  color: var(--brand-1);
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-lead-bold);
  line-height: var(--lh-tight);
}

body.foerderung .antrag-bg-2 h3 {
  color: var(--white);
}

body.foerderung .antrag-bg-2 p {
  color: var(--white);
}

body.foerderung .antrag-bg-2 ul li {
  color: var(--white);
}

body.foerderung .antrag-bg-2 .cta-wrap {
  text-align: center;
}

body.foerderung .antrag-bg-2 .btn-cta {
  --cta-color: var(--white);
  display: inline-block;
  padding: .625rem 1rem;
  border: 2px solid var(--white);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}

body.foerderung .antrag-bg-2 .btn-cta:hover,
body.foerderung .antrag-bg-2 .btn-cta:focus {
  background: var(--white);
  color: var(--brand-1);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-3) 25%, transparent);
}

/* Tastaturfokus sichtbar, auch ohne Hover */
body.foerderung .antrag-bg-2 .btn-cta:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand-3) 30%, transparent);
}

body.foerderung .antrag-bg-2 .btn-cta[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

body.foerderung #main h2.intro-title {
  color: var(--brand-1);
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-lead-bold);
  line-height: var(--lh-tight);
}

body.foerderung #main .intro-text p {
  color: var(--brand-1);
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media (max-width: 768px) {
	body.foerderung #main .p-5 {
	  padding: 0.8rem !important;
	}
}


/* ---------------------------------------------------------------------- */
/*                      Projekte                                          */
/* ---------------------------------------------------------------------- */

main #projekte h2 {
  color: var(--brand-1);
  text-align: center;
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-lead-bold);
  line-height: var(--lh-tight);
}

main #projekte .tile {
  border-radius: 25px;
}

main #projekte .projekte {
  background: var(--brand-1);
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
  display: flex;
  flex-direction: column;
  width: 100%;
}

main #projekte .projekte img.tile-hero {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

main #projekte .projekte-body{
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

main #projekte .projekte h3 {
  color: var(--white);
}

main #projekte .projekte p {
  color: var(--white);
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

main #projekte .projekte a {
  color: var(--white);
  font-size: 0.8rem;
}

main #projekte .cta-wrap {
  text-align: center;
}

main #projekte .btn-cta {
  --cta-color: var(--brand-3);
  display: inline-block;
  padding: .625rem 1rem;
  border: 2px solid var(--brand-3);
  border-radius: 999px;
  background: transparent;
  color: var(--brand-3);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}

main #projekte .btn-cta:hover,
main #projekte .btn-cta:focus {
  background: var(--brand-3);
  color: var(--white);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-3) 25%, transparent);
}

/* Tastaturfokus sichtbar, auch ohne Hover */
main #projekte .btn-cta:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand-3) 30%, transparent);
}

main #projekte .btn-cta[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

.projekte main #projekt img.projekt-img {
  width: 100%;
  max-width: 450px;
  float: right;
}

@media (max-width: 992px) {
	.projekte main #projekt img.projekt-img {
	  width: 100%;
	  float: none;
	  display: block;
	  margin: 0 auto;
	}
}

.projekte main #projekt p {
  color: var(--brand-1);
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.projekte main #projekt .cta-wrap {
  text-align: center;
}

.projekte main #projekt .btn-cta {
  --cta-color: var(--brand-3);
  display: inline-block;
  padding: .625rem 1rem;
  border: 2px solid var(--brand-3);
  border-radius: 999px;
  background: transparent;
  color: var(--brand-3);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}

.projekte main #projekt .btn-cta:hover,
.projekte main #projekt .btn-cta:focus {
  background: var(--brand-3);
  color: var(--white);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-3) 25%, transparent);
}

/* Tastaturfokus sichtbar, auch ohne Hover */
.projekte main #projekt .btn-cta:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand-3) 30%, transparent);
}

.projekte main #projekt .btn-cta[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

/* ---------------------------------------------------------------------- */
/*                      Stiftung                                          */
/* ---------------------------------------------------------------------- */


.stiftung h2 {
  color: var(--brand-1);
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-lead-bold);
  line-height: var(--lh-tight);

}

.stiftung .stiftung-bg {
  background: var(--brand-3);
  border-radius: 25px;
}

.stiftung .stiftung-bg-1 {
  background: var(--brand-1);
  border-radius: 25px;
}


.stiftung #stiftung h3 {
  color: var(--white);
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 900;
  font-size: 2.0rem;
}

.stiftung #stiftung p {
  color: var(--white);
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.stiftung #stiftung h3.stiftung-title {
  color: var(--brand-1);
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-lead-bold);
  line-height: var(--lh-tight);
}

.stiftung #stiftung p.stiftung-text {
  color: var(--brand-1);
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.stiftung #stiftungsorgane {
  background: var(--brand-2);
}

.stiftung #stiftungsorgane h2 {
  color: var(--brand-1);
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-lead-bold);
  line-height: var(--lh-tight);
}

.stiftung #stiftungsorgane .card {
  background: var(--white);
  border-radius: 25px;
  min-height: 250px;
}

.stiftung #stiftungsorgane .card h3 {
  color: var(--brand-1);
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 900;
  font-size: 1.3rem;
}

.stiftung #stiftungsorgane .card p {
  color: var(--brand-1);
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.stiftung #kontakt .cta-wrap {
  text-align: center;
}

.stiftung #kontakt .btn-cta {
  --cta-color: var(--brand-3);
  display: inline-block;
  padding: .625rem 1rem;
  border: 2px solid var(--brand-1);
  border-radius: 999px;
  background: transparent;
  color: var(--brand-1);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}

.stiftung #kontakt .btn-cta:hover,
.stiftung #kontakt .btn-cta:focus {
  background: var(--brand-1);
  color: var(--white);
  outline: none;
}

/* Tastaturfokus sichtbar, auch ohne Hover */
.stiftung #kontakt .btn-cta:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand-1) 30%, transparent);
}

.stiftung #kontakt .btn-cta[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

/* ---------------------------------------------------------------------- */
/*                      Spenden                                           */
/* ---------------------------------------------------------------------- */

#spenden .spenden {
  background: var(--brand-3);
}

#spenden .spenden h2.spenden-title {
  color: var(--white);
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-lead-bold);
  line-height: var(--lh-tight);
}

#spenden .spenden .btn-cta {
  --cta-color: var(--white);
  display: inline-block;
  padding: .625rem 1rem;
  border: 2px solid var(--white);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}

@media (max-width: 720px) {
	#spenden .spenden .btn-cta {
	  font-size: 1.0rem;
	}
}

#spenden .spenden .btn-cta:hover,
#spenden .spenden .btn-cta:focus {
  background: var(--white);
  color: var(--brand-3);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--white) 25%, transparent);
}

/* Tastaturfokus sichtbar, auch ohne Hover */
#spenden .spenden .btn-cta:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--white) 30%, transparent);
}

#spenden .spenden .btn-cta[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

body.spenden .spenden {
  background: var(--brand-3);
}

body.spenden .spenden h1.spenden-title {
  color: var(--white);
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-lead-bold);
  line-height: var(--lh-tight);
}

body.spenden #intro {
  background: var(--brand-2);
}

body.spenden .spenden-bg {
  border: 2px solid var(--brand-3);
  border-radius: 25px;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-3) 25%, transparent);
}

body.spenden .spenden-bg h3 {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--brand-3);
  text-align: center;
}

body.spenden .spenden-bg p {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--brand-3);
  text-align: center;
}

body.spenden #main h2.intro-title {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-lead-bold);
  line-height: var(--lh-tight);

}

/* ---------------------------------------------------------------------- */
/*                      FAQ                                               */
/* ---------------------------------------------------------------------- */

body.faq #hero {
  background: var(--brand-3);
}

body.faq #hero h1.faq-title {
  color: var(--white);
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-lead-bold);
  line-height: var(--lh-tight);
}

body.faq .faq-bg {
  background: var(--brand-2);
  border-radius: 25px;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-2) 25%, transparent);

}

body.faq .faq-bg h2 {
  color: var(--brand-1);
  font-family: var(--ff-sans);
  font-weight: 900;
  font-size: var(--fs-sub-bold);
  line-height: var(--lh-body);
}



/* ---------------------------------------------------------------------- */
/*                      Kontakt                                           */
/* ---------------------------------------------------------------------- */

#kontakt .kontakt {
  background: var(--brand-2);
}

#kontakt .kontakt h2.kontakt-title {
  color: var(--white);
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-lead-bold);
  line-height: var(--lh-tight);
}

#kontakt .kontakt p {
  color: var(--white);
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

#kontakt .kontakt .kontakt-card {
  background: var(--brand-1);
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (max-width: 720px) {
	#kontakt .kontakt .kontakt-card.p-div {
	  padding-left: 10px !important;
	  padding-right: 10px !important;
	}
}

#kontakt .kontakt .kontakt-card .form-control::placeholder {
  color: #b7c0cc;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1rem;
  opacity: 1;
}

#kontakt .kontakt .kontakt-card .btn-row {
  text-align: center;
}

#kontakt .kontakt .kontakt-card .btn-cta {
  appearance: none;
  border: 2px solid var(--white);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  font-weight: 600;
  padding: .625rem 1rem;
  display: inline-flex;
  width: auto;
  inline-size: fit-content;
  flex: 0 0 auto;
  align-self: flex-start;
  transition: background-color .2s, color .2s, border-color .2s;
}

#kontakt .kontakt .kontakt-card .btn-cta:hover {
  color: var(--brand-1);
  background: var(--white);
  border: 2px solid var(--brand-1);
}


#kontakt .kontakt .kontakt-card .btn-cta:disabled,
#kontakt .kontakt .kontakt-card .btn-cta[disabled],
#kontakt .kontakt .kontakt-card .btn-cta[aria-disabled="true"] {
  pointer-events: none;
  cursor: not-allowed;
}

#kontakt .kontakt .kontakt-card .cf-feedback,
#kontakt .kontakt .kontakt-card #cf-feedback,
#kontakt .kontakt .kontakt-card .form-check-label,
#kontakt .kontakt .kontakt-card .form-check-label a {
  color: var(--white);
}

body.kontakt #hero {
  background: var(--brand-3);
}

body.kontakt h1.kontakt-title {
  color: var(--white);
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-lead-bold);
  line-height: var(--lh-tight);
}

body.kontakt h2.kontakt-title {
  color: var(--brand-1);
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-lead-bold);
  line-height: var(--lh-tight);
}

/* ---------------------------------------------------------------------- */
/*                      Legal                                             */
/* ---------------------------------------------------------------------- */

body.legal #intro {
  background: var(--brand-2);
}

body.legal .img-frame {
  display:block;
  border:1px solid var(--brand-1);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}


/* ---------------------------------------------------------------------- */
/*                      Footer                                            */
/* ---------------------------------------------------------------------- */

#footer.footer {
  background: var(--brand-1);
  background-image: none;
  margin-top: 0em;
}

#footer.footer .grid-child {
  padding: 0.5rem 0.5rem;
}

#footer.footer .footer-row__brand img.img-brand {
  width: 100%;
  max-width: 150px;
}

#footer.footer .footer-row .footer-row__social{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

#footer.footer .footer-row .footer-row__social a {
  display: inline-flex;
  line-height: 0;
}

#footer.footer .footer-row .footer-row__social img.tile-icon {
  width: 50px;
  aspect-ratio: 1;
  display: block;
  margin-inline: auto;
}

#footer.footer .footer-row .footer-row__nav a {
  position: relative;
  padding-inline: .1rem;
  padding-block: .375rem;
  color: var(--white);
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-decoration: none;
}

#footer.footer .footer-row .footer-row__nav .metismenu .metismenu-item > a,
#footer.footer .footer-row .footer-row__nav .metismenu .metismenu-item > span,
#footer.footer .footer-row .footer-row__nav .metismenu .metismenu-item > button{
  overflow: visible;
  position: relative;
  text-decoration: none;
  display: inline-block;
}

#footer.footer .footer-row .footer-row__nav a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}

#footer.footer .footer-row .footer-row__nav a:hover::after,
#footer.footer .footer-row .footer-row__nav a:focus-visible::after{
  transform: scaleX(1);
}

@media (max-width: 991.98px){
	.footer-row__brand,
	.footer-row__nav {
	  margin-bottom: 1rem;
	}
	.footer-row__nav .mod-menu{
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  gap: .5rem;
	  margin: 0;
	  padding: 0;
	}
	.metismenu.mod-menu .metismenu-item {
	  padding: 0px;
	}
	.footer-row__nav .mod-menu > li{
	  list-style: none;
	}
	.footer-row__nav .mod-menu > li > a{
	  display: inline-block;
	  text-align: center;
	}
	#footer.footer .footer-row .footer-row__nav a {
	  padding-block: 0px;
	}
}