:root {
  --prim: #98af90;
  --sec: #e0dfd5;
  --acc: #a45a52; /* Ein warmer Rostton als Kontrast */
  --acc-sec: #db952e;
  --dark: #6c7c62; /* Dunklere Version von prim */
  --light: #b8c9af; /* Hellere Version von prim */
  --superLight: #f5f4ef; /* Sehr hell, fast weiß mit warmem Touch */
  --superDark: #3f4b34; /* Sehr dunkel, aber noch grünlich */
}
@font-face {
  font-family: "PathwayGothic";
  src: url(/css/fonts/PathwayGothicOne-Regular.ttf);
}
@font-face {
  font-family: "GothicExpand";
  src: url(/css/fonts/SpecialGothicExpandedOne-Regular.ttf);
}
@font-face {
  font-family: "Extenda";
  src: url(/css/fonts/Extenda-80.ttf);
}

#wysiwyg-overlay {
  z-index: -1 !important;
}
.wysiwyg-on {
  background-color: #000 !important ;
  background: black !important;
}
video {
  pointer-events: none;
}

video::-webkit-media-controls-panel {
  display: none !important;
  opacity: 1 !important;
}

*::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none;
}

*::-webkit-media-controls-panel {
  display: none !important;

  -webkit-appearance: none;
}

*::-webkit-media-controls-start-playback-button {
  display: none !important;

  -webkit-appearance: none;
}

html,
body {
  scroll-behavior: smooth;
  scroll-padding-top: 8vmin;
}

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

body {
  margin: 0;
  padding: 0;
  background-color: black;
}

* {
  word-break: break-word;
  cursor: none;
}

wbr {
  content: "-";
}

html::-webkit-scrollbar {
  /* Safari and Chrome */
  display: none;
  /* scrollbar-color: var(--prim) transparent;
  background-color: transparent; */
}

*::-webkit-scrollbar {
  display: none;
  /* scrollbar-color: var(--prim) transparent;
  background-color: transparent; */
}

/* ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  overflow: overlay;
}

::-webkit-scrollbar-thumb {
  background: transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
} */
ul.fancy-ul-star li {
  list-style: none;
}
ul.fancy-ul-star li::marker {
  content: none;
}
ul.fancy-ul-star li::before {
  content: "✦";
  color: var(--acc-sec);
  font-family: "GothicExpand";
  margin-right: 0.5rem;
}

ul.fancy-ul-star {
  text-align: left;
  padding: 0 !important;
  margin: 0;
}
ul.fancy-ul-star-right {
  text-align: right;
  padding: 0 !important;
  margin: 0;
}

ul.fancy-ul-star-right li {
  list-style: none;
  position: relative;
  padding-right: 1.5rem; /* Platz für das Symbol rechts */
}

ul.fancy-ul-star-right li::after {
  content: "✦";
  color: var(--acc-sec);
  font-family: "GothicExpand";
  position: absolute;
  right: 0;
  top: 0;
}

h1 {
  font-family: "PathwayGothic";
  color: #98af90;
}
h2 {
  font-family: "GothicExpand";
  color: #98af90;
  font-size: 2rem;
	hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}
h3 {
  font-family: "GothicExpand";
}
h4 {
  font-family: "PathwayGothic";
  font-size: 2rem;
  color: #98af90;
}
h5 {
  font-family: "PathwayGothic";
}
h6 {
  font-family: "Extenda";
  color: #98af90;
  font-size: 6rem;
  line-height: 9vmin;
  text-shadow: 3px 3px white;
}

.hero p {
  font-size: unset;
}

p {
  font-size: 2rem;
  font-family: "PathwayGothic";
}
p strong {
  font-family: "GothicExpand";
}
.hero p {
  font-family: "GothicExpand";
}
a {
  font-family: "GothicExpand";
  text-decoration: none;
}

hr {
  color: var(--prim);
}

