:root {
    --header-height: 70px;
    --buchvorstellung-height: 85px;
    --default-border-radius: 15px;

    --default-inner-border-radius: 10px;

    --smaller-border-radius: 10px;

    --textcolor: rgb(26, 48, 86);
    --textcolor-light: rgb(55, 74, 104);
    --textcolor-blue: #097f8d;

    --orange: #ff9e00;
    --darker-orange: #ff7300;
    --red: #ff2f00;
    --darker-red: #e51300;

    --lighter-red: hsl(11, 100%, 55%);
    --lighter-orange: hsl(37, 100%, 55%);

    --blue: #008eab;
    ---lighter-blue: #00bee4;

    --green: rgb(96, 198, 0);

    --accent-blue: #0095ac;
    --accent-blue-hover: #088ab2;

    --darkblue: #007f98;

    --bg-off-white: #fff9f4;
    --font-off-white: #fff;

    --automat-color: #097f8d;
    --fortbildungen-color: #ff500a;
    --eltern-color: #e41d0f;

    --light-grey: #d6d6d6;
    --very-light-grey: #f2ece8;

    --gruen: #21c404;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-padding: 40px;
}

body {
    font-family: 'Karla', sans-serif;
    scroll-behavior: smooth;
    color: var(--textcolor);

    background-color: var(--bg-off-white);

    margin: 0;

    line-height: 1.35;
    min-height: 100%;
}

img {
    display: block;
    max-width: 100%;
}

main {
    background-color: red;
    /* min-height: calc(
    100vh - var(--header-height) - var(--buchvorstellung-height)
  ); */

    padding-top: 3em;
    padding-left: 5em;
    padding-right: 5em;
}

/* @media only screen and (min-height: 1900px) {
  main {
    min-height: unset;
  }
} */

input,
textarea,
button,
select {
    font: inherit;
}

/* ======================================== FONTS ========================================  */

h1 {
    font-size: 3.8rem;
    line-height: 3.5rem;
    font-weight: 500;
    letter-spacing: -1px;
}

@media only screen and (max-width: 700px) {

    main{
        padding-top: 2em;
        padding-left: 0.5em !important;
        padding-right: 0.5em !important;
    }


    #introduction{
        margin-top: -2em !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #introduction .illustration{
        position: relative !important;
        order: -2;
        left: 0px;
        right: 0px;
        top: 0;
        width: 65% !important;
        height: auto !important;
            margin: auto;
}

h1{
    font-size: 2.5rem;
        line-height: 2.3rem;
}

    #introduction h1 {
        margin-top: 1.5em;
        font-size: 2.5rem;
        line-height: 2rem;
        text-align: center;
    }

    #introduction h2{
        text-align: center;
    }

    #introduction div.class-selection{
        padding-top: 1em;
    }

    div.class-selection div.selection-button-container{
        flex-direction: column;
    }

    div.class-selection div.selection-button-container button{
        width: 100%;
    }
}

h2.subline {
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: -0px;
}

.subline-small {
    margin-top: -25px !important;
}

p.sub-subline {
    margin-top: 0em !important;
    opacity: 0.6;
}

h2.big {
    font-size: 3.3rem;
    font-weight: 500;
}

h2.big {
    margin-bottom: 0.35em;
}

h1 + h2.subline {
    margin-top: -25px;
}

@media only screen and (max-width: 700px) {
    h2.subline {
        font-size: 1.3rem;
    }

    h1 + h2.subline {
        margin-top: -2px;
    }
}

h2 {
    color: var(--textcolor);
    font-size: 1.9rem;
    font-weight: 800;
    margin-bottom: 1em;
}

h2 + h2.subline {
    margin-top: -1em;
}

@media only screen and (max-width: 700px) {
    h2 {
        font-size: 1.44rem;
    }
}

h3 {
    font: inherit;
    font-size: 1.5rem;
}

.fortbildung-titel {
    font-family: Inter;
    font-weight: 500;
}

p {
    margin: 0;
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.4;
}

div {
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.4;
}

p + p {
    margin-top: 0.75em;
}

p + a button {
    margin-top: 1em;
}

.subtle-text-shadow {
    text-shadow: 3px 3px 3px rgba(26, 48, 86, 0.1);
}

/* .subtle-drop-shadow {
  filter: drop-shadow(3px 3px 3px rgba(26, 48, 86, 0.1)); 
} */

.small-font {
    font-size: 0.9rem;
}

.tiny-font {
    font-size: 0.7rem;
}

.gradient-text {
    background-color: red;

    /* Create the gradient. */
    background: linear-gradient(45deg, var(--red), var(--orange), var(--red));
    background-size: 120% 120%;
    padding-bottom: 0.25em;
    padding-top: 5px;

    /* filter: saturate(110%); */

    /* Set the background size and repeat properties. */
    background-size: 120%;
    background-repeat: repeat;

    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}

.orange-text {
    color: var(--darker-orange);
}

/* ======================================== HELPER CLASSES ========================================  */

.hidden {
    display: none;
}

div.position-relative {
    position: relative;
}

.white-txt {
    color: var(--font-off-white);
}

.center-text {
    max-width: 100%;
    text-align: center;
}

p.center-text {
    display: block;

    max-width: 65ch;
    margin: auto;
    margin-top: 3em;
}

div.flex {
    display: flex;
}

div.flex.flex-vertical {
    align-items: center;
}

img.small_btn_emoji {
    width: 35px;
    margin-right: 10px;
}

div.flex-box-center {
    display: flex;
    align-items: center;
    justify-content: center !important;
}

div.text-center {
    width: 100%;
    text-align: center;
}

div.center-button-container {
    display: flex;
    justify-content: center;

    margin-top: 1em;
    background-color: white;
    width: fit-content;
    margin: auto;

    margin-top: 1em;
    border-radius: var(--default-border-radius);
    padding: 2em;
    opacity: 1;
    border: 1px solid #f4f4f4;

    padding: 2em;
}

@media only screen and (max-width: 700px) {
    .not-shown-on-mobile {
        display: none;
    }
}

div.grid {
    display: grid;
    column-gap: 1.5em;
    row-gap: 1.5em;
    grid-auto-rows: auto;
    margin-top: 2em;
    margin-bottom: 2em;
}

@media only screen and (max-width: 1000px) {
    div.grid div.first-on-mobile {
        grid-row: 1;
    }
}

div.grid.no-top-margin {
    margin-top: 0;
}

div.grid-center-x {
    justify-items: center;
}

div.grid-3columns {
    grid-template-columns: 1fr 1fr 1fr;
}

div.grid-3columns.button-grid {
    column-gap: 0.6em;
}

div.grid-3columns.small-gap {
    column-gap: 0.3em;
}

div.grid-2columns {
    grid-template-columns: 1fr 1fr;
    gap: 2.5em;
}

div.pricing-tabelle-new div.grid-2columns{
    grid-template-columns: 2fr 1fr;
    gap: 2.5em;
    margin-top: 0;
    margin-bottom: 0;
}

@media only screen and (max-width: 1100px) {
    div.pricing-tabelle-new div.grid-2columns{

        grid-template-columns: 1fr;
    }
}

div.pricing-tabelle-new h3{
    font-weight: 800;
    font-size: 2rem;
    margin-bottom: 0.25em;
    margin-top:0;
}

.grid-vertical {
    align-items: center;
}

div.grid-3fr-1fr {
    grid-template-columns: 3fr 1fr;
    column-gap: 5em;
    row-gap: 2em;
}

div.grid-1fr-3fr {
    grid-template-columns: 1fr 3fr;
    column-gap: 5em;
    row-gap: 2em;
}

div.grid-1fr-2fr {
    grid-template-columns: 1fr 2fr;
    row-gap: 2em;
    column-gap: 1.5em;
}

div.grid-2fr-1fr {
    grid-template-columns: 2fr 1fr;
    row-gap: 2em;
    column-gap: 1.5em;
}

div.grid-2_5fr-1fr {
    grid-template-columns: 2.5fr 1fr;
    row-gap: 2em;
    column-gap: 1.5em;
}

