/* Stylesheet für meine in 01/2026 aktualisierte "große" Homepage */
 /* "1" = Eintragungen zum Zwecke dessen, dass der Footer immer "unten" sitzt */
 /* "2" = Eintragungen zum Zwecke dessen, dass das nav-Element #TGA-Themen einen automatischen Umbruch ausführt, wenn die Bildschirmbreite des Gerätes (Viewport) nicht ausreicht */
    html,body {                 /* 1 */
    height:100%;                /* 1 */
    margin:0;                   /* 1 */
    scroll-behavior: smooth;    /* sorgt für langsames "nach oben"-Scrollen */
    }
    body {
    background-color:floralwhite;
    color:blue;
    display:flex;               /* 1 */
    flex-direction:column;      /* 1  (Anordnung "von oben nach unten") */
    }
    header{
     background-color:steelblue;
     color:white;
     padding:1rem;              /* Seitenabstand links */
     position:sticky;
    }
    nav {                       /* formatiert den "Navigations-Container */
     background-color:grey;
     color:white;
     margin-top:0;              /* Abstand nach oben zum Header */
     margin-bottom:0rem;        /* unklar, welcher Abstand nach unten damit reguliert wird (vermutlich der Abstand... */
                                /* ...zum Main-Container) | Ursprungswert:  1.0rem */
    }
    nav a{                      /* Textformatierung der Auswahlthemen im Navigations-Container */
     color:white;               /* Schriftfarbe der Auswahlthemen */
     text-decoration:none;      /* keine Unterstreichung, kein "fett", kein "kursiv" */
     text-align:center;         /* Anordnung der Auswahlthemen "zentriert" */
     display:block;             /* ?? */
     padding:0.5rem;            /* Abstand der Auswahlthemen untereinander */
    }
    nav ul{                     /* Formatierung der ungeordneten Liste (ul) innerhalb des Navigations-Containers */
     list-style-type:none;      /* Aufzählungszeichen der Liste entfernen */
     display:flex;              /* 2 */  /* macht "nav" zu einem Container, in dem die Kind-Elemente (hier: "ul") automatisch nebeneinander dargestellt werden  */
     flex-wrap: wrap;           /* 2 */  /* mit "wrap" wird ein Zeilenumbruch grundsätzlich zugelassen ("nowrap" dagegen verbietet Zeilenumbruch) */
     margin:0;                  /* Abstand nach oben zum Listenelement darüber */
     padding:0;                 /* keine Einrückung der Listenzeichen (wie sonst bei Listen üblich) */
    }
    nav [aria-current] a {
     color: black;
     background: red;           /* Ursprungswert aus CSS-Beispiel: #b0c4de */
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-underline-offset: 0.15em;
    }
    main {
    background-color:floralwhite;
    color:steelblue;
    flex:1;                     /* 1 */
    padding:1rem;               /* Seitenabstand links */
    }
    #TGA-Themen {
    background-color:green;
    }
    #TGA-Themen ul li{          /* Formatierung der ungeordneten Liste (ul) innerhalb des Navigations-Containers */
     list-style:none;           /* Aufzählungszeichen der Liste entfernen */
     margin:0;                  /* Abstand nach oben zum Listenelement darüber */
     padding:0;                 /* keine Einrückung der Listenzeichen (wie sonst bei Listen üblich) */
    }
    .Themen-nav a{              /* Textformatierung der Auswahlthemen im Navigations-Container */
     color:white;               /* Schriftfarbe der Auswahlthemen */
     text-decoration:none;      /* keine Unterstreichung, kein "fett", kein "kursiv" */
     text-align:center;         /* Anordnung der Auswahlthemen "zentriert" */
     padding:0.5rem;            /* Abstand der Auswahlthemen untereinander */
    }
    .under-nav:hover {
     background-color: yellow;  /* Ursprungswert aus CSS-Beispiel: #0056b3; */
     color: black;
    }

    caption {                   /* Text der Tabellenüberschrift formatieren */
     font-size:1.5rem;
     margin-bottom:0.5rem;
     color:steelblue;
     text-align:left;
    }
    table {
     margin-top:1.5rem;
    }
    thead {                     /* Zellen der Tabellenüberschrift formatieren (z.B. Hintergrundfarbe) */
     background-color:grey;
    }
    tbody {                     /* Zellen der Datentabelle formatieren (z.B. Hintergrundfarbe) */
     background-color:whitesmoke;
    }
    th,td {                     /* Textanordnung innerhalb der Zellen formatieren */
     text-align:left
     vertical-align:top;
     padding:0.5rem 1rem;
    }
    footer{
    background-color:steelblue;
    color:white;
    padding:1rem;               /* Seitenabstand links */
    position:sticky;
    }
    footer ul{                  /* Formatierung der ungeordneten Liste (ul) innerhalb des Navigations-Containers */
     list-style-type:none;      /* Aufzählungszeichen der Liste entfernen */
     display:flex;              /* die Kindelemente des Containers "footer" werden automatisch nebeneinander angeordnet  */
     margin:0;                  /* Abstand nach oben zum Listenelement darüber */
     padding:0;                 /* keine Einrückung der Listenzeichen (wie sonst bei Listen üblich) */
    }
    footer a{                   /* Textformatierung der Auswahlthemen im Navigations-Container */
     color:white;               /* Schriftfarbe der Auswahlthemen */
     text-decoration:none;      /* keine Unterstreichung, kein "fett", kein "kursiv" */
     text-align:center;         /* Anordnung der Auswahlthemen "zentriert" */
     display:block;             /* ordnet dem Elternelement "footer" die volle Breite des Viewports zu, und die Kindelemente <a> werden nebeneinander angeordnet */
     padding:0.5rem;            /* Abstand der Auswahlthemen untereinander */
    }
    footer [aria-current] a {
     color: black;
     background: red;           /* Ursprungswert aus CSS-Beispiel: #b0c4de;  */
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-underline-offset: 0.15em;
    }
    .overlay {                  /* Formatierungsangaben zur Einblendung des Dialogfensters auf der geöffneten Webseite... */
     display: none; position: auto; top: 0; left: 0; width: 80%; height: 100%; background: lightgrey; z-index: 1000; border:0.5rem solid white;
    }
    .overlay ul{                /* Formatierung der ungeordneten Liste (ul) innerhalb des Navigations-Containers */
     list-style-type:none;      /* die Auswahlthemen nicht untereinander als Liste sondern nebeneinander (ohne Abstand) und ohne Aufzählungszeichen */
     display:flex;              /* innerhalb des Containers .overlay werden alle Kindelemente nebeneinander dargestellt */
     margin:0;                  /* Abstand nach oben zum Listenelement darüber */
     padding:0;                 /* keine Einrückung der Listenzeichen (wie sonst bei Listen üblich) */
    }

    #meinPopup:target { display: block; color:steelblue; padding:1rem; }

    .back-to-top {
     position: fixed;
     bottom: 20px;              /* Abstand zum unteren Rand */
     right: 20px;               /* Abstand zum rechten Rand */
     background-color: #B0E0E6;
     color: white;
     width: 40px;
     height: 40px;
     text-decoration: none;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;        /* Macht den Button rund */
     font-size: 24px;
     z-index: 1000;             /* damit er über anderen Elementen liegt (tut so, als ob es unter ihm 999 Layer gäbe) */
    }

    .back-to-top:hover {
     background-color: #0056b3;
    }
    .webSiteCreating:hover {
     background-color: #AEEEEE;
     color: black;
    }

    /* 1. Aufzählungszeichen der Liste entfernen */
    #popupButton {
     list-style: none;
    }

    /* 2. Den Link wie einen Button stylen */
    #popupButton a {
     display: inline-block;       /* Ermöglicht Padding und feste Breite */
     padding: 10px 20px;          /* Innenabstand für die Button-Größe */
     background-color: #8DEEE;    /* #007bff;   /* Hintergrundfarbe */
     color: white;                /* Textfarbe */
     text-decoration: none;       /* Unterstreichung entfernen */
     border-radius: 5px;          /* Abgerundete Ecken */
     font-family: sans-serif;
     transition: background 0.3s; /* Weicher Übergang beim Hover */
    }

    /* 3. Hover-Effekt hinzufügen */
    #popupButton a:hover {
     background-color: #0056b3;   /* Dunkler beim Drüberfahren */
    }