/* Zum Testen 
        * {
             box-sizing: border-box;
}*/
        /*   --------------- NEU Body als Flex-Container */
   html, body {
            display: flex;
            justify-content: center; /* Zentriert horizontal */
/*            align-items: center;    Zentriert vertikal */
            min-height: 100vh;     /* Voller Viewport */
            margin: 0;
            background-color: #fff; /* Hintergrundfarbe */
            font-family: Verdana, Arial, sans-serif;
            height: 100%; /* Fast Vollbildhöhe */
            padding: 4px 0;

            /* ----- */
    box-sizing: border-box;
    align-items: center; /* Vertikale Zentrierung aktivieren */
    min-height: 100vh; /* Viewport-Höhe nutzen */

    }

/* Haupt-Container (direktes Kind von body) */
        /* Flex-Container */
    .container {
        display: flex;
        /*   flex-wrap: wrap;     Menü-Elemente brechen um */
        flex-direction: column; /* Elemente untereinander */
  /*      width: 96%;             /* Vorschlag 4.6.  */

        height:98%;
        max-width: 850px;       /* Maximale Breite */
        background-color: #c6ebfc; /* Hintergrundfarbe */

        padding: 0.5em;  /* 20px */
        border: 1px solid black;    /* ??? Wirkung  */
        box-shadow: 5px 5px 10px #58577f;

        text-align: center;
        border-radius: 0.5em;
        font-family: Verdana, Arial, sans-serif;

/*  vvvvvv  hinzu 4.6. wg. 2. Scrollbalken  im container */
        width: 96%;            /* Statt 100vh */
        margin: 0 auto;        /* Für horizontale Zentrierung */
        overflow-x: hidden;
        overflow-y: auto;

        flex: 0 1 auto; /* Nicht wachsen, aber schrumpfen dürfen */
        overflow: hidden; /* Scrollen verhindern */
/**/ 
        width: 100%;           /* Ganz wichtig: Erzwinge die Breite */
        flex-shrink: 0;        /* Verhindert das "Zusammenschnurren" */

    }  /*container */


    @font-face {
        font-family: 'urkundenschriftart_gochihand';
        /* WOFF2 zuerst für bessere Performance/Komprimierung */
        src: url('inc/fonts/urkundenschriftart_gochihand.woff2') format('woff2');       /* So klappt es !!  */
/*        src: url('fonts/urkundenschriftart_gochihand.woff') format('woff'); */
        font-weight: normal;
        font-style: normal;
    }

    .menu-text { /* Text in Hamburger-Menü weiter untern .menu-toggle .menu-text */
        font-family: 'urkundenschriftart_gochihand', Verdana, Arial, sans-serif;
        text-align: center;
        font-size: 32px;
        color: #86be16;
    }
        /* Flex-Container */
   
    #footer a {
        background-color: #5974a9;
        margin: 2px;
        margin-top:3px;
        color: white;
        text-decoration: none; /* Entfernt die standardmäßige Unterstreichung */
        }

    #footer a:hover {
            text-decoration: underline; /* Fügt die Unterstreichung beim Hover hinzu */
        }

    #footer {
            background-color: #5974a9;
            color: white;
            font-size: 14px;
        /*    float: center; */
            display: inline-block;
            margin: 2px;
            margin-top:3px;
            padding: 0.2em;
            border-radius: 0  0 0.5rem 0.5rem;
        }

        /* Horizontale Navigationsleiste */
    .navbar {
            display: none; /* Wichtig ... none standardmäßig ausblenden */
            justify-content: space-between;     /*    justify-content: right; */
            flex-direction: row; /* row !!!  */
            background-color: #5974a9;
       /*     font-size: 6px;
       /*     position: absolute; */ /* Position unterhalb des Headers */
            top: 50px;  /* Wichtig! Platz für den Header und Hamburger Menü*/
            left: 0px;
            width: 100%;
            padding: 0px 0;
            transition: all 0.3s ease-in-out;       /* */
   /*         align-items: center; */
            user-select: none;
            z-index: 2000;
            border-radius: 0.5rem 0.5rem 0 0;
            /* zum Testen */
/*        width: 100% !important;
    min-width: 100vw !important;
*/
        }
    .navbar.show {
            display: flex; /* Navigation einblenden */
        }

    .navbar .logo {
            height: 50px;
            max-height: 80px; /* Begrenzte Höhe für das Logo */
            width: auto;
 /*           display: inline-block;
            vertical-align: top;
            height: 50px;
            margin-right: 10px;
            margin-top: 30px;
            float: left;  */
        }

        /* Navigation */
    .navbar .nav-links {
            display: flex; /* Flex-Container für Links */
            flex-wrap: wrap; /* Elemente sollen nicht umbrechen ... jetzt doch ....*/
            gap: 20px; /* Abstand zwischen Links */
            padding: 10px 2px;
        }

    .navbar .nav-links a {
            color: white;
            text-decoration: none;
            padding: 2px 2px 2px;
            transition: background-color 0.3s ease;
            flex-wrap: nowrap;  /* Elemente dürfen nicht umbrechen */
            z-index: 10;
        }

    .navbar .nav-links a:hover {
            background-color: #575757;
        }

    .navbar .nav-links ul {
            display: flex;
            flex-wrap: wrap; /* Elemente dürfen umbrechen */
            list-style: none;
            margin: 0;
            padding: 10px;      /* */
            gap: 0px;
            z-index: 1000;
            transition: all 0.3s ease-in-out;       /* */
        }

    .navbar .nav-links ul li {
            position: relative;
            margin: 0.4rem;
        }

    /* Untermenüs Styling */
    .navbar .nav-links ul li ul {
            display: none; /* Untermenü versteckt */
            position: absolute;
            top: 100%; /* Unterhalb des Elternmenüs */
            left: 0;
            background-color: #808af5;       /* #60a0d5;*/
  /*          color: red;       */
            padding: 4px;
            list-style: none;
            min-width: 60px;
            border-radius: 1px;
            box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
        }

        /* Optional: Anpassen der Scrollleiste für mobile Nutzer */

    .navbar ul li a { /*  Einträge in navbar und pulldownmenüs  */
            color: #fff;
            text-decoration: none;
            font-size: 1em; /* 18    1.2em */
            padding: 0.2em;  /* 8*/
            transition: background-color 0.3s;
        }

    .navbar .nav-links ul li a:hover {
            background-color:#1e28b4;              /*  #4784b0;*/
            border-radius: 0.1rem;
        }

    .navbar .ul li ul li {
            margin: 0;     /* 0 */
        }

    /* Pulldownmenü  */
    .navbar .nav-links ul li ul li a {
            color: #fff; /*fff  */
            padding: 2px;
            display: block;               /*block;*/
        }

    .navbar .nav-links ul li ul li a:hover {
            background-color: rgb(132, 180, 229);  /* #555 */
        }

    /* Untermenü anzeigen bei Hover */
    .navbar .nav-links ul li:hover > ul {
            display: block;
        }

    /* Flex-Item für den iframe */
    .content {
            flex: 1;
            display: flex;
            font-family: Verdana, Arial, sans-serif;
            overflow: auto;     /*  4.6.25 korrigiert (vorher scroll  */
        }

    iframe {
            border: none; /* Entfernt sichtbare Rahmen */
            padding: 0;
            margin: 0;
            display: block; /* Entfernt eventuelles Inline-Block-Spacing */
            width: 100%;
        }


