/* ========= Layout-Grundstruktur ========= */
.eg-clearfix::after {
      content: "";
      display: table;
      clear: both;
}

.eg-container {
      max-width: 100%;
      padding: 0 2%;
}

.eg-row {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
}

/* zentrierter Überschrift */
.eg-gallery h1 {
      text-align: center;
      margin-bottom: 2%;
}

/* ========= Breitenklassen ========= */
.eg-w10 {
      width: 10%;
}

.eg-w20 {
      width: 20%;
}

.eg-w25 {
      width: 25%;
}

.eg-w30 {
      width: 30%;
}

.eg-w33 {
      width: 33.333%;
}

.eg-w40 {
      width: 40%;
}

.eg-w50 {
      width: 50%;
}

.eg-w60 {
      width: 60%;
}

.eg-w66 {
      width: 66.666%;
}

.eg-w70 {
      width: 70%;
}

.eg-w75 {
      width: 75%;
}

.eg-w80 {
      width: 80%;
}

.eg-w90 {
      width: 90%;
}

.eg-w100 {
      width: 100%;
}

/* ========= Float-Klassen ========= */
.eg-float-left {
      float: left;
}

.eg-float-right {
      float: right;
}

/* ========= Textausrichtung ========= */
.eg-text-left {
      text-align: left;
}

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

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

/* ========= Margin / Padding Utilities ========= */
.eg-mt-0 {
      margin-top: 0;
}

.eg-mt-1 {
      margin-top: 1%;
}

.eg-mt-2 {
      margin-top: 2%;
}

.eg-mb-0 {
      margin-bottom: 0;
}

.eg-mb-1 {
      margin-bottom: 1%;
}

.eg-mb-2 {
      margin-bottom: 2%;
}

.eg-pt-0 {
      padding-top: 0;
}

.eg-pt-1 {
      padding-top: 1%;
}

.eg-pt-2 {
      padding-top: 2%;
}

.eg-pb-0 {
      padding-bottom: 0;
}

.eg-pb-1 {
      padding-bottom: 1%;
}

.eg-pb-2 {
      padding-bottom: 2%;
}

/* ========= Flex Utilities ========= */

/* Display */
.eg-flex {
      display: flex;
}

.eg-inline-flex {
      display: inline-flex;
}

/* Flex Direction */
.eg-flex-row {
      flex-direction: row;
}

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

/* Wrapping */
.eg-flex-wrap {
      flex-wrap: wrap;
}

.eg-flex-nowrap {
      flex-wrap: nowrap;
}

/* Align Items */
.eg-items-start {
      align-items: flex-start;
}

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

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

.eg-items-stretch {
      align-items: stretch;
}

/* Justify Content */
.eg-justify-start {
      justify-content: flex-start;
}

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

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

.eg-justify-between {
      justify-content: space-between;
}

.eg-justify-around {
      justify-content: space-around;
}

.eg-justify-evenly {
      justify-content: space-evenly;
}

/* ========= Bilder ========= */
img.eg-full-width {
      width: 100%;
      height: auto;
      display: block;
}

/* ========= Responsive Verhalten ========= */
@media screen and (max-width: 768px) {

      /* Flex Layout bei kleinen Geräten anpassen */
      .eg-flex {
            flex-direction: column !important;
      }

      /* Überschreibe nur was sinnvoll ist */
      .eg-w30,
      .eg-w40,
      .eg-w50,
      .eg-w60,
      .eg-w66,
      .eg-w70,
      .eg-w75 {
            width: 100% !important;
      }

      /* Float aufheben */
      .eg-float-left,
      .eg-float-right {
            float: none !important;
      }

      /* Zentrierung für Inhalte */
      .eg-text-center,
      .eg-text-right {
            text-align: left !important;
      }

      /* Optionale Anpassung für Hero-Text */
      .eg-hero-text-inner {
            padding: 0 5%;
            text-align: center;
      }

      .eg-hero-text-inner h1,
      .eg-hero-text-inner p {
            margin-left: auto;
            margin-right: auto;
      }
}