@charset "UTF-8";
/* Copyright 2024, Christian Hecker */

:root,
[data-theme=light] {
/* Text color */    --body-color: #212529; --text-color: #212529; --secondary-color: #212529bf; --tertiary-color: #21252980; --bright-color:#fff; --modal-color:#b7c1c9;
/* Bg color */      --body-bg: #fff; --secondary-bg: #f0f1f2; --tertiary-bg: #f8f9fa; --color-bg: #f7f9fb ; --modal-bg: #fff; --sort-bg: #a1d1df;
/* Nav */           --nav-bg: #ffffffe4; --nav-hover: #edf0f0; --nav-activ: #f5f6f7;
/* Buttons */       --button-color: #fff; --button-bg:#00779d; --button-hover:#026383; --del-button-bg: #edf0f0;
/* Border */        --border-color: #b7c1c9; --dashed-border: #90999f; --box-shadow: #00000030; --modal-shadow: #00000030; --modal-border: #b7c1c9;
/* Links */         --link-color: #145bc7; --link-hover-color: #4483d7; --more-hover: #0da9d8; --blue: #0da9d8; --filter-bar: #d2effe;
/* Checkbox */      --disabled: #e3e7e8;
/* Location */      --g-0-bg: rgb(203, 212, 221, 0); --g-1-bg: rgb(203, 212, 221,0.2);
/* Cards */         --card-bg:#fff; --card-on-top-color:#fff; --card-on-top-bg:#3f4246;
}
[data-theme=dark] {
color-scheme: dark;
/* Text color */    --body-color: #e5ecf2; --text-color: #cfd4dc; --secondary-color: rgba(173, 181, 189, 0.9); --tertiary-color: rgba(173, 181, 189, 0.7); --bright-color:#c6ccd2; --modal-color:#c6ccd2;
/* Bg color */      --body-bg: #25292d; --secondary-bg: #343a40; --tertiary-bg: #2b3035; --color-bg: #25292d; --modal-bg: #424951; --sort-bg: #1C6D86;
/* Nav */           --nav-bg: #25292de4; --nav-hover: #343a40; --nav-activ: #30353b;
/* Buttons */       --button-color: #212529; --button-bg: #2fb6e0; --button-hover: #31cfff; --del-button-bg: #343a40;
/* Border */        --border-color: #616a74; --dashed-border: #747f8b; --box-shadow: #00000050; --modal-shadow: #00000040; --modal-border: #c6ccd27d;
/* Links */         --link-color: #3ea6ff; --link-hover-color: #72beff; --more-hover: #0da9d8; --filter-bar: #003c5b;
/* Checkbox */      --disabled: #6c757d;
/* Location */      --g-0-bg: rgba(43, 48, 53, 0); --g-1-bg: rgba(43, 48, 53, 0.4);
/* Cards */         --card-bg: #424951; --card-on-top-color: #e5ecf2; --card-on-top-bg: #424951;
}

/* Lock-page
========================================================================== */
#lock-page { display: none; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 10000 }

/* HTML & body
========================================================================== */
html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 1.15; font-size: 10px; box-sizing: border-box }
html, body { min-width:300px; overscroll-behavior: none }
body { margin: 0; padding: 0; font-weight: 400; line-height: 1.6; color: var(--body-color); background-color: var(--body-bg); font-size: 1.4em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; caret-color: var(--body-color) }
*,*:before,*:after { box-sizing: inherit }

/* Cursors on body and all elements */
body.waiting * { cursor: progress }