/* vvvvvvvvvv  für kleine viewports <=768px  vvvv   */
.menu-toggle_alt {
    /*vvvvvvvvvv neu vvvvvvvvvvvvvvvv */
    /* Grundlegendes Styling für den Button */
     display: flex; /* Flexbox-Layout verwenden */
     align-items: center; /* Elemente vertikal zentrieren */
     justify-content: space-between; /* Abstand zwischen den Elementen */
     width: 100%; /* Volle Breite des Containers */
     padding: 2px; /* Innenabstand */
     background-color: #f0f0f0; /* Hintergrundfarbe */
     border: none; /* Rahmen entfernen */
     cursor: pointer; /* Mauszeiger als Zeiger anzeigen */
/*     display: none;  /* normal/Desktop ausblenden */
   }

/* Korrektur für den Button (Menu-Toggle) */
.menu-toggle {
    width: 100%;           /* Der Button soll im Handy-Modus die volle Breite füllen */
    display: flex;
    justify-content: space-between; /* Verteilt Logo, Text und Hamburger links/rechts */
    align-items: center;
    border: none;
    background: none;
    padding: 10px;
}

   /* Styling für das Logo */
    .menu-toggle .logo {
         height: 30px; /* Höhe proportional anpassen */
         width: auto; /* Breite des Logos */
         margin-right: 10px; /* Abstand zum Text */
   }

   /* Styling für den Text */
   .menu-toggle .menu-text {    /* Text im Hamburger-Menü: "Frühjahrslauf Groß-Gerau" */
        flex-grow: 1; /* Text nimmt den verfügbaren Platz in der Mitte ein */
        font-family: 'urkundenschriftart_gochihand', Verdana, Arial, sans-serif;
        text-align: center; /* Text zentrieren */
        font-size: 18px; /* Schriftgröße 16px passt!*/
        color: #919b1d;
        color:#52971d;      /* Test */
   }

   /* Styling für das Hamburger-Menü-Symbol */
   .menu-toggle .hamburger-icon {
        font-size: 16px; /* Schriftgröße des Symbols */
        margin-left: 10px; /* Abstand zum Text */
   }

