/* oswald-300 - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/oswald-v57-latin_latin-ext-300.eot');
  src: url('fonts/oswald-v57-latin_latin-ext-300.eot?#iefix') format('embedded-opentype'),
       url('fonts/oswald-v57-latin_latin-ext-300.woff2') format('woff2'),
       url('fonts/oswald-v57-latin_latin-ext-300.woff') format('woff'),
       url('fonts/oswald-v57-latin_latin-ext-300.ttf') format('truetype'),
       url('fonts/oswald-v57-latin_latin-ext-300.svg#Oswald') format('svg');
}

/* oswald-regular - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/oswald-v57-latin_latin-ext-regular.eot');
  src: url('fonts/oswald-v57-latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/oswald-v57-latin_latin-ext-regular.woff2') format('woff2'),
       url('fonts/oswald-v57-latin_latin-ext-regular.woff') format('woff'),
       url('fonts/oswald-v57-latin_latin-ext-regular.ttf') format('truetype'),
       url('fonts/oswald-v57-latin_latin-ext-regular.svg#Oswald') format('svg');
}

/* oswald-500 - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/oswald-v57-latin_latin-ext-500.eot');
  src: url('fonts/oswald-v57-latin_latin-ext-500.eot?#iefix') format('embedded-opentype'),
       url('fonts/oswald-v57-latin_latin-ext-500.woff2') format('woff2'),
       url('fonts/oswald-v57-latin_latin-ext-500.woff') format('woff'),
       url('fonts/oswald-v57-latin_latin-ext-500.ttf') format('truetype'),
       url('fonts/oswald-v57-latin_latin-ext-500.svg#Oswald') format('svg');
}

/* oswald-600 - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/oswald-v57-latin_latin-ext-600.eot');
  src: url('fonts/oswald-v57-latin_latin-ext-600.eot?#iefix') format('embedded-opentype'),
       url('fonts/oswald-v57-latin_latin-ext-600.woff2') format('woff2'),
       url('fonts/oswald-v57-latin_latin-ext-600.woff') format('woff'),
       url('fonts/oswald-v57-latin_latin-ext-600.ttf') format('truetype'),
       url('fonts/oswald-v57-latin_latin-ext-600.svg#Oswald') format('svg');
}

/* noto-sans-regular - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/noto-sans-v42-latin_latin-ext-regular.eot');
  src: url('fonts/noto-sans-v42-latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/noto-sans-v42-latin_latin-ext-regular.woff2') format('woff2'),
       url('fonts/noto-sans-v42-latin_latin-ext-regular.woff') format('woff'),
       url('fonts/noto-sans-v42-latin_latin-ext-regular.ttf') format('truetype'),
       url('fonts/noto-sans-v42-latin_latin-ext-regular.svg#NotoSans') format('svg');
}

/* noto-sans-600 - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/noto-sans-v42-latin_latin-ext-600.eot');
  src: url('fonts/noto-sans-v42-latin_latin-ext-600.eot?#iefix') format('embedded-opentype'),
       url('fonts/noto-sans-v42-latin_latin-ext-600.woff2') format('woff2'),
       url('fonts/noto-sans-v42-latin_latin-ext-600.woff') format('woff'),
       url('fonts/noto-sans-v42-latin_latin-ext-600.ttf') format('truetype'),
       url('fonts/noto-sans-v42-latin_latin-ext-600.svg#NotoSans') format('svg');
}

* {
  box-sizing: border-box;
  border-radius: 6px;
  line-height: 1.3;
}

html {
  font-family: 'Noto Sans', sans-serif;
  background-color: #f4e9ca;
  background-image: url('bgimus.jpg');
  background-size: 100% auto;
}

span[lang="de"] {
  font-family: 'Noto Sans', sans-serif;
}

html::before {
  content: url("bgimus.jpg");
  display: none;
}

.textblack {
  color: #000000;
}

.textwhite, .rmenu a, .lmenu a, .smallmenu a, button {
  color: #ffffff;
}


.brightgreenback, .header, .lmenu li, .rmenu li, .footer, .smallmenu li, button {
  background-color: #4d4844;
}

.darkgreenback, .lmenu li:hover, .rmenu li:hover, .smallmenu li:hover, button:hover, #map-consent button:hover, .privacy-overlay button:hover {
  background-color: #6b4898;
  color:#ffffff;
}

.hoverrecol:hover {
  background-color: #6b4898;
  color:#ffffff;
  padding: 5px 5px;
}

.header {
  margin-left: 15px;
  margin-right: 15px;
  padding: 1px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

.lmenu ul, .rmenu ul, .smallmenu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.smallmenu ul {
/*  background-color: #000000; */
}

.lmenu li, .rmenu li, button {
  margin-bottom: 7px;
  padding: 8px;
}

.smallmenu li {
  margin-bottom: 1px;
  padding: 6px;
  border: none;
  border-radius: 6px;
}

