@font-face {
font-family: 'bitter-regular';
src: url('../data/fonts/Bitter-Regular.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'cabin-regular';
src: url('../data/fonts/Cabin-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'cardo-regular';
src: url('../data/fonts/Cardo-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'alegreyasc-regular';
src: url('../data/fonts/AlegreyaSC-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'daysone-regular';
src: url('../data/fonts/DaysOne-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'dosis-medium';
src: url('../data/fonts/Dosis-Medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ibmplexsans-regular';
src: url('../data/fonts/IBMPlexSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'overload-burn';
src: url('../data/fonts/Overload-Burn.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'overload';
src: url('../data/fonts/Overload.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'blogger';
src: url('../data/fonts/Blogger.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'dream-orphanage';
src: url('../data/fonts/Dream-Orphanage.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'junegull';
src: url('../data/fonts/JuneGull.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'kite-one';
src: url('../data/fonts/Kite-One.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'lilly';
src: url('../data/fonts/Lilly.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'rimouski';
src: url('../data/fonts/Rimouski.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
:root {
--fsize-small:0.75rem;
--fsize-normal:1rem;
--fsize-medium:1.25rem;
--fsize-big:1.75rem;
--fsize-super:2.5rem;
--font-title:alegreyasc-regular;
--font-text:cardo-regular;
--weiss:#f8f6f2;
--schwarz:#000000;
--color10:#4a6b53;
--color11:#e09f67;
--color12:#2b2d2f;
--color13:;
--color14:#3366ff;
--blau1:#f8f6f2;
--blau2:#f8f6f2;
--blau3:#2b2d2f;
--blau4:#f8f6f2;
--grau1:#dddddd;
--grau2:#999999;
--grau3:#666666;
--grau4:#333333;
--gelb1:#ffff99;
--gelb2:#ffff00;
--gelb3:#999900;
--color1:#e09f67;
--color2:#eeaa11;
--color3:#aabbcc;
--color4:#e84100;
--color5:#bbaa88;
--rot1:#ff3300;
--rot4:#cc2222;
--fehler:var(--color4);
--ausgebucht:var(--rot1);
--color-main:var(--color10);
--color-title:var(--color11);
--color-text:var(--color12);
--color-links:var(--color14);
--color-borders:var(--color10);
--color-filter:var(--grau1);
--color-filter-text:var(--grau3);
--color-filter-border:var(--grau3);
--color-course-text:var(--weiss);
--color-buttons:var(--color11);
--color-text-background:var(--grau3);}
.page_text {
    width:50%;
    display: inline-block;
    font-family: var(--font-text);
    font-size:var(--fsize-medium);
    color:var(--color-text);
    text-align: justify;
}

.page_image {
    float:left;
    max-width:250px;
    max-height: 250px;
    margin-right: 10px;
    margin-bottom: 300px;
    border-radius: 10px;
    border: 2px solid var(--color-borders);
}

.article_box {
    opacity: 1;
    cursor: pointer;
    display: inline-block;
    border-radius: 10px;
    border: 2px solid var(--weiss);
    width: 320px;
    height: 180px;
    color: var(--weiss);
    /* background-color:var(--mittelblau); */
    padding: 10px;
    vertical-align: top;
}

.article_box_img {
    opacity: 1;
    cursor: pointer;
    display: inline-block;
    border-radius: 10px;
    border: 2px solid var(--color-borders);
    width: 320px;
    height: 180px;
    /* height: 175px; */
    /* color: var(--weiss); */
    background-size: cover;
    background-position: center;
    padding: 10px;
    vertical-align: middle;
}

.booking_form_table {
    padding: 3px;
}

.booking_button {
    cursor: pointer;
    font-family:var(--font-text);
    font-size:var(--fsize-big);
    border-radius: 10px;
    border: 5px solid var(--color-borders);
    background-color: var(--color-buttons);
    color: var(--weiss);
    padding: 15px;
}

.map_box {
    width: 75%;
    height: 600px;
    border: 2px solid var(--color-borders);
    border-radius: 10px;
}

.dsgvo_link {
    white-space: nowrap;
    /*
    position: absolute;
    bottom: 10;
    left: 50%;
    transform: translateX(-50%);
    */
}

.slide-in-left {
  animation: slideInLeft 1s ease-out forwards;
}

@keyframes slideInLeft {
  from {
    transform: translateX(555px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-right {
  animation: slideInRight 1s ease-out forwards;
}

@keyframes slideInRight {
  from {
    transform: translateX(-555px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}a {
	//color:var(--color-text);
	text-decoration: none;
}

a:visited {
	//color:var(--color-text);
	text-decoration: none;
}

body {
    font-family:var(--font-text);
    font-size:var(--fsize-normal);
    text-align: center;
    margin: 10px;
    background-color: var(--weiss);
}

h1 {
    font-weight: normal;
    margin-top: 0px;
}

hr {
    border: 0;
    height: 1px;
    background-color: var(--color-borders);
}

.main_title {
    cursor: pointer;
    font-family: var(--font-title);
    font-size:var(--fsize-super);
    color:var(--color-main);
}

.page_title {
    font-family: var(--font-title);
    font-size:var(--fsize-big);
    color:var(--color-title);
}

.page_footer {
    color: var(--color-text);
    font-family:var(--font-text);
    font-size:var(--fsize-small);
    text-align: center;
}

.article_title_box {
    background-color: var(--color-text-background);
    border-radius: 10px;
    opacity: 0.75;
    width: 100%;
}

.article_title {
    display: inline-block;
    color: var(--weiss);
    font-family: var(--font-title);
    font-size:var(--fsize-big);
    text-align: center;
    opacity: 1;
    margin: 0px;
}

.article_teaser {
    color: var(--weiss);
	font-family: var(--font-text);
    font-size:var(--fsize-normal);
    text-align: center;
}

.article_space {
    display: inline-block;
    opacity: 0;
    width: 25px;
    height: 25px;
}

.booking_form {
    display: inline-block;
    padding: 5px;
    font-family: var(--font-text);
    font-size: var(--fsize-normal);
    color: var(--color-text);
    border-radius: 10px;
    border: 2px solid var(--color-borders);
    text-align: left;
}

.booking_filter {
    cursor: pointer;
    display: inline-block;
    font-family: var(--font-text);
    font-size: var(--fsize-normal);
    height: 25px;
    margin: 5px;
    padding: 5px;
    padding-left:10px;
    padding-right:10px;
    border-radius: 25px;
    background-color: var(--color-filter);
    color: var(--color-filter-text);
}

.filter_selected {
    border: 2px solid var(--color-filter-border);
}

.booking_form_input {
    margin: 3px;
    font-family: var(--font-text);
    font-size: var(--fsize-normal);
    border-radius: 5px;
    border: 1px solid var(--color-borders);
    color: var(--color-inputs);
}

.course_box {
    cursor: pointer;
    display: inline-block;
    border-radius: 10px;
    width: 325px;
    color: var(--color-course-text);
    background-color:var(--color-buttons);
    padding: 3px;
    vertical-align: middle;
    text-align: center;
}

.course_text {
	font-family: var(--font-text);
    font-size:var(--fsize-normal);
    text-align: center;
}

.booking_error {
    font-family: var(--font-text);
    font-size: var(--fsize-normal);
    color: var(--fehler);
}

.booking_success {
    font-family: var(--font-text);
    font-size: var(--fsize-normal);
}

.selected_course {
    border: 5px solid var(--color-borders);
}

.icon {
    max-width: 25px;
    max-height: 25px;
}

.dokument_link {
    color: var(--color-links);
    font-family: var(--font-text);
    font-size: var(--fsize-normal);
    text-align: center;
    text-decoration: none;
}

.dsgvo {
    color: var(--color-text);
    font-family: var(--font-text);
    font-size: var(--fsize-normal);
    text-align: justify;
}

.dsgvo_link {
    color: var(--color-links);
    font-family: var(--font-text);
    font-size: var(--fsize-small);
    text-align: center;
    text-decoration: none;
}

.dsgvo_link:visited {
    color: var(--color-links);
}

.color1 {background-color:var(--color1);}
.color2 {background-color:var(--color2);}
.color3 {background-color:var(--color3);}
.color4 {background-color:var(--color4);}
.color5 {background-color:var(--color5);}
/* .kurs_ausgebucht {background-color:var(--ausgebucht);} */
.kurs_ausgebucht {opacity:0.7; cursor: not-allowed;}
.kurs_ausgebucht_text {color: var(--fehler); font-weight: bold;}