/* CSS für GUTES-AUS-CHINA */
     html {
            scroll-behavior: smooth;
        }



   /* Nur den *-Selektor ändern, aber p und Listen ausschließen */
* {
    box-sizing: border-box;
}



/* Optional: Konsistente Abstände setzen */
p {
    margin: 1em 0;
    line-height: 1.5;
}

ul, ol {
    margin: 1em 0;
    padding-left: 40px;
}

li {
    margin: 0.5em 0;
    line-height: 1.5;
}

    body {
        font-family: 'Geneva', Arial, Helvetica, Verdana, sans-serif;
        background: #d9d9d9;
        color: #000000;
        font-size: 110%;
        margin: 10px;
        padding: 10px 0;
        line-height: 1.4;
    }

    /* Verhindert Margin-Collapsing für alle direkten Body-Kinder */
    body > * {
        display: flow-root;
    }

    /* ANFANG Sternchen als Link */
    .star-link-block {
        display: block;
        text-decoration: none;
        color: inherit;
        text-align: center;
        cursor: pointer;
        font-size: 140%;
        font-weight: normal;
        color: #eaeaea;
        background-color: transparent;
        margin: 0;
        padding: 10px 0;
        position: relative;
        width: 100%;
        transition: all 0.3s ease;
    }

    .star-link-block:hover,
    .star-link-block:focus {
        background-color: rgba(255, 215, 0, 0.1);
        border-radius: 8px;
        transform: scale(1.01); 
    }

    .link-line {
        display: block;
        line-height: 1.4;
    }

    .middle-line {
        position: relative;
        margin: 0.5rem 0;
    }

    .middle-text {
        display: inline-block;
        font-size:160%;
    }

    .star {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: clamp(1rem, 2vw, 1.5rem);
        color: #ffd700;
    }

    /* Dynamische Positionierung basierend auf Textbreite */
    .star.left {
        left: calc(50% - var(--text-width) / 2 - var(--text-width) / 4);
    }

    .star.right {
        right: calc(50% - var(--text-width) / 2 - var(--text-width) / 4);
    }
    /* ENDE Sternchen als Link */

    h1 {
        font-size: 140%;
        background-color: transparent;
        text-align: center;
        color: #484848;
        font-weight: normal;
    }

    h2 {
        font-size: 110%;
        background-color: transparent;
        color: #484848;
        font-weight: bold;
        text-decoration:underline;
        text-align:center;
    }

    .wech {
        display: none;
    }

    .nichtwech {
    }

    .round {
        border-radius: 9px;
    }

    .nobr {
        white-space: nowrap;
    }

    .link_nav {
        color: #000000;
        background-color: transparent;
        text-decoration:none;
        font-size:160%
    }    

    #box_wrapper {
        display: block;
        width: 100%;
        max-width: 800px;
        table-layout: fixed;
        border-spacing: 2px;
        background-color: #5788bf;
    }

.box_zeile {
    display: block;
    border-radius: 9px;
    padding: 10px;
}

    /* ===== BEREICHE MIT GLEICHEN 10PX ABSTÄNDEN ===== */

    /* SEO-Link verstecken, aber für Suchmaschinen sichtbar */
.seo-main-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    color: transparent;
}



#menue:hover {
    background-color: rgba(27, 127, 73, 0.95);
}

    #menue {
        background-color: #1b7f49; 
        border: 1px solid #1b7143;
        width: 100%;
        max-width: 800px;
        margin: 0 auto 20px auto;
        color: #ffffff;
        padding: 0;
        position: relative;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    		a.lnk_menue:link, a.lnk_menue:visited {
            font-family: 'Geneva', Arial, Helvetica, Verdana, sans-serif;
			color: #eaeaea;
            background-color:transparent;
			text-decoration:none;
            font-size:110%;
		}


        a.lnk_nav:link, a.lnk_nav {
            font-family: 'Geneva', Arial, Helvetica, Verdana, sans-serif;
			color: #000000;
            background-color:transparent;
			text-decoration:none;
            font-size:120%;
		}

        a.lnk_inhalt:link, a.lnk_inhalt:visited {
            font-family: 'Geneva', Arial, Helvetica, Verdana, sans-serif;
			color: #0e92de;
            background-color:transparent;
			text-decoration:underline;
		}

    

    #mitte {
        width: 100%;
        max-width: 800px;
        margin: 0 auto 20px auto;
        border: 1px solid #8c8c8c;
        min-height: 600px;
        color: #484848;
        background-color: #ffffff;
        padding: 10px;
        overflow-wrap: break-word;
    word-wrap: break-word;
    }


/* MOBILE OPTIMIERUNG */
@media (max-width: 768px) {
    #mitte a {
        word-break: break-word;
        hyphens: auto;
    }
    
    #mitte a[href*="://"] {
        display: inline-block;
        max-width: 100%;
    }
}

    #fuss {
        max-width: 800px;
        color: #eaeaea;
        text-align: center;
        margin: 0 auto 20px auto;
        background-color: #1b7f49;
        border: 1px solid #1b7143;
        padding: 10px;
    }

    .grid-50-50 {
        display: grid;
        grid-template-columns: 50% 50%;
        width: 100%;
    }

    .grid-spalte {
        padding: 5px;
        box-sizing: border-box;
        transition: all 0.3s ease; /* WICHTIG: Übergangseffekt */
        border-radius: 9px; /* WICHTIG: Für den runden Hover-Effekt */
        cursor: pointer; /* Zeigt an, dass es interaktiv ist */
    }

    .grid-1 {
        text-align: left;
        background-color: transparent;
        border-radius: 9px;
    }

    .grid-2 {
        background-color: transparent;
        text-align: right;
        margin-left: 3px;
        border-radius: 9px;
    }


    .grid-1:hover,
    .grid-1:focus,
    .grid-2:hover,
    .grid-2:focus {
        background-color: #70a7de !important; 
        transform: scale(1.01); 
    }


    #fuss_test {
        max-width: 800px;
        text-align: center;
        margin: 0 auto 20px auto;
        border: 1px solid #105f35;
        background-color: #305d8f;
        padding: 10px;
    }



b, strong {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700 !important;
}

i, em {
    font-style: italic !important;
}

u {
    text-decoration: underline !important;
}