/**
 * CONTAO GRID ENGINE & LAYOUT UTILITIES
 * -----------------------------------------------------------------------------
 * 
 * 
 * [1] grid-3      : Erzeugt 3 gleichm��ige Spalten (fest).
 * [2] grid-auto   : Intelligente Automatik (min. 300px), bricht selbstst�ndig um.
 * [3] grid-2-1    : Asymmetrisch (2/3 Links, 1/3 Rechts).
 * [4] full-width  : Bricht aus dem zentrierten Layout auf 100% Bildschirmbreite aus.
 * -----------------------------------------------------------------------------
 */

/* Basis-Grid-Logik */
[class*="grid-"] {
    display: grid !important;
    gap: var(--grid-gap, 2rem);
    align-items: start;
}

/* [1] 3-Spalten-Layout (Starr) */
.grid-3 { 
    grid-template-columns: repeat(3, 1fr); 
}
.grid-4 { 
    grid-template-columns: repeat(4, 1fr); 
}



/* [2] Automatik-Layout (Flexibel & Responsive ohne Media Queries) */
.grid-auto { 
    grid-template-columns: repeat(auto-fit, 
    minmax(var(--col-width, 300px), 1fr)); 

}

/* [3] Asymmetrisches Layout (Fokus Links) */
.grid-2-1 { 
    grid-template-columns: 2fr 1fr; 
}

/* [4] Full-Width Breakout (f�r Hintergrund-Sektionen) */
.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-block: 4rem;
}

/* Sicherstellen, dass Inhalt in Full-Width zentriert bleibt */
.full-width > .inside, 
.full-width > div {
    max-width: var(--max-width);
    margin-inline: auto;
    
}

.info-top{
padding-block: 10px 20px;
writing-mode: horizontal-tb;}

#top-custom {
border-bottom: 1px solid rgba(44, 95, 153, 0.2);
font-size: 0.9em; 
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000; 
   background-color: white; 
  box-shadow: 0 10px 30px -5px rgba(44, 95, 153, 0.15);}

/* Responsive Fix: Alle Grids werden auf Mobile einspaltig */
@media (max-width: 768px) {
    [class*="grid-"], 
    .grid-2-1 { 
        grid-template-columns: 1fr !important; 
    }
}