<style type="text/css">
/*Block-Darstellung f&uuml;r HTML5-Elemente im IE8 */
header,
nav,
footer {display: block;   }
 
html, body {
  max-width: 100%;
  overflow: -x;
  overflow-y: auto;
  margin: 0;
  padding: 0;
}
        /*******************************/
                /* ab hier Programmierung f&uuml;r Smarphones  */
@media screen and (max-width: 500px)
{
  body { background-color: #8F8F8F;
                                    }
a:link {color: white;}
a:hover {color: violet;}
a:visited {color: white;}


#wrapper {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    box-sizing: border-box;
    max-width: 100% !important; /* Ergänzt, um Ausbruch zu verhindern */
}
header {width: 100%;
        height: auto;
        background-color: #9d88d4;
        left: 0 !important;
        right: 0 !important;
        margin-bottom: 10px; 
        display: flex;
        flex-direction: column;
       align-items: center;
       text-align: center;
       justify-content: center;
       min-height: 120px;
       padding: 15px 5px;
       justify-content: center;
             }
header div {
    font-family: "Monotype corsiva", "Courgette", cursive;
    text-align: center;
  }
.header-titel { 
    font-size: 1.6rem !important;
    margin: 0; 
  }
  .header-subtitel{
    font-size: 1.2rem;
    margin: 5px 0;
  }
#content {width: 100% !important;
         margin-left: 0 !important;
         margin-right: 0 !important;
         left: 0 !important;
         right: 0 !important;
          height: auto;
          display:flex;
          flex-direction: column;
          align-items: center;
          background-color:#8F8F8F;
          margin-bottom: 5px;
        min-height: 50%;  
        padding: 10px 0;
        box-sizing: border-box;  
    font-family: sans-serif;  
    line-height: 1.4;
    color: white  ;
    text-align: center; 
     }
.slideshow-container {
  position: relative;
  width: 95%;
  height: auto;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  overflow: hidden; /* Versteckt nicht aktive Slides */
  box-shadow: 0px 0px 10px #8F8F8F;
}
.mySlides {
  display: none; /* Standardmäßig ausblenden */
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #DF00FF;
}
img {
 max-width: 100%;
 height: auto; /* Responsive Höhe */
 object-fit: contain;
}
/* Animation (optional) */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}
@keyframes fade {
  from {opacity: .4} to {opacity: 1}
}
.history-page 
{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between;
  padding: 15px;
  padding-bottom: 20px;
  gap: 10px;
}
.history-text 
{
  flex: none;
  text-align: center;
  color: white;
  font-family: sans-serif;
  line-height: 1.6;
  width: 100%;
  margin-bottom: 20px;
  padding: 0 20px;
  box-sizing: border-box;

}
.history-slider
{
  flex: none;
  height: 300px !important;
  margin: 0;
  width: 100%;
}


#carousel-slider {
  position: relative; /* Wichtig für die absolute Positionierung der Kinder */
  width: 100%;
  height: 350px;      /* Du musst eine feste Höhe angeben, da absolute Bilder keinen Platz einnehmen */
  min-height: 320px;
  margin: 5px auto;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-item.fly-in-img {
  position: absolute; /* Bilder liegen nun übereinander statt untereinander */
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-120%, -50%);
  transition: all 0.8s ease-in-out;         /* Oder deine gewünschte Breite */
  width:95%;              /*das Item schrumpft auf Bildergr */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto;
} 

/* Sichtbarer Zustand */
.slider-item.fly-in-img.active {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* Rausfliegen */
.slider-item.fly-in-img.exit {
  opacity: 0;
  transform: translate(150%, -50%);
}

.slider-item img {
  max-width: 100%;
  height: auto;  /* Erhält Proportion des Bildes*/
  border-radius: 8px;
  box-shadow: 0px 0px 10px #8F8F8F;
  object-fit: contain; /*Zeigt das Bild als Ganzes */
  display: block;   /* Verhindert Spalte unter dem Bild */
}

.slider-text {
    position: relative;
    bottom:  0;               /* FIX: Direkt an die Unterkante */
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6); 
    color: white;
    padding: 8px 10px;           /* Etwas mehr Luft für die größere Schrift */
    width: 100%;
    text-align: center;
    font-family: sans-serif;
    font-size: 0.7rem;      
    box-sizing: border-box;  /* FIX: Verhindert Überstehen rechts */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    pointer-events: none;  /* Verhindert überlappen des Textes */
  }
                                  /** Ende Definition Bilderkarussel **/

                     /* DEfinition für die Wanderkartenanzeige */