@media only screen and (max-width: 1000px) {
    div.grid-3fr-1fr {
        grid-template-columns: 1fr;
    }

    div.grid-1fr-3fr {
        grid-template-columns: 1fr 1fr;
    }

    div.grid-1fr-2fr,
    div.grid-2fr-1fr {
        grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (max-width: 700px) {
    div.grid-1fr-3fr,
    div.grid-1fr-2fr,
    div.grid-2fr-1fr {
        grid-template-columns: 1fr;
    }
}

div.grid-2columns h2 {
    margin-top: 0;
}

@media only screen and (max-width: 1000px) {
    div.grid-3columns,
    div.grid-2columns {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
}

a {
    color: unset;
}

a.a-no-style {
    text-decoration: none;
}

div.sechszehn-zu-neun {
    width: 100%;
    padding-bottom: 56.25%;
    background-color: var(--main-color);
    object-fit: cover;
    position: relative;
    border-radius: 12px;
    background-repeat: none;
    background-size: contain;
}

div.neun-zu-sechszehn {
    padding: 177.78% 0 0 0;
    position: relative;
}

div.sechszehn-zu-neun iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}

div.content-wrapper {
    max-width: 90%;
    margin: auto;
}

.center {
    margin: auto;
}

button.center {
    display: block;
    margin: auto;
}

button.flex-vertical {
    display: flex;
    gap: 0.5em;
    align-items: center;
}

img.small-centered-img {
    width: 100%;
    max-width: 30em;
    display: block;
    margin: auto;
}

@media only screen and (min-width: 1400px) {
    div.content-wrapper {
        width: min(75vw, 1600px) !important;
    }
}

.rounded-corners {
    border-radius: var(--default-border-radius);
    overflow: hidden;
}

.rounded-corners.only-top {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.rounded-corners.only-bottom {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.no-top-margin {
    margin-top: 0;
}

.inactive {
    opacity: 0.3;
    pointer-events: none;
}

.small-margin-top {
    margin-top: 2em;
}

.medium-margin-top {
    margin-top: 6em !important;
}

.medium-margin-top-2 {
    margin-top: 4em !important;
}

div.rounded-corners {
    border-radius: var(--default-border-radius);
    overflow: hidden;
}

.blue-bg {
    background-color: var(--blue) !important;
}

.dark-orange-bg {
    background-color: var(--darker-orange) !important;
}

.bg-color {
    background-color: var(--bg-off-white);
}

div.circle {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 4px;
    background-color: #fff;
    color: #000;
    text-align: center;
    font-weight: 500;
}

.content-block,
.grid.content-block {
    margin-top: 10em;
    margin-bottom: 10em;
}

.content-block + .content-block {
    margin-top: 0;
}

@media only screen and (max-width: 700px) {
    .content-block {
        margin-top: 6em;
        margin-bottom: 6em;
    }
}

.gradient-fade-out::before {
    content: '';
    height: 150px;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        var(--bg-off-white) 70%
    );
    z-index: 9;

    transition: opacity 0.3s;

    opacity: 0;
}

.less.gradient-fade-out::before {
    opacity: 1;
}

div.img-container-with-text {
    position: relative;
}

div.img-container-with-text p {
    position: absolute;
    bottom: 1em;
    left: 1em;

    color: var(--font-off-white);

    text-shadow: 0px 0px 5px var(--textcolor);

    padding: 0.5em;

    border-radius: var(--smaller-border-radius);
}

.text-align-right {
    text-align: right;
    right: 1em;
    left: initial;
}

.text-align-left {
    text-align: left;
}

.no-margin {
    margin: 0 !important;
}

/* ======================================== BUTTONS ========================================  */

button {
    font: inherit;
    font-size: 1.25rem;
    border: none;
    padding: 0.5em 2em 0.5em 2em;

    border-radius: var(--default-border-radius);
    background-color: var(--red);
    color: var(--font-off-white);

    transition: all 200ms ease-in-out;

    font-weight: 300;
}

@media only screen and (max-width: 700px) {
    button {
        padding: 1em 1em;
        font-size: 1rem;
    }
}

button:hover {
    background-color: var(--darker-red);
    cursor: pointer;
}

button.btn_small_white {
    background-color: #fff6e4;
    color: rgb(0, 22, 63);
    border-radius: 50px;
    padding: 0.4em 1em;
    font-size: 1.3rem;
}

button.btn_small_white:hover {
    background-color: var(--blue);
}

button.btn_small_white p {
    font-size: 1.35rem;
    transition: all 200ms;
}

button.btn_small_white:hover p {
    color: white;
}

button.action-button {
    display: block;
    margin-left: auto;
    margin-top: 4em;

    border-radius: 50px;
    padding: 0.5em 1em;
}

button.white {
    background-color: var(--bg-off-white);
    color: black;
}

button.white:hover {
    background-color: var(--red);
    color: white;
}

button.expand-filters:hover {
    background-color: white;
    color: black;
}

button#return-to-selection {
    background: transparent;
    box-shadow: unset;
    border: 1px solid var(--bg-off-white);
    padding: 0.25em 1em;

    opacity: 0.6;
}

button#return-to-selection:hover {
    background-color: var(--bg-off-white);
    border-color: var(--bg-off-white);
    color: black;

    opacity: 1;
}

button.zum-kurs {
    position: absolute;
    top: 1em;
    right: 1em;
    /* background-color: white; */
    padding: 0.5rem 1.4rem;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    color: white;
    box-shadow: 0 0 10px 0px rgb(0 0 0 / 20%);

    font-size: 1.1rem;

    border-radius: 90px;
}

button.outline-button {
    background-color: transparent;
    border: 1px solid var(--textcolor);
    color: var(--textcolor);
}

p + button {
    margin-top: 2em;
}

button.outline-button.smaller {
    font-size: 1rem;
    padding: 0.5em 1.5em;
}

button.outline-button:hover,
button.outline-button.selected {
    background-color: rgb(0, 132, 165) !important;
    border: 1px solid rgb(0, 132, 165);
    color: var(--font-off-white);
}

button.outline-button.selected {
    border: 1px solid rgb(0, 132, 165) !important;
}

button.outline-button.valid {
    background-color: var(--gruen) !important;
    border: 1px solid var(--gruen);
    color: var(--font-off-white);
}

div.status.valid {
    background-color: rgb(225, 255, 196);
}

div.status.valid button {
    background-color: var(--gruen) !important;
    color: white;
    border-color: var(--gruen) !important;
}

div.status.invalid.next button {
    transform: scale(1);
    animation: pulsating 2s infinite;
    background-color: rgba(0, 132, 165, 0.4);
}

div.status.invalid.next button.selected {
    transform: scale(1);
    animation: none;
    background-color: rgba(0, 132, 165, 0.4);
}

div.status.invalid {
    background-color: rgb(240, 240, 240);
}

/* h2.subline + div button {
  margin-top: 1em;
} */

button.button-only-text {
    background-color: transparent;
    color: var(--textcolor);

    text-decoration: underline;
}

button.button-only-text:hover {
    color: black;
}

/* ======================================== HEADER + MENU ========================================  */

header .top-bar {
    height: var(--header-height);
    position: relative;
    padding: 1em 5em;

    display: flex;
    align-items: center;
    justify-items: center;
}

header img.logo {
    height: 25px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

header img.home-button {
    height: 30px;
}

img.buchfindomat-cutout {
    margin: auto;
}

header .hamburger-menu {
    height: 20px;
    width: 30px;
    cursor: pointer;
    margin-left: auto;
    position: relative;
    transition: opacity 0.25s ease;
}

.hamburger-menu span {
    background: black;
    border: none;
    height: 3px;
    width: 100%;
    position: absolute;
    top: 0;
    right: 3em;
    transition: all 0.35s ease;
    cursor: pointer;
}

.hamburger-menu p.menu-text {
    position: absolute;
    width: max-content;
    right: -4em;
    top: 0;
    bottom: 0;

    margin: auto;
    font-size: 0.9rem;
}

@media only screen and (max-width: 700px) {
    .hamburger-menu span {
        right: 0;
    }

    .hamburger-menu p.menu-text {
        display: none;
    }
}

.hamburger-menu span:nth-of-type(2) {
    top: 8px;
    background: black;
}
.hamburger-menu span:nth-of-type(3) {
    top: 16px;
    background: black;
}

.hamburger-menu.active .top {
    transform: translateY(8px) translateX(0) rotate(45deg);
}
.hamburger-menu.active .middle {
    opacity: 0;
}
.hamburger-menu.active .bottom {
    transform: translateY(-8px) translateX(0) rotate(-45deg);
}

menu {
    display: none;
    background: rgba(0, 0, 0, 0.2);
}

ul,
ol {
    padding-left: 1em;
    font-weight: 300;

    margin-bottom: 0;
}

ul li,
ol li {
    line-height: 1.35;
    font-size: 1.2rem;
}

ul li + li,
ol li + li {
    margin-top: 0.5em;
}

ul.footer-nav li + li {
    margin-top: initial;
}

nav ul {
    list-style-type: none;
    display: grid;

    grid-template-columns: 1fr;

    margin: 0;

    justify-items: center;

    gap: 3em;

    padding-top: 2em;
    padding-bottom: 4em;
    padding-left: 0;
}

nav ul li {
    color: var(--textcolor);

    letter-spacing: 2px;
    text-transform: uppercase;

    text-align: center;
}

nav ul li a {
    color: var(--textcolor);
    text-decoration: none;
    position: relative;
}

nav ul li a:before,
nav ul li a:after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: black;
}

nav ul li a:before {
    opacity: 0;
    transform: translateY(-8px);
    transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s;
}
nav ul li a:after {
    opacity: 0;
    transform: translateY(4px);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        opacity 0.2s;
}
nav ul li a:hover:before,
a:hover:after,
a:focus:before,
a:focus:after {
    opacity: 1;
    transform: translateY(0);
}
nav ul li a:hover:before,
a:focus:before {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        opacity 0.2s;
}
nav ul li a:hover:after,
a:focus:after {
    transition: transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        opacity 0s 0.2s;
}

li.selected a {
    color: var(--fortbildungen-color);
}

.hamburger-menu .hamburger {
    background: var(--textcolor);
    width: 30px;
    height: 3px;
    position: relative;
    transition: background 10ms 150ms ease;
}
.burger-wrapper .hamburger:before,
.burger-wrapper .hamburger:after {
    transition: top 150ms 150ms ease, transform 150ms 50ms ease;
    position: absolute;
    background: var(--textcolor);
    width: 30px;
    height: 3px;
    content: '';
}
.burger-wrapper .hamburger:before {
    top: -9px;
}
.burger-wrapper .hamburger:after {
    top: 9px;
}

.menu-trigger:checked ~ .burger-wrapper .hamburger {
    background: transparent;
}
.menu-trigger:checked ~ .burger-wrapper .hamburger:after,
.menu-trigger:checked ~ .burger-wrapper .hamburger:before {
    transition: top 150ms 50ms ease, transform 150ms 150ms ease;
    top: 0;
}
.menu-trigger:checked ~ .burger-wrapper .hamburger:before {
    transform: rotate(45deg);
}
.menu-trigger:checked ~ .burger-wrapper .hamburger:after {
    transform: rotate(-45deg);
}

@media only screen and (max-width: 700px) {
    header .top-bar,
    main {
        padding-left: 1em;
        padding-right: 1em;
    }

    header img.logo {
        height: 20px;
    }

    header img.home-button {
        height: 25px;
    }
}

.gradient-bg {
    /* background: linear-gradient(45deg, var(--red), var(--orange), var(--red)); */
    background: radial-gradient(var(--orange), var(--red)) !important;
    background-size: 100% 100%;

    /* filter: saturate(105%); */
}

.blue-gradient-bg {
    background: radial-gradient(var(---lighter-blue), var(--blue)) !important;
}

.light-blue-gradient-bg {
    background: radial-gradient(#cdf7ff, #a2eaf8) !important;
}

.animated-bg {
    background-size: 100% 100%;
    -webkit-animation: Gradient 5s ease infinite;
    -moz-animation: Gradient 5s ease infinite;
    animation: Gradient 5s ease infinite;
}

@-webkit-keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.bg-off-white {
    background-color: var(--bg-off-white);
}

/* ==================================================== SELECTION-BEREICH ==================================================== */

#introduction {
    transition: opacity 250ms ease-in-out;

    position: relative;
        display: flex;
    flex-direction: column;
    justify-content: center;

    display: flex;

    min-height: 500px;
}

#introduction .illustration{
    position: absolute;
    right: 0px;
    top: 2rem;
    height: calc(100% - 4rem);
    width: auto;
    z-index: 0;
}


