*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Wichtig, um Padding und Border in die Breite mit einzubeziehen */
}

html {
  scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;  /* Sections werden vertikal gestapelt */
    justify-content: flex-start;  /* Sections werden von oben nach unten platziert */
    -webkit-font-smoothing: antialiased;
  }
  
.section {
    width: 100%;  /* Volle Breite des Viewports */
    height: var(--device-height);  /* Volle Höhe des Viewports */
    display: flex;
    overflow: hidden;
  }

.container {
    width: 100%;
    height: 100%;
    display: grid;
    margin: 0 var(--spacing-side);
    border-radius: var(--border-radius-large);
  }

.gridbox {
    position: relative;
    display: flex;
    height: 100%;
}

a {
  text-decoration: none;
  color: var(--primary-text-color);
  }

  a:visited {
    color: none;/* AUS */
  }

/* Primary-Menü */
.container--header {
  margin: var(--spacing-none);
  border-radius: 0;
}

.sub-menu {
  list-style-type: none;
}

.glasmorph {
  backdrop-filter: blur(4.5px);
  -webkit-backdrop-filter: blur(4.5px);
}

  /* Sectionheights */
  .section--full-height {
    height: var(--device-height);
  }

  .section--1-4-height {
    height: calc(var(--device-height) * 0.25);
  }

  .section--half-height {
    height: calc(var(--device-height) * 0.5);
  }

  .section--3-4-height {
    height: calc(var(--device-height) * 0.75);
  }

  .section--fit-height {
    height: auto;
  }


  /* Layoutsysteme */
  .container--1-column {
    grid-template-columns: 1fr;
  }

  .container--2-column {
    grid-template-columns: 1fr 1fr;  /* Zwei gleich große Spalten */
    grid-gap: var(--spacing-md);
  }
  
  .container--3-column {
    grid-template-columns: 1fr 1fr 1fr;  /* Drei gleich große Spalten */
    grid-gap: var(--spacing-md);
  }

  .container--4-column {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: var(--spacing-md);
  }

  .container--2-sidebar-left {
    grid-template-columns: 2fr 1fr;  /* 2/3 Hauptinhalt, 1/3 Sidebar */
    grid-gap: var(--spacing-md);
  }

  .container--2-sidebar-right {
    grid-template-columns: 1fr 2fr;  /* 1/3 Sidebar, 2/3 Hauptinhalt */
    grid-gap: var(--spacing-md);
  }
  
  .container--1-2-column {
    grid-template-rows: 1fr 1fr;           /* Zwei Zeilen: eine oben, eine unten */
    grid-template-columns: 1fr 1fr;        /* Unten zwei Spalten */
    grid-template-areas: 
      "box1 box1"
      "box2 box3";                        /* Layout-Bereiche für oben und unten */
    grid-gap: var(--spacing-md);            /* Abstand zwischen Zeilen und Spalten */
  }  

  .container--1-3-column {
    grid-template-rows: 1fr 1fr;  /* Zwei Zeilen */
    grid-template-columns: 1fr 1fr 1fr;   /* Eine Spalte oben */
    grid-template-areas: 
    "box1 box1 box1"
    "box2 box3 box4";  
  }

  .container--1-2-sidebar-right {
    grid-template-rows: 1fr 1fr;  /* Zwei Zeilen */
    grid-template-columns: 1fr 1fr 1fr;   /* Eine Spalte oben */
    grid-template-areas: 
    "box1 box1 box1"
    "box2 box2 box3";  
  }

  .container--1-2-sidebar-left {
    grid-template-rows: 1fr 1fr;  /* Zwei Zeilen */
    grid-template-columns: 1fr 1fr 1fr;   /* Eine Spalte oben */
    grid-template-areas: 
    "box1 box1 box1"
    "box3 box2 box2";  
  }

  .container--grid-gallery {
    grid-template-columns: repeat(auto-fill, 250px);
    grid-template-rows: repeat(auto-fill, 150px);
    align-content: space-between; 
    justify-content: space-between;
  }
  
@media (max-width: 768px) {
  .container--1-column,
  .container--2-column,
  .container--3-column,
  .container--4-column,
  .container--2-sidebar-left,
  .container--2-sidebar-right,
  .container--1-2-column,
  .container--1-3-column,
  .container--1-2-sidebar-right,
  .container--1-2-sidebar-left {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0 25px;  /* Oder so viel wie du brauchst */
    box-sizing: border-box;
  }

  [data-mobile-index="0"] { order: 1; }
  [data-mobile-index="1"] { order: 2; }
  [data-mobile-index="2"] { order: 3; }
  [data-mobile-index="3"] { order: 4; }
  [data-mobile-index="4"] { order: 5; }
  [data-mobile-index="5"] { order: 6; }
  [data-mobile-index="6"] { order: 7; }
  [data-mobile-index="7"] { order: 8; }
  [data-mobile-index="8"] { order: 9; }
  [data-mobile-index="9"] { order: 10; }
  [data-mobile-index="10"] { order: 11; }
  [data-mobile-index="11"] { order: 12; }
  [data-mobile-index="12"] { order: 13; }
  [data-mobile-index="13"] { order: 14; }
  [data-mobile-index="14"] { order: 15; }
  [data-mobile-index="15"] { order: 16; }
}

