/* source-sans-3-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/source-sans-3-v19-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/source-sans-3-v19-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/source-sans-3-v19-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/source-sans-3-v19-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-sans-3-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/source-sans-3-v19-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/source-sans-3-v19-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/source-sans-3-v19-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/source-sans-3-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/source-sans-3-v19-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/source-sans-3-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/source-sans-3-v19-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/source-sans-3-v19-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/source-sans-3-v19-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/source-sans-3-v19-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/source-sans-3-v19-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/*
<style>
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital@0;1&display=swap');
</style>

.source-sans-3-<uniquifier> {
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
 */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


body{font-family:"Source Sans 3",sans-serif;color:#000}

h1,h2{font-family:"Source Sans 3",serif}

h4{padding-top:1rem; font-weight:400}

a{color:#000;text-decoration:underline}
a:hover,a:active{color:#d5f991}

footer a{color:#fff;text-decoration:underline;font-weight:500}
footer a:hover,footer a:active{color:#d5f991;text-decoration:none}
#popupBox a{color:#000}
#popupBox a:hover,#popupBox a:active{color:#4e5938}

.odd{background:url("../img/background/pattern.jpg")}
.even{background:url("../img/background/pattern_02.jpg")}
.texture{background:url("../img/background/pattern.png")}

.arrow-down{padding:2.875rem 0 8.175rem 0}

hr.emanuel{height:0;margin:3.75rem auto;border-bottom:1px solid #000}

.close-button.popupBox_close{color:#000}
.close-button.popupBox_close:hover,
.close-button.popupBox_close:focus{color:#4e5938}nav{position:fixed;top:0;left:0;width:100%;z-index:999;font-family:"Source Sans 3";font-size:1.225rem;font-weight:700;}

nav a{color:#fff;text-decoration:none}
nav a:hover,nav a:active,nav a.active{color:#d5f991}
.top-bar.emanuel,.top-bar.emanuel ul{background:transparent}
.top-bar.emanuel .menu-icon{margin-right:1rem}
.top-bar.emanuel .menu-icon light{color:#d5f991}
.callout.emanuel{background:transparent;border:none;border-radius:0px;padding:1.875rem 1rem}
.unveil{opacity:0;transition:opacity .8s ease-in}
.joreveal {opacity:0;transition:opacity .8s ease-in}

.button.emanuel{background-color:#d5f991;color:#333;text-decoration:none;font-weight:700}
.button.emanuel:hover,.button.emanuel:focus{background-color:#4e5938;color:#d5f991}
.spacer{height:1rem}
.spacer.xsmall{height:0.5rem}
.spacer.small{height:1.875rem}
.spacer.medium{height:3.5rem}
.spacer.large{height:5rem}
.spacer.xlarge{height:15rem}
.spacer.xxlarge{height:30rem}
footer{color:#fff}
#popupBox{background:#d5f991;width:100%;max-width:62.5rem;padding:1.875rem}


.fullscreen {
  width: 100vw;   /* 100% der Bildschirmbreite */
  height: 100vh;  /* 100% der Bildschirmhöhe */
  position: relative;
  top: 0;
  left: 0;
}

:root {--bs-body-bg: transparent;
--bs-body-color:#D5F991;
--bs-primary:#eeeeee;
}

.text-bg-dark {
    --bs-offcanvas-bg: #145c7f  !important;
	--bs-offcanvas-color: #000;
	
}

.text-bg-dark {
    color: #000!important;
    background-color: #145c7f !important;
}



.caption-new {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption-new span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}
.hover-circle {
fill:#ffffff;
opacity: 1;
transition: opacity 0.3s ease-in-out;
cursor: pointer;
width: 800px}

.hover-circle:hover {opacity: 0.1; }

.caption-jo {display: flex;
    justify-content: center;
    align-content: center;
    z-index: 1;
}

.centered-svg { width: 50%; height: auto; }



.navbar-brand {
	font-weight: 400;
    padding: 6px 8px 4px 10px;
    color: #fff;
	letter-spacing: 2px;
	background-color: rgba(24, 110, 153, 1);
	}
.navbar-brand-footer {
	font-size:2rem;
	font-weight: 400;
    padding: 6px 11px 3px 14px;
	margin-left:-9px;
    color: #fff;
	letter-spacing: 2px;
	background-color: rgba(24, 110, 153, 1);
	text-decoration:none
	}


.reveal {
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

/* Diese Klasse wird per JavaScript hinzugefügt */
.reveal.active {
  opacity: 1 !important;
  transform: translateY(0);
}




.navbar {
  margin-bottom: 0px;
}

html {
  scroll-behavior: smooth;
}

/* Respektiert die Systemeinstellung des Nutzers */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}

.gruen-logo {color:#d5f991}
.gruen-bg { background-color:rgba (213, 249, 145, 1)}


.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

/* Der Zielzustand: Wenn die Klasse 'active' per JS hinzugefügt wird */
.reveal.active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;

}

.reveal-delay-1 { transition-delay: 0.2s; }
.reveal-delay-2 { transition-delay: 0.4s; }

#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  z-index: 99;
}

btn-down-to {
  position: relative ;
  bottom: 20px;
  z-index: 99;
}


      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }
      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
      .b-example-divider {
        width: 100%;
        height: 3rem;
        background-color: #0000001a;
        border: solid rgba(0, 0, 0, 0.15);
        border-width: 1px 0;
        box-shadow:
          inset 0 0.5em 1.5em #0000001a,
          inset 0 0.125em 0.5em #00000026;
      }
      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }
      .bi {
        vertical-align: -0.125em;
        fill: currentColor;
      }
      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }
      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }

      .bd-mode-toggle {
        z-index: 1500;
      }
      .bd-mode-toggle .bi {
        width: 1em;
        height: 1em;
      }
      .bd-mode-toggle .dropdown-menu .active .bi {
        display: block !important;
      }
	  body { background-color: #d5f991 !important; color:#FFF }


     .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }
      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
      .b-example-divider {
        width: 100%;
        height: 3rem;
        background-color: #0000001a;
        border: solid rgba(0, 0, 0, 0.15);
        border-width: 1px 0;
        box-shadow:
          inset 0 0.5em 1.5em #0000001a,
          inset 0 0.125em 0.5em #00000026;
      }
      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }
      .bi {
        vertical-align: -0.125em;
        fill: currentColor;
      }
  
  
.nav-scroller {
    position: relative;
	z-index: 2;
	height: 2.75rem;
	overflow-y: hidden;
	}

      .nav-scroller .nav {
    display: flex;
	flex-wrap: nowrap;
	padding-bottom: 1rem;
	margin-top: -1px;
	overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
	}
	  

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #145c7f;
    --bs-btn-border-color: #145c7f;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #186e99;
    --bs-btn-hover-border-color: #145c7f;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #186e99;
    --bs-btn-active-border-color: #145c7f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #145c7f;
    --bs-btn-disabled-border-color: #145c7f;
	}

/* 1. Der fixierte Halbkreis-Button am rechten Bildschirmrand */
.btn-half-circle {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%); /* Perfekt vertikal zentrieren */
    z-index: 1040; /* Liegt über dem Inhalt, aber unter dem geöffneten Modal */
            
    /* Maße für den Halbkreis */
    width: 60px;
    height: 120px;
    /* Nur die linke Seite runden */
    border-radius: 120px 0 0 120px; 
            
    background-color: #145C7F;
    color: white;
    border: none;
    cursor: pointer;
            
            /* Zentrierung des Inhalts/Icons im Halbkreis */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 15px; /* Schiebt Text/Icon leicht nach links */
            
    transition: all 0.3s ease;
    box-shadow: -2px 4px 10px rgba(0, 0, 0, 0.15);
	}

/* Hover-Effekt: Schiebt sich beim Drüberfahren leicht heraus */
.btn-half-circle:hover {
    width: 75px;
    background-color: #186e99;
    color: white;
	}

/* 2. Modal-Animation: Von rechts außerhalb reinschieben */
.modal.fade .modal-dialog {
    transform: translate(120%, -50%) !important;
    transition: transform 0.4s ease-out;
    top: 50%;
    position: absolute;
    right: 0px; /* Abstand zum rechten Bildschirmrand */
    margin: 0;
	}

.modal.show .modal-dialog {
    transform: translate(0, -50%) !important;
	}

/* 3. Perfekter Kreis mit exakt 600x600px */
.modal-round-circle {
    width: 300px;
    max-width: 300px;
    height: 300px;
	}

.modal-round-circle .modal-content {
    width: 300px;
    height: 300px;
    border-radius: 50% !important;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
	}

/* Runde Eingabefelder */
.rounded-custom {
    border-radius: 20px !important;
	}
	
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: #000000;
    pointer-events: auto;
    background-color:#d5f991;
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;
}



.modal {
    --bs-modal-zindex: 1055;
    --bs-modal-width: 500px;
    --bs-modal-padding: 1rem;
    --bs-modal-margin: 0.5rem;
    --bs-modal-color: var(--bs-body-color);
    --bs-modal-bg: var(--bs-body-bg);
    --bs-modal-border-color: var(--bs-border-color-translucent);
    --bs-modal-border-width: var(--bs-border-width);
    --bs-modal-border-radius: var(--bs-border-radius-lg);
    --bs-modal-box-shadow: var(--bs-box-shadow-sm);
    --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
    --bs-modal-header-padding-x: 1rem;
    --bs-modal-header-padding-y: 1rem;
    --bs-modal-header-padding: 1rem 1rem;
    --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-header-border-width: var(--bs-border-width);
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-footer-bg: ;
    --bs-modal-footer-border-color: var(--bs-border-color);
    --bs-modal-footer-border-width: var(--bs-border-width);
}