#introduction .class-selection{
    z-index: 2;
}

div.card {
    background-color: var(--bg-off-white);
    border-radius: var(--default-border-radius);
    text-align: center;
    overflow: hidden;

    transition: box-shadow ease-in-out 0.25s;

    height: 100%;
}

div.card .card-icon {
    max-width: 5em;
    margin: auto;
    margin-bottom: 1em;
}

div.class-selection {
    position: relative;
    padding-top: 3em;
    padding-bottom: 3em;


}

button.bookgrid_generate{
    display: flex;
    gap: 0.25em;
    align-items: center;
    justify-content: center;

    background: linear-gradient(#ffa62a, var(--fortbildungen-color));
    box-shadow: inset 0 3px 3px #ffcc0085, 0 2px 4px #00000005, 0 3px 5px #00000008;
    color: white;
    width: fit-content;
    border-radius: 100px;
    border: 1px solid rgb(255, 203, 81);
}

button.bookgrid_generate:hover{
    transform: scale(1.4);
}

button.bookgrid_generate svg{
    width: 25px;
    fill: white;
}

div.selection-button-container{
    display: flex;
        flex-wrap: wrap;
    row-gap: 0.25em;
    column-gap: 1em;
}



div.selection-button-container button {
    margin-top: 0.25em;
}

div.selection-card {
    min-height: 260px;
}

div.selection-card.animated {
    animation-name: card-cycle;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

div.selection-card:nth-child(1) {
    animation-delay: 0s;
}

div.selection-card:nth-child(2) {
    animation-delay: 0.2s;
}

div.selection-card:nth-child(3) {
    animation-delay: 0.4s;
}

@media only screen and (max-width: 1200px) {
    div.selection-card:nth-child(2) {
        animation-delay: 0s;
    }

    div.selection-card:nth-child(1) {
        animation-delay: 0.2s;
    }

    div.selection-card:nth-child(3) {
        animation-delay: 0.4s;
    }
}

@keyframes card-cycle {
    0% {
        transform: scale(1);
    }
    80% {
        transform: scale(1);
    }
    90% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

div.class-selection .card {
    transition: transform ease-in-out 0.25s, box-shadow ease-in-out 0.25s;
    /* filter: drop-shadow(0px 0px 6px rgba(26, 48, 86, 0.1)); */

    max-width: 330px;
    position: relative;
}

@media only screen and (max-width: 700px) {
    div.class-selection .card {
        min-height: 15em;
    }
}

div.class-selection .card:nth-child(2) {
    position: relative;
    top: -1.25em;
}

div.class-selection .selection-card:hover,
.card:hover {
    /* transform: scale(1.1); */
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

div.kleinkinder-card,
.jugendliche-card,
.kinder-card {
    min-height: 40vh;
    background-size: cover;
    background-position: center;
    background-repeat: none;
}

div.kleinkinder-card {
    background-image: url(/IMAGES/Illustrationen/Kleinkinder-Illustration.png);
}

div.kinder-card {
    background-image: url(/IMAGES/Illustrationen/Kinder-Illustration.png);
}

div.jugendliche-card {
    background-image: url(/IMAGES/Illustrationen/Jugendliche-Illustration.png);
}

div.class-selection .card img {
    background-repeat: no-repeat;
    margin: auto;
    max-width: 150%;
    display: block;

    transform: translateX(-14%);
}

div.card .card-description {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: var(--accent-blue);
    background: linear-gradient(180deg, var(---lighter-blue), var(--blue));
    color: white;
    padding: 0.5em;
}

div.card .card-description h2 {
    margin: 0;
    padding: 0;
    color: var(--font-off-white);
}

@media only screen and (max-width: 1200px) {


    div.class-selection .card:nth-child(1) {
        grid-row-start: 2;
    }

    div.class-selection .card:nth-child(2) {
        /* position: unset; */
        grid-column-start: 1;
        grid-column-end: 3;

        width: 44vw;
        margin-left: auto;
        margin-right: auto;
    }

    div.class-selection .card:nth-child(3) {
        grid-row-start: 2;
    }

    div.kleinkinder-card,
    .jugendliche-card,
    .kinder-card {
        min-height: 28vh;
    }
}

/* ==================================================== BOOKS-BEREICH ==================================================== */

#books {
    width: 100%;
    max-width: 80em;
    margin: auto;

    position: relative;

    padding-bottom: 5em;

    opacity: 0;
    transition: opacity 250ms ease-in-out;

    min-height: 100%;
}

div.return-to-selection-box {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;

    cursor: pointer;
}

@media only screen and (max-width: 900px) {
    div.return-to-selection-box {
        justify-content: center;
        position: unset;
    }
}

#books .auswaehlen {
    width: 100%;
    text-align: center;
    margin-top: 1.5em;
    font-size: 1.33rem;
    color: var(--main-kinder-red);

    transition: all 0.2s ease;

    animation: bounce 3s ease 0s infinite normal;
}

#bookgrid_wrapper {
    position: relative;
    margin-bottom: 4em;
}

#bookgrid {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    /* width: 100%; */
    height: auto;
    overflow: hidden;
    transition: height 0.35s;
}

#bookgrid img.cover {
    position: absolute;
    left: 0px;
    top: 0px;
    height: auto;

    transition: transform 2s ease-in-out;
    transition-duration: 0s;

    box-shadow: 1px 1px 4px;
    display: block;
    -webkit-backface-visibility: hidden;
    color: black;
    cursor: pointer;
}

#bookgrid img.cover:hover {
    cursor: pointer;
}

.bookgrid_close {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);

    cursor: pointer;

    transition: opacity 0.2s;
    opacity: 1;
}

.bookgrid_close.hidden {
    opacity: 0;
    display: block;
}

.bookgrid_detail {
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    max-width: 60em;
    margin: auto;
    height: 100%;

    height: auto;

    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    pointer-events: none;
}

.bookgrid_detail::before,
.bookgrid_detail::after {
    content: '';
    position: absolute;
    display: block;
    top: -2.25em;
    right: 0.5em;
    height: 1.5em;
    width: 2px;
    background-color: var(--font-off-white);
    cursor: pointer;
}

.bookgrid_detail::before {
    transform: rotateZ(45deg);
}

.bookgrid_detail::after {
    transform: rotateZ(-45deg);
}

.bookgrid_detail.hidden {
    display: block;
    opacity: 0;
    transform: scale(0.9);
}

.bookgrid_detail .wrapper {
    position: relative;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;

    pointer-events: none;

    display: flex;
    width: 100%;
    height: auto;
    max-width: 60em;
    max-height: 85vh;

    overflow: hidden;

    border-radius: var(--default-border-radius);

    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
    z-index: 2;
}

.bookgrid_detail .wrapper img.cover {
    max-width: min(21em, 30vw);
}

.bookgrid_detail .wrapper .info-section .action {
    display: flex;
    align-content: center;
    justify-content: center;
    gap: 0.5em;
}

.bookgrid_detail .wrapper .action button {
    font-size: 1em;

    background-color: rgba(255, 255, 255, 1);
    color: black;

    display: flex;
    gap: 0.25em;
    text-align: unset;
    align-items: center;

    margin: auto;
    padding: 0.3em 1em 0.3em 1em;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.bookgrid_detail .wrapper .action button:hover {
    background-color: white;
    transform: scale(1.1);
}

.bookgrid_detail .wrapper .action button p {
    font-size: 1rem;
}

.bookgrid_detail .wrapper .action button img {
    width: 4em;
    margin-top: -4px;
}

.bookgrid_detail .wrapper .action button p {
    white-space: nowrap;
}

.bookgrid_detail .wrapper .info .info-section {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: var(--default-border-radius);
    padding: 1em;
}

.info-section h3 {
    color: var(--font-off-white);
}

.bookgrid_detail .wrapper .info {
    position: relative;
    left: 0px;
    width: 100%;
    height: auto;

    pointer-events: all;
    padding: 1em;
    box-sizing: border-box;
    color: var(--font-off-white);
    flex-shrink: 1;

    display: flex;
    gap: 1em;
    flex-direction: column;

    overflow-y: auto;
}

/* .bookgrid_detail .wrapper .info .head {
  padding: 1em;
  border: 1px solid white;
  border-radius: 0.6em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
} */

.bookgrid_detail .wrapper .info .head h3,
.bookgrid_detail .wrapper .info .head p {
    margin: 0px;
}

.bookgrid_detail .wrapper .info .audio-wrapper{
    border-radius: 10px;
    padding: 10px 15px;
    border: 1px solid rgba(0,0,0,0.25);
}

.bookgrid_detail .wrapper .info .audio-wrapper p{
    font-weight: 700;
    opacity: 0.5;
    margin-bottom: 10px;
}

.bookgrid_detail .wrapper .info .audio {
    position: relative;
    box-sizing: content-box;
    height: 2em;

    display: flex;
    align-items: center;
    gap: 0.5em;

    margin-top: -0.5em;
}

.bookgrid_detail .wrapper .info .audio .title {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    text-align: center;
}

.bookgrid_detail .wrapper .info .audio .control,
div.audio-container .control {
    width: 2em;
    height: 2em;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s;
}

.bookgrid_detail .wrapper .info .audio .control:hover,
div.book:hover div.audio-container .control {
    transform: scale(1.2);
}

.bookgrid_detail .wrapper .info .audio .control.play::before,
div.audio-container .control.play::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
    border-left: 1em solid white;
    margin-left: 0.5em;
    margin-top: 0.4em;
}