/* Select
========================================================================== */
* { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
input, textarea { -webkit-user-select:text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text }
.select-ok * { -webkit-user-select:text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text }

/* disable-dbl-tap-zoom
========================================================================== */
/* +click eventlistener on misc elements */
* { touch-action: manipulation }

/* Draggable
========================================================================== */
* { -webkit-user-drag: none }

/* Stop scrolling
================================================================================== */
.stop-scrolling { height: 100%; overflow: hidden }

/* Display
========================================================================== */
.hide { display: none }

/* Media query
========================================================================== */
@media (max-width: 992.98px) { .hide-small {display: none}  .show-small {display: block} }
@media (min-width: 993px) { .hide-large {display: none}  .show-large {display: block} }

/* Spacing
========================================================================== */
.m-t-20 { margin-top: 20px }
.m-t-25 { margin-top: 25px }
.m-t-30 { margin-top: 30px }
.m-t-40 { margin-top: 40px }
.m-b-15 { margin-bottom: 15px }
.m-b-10 { margin-bottom: 10px }
.m-b-20 { margin-bottom: 20px }
.m-b-30 { margin-bottom: 30px }
.f-16 { font-size: 16px }
.h-10px { height: 10px }

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

/* Input & textarea
========================================================================== */
/* Small password circles */
input[type="password"] { font:small-caption }
/* Input */
input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],
input[type="url"],input[type="password"],input[type="color"],textarea {
    font-size: 16px; font-family: inherit; background-color: var(--body-bg); height: 38px; width: 100%; padding: 6px 10px; margin: 0; line-height: 1.15;
    border: 1px solid var(--tertiary-color); border-radius: 4px; box-shadow: none; color: var(--body-color);
    /* Removes awkward default styles on some inputs for iOS */
    -webkit-appearance: none; -moz-appearance: none; appearance: none
}
/* Textarea */
textarea { margin: 0; line-height: 1.15; min-height: 70px }

/* Color */
input[type="color"] { cursor: pointer }
/* Checkbox & radio */
input[type="checkbox"],input[type="radio"] { display: inline; padding: 0; cursor:pointer }
/* Remove Safari autofill yellow background color */
input:-webkit-autofill, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--body-bg) inset; box-shadow: 0 0 0 1000px var(--body-bg) inset; -webkit-text-fill-color: var(--body-color) }
/* Remove Firefox autofill yellow background color */
input { filter: none }
/* Prevent from being highlighted upon touch event*/
* { -webkit-tap-highlight-color: rgba(0,0,0,0) }

/* On focus */
input[type="color"]:focus,input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,
input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,textarea:focus { outline: none !important }
/* On focus mobil */
@media (max-width: 700px) {
    input[type="color"]:focus,input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,
    input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,textarea:focus { border: 1px solid var(--blue) }
}

/* Typography
========================================================================== */
h1,h2,h3 { margin-top: 0; margin-bottom: 2rem; font-weight: 300 }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem }
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem }
/* Larger than phablet */
@media (min-width: 550px) { h1 { font-size: 5.0rem } h2 { font-size: 4.2rem } h3 { font-size: 3.6rem } }
/* Paragraph */
p { margin-bottom: 2.5rem }
/* Small */
.mini { font-size:1.1rem }
.bold { font-weight: bold }

/* Links
========================================================================== */
a { color: var(--body-color); background-color: transparent; outline: none; text-decoration: underline }
a:active,a:hover { outline: 0 }
a:hover { color: var(--secondary-color) }
/* As a class */
.a { color: var(--link-color); text-decoration: none; cursor: pointer }
.a:hover { color: var(--link-color);text-decoration: underline; text-underline-offset: 3px }
.go { color: var(--body-color); text-decoration: none; cursor: pointer }
.go:hover { color: var(--link-hover-color); text-decoration: underline; text-underline-offset: 3px }
/* Activ top */
@media (min-width: 993px) {
    .activ { position: relative; background-color: var(--nav-activ) }
    .activ::after { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 4px; background-color: var(--blue) }
}

/* Tables
========================================================================== */
table { border-collapse: collapse; border-spacing: 0 }
td { vertical-align: top }

/* Images
========================================================================== */
img { border: 0px; border-style: none; margin: 0; padding: 0; image-orientation: from-image }

/* Buttons
========================================================================== */
button,.button {
    position: relative; display: inline-block; height: 38px; padding: 0 30px; margin: 0; color:  var(--body-color); background-color: transparent;
    text-align: center; font-size: 11px; font-weight: 600; line-height: 38px; letter-spacing: .1rem; text-transform: uppercase; text-decoration: none; white-space: nowrap;
    border: 1px solid var(--border-color); border-radius: 4px; cursor: pointer; z-index: 2;
}
.modal button,.modal .button { border-color: var(--tertiary-color) }
button:hover,.button:hover { color:var(--body-color); border-color:var(--body-color); outline: 0 }
.sort-bg, .sort-bg:hover { background-color:var(--sort-bg)!important }