.spacer-1 {
  height: 6.33vh;
}

.color-acc{
  color:var(--acc-sec);
}
.highlight{
  color:var(--acc-sec)!important;
}
/* figure{ position:relative; } */

/* Burst-Badge via clip-path (deine Koordinaten) */
.burst-badge {
  --size: 10vmin; /* Gesamtgröße */
  --bg: var(--acc-sec); /* Badge-Farbe */
  --txt: #fff; /* Textfarbe */
  position: absolute;
  top: -22px;
  left: -22px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--size);
  aspect-ratio: 1;
  color: var(--txt);
  text-transform: uppercase;
  /* Skaliert auf kleineren Screens automatisch mit */
  font-size: clamp(10px, 1.5vw, 12px);
  /* transition: all 0.25s ease-in-out; */
  isolation: isolate;
  rotate: -32deg;
}

/* eigentliche Burst-Form */
.burst-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--acc-sec);
  /* deine polygon-Koordinaten 1:1 */
  clip-path: polygon(
    100% 50%,
    79.63% 54.69%,
    97.55% 65.45%,
    76.73% 63.62%,
    90.45% 79.39%,
    71.21% 71.21%,
    79.39% 90.45%,
    63.62% 76.73%,
    65.45% 97.55%,
    54.69% 79.63%,
    50% 100%,
    45.31% 79.63%,
    34.55% 97.55%,
    36.38% 76.73%,
    20.61% 90.45%,
    28.79% 71.21%,
    9.55% 79.39%,
    23.27% 63.62%,
    2.45% 65.45%,
    20.37% 54.69%,
    0% 50%,
    20.37% 45.31%,
    2.45% 34.55%,
    23.27% 36.38%,
    9.55% 20.61%,
    28.79% 28.79%,
    20.61% 9.55%,
    36.38% 23.27%,
    34.55% 2.45%,
    45.31% 20.37%,
    50% 0%,
    54.69% 20.37%,
    65.45% 2.45%,
    63.62% 23.27%,
    79.39% 9.55%,
    71.21% 28.79%,
    90.45% 20.61%,
    76.73% 36.38%,
    97.55% 34.55%,
    79.63% 45.31%
  );
  /* filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.35)); */
  will-change: transform;
  transition: clip-path 0.25s ease-in-out;
}

article:hover .burst-badge::before {
  clip-path: polygon(
    100% 50%,
    99.38% 57.82%,
    97.55% 65.45%,
    94.55% 72.7%,
    90.45% 79.39%,
    85.36% 85.36%,
    79.39% 90.45%,
    72.7% 94.55%,
    65.45% 97.55%,
    57.82% 99.38%,
    50% 100%,
    42.18% 99.38%,
    34.55% 97.55%,
    27.3% 94.55%,
    20.61% 90.45%,
    14.64% 85.36%,
    9.55% 79.39%,
    5.45% 72.7%,
    2.45% 65.45%,
    0.62% 57.82%,
    0% 50%,
    0.62% 42.18%,
    2.45% 34.55%,
    5.45% 27.3%,
    9.55% 20.61%,
    14.64% 14.64%,
    20.61% 9.55%,
    27.3% 5.45%,
    34.55% 2.45%,
    42.18% 0.62%,
    50% 0%,
    57.82% 0.62%,
    65.45% 2.45%,
    72.7% 5.45%,
    79.39% 9.55%,
    85.36% 14.64%,
    90.45% 20.61%,
    94.55% 27.3%,
    97.55% 34.55%,
    99.38% 42.18%
  );
}

/* Text im Badge */
.burst-badge > span {
  position: relative; /* über den Pseudo-Layern */
  font-family: "Extenda";
  z-index: 1;
  letter-spacing: 0.04em;
}