.tour-wrapper {
  padding: 20px 5%; /* 5% Abstand links und rechts */
}
.tour-grid {
    display: grid;
    /* Erstellt 3 Spalten, die sich bei Platzmangel automatisch anpassen */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 25px; /* Abstand zwischen den Karten */
    padding: 30px 0;
    font-family: sans-serif;
  }

  .tour-container {
    background: #f9f9f9;
    border-radius: 12px;
    overflow-x: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  
  }

  .tour-grid iframe {
    width: 100%;
    height: 450px;
    border: none;
    display: block;
  }

  .grid-title {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
  }
                                    /* bis hier definition f&uuml;r den letzten Schliff der Komootdarstellung */

.table-container {
    width: 100%;
    overflow-x: auto; /* Erzeugt horizontales Scrollen auf Handys */
    margin: 10px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

table {
    width: 100%;
    border-collapse: collapse; /* Bessere Darstellung der Rahmen */
    background-color: white;
    min-width: 400px; /* Verhindert zu starkes Quetschen der Spalten */
}

table th, table td {
    text-align: left;
    padding: 12px; /* Luft im Element */
    border-bottom: 1px solid #ddd; /* Linien zwischen den Zeilen */
}

table th {
    background-color: #f2f2f2;
    color: #333;
}
/* --- ENDE TABELLEN-DEFINITIONS --- */

nav {width: 100% !important;
     margin-right: 0 !important;
     margin-left: 0 !important;
     left: 0 !important;
     right: 0 !important;
     display: flex;
     flex-direction: column;
     align-items: center;
     background-color: #47638d;
     margin-bottom: 5px;
     padding: 10px 0;
     text-align: center;
     box-sizing: border-box;
       }
 nav a {
        width: 100%;
        text-align: center;
        font-size: 1.0rem;
        font-family: sans-serif;#
        padding: 0 15px;
      
  }
nav a:last-child {border-bottom: none;}

.sub-nav {
  width: 100%;
  background-color: #47638d;
  margin-bottom: 5px;
  padding: 10px;        /* Rundherum Padding für Luft zum Rand */
  display: flex;        /* Erlaubt Nebeneinanderstehen UND Umbruch */
  flex-direction: row; 
  flex-wrap: wrap;      /* Zentriert die Links als Gruppe */
  justify-content: center;    /* Zentriert die Links vertikal (falls sie unterschiedlich hoch sind) */
  align-items: center;       /* Der "schöne Abstand" ohne Margin-Gefrickel */
  gap: 15px 25px;           /* Erster Wert: Abstand oben/unten, Zweiter: links/rechts */
  box-sizing: border-box;
}
.sub-nav a {
  text-decoration: none;
  color: white;
  /* Optional: Verhindert, dass ein Wort allein umbricht */
  white-space: nowrap; 
}



footer {
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: auto;
        background-color: #9d88d4;
        margin-bottom: 5px;
        text-align: center; 
        font-size: 0.9rem; 
        padding: 5% 0;
        box-sizing: border-box;
                                       }
footer a {
  padding: 0 10px;
  font-size: 0.9rem;
}
                                      }

@media screen and (min-width: 501px)

{        /* ab hier beginnt Programmierung f&uuml;r PC u Laptop  */

body { background-color: #8F8F8F;
                                    } 
a:link {color: white;}
a:hover {color: violet;}
a:visited {color: white;}



#wrapper {width: 100%;
          margin: 0px auto;
          margin-top: 20px;
          background-color:  #f1f3ed;
          padding: 20px;
                            }

header {width: 100%;
        height: auto;
        background-color: #9d88d4;
        margin-bottom: 10px; 
        display: flex;
        flex-direction: column;
       align-items: center;
       text-align: center;
       justify-content: center;
}
header div {  
    font-family: "Monotype corsiva", "Courgette", cursive;
    text-align: center;
  }
.header-titel {

    font-size: 2.5rem !important; 
    margin:  5px 0
  }
  .header-subtitel{
    font-size: 1.8rem !important;
  }
                            /* min width Bereich 501 */
#content {width: 100%;
          height: auto;
          background-color: #8F8F8F;
          margin-bottom: 5px;
          min-height: 550px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         position: relative;
         clear: both;
         align-items: center;
         box-sizing: border-box;
         font-family: sans-serif;  
    line-height: 1.4;
    color: white  ;
    text-align: center; 
    
}
.slideshow-container {
  position: relative;
  width: 80%;
  height: auto;
  max-width: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  overflow: hidden; /* Versteckt nicht aktive Slides */
  box-shadow: 0px 0px 10px #8F8F8F;
}
.mySlides {
  display: none; /* Standardmäßig ausblenden */
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #8F8F8F;
}
img {
  object-fit: contain;
  max-width: 100%;
  height: auto; /* Responsive Höhe */
}
/* Animation (optional) */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}
@keyframes fade {
  from {opacity: .4} to {opacity: 1}
}
.history-page          /* für min width 501*/
{
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between;
  padding: 40px;
  gap: 30px;
}
.history-text 
{
  flex: 1;
  text-align: left;
  color: white;
  font-family: sans-serif;
  line-height: 1.6;
  margin-bottom: 15px;
}
.history-slider
{
  flex: 1;
  height: 400px !important;
  margin: 0 !important;
}
                /** ab hier beginnt Definition f&uuml;r Bilderkarussel
                    für min width 501**/
