@font-face {
    font-family: 'Merriweather';
    src: url('../fonts/Merriweather24pt-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Merriweather';
    src: url('../fonts/Merriweather24pt-Bold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
/* @font-face {
    font-family: 'Merriweather';
    src: url('../fonts/Merriweather24pt-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
} */
@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
:root {
	--ratio:1;
	--ratio-section:1;
	--color-primary:#912b16;
	--header-height:6.25rem;
	--bs-body-color:#000000;
	  
	--font-size-h1: clamp(5rem, 7vw, 7rem);
	--font-size-h2: clamp(1.6rem, 4vw, 3rem);
	--font-size-h3: clamp(1.3rem, 3vw, 2rem);
	--font-size-h4: clamp(1.3rem, 3vw, 2rem);
	--font-size-body: clamp(1rem, 2vw, 1.5rem);
    --font-size-body: clamp(16px, 1.1vw, 18px);
    --font-size-btn: clamp(12px, 1vw, 14px);
    --1rem: var(--font-size-body);
	/* ======= Line-Heights ======= */
	--lh-h1: 1.2;
	--lh-h2: 1.25;
	--lh-h3: 1.3;
	--lh-h4: 1.35;
	--lh-body: 1.6;
	
	/* ======= Margins für Headlines ======= */
	--h1-m: 1.2em 0 .5em;
	--h2-m: 1.1em 0 .5em;
	--h3-m: 1em 0 .5em;
	--h4-m: .9em 0 .4em;
	
	/* ======= Optional: Farben (nur falls du sie brauchst) ======= */
	--color-text: #000;
	--color-heading: #000;
	--color-bg: #fff;
	
	/* ======= Optionale Erweiterungen ======= */
	--line-height: 1.6;
	--font-family-base: "Raleway", "Helvetica", Arial, sans-serif;
	--font-family-heading: "Raleway", "Helvetica", Arial, sans-serif;
	
	/* ======= Abstände für Listen, falls gewünscht ======= */
	--list-indent: 1.25rem;
	--shadow:0 20px 60px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.25);
}
.disabled, [disabled] {
    --bs-btn-disabled-opacity: 0.3552;
}

#loader {
    background: url(../images/Elitist_Logo_small.png);
    background-size: 50% auto;
    background-repeat: no-repeat;
    background-position: center 50%;
    background-color: #fff;
    border-radius: 50rem;
    box-shadow: 0px 1px 20px 0px rgba(112, 112, 112, 0.75);
    position: fixed;
    z-index: 99993;
    width: 100px;
    height: 100px;
    line-height: 100px;
    left: 50% !important;
    top: 50% !important;
    margin: -40px 0 0 -40px;
    vertical-align: top;
    display: none
}

#loader .spinner-border {
    vertical-align: top;
    width: 100%;
    height: 100%;
    margin-top: 0;
    color: var(--color-primary, #999);
    border-width: 2px;
    animation-duration: 1s !important;
}

.form-control:read-only,
.form-control:disabled {
    background-color: #e9ecef;
    opacity: 1;
}

.btn:disabled {
    background: #cdcdcd;
    border-color: #cdcdcd;
}

/* Dann ist 1rem = 16px → klar definiert. */
html {
  font-size: 16px;
}
body {
  font-size: 1rem;
}
/* Dann ist 1rem = 16px → klar definiert. */

html {
    width: 100vw;
    overflow-x: hidden;
}

body {
	font-family: 'Raleway', sans-serif;
    font-optical-sizing: auto;
    font-weight:100;
    font-style: normal;
    overflow-x: hidden;
    margin-right: 0 !important;
    padding-right: 0 !important;
    background-color: #fff;
}
*,
::before,
::after {
    background-repeat: no-repeat;
}

img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    user-select: none;
}
.container-fluid .img-fluid { width: 100%; }
figure figcaption {
    font-size: 0.75rem;
    margin-top: 0.375rem;
}

