/* CSS Document */

* {
    box-sizing: border-box;

}

html {
    padding: 0;
    margin: 0;
    /* Feste Basis-Schriftgröße: ALLE rem-Größen leiten sich hiervon ab. Verankert
       das Layout browserübergreifend auf denselben Wert (Brave/Chromium-Standard 16px),
       unabhängig von Browser-Default oder Nutzer-Einstellung. text-size-adjust verhindert
       zusätzlich die automatische Text-Vergrößerung (v. a. mobil). */
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Scrollbar-Platz IMMER reservieren → die Inhaltsbreite ist in jedem Browser gleich,
       egal ob/wie breit die Scrollbar ist. Behebt unterschiedliche Spaltenzahlen bei
       auto-fit-Grids (z. B. Übersicht: Brave 2, Firefox 3 bei gleicher Fensterbreite). */
    scrollbar-gutter: stable;
}

body {
     padding: 0;
    margin: 0; 

}

#logo{
    position: absolute;
    top: -.2rem;
    max-height: 10rem;
}

#topline{
    display: grid;
    /*margin-bottom: var(--big-margin);*/
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 2rem;

}

#languages {
    display: flex;

    gap: var(--main-padding);
    
    & div{
         padding: 2px 8px ;
    }
    
    & a {
        background-color: #333061;
    }
    
    & a:hover {
        background-color: #89002B;
    }
}



#top{
   display: flex;
   justify-content:center;
   height: 3rem; 

   padding: 1rem 1rem;
}


#nav {
    display: flex;
    flex-wrap: wrap;              /* Kacheln umbrechen bei kleiner Breite */
    justify-content: space-between; /* erstes Item linksbündig, letztes rechtsbündig, Rest gleichmäßig verteilt */
    align-items: flex-start;
    gap: 1rem;                    /* Mindestabstand zwischen Items */
    padding: 1rem;                /* oben und unten gleicher Abstand (symmetrisch zum Inhalt) */
}

/* Jede Kachel bleibt klickbar – linksbündig, nicht gestreckt */
#nav > a {
    flex: 0 0 auto;  /* Kachel nur so breit wie ihr Inhalt (Icon + Titel) */
    text-decoration: none;
    color: inherit;
}

/* Padding wie vorher für inneres div; Breite = Icon + Titel */
#nav > a > div {
    width: fit-content;
    padding: var(--main-padding);
    transition: background-color 0.2s;
}

/* Hover-Farbe für die gesamte Kachel */
#nav > a:hover > div {
    /* background-color: var(--hover-bg-color, #f0f0f0);*/
}

/* Abstand zwischen Titel und Subtext bleibt wie vorher */
#nav .main-menu {
    margin-bottom: .6rem;
    white-space: nowrap;   /* Icon + Titel immer in EINER Zeile → bestimmt die Kachelbreite */
}

/* Kurzbeschreibung an die Titelbreite anpassen: sie trägt selbst 0 zur Breite bei,
   füllt die Kachel dann aber zu 100 % und bricht innerhalb dieser Breite um. */
#nav .mnu-sub-text {
    width: 0;
    min-width: 100%;
}


#main{

    padding: 2rem;
}
#left{
    padding: var(--main-padding);
}
#mid{
    padding: var(--main-padding);
}
#right{
    padding: var(--main-padding);
}
#bottom{
    display: grid;
    /*margin-bottom: var(--big-margin);*/
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 2rem;
    
    & > div {

        flex-grow: 0; 
        flex-shrink: 1; 
        flex-basis: calc(25% - (var(--main-padding) * 0.75));
        max-width: 500px;
        box-sizing: border-box;
    }
    
}

.img-border{
    display: block;
    max-width: 100%;
}

#main img {
    max-width: 100%;
    margin-bottom: 1rem;
}
#bottom img{
    max-width: 100%;

}

.columns {
    /*padding-top: 4rem; */
    column-width: 400px;  /* Mindestbreite pro Spalte */
    column-gap: 4rem;     /* Abstand zwischen den Spalten */
    column-rule: 1px solid var(--column-ruler-color); /* Strich zwischen den Spalten */
}

.columns > * {
    margin-top: 0;
    padding-top: 0;
}

article {
    margin-bottom: 4rem;
}

.box-light{
    padding: 1rem;
    border: thin dashed white;
    
    margin-bottom: 1rem;
}

.box {
    padding: 1rem;
    border: 2px solid white;
    
    margin-bottom: 1rem;
}

.grid3Cols {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas: 
        "left center right";
    gap: 2rem;
}

/* Den Items Namen geben über Klassen.
   min-width:0 = die Grid-Spalten dürfen NICHT durch breite Inhalte auseinander-
   gedrückt werden (z. B. Firefox setzt <select> so breit wie die längste Option).
   So bleibt das 1fr-4fr-1fr-Verhältnis in JEDEM Browser gleich; Inhalt schrumpft. */
.grid3Cols .left   { grid-area: left;   min-width: 0; }
.grid3Cols .center { grid-area: center; min-width: 0; }
.grid3Cols .right  { grid-area: right;  min-width: 0; }
/* WICHTIG: Die Mittel-Spalte ist ein KLASSENLOSER <div> – daher min-width:0 auf
   ALLE direkten Grid-Kinder, sonst wächst die Mitte (Firefox-Select-Mindestbreite)
   und drückt die rechte Menüspalte zusammen. */
.grid3Cols > div, .grid2Cols > div, .grid1Cols > div { min-width: 0; }



.grid2Cols {
    display: grid;
    grid-template-columns: 5fr 1fr;
    grid-template-areas: 
        "center right";
    gap: 2rem;
}

/* Items mit Grid Areas benennen (min-width:0 → siehe grid3Cols oben) */
.grid2Cols .center { grid-area: center; min-width: 0; }
.grid2Cols .right  { grid-area: right;  min-width: 0; }

h1, h2, h3, h4, h5, h6 {
    text-align: left;   /* alle Überschriften linksbündig (vorher war h1 zentriert) */
}

/* Mobile Anpassung */
@media (max-width: 768px) {
    
    .body {
        font-size: 2rem;
    }
    
    .grid2Cols {
        grid-template-columns: 1fr;   /* nur eine Spalte */
        grid-template-areas: 
            "center"
            "right";                  /* rechte Spalte darunter */
        gap: 1rem;
    }

    .grid2Cols .center,
    .grid2Cols .right {
        width: 100%;                 /* volle Breite */
    }
    
    .grid3Cols {
        grid-template-columns: 1fr;   /* nur eine Spalte */
        grid-template-areas: 
            "center"
            "right";                  /* Spalte 3 unter Spalte 2 */
        gap: 1rem;
    }

    .grid3Cols .left img {
        display: none;               /* Spalte 1 bilder ausblenden */
    }

    .grid3Cols .center,
    .grid3Cols .right {
        width: 100%;                 /* volle Breite */
    }
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]),
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    line-height: 1.5;
    color: #111;
    background-color: #fff;
    border: none;

    padding: .4rem .65rem;
    width: 100%;
    display: block;
    outline: none;
    transition: border-color 0.2s;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]):focus,
textarea:focus,
select:focus {
    border-color: var(--topline-color);
}

.notice {
    display:block;
    justify-content: center;
    padding: 1rem;
    
    margin-bottom: 1rem;
}