/*!
Theme Name: coneo Child theme
Description: Relaunch CoNeo Design Aachen
Version: 1.0
Author: KonzeptCode
Template: kc-parent-theme
Author URI: https://konzeptcode.com
*/
/*
@include max($tablet) {
	height: 60px;
}
*/
/*
Beispiel:
@include default_text_specs(
    $css-variable-prepend: "kc-teaser-title",
    $font-weight: 700,
    $line-height: 1,
    $text-align: "center"
);
*/
/*
Beispiel:
@include default_h1_specs(
    $css-variable-prepend: "",
    $font-weight: 700,
    $line-height: 1,
    $text-align: "center"
);
*/
/*
Beispiel:
@include default_h2_specs(
    $css-variable-prepend: "",
    $font-weight: 700,
    $line-height: 1,
    $text-align: "center"
);
*/
/*
Beispiel:
@include css_variable_prepend(
    $property: "font-size",
    $prepend-string: 'kc-teaser-title',
    $default-value: 20px
);
*/
/*
@extend %transition;
*/
/*
@extend %transition-timing;
*/
/*
@include max($tablet) {
	height: 60px;
}
*/
:root,
swiper-container,
body,
html {
  --primary-color: #002d48;
  --primary-color-light: #bce3fa;
  --primary-color-medium: #617f9d;
  --secondary-color: #fff59b;
  --secondary-color-light: #fff8b4;
  --secondary-color-lighter: #fffacd;
  --white: #ffffff;
  --text-color: var(--primary-color);
  --gradient-primary-light-secondary: linear-gradient(172.96deg, var(--primary-color-light) 29.61%, var(--secondary-color) 59.11%);
  --primary-font: "Syne", sans-serif;
  --secondary-font: "Syne", sans-serif;
  --content-width: 1280px;
  --text-width: 600px;
  --global-padding: 80px;
  --rahmen: 40px;
  --radius-flaeche: 40px;
  --radius-karte: 22px;
  --kopf-hoehe: 136px;
  --header-height: var(--kopf-hoehe);
  --schatten-weich: 0 0 4px rgba(97, 127, 157, 0.4);
  --uebergang: 0.3s ease-out;
  --p-font-family: var(--primary-font);
  --p-font-size: 18px;
  --p-line-height: 26px;
  --p-font-weight: 400;
  --p-color: var(--primary-color);
  --p-margin: 0;
  --paragraph-not-last-margin-bottom: 32px;
  --link-color: var(--primary-color);
  --link-decoration: underline;
  --h1-font-family: var(--secondary-font);
  --h1-font-size: 110px;
  --h1-line-height: 115px;
  --h1-font-weight: 700;
  --h1-color: var(--primary-color);
  --h1-text-transform: none;
  --h2-font-family: var(--secondary-font);
  --h2-font-size: 50px;
  --h2-line-height: 60px;
  --h2-font-weight: 700;
  --h2-color: var(--primary-color);
  --h2-text-transform: none;
  --h3-font-family: var(--secondary-font);
  --h3-font-size: 35px;
  --h3-line-height: 40px;
  --h3-font-weight: 500;
  --h3-color: var(--primary-color);
  --h3-text-transform: none;
  --heading-margin-top: 0;
  --heading-margin-bottom: 0;
  --button-display: inline-flex;
  --button-padding: 0 20px;
  --button-height: 50px;
  --button-background: var(--primary-color);
  --button-color: var(--white);
  --button-border: 0;
  --button-border-radius: 25px;
  --button-font-family: var(--primary-font);
  --button-font-size: 16px;
  --button-font-weight: 400;
  --button-line-height: 26px;
  --button-white-space: normal;
  --button-transition: background-color var(--uebergang), color var(--uebergang), box-shadow var(--uebergang);
  --buttons-margin-top: 0;
  --grid-column-gap: 80px;
  --grid-row-gap: 70px;
  --columns-gap: 80px;
}

