/* Stylesheet für meine in 01/2026 aktualisierte, kleine Homepage "under construction" */
 /* "1" = Eintragungen zum Zwecke dessen, dass der Footer immer "unten" sitzt */
    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;  /* die Auswahlthemen nicht untereinander als Liste sondern nebeneinander (ohne Abstand)... */
                                                                                    /* ...und ohne Aufzählungszeichen */
     display:flex;          /* flexible Anpassung der Darstellung auf die Bildschirmeinstellungen... */
                                              /* ...(Größe + Pixelauflösung) des genutzten Gerätes  */
     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;           /* #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 */
    }
    .Themen-nav a {
     display:inline-block;
    }
    .Themen-nav ul{   /* Formatierung der ungeordneten Liste (ul) innerhalb des Navigations-Containers */
     list-style:none;  /* die Auswahlthemen nicht untereinander als Liste sondern nebeneinander (ohne Abstand)... */
                                                                                    /* ...und ohne Aufzählungszeichen */
     display:flex;          /* flexible Anpassung der Darstellung auf die Bildschirmeinstellungen... */
                                              /* ...(Größe + Pixelauflösung) des genutzten Gerätes  */
     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:black;           /* 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 */
    }

    .under-nav:hover {
     background-color: yellow;/* #0056b3; */
     color: black;
    }
    /*.Infoblock {
     background-color:red;
     color:steelblue;
     flex:1;   */           /* 1 */
     /* padding:1rem;
    } */
    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;  /* die Auswahlthemen nicht untereinander als Liste sondern nebeneinander (ohne Abstand)... */
                                                                                    /* ...und ohne Aufzählungszeichen */
     display:flex;          /* flexible Anpassung der Darstellung auf die Bildschirmeinstellungen... */
                                              /* ...(Größe + Pixelauflösung) des genutzten Gerätes  */
     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;         /* ?? */
     padding:0.5rem;        /* Abstand der Auswahlthemen untereinander */
    }
    footer [aria-current] a {
     color: black;
     background: red; /* #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;          /* flexible Anpassung der Darstellung auf die Bildschirmeinstellungen... */
                                              /* ...(Größe + Pixelauflösung) des genutzten Gerätes  */
     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 */
    }

    .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 */
    }
    /* ... Styling für .popup-content ... */

    /* ab hier Formatierungen zum Info-Fenster "Dialog"
    dialog[open] {
        width: 20em;
        background: #fffbf0;
        border: thin solid #e7c157;
        margin: 5em auto;
    }

    button {
        padding: 0.5em 1em;
        font-size: 1em;
        background: #666;
        border: thin solid #333;
        color: white;
        cursor: pointer;
    }

    #close-dialog {
        background: #c82f04
        }

    [role=note] {
        border-left: medium solid #c82f04;
        padding-left: 0.5em;
        }

    [role=note]:before {
        content: 'Beachten:  ';
        color: #c82f04;
        font-weight: blod;
        }

    dialog, button {
        border-radius: 0 .5em .5em;
        border: thin solid;
        padding: .5em;
        margin: .5em;
        }