.bookgrid_detail .wrapper .info div.audio.schwarz .control.play::before,
div.audio-container .control.play::before {
    border-left: 1em solid var(--textcolor);
}

.bookgrid_detail .wrapper .info div.audio.schwarz .bar {
    background-color: var(--textcolor);
}

.bookgrid_detail .wrapper .info .audio .control.pause::before,
.bookgrid_detail .wrapper .info .audio .control.pause::after,
div.audio-container .control.pause::before,
div.audio-container .control.pause::after {
    content: '';
    display: block;
    height: 1em;
    position: absolute;
    top: 0.5em;
    width: 0.25em;
    background-color: white;
}

div.audio-container .control.pause {
    width: 18px !important;
}

.bookgrid_detail .wrapper .info div.audio.schwarz .control.pause::after,
.bookgrid_detail .wrapper .info div.audio.schwarz .control.pause::before,
div.audio-container .control.pause::before,
div.audio-container .control.pause::after {
    background-color: var(--textcolor);
}

.bookgrid_detail .wrapper .info .audio .control.pause::before,
div.audio-container .control.pause::before {
    left: 0.6em;
}

.bookgrid_detail .wrapper .info .audio .control.pause::after,
div.audio-container .control.pause::after {
    right: 0.6em;
}

.bookgrid_detail .wrapper .info .audio .bar {
    position: relative;
    flex-grow: 1;
    height: 0.5em;
    background-color: white;
    border-radius: 0.25em;
}

.bookgrid_detail .wrapper .info .audio .bar .progress {
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: var(--main-kinder-red);
    border-radius: 0.25em;
    height: 100%;
    width: 0px;

    opacity: 0.75;
}

div.time {
    width: 45px;
    text-align: right;
}

.bookgrid_detail .wrapper .info .text {
    flex-shrink: 1;
    overflow-y: auto;
    margin-top: 1.2em;
    margin-bottom: 1.5em;
}

/* .bookgrid_detail .wrapper .info .abmoderation {
  padding: 0 1em 0 1em;
  margin-bottom: 1.5em;
} */

div.info.dunkel .book-cta {
    color: white;
}

div.info.hell .book-cta {
    color: black;
}

div.info.hell .action button {
    border-color: rgba(0, 0, 0, 1);
    background-color: rgba(255, 255, 255, 1);
}

div.info.dunkel .action button {
    color: black;
    background-color: rgba(255, 255, 255, 1);
}

.bookgrid_detail .wrapper .info .book-cta > p {
    opacity: 0.85;
    font-size: 0.95rem;
    margin-bottom: 1em;
    text-align: center;
}

.bookgrid_detail .wrapper .info .book-cta + p {
    margin-top: -1em;
}

@media only screen and (max-width: 700px) {
    .bookgrid_detail .wrapper {
        flex-flow: column;
        background: none !important;
        max-height: unset;
        box-shadow: unset;
    }

    .bookgrid_detail .wrapper img.cover {
        max-width: 50vw;
        margin: auto;

        z-index: 2;

        position: relative;
        top: 0.5em;
    }

    .bookgrid_detail .wrapper .info {
        border-radius: var(--default-border-radius);
    }
}

.bookgrid_detail div.cta-box {
    background: white;
    border-bottom-left-radius: var(--default-border-radius);
    border-bottom-right-radius: var(--default-border-radius);

    padding: 1em;
    padding-top: calc(1em + 15px);

    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;

    pointer-events: all;

    margin-top: -15px;

    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
}

div.cta-box p {
    font-size: 1.1rem;
    color: white;
}

/* div.cta-box.hell p {
    color: white;
}

div.cta-box.dunkel p {
    color: white;
} */

div.book-cta {
    padding: 1em;
    border: 1px solid;
    border-radius: var(--default-border-radius);
    margin-top: 2em;
}

div.cta-box p.question {
    font-weight: 600;
    font-size: 1.2rem;

    color: white;

    margin-bottom: 0.5em;
}

div.cta-box div.grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

@media only screen and (max-width: 700px) {
    div.cta-box div.grid-wrapper {
        grid-template-columns: 1fr;
    }
}

div.cta-box div.grid-wrapper div.cta-element {
    padding: 10px;
    border-radius: var(--default-inner-border-radius);

    display: flex;
    gap: 10px;
    align-items: center;

    text-align: left;
}

div.cta-box div.grid-wrapper div.cta-element {
    background-color: rgba(0, 0, 0, 0.2);
}

/* div.cta-box.hell div.grid-wrapper div.cta-element {
    background-color: rgba(255, 255, 255, 0.4);
}

div.cta-box.dunkel div.grid-wrapper div.cta-element {
    background-color: rgba(0, 0, 0, 0.2);
} */

div.geschenk-info.cta-element div {
    width: 100%;
}
div.geschenk-info.cta-element div button.kaufen-button {
    background-color: rgba(255, 255, 255, 1);
    width: 100%;
    height: 100%;
    padding: 0.5em;

    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
}

div.kaufenButtons-Wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px; /* Adjust the gap size as needed */
}
div.geschenk-info.cta-element div button {
    padding: 0.5em 1em;
    margin-top: 5px;
    display: block;

    color: black;

    transition: all 200ms;

    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

div.geschenk-info.cta-element div button img {
    width: 100px;
    margin-top: -4px;
    margin-left: 2px;
}

div.geschenk-info.cta-element div button:hover {
    background-color: var(--orange);
    color: white;
}

div.geschenk-info.cta-element div button:hover svg {
    fill: white !important;
}

div.geschenk-info.cta-element div button:hover p {
    color: white;
}

div.geschenk-info.cta-element div button p {
    color: black;
    transition: all 200ms;
}
div.geschenk-info.cta-element div button svg {
    transition: all 200ms;
    fill: black !important;
}

div.geschenk-info.cta-element div button div.flex_vertical {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

div.cta-box div.grid-wrapper svg.svg-icon {
    width: 40px;
    fill: white;
}

/* div.cta-box.dunkel div.cta-element svg {
    fill: white;
}

div.info.hell div.cta-element svg {
    fill: var(--textcolor);
} */

div.cta-box.dunkel div.cta-element {
    background-color: rgba(0, 0, 0, 0.2);
}

button.expand-filters {
    width: 100%;
    box-shadow: unset;
    padding-top: 0.5em;
    padding-bottom: 0.5em;

    display: flex;

    justify-content: center;
    gap: 0.5em;

    opacity: 1;
}

button.expand-filters:hover {
    opacity: 1;
}

div.filter-box {
    position: sticky;
    margin-top: 5em;
    bottom: 1em;
    left: 0;
    right: 0;

    z-index: 99999999999;
    width: 30em;
    margin: auto;

    background-color: rgba(255, 157, 0, 1);

    background: linear-gradient(
        45deg,
        var(--lighter-red),
        var(--lighter-orange),
        var(--lighter-red)
    );
    background-size: 150% 150%;

    box-shadow: 0 0 60px rgba(0, 0, 0, 0.4);

    padding: 5px;
    border-radius: calc(var(--default-border-radius) + 5px);
}

button[data-filter-value='gesprächsanregend'],
button[data-filter-value='gesellschaftskritisch'] {
    grid-column: span 2;
}

div.filter-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    row-gap: 15px;

    padding: 1em;

    grid-auto-flow: row dense;
}

.filter-box button.bookgrid_filter {
    background: none;
    font-size: 1rem;
    color: var(--font-off-white);
    padding: 0;
    box-shadow: unset;

    min-width: 0;
}

.filter-box button.bookgrid_filter:hover {
    opacity: 1;
}

button.bookgrid_filter.selected {
    opacity: 1;
}

button.expand-filters svg {
    transition: transform 0.25s ease-in-out;
}

button.expand-filters.active {
    opacity: 1;
}

button.expand-filters.active svg {
    transform: scaleY(-1);
}

button.bookgrid_filter.selected .filter_icon_container,
.filter-box button.bookgrid_filter:hover .filter_icon_container {
    opacity: 1;
}

button.bookgrid_filter .filter_icon_container {
    background-color: white;
    padding: 0.5em;
    border-radius: var(--default-border-radius);
    margin-bottom: 3px;

    opacity: 0.5;
    transition: all 0.2s ease-in-out;
}

button.bookgrid_filter .filter_icon_container img {
    width: 30px;
}

@media only screen and (max-width: 700px) {
    button.expand-filters {
        width: 100%;
    }
    div.filter-box {
        width: 100%;
    }

    div.filter-options {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (max-width: 400px) {
    div.filter-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* LOADER */

.loader {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    min-height: 100%;
    display: flex;

    flex-direction: column;

    margin-top: 10em;
    margin-bottom: 10em;
}

/** Settings */
.loading-bubbles {
    margin: auto;
}
.loading-bubbles .bubble-container {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
}
.loading-bubbles .bubble-container .bubble {
    border-radius: 50%;
    background-color: #fff;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    animation: bubble 1.2s -0.6s infinite ease-out;
}
.loading-bubbles .bubble-container:nth-of-type(2n) .bubble {
    animation-delay: -0.3s;
}
.loading-bubbles .bubble-container:nth-of-type(3n) .bubble {
    animation-delay: 0s;
}

@keyframes bubble {
    0%,
    100% {
        transform: scale(0);
    }
    50% {
        transform: scale(1);
    }
}

@media only screen and (min-width: 1000px) {
    div.uneven a:nth-child(odd) {
        margin-top: 1em;
    }
}

/* ==================================================== SECTIONS ==================================================== */

section {
    padding-left: 5em;
    padding-right: 5em;
    margin-top: 4em;
    margin-bottom: 4em;
}

section + section {
    margin-top: 0;
}

section#buchvorstellung {
    padding: 1em;
    margin: 0;
    background-color: var(--fortbildungen-color);
    border-top: 1px solid rgb(255, 193, 127);
}

section#buchvorstellung a {
    font-size: 1.3rem;
    color: rgb(255, 214, 170);
    opacity: 1;
    font-weight: 300;

    transition: color 200ms;
}

section#buchvorstellung a:hover {
    color: var(--font-off-white);
}

@media only screen and (max-width: 700px) {
    section {
        padding-left: 0.5em;
        padding-right: 0.5em;
        padding-top: 3em;
    }
}

div.eltern-card,
div.fortbildungen-card,
div.automat-card,
div.eltern-card h2,
div.fortbildungen-card h2,
div.automat-card h2 {
    color: var(--font-off-white);
}

section .card {
    padding-left: 1.5em;
    padding-right: 1.5em;
    padding-top: 2em;
    padding-bottom: 2em;
    position: relative;
}

.card img.arrow-button {
    position: absolute;
    right: 1em;
    top: 1em;
}

section .card h2 {
    margin-top: 0;
    padding: 0 50px 0 50px;
}

section .grid a {
    min-width: 0;
}

section#interessantes {
    margin-top: 5em;
}