.lh-normal {
    line-height: normal;
}

a,
[onclick],
.btn,
button,
input {
    cursor:pointer;
    text-decoration: none;
    outline: none;
    box-shadow: none !important;
}

a {
    color: inherit;
}
p a { text-decoration: underline; color: #00a75d; }

dl, ol, ul {
}
p, li {
    margin-bottom:1rem;
    line-height: 1.25;
    font-size:var(--font-size-body);    
}
b,
strong {
    font-weight: bold;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    font-weight:700;
    font-size: inherit;
    line-height: 1.3;
}
h1{
    font-size:var(--font-size-h1);
    margin-bottom: 2rem;
}
h2{  
    font-size:var(--font-size-h2);    
    margin-bottom: 1rem;
}
h3{
    font-size:var(--font-size-h3);
}
ol,
ul {
    /* padding-left:.5rem; */
    margin-bottom:.86rem;
}

span[style] {
    font-family: inherit !important;
}
input {
    box-shadow: none !important;
}
.section { position: relative; padding: 6rem 0; }
#page + .section { position: relative; padding: 0 0 4rem 0; }
.section-video { padding: 6rem 0 0; }
.text_ellipsis {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

table, .table {
    margin-bottom: 0;
}

.container {
    position: relative;
}
.text-editor img {
    height: auto !important;
}

.text-editor a {
    color: rgba(var(--bs-link-color-rgb));
}
.border-primary{
    border-color:#00376C!important;
}
.text-primary{
    color:#00376C!important;
}
.btn {
    /* --bs-btn-font-size:calc(var(--ratio)*1.0625rem); */
    --bs-btn-font-size:var(--font-size-btn);
    padding: .4rem 1.25rem;
    border-radius: 0;
    background: #fff !important;
    color: #000 !important;
    font-weight: 400;
    border: 1px solid #777 !important;
    border-radius: 4px;;
}
.btn-info {
    padding: .6rem .75rem .5rem 1.25rem;
    /* padding: .1rem .25rem 0 1rem; */
    transition: all .5s ease-in-out;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
    /* background: linear-gradient(135deg, #ffffff 0%, #eee 100%) !important; */
}
.btn-info:hover {
    background: rgba(255,255,255,0.6) !important;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) !important;
    /* transform + color entfernt – Sliding-Fill-Button (style.css) steuert Hover-Farbe und kein Springen */
}
.section-bg-dark .btn-info:hover {
    /* transform entfernt – kein Hover-Sprung */
    color: #fff !important;
}
.btn-info::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 4px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Cpath d='M9 6l6 6-6 6' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.bg-blue .btn {
    background: var(--taupe) !important;
}
.alert-primary {
    color: #fff;
    background: #666;
    border: 1px solid var(--color-primary);

    position: absolute;
    left: 50%;
    transform: translate(-50%, -300px);
    z-index: 9;
}
.alert.hide {
    display: none;
}
.btn:hover {
    color: #fff;
    background: var(--blue);    
}
.btn-primary:hover {
    color: #fff;
    background: var(--green) !important;    
}
.pg2 .btn-primary:hover {
    background: var(--taupe) !important;    
}

/* @media (min-width: 992px) { */
    html {
        /*16px~1920px*/
        /* font-size:0.8333333333333333vw; */
    }

    .pc {
        display: block !important;
    }

    .mb {
        display: none !important;
    }

    .container {
        /* width:90.5rem; */
        width:90rem;
        max-width: none;
        --bs-gutter-x: 0;
    }
/* } */

/* Runde Ecken */
.img-rounded {
    border-radius: 8px;
}

/* Kreisförmig */
.img-circle {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Schatten */
.img-shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Rahmen */
.img-border {
    border: 1px solid #ddd;
}

/* Graustufen */
.img-grayscale {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.img-grayscale:hover {
    filter: grayscale(0%);
}

/* Zoom - Maus over */
.img-hover-zoom {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.img-hover-zoom:hover {
    transform: scale(1.05);
}

/* Kombinierte Effekte funktionieren besser mit overflow hidden */
.img-hover-zoom {
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* Für bessere Performance bei Animationen */
.img-hover-zoom,
.img-grayscale {
    will-change: transform, filter;
}

/* Accessibility: Animationen respektieren */
@media (prefers-reduced-motion: reduce) {
    .img-hover-zoom,
    .img-grayscale {
        transition: none;
    }
}

@media (max-width: 1800px) {
    .container { width:90rem; }
}
@media (max-width: 1600px) {
    .container { width:75rem; }
}
@media (max-width: 1400px) {
    .container { width:90vw; }
}
@media (max-width: 991px) {
    :root{
        --header-height:3.125rem;
    }
    html {
    }
    .pc {
        display: none !important;
    }

    .mb {
        display: block !important;
    }

    .container {
        width: 100vw;
        max-width: 100%;
        --bs-gutter-x:1.51rem;
    }
    
    .onwater-text-style2 {
        width: 20rem;
    }
}


@media (min-width: 992px) and (max-width: 1024px) {
    html {
    }
}

@media (min-width: 1025px) and (max-width: 1439.98px) {
    html {
    }
}

::placeholder {
    opacity: 1 !important; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
    color: #716C80;
    opacity: 1 !important;
}




/* Container: responsive, 16:9 */
.video_wrapper{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background-position: center;
  background-size: cover;
  background-color: #000;
  overflow: hidden;
  border-radius: .5rem;
}

/* Fallback für Browser ohne aspect-ratio */
@supports not (aspect-ratio: 16/9){
  .video_wrapper::before{
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 */
  }
  .video_wrapper > *{
    position: absolute;
    inset: 0;
  }
}

/* Overlay mit Hinweis + Button */
.video_trigger{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  text-align: center;
  padding: clamp(12px, 2vw, 24px);
  color: #fff;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(1px);
}
.video_trigger p{ margin: 0; font-size: clamp(14px, 1.6vw, 16px); }
.video_trigger a{ color: #fff; text-decoration: underline; }

/* Videolayer */
.video_layer{
  position: absolute;
  inset: 0;
  display: none;            /* wird beim Start sichtbar */
  background: #000;
}
.video_layer iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Status beim Abspielen: Wrapper .is-playing geben */
.video_wrapper.is-playing .video_trigger{ display: none; }
.video_wrapper.is-playing .video_layer{ display: block; }

/* Optional: 4:3-Format */
.video_wrapper.is-43{ aspect-ratio: 4/3; }
@supports not (aspect-ratio: 16/9){
  .video_wrapper.is-43::before{ padding-top: 75%; }
}

/* Kleinere Screens */
@media (max-width: 420px){
  .btn-play{ font-size: 14px; padding: .5rem .75rem; }
  .video_trigger p{ font-size: 13px; }
}



/* Standard-Button-Reset von Bootstrap überschreiben */
  .custom-close {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    background: none;
    border: none;
    opacity: 1;
  }
  
  /* Das eigentliche "X" über ::before und ::after */
  .custom-close::before,
  .custom-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5rem;
    height: 2px;
    background-color: #333; /* gewünschte Farbe */
    transform-origin: center;
  }
  
  .custom-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .custom-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  
  /* Hover-Effekt */
  .custom-close:hover::before,
  .custom-close:hover::after {
    background-color: #007bff; /* oder deine Akzentfarbe */
  }


.form-group {
    margin: 1em 0 0;
}
.form-group label {
    font-weight: 600;
    margin-bottom: 0.5em;
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 0.25em;
}

.form-control {
    border-radius: 0;
    padding: .75em;
    background: #f1f1f1;
}
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  padding-right: 36px;
  cursor: pointer;
}


.datenschutz {
    margin-bottom: 2rem !important;
  }
/* checkbox-rect */
.checkbox-rect input[type="checkbox"] {
    display: none;
  }
  .checkbox-rect input[type="checkbox"] + label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 20px;
    line-height: 18px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    line-height: 1.1;
  }
  .checkbox-rect input[type="checkbox"]:hover + label:hover {
    /* color: rgb(23, 86, 228); */
  }
  .checkbox-rect input[type="checkbox"]:hover + label:before {
    background: #999;
    /* box-shadow: inset 0px 0px 0px 1px #999; */
  }
  .checkbox-rect input[type="checkbox"] + label:last-child {
    margin-bottom: 0;
  }
  .checkbox-rect input[type="checkbox"] + label:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    /* border: none; */
    border-radius: 0;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all 0.2s, background 0.2s ease-in-out;
    transition: all 0.2s, background 0.2s ease-in-out;
    background: #efefef;
  }
  .checkbox-rect input[type="checkbox"]:checked + label:before {
      width: 20px;
      height: 20px;
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
      background: #666;
      /* box-shadow: 0 0 0 1px #000; */
    }
    .section-bg-dark .checkbox-rect input[type="checkbox"]:checked + label:before {
        background: #000;
    }
  /* checkbox-rect end */
  
  /* checkbox-rect */
  .checkbox-rect input[type="radio"] {
    display: none;
  }
  .checkbox-rect input[type="radio"] + label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 20px;
    line-height: 23px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    font-size: var(--1rem);
  }
  .checkbox-rect input[type="radio"]:hover + label:hover {
    color: var(--black);
  }
  .checkbox-rect input[type="radio"]:hover + label:before {
    background: var(--color-tak-light-gray);
    box-shadow: inset 0px 0px 0px 2px #f7f2f2;
  }
  .checkbox-rect input[type="radio"] + label:last-child {
    margin-bottom: 0;
  }
  .checkbox-rect input[type="radio"] + label:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all 0.2s, background 0.2s ease-in-out;
    transition: all 0.2s, background 0.2s ease-in-out;
    background: var(--color-tak-red);
  }
  .checkbox-rect input[type="radio"]:checked + label:before {
    width: 20px;
    height: 20px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    background: var(--color-tak-dark-gray);
    /* box-shadow: 0 0 0 1px #000; */
  }
  /* checkbox-rect end */
  
  .checkbox-rect.radio { display: inline-block; margin-right: 2em; }
  .checkbox-rect label { font-size: var(--1rem); }
  
  .form-control { border-radius: 0; padding: .75em; }
  .form-group { margin: 1em 0 0; text-align: left; }
  label.lb, .pflicht { font-size: var(--08rem); }
  label.lg { font-size: var(--1rem); }
  .sendform { display: inline-block; }
  .sendform.hide { display: none; }
  .form_liste label {
      /* margin-right: 2em;  */
  
  }
  .form_liste p {
      margin: 1em 0 0; 
  }
  .form_hl {
      margin: 1em 0 1em;
  }
  .checkbox-rect.w25 {
      width: 30%; display: inline-block;
  }
  .checkbox-rect.w50 {
      width: 49%; display: inline-block;
  }

.lang-flag{
      font-size: 22px;   /* probiere 20–28px */
      line-height: 1;
  }

.lds-ellipsis {
	display: none;
	position: relative;
	width: 80px;
	height: 33px;
}
.lds-ellipsis.show {
	display: inline-block;
}
.lds-ellipsis div {
	position: absolute;
	top: 33px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #fff;
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
	left: 8px;
	animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
	left: 8px;
	animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
	left: 32px;
	animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
	left: 56px;
	animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
	0% {
	transform: scale(0);
	}
	100% {
	transform: scale(1);
	}
}
@keyframes lds-ellipsis3 {
	0% {
	transform: scale(1);
	}
	100% {
	transform: scale(0);
	}
}
@keyframes lds-ellipsis2 {
	0% {
	transform: translate(0, 0);
	}
	100% {
	transform: translate(24px, 0);
	}
}