.lmenu li, .smallmenu li {
  margin-right: auto;
  max-width: 15em;
}

.rmenu li {
  max-width: 100%;
}

.lmenu a, .rmenu a, .smallmenu a, button {
  text-decoration: none;
  display: block;
  cursor: pointer;
  }

button {
  font-size:16px;
  width: 80%;
  margin-left:3%;
  border: none;
}

.footer {
  font-size: 12px;
  color:#fff;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom:0;
  padding: 12px;
}

[class*="col-"] {
  width: 100%;
  float: left;
  padding: 7px 15px 15px 15px;
}

h1,
h2,
h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
}

h1 {
  margin: 8px 0 10px 0;
  font-size: 5vw;
  color: #fff;
}

h2 {
  margin: 0 1% 12px 1%;
}

h3, p, .intable {
  margin: 18px 1% 12px 3.5%;
}

h1, h2, h3, p {
  hyphens: auto;
}

img {
  display: block;
  height: auto;
  margin: 0 2% 3px 6%;
  padding: 0;
  width: 92%;
}

figure {
  border: none;
  padding: 4px;
  margin: 0 2% 4px 6%;
  width: 92%;
}

figure img {
  width:100%;
  margin:0;
  border: none;
}

figcaption {
  margin: 0 2% 0 6%;
  font-style: italic;
  font-weight: 400;
  padding: 4px;
  text-align: center;
}

hr { margin: 20px 0 20px 0;}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.center, .header, .footer, .lmenu li, .rmenu li, .smallmenu li, button {
  text-align: center;
}

.right {
  text-align:right;
}

.left, th {
  text-align:left;
  font-weight:400;
}
.shadow, img, .rmenu li, .lmenu li, .smallmenu li, .header, .footer, .titleimage-wrapper, .tristanimage-wrapper, .choirimage-wrapper, .video-container, #map-container, button  {
              /* h-offset v-offset blur spread rgba-color */
  box-shadow: 2px 2px  9px 0px rgba(0,0,0,0.10),
              2px 2px  6px 0px rgba(0,0,0,0.20),
              2px 2px  3px 0px rgba(0,0,0,0.30);

}


.flags {
  margin: 4vw auto;
  display: flex;
  justify-content: center;
  display: -ms-flexbox;
  -ms-justify-content: center;
  gap: 1em;
}

.flags a {
  display: block;
  flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  height: 2.0em;
  min-height: 1.5em;
  width: auto;
}

.flag-container {
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
}

.ratio-5-3 {
  /* width = 5 / 3 * 2.5em (height) = 4.17em */
  width: 4.17em;
}

.ratio-2-1 {
  /* with = 2 / 1 * 2.5em (height) = 5.00em */
  width: 5.00em;
}

.flag {
  position: static;
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.titleimage-wrapper {
  width: 100%;
  margin: 1em auto 0 auto;
  position: relative;
  height: 0;
  padding-bottom: 141.5%;
  overflow: hidden;
}

.choirimage-wrapper {
  width: 100%;
  margin: 1em auto 0 auto;
  position: relative;
  height: 0;
  padding-bottom: 66.621%;
  overflow: hidden;
}

.tristanimage-wrapper {
  width: 100%;
  margin: 1em auto 0 auto;
  position: relative;
  height: 0;
  padding-bottom: 89.835%;
  overflow: hidden;
}

.titleimage, .choirimage, .tristanimage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
}

.gmap {
  border:0;
  margin-left:6%;
  width:92%;
  height:50vmax;
  max-height:500px;
  display:none;
}

.hxwrap {
  max-width:50em;
  margin-left:auto;
  margin-right:auto;
}

.hamicon {
  box-shadow:none;
  display: none;
  height:3em;
  margin:.65em auto auto .25em;
  padding:0;
  position:fixed;
  left: 0;
  top: 0;
  width:auto;
  z-index: 15;
}

.hamburger-btn {
  border: none;
  padding: 0;
  background-color: transparent;
  box-sizing: border-box;
  box-shadow: none;
  width: 0;
}

.upicon {
  box-shadow:none;
  display: block;
  height:3em;
  margin:0.5em;
  margin:auto 0.65em .25em auto;
  padding:0;
  position:fixed;
  right: 0;
  bottom: 0;
  width:auto;
  z-index: 15;
}

.smallmenu {
  display: none;
  margin:0em;
  padding:0;
  position:fixed;
  left: 0;
  top: 0;
  z-index: 9999;
}

.vidcom {
  margin: 9px 2% 4px 7%;
}

@media screen and (max-width: 599px) {
  .lmenu {
    display: none;
  }
  .upicon {
    display: block;
  }
}

@media only screen and (min-width: 600px) {
  .col-s-l  {
    width: 25.00%;
  }
  .col-s-m  {
    width: 75.00%;
  }
  .col-s-r  {
    margin-left:25%;
    width: 75.00%;
  }
 .rmenu li {
    margin-left: auto;
    margin-right: 0;
  }
  .upicon {
    display: none;
  }
}