.star-1 {
  transition: all 0.25s ease-in-out;
  top: -33px;
  left: -12px;
  transform: rotate(0deg) scale(1);
}
.star-2 {
  transition: all 0.25s ease-in-out;
  top: -6px;
  left: 18px;
  transform: rotate(0deg) scale(0.9);
}
.star-3 {
  transition: all 0.25s ease-in-out;
  top: 14px;
  left: -15px;
  transform: rotate(0deg) scale(0.85);
}

.star-burst-two {
  position: absolute;
    --size: 10vmin; /* Gesamtgröße */
  --bg: var(--acc-sec); /* Badge-Farbe */
  --txt: #fff; /* Textfarbe */
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--size);
  aspect-ratio: 1;
  color: var(--txt);
  text-transform: uppercase;
  /* Skaliert auf kleineren Screens automatisch mit */
  font-size: clamp(10px, 1.5vw, 12px);
  /* transition: all 0.25s ease-in-out; */
  isolation: isolate;
  rotate: -32deg;
}
.star-1-two,
.star-2-two,
.star-3-two{
  position: absolute;
}

.star-1-two {
  transition: all 0.25s ease-in-out;
  top: 0;
  left: 0;
  transform: rotate(0deg) scale(1);
}
.star-2-two {
  transition: all 0.25s ease-in-out;
  top: 18px;
  left: -28px;
  transform: rotate(0deg) scale(0.9);
}
.star-3-two {
  transition: all 0.25s ease-in-out;
  top: -14px;
  left: -12px;
  transform: rotate(0deg) scale(0.85);
}
.star-burst .star-1 {
  animation: twinkle-burst 0.8s infinite ease-in-out;
}
.star-burst .star-2 {
  animation: twinkle-burst 0.5s infinite ease-in-out;
}
.star-burst .star-3 {
  animation: twinkle-burst 0.7s infinite ease-in-out;
}
.star-burst-two .star-1-two {
  animation: twinkle-scale 1.8s infinite ease-in-out, twinkle-color 1.8s infinite ease-in-out;
}
.star-burst-two .star-2-two {
  animation: twinkle-burst 1.5s infinite ease-in-out, twinkle-color 1.5s infinite ease-in-out;
}
.star-burst-two .star-3-two {
  animation: twinkle-burst 1.7s infinite ease-in-out, twinkle-color 1.7s infinite ease-in-out;
}
/* Hover Star Two */
.star-burst-two:hover .star-1-two,
.star-burst-two:hover .star-2-two,
.star-burst-two:hover .star-3-two
 {
  animation: twinkle-scale 0.25s infinite linear, rainbow-fill 0.25s infinite linear;
 
}


/* Hover -> ersetze durch Fadeout */
article:hover .star-1,
article:hover .star-2,
article:hover .star-3 {
  animation: twinkle-fadeout 0.5s forwards ease-out;
}

.info-heading:hover .star-1,
.info-heading:hover .star-2,
.info-heading:hover .star-3 {
  animation: twinkle-fadeout 0.5s forwards ease-out;
}
@keyframes twinkle-burst {
  0% {
    transform: rotate(0deg) scale(1);
    fill: var(--prim);
  }
  50% {
    transform: rotate(0deg) scale(0.5);
    fill: var(--superLight);
  }
  100% {
    transform: rotate(0deg) scale(1);
    fill: var(--acc-sec);
  }
}

/* Nur SCALE/ROTATE – keine Farbe hier! */
@keyframes twinkle-scale {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(0deg) scale(0.5); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes twinkle-color {
  0%   { fill: var(--prim); }
  25%  { fill: var(--superLight); }
  50%  { fill: var(--acc-sec); }
  75%  { fill: var(--superLight); }
  100% { fill: var(--prim)}
}


/* Nur Farbe – keine Transform hier! */
@keyframes rainbow-fill {
  0%   { fill: red; }
  20%  { fill: orange; }
  40%  { fill: yellow; }
  60%  { fill: green; }
  80%  { fill: blue; }
  100% { fill: violet; }
}

/* Hover: beide gleichzeitig */
.star-1-two:hover,
.star-2-two:hover,
.star-3-two:hover {
  animation:
    twinkle-scale 0.4s infinite ease-in-out,
    rainbow-fill 0.6s infinite linear;
  transform-origin: center;              /* wichtig bei SVG */
  filter: drop-shadow(0 0 10px currentColor);
}

/* Rückführungsanimation */
@keyframes twinkle-fadeout {
  from {
    transform: scale(0.5);
    fill: var(--superLight);
  }
  to {
    transform: scale(1);
    fill: var(--prim);
  }
}


#mobile-break-text {
  white-space: normal;
  overflow-wrap: anywhere;
}

