/* Schriftart einbinden.
   T18: Die Datei ist eine OTF; hier stand vorher format("truetype"). Browser waren
   nachsichtig und haben sie trotzdem geladen, richtig war die Angabe nie.
   font-display: swap zeigt waehrend des Ladens die Ersatzschrift an, statt den Text
   unsichtbar zu lassen. */
@font-face {
  font-family: "own_font";
  src: url(../fonts/glacial-indifference.regular.otf) format("opentype");
  font-display: swap;
}

/* Platz fuer die Scrolleiste immer freihalten.
   Ohne diese Angabe ist eine Seite ohne Scrolleiste rund 15 Pixel breiter als die
   uebrigen; der gesamte Seiteninhalt sitzt dort etwa acht Pixel weiter rechts und
   springt beim Seitenwechsel. Am deutlichsten faellt das bei der Grafik oben auf, die
   ueber den Rand des Kastens ragt. Am 21.09.2026 im Edge beobachtet, gemessen wurde der
   Unterschied bei 1440 Pixel Fensterbreite: 1440 gegenueber 1425 sichtbarer Breite. */
html {
  scrollbar-gutter: stable;
}

/* Globale Schrift und Farbe */
* {
  font-family: "own_font", sans-serif;
  color: #4b7a74;
}

/* Typografie */
p, h1, h2, h3, h4, h5, h6 {
  font-family: "own_font";
  font-size: x-large;
  color: inherit;
}


/* Formulare & Buttons */
.uk-form-label,
.uk-button-default,
.uk-input,
.uk-select,
.uk-input::placeholder,
.uk-textarea,
.uk-textarea::placeholder {
  color: #4b7a74;
}

/* Box Styling */
.box {
  background-color: #ffffffcc;
  text-align: center;
  border-radius: 20px;
  max-width: 75%;
  margin: 5% auto 1%;
  border: 1px solid #c7c7c7;
}

/* Bildpositionierungen */
#imgwrapper {
  position: absolute;
  top: 0;
  width: 200px;
  height: 200px;
}

.top-image-1 {
  position: absolute;
  top: -15%;
  left: 5%;
  width: 95%;
  margin: auto;
}

.top-image-2 {
  position: absolute;
  transform: translate(-50%, -60%);
  min-width: 55%;
  max-width: 25%;
  margin: auto;
}

/* Die width-Attribute der Bilder wirken wie eine feste Breite; greift dann max-height,
   wird nur die Hoehe gestaucht. width: auto laesst den Browser das Verhaeltnis halten. */
.image-about-mid {
  width: auto;
  max-width: 20vw;
  max-height: 50vh;
}

/* Footer Images */
.footer-left-image {
  position: fixed;
  bottom: -6%;
  left: -5%;
  width: auto;
  max-width: 30vw;
  max-height: 50vh;
  z-index: 10;
  margin: auto;
}

@media (max-width: 1200px) {
  .footer-left-image {
    bottom: -4%;
    left: -4%;
    max-width: 22vw;
    max-height: 42vh;
  }
}

@media (max-width: 720px) {
  .footer-left-image {
    bottom: -3%;
    max-width: 18vw;
    max-height: 34vh;
  }
}

.footer-right-image {
  position: fixed;
  bottom: 0;
  right: 0;
  width: auto;
  max-width: 40vw;
  max-height: 40vh;
  z-index: -1;
  margin: auto;
}

/* Logo */
.logo {
  position: relative;
  width: 250px;
  margin: 0 auto;
}

/* Navigation */
nav {
  float: right;
}

nav a {
  margin: 0 15px;
  text-decoration: none;
  font-size: 22px;
  color: #4b7a74;
}

/* Slideshow */
.slideshow-images {
  max-width: 100vw;
  max-height: 80vh;
}

/* Footer */
.footer {
  text-align: center;
  color: #4b7a74;
  padding-bottom: 18px;
}

.footer a {
  color: inherit;
}

.footer p,
.footer a {
  font-size: large;
}

.footer p {
  margin-bottom: 8px;
}

/* Instagram Icon */
.insta-icon {
  display: inline-block;
  margin-top: 4px;
}

.insta-icon img {
  width: 24px;
  vertical-align: middle;
}

/* Hintergrundbild */
.bg {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.bg img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}

/* Individuelle Listen */
.custom-list {
  list-style: none;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 20px;
  padding: 0;
  text-align: left;
}

.custom-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  font-size: large;
  color: #4b7a74;
}