/* Modal
========================================================================== */
.modal { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; padding: 39px 10px 30px 15px; background-color: rgba(0,0,0,0.4); z-index: 100; overflow: auto; overscroll-behavior: contain }
.modal-body { padding: 24px; box-shadow: 3px 3px 15px var(--modal-shadow) }
.modal-body .hr { background-color: var(--tertiary-color) }
.modal-content { position: relative; width: 95%; max-width: 400px; margin: auto; padding: 0; border-radius: 4px; background-color: var(--modal-bg) }
/* The Close Button */
.modal-close { position: absolute; top:-20px;right:0px; width: 40px; height: 40px; padding: 15px; background-color: var(--modal-bg); border-radius: 50%; cursor: pointer }
.modal-close .x { position: absolute; left:10px; top:9px; width:20px; height:20px; fill:none; stroke: var(--body-color); stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px }
.modal-close:hover .x { stroke: var(--blue) }
@media (hover:none){ .modal-close:hover .x { stroke: var(--body-color)} }

/* Custom checkbox
========================================================================== */
/* The checkbox */
.check { position: relative; display: inline; padding-left: 22px; cursor: pointer }
/* Hide default checkbox */
.check input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0 }
/* Create a custom checkbox */
.checkmark { position: absolute; top: 0; left: 0; height: 16px; width: 16px; background-color: var(--modal-bg); border: 1px solid var(--tertiary-color); border-radius: 4px; cursor: pointer }
/* On hover not checked */
.check:hover input~.checkmark { border: 1px solid var(--body-color) }
@media (hover:none){ .check:hover input~.checkmark {  border: 1px solid var(--secondary-color) } }
/* On hover checked */
.check:hover input:checked~.checkmark { opacity: 0.8 }
@media (hover:none){ .check:hover input:checked~.checkmark { background-color: var(--blue)} }
/* If checked */
.check input:checked~.checkmark { background-color: var(--blue); border: 0px }
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after { content: ""; position: absolute; display: none }
/* Show the checkmark when checked */
.check input:checked~.checkmark:after { display: block }
/* Style the checkmark/indicator */
.check .checkmark:after { left: 6px; top: 2px; width: 4px; height: 10px; border: solid var(--modal-bg); border-width: 0px 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg) }
/* If disabled */
.check input:disabled~.checkmark { background-color: var(--disabled); border: 0px; cursor: not-allowed }
label:has(input:disabled) { cursor: not-allowed }
.check:hover input:disabled~.checkmark { background-color: var(--disabled);  opacity: 1 }

/* Custom radio
========================================================================== */
/* Customize the label (the container) */
.radio { position: relative; display: inline-block; color: var(--body-color); cursor: pointer; padding-left: 22px }
/* Hide the browser's default radio button */
.radio input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0 }
/* Create a custom radio button */
.radiomark { position: absolute; top: 4px; left: 0; height: 16px; width: 16px; border-radius: 50%; background-color: var(--modal-bg); border: 1px solid var(--secondary-color) }
@media (min-width:701px) { .radiomark { border: 1px solid var(--secondary-color) } }
/* On mouse-over, add a grey background color */
.radio:hover input ~ .radiomark { border: 1px solid var(--body-color) }
/* When the radio button is checked, add a blue background */
.radio input:checked ~ .radiomark { background-color: var(--blue); border: 0px }
/* Create the indicator (the dot/circle - hidden when not checked) */
.radiomark:after { content: ""; position: absolute; display: none }
/* Show the indicator (dot/circle) when checked */
.radio input:checked ~ .radiomark:after { display: block }
/* Style the indicator (dot/circle) */
.radio .radiomark:after { top: 5px; left: 5px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--body-bg)}

