@charset "utf-8";

/*
@import url('https://fonts.googleapis.com/css2?family=Calligraffitti&family=Happy+Monkey&family=Ms+Madi&family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&family=Oooh+Baby&display=swap');
*/
@font-face {
   font-family: 'Oooh Baby';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('../Fonts/OoohBaby-Regular.ttf') format('truetype');
}

@font-face {
   font-family: 'Noto Sans Display';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('../Fonts/NotoSansDisplay-Regular.ttf') format('truetype');
}

@font-face {
   font-family: 'Noto Sans Display';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url('../Fonts/NotoSansDisplay-SemiBold.ttf') format('truetype');
}

@font-face {
   font-family: 'Noto Sans Display';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url('../Fonts/NotoSansDisplay-Bold.ttf') format('truetype');
}

:root {
   --spacer: 0.75rem;
   --spacer-2x: calc(var(--spacer) *2);

   --color-primary: hsl(349, 72%, 44%);
   --color-foreground: hsl(0 0% 12%);
   --color-canvas: hsl(0 100% 100%);

   --font-size: clamp(1rem, 0.5313rem + 1.5vw, 1.375rem);
   --font-ratio: 1.2;
   --font-sizeH6: calc(var(--font-size) * var(--font-ratio));
   --font-sizeH5: calc(var(--font-sizeH6) * var(--font-ratio));
   --font-sizeH4: calc(var(--font-sizeH5) * var(--font-ratio));
   --font-sizeH3: calc(var(--font-sizeH4) * var(--font-ratio));
   --font-sizeH2: calc(var(--font-sizeH3) * var(--font-ratio));
   --font-sizeH1: calc(var(--font-sizeH2) * var(--font-ratio));
   --font-size-sm: calc(var(--font-size) / var(--font-ratio));
}

body {
   overflow-x: hidden;
   font-weight: 400;
   font-size: var(--font-size);
   line-height: 1.5;
   color: var(--color-foreground);
   font-family: "Noto Sans Display", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
   font-variation-settings: "wdth" 100;
   margin: 0;
}

* {
   box-sizing: border-box;
}

header,
main {
   display: flow-root;
}

section {
   width: 100%;
   max-width: 64rem;
   margin: 0 auto;
   padding: 0 var(--spacer-2x);
}

p,
ul,
table {
   margin: var(--spacer-2x) 0;
}

a {
   color: color-mix(in srgb, var(--color-primary) 80%, var(--color-foreground));
}

a:hover,
.color-text {
   color: var(--color-primary);
}

/* --- HEADLINES ---- */

.h-cursive {
   font-family: "Oooh Baby", cursive;
   line-height: 1;
   font-weight: 700;
}

h1 {
   font-size: var(--font-sizeH1);
   margin-top: 0;
}

h2 {
   font-size: var(--font-sizeH2);
   color: color-mix(in srgb, var(--color-primary) 80%, var(--color-foreground));
}

.h-3 {
   font-size: var(--font-sizeH3);
}

.bodytext {
   font-weight: 400;
   font-size: var(--font-size);
}

/* --- EYE CATCHER --- */

.fullWidth {
   max-width: 100%;
   padding: 0;
}

.fullWidth>div {
   width: 100%;
   max-width: 64rem;
   margin: 0 auto;
   padding: var(--spacer) var(--spacer-2x);
   padding-bottom: var(--spacer-2x);
}

.fullWidth figure {
   margin: 0;
   position: relative;
}

.fullWidth img {
   object-fit: cover;
   width: 100%;
   height: calc(var(--font-size)*25);
   vertical-align: bottom;
   object-position: center 49%;
}

main .fullWidth {
   background-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-canvas));
   position: relative;
}

.fullWidth .row {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-content: center;
}

.fullWidth .row .col {
   margin: 0 var(--spacer-2x);
}

.col.center {
   text-align: center;
}

.fullWidth .row .col.box {
   margin: var(--spacer-2x) var(--spacer);
   background-color: hsl(from var(--color-canvas) h s l /0.5);
   padding: inherit;
}

/* --- AKZENTE ---- */

.fullWidth>div[class$="slated"] {
   display: block;
   position: absolute;
   z-index: 1;
   width: 100%;
   max-width: inherit;
   height: var(--font-sizeH3);
   background-origin: border-box;
   background-size: 100% 50%;
   background-repeat: no-repeat;
   padding: 0;
}

.fullWidth>div.bottom_slated {
   bottom: 0;
   background-image: url(../Images/sloping-bottom-white.svg);
   background-position-y: bottom;
}

.fullWidth>div.top_slated {
   top: 0;
   background-image: url(../Images/sloping-top-white.svg);
   background-position-y: top;
}

/* --- HERO IMAGE --- */

#heroImage {
   position: relative;
}

#heroImage div.cover {
   position: absolute;
   width: 100vw;
   max-width: inherit;
   bottom: 0;
   backdrop-filter: blur(3px);
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 20%, rgba(102, 102, 102, 0) 60%);
}

#heroImage div .h-cursive {
   color: var(--color-canvas);
   margin: var(--spacer-2x) 0;
}

#heroImage>div.bottom_slated {
   background-image: url(../Images/sloping-bottom-light.svg);
}

/* --- FOOTER --- */

.footer-head {
   background-color: color-mix(in srgb, var(--color-primary) 80%, var(--color-foreground));
   color: var(--color-canvas);
}

.footer-foot {
   background-color: color-mix(in srgb, var(--color-primary) 80%, var(--color-foreground));
   color: var(--color-canvas);
   font-size: var(--font-size-sm);
}

.footer-foot a {
   color: var(--color-canvas);
   position: relative;
   text-decoration: none;
}

.footer-foot a:after {
   content: '';
   position: absolute;
   width: 100%;
   transform: scaleX(0);
   height: 2px;
   bottom: -2px;
   left: 0;
   background-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-canvas));
   transform-origin: bottom left;
   transition: transform 0.25s ease-out;
}

.footer-foot a:hover:after {
   transform: scaleX(1);
   transform-origin: bottom left;
}

.button {
   display: inline-block;
   margin: var(--spacer) var(--spacer);
   background: transparent;
   border: 2px solid color-mix(in srgb, var(--color-primary) 60%, var(--color-foreground));
   padding: var(--spacer) var(--spacer-2x);
   background: hsl(from var(--color-primary) h s l /0.2);
   color: color-mix(in srgb, var(--color-primary) 20%, var(--color-foreground));
   text-decoration: none;
}

.button:hover,
.button:focus {
   background: hsl(from var(--color-primary) h s l /0.1);
}