footer a {
  padding: 0.2rem;
  text-decoration: none;
}
footer p {
  color: #98af90;
}
.dast {
  margin: 1rem;
}

.dast h4 {
  padding: 6px;
  margin: 0;
  line-height: 1;
}

#map {
  display: flex;
  justify-content: center;
  position: relative;
  top: 0;
  left: 0;
  height: 50vh;
  width: 100%;
  min-width: 200px;
  max-width: 77vw;
  border-radius: 8px;
  background: var(--bg);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}

.leaflet-bar {
  border: none !important;
}

.leaflet-bar a {
  color: var(--prim);
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
   
}
.pulse-marker {
  width: 20px;
  height: 20px;
  background: var(--prim);
  border-radius: 50%;
  border: 3px solid white;
  position: relative;
  box-shadow: 0 0 0 rgba(152, 175, 144, 0.4);
  animation: pulse 2s infinite;
  z-index: 10;
}

/* Die pulsierende Welle für SVG */
.pulse-core {
  fill: var(--prim, #98af90);
  stroke: white;
  stroke-width: 20; /* skaliert auch mit ViewBox */
  r: 7rem;
  fill: "#98af90";
}

.pulse-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 20;
  r: 0; /* wird per Animation animiert */
  animation: pulse-ring 2s infinite;
  transform-origin: center;
}

/* Animierter Ring */
@keyframes pulse-ring {
  0% {
    r: 0;
    opacity: 0.8;
  }
  70% {
    r: 300; /* skaliert sinnvoll bei 50k Höhe */
    opacity: 0;
  }
  100% {
    r: 0;
    opacity: 0;
  }
}

.leaflet-control-attribution {
  display: none;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(152, 175, 144, 0.5);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(152, 175, 144, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(152, 175, 144, 0);
  }
}

.image-gradient {
  position: relative;
  display: inline-block;
}

.image-gradient img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 66vh;
}

.image-gradient::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0.6) 50%,
    rgba(0, 0, 0, 1) 60%
  );
  transform: scaleY(1.2); /* breiter ziehen */
  transform-origin: center;
  pointer-events: none;
}

.contact-teaser {
  min-height: 90vh;
  xwidth: 90vw;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  background-color: var(--sec);
  margin-left: 1rem;
  margin-right: 1rem;
}

.side-text p {
  color: black;
  font-size: 2rem;
}

.brand-image-rotate {
  position: absolute;
  left: 36vw;
  top: 50vh;
  transition: transform 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.brand-image-rotate:hover {
  transform: scale(1.4);
}

.brand-image-rotate img {
  width: 22vmin;
  height: auto;
  animation: spinner 16s infinite linear;
}

.draw-arrow {
  right: 0;
  bottom: -2em;
}

.draw-arrow-lg {
  right: 0;
  bottom: -2em;
}

.rounded-button {
  border-radius: 33px;
  padding: 1rem;
  background-color: var(--prim);
  color: var(--sec);
  width: fit-content;
  padding-left: 2rem;
  padding-right: 2rem;
}

.round-button {
  border-radius: 33px;
  padding: 1em;
  background-color: var(--prim);
  color: var(--sec);
  width: fit-content;
}
.circle-button p {
  font-size: 1rem !important;
}
.circle-button {
  position: relative; /* für das Pseudo-Element */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  overflow: visible; /* damit nichts herausragt */
}

/* Der Kreis als Hintergrund-Layer, wächst später */
.circle-button::before {
  content: "";
  position: absolute;
  inset: 0; /* top/right/bottom/left = 0 */
  background-color: var(--prim);
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  z-index: 0; /* hinter dem Text */
}

/* Text bleibt auf oberster Ebene, unverändert skaliert */
.circle-button p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: white;
  text-align: center;
}