/* Selection
========================================================================== */
.select-css {
    /* https://www.filamentgroup.com/lab/select-css.html */
    -moz-appearance: none; -webkit-appearance: none;
    appearance: none; display: block; width: 100%; margin: 0; padding: .5em 1.8em .5em .7em; line-height: 1.3;
    cursor: pointer; font-size: 16px; color: var(--body-color); border: 1px solid var(--tertiary-color); border-radius: 4px;
    background-color: var(--modal-bg); background-repeat: no-repeat; background-position: right .6em top 50%, 0 0; background-size: 8px 8px
}
#filter-form .select-css:hover { border: 1px solid var(--body-color) }
.select-css:focus { outline: none }
@media (max-width: 700px) { .select-css:focus { border-color: var(--blue) } }
.select-css::-ms-expand { display: none }
.select-css option { font-weight: normal }
.select-css:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000 }
/* Label */
.selection-min label,.selection-max label { margin-bottom: .1rem ; margin-left: .2rem; color: var(--body-color); font-size: 1.4rem; line-height: 1; width: 100%; overflow: hidden; white-space: nowrap }

/* Dot Flashing
========================================================================== */
.dot-flashing { position: relative; left: -5px; width: 10px; height: 10px; border-radius: 5px; background-color:var(--tertiary-color); color: var(--tertiary-color); animation: dot-flashing 1s infinite linear alternate; animation-delay: .5s }
.dot-flashing::before, .dot-flashing::after { content: ''; display: inline-block; position: absolute; top: 0 }
.dot-flashing::before { left: -15px; width: 10px; height: 10px; border-radius: 5px; background-color:var(--tertiary-color); color: var(--tertiary-color); animation: dot-flashing 1s infinite alternate; animation-delay: 0s }
.dot-flashing::after { left: 15px; width: 10px; height: 10px; border-radius: 5px; background-color: var(--tertiary-color); color:var(--tertiary-color); animation: dot-flashing 1s infinite alternate; animation-delay: 1s }
@keyframes dot-flashing { 0% { background-color:var(--tertiary-color) } 50%,100% { background-color: var(--g-3) } }

/* Circle loader
========================================================================== */
/* Default on Checkbox */
.circle-loader { position: relative }
.circle-loader::after { content:''; position: absolute; top:0px; left: -2px; width: 20px; height: 20px; background-color: var(--modal-bg); border-style: solid; border-radius: 50%; animation: spin 2s linear infinite; border-color: var(--blue); border-top-color:transparent; border-width: 2px; z-index: 1 }
.icon-bracket-left.circle-loader::after { left: 14px }
@keyframes spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } }
/* Loader for selection */
.selection-min.circle-loader::after,.selection-max.circle-loader::after { left: unset; right: 5px; top: 31px }

/* Top links
========================================================================== */
body { padding-top: 62px }
#nav { position: fixed; top: 0px; left:0px; right: 0px; height: 63px; background-color: var(--nav-bg); border-bottom: 1px solid var(--border-color); z-index: 30 }
#nav a { text-decoration: none }
#logo-container { display: inline-flex }
#logo-container:hover { opacity: 0.8 }
#logo { height: 62px }
#logo img { width:auto; height:100% }
#home { padding: 7px 17px 7px 17px; color:var(--body-color); line-height: 1.4 }
.both #home { padding-left: 0px }
#home div:first-child { font-size: 20px }
#home div:last-child { font-size: 13px; font-style: italic }
/* Favorite */
.fav-message div { margin-bottom: 5px } .fav-message div:first-child  { margin-bottom: 10px }
/* Language */
#language-links { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 40px; font-size: 15px }
.lg-selected { opacity: 0.4 }
#modal-language .icon-language { height: 24px; background-position: left 0px top 50%; padding-left: 34px }