.custom-list .package-item-compact span {
  flex: 1;
  min-width: 0;
}

br.package-desktop-break {
  display: none;
}

@media (min-width: 1201px) {
  br.package-desktop-break {
    display: inline;
  }
}

.custom-list img {
  width: 50px;
  height: 30px;
  object-fit: contain;
  margin-top: 3px;
}

.uk-subnav > * > a {
  font-family: "own_font", sans-serif;
  color: #4b7a74 !important;
  font-size: x-large;
}

.uk-subnav > .uk-active > a {
  font-size: 1rem; /* oder z. B. 22px */
  background-color: rgba(75, 122, 116, 0);
  color: #4b7a74 !important;
  border-radius: 0px;
  padding: 8px 16px;
  text-decoration: underline;
  font-weight: bold;
}

.uk-subnav {
  background-color: rgba(255, 255, 255, 0.8); /* leicht weiß-transparent */
  padding: 10px 20px;
  border: 1px solid rgba(75, 122, 116, 0.2); /* zarter Rahmen in deiner Hauptfarbe */
  border-radius: 12px;
  margin-bottom: 20px;
  justify-content: center; /* zentriert die Tabs */
  gap: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);

}

nav a.active {
  text-decoration: underline;
  font-weight: bold;
}

/* T06: Fangfeld des Kontaktformulars. Bewusst nicht display:none, weil einfache
   Automaten genau darauf pruefen; stattdessen aus dem sichtbaren Bereich geschoben. */
.kontakt-fangfeld {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* T19/T20: Ueberschrift, die nur vorgelesen und von Suchprogrammen gelesen wird. Der
   Entwurf dieser Seiten kommt ohne sichtbare Ueberschrift aus; display:none waere hier
   falsch, weil der Text dann auch nicht vorgelesen wuerde. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* T20: UIkit setzt fuer .uk-text-meta ein helles Grau (#999). Gemessen gegen die
   hellste Stelle der Box ergibt das 2,77:1 und verfehlt die geforderten 4,5:1. Die
   Hausfarbe erreicht an derselben Stelle 4,71:1 und passt zum uebrigen Text. */
.uk-text-meta {
  color: #4b7a74;
}

/* Schmale Bildschirme, am 26.09.2026 bei 320/360/390 px gemessen: Der Kasten nahm nur
   75 % der Breite ein und der Fliesstext stand in 24 px auf rund 240 px Spaltenbreite;
   die Datenschutzerklaerung wurde dadurch ueber 38.000 px lang, und ein langes Wort
   ragte seitlich hinaus. Der Bildwechsel war bei 7:3 nur rund 116 px hoch. Alles hier
   gilt ausschliesslich bis 720 px; die Desktopdarstellung bleibt unveraendert. */
@media (max-width: 720px) {
  .box {
    max-width: 92%;
  }

  .box p {
    font-size: 19px;
  }

  .box p,
  .box li,
  .box h1, .box h2, .box h3, .box h4, .box h5, .box h6 {
    hyphens: auto;
    overflow-wrap: break-word;
  }

  .rechtstext {
    text-align: left;
  }

  .slideshow-image {
    min-height: 220px;
  }

  /* Im breiteren Kasten laege die fixierte Ranke sonst ueber dem Text. */
  .footer-left-image {
    z-index: -1;
  }
}

/* Unterzeile unter dem Logo, nur auf der Startseite. .box davor, weil .box p im Block
   fuer schmale Bildschirme sonst 19 px setzt. Mobil entfallen die Seitenlinien, damit
   die Zeile bis 320 px Breite nicht umbricht (26.09.2026 gemessen). */
.box .unterzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: -14px 0 22px;
  font-size: 13px;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.box .unterzeile::before,
.box .unterzeile::after {
  content: "";
  width: 36px;
  height: 1px;
  background: rgba(75, 122, 116, .45);
}

@media (max-width: 720px) {
  .box .unterzeile {
    margin: -10px 0 16px;
    font-size: 11px;
    letter-spacing: .14em;
  }

  .box .unterzeile::before,
  .box .unterzeile::after {
    display: none;
  }
}

@media (max-width: 350px) {
  .box .unterzeile {
    font-size: 10px;
    letter-spacing: .1em;
  }
}

/* T20: Wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt keine
   Animationen. Den Bildwechsel der Startseite haelt zusaetzlich js/site.js an;
   CSS allein kann ihn nicht abschalten. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}