html,
body {
  font-family: var(--p-font-family, var(--primary-font));
  font-weight: var(--p-font-weight, 400);
  font-size: var(--p-font-size, 18px);
  line-height: var(--p-line-height, 26px);
  color: var(--text-color);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html[langslug] body {
  background: var(--white);
  padding-left: var(--rahmen);
  padding-right: var(--rahmen);
  padding-top: calc(var(--kopf-hoehe) - 20px);
}

html[langslug] {
  scroll-padding-top: calc(var(--kopf-hoehe) + 25px + var(--wp-admin--admin-bar--height, 0px));
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html[langslug] {
    scroll-behavior: auto;
  }
}
h1,
h2,
h3,
h4 {
  letter-spacing: -0.01em;
}

h4 {
  font-family: var(--secondary-font);
  font-size: 25px;
  line-height: 34px;
  font-weight: 400;
  color: var(--primary-color);
  margin: 0;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100001;
  padding: 12px 20px;
  background: var(--secondary-color);
  color: var(--primary-color);
}
.skip-link:focus {
  left: calc(var(--rahmen) + 10px);
  top: 10px;
}

img.emoji,
img.wp-smiley {
  width: 1em !important;
  height: 1em !important;
  display: inline !important;
  vertical-align: -0.1em;
}

html[langslug] body::after {
  content: "";
  position: fixed;
  z-index: 900;
  top: calc(var(--kopf-hoehe) + var(--wp-admin--admin-bar--height, 0px));
  left: var(--rahmen);
  right: var(--rahmen);
  bottom: var(--rahmen);
  border-radius: var(--radius-flaeche);
  box-shadow: 0 0 0 100vmax var(--white);
  pointer-events: none;
}

.kopf {
  position: fixed;
  z-index: 1000;
  top: var(--wp-admin--admin-bar--height, 0px);
  left: var(--rahmen);
  right: var(--rahmen);
  height: var(--kopf-hoehe);
  background: var(--white);
  transition: background-color var(--uebergang), height var(--uebergang);
}

.kopf-innen {
  position: relative;
  width: var(--content-width);
  max-width: calc(100% - 2 * var(--global-padding));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.kopf-logo {
  position: relative;
  display: block;
  flex-shrink: 0;
  margin-top: 27px;
  width: 157px;
  height: 80px;
  color: var(--primary-color);
}
.kopf-logo svg {
  display: block;
  width: 100%;
  height: auto;
}
.kopf-logo::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: -6px;
  width: 127px;
  height: 127px;
  border-radius: 50%;
  background: var(--white);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--uebergang), transform var(--uebergang);
}

.kopf-nav {
  margin-top: 63px;
}

.kopf-menue {
  display: flex;
  align-items: center;
  gap: 0 23.6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kopf-menue li {
  margin: 0;
  padding: 0;
}
.kopf-menue a {
  display: block;
  font-family: var(--primary-font);
  font-size: 20px;
  line-height: 50px;
  font-weight: 400;
  color: var(--primary-color);
  text-decoration: none;
  letter-spacing: 0;
  transition: color var(--uebergang);
}
.kopf-menue a:hover, .kopf-menue a:focus-visible {
  color: var(--primary-color-medium);
}
.kopf-menue .current-menu-item > a {
  text-decoration: underline;
  text-underline-offset: 6px;
}
.kopf-menue > li:last-child {
  margin-left: 2px;
}
.kopf-menue > li:last-child > a {
  min-width: 241px;
  height: 50px;
  padding: 0 20px;
  border-radius: 25px;
  background: var(--secondary-color);
  text-align: center;
  transition: background-color var(--uebergang), box-shadow var(--uebergang);
}
.kopf-menue > li:last-child > a:hover, .kopf-menue > li:last-child > a:focus-visible {
  color: var(--primary-color);
  background: var(--primary-color-light);
  box-shadow: var(--schatten-weich);
}

.kopf-knopf {
  position: absolute;
  right: 0;
  top: 66px;
  width: 241px;
  height: 50px;
  padding: 0 21px 0 0;
  border: 0;
  border-radius: 25px;
  background: var(--secondary-color);
  color: var(--primary-color);
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--uebergang), visibility var(--uebergang), background-color var(--uebergang);
}
.kopf-knopf:hover, .kopf-knopf:focus-visible {
  background: var(--primary-color-light);
}

