/* ====================================================================================================================================================== */
/* --------------------------------------------------------------------- UNITS START -------------------------------------------------------------------- */
/* -- FONT SIZE -----------------------------------------------------------------------------------------------------------------------------------------
   // inside <html> or <body>, <div>, <nav>, <main>, <aside>, <footer> (if necessary at all):
   - responsive: clamp() / container: cqi
   - non-responsive: rem

   // Text related elements <h1> .. <h6>, <p>, <ol>, <ul>
   - relative to another element:
        - to the font size: em
        - more precise: lh, ex, cap
   - not relative:
        - responsive: clamp() / container: cqi
        - non-responsive: rem

   // inline elements <a>, <span>, <strong>
   - relative to another element:
        - to the font size: em
        - more precise: lh, ex, cap


/* -- SPACING -------------------------------------------------------------------------------------------------------------------------------------------
   // margin, padding, gap:
   - adding space to text
        - to the font size: em, (rem)

   - adding space to padding or between elements:
        - fixed size: em, rem, px
        - responsive: vw/vh + min(), clamp()


/* -- POSITIONING ---------------------------------------------------------------------------------------------------------------------------------------
   // top, right, bottom, left, borders, outlines, shadows
   - rem, (em, px)


/* -- FLEX/GRID -----------------------------------------------------------------------------------------------------------------------------------------
   // flex item width:
   - rem, %, px

   // grid columns / grid rows:
   - fixed size: rem, px
   - fluid: fr
   - mixed: rem, px, fr, auto, min-content

/* -- WIDTH/HEIGHT OF ELEMENTS --------------------------------------------------------------------------------------------------------------------------
   // width:
   - max-width: rem, ch, px
   - width, min-width: %, cqi, px, rem, vw

   // height:
   - fixed size: rem, px
   - relative to element: %
   - relative to viewport: vh, svh, dvh, lvh
/* ---------------------------------------------------------------------- UNITS END --------------------------------------------------------------------- */
/* ====================================================================================================================================================== */
/* -------------------------------------------------------------------- IMPORT START -------------------------------------------------------------------- */
@charset "utf-8";

@-ms-viewport {
    width: device-width;
    zoom: 1;
}

@-o-viewport {
    width: device-width;
    zoom: 1;
}

@viewport {
    width: device-width;
    zoom: 1;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Permanent+Marker&display=swap');

@font-face {
    font-family: Shuttle-X;
    src: url(../fonts/shuttle-x.ttf);
}

/* --------------------------------------------------------------------- IMPORT END --------------------------------------------------------------------- */
/* --------------------------------------------------------------------- RESET START -------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    /*font: inherit;*/
    margin: 0;
    min-width: 0;
    padding: 0;
}

html {
    color-scheme: dark light;
    hanging-punctuation: first last;
}

html:focus-within {
    scroll-behavior: smooth;
}

body {
    min-height: 100svh;
    scroll-behavior: smooth;
}

nav ul,
#MobileNav ul,
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

img,
picture,
video,
canvas {
    background-repeat: no-repeat;
    background-size: cover;
    block-size: auto;
    display: block;
    font-style: italic;
    height: auto;
    max-inline-size: 100%;
    max-width: 100%;
}

a {
    text-wrap: pretty;
}

a:not([class]) {
    text-decoration-skip-ink: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

p,
li {
    line-height: 1.4;
    max-width: 65ch;
    text-wrap: pretty;
}

input[type="text"]:focus,
input[type="datetime-local"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="range"]:focus,
select:focus {
    border: 0 !important;
    box-shadow: 2px 2px 0px var(--clr-white), -2px 2px 0px var(--clr-white),
        2px -2px 0px var(--clr-white), -2px -2px 0px var(--clr-white);
    outline: none;
}

button:focus {
    outline: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000000s ease-in-out 0s, color 5000000s ease-in-out 0s;
}

::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* Turns off animation for people who don't want to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        transition: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    :has(:target) {
        scroll-behavior: smooth;
        scroll-padding-top: 3rem;
    }
}