/* Nur das ::before wächst, das <p> bleibt 1:1 */
.circle-button:hover::before {
  transform: scale(1.3);
}

#kontakt {
  position: relative;
  z-index: 999;
}

.footer-img {
  max-height: 27vmin;
  width: auto;
}
/* 
#kontaktieren-sie-uns  h4{
  text-align: end;
} */

footer h5 {
  color: var(--superLight);
  text-decoration: underline var(--prim);
  text-underline-offset: 2px;
}

.neo-btn {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: "GothicExpand";
  /* LÄNGLICH + RUND */
  padding: 24px 38px;
  min-width: 240px; /* macht ihn „länglich“ */
  border-radius: 9999px; /* pillenförmig */

  /* NEO-BRUTALISM LOOK */
  background: var(--prim);
  color: white;
  border: 3px solid var(--acc-sec);
  box-shadow: 3px 3px 0 0 var(--acc-sec);
  text-transform: uppercase;

  /* Typo */

  /* Interaktion */
  transform: translate(0, 0);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  text-decoration: none;
}

.neo-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 0 var(--acc-sec);
}

.neo-btn:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 0 var(--acc-sec);
}

.neo-btn:focus-visible {
  outline: 3px dashed var(--acc-sec);
  outline-offset: 3px;
}

.neo-btn:disabled {
  filter: grayscale(1) opacity(0.6);
  cursor: not-allowed;
}

/* Wrapper: Button über den Sternen, Sterne “kleben” dran */
.btn-wrapper {
  position: relative;
  display: inline-block;
}
.btn-wrapper .btn-primary {
  position: relative;
  z-index: 2; /* Button liegt VOR den Sternen */
}

/* Die bestehende .burst-badge-Definition bleibt – wir überschreiben nur,
   damit die Sterne hinter dem Button starten und “hoch-ploppen” können. */

/* Container der Sterne relativ zum Button positionieren */
.btn-wrapper .star-burst {
  position: absolute;
  top: -33%;
  left: -13%; /* bei Bedarf feinjustieren */
  pointer-events: none; /* Klicks gehen auf den Button */
  z-index: 1; /* hinter dem Button, aber über dem Wrapper-Hintergrund */
}

/* Grundzustand: hinter dem Button, klein, leicht nach unten versetzt, unsichtbar */
.btn-wrapper .burst-badge {
  opacity: 0;
  transform: translateY(0px);
  transition: opacity 0.25s ease-in-out;
  /* transform .35s cubic-bezier(.2,.7,.2,1.15); */
  will-change: opacity;
  fill: var(--prim);
}

/* “Kleben” an typischen Positionen — deine Offsets beibehalten/anpassen */
.btn-wrapper .star-1 {
  top: -33px;
  left: -12px;
}
.btn-wrapper .star-2 {
  top: -6px;
  left: 18px;
}
.btn-wrapper .star-3 {
  top: 14px;
  left: -15px;
}

/* Hover: Sterne “kommen von hinten” und ploppen hoch */
.btn-wrapper:hover .burst-badge {
  opacity: 1;
  transform: translateY(244px);
}