@media only screen and (min-width: 750px) {
  .col-s-l  {
    width: 20.00%;
  }
  .col-s-m  {
    width: 80.00%;
  }
  .col-s-r  {
    margin-left:20%;
    width: 80.00%;
  }
}

@media only screen and (min-width: 900px) {
  .col-l  {
    width: 16.7%;
  }
  .col-m  {
    width: 61.0%;
  }
  .col-r  {
    margin-left:0%;
    width: 22.30%;
  }
  .rmenu li {
    max-width: 15em;
  }
  h1 {
    margin: 8px 0 10px 0;
    font-size: 45px;
  }
  .flags {
    margin:27px auto 27px auto;
  }
}

@media only screen and (min-width: 1200px) {
  .col-l  {
    width: 20%;
  }
  .col-m  {
    width: 60%;
  }
  .col-r  {
    margin-left:0%;
    width: 20%;
  }
  .lmenu li, .rmenu li {
    max-width: 20em;
  }
}

.video-container {
  border: none;
  padding: 4px;
  margin: 0 2% 4px 6%;
  width: 92%;
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  box-sizing: border-box;
}
/* Positionierung des iFrames */
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#map-container {
  border: none;
  margin: 4px 2% 8px 6%;
  width: 92%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  height: 0;
  padding-bottom: 60%;
}

#map-preview {
  position: absolute;
  margin: 0 0 0 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

#map-consent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.33);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  z-index: 10;
}


.privacy-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333; /* Dunkler Hintergrund */
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  z-index: 10; /* Stellt sicher, dass das Overlay über dem leeren Platzhalter liegt */
  background-size: cover; /* Bild füllt den gesamten Bereich aus */
  background-position: center center; /* Bild zentrieren */
  background-repeat: no-repeat; /* Bild nicht wiederholen */
  /* Dunkles Overlay über dem Hintergrundbild für bessere Lesbarkeit */
  background-color: rgba(0, 0, 0, 0.33); /* Schwarze Schicht */
  background-blend-mode: multiply; /* Blendet die Farbe mit dem Bild */
  color: #fff; /* Textfarbe auf weiß setzen */
}

#map-consent p, .privacy-overlay p {
  /* Stil für den Text im Overlay */
  line-height: 1.1;
  text-shadow: 0px 0px 2px rgba(0,0,0,1); /* Shadow für bessere Lesbarkeit auf dem Bild */
  color: #ffffff;
  margin-bottom: 4%;
}

#map-consent button, .privacy-overlay button {
  margin-top: 0px;
  padding: 2.5% 20px;
  cursor: pointer;
  background-color: #930000;
  color: white;
  border: none;
  text-shadow: 0px 0px 2px rgba(0,0,0,1); /* Shadow für bessere Lesbarkeit auf dem Bild */
}


/* Globale Stylings für h2, p, .intable (übernommen aus Ihrem Code) */
h2 {
  margin: 0 1% 12px 1%; /* Behält die Überschrift linksbündig */
}

/* * NEUER TABLE-WRAPPER CSS
 * Zentriert die Tabelle und steuert die Länge der horizontalen Linien
 */
.table-wrapper {
    /* Setzt die maximale Breite, um die Linien zu "kürzen" */
    max-width: 400px;

    /* ZENTRIERUNG: Setzt den linken und rechten Rand automatisch */
    margin-left: auto;
    margin-right: auto;

    /* Fügt den gewünschten vertikalen Abstand hinzu */
    margin-bottom: 12px;
}

/* Table-Styling für Barrierefreiheit und Ausrichtung */
.intable {
    border-collapse: collapse;
    border: none;
    width: 100%; /* Stellt sicher, dass die Tabelle die volle Breite des Wrappers nutzt */
    margin: 0;
}

/* 1. Vertikale Ausrichtung oben und Linien (auf Zellen angewendet) */
.intable th,
.intable td {
    vertical-align: top;
    padding: 8px 5px;

    /* Horizontale Linie auf die Zellen anwenden */
    border-bottom: 1px solid #ccc;
}

/* 2.1 Vertikale Trennlinie (Spalte 1) */
.intable th.right {
    border-right: 1px solid #ccc;
    padding-right: 15px;
}

.intable tr:last-child th,
.intable tr:last-child td {
    border-bottom: none;
}

/* Focus indicators */
.lmenu a:focus, .rmenu a:focus, .smallmenu a:focus, button:focus, .flags a:focus,
a:focus {
  outline: 4px solid #00FFFF;
  outline-offset: 2px;
  box-shadow: 0 0 5px rgba(0, 255, 255, 0.7);
}

/* Abdunklung der Flaggen beim Hover */
.flags a:hover .flag {
  filter: brightness(110%);
  transition: filter 0.1s ease-in-out;
  transform: scale(1.20);
}