@media only screen and (max-width: 700px) {
    section#interessantes {
        margin-top: 0em;
    }
}

/* --fortbildungen-color: ;
--automat-color: #128c60; */

div.eltern-card {
    background-color: var(--eltern-color);
    background: radial-gradient(hsl(4, 100%, 75%), var(--eltern-color));
}

div.fortbildungen-card {
    background-color: var(--fortbildungen-color);
    background: radial-gradient(#ffa62a, var(--fortbildungen-color));
}

div.automat-card {
    background-color: var(--automat-color);
    background: radial-gradient(hsl(186, 100%, 43%), var(--automat-color));
}

div.white-box {
    margin-top: 6em;
    background: white;
    border-radius: var(--default-border-radius);
    padding: 2em;
    opacity: 1;
    border: 1px solid #f4f4f4;
}

@media only screen and (max-width: 700px) {
    div.white-box,
    div.video-box div.grid {
        padding: 1em;
    }
}

div.white-box.blue-bg,
div.white-box.gradient-bg {
    color: var(--font-off-white);
}

div.video-box,
div.about-us-box {
    padding: 0;
    overflow: hidden;
}

div.about-us-box {
    background-color: transparent;
}

div.about-us-box div.description {
    background: white;
}

div.video-box div.grid {
    padding: 2em;
    padding-top: 0;
}

div.white-box .grid {
    margin-bottom: 0;
}

div.white-box .about-us-box {
    padding-top: 0 !important;
}

div.about-us-box .grid {
    margin-top: 0;
    column-gap: 0.5em;
    row-gap: 0;
}

div.about-us-box img {
    width: 100%;
}

div.about-us-box div.description {
    padding: 2em;
    height: 100%;
}

/* ==================================================== SECTIONS ==================================================== */

footer {
    margin-top: 6em;
    padding-bottom: 2.5em;

    padding-left: 5em;
    padding-right: 5em;
    padding-top: 2em;
    padding-bottom: 2em;

    background-color: var(--accent-blue);

    color: var(--font-off-white);
}

footer .content-wrapper {
    display: flex;
}

@media only screen and (max-width: 700px) {
    footer {
        padding-left: 1em;
        padding-right: 1em;
    }
}

footer p {
    margin: 0;
}

footer a {
    color: var(--font-off-white);
}

ul.footer-nav {
    display: block;
    margin: 0;
    margin-left: auto;
    padding: 0;
}

ul.footer-nav li {
    display: inline-block;
    color: var(--font-off-white);
}

ul.footer-nav li + li {
    margin-left: 1em;
}

@media only screen and (max-width: 500px) {
    footer .content-wrapper {
        display: unset;
        text-align: center;
    }

    ul.footer-nav {
        display: block;
        margin-top: 1em;
    }
}

div.white-box .fortbildungen-grid {
    margin-bottom: 5em;
}

/* ======================================== KONTAKT ========================================  */

div.formMessage.messageSuccess_kontakt,
div.formMessage.messageFailure_kontakt {
    display: none;
}

div.formMessage.messageSuccess_kontakt {
    padding: 1em;
    background-color: green;
    border-radius: 8px;
}

div.formMessage.messageSuccess_kontakt p {
    color: white;
}

form {
    max-width: 750px;
}

form .half {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
}

form .half .contact_item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5em;
    width: 48%;
}

form .half .contact_item.additional{
    display: none;
}

@media only screen and (max-width: 700px) {
    form .half {
        flex-direction: column;
    }

    form .half .contact_item {
        width: 100%;
    }
}

form label {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.5em;
    font-weight: 300;
    font-size: 1rem;
}

form.contact_form {
    margin-top: 2em;
}

form.contact_form h3 {
    margin-bottom: 0.2em;
    font-size: 1.35rem;
}

form .half .contact_item input {
    border-radius: var(--default-border-radius);
    border: 1px solid var(--light-grey);
    font-size: 1rem;
    padding: 1em;
    outline: 0;
    width: 100%;
}

form .full {
    margin-bottom: 20px;
}

form .full textarea {
    border-radius: var(--default-border-radius);
    border: 1px solid var(--grey);
    width: 100%;
    height: 200px;
    font-size: 1rem;
    outline: 0;
    padding: 0.5rem;

    border: 1px solid var(--light-grey);
}

textarea.message_small {
    height: unset !important;
}

form textarea.medium_textarea {
    height: 100px !important;
}

input.no_border {
    border: none !important;
}

form .half .contact_item input:focus,
form .full textarea:focus {
    border: 1px solid black;
}

div.rightaligned_img {
    position: relative;
}

@media only screen and (max-width: 1300px) {
    div.rightaligned_img {
        display: none;
    }
}

/* CHECKBOX-STYLE */

.md-checkbox {
    position: relative;
    margin: 1em 0;
    text-align: left;
    display: flex;
}
.md-checkbox.md-checkbox-inline {
    display: inline-block;
}
.md-checkbox label {
    cursor: pointer;
    display: inline;
    line-height: 1.25em;
    vertical-align: top;
    clear: both;
    padding-left: 1px;

    display: inline-block;
    /* margin-top: -0.95em; */
    /* margin-left: 1em; */

    margin-left: 10px;
}

/* .md-checkbox label:not(:empty) {
  padding-left: 15px !important;
} */

@media only screen and (min-width: 1270px) {
    .md-checkbox label {
        margin-top: -1px;
        padding-left: 0;
    }

    .md-checkbox label:not(:empty) {
        padding-left: 0 !important;
    }

    .md-checkbox input {
        float: none;
    }
}

.md-checkbox label.accept_geschaeftsbedingungen {
    margin-top: -0.2em;
    margin-left: 0em;
}
/* .md-checkbox label:not(:empty) {
  padding-left: 0.75em;
} */
.md-checkbox label:before,
.md-checkbox label:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
}
.md-checkbox label:before {
    width: 1em;
    height: 1em;
    background: #fff;
    border: 1px solid var(--grey);
    border-radius: 0.15em;
    cursor: pointer;
    transition: background 0.2s;
}

.md-checkbox input[type='checkbox'] {
    outline: 0;
    visibility: hidden;
    width: 1em;
    margin: 0;
    display: block;
    float: left;
    font-size: inherit;
}

@media only screen and (max-width: 1270px) {
    .md-checkbox input[type='checkbox'] {
        float: none !important;
    }
}

.md-checkbox input[type='checkbox']:checked + label:before {
    background: var(--main-color);
    border: none;
}
.md-checkbox input[type='checkbox']:checked + label:after {
    transform: translate(0.2em, 0.25em) rotate(-45deg);
    width: 0.55em;
    height: 0.35em;
    border: 0.1em solid #fff;
    border-top-style: none;
    border-right-style: none;
}
.md-checkbox input[type='checkbox']:disabled + label:before {
    border-color: rgba(0, 0, 0, 0.26);
}
.md-checkbox input[type='checkbox']:disabled:checked + label:before {
    background: rgba(0, 0, 0, 0.26);
}

/* ==================================================== AUTOMAT-SEITE ==================================================== */

div.buchfindomat-detail-grid {
    display: grid;
    grid-template-areas:
        'Kopfhoerer Lampe Raufaser'
        'Kopfhoerer Buchfindomat Knoepfe'
        'Plakette Buchfindomat Lautsprecher'
        'Plakette Buchfindomat Lautsprecher';

    gap: 0.5em;
}

@media only screen and (max-width: 950px) {
    div.buchfindomat-detail-grid {
        grid-template-areas:
            'Buchfindomat'
            'Kopfhoerer'
            'Lampe'
            'Raufaser'
            'Knoepfe'
            'Plakette'
            'Lautsprecher';
    }
}

div.buchfindomat-detail-grid div {
    background-color: grey;
    border-radius: 8px;
    position: relative;
    transition: all 0.4s;

    min-height: 10em;
}

div.buchfindomat-detail-grid div:hover {
    transform: scale(1.3);
    z-index: 999;
    box-shadow: 0 0 40px black;
}

div.buchfindomat-detail-grid div h3 {
    text-align: center;
    position: absolute;
    bottom: 0.6em;
    margin: 0;
    left: 0.5rem;
    right: 0.5rem;
    z-index: 10;

    color: white;
    font-weight: 400;

    line-height: 1;
}

div.buchfindomat-detail-grid div h3 span {
    color: white;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.2rem !important;
}

div.buchfindomat-detail-grid div::before {
    content: '';
    height: 120px;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.8) 70%
    );
    z-index: 9;

    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