#star-away {
  transform: translateX(0) translateY(0) translateZ(0) rotate(0);
  transition: all 0.25s ease-in-out;
  opacity: 1;
  -webkit-text-stroke: 1px #fff;
  text-stroke: 1px #fff;
}
.btn-wrapper:hover #star-away {
  transform: translateX(-33px) translateY(-33px) translateZ(-10px)
    rotate(-33deg);
  opacity: 0;
}
/* Leichtes Staggering für natürlicheres Ploppen */
.btn-wrapper:hover .star-1 {
  transition-delay: 0ms;
}
.btn-wrapper:hover .star-2 {
  transition-delay: 60ms;
}
.btn-wrapper:hover .star-3 {
  transition-delay: 120ms;
}

/* Falls du die Clip-Path-Badge-Variante nutzt:
   Setz den Pseudo-Layer sicher HINTER den Button (z-index < 2) */
.btn-wrapper .burst-badge::before {
  z-index: -1; /* bleibt hinter dem Badge-Text/SVG und Button */
}

/* WICHTIG: Ersetze deine alten Hover-Selektoren */
/* statt: article:hover .star-*  /  .info-heading:hover .star-* */
/* neu:   .btn-wrapper:hover .star-*  (siehe oben) */

/* Optional: Twinkle-Animation im Idle beibehalten, aber beim Hover stoppen */
.btn-wrapper .star-1 {
  animation: twinkle-burst 0.8s infinite ease-in-out;
}
.btn-wrapper .star-2 {
  animation: twinkle-burst 0.5s infinite ease-in-out;
}
.btn-wrapper .star-3 {
  animation: twinkle-burst 0.7s infinite ease-in-out;
}

.button {
  border: none;
  border-radius: 33px;
  background-color: var(--prim);
  color: white;
  padding-left: 0.88vw;
  padding-right: 0.88vw;
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
  -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
  background-size: 200% 100%;
  font-size: 1.25rem;
  transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  background-image: linear-gradient(to right, var(--prim));
}
.button:hover,
.button:active,
.button {
}

.button-lg:hover {
  background-position: 100% 0;
  transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

#floating-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

/* Hauptbutton rund gestalten */
#floating-buttons .main-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 24px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(4px 8px 10px rgba(0, 0, 0, 0.6));
}

/* Container der Unterbuttons (positioniert über dem Hauptbutton) */
#floating-buttons .sub-btn-container {
  position: absolute;
  bottom: 70px; /* Abstand vom Hauptbutton */
  right: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Unterbuttons: Anfangszustand (unsichtbar und leicht nach unten versetzt) */
#floating-buttons .sub-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(66px);
  transition: opacity 0.4s ease, transform 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(4px 6px 8px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

/* Bei aktivem Zustand (Klasse "open") erscheinen die Unterbuttons */
#floating-buttons.open .sub-btn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.bodensee-container {
  position: sticky;
  top: 0;
  height: 100vh;
  max-width: 100vw;
  display: grid;
  place-items: center;
}

.bodensee-wrapper {
  height: 200vh;
}

#bodensee-path {
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
  opacity: 1;
  transition: none;
}

.bodensee-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center;
  opacity: 0;
  /* color: white; */
  font-size: 4vw;
  font-weight: bold;
  pointer-events: none;
  filter: drop-shadow(0 0 0 white);
  transition: filter 0.3s ease;
  text-shadow: none;
  transition: text-shadow 0.3s ease;
}

.bodensee-text.with-shadow {
  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white,
    1px 1px 0 white;
  -webkit-text-stroke-width: 30px;
  -webkit-text-stroke-color: white;
}

/* 
******************
Mouse Scroller
******************
 */
.scroll-downs {
  position: absolute;
  right: 0;
  bottom: 10%;
  left: 0;
  margin: auto;
  width: 34px;
  height: 55px;

  display: flex; /* Zentrierung innerhalb */
  align-items: center; /* vertikal */
  justify-content: center; /* horizontal */
}

.mousey {
  position: relative; /* wichtig für absolutes Positionieren */
  width: 3px;
  padding: 10px 15px;
  height: 35px;
  border: 2px solid #fff;
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;

  display: flex; /* Zentrierung im Gehäuse */
  align-items: flex-start; /* Start, weil Animation nach unten geht */
  justify-content: center;
}