@media (min-width: 76px) and (max-width: 1024px) {
  .container--4-column, .container--3-column {
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--spacing-md);
  }
}
/* Grid-Areas */
/* Gridbereich für die gridbox--1 bis gridbox--20, weitere bei Bedarf ergänzen */
.gridbox--box1 {
  grid-area: box1;
}

.gridbox--box2 {
  grid-area: box2;
}

.gridbox--box3 {
  grid-area: box3;
}

.gridbox--box4 {
  grid-area: box4;
}

.gridbox--box5 {
  grid-area: 5;
}

.gridbox--box6 {
  grid-area: 6;
}

.gridbox--box7 {
  grid-area: 7;
}

.gridbox--box8 {
  grid-area: 8;
}

.gridbox--box9 {
  grid-area: 9;
}

.gridbox--box10 {
  grid-area: 10;
}

.gridbox--box11 {
  grid-area: 11;
}

.gridbox--box12 {
  grid-area: 12;
}

.gridbox--box13 {
  grid-area: 13;
}

.gridbox--box14 {
  grid-area: 14;
}

.gridbox--box15 {
  grid-area: 15;
}

.gridbox--box16 {
  grid-area: 16;
}

.gridbox--box17 {
  grid-area: 17;
}

.gridbox--box18 {
  grid-area: 18;
}

.gridbox--box19 {
  grid-area: 19;
}

.gridbox--box20 {
  grid-area: 20;
}




  /* Ausrichtungen */
  /* Grid-Positionierung */
  .gridbox--top {
    grid-area: top;                        /* Obere Spalte nimmt die volle Breite */
    background-color: yellow;
  }
  
  .gridbox--left {
    grid-area: left;                       /* Linke Spalte unten */
    background-color: lightgreen;

  }
  
  .gridbox--right {
    grid-area: right;                      /* Rechte Spalte unten */
    background-color: lightblue;

  }

  .gridbox--center {
    grid-area: center;
    background-color: lightcoral;

  }

  /* Flex-Ausrichtugn */
  .gridbox--row {
    flex-direction: row;
  }

  .gridbox--column {
    flex-direction: column;
  }

  /* Content-ALignment im Flex */
  .gridbox--justify-start {
    justify-content: flex-start;
  }

  .gridbox--justify-center {
    justify-content: center;
  }

  .gridbox--justify-end {
    justify-content: flex-end;
  }

  .gridbox--justify-space-between {
    justify-content: space-between; /* funktioniert in CSS formal nicht für align-items */
  }
  .gridbox--justify-space-around {
    justify-content: space-around;  /* ebenso kein offizieller Wert für align-items */
  }
  .gridbox--justify-space-evenly {
    justify-content: space-evenly;  /* ebenso kein offizieller Wert für align-items */
  }

  .gridbox--align-start {
    align-items: flex-start;
  }

  .gridbox--align-center {
    align-items: center;
  }

  .gridbox--align-end {
    align-items: flex-end;
  }



/* Display-Verhalten */

/* 1) .hidden => IMMER ausgeblendet */
.hidden {
  display: none !important;
}

/* -----------------------------
   3) DESKTOP-BEREICH
   ab 1024px
   ----------------------------- */
@media (min-width: 1024px) {
  /* "no-desktop" => Hier NICHT sichtbar */
  .no-desktop {
    display: none !important;
  }

  /* Mobile-only, Tablet-only => hier verstecken */
  .mobile-only,
  .tablet-only {
    display: none !important;
  }
}

/* -----------------------------
   4) TABLET-BEREICH
   768px bis 1023px
   ----------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  /* "no-tablet" => Hier NICHT sichtbar */
  .no-tablet {
    display: none !important;
  }

  /* Desktop-only, Mobile-only => hier verstecken */
  .desktop-only,
  .mobile-only {
    display: none !important;
  }
}

/* -----------------------------
   5) MOBILE-BEREICH
   bis 767px
   ----------------------------- */
@media (max-width: 767px) {
  /* "no-mobile" => Hier NICHT sichtbar */
  .no-mobile {
    display: none !important;
  }

  /* Desktop-only, Tablet-only => hier verstecken */
  .desktop-only,
  .tablet-only {
    display: none !important;
  }
}



/* Header-Verhalten */

/* Normal Header (verhält sich wie eine normale Section) */
.header-normal {
  position: relative;
  width: 100%;
  z-index: 999;
}

/* Fixed Header (bleibt immer oben im Viewport fixiert) */
.header-fixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

.header-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0; 
  width: 100%;
  z-index: 999;
  animation: none !important;
  transition: none !important;
}

/* Scroll-hide Header */
.header-scroll-hide { 
  transition: all 0.5s ease; 
  position: fixed; 
  top: 0;
  width: 100%;
  z-index: 999;
}

/* Scroll-reveal Header */
/* Coming soon */

/* Header-Animations */
/* Javascript only */


.section:not(.header-sticky) {
  opacity: 0;
  transition: opacity 0.8s linear, transform 0.8s linear;
}

/* 
  2) Sobald .is-visible gesetzt wird, 
     fährt das Element in den Endzustand (sichtbar, Originalgröße).
*/
.section:not(.header-sticky).is-visible {
  opacity: 1;
}

.text-align-left {
  text-align: left;
}

.text-align-center {
  text-align: center;
}

.text-align-right {
  text-align: right;
}