/* ---------------------------------------------------------------------- RESET END --------------------------------------------------------------------- */
/* ====================================================================================================================================================== */
/* --------------------------------------------------------------- CUSTOM PROPERTIES START -------------------------------------------------------------- */
:root {
    --clr-black: lch(0% 0 0 / 1);
    --clr-darkorange: lch(48.49 50.07 68.97 / .5);
    --clr-darkgrey: lch(18.47 0 0 / 1);
    --clr-green: lch(48.54 50.33 149.68 / 1);
    --clr-grey: lch(60 0 0 / 1);
    --clr-orange: lch(48.49 50.07 68.97 / 1);
    --clr-white: lch(100 0 0 / 1);
    --clr-neonText: lch(50.27 77.73 3.9 / 1);
    --clr-neonTextGlow: lch(50.27 77.73 3.9 / .66);
    --clr-neonFrame: lch(55.8 69.03 273.42);
    --clr-neonFrameGlow: lch(55.8 69.03 273.42 / 0.5);
    --wdth-border: 2px;
}

/* ---------------------------------------------------------------- CUSTOM PROPERTIES END --------------------------------------------------------------- */
/* ====================================================================================================================================================== */
/* ------------------------------------------------------------------- SCROLLBAR START ------------------------------------------------------------------ */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: var(--clr-black);
}

::-webkit-scrollbar-thumb {
    background-image: linear-gradient(to top, var(--clr-orange) 0%, var(--clr-green) 100%);
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
    border-color: var(--clr-black);
    border-radius: 3px;
    border-style: solid;
    border-width: 0 0 0 1px;
}

::-webkit-scrollbar-track {
    border-radius: 0px;
}

/* -------------------------------------------------------------------- SCROLLBAR END ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- ANIMATIONS START ----------------------------------------------------------------- */
@keyframes flickerFrame {

    0%,
    19.5%,
    20.5%,
    23.5%,
    24.5%,
    54.5%,
    55.5%,
    100% {

        opacity: 1;
    }

    20%,
    24%,
    55% {
        opacity: 0.75;
    }
}

@keyframes flickerText {

    0%,
    49.5%,
    50.5%,
    59.5%,
    60.5%,
    79.5%,
    80.5%,
    100% {

        opacity: 1;
    }

    50%,
    60%,
    80% {
        opacity: 0.1;
    }
}

/* -------------------------------------------------------------------- ANIMATIONS END ------------------------------------------------------------------ */
/* ====================================================================================================================================================== */
/* ==================================================================== LAYOUT START ==================================================================== */
/* ----------------------------------------------------------------- FONT STYLING START ----------------------------------------------------------------- */
body {
    accent-color: var(--clr-orange);
    color: var(--clr-black);
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    /*font-weight: 100 - 900*/
    font-weight: 400;
    font-size: calc(15px + 0.390625vw);
    /*  320px: 16px (eg: iPhone 4 & 5)
        768px: 18px (eg: iPad portrait)
    	1024px: 19px (eg: iPad landscape)
    	1280px: 20px
    	1536px: 21px
    	1920px: 23px
    	2560px: 25px*/
}

/* ------------------------------------------------------------------ FONT STYLING END ------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------ */
/* ----------------------------------------------------------------- BLOCK STYLING START ---------------------------------------------------------------- */
body.blurring {
    overflow-y: hidden;
}

header {
    -ms-user-select: none;
    -webkit-user-select: none;
    border-color: var(--clr-orange);
    border-style: solid;
    border-width: 0 0 2px 0;
    display: flex;
    flex-flow: column nowrap;
    left: 0;
    overflow-y: hidden;
    position: sticky;
    right: 0;
    top: -40px;
    user-select: none;
    z-index: 9999;
}

nav[aria-label="primary"] {
    background-color: var(--clr-black);
    display: flex;
    flex-flow: row nowrap;
    font-size: 0.75em;
    font-weight: 400;
    height: 55px;
    justify-content: center;
    z-index: 9998;

    @media (width < 960px) {
        .nav--links {
            display: none;
        }
    }
}

