/*
Template Name: Jedes Kind zählt 2024
Text Domain: jkz2024
Author: Daniel Reitzig
Author URI: https://danielreitzig.de
*/

/* young-serif-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: 'Young Serif';
         font-style: normal;
         font-weight: 400;
         src: url('media/fonts/young-serif-v2-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
  --font-size: clamp(18px, 2.5vw, 24px);
  --font-size: clamp(1rem, 1.1rem + ((1vw - 10.68px) * 0.361), 1.2rem);
  --font-size: clamp(1rem, 1.313rem + ((1vw - 7.68px) * 0.361), 2rem);
  --heading-font-size: calc(var(--font-size)*1.75);
  --hero-heading-font-size: calc(var(--font-size)*2.5);
  --wp-preset-font-size: var(--font-size);
  --wp--preset--font-size--heading-1: var(--font-size);
  --line-height: calc(var(--font-size)*1.2);
  --padding: calc(var(--font-size)*2.5);
  --padding-small: calc(var(--padding)/2);
  --padding-s: calc(var(--padding)/2);
  --padding-large: calc(var(--padding)*2);
  --padding-xl: calc(var(--padding)*2);
  --padding-extra-small: calc(var(--padding-small)*.75);
  --background-color: #fff;
  --background-color-darken: #eee;
  --background-secondary-color: #aaa;
  --text-color: #222;
  --text-color: #0a2342;
  --text-color-light: var(--background-secondary-color);
  --wp-preset-button-color-1: #5857FF;
  --wp-preset-button-color-1: #5451f6;
  --wp-preset-button-color-1: #932afe;
  --transition-time: 250ms;
  --transition-mode: ease-in-out;
  --border-radius: calc(var(--font-size)/5);
  --highlight-color: #f6c84a;
  --grid-gap: var(--padding);
  --brand-color: #0179bc;
  --brand-color-darken-30: #015584;
  --brand-color-darken-70: #002438;
  --button-background-color: var(--brand-color);
  --button-background-hover-color: var(--brand-color-darken-30);
  --button-color: #fff;
  --body-font: 'Albert Sans', sans-serif;
  --menu-font: 'Albert Sans', sans-serif;
  --heading-font: 'Young Serif', serif;
  --p-width: calc(var(--font-size)*36);
  --max-page-width: 100vw;
  --space: var(--padding);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  height: 100%;
  z-index: 0;
  width: 100%;
  max-width: var(--max-page-width);
  position: fixed;
}

body {
  font-family: Arial, sans-serif;
  font-family: var(--body-font);
  background: var(--background-color);
  color: var(--text-color);
}

.content {
  position: relative;
  width: 100%;
  max-width: var(--max-page-width);
  min-height: 100vh;
  overflow-y: auto;
  height: 100%;
  padding-top: var(--padding);
  z-index: 1;
}

body,
input {
  line-height: var(--line-height);
  font-size: var(--wp-preset-font-size);
}

.forminator-label,
label {
  font-size: calc(var(--font-size)*.75) !important;
  color: currentColor !important;
  font-weight: normal !important;
}

main,
article,
header,
footer,
section {
  width: 100vw;
  position: relative;
  display: flex;
}

main,
article,
footer,
section {
  padding: var(--padding-small) var(--padding);
}

footer,
header {
  background: var(--brand-color);
  color: var(--background-color);
  font-family: var(--menu-font);
  padding: 0 var(--padding);
}

nav {
  width: 100%;
}

footer,
nav,
header {
  display: flex;
  flex-flow: row;
  align-items: center;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  height: calc(var(--padding)*2.25);
}


footer img {
  height: var(--padding);
  width: auto;
}

.sociallink {
  padding: 0;
}

footer .sociallink:first-of-type {
  margin-left: var(--padding-xl);
}

ul.mobile-social {
	display: flex;
	flex-flow: row;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: var(--padding-small);
	left: 0;
	width: 100%;
}

footer li a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40vh;
  background-image: url('media/images/bg-top.png');
  /* Add paths to your images */
  background-repeat: no-repeat;
  background-position: center 2rem;
  background-size: 100% 40vh;
  background-attachment: fixed;
  margin: 0;
  /* Remove default margin */
}

.footer-menu {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}