.kopf-knopf-punkte {
  display: block;
  width: 38px;
  height: 38px;
  background-image: radial-gradient(circle, currentColor 4px, transparent 4.5px);
  background-size: 15px 15px;
  background-position: -3.5px -3.5px;
}

body.kopf-kompakt:not(.kopf-offen) .kopf {
  background: transparent;
  pointer-events: none;
}
body.kopf-kompakt:not(.kopf-offen) .kopf-logo,
body.kopf-kompakt:not(.kopf-offen) .kopf-knopf {
  pointer-events: auto;
}
body.kopf-kompakt:not(.kopf-offen) .kopf-logo {
  margin-top: 58px;
  margin-left: 12px;
  width: 104px;
  height: 53px;
}
body.kopf-kompakt:not(.kopf-offen) .kopf-logo::before {
  opacity: 1;
  transform: none;
  left: -12px;
  top: -37px;
}
body.kopf-kompakt:not(.kopf-offen) .kopf-nav {
  opacity: 0;
  visibility: hidden;
}
body.kopf-kompakt:not(.kopf-offen) .kopf-knopf {
  opacity: 1;
  visibility: visible;
}

.kopf-logo,
.kopf-nav {
  transition: margin var(--uebergang), width var(--uebergang), height var(--uebergang), opacity var(--uebergang), visibility var(--uebergang);
}

@media (max-width: 1279px) {
  .kopf-knopf {
    opacity: 1;
    visibility: visible;
  }
  .kopf-nav {
    position: fixed;
    inset: calc(var(--kopf-hoehe) + var(--wp-admin--admin-bar--height, 0px)) var(--rahmen) var(--rahmen);
    margin: 0;
    padding: 40px 30px;
    background: var(--primary-color-light);
    border-radius: var(--radius-flaeche);
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
  }
  .kopf-menue {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .kopf-menue a {
    font-size: 25px;
  }
  .kopf-menue > li:last-child {
    margin: 20px 0 0;
  }
  body.kopf-offen .kopf-nav {
    opacity: 1;
    visibility: visible;
  }
  html:has(body.kopf-offen) {
    overflow: hidden;
    scrollbar-gutter: stable;
  }
}
@media (max-width: 960px) {
  :root,
  body,
  html {
    --kopf-hoehe: 96px;
  }
  .kopf {
    height: var(--kopf-hoehe);
  }
  .kopf-innen {
    max-width: calc(100% - 32px);
  }
  .kopf-logo {
    margin-top: 18px;
    width: 118px;
    height: 60px;
  }
  .kopf-knopf {
    top: 23px;
    width: 64px;
    padding: 0 13px;
    justify-content: center;
  }
  body.kopf-kompakt:not(.kopf-offen) .kopf-logo {
    margin: 18px 0 0;
    width: 118px;
    height: 60px;
  }
  body.kopf-kompakt:not(.kopf-offen) .kopf-logo::before {
    opacity: 0;
  }
}
.fuss {
  position: relative;
  margin-top: 158px;
  background: var(--primary-color);
  color: var(--white);
  border-radius: var(--radius-flaeche) var(--radius-flaeche) 0 0;
  padding: 73px 0 47px;
  --p-color: var(--white);
  --link-color: var(--white);
  --link-decoration: none;
  --kc-block-default-width: 100%;
  --kc-block-wide-width: 100%;
  --kc-block-default-padding-left: 0;
  --kc-block-default-padding-right: 0;
  --kc-block-wide-padding-left: 0;
  --kc-block-wide-padding-right: 0;
  --container-margin-left: 0;
  --container-margin-right: 0;
  --paragraph-not-last-margin-bottom: 14px;
  --columns-gap: 80px;
}

.fuss-innen {
  width: var(--content-width);
  max-width: calc(100% - 2 * var(--global-padding));
  margin: 0 auto;
}

.fuss .block-container {
  width: 100%;
}

.fuss .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  -moz-column-gap: var(--columns-gap);
       column-gap: var(--columns-gap);
  margin: 0;
}