nav[aria-label="primary"] a {
    color: white;
    text-transform: uppercase;
    text-decoration: none;
}

area {
    background: red;
    outline: red;
}

#MobileNav,
#MobileNav[aria-expanded="false"] {
    height: 0px;
    overflow: hidden;
    overscroll-behavior: contain;
    position: fixed;
    top: 106px;
    transition: height 250ms linear;
    width: 100%;
    z-index: 9999;

    @media (width > 959px) {
        display: none;
    }
}

#MobileNav[aria-expanded="true"] {
    height: 120px;
}

#MobileNav ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: inherit;
}

#MobileNav ul li {
    align-items: center;
    background-color: var(--clr-black);
    display: flex;
    height: 60px;
    justify-content: center;
    text-align: center;
    width: 100%;
}

#MobileNav ul li a {
    color: var(--clr-white);
    font-weight: 400;
    text-decoration: none;
}

section {
    background-image: url('../gfx/texture_1.png');
}

footer {
    background-color: var(--clr-black);
    border-color: var(--clr-orange);
    border-style: solid;
    border-width: 2px 0 0 0;
    color: var(--clr-grey);
    display: flex;
    flex-flow: column nowrap;
    font-size: calc(8px + 0.390625vw);
    font-weight: 300;
    justify-content: center;
}

footer a {
    color: white;
    text-decoration: none;
}

button {
    -ms-user-select: none;
    -webkit-user-select: none;
    color: var(--clr-white);
    cursor: pointer;
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: calc(10px + 0.390625vw);
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-weight: 600;
    padding: 1em;
    user-select: none;
}

/* ------------------------------------------------------------------ BLOCK STYLING END ----------------------------------------------------------------- */
/* ====================================================================================================================================================== */
/* -------------------------------------------------------------------- CLASSES START ------------------------------------------------------------------- */
.blurBG {
    background: rgba(0, 0, 0, .25);
    backdrop-filter: blur(4px);
    display: none;
    min-height: 100%;
    height: inherit;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9990;
}

.info--isOpen {
    align-items: center;
    background-color: var(--clr-black);
    color: var(--clr-grey);
    display: flex;
    flex-flow: row nowrap;
    font-size: 0.75em;
    height: 49px;
    padding: 0.5em 1em 1em 1em;
    z-index: 9998;
}

.info--isOpen-Text {
    margin-left: 1em;
}

.neon-sign {
    font-family: Shuttle-X;
    font-size: 10px;
    height: 21px;
    width: 56px;
    margin-top: 2px;
    position: relative;
}

.neon-sign>* {
    height: inherit;
    width: inherit;

    @media (prefers-reduced-motion) {
        animation: none;
        text-decoration: overline;
    }
}

.neon-sign-frame {
    border-radius: 9px;
    border-color: var(--clr-neonFrame);
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 0 1px #fff, inset 0 0 1px #fff, 0 0 2px var(--clr-neonFrameGlow), inset 0 0 2px var(--clr-neonFrameGlow), 0 0 4px var(--clr-neonFrameGlow), inset 0 0 4px var(--clr-neonFrameGlow);
    position: absolute;
    animation: flickerFrame 10s infinite alternate;
}

.neon-sign-text {
    color: var(--clr-neonText);
    line-height: 23px;
    text-align: center;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.5), 0 0 3px rgba(255, 255, 255, 0.25), 0 0 5px var(--clr-neonTextGlow), 0 0 7px var(--clr-neonTextGlow), 0 0 9px var(--clr-neonTextGlow), 0 0 11px var(--clr-neonTextGlow), 0 0 13px var(--clr-neonTextGlow);
    animation: flickerText 20s infinite alternate;
}

button.nav--burger {
    background-color: transparent;
    border-radius: 0px;
    border: 0;
    margin: 0 1rem;
    padding: 0px;
    visibility: hidden;
    width: 60px;

    @media (width < 960px) {
        visibility: visible;
    }
}

button.nav--burger div {
    background-color: var(--clr-white);
    border-radius: 3px;
    height: 5px;
    margin-left: 5px;
    opacity: 1;
    position: absolute;
    width: 40px;
}