/* Max */
@media (max-width:992.98px) {
    #nav { position: absolute }
    #menu-btn { position: absolute; top: 0px; right: 0px; width: 60px; height: 62px; background-position: 50% 50%; background-size: 24px 24px }
    #menu-close { height: 60px }
    #links { position: absolute; top: 0px; left: 0px; right: 0px; background-color: var(--secondary-bg); z-index: 30; cursor: pointer }
    #links > div { border-bottom: 1px solid var(--border-color) }
    #links .btn { display: block; padding: 16px 15px 16px 15px; font-size: 16px; width: 100% }
    #favorite.icon-heart-menu { background-position: right 15px top 50%; background-size: 22px 18px }
    #links a { color:var(--body-color); background-size: 10px 10px }
    #links .arrow-right { background-position: right 20px top 50%; background-size: 10px 10px }
    .icon-dark,.icon-light,.icon-language { padding: 16px 15px 16px 15px; font-size: 16px; background-position: top 50% right 14px }
    .split { display: none }
    #overlay { display: none; position:fixed; z-index:20; width:100%; height:150%; top:0; bottom:0; left:0; right:0; background-color: rgba(0,0,0,0.7) }
}
/* Min */
@media (min-width:993px) {
    #links { position: absolute; display: flex; top: 0px; right: 0px; height: 62px; z-index: 2; cursor: pointer }
    #links > div:hover:not(.split) { background-color: var(--nav-hover) }
    #links .btn { display: block; padding: 21px 8px 18px 8px; font-size: 14px }
    #links a { color:var(--body-color) }
    #favorite.icon-heart-menu, #links .arrow-right { background-image: none }
    #lg-btn { width: 56px; height: 62px }
    .icon-dark, .icon-light { width: 60px; background-position: 50% 50% }
    .icon-language { background-position: 44% 50% }
    .split { position: absolute; top: 14px; right: 59px; width: 1px; height: 35px; border-left: 1px solid var(--border-color) }
}

/* Contact
========================================================================== */
.icon-m,.icon-p,.icon-w { padding: 5px 7px 5px 30px }
.icon-m .a,.icon-p .a,.icon-w .a { padding-top: 6px; padding-bottom: 6px }
.absence { margin-top: 20px; padding: 20px; border-left: 10px solid #dc1818; background-color: var(--secondary-bg) }

/* Footer
========================================================================== */
#footer-container { position: relative }
#footer { display: grid; grid-template-columns: 1fr 1fr; padding: 50px 24px 80px 24px; grid-row-gap: 30px; justify-content:flex-start; background-color: var(--body-bg) }
@media (min-width: 700px) { #footer { display: flex; flex-wrap: nowrap; justify-content: space-evenly; justify-items: center; align-items: flex-start; padding: 80px 24px 80px 24px; column-gap:15px } }
/* ellipsis */
#footer > div { overflow: hidden }
#footer > div > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 2px; padding-bottom: 2px }
/* links */
#footer a { color: var(--body-color); text-decoration: none; cursor: pointer }
#footer a:hover { color: var(--link-hover-color); text-decoration: underline; text-underline-offset: 3px }
/* mini */
#mini-footer { position: absolute; bottom: 0px; left: 0px; right: 0px; height: 18px; display: flex; justify-content: space-between; background-color:var(--body-bg); color:var(--body-color); z-index: 10; line-height: 0; opacity: 0.8 }
#mini-footer div { padding: 8px 10px 0px 10px; font-size: 11px; white-space: nowrap }
#mini-footer div:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
#mini-footer a { color:var(--body-color); text-decoration: none }
#mini-footer a:hover { color:var(--secondary-color) }

/* To top
========================================================================== */
#to-top-btn { position: fixed; bottom: 22px; right: 20px; z-index: 15; width: 40px; height: 40px; background-color:#b35614; border-radius: 50%; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23eee' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5a2.3 2.3 0 0 1 1.729.78l9.811 11.15a1.847 1.847 0 1 1-2.773 2.439l-8.579-9.75a.25.25 0 0 0-.376 0l-8.579 9.752A1.847 1.847 0 1 1 .46 16.432l9.808-11.148A2.31 2.31 0 0 1 12 4.5Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 50% 50%; background-size: 14px 14px; box-shadow: 2px 2px 6px #00000059 }
#to-top-btn:hover { background-color: #cb6116 }

/* Animated Ellipsis // <span class="animated-ellipsis"></span>
========================================================================== */
.animated-ellipsis { display: inline-block; overflow: hidden;vertical-align: bottom; margin-left: 2px }
.animated-ellipsis::after { display: inline-block; content: '...'; animation: AnimatedEllipsis-keyframes 1.2s steps(4, end) infinite }
@keyframes AnimatedEllipsis-keyframes { 0% { transform: translateX(-100%) } }