.fuss .wp-block-column {
  min-width: 0;
}

.fuss .image-container {
  --image-margin: 0;
  --image-img-display: block;
}

.fuss .wp-block-image img {
  width: 225px;
  height: auto;
}

.fuss .columns-container + .columns-container {
  margin-top: 41px;
}

.fuss .columns-container + .columns-container .column-container:first-child .paragraph-container:not(.is-style-vorzeile-gross-container) {
  --p-width: 485px;
}

.fuss .wp-block-column .wp-block-columns {
  --columns-gap: 34px;
  margin-top: 0;
}

.fuss .wp-block-social-links {
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  font-size: 18px;
}
.fuss .wp-block-social-links .wp-social-link {
  background: none !important;
  color: var(--white) !important;
}
.fuss .wp-block-social-links .wp-social-link a {
  padding: 0;
}
.fuss .wp-block-social-links .wp-social-link svg {
  width: 18px;
  height: 18px;
}

.fuss .wp-block-button {
  --button-height: 40px;
}

.fuss .buttons-container {
  margin-top: 42px;
}

.fuss-nav {
  margin-top: 37px;
}

.fuss-menue {
  display: flex;
  flex-wrap: wrap;
  gap: 0 45px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fuss-menue a {
  font-size: 20px;
  line-height: 34px;
  letter-spacing: -0.01em;
  color: var(--white);
  text-decoration: none;
}
.fuss-menue a:hover, .fuss-menue a:focus-visible {
  color: var(--primary-color-light);
}

@media (max-width: 960px) {
  .fuss {
    margin-top: 80px;
    padding: 50px 0 40px;
    --columns-gap: 30px;
  }
  .fuss .block-container > .columns-container > .wp-block-columns {
    grid-template-columns: 100%;
    row-gap: 40px;
  }
}
@media (max-width: 580px) {
  .fuss .wp-block-column .wp-block-columns {
    --columns-grid-template-columns: 100%;
    row-gap: 20px;
  }
}
:root,
body {
  --group-padding-top: 0;
  --group-padding-bottom: 0;
}

.group-container > .wp-block-group > .container:not(.aligned),
.group-container > .wp-block-group > .wp-block-group__inner-container > .container:not(.aligned) {
  --container-margin-left: max(0px, calc((100% - var(--content-width)) / 2));
  --container-margin-right: 0;
}

.heading-container.heading-h1 {
  --heading-width: 840px;
  --heading-margin-bottom: 52px;
}

.heading-container.heading-h2:not(.aligned) {
  --heading-width: 940px;
}

.buttons-container {
  --buttons-margin-top: 0;
  --buttons-width: auto;
}

@media (max-width: 960px) {
  :root,
  swiper-container,
  body,
  html {
    --rahmen: 12px;
    --global-padding: 20px;
    --radius-flaeche: 28px;
    --h1-font-size: 52px;
    --h1-line-height: 58px;
    --h2-font-size: 34px;
    --h2-line-height: 40px;
    --h3-font-size: 26px;
    --h3-line-height: 32px;
    --grid-column-gap: 30px;
    --grid-row-gap: 40px;
    --columns-gap: 30px;
  }
  .heading-container.heading-h1,
  .heading-container.heading-h2:not(.aligned) {
    --heading-width: 100%;
  }
  .wp-block-column[style*=padding-top] {
    padding-top: 0 !important;
  }
}

/*# sourceMappingURL=style.css.map*/