button.nav--burger:hover div {
    background-color: var(--clr-orange);
    transition: background-color 200ms linear;
}

button.nav--burger[aria-expanded="true"] div {
    transition: margin-top 250ms linear, rotate 250ms ease-in 400ms, opacity 1ms linear 249ms;
}

button.nav--burger div:nth-child(1) {
    margin-top: -15px;
}

button.nav--burger div:nth-child(2) {
    margin-top: -4px;
}

button.nav--burger div:nth-child(3) {
    margin-top: 7px;
}

button.nav--burger[aria-expanded="true"] div:nth-child(1) {
    margin-top: -4px;
    rotate: 45deg;
}

button.nav--burger[aria-expanded="true"] div:nth-child(2) {
    opacity: 0;
}

button.nav--burger[aria-expanded="true"] div:nth-child(3) {
    margin-top: -4px;
    rotate: -45deg;
}

button.nav--burger.closed div:nth-child(1) {
    margin-top: -15px;
    rotate: 0deg;
}

button.nav--burger.closed div:nth-child(2) {
    opacity: 1;
}

button.nav--burger.closed div:nth-child(3) {
    margin-top: 7px;
    rotate: 0deg;
}

button.nav--burger.closed div {
    background-color: var(--clr-white);
    transition: rotate 250ms ease-in, margin-top 250ms linear 400ms, opacity 1ms linear 249ms, background-color 200ms linear;
}

button.scrollTop {
    background: transparent;
    border: 0;
    width: 50px;
    height: 50px;
    padding: 0;
}

button.scrollTop svg path {
    fill: none;
    stroke-width: 4;
    stroke: black;
    transform-origin: 50% 50%;
    transform: translateY(0px);
    transition: transform 250ms linear;
}

button.scrollTop svg:hover #ScrollToTopArrow_1 {
    transform: translateY(-5px);
}

button.scrollTop svg:hover #ScrollToTopArrow_2 {
    transform: translateY(5px);
}

.nav--left,
.nav--right {
    display: flex;
    flex-flow: row nowrap;
    flex: 1;
    justify-content: space-between;
    margin-top: -5px;
}

.nav--right {
    @media (width < 960px) {
        justify-content: flex-end;
    }
}

.nav--logo {
    color: var(--clr-white);
    display: flex;
    justify-content: center;
    max-width: 192px;
    position: relative;
    width: 192px;
    z-index: 9998;
}

.nav--logo.start {
    width: 0px;
}

.nav--logo a {
    margin-top: 56px;
    position: absolute;
}

.nav--links {
    display: flex;
    flex-flow: row nowrap;
    flex: 1;
    max-width: 30ch;
    min-width: 25ch;
}

.nav--links li {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center;
}

.nav--cta {
    align-items: center;
    border: 0;
    display: flex;
    height: 60px;
    justify-content: center;
    min-width: 60px;
}

.nav--cta a {
    display: flex;
    align-items: center;
    height: 60px;
}

.nav--cta span {
    @media (width < 960px) {
        display: none;
    }
}

.nav--cta svg {
    @media (width > 959px) {
        display: none;
    }
}

.header--bg {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 9997;
}