.bottom-bg {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40vh;
  background-image: url('media/images/bg-bottom.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 40vh;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  background-attachment: fixed;
  margin: 0;
}

nav,
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo,
.mobile-menu {
  display: flex;
  justify-content: center;
  align-items: center;
}

footer {
  justify-content: space-between;
  padding: var(--padding-small) var(--padding-small);
  height: 6rem;
  z-index: 999;
}

main,
article,
section {
  flex-flow: column;
  align-items: center;
  z-index: 1;
}

p {
  padding-top: var(--padding-small);
  padding-bottom: var(--padding-small);
  max-width: var(--p-width);
}

footer ul,
footer li,
header ul,
header li {
  display: flex;
  list-style: none;
  align-items: center;
  margin: 0 !important;
  justify-content: center;
}

footer ul,
header ul {
  padding: 0;
  margin: 0;
}

footer li:not(:first-of-type),
header li:not(:first-of-type) {
  margin-left: var(--padding);
}

footer li,
header li {
  padding: calc(var(--padding-small)/4) calc(var(--padding-small)*.75);
  border: none;
  transition: all var(--transition-time) var(--transition-mode);
}

footer li {
  font-size: calc(var(--font-size)*.75);
  padding: calc(var(--padding-small)/8);
}

footer li:hover,
header li:hover {
  border-bottom: 3px solid var(--background-color);
  transition: all var(--transition-time) var(--transition-mode);
}

.mobile-menu-page img,
header img,
nav img {
  height: calc(var(--padding)*1.5) !important;
  width: auto;
}

.mobile-menu-page ul,
.mobile-menu-page li {
  font-size: var(--heading-font-size);
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: calc(var(--line-height)*1.75);
  text-align: center;
}

.mobile-menu-page ul {
  padding: var(--padding);
}

main,
article,
section img {
  width: 66vw;
  height: auto;
  padding: var(--padding) 0;
}

.wp-block-column,
.wp-block-image,
a.media-download {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: flex-start !important;
}

.wp-block-image:not(details) {
	padding: var(--padding-small);
}

figcaption {
  font-size: calc(var(--font-size)*.75);
  font-style: italic;
  color: var(--text-color-light);
  padding-bottom: var(--padding)
}

.wp-block-image a img,
.wp-block-image figcaption{
	padding: 0;
}

.media-download img {
	background: #fff;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.meta {
  font-size: calc(var(--font-size)*.75);
  text-transform: uppercase;
  letter-spacing: calc(var(--font-size)/12);
  color: var(--text-color-light);
  margin-top: calc(var(--padding)*-.75);
  font-family: var(--heading-font);
}

main,
article {
  padding-top: calc(var(--padding)*2);
  padding-bottom: calc(var(--padding)*3);
}

section:first-of-type {
  padding-top: calc(var(--padding)*2);
}

section:last-of-type {
  padding-bottom: calc(var(--padding)*3);
}

h1 {
  font-size: var(--heading-font-size);
  padding: var(--padding-small) 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 100%;
  font-family: var(--heading-font);
  max-width: var(--p-width);
  text-align: center;
}

h1.hero-heading {
  font-size: var(--hero-heading-font-size);
}

a:visited,
a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

blockquote {
  padding: calc(var(--padding)*2);
  background: var(--background-color-darken);
  border-radius: var(--border-radius);
  position: relative;
}

details,
summary {
  width: 100%;
}

mark,
.highlight {
  background-color: var(--highlight-color);
  padding: 0 calc(var(--padding-small)/4);
}

.grid-item {
  padding: var(--padding-small) 0;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

details p,
.grid-item p {
  max-width: 100%;
}

details article {
  opacity: 0;
  padding: 0;
  width: 100%;
}

details[open] article {
  animation: fadeIn .75s linear forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.faq-wrapper,
.faq-wrapper h2 {
  width: 100%;
  text-align: center;
  padding: var(--padding) 0;
  margin: 0;
	font-size: calc(var(--font-size)*.75)
}

.faq-wrapper h2 {
  display: block !important;
  margin: auto;
	font-size: calc(var(--font-size)*1.25);
}

section p a,
.faq-wrapper a {
	text-decoration: underline;
}

summary {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: bold;
  font-family: var(--heading-font);
}

summary::before {
  content: ' ';
  background: url(media/images/arrow.svg) no-repeat center center;
  background-size: var(--padding-extra-small);
  width: var(--padding-extra-small);
  height: var(--padding-extra-small);
  margin-right: var(--padding-extra-small);
   /* padding: var(--padding-extra-small); */
  display: flex;
  justify-content: center;
  align-items: center;
}

details[open]>summary {
  border-bottom: 2px solid var(--background-color-darken);
}

details[open] p {
  padding-top: var(--padding-small);
}

-webkit-details[open]>summary::before,
details[open]>summary::before {
  transform: rotate(90deg);
  transition: all var(--transition-time) var(--transition-mode);
}

/* sigh, Safari again */
summary::-webkit-details-marker {
  display: none;
}

form,
.form-group {
  width: 100%;
}

.form-group,
.form-grid-item {
  display: flex;
  flex-flow: column-reverse;
  width: 100%;
}

.grid-col-2,
.grid-col-3,
.grid-col-4 {
  padding: var(--padding-small) 0;
  width: 100%;
  grid-auto-rows: 1fr;
}

.grid-col-4>.grid-item {
  background: var(--background-color-darken);
}

form {
  font-family: var(--menu-font);
}

.form-group {
  padding-bottom: var(--padding-small);
  width: 100%;
}

button,
input[type="submit"] {
  margin-top: var(--padding);
  padding: var(--padding-small);
}

input.forminator-input,
form,
input[type="email"],
input[type="password"],
input[type="text"],
input[type="submit"],
textarea,
button,
.grid-item {
  border-radius: var(--border-radius) !important;
  width: 100% !important;
}

input.forminator-input,
button,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="submit"] {
  appearance: none !important;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: var(--padding-small) !important;
  font-size: var(--font-size) !important;
}

button,
input[type="submit"] {
  appearance: none !important;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--button-background-color);
  border: 1px solid var(--button-background-color);
  color: var(--button-color);
  transition: all var(--transition-time) var(--transition-mode);
}

button:hover,
input[type="submit"]:hover {
  cursor: pointer;
  background: var(--button-background-hover-color);
  border: 1px solid var(--button-background-hover-color);
  transition: all var(--transition-time) var(--transition-mode);
}

input.forminator-input,
textarea,
input[type="email"],
input[type="password"],
input[type="text"] {
  border: 1px solid var(--background-secondary-color) !important;
  background: #fff !important;
}

textarea {
  resize: vertical;
}

.forminator-checkbox__label {
  padding-left: var(--padding-small);
}

ul {
  padding: var(--padding-small) var(--padding);
}

.content ul {
  max-width: var(--p-width);
}

.content ul li {
  margin-bottom: var(--padding-s);
}

hr {
  background-color: transparent !important;
  background-image: linear-gradient( -45deg, currentColor 25%, transparent 25%, transparent 50%, currentColor 50%, currentColor 75%, transparent 75%, transparent );
  background-size: 5px 5px;
  border: none;
  height: 10px !important;
  min-height: 10px !important;
  max-width: 100%;
  width: 75vw;
  margin-bottom: 3rem;
}

.btn {
  background: var(--brand-color);
  border-radius: var(--border-radius);
  padding: calc(var(--space)/4) var(--space);
  transition: background 250ms ease-in-out;
  color: #fff;
}

a.btn,
a.btn:visited {
  color: #fff;
}

.btn:hover {
  background: var(--brand-color-darken-30);
  transition: background 250ms ease-in-out;
}

.no-side-padding {
  padding-left: 0;
  padding-right: 0;
}

.card-image {
  background: #aaa;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  width: 100%;
}

.card-image img {
  padding: 0;
  width: 100% !important;
  height: auto;
}

.branded-bg {
  background: var(--brand-color-darken-30);
  color: #fff;
  padding-top: 0;
  padding-bottom: 0;
}

.branded-bg p,
.branded-bg h2 {
  padding: var(--padding-s);
}

.faq-list,
.faq-list h2,
summary,
details {
  font-family: sans-serif !important;
}

.faq-list,
summary {
  width: 100%;
  max-width: 100%;
  text-align: left;
}

.faq-list p {
  padding-top: 0;
  margin-top: 0;
}

summary {
  font-weight: bold;
  padding-bottom: var(--padding-s);
}

details {
  padding: var(--padding-s);
  padding-bottom: 0;
margin-bottom: var(--padding-small);
}

details {
  background: #ddd;
  border-radius: var(--border-radius);
}

details[open] {
  padding-bottom: calc(var(--padding-s)/2);
}

.mobile-menu-page {
  color: #fff;
  background: var(--brand-color-darken-70);
  width: 100vw;
  height: 100vh;
  padding: var(--padding-xl);
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.mobile-menu-close {
  margin-top: 0;
}

.hidden,
p:empty {
  display: none;
}

.mobile-menu-page img {
  width: var(--mobile-logo-width);
  height: auto;
}

.mobile-menu-page a {
  color: #fff;
}

.hidden {
  display: none;
}

.search-bar {
	z-index: 9999;
	margin-top: calc(var(--padding)*1.75);
	width: 100%;
	display: none;
	grid-template-columns: 10fr 2fr;
		background: var(--brand-color-darken-30);
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.search-input,
.search-submit,
.search-bar input {
	height: calc(var(--padding)*1.25);
	margin: 0 !important;
	border-radius: 0 !important;
	z-index: 9999;
}

input[type="submit"].search-submit {
	background: var(--brand-color-darken-30);
	padding: var(--padding-small) !important;
	height: 100%;
}


input[type="text"].search-input {
	background: #fff !important;
	padding: var(--padding-small) !important;
		height: 100%;
	border-top: none;
	text-align: center;
}

input[type="text"].search-input:focus {
	border: none;
	outline: none;
}

.forminator-checkbox__wrapper {
	display: flex;
	justify-content: flex-start;
	align-items: center;
  width: 100%;
}

.forminator-checkbox__wrapper p {
  padding-left: var(--padding-small);
}

.wp-block-embed,
.edit-page-link,
.search-icon {
	display: flex;
	justify-content: center;
	align-items: center;
}

.menu-menu-1-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header ul,
ul.menu-menu-1 {
	display: grid !important;
	grid-template-columns: repeat(6, 1fr);
}

.search-icon img {
	width: 1.5ch;
	height: auto;
}

.search-icon img {
	margin-left: calc(var(--padding-small)/2);
}

.edit-page-link,
.search-icon {
	margin-left: var(--padding-small);
}

.error-text {
	color: red;
}

.edit-page-link {
	height: calc(var(--padding)*1.5) !important;
}

.wp-block-embed {

}


@media screen AND (min-width: 1080px) {

  :root {
    --line-height: calc(var(--font-size)*1.5);
    --padding: calc(var(--line-height)*1.5);
  }

  header img,
  nav img {
    height: calc(var(--padding)*1.25);
    width: auto;
  }

  header {
    height: calc(var(--padding)*1.75);
  }

	.footer-menu {
	display: flex;
	flex-flow: row;
	justify-content: center;
	align-items: center;
}

	footer {
  justify-content: center;
  padding: var(--padding-small) var(--padding);
	}

	footer li {
  padding: calc(var(--padding-small)/4) var(--padding-small);
}

	footer li,
header li {
  border: 3px solid var(--brand-color);
}

}

@media screen AND (orientation: portrait) {

  .grid-col-2,
  .grid-col-3,
  .grid-col-4 {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    grid-gap: var(--grid-gap);
  }

  section img {
    width: 100vw !important;
    height: auto;
  }

  .desktop-menu {
    display: none;
  }
}

@media screen AND (orientation: landscape) {
  .grid-col-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: var(--grid-gap);
    grid-auto-flow: row dense;
	grid-auto-rows: 1fr;
  }

  .grid-col-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--grid-gap);
    grid-auto-flow: row dense;
	grid-auto-rows: 1fr;
  }

  .grid-col-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--grid-gap);
    grid-auto-flow: row dense;
    padding: var(--padding-small) 0;
  	grid-auto-rows: 1fr;
	}

  .desktop-menu {
    display: flex;
  }

  .mobile-menu {
    display: none;
  }

  .grid-item,
  .grid-col-2 > a,
  .grid-col-3 > a,
  .grid-col-4 > a {
	height: 100%;
	}
}

.supporter-details {
    max-width: 66ch;
}

.supporter-details .wp-block-image,
.supporter-details img.wp-image{
    padding-top: 0 !important;
}