/* ^^^^^^^^^^^^^ Hamburger-Menü geändert */
/* Horizontale Darstellung für größere Bildschirme 768*/
@media screen and (min-width: 768px) {  /*  */
    .navbar {
        display: flex; /* Standardanzeige für große Bildschirme */
        flex-direction: row; /* Horizontale Darstellung */
        position: static; /* Position im normalen Layout */
        width: auto; /* Breite an Inhalt anpassen */
        padding: 0px;
        max-width: 100%;
        transition: all 0.3s ease-in-out;
        user-select: none;
    }

    /* Hamburger-Menü-Button ausblenden */
    .menu-toggle {
   /*vvvvvvvvvv neu vvvvvvvvvvvvvvvv */
   /* Grundlegendes Styling für den Button */
        display: flex; /* Flexbox-Layout verwenden */
        align-items: center; /* Elemente vertikal zentrieren */
        justify-content: space-between; /* Abstand zwischen den Elementen */
        width: 100%; /* Volle Breite des Containers */
        padding: 10px; /* Innenabstand */
        background-color: #f0f0f0; /* Hintergrundfarbe */
        border: none; /* Rahmen entfernen */
        cursor: pointer; /* Mauszeiger als Zeiger anzeigen */
        display: none;  /* normal/Desktop ausblenden */
    }

    /* Styling für das Logo */
    .menu-toggle .logo {
        height: 4px; /* Höhe proportional anpassen */
        width: auto; /* Breite des Logos */
        margin-right: 10px; /* Abstand zum Text */
    }

  /* Styling für den Text */
    .menu-toggle .menu-text {
        flex-grow: 1; /* Text nimmt den verfügbaren Platz in der Mitte ein */
        text-align: center; /* Text zentrieren */
        font-family: 'urkundenschriftart_gochihand', Verdana, Arial, sans-serif;
        text-align: center; /* Text zentrieren */
        font-size: 16px; /* Schriftgröße */
        color: #94a010;
        color: #919b1d;
    }

  /* Styling für das Hamburger-Menü-Symbol */
    .menu-toggle .hamburger-icon {
        font-size: 36px; /* Schriftgröße des Symbols */
        margin-left: 8px; /* Abstand zum Text */
    }
} /*  @media screen and (min-width: 769px)  */


@media (orientation: landscape) and (max-device-width: 932px) { 
  /* max-device-width deckt selbst große Smartphones wie iPhone Pro Max ab */
  
  body {
    width: 100% ; 
    margin: 0;
    overflow-x: hidden;
  }

  .container { /* Achte darauf, ob es eine Klasse .container oder ID #container ist */
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
  }
}

/* Erlaubt den Links in der 'jahr-reihe', nebeneinander zu stehen */
.navbar .nav-links ul li ul li.jahr-reihe {
    display: flex;            /* Nebeneinander anordnen */
    justify-content: flex-start; /* Linksbündig */
    gap: 8px;                /* Abstand zwischen den Jahren */
    padding: 2px 5px;        /* Etwas Platz zum Rand */
    white-space: nowrap;     /* Verhindert ungewollte Umbrüche */
}

.navbar .nav-links ul li ul li.jahr-reihe a {
    display: inline-block !important; /* Hebt das globale 'display: block' auf */
    width: auto;                      /* Nur so breit wie die Jahreszahl */
    padding: 4px 6px;                 /* Klickbereich optimieren */
    border: 1px solid rgba(255,255,255,0.2); /* Optional: Leichter Rahmen zur Trennung */
    border-radius: 3px;
    font-size: 0.9em;                 /* Etwas kleiner, damit 3 nebeneinander passen */
}

/* Hover-Effekt für die kleinen Jahres-Kacheln */
.navbar .nav-links ul li ul li.jahr-reihe a:hover {
    background-color: rgb(132, 180, 229);
}