.header--bg-forms {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

.header--bg .oval {
    background-color: var(--clr-black);
    border-radius: 100px / 50px;
    box-shadow: 0px 1px 0px 0px var(--clr-orange), -1px 1px 0px 0px var(--clr-orange), 1px 1px 0px 0px var(--clr-orange);
    height: 100px;
    margin-top: 21px;
    width: 206px;
}

.header--bg .rectangle {
    background-color: var(--clr-black);
    border-color: var(--clr-orange);
    border-style: solid;
    border-width: 0 0 2px 0;
    flex: 1;
}

.header--bg .overlay {
    background-color: var(--clr-black);
    height: 69px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9998;
}

.hero {
    position: relative;
}

.hero .hero--img {
    object-fit: cover;
    height: 65svh;
    width: 100%;
}

.hero--cta {
    align-items: center;
    aspect-ratio: 1 / 1.25;
    background-color: rgba(0, 0, 0, .75);
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 1em;
    height: auto;
    left: 0;
    margin: auto;
    padding: 1em;
    position: absolute;
    right: 0;
    top: 0;
    width: clamp(230px, 15.625vw, 300px);
}

.hero--cta p {
    color: var(--clr-grey);
    font-weight: 500;
    font-size: calc(10px + 0.390625vw);
    text-align: center;
}

.button {
    background-color: lch(48.49 50.07 68.97 / 0.125);
    border: 0;
    box-shadow: 0px 2px 4px 4px lch(0 0 0 / 0.05);
    height: 60px;
    padding: 0;
    position: relative;
    transition: background-color 200ms linear, box-shadow 200ms linear;
    width: clamp(200px, 15vw, 260px);
}

.button:hover {
    background-color: lch(48.49 50.07 68.97 / 0.3);
    box-shadow: 0px 2px 4px 4px lch(0 0 0 / 0.125);
}

.button--text {
    text-shadow: 1px 1px #000000, -1px -1px #000000;
    width: inherit;
    left: 0;
}

.button--frame {
    border-color: var(--clr-orange);
    border-style: solid;
    position: absolute;
    transition: width 150ms ease-in-out, height 200ms ease-in-out;
    width: 5%;
    height: 20%;
}

.button:focus {
    outline: none;
}

.button:focus .button--frame {
    border-color: var(--clr-white);
    width: 100%;
    height: 100%;
}

.button--frame.left {
    border-width: 0 0 2px 2px;
    bottom: 0;
    left: 0;
}

.button--frame.right {
    border-width: 2px 2px 0 0;
    right: 0;
    top: 0;
}

.button:hover .button--frame.left,
.button:hover .button--frame.right {
    height: 100%;
    width: 100%;
}

.nav--cta {
    background-color: transparent;
}

.nav--cta-mobile {
    background-color: transparent;
}

.map {
    position: relative;
}

.map--area {
    display: flex;
    justify-content: center;
}

.map--area a {
    display: block;
    background: transparent;
    border-radius: 50%;
    height: 100px;
    margin-top: 50px;
    position: absolute;
    overflow: hidden;
    width: 100px;
}

.map img {
    border-color: var(--clr-orange);
    border-style: solid;
    border-width: 2px 0 0 0;
    height: min(400px, 60vw);
    object-fit: cover;
    width: 100%;
}

.footer--logo {
    display: flex;
    flex: 1;
    justify-content: center;
    padding: 2rem 0;
}

.footer--content {
    display: flex;
    flex: 1;
    gap: 2rem;
    justify-content: center;
    padding: 0rem 1rem 2rem 1rem;

    @media (min-width: 480px) {
        gap: 4rem;
    }

    @media (min-width: 640px) {
        gap: 6rem;
    }
}

.footer--header,
.blockHeader {
    color: var(--clr-green);
    font-family: "Permanent Marker", cursive;
    font-size: calc(16px + 0.390625vw);
    font-weight: 400;
    padding: 0 0 1rem 0;
    text-align: center;

    @media (width > 959px) {
        font-size: calc(24px + 0.390625vw);
    }
}

.footer--bottom {
    background-color: var(--clr-orange);
    color: var(--clr-black);
    display: flex;
    flex-flow: row nowrap;
    flex: 1;
    gap: 1em;
    height: 60px;
    padding: 0 1em;
}

.footer--bottom .copyAbseits {
    line-height: 60px;
    font-weight: 600;
}

.footer--bottom>div:not(.copyAbseits) {
    display: flex;
    justify-content: flex-end;
    flex-flow: row nowrap;
}

.footer--bottom div {
    align-items: center;
    flex: 1;
}

.footer--bottom .coder {
    display: none;
}

.footer--bottom .scroll--top {
    align-items: center;
    display: flex;
    height: 60px;
    justify-content: center;
    max-width: 60px;
}

.observed:not(.shown) {
    opacity: 0;
}

.observed.shown {
    opacity: 1;
    transition: opacity 100ms linear;
}

.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vh;

    @media (width < 1280px) {
        height: 50vh;
    }

    @media (width < 800px) {
        height: 40vh;
    }
}