.scroller {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
  animation-iteration-count: infinite;
}

@keyframes scroll {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(25px);
  }
}

@media (max-width: 776px) {
  html {
    scroll-padding-top: 18vmin;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    /* overflow-x: hidden !important; */
  }

  main {
    /* overflow-x: hidden; */
  }

  .overflow {
    overflow-x: hidden !important;
  }
  .navbar-brand {
    color: #98af90;
    font-weight: bold;
    margin-left: 0rem;
  }

  .burst-badge {
    width: 22vmin;
    font-size: 6vmin;
    top: -1 !important;
    left: 2 !important;
  }
  .star-1 {
    animation: twinkle-burst 0.8s infinite ease-in-out;
    top: -2;
    left: -2;
  }
  .star-2 {
    animation: twinkle-burst 0.5s infinite ease-in-out;
    top: 10;
    left: 12;
  }
  .star-3 {
    animation: twinkle-burst 0.7s infinite ease-in-out;
    top: 1;
    left: -8;
  }

  #hero img {
    padding-top: 0rem;
    width: 90%;
  }
  #map {
    width: 100% !important;
    max-width: 100% !important;
  }

  .draw-arrow {
    right: -2.3rem;
    bottom: 1.6rem;
  }

  .brand-image-rotate {
    left: unset;
    right: 1.6vw;
    top: 40vh;
  }

  .brand-image-rotate img {
    width: 33vmin;
    height: auto;
  }

  .contact-teaser {
    width: auto;
    margin-left: 0.9rem;
    margin-right: 0.9rem;
  }

  .contact-teaser h6 {
    line-height: 4.44rem;
    word-break: keep-all;
    font-size: 5rem;
  }
  #kontaktieren-sie-uns h2 span {
    font-size: 2.8rem !important;
  }

  footer h5 {
    color: var(--superLight);
    text-decoration: underline var(--prim) !important;
    text-underline-offset: 2px;
  }

  .footer-img {
    max-height: 40vmin;
  }

  .bodensee-text {
    font-size: 3rem;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100vw;
  }
  .pulse-core {
    fill: var(--prim, #98af90);
    stroke: white;
    stroke-width: 100; /* skaliert auch mit ViewBox */
    r: 17rem;
    fill: "#98af90";
  }
  .pulse-ring {
    fill: none;
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: 20;
    r: 0; /* wird per Animation animiert */
    animation: pulse-ring-small 2s infinite;
    transform-origin: center;
  }
}
@keyframes pulse-ring-small {
  0% {
    r: 0;
    opacity: 0.8;
  }
  70% {
    r: 3000; /* skaliert sinnvoll bei 50k Höhe */
    opacity: 0;
  }
  100% {
    r: 0;
    opacity: 0;
  }
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

:root {
  --hue: 120; /* change me */
  --bg: oklch(35% 0.3 var(--hue));
  --text: oklch(85% 0.1 var(--hue));
  --shadow: oklch(25% 0.2 var(--hue));
  --highlight: oklch(98% 0.05 var(--hue));
}

.highlighted-text-shadow {
  text-shadow:
      /* regular text-shadow */ 0 0.15ch 15px var(--shadow),
    /* text-shadow highlight */ 0 -2px 0 var(--highlight);
}
@media (max-width: 768px) {
  #background-video {
    stroke-width: 800;
  }

  .image-gradient::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0) 30%,
      rgba(0, 0, 0, 0.6) 50%,
      rgba(0, 0, 0, 1) 60%
    );
    transform: scaleY(1) scaleX(1.2); /* breiter ziehen */
    transform-origin: center;
    pointer-events: none;
  }
}
.ratio a:hover img {
  transform: scale(1.08);
  filter: brightness(1.05) contrast(1.1);
}
.ratio a img {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}