body {
    margin: 0px;
}

html,
body {
    height:100%;
}

body {
    background-color: #dbf3ff;
    color: #02335d;
    font-family: Open Sans, Helvetica, Arial, sans-serif;
}


.primary-color {
	background-color: #02335d;
}

.navbar {
    height: 15vh;
}
.container {
    float: right;
    height: 90%;
}

.logo {
    max-height: 100%;
    padding: 5px 15px 5px 0px;
}
.filter-svg{
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(194deg) brightness(106%) contrast(101%);
    /* via: https://isotropic.co/tool/hex-color-to-css-filter/ */
}

.info {
    width: 100%;
}
.info-content {
 	min-width: 50%;
}

.info-image {
	display: flex;
	justify-content: center;
	max-width: 50%;
	overflow: hidden;
    	height: 85vh;
}

.info-image-left {
	float: left;
}

.info-image-right {
	float: right;
}

.info-full {
	width: 100% !important;
    	max-width: 100% !important;
	font-size: 38px;
}

.info-full td{
	padding-right: 88px;
}

.info-left,
.info-right {
    display: block;
    position:relative;
    overflow: hidden;
    height: 85vh;
}

.info-full {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/*
.info-full img {
    margin: auto;
}*/

.info-image img {
    display: block;
    height: 100%;
    max-height: calc(100vh - 15vh);
}

.info-content,
.weather-container {
    font-size: xx-large;
}

.event-left {
    width: 40vw;
    display: block;
    position: relative;
    float: left;
}

.event-image {
    padding: 25px 0 0 25px;
}

.event-image img {
    width: 100%;
}

.event-right {
    width: 60vw;
    height: 100%;
}

.event-right,
.event-info,
.event-heading,
.event-content-without-qr,
.event-content {
    display: block;
    position: relative;
    float: left;
    font-size: xx-large;

}

.event-heading,
.event-content-without-qr,
.event-content {
    padding: 0 2vw 0 3vw;
    width: calc(100% - 5vw);
}

.event-content-without-qr {
    margin-top: 5vh;
}

.event-heading h1 {
    /* text-align: center; */
    margin-bottom: 1vh;
    word-wrap: break-word;
}

.event-heading-left{
    width: 70%;
    float: left;
}

.event-icon {
    display: block;
    position: relative;
    float: left;
    min-width: 35%;
    margin-right: 2vw;
}

.event-icon img{
    filter: brightness(0) saturate(100%) invert(15%) sepia(21%) saturate(5226%) hue-rotate(185deg) brightness(95%) contrast(99%);
    height: 5vh;
    margin-bottom: -1vh;
}

.eventlist {
    display: block;
    position: relative;
    float: left;
    font-size: xx-large;
    width: 100vw;
}

.eventlist-heading,
.eventlist-content {
    padding: 0 2% 0 2%;
}

.eventlist-content table {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 2px;
}

.eventlist-content tr {
    transition: background 0.2s ease-in;
}

.eventlist-content tr:nth-child(even) {
    background: lightblue;
}

.eventlist-content tr:nth-child(2) {
    background: lightblue;
}

.eventlist-content th {
    margin: 2px;
    border-bottom: 2px solid;
    text-align: left;
}

.eventlist-content td {
    padding-top: 5px;
}

.event-column {
    width: 33%;
    padding-left: 1vw;
}

.location-column {
    width: 33%;
    padding-left: 1vw;
}

.date-column {
    width: 10%;
}

.time-column {
    width: 15%;
    padding-left: 1vw;
}

.slideshow-container {
    position: relative;
    width: 100vw;  /* Volle Breite des Viewports */
    height: 100vh; /* Volle Höhe des Viewports */
    overflow: hidden; /* Scrollbalken verstecken */
    max-width: 100vw;
    margin: auto;
    /* height: calc(100vh - 15vh); */
}

.mySlides {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    transition: width 2s, height 4s;
}

#drohnenvideoHerten {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: -1; /* Video im Hintergrund, falls andere Inhalte darüber liegen sollen */
}

.fade {
    animation-name: fade;
    animation-duration: 2.5s;
}
  
@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

.content-text {
    padding: 0px 25px 0px 25px;
}

.content-heading {
    margin:auto;
}

.event-qr{
    float: right;
    /* position: fixed;
    bottom: 2vh;
    right: 1vw; */
}

.event-qr img{
    width: 15vw;
    height: inherit;
}

/* In Ihrer Datei style-herten.css hinzufügen oder anpassen */

.readmore-right {
    /*float: right;      /* Lässt den QR-Code nach rechts schweben */
    /*margin-left: 2%; /* Abstand zwischen QR-Code und dem Text links davon */
    /*margin-bottom: 2%; /* Abstand zwischen QR-Code und dem Text darunter */
    /*width: 10vw;      /* Feste Breite für den QR-Code-Bereich (anpassen) */
    /*height: auto;      /* Höhe automatisch anpassen, um Proportionen zu wahren */
    /* Remove any position: fixed, bottom, right, z-index properties here if they still exist from previous attempts */
}

.readmore-right img {
    /*max-width: 100%;
    /*height: auto; /* Stellt sicher, dass das Bild innerhalb des Containers skaliert wird */
    /*display: block; /* Entfernt zusätzlichen Platz unter dem Bild */
}

/* Optional: Um sicherzustellen, dass nichts unter den floatenenden QR-Code rutscht,
   wenn nach dem QR-Code z.B. andere Elemente folgen, die nicht umfließen sollen.
   Dies ist meist für Footer oder nachfolgende Überschriften relevant. */
.content-text::after {
    content: "";
    display: table;
    clear: both;
}

.readmore-right{
    position:absolute; 
    bottom:25px; 
    right:25px;
    width:10vw;  
}

/* --- Anpassung an die dynamische App-Struktur (app.js/templates.js) --- */
#slideshow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
}

/* Inhalt der Slides soll unter der festen Navbar beginnen */
.mySlides {
    padding-top: 15vh;
    box-sizing: border-box;
    background: #dbf3ff;
    color: #02335d;
}

/* Logo als Pause-Schalter */
#app-logo {
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

#app-logo.paused {
    box-shadow: 0 0 0 4px #ff6b6b;
    border-radius: 4px;
}