.parallax.bg1 {
    background-image: url('/core/gfx/buffet.jpg');
}

.parallax.bg2 {
    background-image: url('/core/gfx/brunch.jpg');
}

/* ------------------------------------------------------------------ STARTSEITE START ------------------------------------------------------------------ */
div.info--text:has(.opening) {
    align-items: center;
}

.opening {
    align-items: center;
    display: flex;
    flex: 1;
    text-align: center;
}

.section--leistungen {
    display: flex;
    flex-flow: column nowrap;
    gap: 6em;
    justify-content: center;
    padding: 6em 0;

    @media (width < 1080px) {
        gap: 4em;
        padding: 4em 0;
    }
}

.section--leistungen .row {
    display: flex;
    flex-flow: row nowrap;
    gap: 8em;
    justify-content: center;
    margin-left: -4em;

    @media (width < 1080px) {
        gap: 4em;
        margin-left: -3em;
    }

    @media (width < 800px) {
        gap: 2em;
        margin-left: 0;
    }
}

.section--leistungen .row:nth-of-type(even) {
    flex-flow: row-reverse nowrap;
    margin-left: 4em;

    @media (width < 1080px) {
        margin-left: 3em;
    }

    @media (width < 800px) {
        margin-left: 0;
    }
}

.section--leistungen .row img,
.section--leistungen .row .info {
    height: 400px;
    width: 400px;

    @media (width < 1080px) {
        height: 300px;
        width: 300px;
    }

    @media (width < 800px) {
        height: 200px;
        width: 200px;
    }
}

.section--leistungen .row img {
    @media (width < 800px) {
        max-height: 30%;
        max-width: 30%;
        object-fit: cover;
    }
}

.section--leistungen .row .info {
    position: relative;

    @media (width < 800px) {
        max-height: 60%;
        max-width: 60%;
    }
}

.section--leistungen .row .info--text {
    color: var(--clr-white);
    display: flex;
    flex-flow: column nowrap;
    height: inherit;
    justify-content: center;
    left: 0;
    overflow: hidden;
    padding: 1em 2em;
    position: absolute;
    top: 0;
    width: inherit;
}

.section--leistungen .row .info--text h3 {
    font-size: calc(8px + 0.390625vw);

    @media (width < 800px) {
        font-size: calc(6px + 0.390625vw);
    }
}

.section--leistungen .row .info--text h4 {
    color: var(--clr-green);
    font-family: "Permanent Marker", cursive;
    font-weight: 400;
    font-size: calc(18px + 0.390625vw);
    padding: 0 0 1em 0;

    @media (width < 800px) {
        font-size: calc(12px + 0.390625vw);
    }
}

.section--leistungen .row .info--text p {
    font-size: calc(10px + 0.390625vw);

    @media (width < 800px) {
        font-size: calc(8px + 0.390625vw);
    }
}

.section--leistungen .row .info--frame {
    border-color: var(--clr-orange);
    border-style: solid;
    height: 50%;
    position: absolute;
    width: 50%;
}

.section--leistungen .row .info--frame.left {
    border-width: 0 0 2px 2px;
    bottom: 0;
    left: 0;
}

.section--leistungen .row .info--frame.right {
    border-width: 2px 2px 0 0;
    top: 0;
    right: 0;
}

.section--contact {
    display: grid;
    grid-template-columns: 4fr 2fr;

    @media (width < 960px) {
        grid-template-columns: 1fr;
    }
}

.contact--form {
    background-color: #2d2d2d;
    color: white;
    display: flex;
    flex-flow: column nowrap;
    padding: 2em;
}

.contact--form p:not(.blockHeader) {
    align-self: center;
    font-size: calc(12px + 0.390625vw);

    @media (width < 800) {
        font-size: calc(10px + 0.390625vw);
    }
}

.contact--form form {
    display: grid;
    margin-top: 2em;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0em;
    grid-row-gap: 0em;

    @media (width < 800) {
        grid-row-gap: 1.25em !important;
    }
}