#carousel-slider {
  position: relative; /* Wichtig für die absolute Positionierung der Kinder */
  width: 95%;
  max-width: 1300px;
  height: 650px;      /* Du musst eine feste Höhe angeben, da absolute Bilder keinen Platz einnehmen */
  margin: 20px auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-item.fly-in-img {
  position: absolute; /* Bilder liegen nun übereinander statt untereinander */
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-150%, -50%);
  transition: all 0.8s ease-in-out;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Sichtbarer Zustand */
.slider-item.fly-in-img.active {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* Rausfliegen */
.slider-item.fly-in-img.exit {
  opacity: 0;
  transform: translate(150%, -50%);
}

.slider-item img {
  width: auto;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0px 0px 10px #8F8F8F;
  display: block;
  object-fit: contain;
}
.slider-text {
  position: relative;
  bottom: 0px;         /* Abstand von unten */
  left: 0;
  width: 100%;
  min-width: 300px;
  box-sizing: border-box; /*verhindert überstehen*/
  background: rgba(0, 0, 0, 0.5); /* Halbtransparenter Balken */
  color: white;
  padding: 10px 15px;
  text-align: center;
  font-family: sans-serif;
  font-size: 1.1rem;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  pointer-events: none;
}
                                  /** Ende Definition Bilderkarussel **/
                     
                                  /* DEfinition für die Wanderkartenanzeige */
             /* ab hier Definition letzter Schliff Komootdarstellung 
                  min width 501 */
.tour-wrapper {
  padding: 20px 2%; /* 5% Abstand links und rechts */
  width: 100%;
  box-sizing: border-box;
}
.tour-grid {
    display: grid;
    /* Erstellt 3 Spalten, die sich bei Platzmangel automatisch anpassen */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 25px; /* Abstand zwischen den Karten */
    padding: 30px 0;
    font-family: sans-serif;
    width: 100%;
    gap:20px;
  }

  .tour-container {
    background: #f9f9f9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  
  }

  .tour-grid iframe {
    width: 100%;
    height: 450px;
    border: none;
    display: block;
  }

  .grid-title {
    font-size: 3.0rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
  }
              /* bis hier definition f&uuml;r den letzten Schliff der Komootdarstellung */
              /*table für min width 501 */
.table-container {
    width: 100%;
    overflow-x: auto; /* Erzeugt horizontales Scrollen auf Handys */
    margin: 10px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

table {
    width: 100%;
    border-collapse: collapse; /* Bessere Darstellung der Rahmen */
    background-color: white;
    min-width: 400px; /* Verhindert zu starkes Quetschen der Spalten */
}

table th, table td {
    text-align: left;
    padding: 12px; /* Luft im Element */
    border-bottom: 1px solid #ddd; /* Linien zwischen den Zeilen */
}

table th {
    background-color: #f2f2f2;
    color: #333;
}
/* --- ENDE TABELLEN-DEFINITIONS --- */

                  /*nav für min width 501 */
nav {width: 100%;
     float: center;
     background-color: #47638d;
     margin-bottom: 5px;
     padding: 10px 0;
     text-align: center;
   }
                  /*sub nav für min width 501 */
    nav a {
        width: 100%;
        text-align: center;
        font-size: 1.2rem;
        font-family: sans-serif;
        padding: 0 20px;
  
  }


.sub-nav {width: 100%;
     float: center;
     background-color: #47638d;
     margin-bottom: 5px;
     padding: 10px 0;
     text-align: center;
}
.sub-nav a {
  width: 100%;
        text-align: center;
        font-size: 1.2rem;
        font-family: sans-serif;
        padding: 0 20px;
  
  /* Optional: Verhindert, dass ein Wort allein umbricht */
  white-space: nowrap; 
}
                    /*footer für min width 501 */
footer {
        width: 100%;
        height: auto;
        background-color: #9d88d4;
        margin-bottom: 5px;
        text-align: center;
        padding: 15px 0;
        clear: both;
                                         }
footer a {
  padding: 0 15px;
  font-size: 1.2rem;
}
                                        }

 
</style>