div.buchfindomat-detail-grid div.kopfhoerer {
    grid-area: Kopfhoerer;
    background-image: url(/IMAGES/Fotos/Buchfindomat-Details/Kopfhoerer-b.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
div.buchfindomat-detail-grid div.lampe {
    grid-area: Lampe;
    background-image: url(/IMAGES/Fotos/Buchfindomat-Details/Lampe.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
div.buchfindomat-detail-grid div.raufaser {
    grid-area: Raufaser;
    background-image: url(/IMAGES/Fotos/Buchfindomat-Details/Raufasertapete.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
div.buchfindomat-detail-grid div.plakette {
    grid-area: Plakette;
    background-image: url(/IMAGES/Fotos/Buchfindomat-Details/Tischplakette.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
div.buchfindomat-detail-grid div.knoepfe {
    grid-area: Knoepfe;
    background-image: url(/IMAGES/Fotos/Buchfindomat-Details/Knoepfe.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
div.buchfindomat-detail-grid div.buchfindomat {
    grid-area: Buchfindomat;
    background-image: url(/IMAGES/Fotos/Buchfindomat-Details/Tilli\ Buchfind.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    min-height: 20em;
}
div.buchfindomat-detail-grid div.lautsprecher {
    grid-area: Lautsprecher;
    background-image: url(/IMAGES/Fotos/Buchfindomat-Details/Lautsprecher.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 20em;
}

div.full select {
    margin-top: 0.5em;
    width: 100%;
    min-width: 360px;
    max-width: 30ch;
    border-radius: var(--default-border-radius);
    border: 1px solid var(--light-grey);
    padding: 0.5em 0.5em;
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1.1;
    background-color: #fff;
    background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
}

div.alert-info {
    background-color: var(--orange);
  
    width: fit-content;
    margin: auto;
    border-radius: var(--default-border-radius);
    padding: 1em 3em;
}

div.alert-info h2 {

}

div.deutschland-buchfindomat-map {
    position: relative;
}

div.buchfindomat-location {
    position: absolute;
    z-index: initial;
    transform: translate(-50%, -50%);
}

div.buchfindomat-location.abgelaufen img.marker {
    width: 1em;
    filter: saturate(0);
    opacity: 0.5;
}

div.buchfindomat-location:hover,
div.buchfindomat-location.hovered {
    z-index: 999;
}

div.buchfindomat-location img.marker {
    width: 2em;

    margin: auto;
    margin-top: -2em;

    /* background-image: url(/IMAGES/Fotos/Buchfindomat-Cutout-v2.png); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    transition: all 0.2s;
}

div.buchfindomat-location div.info {
    display: none;
    pointer-events: none;
    background: white;
    padding: 0.5em 1em;
    text-align: center;
    border-radius: 8px;
    border: 1px solid black;

    z-index: 2;

    position: absolute;
    top: 100%;
    left: -300px;
    right: -300px;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    transform: scale(0.7);
    transition: all 0.2s;
}

div.buchfindomat-location:hover div.info,
div.buchfindomat-location.hovered div.info {
    display: block;
}

div.buchfindomat-location div.more-info-box {
    width: 100%;
    min-height: 13em;
    border-radius: 8px;
    transition: all 0.2s;
    margin-bottom: 0.5em;

    display: none;
    margin-top: 0.5em;

    background-image: url(/IMAGES/Fotos/kemnitz-aufnahme.jpg);
    background-size: cover;
    background-position: center;
}

div.location-slider div img{
    width: 100%;
}

div.location-slider div.location{

    border-radius: 20px;
    margin: 0.25em;
    overflow: hidden;
    display: flex;
    flex-direction: column-reverse;
    background-color: white;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
}

div.location-slider div.location p{
    padding: 1em;
    font-weight: 600;
}

div#zlb-foto {
    background-image: url(/IMAGES/Fotos/locations/zlb.jpg);
}

div#oelde-foto {
    background-image: url(/IMAGES/Fotos/locations/oelde.jpg);
}

div#kelsterbach-foto {
    background-image: url(/IMAGES/Fotos/locations/kelsterbach.jpg);
}

div#neufahrn-foto {
    background-image: url(/IMAGES/Fotos/locations/neufahrn.jpg);
}

div#walldorf-foto {
    background-image: url(/IMAGES/Fotos/locations/walldorf.jpg);
}

div#schoulzentrum-foto {
    background-image: url(/IMAGES/Fotos/locations/schoulzentrum.jpg);
}

div#badtoelz-foto {
    background-image: url(/IMAGES/Fotos/locations/badtoelz.jpg);
}

div#baselland-foto {
    background-image: url(/IMAGES/Fotos/locations/baselland.jpg);
}

div#ostfildern-foto {
    background-image: url(/IMAGES/Fotos/locations/ostfildern.jpg);
}

div#lage-foto {
    background-image: url(/IMAGES/Fotos/locations/lage.jpeg);
}

div#nidda-foto {
    background-image: url(/IMAGES/Fotos/locations/nidda.jpg);
}

div#delmenhorst-foto {
    background-image: url(/IMAGES/Fotos/locations/delmenhorst.jpg);
}

div#bestenbostel-foto {
    background-image: url(/IMAGES/Fotos/locations/bestenbostel.jpg);
}

div#reinickendorf-foto {
    background-image: url(/IMAGES/Fotos/locations/reinickendorf.jpg);
}

div#hoevelhof-foto {
    background-image: url(/IMAGES/Fotos/locations/hoevelhof.jpg);
}

div#graefeling-foto {
    background-image: url(/IMAGES/Fotos/locations/graefeling.jpg);
}

div.buchfindomat-location img.marker:hover + div.info div.more-info-box,
div.buchfindomat-location.hovered div.info div.more-info-box {
    display: block;
}

div.buchfindomat-location img.marker:hover + div.info,
div.buchfindomat-location.hovered div.info {
    transform: scale(1);
}

div.buchfindomat-location img.marker:hover,
div.buchfindomat-location.hovered img.marker {
    transform: scale(1.4);
    z-index: 999 !important;
}

div.buchfindomat-location div.info p.location {
    font-size: 1rem;
}

div.buchfindomat-location#berlin {
    left: 84.6%;
    top: 34.1%;
}

div.buchfindomat-location#nidda {
    left: 32%;
    top: 59%;
}

div.buchfindomat-location#ostfildern {
    left: 32.4%;
    top: 81.2%;
}

div.buchfindomat-location#lage {
    left: 31.6%;
    top: 38%;
}

div.buchfindomat-location#badtoelz {
    left: 63%;
    top: 92.1%;
}

div.buchfindomat-location#delmenhorst {
    left: 35%;
    top: 25%;
}

div.buchfindomat-location#bestenbostel {
    left: 25%;
    top: 20.7%;
}

div.buchfindomat-location#graefeling {
    left: 58%;
    top: 88%;
}

div.buchfindomat-location#hoevelhof {
    left: 32%;
    top: 41%;
}

div.buchfindomat-location#oelde {
    left: 34%;
    top: 42%;
}

div.buchfindomat-location#neufahrn {
    left: 65%;
    top: 86%;
}

div.buchfindomat-location#reinickendorf {
    left: 79%;
    top: 32%;
}

div.buchfindomat-location#baselland {
    left: 20%;
    top: 96%;
}

div.buchfindomat-location#sauer {
    left: 0%;
    top: 59%;
}

div.buchfindomat-location#badaibling {
    left: 70%;
    top: 91%;
}

div.buchfindomat-location#kelsterbach {
    left: 28%;
    top: 59%;
}

div.buchfindomat-location#walldorf {
    left: 31%;
    top: 74%;
}

div.buy-box {
    border-top: 1px solid var(--light-grey);
}

div.price-box {
    border-radius: var(--default-border-radius);
    padding: 2em;
    padding-bottom: 2.5em;
    width: fit-content;
    margin: auto;
    text-align: center;
    position: relative;

    margin-top: 4em;

    background-color: var(--blue);
}

div.price-box.price-special {
    width: 100%;
    margin-top: 1.5em;
    margin-bottom: 1em;
}

div.price-box h3,
div.price-box p {
    color: var(--font-off-white);
    margin: 0;
}

div.price-box button {
    position: absolute;
    bottom: -1.1em;
    left: 0;
    right: 0;
    width: fit-content;
    margin: auto;
}

div.features-grid div {
    display: flex;
    justify-items: center;
    align-items: center;

    padding: 1em;
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: var(--default-border-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); */
}

div.features-grid div:nth-child(1) {
    margin-left: 0;
}
div.features-grid div:nth-child(2) {
    margin-left: 0.5em;
}
div.features-grid div:nth-child(3) {
    margin-left: 1em;
}
div.features-grid div:nth-child(4) {
    margin-left: 1em;
}
div.features-grid div:nth-child(5) {
    margin-left: 0.5em;
}
div.features-grid div:nth-child(6) {
    margin-left: 0;
}

div.features-grid.lightblue-bg div {
    background-color: rgb(233, 250, 255);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

div.features-grid img {
    width: 40px;
    margin-right: 20px;
}

div.features-grid p {
    font-size: 1.3rem;
}

section.three-steps {
    padding-left: 0;
    padding-right: 0;
}

/* ACCORDEON */

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    position: relative;
    background-color: transparent;
    color: var(--textcolor);
    cursor: pointer;

    width: 100%;
    text-align: left;

    transition: 0.4s;

    font-size: 1.4rem;
    margin-top: 1em;

    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    padding: 0.5em 1em 0.5em 1em;
}

.accordion.anleitung {
    background-color: var(--darker-orange);

    border-radius: 10px;
    color: white;
}

.accordion.anleitung div.expand-icon span {
    background-color: white;
}

.accordion.anleitung:hover,
.accordion.anleitung.active {
    background-color: var(--darkblue);
    color: white;
}

.accordion.anleitung:hover div.expand-icon span,
.accordion.anleitung.active div.expand-icon span {
    background-color: white;
}

.accordion img {
    width: 25px;
    margin-right: 0.7em;
}

.accordion div.expand-icon {
    position: relative;
    margin-left: auto;

    width: 24px;
    height: 24px;
    padding-left: 1em;
}

button.accordion.green-accent {
    background-color: #ceff7f;
    border-radius: 15px;
}

div.panel.green-accent {
    background-color: #f0ffd9;
    border-radius: 15px;
    margin-top: 0.2em;
}

div.expand-icon span {
    right: 0;
    position: absolute;
    height: 2px;
    width: 100%;
    background: var(--textcolor);

    top: 12px;
}

div.expand-icon span.vertical {
    transform: rotate(90deg);
    transition: transform 0.2s, opacity 0.2s;
}

button.active div.expand-icon span.vertical {
    transform: skewY(90);
    opacity: 0;
}

span.plus:nth-child(1) {
    transform: rotate(90deg);
}

span.plus:nth-child(0) {
    transform: translate(50%);
    margin-right: 10px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.accordion.active,
.accordion:hover {
    background-color: var(--very-light-grey);
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    padding: 0 1.35em;

    background-color: var(--very-light-grey);

    border-bottom-left-radius: var(--default-border-radius);
    border-bottom-right-radius: var(--default-border-radius);
}

.panel div.panel-content {
    padding-top: 0.5em;
    padding-bottom: 1.35em;
}

div.interesse-box {
    color: white;
    padding: 2em;
    border-radius: var(--default-border-radius);
    text-align: center;
}

div.interesse-box div.circle {
    margin: auto;
    margin-bottom: 1em;
    color: var(--darker-orange);
}

div.interesse-box div.grid {
    row-gap: 4em;
    column-gap: 4em;
}

div.extra-images-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: red;
}

div.extra-images-grid img {
    width: 100%;
}

div.reminder {
    max-width: 35em;
    margin: auto;
    margin-top: 2em;
}
div.reminder img {
    max-width: 40px;
    margin-right: 1em;
}

section.abschluss h2.subline {
    font-size: 1.2rem;
}

section.abschluss {
    margin-top: 4em;
}

div.buchauswahl div.button-grid button {
    background-color: transparent;
    border: 1px solid var(--textcolor);
}

div.buchauswahl div.grid-3fr-1fr {
    column-gap: 1em;
}

div.buchauswahl .flex {
    gap: 1em;
    flex-basis: 200px;

    flex-flow: row wrap;
    justify-content: space-between;
}

div.buchauswahl .flex div.book {
    flex-basis: 130px;
    position: relative;
}

div.book {
    cursor: pointer;
}

div.book img {
    box-shadow: 1px 1px 4px;
}

div.book div.circle {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    border: 1px solid var(--bg-off-white);
}
div.title-list {
    border-radius: var(--default-border-radius);
    padding: 1em;
    padding-left: 2em;
    padding-right: 2em;

    background-color: var(--very-light-grey);
}
div.title-list h3 {
    margin-top: 0;
}

div.buchtitel-overview {
    position: relative;
    overflow: visible; /* LK */
    max-height: 10000px;
    padding-bottom: 2em;
    transition: max-height 3s;
}

/* LK BEGIN */

div.editor-status-container {
    margin-bottom: 1em;
}

div.editor-status-container p.hint {
    text-align: center;
    opacity: 0.7;
    margin-top: 1em;
}

div.buchtitel-overview div.editor-status-container {
    position: sticky;
    top: 0px;
    z-index: 99999999;

    background-color: var(--bg-off-white);
    padding: 1em;
    border: 1px solid rgb(200, 200, 200);
    border-radius: var(--default-border-radius);
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}

div.buchtitel-overview .editor-status-container .grid-3columns button {
    background: white;
}
/* LK END */

div.audio-container {
    display: flex;
    align-items: center;
    margin-top: 0.5em;
}

div.book .control.play::before,
div.audio-container .control:before {
    margin-left: 0;
}

div.book div.audio-container .control {
    width: initial;
}

div.book div.audio-container .time {
    text-align: unset;
    margin-left: 0.5em;
}

div.buchtitel-overview.less {
    max-height: 900px;
    overflow-y: hidden;
}

button.mehr-anzeigen {
    display: block;
    margin: auto;
    margin-top: -3em;
    position: relative;
    z-index: 10;
}

div#production-status {
    padding: 0.5em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border-radius: var(--default-border-radius);
    margin-bottom: 0.5em;
    background-color: var(--blue);
    color: var(--font-off-white);

    width: fit-content;
}

.circle_portrait {
    max-width: 8em;
}

div.contact-prompt {
    gap: 2em;
    align-items: center;
    width: fit-content;
}

span.outline {
    border: 1px solid white;
    border-radius: 50px;
    padding: 0.3em 0.9em;
    margin-left: 0.2em;
    margin-right: 0.2em;
    display: inline-block;
    margin-top: 0.4em;
}

@media only screen and (max-width: 600px) {
    div.contact-prompt {
        flex-direction: column;
    }
}

div.contact-prompt h2,
div.contact-prompt p {
    max-width: 60ch;
}

div.pricing-tabelle {
    margin-top: 2em;
    margin-bottom: 2em;
    background-color: white;
    border-radius: var(--default-border-radius);
    padding: 1em;
}

div.pricing-tabelle-new{
margin-top: 2em;
    margin-bottom: 2em;
    background-color: var(--automat-color);
    border-radius: var(--default-border-radius);
    padding: 0em;
    color: white;
    overflow: hidden;
}

div.pricing-tabelle-new .price-details{
    padding: 2em;
}

div.pricing-tabelle-new .price-details p.price{
    font-size: 4rem;
    font-weight: 600;
    margin-bottom: 0.5em;
}

div.pricing-tabelle-new .price-details p.price span{
    font-size: 1.5rem;
    font-weight: 400;
}

div.pricing-tabelle div.grid {
    margin-top: 0;
    margin-bottom: 0;
}

div.pricing-tabelle div.grid > div {
    border: 1px solid var(---lighter-blue);
    padding: 1em;
    border-radius: var(--default-inner-border-radius);
}

div.pricing-tabelle div.grid div p.months {
    font-size: 1.75rem;
    font-weight: 400;
}

div.pricing-tabelle div.grid div p.price {
    margin-top: 0em;
    font-size: 2rem;
    font-weight: 600;
}

div.pricing-tabelle div.grid div p.price-monthly {
    margin-top: 0em;
}

div.buy-buchfindomat {
    margin-top: 0.5em;
    text-align: center;
    max-width: 30em;
    width: fit-content;
    border-radius: var(--default-inner-border-radius);
    height: 100%;
    padding: 0.25em 1em;

    background-color: var(---lighter-blue);
    color: white;
}

div.flex.buy-info {
    max-width: 45em;
    margin: auto;
    gap: 1em;
}

div.buy-buchfindomat p {
    font-size: 1.5rem;
}
/* 
div.details {
} */

div.months-icons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 0.2em;
    justify-items: start;
    align-items: start;
    opacity: 0.5;
}

div.months-icons.zwei-jahre {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

div.months-icons + p.months {
    margin-top: auto;
}

div.months-icons.no-grow img {
    flex: initial;
    width: 2.5em;
}

div.pricing-grid-element {
    display: grid;
    gap: 1em;
    grid-template-rows: 1fr 1fr;
}

div.included-features {
    margin-top: 0.25em;
    margin-bottom: 0em;
}

div.feature-container {
    display: flex;
    text-align: left;
    gap: 0.5em;
    border: none !important;
    align-items: flex-start;
    margin-bottom: 0.3em;
}
div.feature-container img {
    width: 1.5em;
}

div.features-included {
    gap: 1em;
}

/* ==================================================== BUCHVORSTELLUNG ==================================================== */

.checklist p {
    color: black;
    transition: color 0.2s ease-in-out;
}

.checklist ul {
    list-style: none;
    padding: 0;
}
.checklist ul li {
    padding: 10px 0;
    position: relative;
}
.checklist ul p {
    margin: 0;
    padding-left: 60px;
    position: relative;
}
.checklist ul p:before {
    background: transparent;
    content: '';
    border-radius: 100%;
    border: 1px solid #333;
    height: 20px;
    width: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 25px;
    margin: auto;
}
.checklist ul p:after {
    content: '';
    position: absolute;
    top: 7px;
    bottom: 0;
    left: 33px;
    margin: auto;
    border: 2px solid transparent;
    border-top: 0;
    border-right: 0;
    border-radius: 2px;
    height: 0;
    width: 0;
    transform-origin: bottom left;
    transform: rotate(-45deg);
    transition: all 0.3s;
    max-height: 0;
    max-width: 0;
    border-color: transparent;
}

.checklist ul input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    z-index: 100;
}

.checklist ul input:hover {
    cursor: pointer;
}

.checklist ul input:checked + p:before {
    background: var(--red);
    border-color: var(--red);
}
.checklist ul input:checked + p:after {
    animation: checkDown 0.1s ease-in-out, checkUp 0.15s 0.1s ease-in-out;
    height: 5px;
    width: 13px;
    max-height: 5px;
    max-width: 13px;
    border-color: white;
}

.checklist ul input:checked + p {
    color: var(--red);
    text-decoration: line-through;
}

@keyframes checkDown {
    from {
        border-left-color: white;
        height: 0;
        width: 0;
    }
    to {
        border-left-color: white;
        height: 8px;
        width: 0;
    }
}
@keyframes checkUp {
    from {
        border-bottom-color: transparent;
        width: 0;
    }
    to {
        border-bottom-color: white;
        width: 13px;
    }
}

/* ==================================================== BUCHFINDOMAT EDITOR ==================================================== */

/* LK BEGIN */

.buchfindomat-view .automat-status-wrapper {
    position: sticky;
    /* top: min(calc(100vh - 877px - 50px), 20px); */
    top: 50px;
}

.buchfindomat-view .automat-wrapper {
    position: relative;
    border-radius: var(--default-border-radius);
    overflow: hidden;
}

.buchfindomat-view .automat-wrapper .box {
    position: relative;
    pointer-events: none;
}

div.editor-status-details {
    position: relative;
    top: -3em;
    padding: 1em;
}

.buchfindomat-view .automat-wrapper .background {
    position: absolute;
    left: 43.1%;
    top: 52.6%;
    width: 42.9%;
    display: block;
}

.buchfindomat-view .automat-wrapper .book {
    position: absolute;
    width: 44%;
    height: 06.93359375%;
    background-color: black;
    left: 43.1%;
}

.buchfindomat-view .automat-wrapper .book.empty::before {
    content: 'Buch hier hinziehen';
    display: block;
    font-size: 0.7rem;
    color: white;
    box-sizing: border-box;
    padding-top: 10%;
    padding-right: 7px;
    text-align: center;

    transition: backgroundColor 1s;
}

.buchfindomat-view .automat-wrapper .book.empty {
    animation: bobbing-text 4s infinite;
}
.buchfindomat-view .automat-wrapper .book.empty:nth-child(2) {
    animation-delay: 0s; /* Delay the animation for the first element by 1s */
}

.buchfindomat-view .automat-wrapper .book.empty:nth-child(3) {
    animation-delay: 0.25s; /* Delay the animation for the first element by 1s */
}

.buchfindomat-view .automat-wrapper .book.empty:nth-child(4) {
    animation-delay: 0.5s; /* Delay the animation for the first element by 1s */
}

.buchfindomat-view .automat-wrapper .book.drop {
    background-color: blue !important;
}

.buchfindomat-view .automat-wrapper .book.one {
    top: 63.3%;
}

.buchfindomat-view .automat-wrapper .book.two {
    top: 73.9%;
}

.buchfindomat-view .automat-wrapper .book.three {
    top: 84.5%;
}

.buchfindomat-view .automat-wrapper .book img {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.buchfindomat-view .automat-wrapper .book.empty img {
    display: none;
}

div.detail-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
    margin-top: 0.2em;
}

div.detail-bar div {
    height: 2px;
    background-color: rgba(0, 0, 0, 0.1);
}

div.detail-bar div.active {
    height: 2px;
    background-color: var(--gruen);
}

/* LK END */

button.editor-download {
    background-color: var(--orange);
    width: 100%;
    margin-top: 1em;

    transition: all 0.2s;
}

button.editor-download:hover {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}

button.editor-download.inactive {
    background-color: var(--light-grey);
    color: black;
    opacity: 0.5;
    display: none;
}

button.editor-download.refresh {
    background-color: rgb(0, 105, 121);
}

p.download-hint {
    margin-top: 0.75em;
    text-align: center;
}

div.status {
    padding: 0.5em;
    border-radius: var(--default-inner-border-radius);
}

div.status button {
    width: 100%;
}

div.status div.flex {
    margin-top: 0.4em;
    opacity: 0.5;
    transition: all 200ms;

    justify-content: center;
}

div.status div.flex.selected {
    opacity: 1;
}

div.status div.flex.finished {
    opacity: 1 !important;
}

div.status-indicator {
    background-color: rgb(213, 213, 213);
    width: 23px;
    height: 23px;
    border-radius: 50%;
    position: relative;
}

div.status-indicator.invalid::after {
    content: '...';
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div.status-indicator.valid {
    background-color: var(--gruen);
}

div.status-indicator.valid::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 40%;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    transform: rotate(45deg);
    height: 10px;
    width: 6px;
}

ol.steps {
    margin-left: 0;
    padding-left: 0;
}

ol.steps div {
    padding: 0.4em;
    padding-left: 1.5em;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: white;
    border-radius: 5px;
    margin-top: 0.5em;
}

ol.steps div:nth-of-type(2) {
    margin-left: 1.5em;
}

ol.steps div:nth-of-type(3) {
    margin-left: 3em;
}

ol.steps div:nth-of-type(4) {
    margin-left: 4.5em;
}
ol.steps div:nth-of-type(5) {
    margin-left: 6em;
}

/* div.status-indicator.invalid {
  background-color: var(--darker-red);
}

div.status-indicator.invalid::before,
div.status-indicator.invalid::after {
  content: "";
  position: absolute;
  width: 2px; 
  height: 70%;
  background-color: white; 
  top: 15%;
  left: 50%;

  transform: translateX(-50%) rotate(45deg);
}

div.status-indicator.invalid::after {
  transform: translateX(-50%) rotate(-45deg);
} */

@keyframes pulsating {
    0% {
        transform: scale(0.98);
        box-shadow: 0 0 0 0 rgba(26, 47, 86, 0.7);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 5px 5px rgba(26, 47, 86, 0);
    }

    100% {
        transform: scale(0.98);
        box-shadow: 0 0 0 0 rgba(26, 47, 86, 0);
    }
}

@keyframes bobbing-text {
    0% {
        transform: scale(1);
        background-color: rgb(0, 0, 0);
    }

    50% {
        transform: scale(1.03);
        background-color: rgb(0, 132, 165);
    }

    100% {
        transform: scale(1);
        background-color: rgb(0, 0, 0);
    }
}

div.automat-nav {
    position: sticky;
    top: 0;
    background-color: var(--bg-off-white);
    box-shadow: 0px 15px 10px -15px rgba(17, 17, 17, 0.254);
    z-index: 999;

    display: flex;
    gap: 1em;
    justify-content: space-around;
    align-items: center;
    padding: 0.25em;
    flex-wrap: wrap;
    background-color: var(--automat-color);
}

div.automat-nav a{
    background-color: rgba(255,255,255,0.1);
    border-radius: 5px;
    padding: 0.5em 1.5em;

    transition: background-color 200ms, color 200ms;

    display: flex;
    gap: 5px;
    justify-items: center;
}

div.automat-nav a svg{
    width: 25px;
    transition: fill 200ms;
}


div.automat-nav a:hover {
    cursor: pointer;
}

@media only screen and (max-width: 900px) {
    div.automat-nav {
        display: none;
    }
}

div.automat-nav a {
    font-style: none;
    text-decoration: none;
    font-size: 1rem;
    color: white;
}
div.automat-nav a.button {
    margin-left: auto;
    background-color: var(--darker-orange);
    border-radius: 5px;
    padding: 0.5em 1.5em;
    color: white;
    transition: all 150ms;
}

div.automat-nav a.button:hover {
    background-color: var(--orange);
    color: white;
}

div.automat-nav a:hover {
    color: var(--darker-orange);
    background-color: rgba(255,255,255,1);
}

div.automat-nav a:hover svg{
    fill: var(--darker-orange);
}

.smooth-scroll {
    scroll-behavior: smooth;
    scroll-margin-top: 4rem;
}

a.center {
    display: block;
    width: fit-content;
    margin: auto;
}

p#krumulus-hint {
    color: var(--bg-off-white);
    display: none;
}

p#krumulus-hint a {
    font-size: 1.9rem;
    font-weight: 500;
}

div.contact-element {
    padding: 1em;

    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: var(--default-border-radius);
}

div.contact-element h2 {
    font-weight: 500;
    font-size: 1.3rem;
}

div.contact-element div.flex {
    gap: 1em;
    flex-wrap: wrap-reverse;
}

div.contact-element div.flex img {
    max-width: 10em;
}

div.contact-element div.flex a {
    font-size: 1rem;
}

div#contact-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 450px), 1fr));
}

p.editor-booktitle{
    font-size: 0.8rem;
    margin-top: 12px;
    text-transform: uppercase;
}

span.neu_hinzugefuegt_hint{
        position: absolute;
    background-color: red;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 0.75rem;
    color: white;
    font-weight: 700;
    top: -10px;
    right: -10px;
    border: 1px solid white;
}

button.editor-button{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 2rem;
    font-weight: 500;
}

button.editor-button svg{
    width: 25px;
}

button.editor-button:hover{
    background-color: var(--blue);
}

div.buy-options{
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 800px) {
    div.buy-options{
        flex-direction: column !important;
    }
}

div.buy-options div.pricing-details{

    max-width: 25em;
    border-radius: 15px;
    padding: 1em;

    display: flex;
    flex-direction: column;
        background-color: var(--darker-orange);

        color: white;

    transition: background-color 200ms, box-shadow 200ms, transform 200ms;
}

div.buy-options div.pricing-details.secondary-detail{
    max-width: 17em;
    background-color: white;
    color: var(--textcolor-light);
    border: 1px solid var(--textcolor-light);
}

div.buy-options div.pricing-details:hover{
    cursor: pointer;
    box-shadow: 0px 0 20px 5px rgba(0,0,0,0.25);
    transform: translateY(-10px);
}

div.pricing-details div.pricing-option{
    display: flex;
    gap: 5px;
    text-align: left;
    align-items: center;
    margin-bottom: 10px;


   
}

div.pricing-details div.pricing-option img{
    width: 30px;
    height: 30px;
}

div.buy-options div.pricing-details.secondary-detail img{
width: 20px;
    height: 20px;
}

div.pricing-details div.pricing-option h2{
    margin: 0;
    color: white;
}

div.buy-options div.pricing-details.secondary-detail  h2{
    color: var(--textcolor-light);
    font-size: 1.3rem;
}

div.buy-options div.pricing-details.secondary-detail  p{
    font-size: 1rem;
}

div.price-wrapper{
    margin-top: auto;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 10px;
    justify-content: end;
padding-top: 20px;
}

div.price-wrapper p.price{
    font-size: 2rem;
    font-weight: 800;
}

div.price-wrapper p.price.bigger{
    font-size: 2.5rem;
}

div.pricing-details p.pricing-option-subtitle{
    font-weight: 600;
    font-size: 1.5rem;
    opacity: 0.5;
    margin-bottom: 0px;
}