.contact--row:nth-of-type(1) {
    grid-area: 1 / 1 / 2 / 2;
}

.contact--row:nth-of-type(2) {
    grid-area: 2 / 1 / 3 / 2;
}

.contact--row:nth-of-type(3) {
    grid-area: 3 / 1 / 4 / 2;
}

.contact--form-slider {
    grid-area: 4 / 1 / 5 / 2;
}

.contact--form-button {
    grid-area: 5 / 1 / 6 / 2;
}

.contact--row {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: 1.25em;
    height: 44px;

    @media (width < 800px) {
        flex-direction: column;
        justify-content: flex-start;
        height: calc(80px + 2em);
        margin-bottom: 0.5em;
    }
}

.contact--form form input,
.contact--form form select {
    background-color: #2d2d2d;
    color: white;
    border-color: var(--clr-orange);
    border-style: solid;
    border-width: 2px;
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: calc(10px + 0.390625vw);
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-weight: 400;
    height: 44px;
    padding: 0.5em 1em;
}

.input--group {
    height: 40px;
    position: relative;
    width: 50%;

    @media (width < 800px) {
        width: 100%;
    }
}

.input--group label {
    background: #2d2d2d;
    color: var(--clr-white);
    font-size: calc(10px + 0.390625vw);
    font-weight: 600;
    left: calc(1em + 2px);
    padding: 0.25rem 0.5rem;
    position: absolute;
    top: calc(-10px - 0.390625vw);
    z-index: 9989;
}

.input--group input,
.input--group select {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9988;
    width: 100%;
}

.contact--form-gender {
    max-width: 15ch;

    @media (width < 800px) {
        max-width: 100%;
        width: 100% !important;
    }
}

.contact--form-name {
    max-width: calc(100% - 15ch);
    width: 100%;

    @media (width < 800px) {
        max-width: 100%;
    }
}

.contact--form-slider-label {
    color: var(--clr-white);
    font-size: calc(10px + 0.390625vw);
    font-weight: 600;
    padding-left: calc(1em + 2px + 0.5rem);
}

.contact--form-slider-input {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    width: 100%;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    padding: 0 6px !important;
    width: 100%;
}

input[type="range"]::-webkit-slider-runnable-track {
    background-color: var(--clr-darkgrey);
    border-radius: 0px;
    height: 36px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: 6px;
    background-color: var(--clr-white);
    border-radius: 0px;
    height: 24px;
    width: 24px;
}

input[type="range"]:hover::-webkit-slider-thumb {
    box-shadow: inset 2px 2px 0px 0px var(--clr-orange), inset -2px -2px 0px 0px var(--clr-orange);
}

/*********** Firefox styles ***********/
input[type="range"]::-moz-range-track {
    background-color: var(--clr-darkgrey);
    border-radius: 0px;
    height: 36px;
}

input[type="range"]::-moz-range-thumb {
    background-color: var(--clr-white);
    border: none;
    border-radius: 0px;
    height: 24px;
    width: 24px;
}

input[type="range"]:focus::-moz-range-thumb {
    box-shadow: inset 2px 2px 0px 0px var(--clr-orange), inset -2px -2px 0px 0px var(--clr-orange);
}

.contact--form-button {
    display: flex;
    justify-content: center;
    margin-top: 1em;
}

.contact--form-side {
    align-items: flex-start;
    background-color: #1d1a15;
    color: var(--clr-white);
    display: flex;
    flex-flow: column nowrap;
    gap: 1.5em;
    justify-content: center;
    padding: 2em;

    @media (width < 960px) {
        display: none;
    }
}

.contact--form-side .row {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    gap: 1.5em;
    width: 100%;
}

.contact--form-side .row.social {
    justify-content: center;
    gap: 3em;
}

/* ------------------------------------------------------------------- STARTSEITE END ------------------------------------------------------------------- */
/* --------------------------------------------------------------------- CLASSES END -------------------------------------------------------------------- */
/* ===================================================================== LAYOUT END ===================================================================== */